/* ============================================================
   AIPocket.fun — 2026 Motion Layer
   Scroll-driven reveals · aurora blobs · magnetic CTAs · tilt
   character splits · view transitions · color-mix shimmer
   Honors [data-motion="off"] + prefers-reduced-motion.
   ============================================================ */

/* ---------- View Transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--mango) 0%,
    var(--hibiscus) 38%,
    var(--mangosteen) 70%,
    var(--lagoon) 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: multiply;
  box-shadow: 0 0 18px color-mix(in srgb, var(--mango) 60%, transparent);
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-fill linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-fill {
    to { transform: scaleX(1); }
  }
}

/* ---------- Cursor glow (desktop only) ---------- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mango) 22%, transparent) 0%,
    transparent 60%);
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 400ms ease;
  filter: blur(28px);
  will-change: transform, opacity;
}
[data-theme="dark"] .cursor-glow { mix-blend-mode: screen; }
@media (hover: hover) and (pointer: fine) {
  .cursor-glow.active { opacity: 1; }
}

/* ---------- Aurora blobs behind hero ---------- */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora .blob {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  will-change: transform;
}
[data-theme="dark"] .aurora .blob {
  mix-blend-mode: screen;
  opacity: 0.38;
  filter: blur(100px);
}
/* Static aurora positions — drift animations removed because Lighthouse
   counts transformed positions toward CLS even though the transform is
   composited. Opacity pulse keeps motion alive without shifting layout. */
.aurora .blob { contain: layout paint; }
.aurora .b1 { background: var(--mango);     top: -18%; left: -12%; animation: blob-breathe 16s ease-in-out infinite alternate; }
.aurora .b2 { background: var(--hibiscus);  top:  35%; right: -18%; animation: blob-breathe 22s ease-in-out -6s infinite alternate; }
.aurora .b3 { background: var(--lagoon);    bottom: -22%; left: 22%; animation: blob-breathe 28s ease-in-out -12s infinite alternate; }
.aurora .b4 { background: var(--turmeric);  top: -8%; right: 14%; width: 36vmax; height: 36vmax; opacity: 0.32; animation: blob-breathe 20s ease-in-out -4s infinite alternate; }

@keyframes blob-breathe {
  0%   { opacity: 0.42; }
  100% { opacity: 0.62; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity   880ms cubic-bezier(.2,.7,.2,1),
    transform 880ms cubic-bezier(.2,.7,.2,1),
    filter    560ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity   720ms cubic-bezier(.2,.7,.2,1),
    transform 720ms cubic-bezier(.2,.7,.2,1),
    filter    480ms cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.in > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 40ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 110ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 250ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 390ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 460ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 530ms; }

/* ---------- Magnetic CTAs ---------- */
.btn, .sticker-btn, .satellite {
  --mx: 0;
  --my: 0;
  --tilt: 0;
  transition:
    transform 420ms cubic-bezier(.2,.7,.2,1),
    box-shadow 240ms ease,
    background 200ms ease,
    color 200ms ease;
}
.magnetic.active {
  transform: translate3d(var(--mx), var(--my), 0) rotate(var(--tilt));
}
.sticker-btn.magnetic.active {
  transform: rotate(-2deg) translate3d(var(--mx), var(--my), 0);
}

/* ---------- Tilt cards ---------- */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.tilt.active {
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform 120ms linear;
}
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y),
    color-mix(in srgb, var(--coconut) 32%, transparent) 0%,
    transparent 38%);
  opacity: 0;
  transition: opacity 300ms ease;
  mix-blend-mode: overlay;
}
.tilt.active::after { opacity: 1; }

/* ---------- Character-split text reveal ---------- */
.char-split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(8deg);
  filter: blur(8px);
  transition:
    opacity   620ms cubic-bezier(.2,.7,.2,1),
    transform 620ms cubic-bezier(.2,.7,.2,1),
    filter    420ms cubic-bezier(.2,.7,.2,1);
}
.char-split.in .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}
.char-split .char.space { width: 0.28em; }

/* ---------- Sticker float (continuous) ---------- */
.floating-sticker {
  animation: sticker-float 6s ease-in-out infinite;
  will-change: transform;
}
.floating-sticker:nth-of-type(1) { animation-delay: 0s;   animation-duration: 7s; }
.floating-sticker:nth-of-type(2) { animation-delay: -1.5s; animation-duration: 8s; }
.floating-sticker:nth-of-type(3) { animation-delay: -3s;   animation-duration: 6.5s; }
.floating-sticker:nth-of-type(4) { animation-delay: -4.2s; animation-duration: 7.5s; }
@keyframes sticker-float {
  0%, 100% { transform: var(--base-rot, rotate(0)) translateY(0); }
  50%      { transform: var(--base-rot, rotate(0)) translateY(-12px); }
}

/* ---------- Bento tile shimmer + lift ---------- */
.tile {
  position: relative;
  isolation: isolate;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    color-mix(in srgb, var(--coconut) 28%, transparent) 50%,
    transparent 70%);
  transform: translateX(-110%);
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 1;
}
.tile:hover::before {
  opacity: 1;
  animation: shimmer 1100ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes shimmer {
  to { transform: translateX(110%); }
}
.tile {
  transition:
    transform 420ms cubic-bezier(.2,.7,.2,1),
    box-shadow 420ms cubic-bezier(.2,.7,.2,1);
}
.tile:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 30px 60px -20px rgba(26,23,20,0.22);
}

/* ---------- Pillar portrait — pulse ring on hover ---------- */
.pillar-portrait {
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.pillar:hover .pillar-portrait {
  transform: scale(1.018);
}
.pillar-portrait::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 460ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.pillar:hover .pillar-portrait::after {
  opacity: 1;
  transform: scale(1);
  animation: ring-spin 24s linear infinite;
}
@keyframes ring-spin {
  to { transform: scale(1) rotate(360deg); }
}

/* ---------- Marquee — pause on hover ---------- */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Section ghost parallax ---------- */
@supports (animation-timeline: view()) {
  .ghost {
    animation: ghost-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes ghost-drift {
    from { transform: translateX(-6%); }
    to   { transform: translateX(6%); }
  }
}

/* ---------- Nav floating pill — solidify on scroll ---------- */
.nav-wrap { transition: top 360ms cubic-bezier(.2,.7,.2,1); }
.nav-pill {
  transition:
    background 380ms ease,
    box-shadow 380ms ease,
    border-color 380ms ease,
    padding 380ms cubic-bezier(.2,.7,.2,1);
}
body.scrolled .nav-pill {
  background: color-mix(in srgb, var(--coconut) 92%, transparent);
  box-shadow: 0 12px 40px -12px rgba(26,23,20,0.18);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
}
body.scrolled .nav-wrap { top: 12px; }

/* ---------- Sticker pop on entrance ---------- */
.sticker, .floating-sticker {
  animation: sticker-pop 540ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes sticker-pop {
  0%   { transform: var(--base-rot, rotate(0)) scale(0.6); opacity: 0; }
  100% { transform: var(--base-rot, rotate(0)) scale(1);   opacity: 1; }
}

/* ---------- Btn primary — depth + glow on hover ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%),
    color-mix(in srgb, var(--mango) 65%, transparent) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover {
  box-shadow:
    0 14px 30px -8px color-mix(in srgb, var(--mango) 45%, transparent),
    3px 3px 0 var(--mango);
}

/* ---------- Orbit core — breath + halo ---------- */
.orbit-core {
  animation: core-breath 5.5s ease-in-out infinite;
}
@keyframes core-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.025); }
}
.orbit-stage::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 60%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mango) 22%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  animation: halo-pulse 4s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); }
}

/* ---------- Heartbeat / readout numbers — pulse on change ---------- */
@keyframes value-flash {
  0%   { color: var(--mango); }
  100% { color: inherit; }
}
.readout-cell .v { transition: color 600ms ease; }

/* ---------- Hero h1 — gradient sweep on the squiggle word ---------- */
.hero h1.display .squiggle {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M0 6 Q 15 0 30 6 T 60 6 T 90 6 T 120 6' fill='none' stroke='%23FF6B35' stroke-width='3' stroke-linecap='round'/></svg>");
  background-size: 200% 8px;
  animation: squiggle-shift 6s linear infinite;
}
@keyframes squiggle-shift {
  to { background-position: -200% 100%; }
}

/* ---------- Eyebrow dot — pulsing accent ---------- */
.eyebrow .dot {
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--mango) 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mango) 0%,  transparent); }
}

/* ---------- Pricing pop card — float ---------- */
.price-card.pop {
  animation: card-bob 7s ease-in-out infinite;
}
@keyframes card-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Token-stream — glow on lines ---------- */
.token-line {
  text-shadow: 0 0 18px color-mix(in srgb, var(--mango) 18%, transparent);
}

/* ---------- Final CTA — looping conic gradient ring ---------- */
.final-cta {
  position: relative;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(900px, 90vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    var(--mango), var(--hibiscus), var(--mangosteen),
    var(--lagoon), var(--jade), var(--turmeric), var(--mango));
  filter: blur(80px);
  opacity: 0.18;
  z-index: 0;
  animation: conic-spin 18s linear infinite;
  pointer-events: none;
}
[data-theme="dark"] .final-cta::before { opacity: 0.28; }
@keyframes conic-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.final-cta .container { position: relative; z-index: 1; }

/* ---------- Mobile motion trim (≤720px) ---------- */
@media (max-width: 720px) {
  /* Hide expensive blob blur + conic spin on mobile — GPU savings */
  .aurora .b2,
  .aurora .b3,
  .aurora .b4 { display: none; }
  .aurora .b1 {
    filter: blur(50px);
    width: 70vmax;
    height: 70vmax;
    opacity: 0.42;
  }
  .final-cta::before { display: none; }
  .orbit-stage::after {
    filter: blur(28px);
    width: 50%;
    height: 50%;
  }
  /* Disable cursor glow on touch — saves rAF + paint */
  .cursor-glow { display: none; }
  /* Bento shimmer + tilt shine off on mobile — touch can't trigger hover anyway,
     but defensive in case of hybrid laptop/touch */
  .tile::before,
  .tilt::after { display: none; }
  /* Token stream lighter on mobile */
  .token-stream { opacity: 0.25; }
  .token-line { animation-duration: 36s !important; }
  /* Strip will-change from non-animating elements to free GPU memory */
  .reveal,
  .reveal-stagger > *,
  .lang-chip,
  .floating-sticker { will-change: auto; }
}

/* ---------- Reduced motion / off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-stagger > *, .char-split .char { opacity: 1 !important; filter: none !important; transform: none !important; }
}
[data-motion="off"] .aurora .blob,
[data-motion="off"] .orbit-stage::after,
[data-motion="off"] .final-cta::before,
[data-motion="off"] .cursor-glow {
  animation: none !important;
}
[data-motion="off"] .reveal,
[data-motion="off"] .reveal-stagger > *,
[data-motion="off"] .char-split .char {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}