/* =========================================================
   ENHANCE.CSS — extra polish layer
   Scroll progress, back-to-top, tilt cards, magnetic buttons,
   marquee strip, cursor spotlight, animated blobs, shine sweep
   ========================================================= */

/* ---------- subtle grain texture (premium, tactile feel) ---------- */
.grain-overlay{
  position: fixed;
  inset: 0;
  z-index: 1999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- page fade-in ---------- */
body{
  animation: page-fade .6s ease both;
}
@keyframes page-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--sky-500), var(--violet));
  z-index: 2000;
  transition: width .1s linear;
  box-shadow: 0 0 10px rgba(255,75,75,.5);
}

/* ---------- back to top ---------- */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-500), var(--sky-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sky);
  z-index: 900;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.85);
  pointer-events: none;
  transition: all .35s ease;
}
.back-to-top.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover{
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 18px 34px rgba(47,123,255,.45);
}

/* ---------- animated / drifting blobs ---------- */
.blob{
  animation: blob-drift 14s ease-in-out infinite;
}
.blob-b{ animation-duration: 18s; animation-direction: reverse; }
@keyframes blob-drift{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(24px, -18px) scale(1.06); }
  66%{ transform: translate(-18px, 14px) scale(0.96); }
}

/* ---------- cursor spotlight (hero sections) ---------- */
.spotlight{
  position: relative;
  isolation: isolate;
}
.spotlight::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 20%), rgba(47,123,255,.14), transparent 65%);
  opacity: 0;
  transition: opacity .4s ease;
}
.spotlight:hover::after{ opacity: 1; }

/* ---------- shine sweep on primary buttons ---------- */
.btn-sky, .cta-band .btn-sky{
  position: relative;
  overflow: hidden;
}
.btn-sky::before{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-sky:hover::before{ left: 130%; }

/* ---------- magnetic wrapper (JS sets translate via inline style) ---------- */
.magnetic{ display: inline-flex; will-change: transform; transition: transform .25s ease; }

/* ---------- tilt cards ---------- */
.tilt{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out, box-shadow .3s ease;
}
.tilt .tilt-shine{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.tilt:hover .tilt-shine{ opacity: 1; }

/* ---------- marquee strip ---------- */
.marquee-wrap{
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 56px;
}
.marquee-wrap::before, .marquee-wrap::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before{ left: 0; background: linear-gradient(90deg, var(--bg-tint), transparent); }
.marquee-wrap::after{ right: 0; background: linear-gradient(270deg, var(--bg-tint), transparent); }

.marquee-track{
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sky-700);
  white-space: nowrap;
}
.marquee-item i{ color: var(--sky-400); font-size: 12px; }
.marquee-item .sep{ color: var(--sky-200); margin-left: 38px; }

@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- animated underline for nav-style links ---------- */
.link-underline{
  position: relative;
}
.link-underline::after{
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0%;
  height: 2px;
  background: var(--sky-500);
  transition: width .3s ease;
}
.link-underline:hover::after{ width: 100%; }

/* ---------- glow pulse for eyebrow dot (used already) extra pulse ---------- */
.eyebrow::before{ animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{
  0%, 100%{ box-shadow: 0 0 0 4px var(--sky-100); }
  50%{ box-shadow: 0 0 0 8px rgba(47,123,255,.12); }
}

/* ---------- soft floating icons (reused on hero-float, badges) ---------- */
.floaty{ animation: floaty-y 3.6s ease-in-out infinite; }
@keyframes floaty-y{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------- gradient text shimmer for hero highlight ---------- */
.shimmer-text{
  background: linear-gradient(100deg, var(--sky-500), var(--violet), var(--sky-500));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-move 5s linear infinite;
}
@keyframes shimmer-move{
  to{ background-position: 200% center; }
}

/* ---------- count-up number styling (no visual change, hook for JS) ---------- */
[data-count]{ font-variant-numeric: tabular-nums; }

/* ---------- image reveal wipe on scroll ---------- */
.img-wipe{
  position: relative;
  overflow: hidden;
}
.img-wipe::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--sky-400), var(--sky-700));
  z-index: 2;
  transform-origin: right;
  transform: scaleX(0);
}
.img-wipe.in-view::before{
  animation: wipe-reveal 1s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes wipe-reveal{
  0%{ transform: scaleX(0); transform-origin: left; }
  50%{ transform: scaleX(1); transform-origin: left; }
  50.1%{ transform-origin: right; }
  100%{ transform: scaleX(0); transform-origin: right; }
}

@media (max-width: 700px){
  .back-to-top{ width: 44px; height: 44px; right: 16px; bottom: 16px; }
}