/* =========================================================================
 * Elysium — Motion tokens
 * ------------------------------------------------------------------------
 * Extracted from Redox HTML template v1.0.4 (themelock distribution),
 * normalized + retuned for Elysium's slower, more deliberate cadence.
 *
 *   Redox originals               Elysium tokens
 *   -----------------------       -----------------------------------
 *   power2.out (GSAP default)     --ease-out-power2  cubic-bezier(0.16, 1, 0.3, 1)
 *   power2.in                     --ease-in-power2   cubic-bezier(0.4,  0, 0.84, 0)
 *   power4.out                    --ease-out-quart   cubic-bezier(0.16, 1, 0.3, 1)
 *   CustomEase (registered)       --ease-elysium     cubic-bezier(0.65, 0.05, 0.36, 1)
 *   fade-anim default 1.15s       --dur-fade         900ms
 *   image-reveal 1.5s             --dur-reveal       1200ms
 *   moving-text 5–10s loop        --dur-marquee      18s
 *   hover 0.3s                    --dur-hover        220ms
 *   offcanvas 0.45s ease-in-out   --dur-panel        420ms
 *
 * Page-transition tokens (Barba.js) live at the bottom.
 * ===================================================================== */

:root {
  /* ── Eases ──────────────────────────────────────────────────────── */
  --ease-out-power2:  cubic-bezier(0.16, 1, 0.3, 1);     /* default reveal */
  --ease-in-power2:   cubic-bezier(0.4, 0, 0.84, 0);     /* default exit  */
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elysium:     cubic-bezier(0.65, 0.05, 0.36, 1); /* signature */

  /* ── Durations ──────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-hover:   220ms;
  --dur-fade:    900ms;     /* fade-anim default (Redox: 1.15s) */
  --dur-reveal:  1200ms;    /* image reveal (Redox: 1.5s) */
  --dur-panel:   420ms;     /* off-canvas / menu */
  --dur-marquee: 18s;       /* moving text loops */
  --dur-page-out: 480ms;    /* Barba leave */
  --dur-page-in:  720ms;    /* Barba enter */

  /* ── Offsets ────────────────────────────────────────────────────── */
  --rise-sm: 24px;
  --rise-md: 50px;          /* Redox fade-anim default */
  --rise-lg: 80px;

  /* ── Stagger ────────────────────────────────────────────────────── */
  --stagger-1: 60ms;
  --stagger-2: 120ms;
  --stagger-3: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms; --dur-fade: 1ms; --dur-reveal: 1ms;
    --dur-panel: 1ms; --dur-page-out: 1ms; --dur-page-in: 1ms;
  }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ============== Declarative motion primitives ============================
 * Drop a class + optional data-attrs on any element. The transition runner
 * (wireframe.js) reads them on enter / on each Barba page transition.
 * ====================================================================== */

[data-anim] {
  opacity: 0;
  transform: translate3d(0, var(--rise-md), 0);
  transition:
    opacity   var(--dur-fade) var(--ease-out-power2),
    transform var(--dur-fade) var(--ease-out-power2);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim="fade"]       { transform: none; }
[data-anim="rise"]       { transform: translate3d(0, var(--rise-md), 0); }
[data-anim="rise-sm"]    { transform: translate3d(0, var(--rise-sm), 0); }
[data-anim="rise-lg"]    { transform: translate3d(0, var(--rise-lg), 0); }
[data-anim="slide-left"] { transform: translate3d(var(--rise-md), 0, 0); }
[data-anim="slide-right"]{ transform: translate3d(calc(-1 * var(--rise-md)), 0, 0); }
[data-anim="scale"]      { transform: scale(0.96); }
[data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* Image reveal — clipped wrapper + scaled image, à la Redox img_anim_reveal */
.img-reveal { position: relative; overflow: hidden; isolation: isolate; }
.img-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand-grad-soft, currentColor);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform var(--dur-reveal) var(--ease-out-power2);
  z-index: 2;
}
.img-reveal > img, .img-reveal > .ph {
  display: block; width: 100%;
  transform: scale(1.15);
  transition: transform var(--dur-reveal) var(--ease-out-power2);
}
.img-reveal.is-in::after  { transform: scaleY(0); transform-origin: bottom; }
.img-reveal.is-in > img,
.img-reveal.is-in > .ph   { transform: scale(1); }

/* Line-by-line text invert (scroll-driven), CSS-only proxy */
.text-invert {
  background: linear-gradient(90deg, var(--fg) 50%, var(--fg-muted) 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1200ms var(--ease-out-power2);
}
.text-invert.is-in { background-position: 0 0; }

/* ============== Barba.js page-transition stage ============================ */

.barba-stage {
  position: relative;
  min-height: 60vh;
}

/* Default transition: cross-fade + soft rise.
 * Customized per-namespace via data-barba-namespace below. */
.barba-container {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-page-in)  var(--ease-out-power2),
    transform var(--dur-page-in)  var(--ease-out-power2);
  will-change: opacity, transform;
}
.barba-leaving .barba-container {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition:
    opacity   var(--dur-page-out) var(--ease-in-power2),
    transform var(--dur-page-out) var(--ease-in-power2);
}
.barba-entering .barba-container {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* Per-namespace overrides (assigned via data-barba-namespace on each page) */
[data-barba-namespace="hero"]  .barba-container,
[data-barba-namespace="proof"] .barba-container,
[data-barba-namespace="contact"] .barba-container {
  /* hero / launch pages — slower, more reverent */
  transition:
    opacity   1000ms var(--ease-elysium),
    transform 1000ms var(--ease-elysium);
}

/* Overlay curtain transition for the deepest pages
 * (Security, Sovereignty) — feels like a vault door. */
.barba-curtain {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--brand-grad);
  transform: translate3d(0, 100%, 0);
  transition: transform var(--dur-page-in) var(--ease-elysium);
  pointer-events: none;
}
.barba-curtain.is-up    { transform: translate3d(0, 0, 0); }
.barba-curtain.is-out   { transform: translate3d(0, -100%, 0); }

/* Marquee */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee { display: flex; gap: var(--s-7); animation: marquee var(--dur-marquee) linear infinite; }
.marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }