/* ===========================================================================
   iLabs — motion layer (animations + transitions)
   ---------------------------------------------------------------------------
   Deliberately small. Everything here is progressive enhancement:
   - no-JS / old browser  → the page is simply static (nothing is ever hidden by CSS alone)
   - prefers-reduced-motion → every effect below is switched off
   - touch devices          → cursor-driven effects (tilt, spotlight, magnet) never run
   Loaded on every page EXCEPT the Re-agents sandbox (a full-screen app, not a page).
   Behaviour lives in assets/motion.js.
   ===========================================================================*/

/* ---------- scroll progress line (top of the page; only on long pages) ---------- */
.mo-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
  opacity:0; transition:opacity .25s; }
.mo-progress.on{ opacity:1; }
.mo-progress i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }

@media (prefers-reduced-motion:no-preference){

  /* ---------- hero: blur-up entrance (pure CSS, so there is never a flash) ---------- */
  .ui-hero .ui-eyebrow, .ui-hero h1, .ui-hero .lead, .ui-hero-cta, .ui-hero-proof{
    animation:moBlurUp .7s cubic-bezier(.2,.7,.2,1) both; }
  .ui-hero h1{ animation-delay:.06s; }
  .ui-hero .lead{ animation-delay:.16s; }
  .ui-hero-cta{ animation-delay:.24s; }
  .ui-hero-proof{ animation-delay:.32s; }
  @keyframes moBlurUp{ from{ opacity:0; transform:translateY(14px); filter:blur(7px); } }

  /* ---------- animated mesh gradient behind the hero ---------- */
  .ui-hero::before{ will-change:transform; animation:moMeshA 22s ease-in-out infinite alternate; }
  .ui-hero::after{ content:""; position:absolute; inset:-10% -10% auto; height:480px; z-index:0; pointer-events:none;
    will-change:transform; animation:moMeshB 28s ease-in-out infinite alternate;
    background:radial-gradient(45% 55% at 62% 60%, color-mix(in srgb,var(--phys) 12%,transparent), transparent 70%),
               radial-gradient(40% 50% at 22% 55%, color-mix(in srgb,var(--chem) 12%,transparent), transparent 70%); }
  .ui-hero.sub-hero::after{ background:radial-gradient(45% 55% at 70% 55%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%); }
  @keyframes moMeshA{ from{ transform:translate3d(-3%,0,0) scale(1); } to{ transform:translate3d(4%,6%,0) scale(1.08); } }
  @keyframes moMeshB{ from{ transform:translate3d(4%,4%,0) scale(1.06); } to{ transform:translate3d(-4%,-2%,0) scale(1); } }

  /* ---------- scroll reveal (classes are added by motion.js, only below the fold) ---------- */
  .mo-reveal{ opacity:0; transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
    transition-delay:var(--mo-d,0ms); }
  .mo-reveal.mo-blur{ filter:blur(6px); }
  .mo-reveal.mo-in{ opacity:1; transform:none; filter:none; }

  /* ---------- infinite marquee (home) ---------- */
  .ui-marquee-track{ animation:moMarquee 46s linear infinite; }
  .ui-marquee:hover .ui-marquee-track{ animation-play-state:paused; }
  @keyframes moMarquee{ to{ transform:translateX(-50%); } }

  /* ---------- history timeline: the spine draws itself as you scroll ---------- */
  .tl::before{ transform-origin:50% 0; transform:scaleY(var(--tl-p,1)); }
}

/* ---------- marquee markup styles (static fallback works without animation) ---------- */
.ui-marquee{ overflow:hidden; border-block:1px solid var(--edge); background:var(--panel);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ui-marquee-track{ display:flex; width:max-content; }
.ui-marquee-group{ display:flex; flex:0 0 auto; align-items:center; gap:34px; padding:14px 17px; }
.ui-marquee-group span{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  color:var(--chrome-2); font-size:var(--fs-small); font-weight:500; }
.ui-marquee-group span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--chem); flex:0 0 auto; }
.ui-marquee-group span.p::before{ background:var(--phys); }
@media (max-width:700px){ .ui-marquee{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .ui-marquee{ -webkit-mask-image:none; mask-image:none; }
  .ui-marquee-track{ width:auto; justify-content:center; }
  .ui-marquee-group{ flex-wrap:wrap; justify-content:center; }
  .ui-marquee-group + .ui-marquee-group{ display:none; }
}

/* ---------- fine-pointer only: spotlight, tilt, magnetic buttons ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* cursor spotlight on clickable cards */
  .mo-spot{ position:relative; }
  .mo-spot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
    transition:opacity .25s;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--sc,var(--accent)) 15%,transparent), transparent 72%); }
  .mo-spot:hover::after{ opacity:1; }

  /* 3D tilt (transform only — never changes layout) */
  .mo-tilt{ transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .15s; will-change:transform; }
  .mo-tilt.mo-tilting{ transition:transform .08s linear, border-color .15s; }

  /* magnetic buttons */
  .mo-magnet{ transition:transform .25s cubic-bezier(.2,.7,.2,1), background .15s, filter .15s; }
}

@media print{
  .mo-progress{ display:none; }
  .mo-reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}