/* Fan Fusion design lab, round 4: f4 "Champagne Noir, one motion language".
   Loaded last. Every entrance, hover and press on the page uses the tokens below, nothing else.
   Entrance = fade + small rise (the independent `translate` property, so it never fights a hover transform),
   staggered by whatever enters the viewport together. Triggered once by the single IntersectionObserver in site.js.
   g1: the fly-through is gone; the self-drawn graphics in g1-motion.css/.js use the same tokens (the JS evaluates --ease). */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);   /* the one curve */
  --dur: 650ms;                              /* every entrance */
  --stagger: 70ms;                           /* one step between siblings */
  --rise: 20px;                              /* one distance */
  --dur-hover: 220ms;                        /* hover, focus, colour changes (1/3 of --dur) */
  --dur-press: 110ms;                        /* press (1/2 of hover) */
  --lift: -2px;                              /* hover lift for every button and card */
  --nudge: 3px;                              /* arrow icons inside links, buttons, guides */
  --seam: clamp(72px, 9vw, 140px);           /* soft fade between section backgrounds */
  --sec: clamp(72px, 8vw, 112px);            /* one vertical rhythm for every section */
}
@media (max-width: 760px) { :root { --sec: 64px; --rise: 16px; } }

/* ------------------------------------------------------------ 1) entrances: one rule for everything */
@keyframes ff-in { from { opacity: 0; translate: 0 var(--rise) 0; } to { opacity: 1; translate: 0 0 0; } }
html.js .rv-wait:not(.rv-in) { opacity: 0; translate: 0 var(--rise) 0; }
html.js .rv-in { animation: ff-in var(--dur) var(--ease) calc(var(--i, 0) * var(--stagger)) backwards; }
/* the old one-off reveal of the base CSS is not used any more */
html.js [data-reveal].is-pending:not(.is-in), html.js [data-reveal-stagger].is-pending:not(.is-in) > * { transform: none; opacity: 1; }


/* nothing else moves on its own: no pings, no shine, no running scroll hint, no tilted paper */
.live::after { animation: none; }
.btn--primary::after { display: none; }
.tsheet, .tsheet .tsheet__paper { transform: none; }

/* ------------------------------------------------------------ 2) hover + press: the same everywhere */
a { transition: color var(--dur-hover) var(--ease); }
.btn {
  transition: transform var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn:hover, .btn--primary:hover { transform: translate3d(0, var(--lift), 0); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 250, 240, .28), 0 10px 26px -16px rgba(217, 195, 160, .38); } /* shadow never animates */
.btn:active, .btn--primary:active { transform: translate3d(0, 0, 0); transition-duration: var(--dur-press); }
.guide, .promise, .channel, .glass {
  transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.guide:hover, .promise:hover, .channel:hover { transform: translate3d(0, var(--lift), 0); border-color: rgba(217, 195, 160, .36); }
.guide:active, .promise:active, .channel:active { transform: translate3d(0, 0, 0); transition-duration: var(--dur-press); }
.guide:hover, .promise:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.btn .i, .link-arrow .i, .clause .i, .guide__go, .nav__trigger .i { transition: transform var(--dur-hover) var(--ease); }
.btn:hover .i, .link-arrow:hover .i, .clause:hover .i, .guide:hover .guide__go { transform: translate3d(var(--nudge), 0, 0); }
.btn--tg:hover .i { transform: none; }
.chip, .seg button, .choice span, .faq__q button, .nav__link, .nav__trigger, .footer__col a, .agebar button {
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.faq__icon { transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.nav__menu { transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), visibility var(--dur-hover); }
.navtoggle__bars span { transition-duration: var(--dur-hover); transition-timing-function: var(--ease); }
.plans__dots span, .plans[data-carousel] .plan > * { transition-duration: var(--dur-hover); transition-timing-function: var(--ease); }
.stickybar { transition: transform var(--dur) var(--ease); }

/* ------------------------------------------------------------ 3) seams: every section starts and ends on the page black */
.section, .globe { padding-block: var(--sec); }
#sound-familiar { padding-top: var(--sec); }
.section--alt {
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-alt) var(--seam), var(--bg-alt) calc(100% - var(--seam)), var(--bg) 100%);
}
.section--band {
  border: 0;
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-alt) var(--seam), var(--bg-alt) calc(100% - var(--seam)), var(--bg) 100%);
}
.section--band::before { display: none; }
.globe {
  border: 0;
  background: radial-gradient(70% 60% at 25% 50%, rgba(217, 195, 160, .05), transparent 70%),
              linear-gradient(180deg, var(--bg) 0, var(--inset) var(--seam), var(--inset) calc(100% - var(--seam)), var(--bg) 100%);
}
/* last section hands over to the footer colour, glow sits inside the section instead of at its edge */
.section--glow {
  background: radial-gradient(900px 460px at 50% 62%, rgba(217, 195, 160, .09), transparent 70%),
              linear-gradient(180deg, var(--bg) 0, var(--bg-alt) var(--seam), var(--bg-alt) calc(100% - var(--seam) * 1.5), var(--inset) 100%);
}
.footer { border-top: 0; }

/* ------------------------------------------------------------ 4) reduced motion: nothing moves, everything visible */
@media (prefers-reduced-motion: reduce) {
  html.js .rv-wait:not(.rv-in) { opacity: 1; translate: none; animation: none; }
  .rv-in { animation: none; }
  .btn:hover, .guide:hover, .promise:hover, .channel:hover { transform: none; }
}