/* ===========================================================
   Deskrune — cinematic motion layer
   Builds on theme.css and visual-pass.css. Adds:
     - Easing token system
     - Aurora canvas mount
     - Scroll-driven reveal (IntersectionObserver classes)
     - Headline split-text reveal
     - Magnetic CTA + hover-lift cards
     - Animated link underlines + focus rings

   Brand voice: quiet, competent. Slow easing curves, low-contrast
   motion, never bouncy. Targets feel of Linear / Stripe / Apple.

   prefers-reduced-motion: ALL animations off. Static end-state visible.
   2026-05-08
   =========================================================== */

:root {
  --ease-out-soft:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-snap:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-quiet:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Aurora canvas mount ─── */
.aurora-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Slight blur softens the gradient blobs further */
  filter: blur(40px) saturate(1.05);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-soft);
}
.aurora-stage.aurora-ready canvas { opacity: 1; }

/* Hero needs to host an aurora behind its content */
.hero-vp {
  position: relative;
  isolation: isolate;
}
.hero-vp .hero-inner-vp,
.hero-vp > * {
  position: relative;
  z-index: 1;
}
.hero-vp .aurora-stage { z-index: 0; }

/* Subtle vignette over the aurora to keep text readable */
.hero-vp::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 25% 30%, transparent 0%, var(--ds-bg) 80%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ─── Scroll reveal ─── */
.cinematic [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms var(--ease-out-soft),
    transform 700ms var(--ease-out-soft);
  will-change: opacity, transform;
}
.cinematic [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger when a parent is the reveal trigger */
.cinematic [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms var(--ease-out-soft),
    transform 600ms var(--ease-out-soft);
  will-change: opacity, transform;
}
.cinematic [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.cinematic [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 60ms; }
.cinematic [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 140ms; }
.cinematic [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 220ms; }
.cinematic [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }
.cinematic [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 380ms; }
.cinematic [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 460ms; }

/* ─── Split-text headline reveal ─── */
.cinematic [data-split] {
  display: block;
}
.cinematic [data-split] .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.cinematic [data-split] .split-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 900ms var(--ease-out-soft),
    opacity 900ms var(--ease-out-soft);
  will-change: transform, opacity;
}
.cinematic [data-split].is-revealed .split-inner {
  transform: translateY(0);
  opacity: 1;
}
/* Stagger word-by-word */
.cinematic [data-split].is-revealed .split-word:nth-child(1)  .split-inner { transition-delay: 40ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(2)  .split-inner { transition-delay: 110ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(3)  .split-inner { transition-delay: 180ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(4)  .split-inner { transition-delay: 250ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(5)  .split-inner { transition-delay: 320ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(6)  .split-inner { transition-delay: 390ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(7)  .split-inner { transition-delay: 460ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(8)  .split-inner { transition-delay: 530ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(9)  .split-inner { transition-delay: 600ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(10) .split-inner { transition-delay: 670ms; }
.cinematic [data-split].is-revealed .split-word:nth-child(n+11) .split-inner { transition-delay: 740ms; }

/* Brand-emphasis: one word in the headline can carry coral hue */
.cinematic [data-split] .split-emph .split-inner {
  color: var(--ds-accent);
}

/* ─── Magnetic CTA + hover lift ─── */
.cinematic .magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition:
    transform 280ms var(--ease-out-soft),
    background-color 200ms var(--ease-quiet),
    box-shadow 280ms var(--ease-out-soft),
    border-color 200ms var(--ease-quiet);
  will-change: transform;
}
.cinematic .magnetic:hover {
  box-shadow:
    0 18px 36px -8px color-mix(in srgb, var(--ds-accent) 36%, transparent),
    0 1px 3px rgba(0,0,0,0.08);
}
.cinematic .magnetic:active {
  transform: translate3d(var(--mx), var(--my), 0) scale(0.98);
}

/* Soft hover-lift cards (additive on top of visual-pass.css) */
.cinematic .tool-card,
.cinematic .live-product,
.cinematic .product-rich,
.cinematic .audience-card,
.cinematic .quote-card {
  transition:
    transform 380ms var(--ease-out-soft),
    border-color 240ms var(--ease-quiet),
    box-shadow 380ms var(--ease-out-soft);
  will-change: transform;
}
.cinematic .tool-card:hover,
.cinematic .live-product:hover,
.cinematic .product-rich:hover,
.cinematic .audience-card:hover,
.cinematic .quote-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px -16px color-mix(in srgb, var(--ds-ink) 14%, transparent),
    0 2px 6px rgba(0,0,0,0.04);
}

/* Animated underline on nav + body links (subtle, slides in on hover) */
.cinematic nav .links a {
  position: relative;
  border-bottom: 0 !important;
}
.cinematic nav .links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--ds-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 320ms var(--ease-out-soft);
}
.cinematic nav .links a:hover::after { transform: scaleX(1); }

/* Section reveal — sections that are marked get a one-shot fade-in
   the first time they enter the viewport. Subsequent scroll keeps them shown. */
.cinematic section.section[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out-soft),
    transform 900ms var(--ease-out-soft);
}
.cinematic section.section[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Soft section divider — a single hairline that draws in from center */
.cinematic .section-divider {
  display: block;
  width: 0;
  height: 1px;
  margin: 0 auto;
  background: var(--ds-rule);
  transition: width 1.2s var(--ease-out-soft);
}
.cinematic .section-divider.is-visible { width: 80px; }

/* ─── Hero product card: subtle tilt on hover ─── */
.cinematic .hero-product-card {
  transition:
    transform 480ms var(--ease-out-soft),
    box-shadow 480ms var(--ease-out-soft),
    border-color 240ms var(--ease-quiet);
}
.cinematic .hero-product-card:hover {
  transform: translateY(-3px) rotateX(0.2deg) rotateY(-0.4deg);
  box-shadow:
    0 36px 80px -20px color-mix(in srgb, var(--ds-accent) 26%, transparent),
    0 2px 8px rgba(0,0,0,0.05);
}

/* ─── Scroll progress line at top ─── */
.cinematic .deskrune-scroll-line {
  background: linear-gradient(90deg,
    var(--ds-accent) 0%,
    var(--ds-accent-hover) 100%);
  height: 2px;
  opacity: 0.85;
}

/* ─── Sale banner: slight breathing motion (very subtle) ─── */
.cinematic .deskrune-sale-banner .deskrune-countdown {
  animation: ds-pulse-soft 3.6s var(--ease-in-out-soft) infinite;
}
@keyframes ds-pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* ─── Custom focus ring (designed, not browser default) ─── */
.cinematic *:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 4px;
  border-radius: var(--ds-r-sm);
  box-shadow: 0 0 0 6px var(--ds-focus-ring);
  transition: box-shadow 160ms var(--ease-quiet);
}

/* ─── Reduced motion: kill ALL of the above ─── */
@media (prefers-reduced-motion: reduce) {
  .cinematic [data-reveal],
  .cinematic [data-reveal-stagger] > *,
  .cinematic [data-split] .split-inner,
  .cinematic section.section[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cinematic [data-split] .split-word { overflow: visible; }
  .cinematic .magnetic,
  .cinematic .tool-card,
  .cinematic .live-product,
  .cinematic .product-rich,
  .cinematic .audience-card,
  .cinematic .quote-card,
  .cinematic .hero-product-card {
    transition: none !important;
    transform: none !important;
  }
  .cinematic nav .links a::after { display: none; }
  .cinematic .deskrune-sale-banner .deskrune-countdown { animation: none; }
  .aurora-stage canvas { animation: none; opacity: 0.6; }
  .aurora-stage[data-static-only="false"] canvas { opacity: 0.5; }
}