/* Radia — motion layer. Loaded after styles.css, paired with motion.js.
   Lenis plumbing, the scan-line, the shimmer, and a few overrides so the
   JS-driven transforms never fight the CSS keyframes. Reduced-motion safe. */

/* ----- Lenis smooth-scroll plumbing ----- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- When GSAP is driving, hand it the wheel ----- */
.gsap-motion .reveal { transition: none; }            /* GSAP tweens opacity/transform itself */
.gsap-motion .hero-glow { animation: none; }          /* GSAP owns the hero glow now */
.gsap-motion .btn-primary { transition: box-shadow .25s, background .25s; } /* magnetic owns transform */

/* ----- Scan-line sweep over the phone (the skin-scan beat) ----- */
.phone { overflow: hidden; }                          /* clip the scan-line to the device */
.scanline {
  position: absolute; left: 0; right: 0; top: 2%; height: 66px;
  z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(252,231,220,0) 28%, rgba(255,255,255,.92) 50%,
    rgba(252,231,220,0) 72%, transparent 100%);
  box-shadow: 0 0 26px 8px var(--glow);
}

/* ----- Shimmer across the hero gradient headline ----- */
.shimmer { background-size: 220% auto; animation: radia-shimmer 6s linear infinite; }
@keyframes radia-shimmer { to { background-position: 220% center; } }

/* ===================================================================
   Two-phone scan -> result hero  (the conversion centerpiece)
   =================================================================== */
.hero-duo {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 4vw, 54px); margin-top: 54px; padding: 10px 4px 0;
}
.duo-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, 92vw); height: 470px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 64%); filter: blur(16px);
}
.scan-wrap, .result-wrap { position: relative; z-index: 2; animation: duoFloat 6.5s ease-in-out infinite; }
.result-wrap { z-index: 3; animation-delay: -2.3s; }
@keyframes duoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.scan-phone   { width: clamp(176px, 23vw, 236px); transform: rotate(-3deg); }
.result-phone { width: clamp(196px, 25vw, 262px); transform: rotate(2.5deg); }

/* the hand-built scan screen */
.scan-screen {
  position: relative; width: 100%; aspect-ratio: 605 / 1280; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 22%, #FFF7EF, #F3E2D6 70%, #ecd5c6);
  display: grid; place-items: center;
}
.scan-face { width: 56%; opacity: .9; }
.scan-frame { position: absolute; inset: 22% 18%; }
.scan-frame i { position: absolute; width: 24px; height: 24px; border: 2.6px solid var(--a4); opacity: .9; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.scan-phone .scanline {
  mix-blend-mode: normal; height: 58px;
  background: linear-gradient(to bottom, transparent, rgba(226,113,77,0) 32%,
    rgba(226,113,77,.95) 50%, rgba(226,113,77,0) 68%, transparent);
  box-shadow: 0 0 22px 7px var(--glow);
}
.scan-status {
  position: absolute; bottom: 6.5%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  display: flex; align-items: center; gap: 8px; background: rgba(255,251,248,.92);
  border: 1px solid var(--n1); border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-float);
}
.scan-status .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--a4); animation: scanPulse 1.2s ease-in-out infinite; }
@keyframes scanPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }

/* connector arc */
.duo-arc {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%);
  width: clamp(86px, 12vw, 144px); height: auto; z-index: 4; pointer-events: none; overflow: visible;
}
.duo-arc path { stroke-dasharray: 280; stroke-dashoffset: 280; animation: drawArc 1.1s cubic-bezier(.16,1,.3,1) .5s forwards; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }

/* result chips hug the result phone */
.result-wrap .chip { position: absolute; }
.result-wrap .chip.score { top: 8%; left: -15%; }
.result-wrap .chip.hydra { bottom: 17%; right: -12%; }

@media (max-width: 720px) {
  .hero-duo { flex-direction: column; gap: 10px; }
  .scan-wrap, .result-wrap { animation: none; }
  .scan-phone, .result-phone { transform: none; }
  .duo-arc { display: none; }
  .result-wrap .chip { display: none; }
}

/* ===== social-proof bar ===== */
.proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.avstack { display: flex; }
.avstack .av {
  width: 38px; height: 38px; border-radius: 50%; margin-left: -11px; border: 2.5px solid var(--canvas);
  display: grid; place-items: center; color: #fff; font-family: 'Quicksand', sans-serif;
  font-weight: 700; font-size: 13px; box-shadow: var(--shadow-float);
}
.avstack .av:first-child { margin-left: 0; }
.proof-txt { color: var(--n5); font-weight: 600; font-size: 14px; }
.proof-txt .stars { color: var(--a4); letter-spacing: 2px; margin-right: 6px; }
.proof-txt strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .scanline { display: none; }
  .shimmer { animation: none; }
  .scan-wrap, .result-wrap { animation: none; }
  .scan-status .sdot { animation: none; }
  .duo-arc path { animation: none; stroke-dashoffset: 0; }
}