/* ==========================================================================
   Ubuntu Auditors — immersive layer (depth, 3D, motion).
   Every effect is GPU-only (transform/opacity), reduced-motion-safe, and
   inert without JS. Reveal hooks are added by fx.js at runtime, so nothing
   is ever hidden when JS is off or motion is reduced.
   ========================================================================== */

:root {
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --fx-reveal: 640ms;
}

/* --- Scroll reveal (applied only when fx.js marks the element) ----------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx-ready [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(26px);
  }
  html.fx-ready [data-reveal] {
    transition: opacity var(--fx-reveal) var(--ease-out-quint),
                transform var(--fx-reveal) var(--ease-out-quint);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  html.fx-ready [data-reveal].is-in { opacity: 1; transform: none; }

  /* images inside a revealed block ease in with a touch of scale */
  html.fx-ready [data-reveal-img]:not(.is-in) img { transform: scale(1.06); }
  html.fx-ready [data-reveal-img] img { transition: transform 900ms var(--ease-out-expo); }
}

/* --- 3D tilt -------------------------------------------------------------- */
.fx-tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 420ms var(--ease-out-quint), box-shadow 420ms var(--ease-out-quint);
  transform-style: preserve-3d;
}
.fx-tilt.is-tilting { transition: transform 80ms linear, box-shadow 420ms var(--ease-out-quint); }
.fx-tilt.is-tilting {
  box-shadow: 0 24px 60px -20px hsl(var(--primary) / .35);
  border-color: hsl(var(--secondary) / .5);
}
/* a soft moving sheen that tracks the pointer on tilted cards */
.fx-tilt { position: relative; }
.fx-tilt > .fx-sheen {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), hsl(var(--secondary) / .14), transparent 60%);
  opacity: 0; transition: opacity 420ms var(--ease-out-quint); z-index: 1;
}
.fx-tilt.is-tilting > .fx-sheen { opacity: 1; }
.fx-tilt > *:not(.fx-sheen) { position: relative; z-index: 2; }

/* --- Generative constellation canvas (hero + navy CTA bands) ------------- */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ua-hero { position: relative; }
.ua-hero > .container, .ua-hero > div.relative { position: relative; z-index: 2; }

/* --- Ambient radial glow on dark sections -------------------------------- */
.fx-glow { position: relative; isolation: isolate; }
.fx-glow::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 18% 12%, hsl(var(--secondary) / .16), transparent 70%),
    radial-gradient(45% 60% at 85% 90%, hsl(var(--accent) / .14), transparent 72%);
}
.fx-glow > * { position: relative; z-index: 1; }

/* faint grain to keep large navy fields from banding */
.fx-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Parallax layers ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .fx-parallax { will-change: transform; }
}

/* --- Magnetic buttons ----------------------------------------------------- */
.fx-magnetic { transition: transform 360ms var(--ease-out-quint); }

/* --- Nav: scrolled / condensed glass state -------------------------------- */
nav[aria-label="Primary"] { transition: box-shadow 320ms var(--ease-out-quint), background-color 320ms var(--ease-out-quint); }
nav[aria-label="Primary"].nav-scrolled {
  box-shadow: 0 10px 30px -16px hsl(var(--primary) / .35);
  background-color: hsl(var(--background) / .85);
}
@media (prefers-reduced-motion: no-preference) {
  nav[aria-label="Primary"].nav-scrolled .h-20 { height: 4rem; transition: height 320ms var(--ease-out-quint); }
  nav[aria-label="Primary"] .h-20 { transition: height 320ms var(--ease-out-quint); }
}

/* count-up keeps numerals from reflowing as digits change */
[data-countup] { font-variant-numeric: tabular-nums; }

/* hover lift for cards that are not tilt-driven (touch / coarse pointer) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fx-lift { transition: transform 320ms var(--ease-out-quint), box-shadow 320ms var(--ease-out-quint); }
  .fx-lift:hover { transform: translateY(-4px); }
}

/* ==========================================================================
   Immersive scroll + 3D layer (added in the design revamp).
   Every effect is GPU-only, reduced-motion-safe, and inert without JS.
   ========================================================================== */

/* --- Scroll progress bar (fx.js appends .scroll-progress) ----------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; pointer-events: none;
  background: linear-gradient(90deg, hsl(var(--secondary)), hsl(var(--brand-blue)));
  box-shadow: 0 0 12px hsl(var(--secondary) / .55); will-change: width;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* --- Scroll-scrub parallax (fx.js sets --p 0..1 on the element) ----------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx-ready [data-scrub-img] { overflow: hidden; }
  html.fx-ready [data-scrub-img] img { will-change: transform; transform: translate3d(0, calc((var(--p, .5) - .5) * -46px), 0) scale(1.1); }
}

/* --- Marquee (trust strip) ------------------------------------------------ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.marquee-seg { display: inline-flex; align-items: center; gap: .9rem; padding-right: .9rem; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: ua-marquee 36s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes ua-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { animation: none; } }

/* --- Sticky scrollytelling scene (fx.js drives .is-active + --scene-p) ----- */
.scene { position: relative; }
.scene-step-body { will-change: opacity, transform; }
@media (prefers-reduced-motion: no-preference) {
  html.fx-ready .scene { min-height: 340vh; }
  html.fx-ready .scene-inner { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
  html.fx-ready .scene-step { transition: opacity .45s var(--ease-out-quint); }
  html.fx-ready .scene-step:not(.is-active) { opacity: .3; }
  html.fx-ready .scene-step:not(.is-active) .scene-step-body { opacity: 0; transform: translateY(6px); max-height: 0; overflow: hidden; margin: 0; }
  html.fx-ready .scene-step .scene-step-body { transition: opacity .45s var(--ease-out-quint), transform .45s var(--ease-out-quint), max-height .45s var(--ease-out-quint); max-height: 220px; }
  /* the big stage numeral cross-fades via the active index */
  html.fx-ready .scene-stage-num { transition: transform .5s var(--ease-out-expo), opacity .5s; }
}
.scene-num { font-variant-numeric: tabular-nums; }

/* a touch more glare on tilted cards (the "responsive 3D" highlight) */
.fx-tilt > .fx-sheen { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), hsl(var(--secondary) / .20), transparent 62%); }