/* ==========================================================================
   FX layer — additive motion and polish on top of styles.css.
   Nothing here changes structure, wording, figures or links.
   To undo everything: remove the fx.css <link>, the one-line pagereveal
   script next to it, and the fx.js <script> from the six HTML pages.
   Every effect is skipped under prefers-reduced-motion (no .js-motion class).
   ========================================================================== */

/* ---- 1. Page-to-page transitions (home <-> licenses / terms / privacy) ----
   The header stays put while the page content cross-fades with a small rise,
   instead of the browser's hard cut. Browsers without support just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: fx-vt-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fx-vt-in 0.46s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fx-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(16px); } }
/* Arriving through a transition: the header is already on screen, so it must
   not drop in from the top a second time. */
.fx-vt.js-motion .site-header { animation: none; }

/* ---- 2. Header: glass deepens once the page has scrolled ----
   Colour and blur only — the height never changes, so nothing below jumps. */
.site-header { transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.site-header.scrolled {
  background: rgba(10, 11, 13, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: rgba(0, 197, 91, 0.22);
}

/* ---- 3. Nav: one indicator glides between links ----
   Replaces the separate underline on each link (desktop mouse only). */
@media (min-width: 901px) {
  .fx-nav .site-header nav { position: relative; }
  .fx-nav .nav-links a::after { display: none; }
  .fx-nav-ind {
    position: absolute; left: 0; top: 0; height: 2px; width: 40px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--amber-bright) 20%, var(--amber-bright) 80%, transparent);
    box-shadow: 0 0 12px rgba(84, 221, 125, 0.75);
    opacity: 0; pointer-events: none; transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  .fx-nav-ind.is-on { opacity: 1; }
}
@media (max-width: 900px) { .fx-nav-ind { display: none; } }

/* ---- 4. Hero: slow aurora behind the engine card ---- */
.hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 760px; height: 560px; right: -160px; top: -170px;
  background:
    radial-gradient(closest-side, rgba(0, 197, 91, 0.22), transparent 72%),
    radial-gradient(closest-side at 28% 74%, rgba(84, 221, 125, 0.12), transparent 70%);
  filter: blur(44px);
}
.js-motion .hero::after { animation: fx-aurora 17s ease-in-out infinite alternate; }
@keyframes fx-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-90px, 50px, 0) scale(1.12); }
  100% { transform: translate3d(40px, 110px, 0) scale(0.94); }
}
@media (max-width: 920px) { .hero::after { width: 460px; height: 380px; right: -140px; top: -120px; } }

/* ---- 5. Hero: the gold words catch the light once, after they rise ---- */
.js-motion .hero h1 .amber .split-i {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 42%, #fff1c2 50%, var(--gold) 58%, var(--gold) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-gold-sweep 1.5s ease-in-out both;
  animation-delay: calc(var(--i, 0) * 55ms + 1250ms);
}
@keyframes fx-gold-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---- 6. Hero: copy drifts and dims as you scroll past it ----
   Runs off the scrollbar itself (no JavaScript). Unsupported browsers skip it. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 921px) {
    .js-motion .hero-grid > div:first-child {
      animation: fx-hero-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 220px 780px;
    }
  }
}
@keyframes fx-hero-out { to { opacity: 0.35; transform: translateY(64px); } }

/* ---- 7. Featured plan: a light orbits the card edge ---- */
@property --fx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.js-motion .plan.featured::before {
  /* A ring only: the mask cuts the middle out (it is applied after the blur),
     so the light shows around the edge and never washes over the card text. */
  inset: -10px; padding: 12px; border-radius: 22px;
  background: conic-gradient(from var(--fx-angle), transparent 0deg 190deg, var(--amber) 245deg, var(--amber-bright) 290deg, #fff1c2 312deg, var(--amber) 332deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.78; filter: blur(9px);
  animation: fx-orbit 7s linear infinite;
}
@keyframes fx-orbit { to { --fx-angle: 360deg; } }

/* ---- 8. FAQ: answers open and close at their real height ----
   The old max-height trick animated toward 2600px, so short answers snapped
   open and lagged shut. Grid rows animate to exactly the content height. */
.faq-a {
  display: grid; grid-template-rows: 0fr; max-height: none; visibility: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.5s;
}
.faq-a-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; padding-bottom: 0; }
/* The 20px gap under an answer lives in a pseudo-element: real padding would
   keep every closed answer 20px tall. */
.faq-a-inner::after { content: ''; display: block; height: 20px; }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; max-height: none; visibility: visible; transition-delay: 0s, 0s; }
.faq-item[data-open="true"] .faq-a-inner { opacity: 1; transition-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a-inner { transition: none; }
}

/* ---- 9. Small things ---- */
/* Buttons answer the press, not only the hover */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
/* Headings break into even lines instead of leaving one word alone */
h1, h2, h3 { text-wrap: balance; }
/* Brand-coloured text selection and scrollbar */
::selection { background: rgba(0, 197, 91, 0.32); color: #fff; }
html { scrollbar-color: #26313a var(--bg); }