/* ============================================================
   Sovereign Motors Corp. — motion layer
   Additive. Delete this file and the site still works, just
   with the baseline reveals in site.css.

   Everything here is transform/opacity only, and every effect
   has a prefers-reduced-motion branch that lands on the final
   state. Scroll-linked effects use CSS scroll-driven animations
   so they run on the compositor rather than the main thread.
   ============================================================ */

/* ---------- 1. Cross-document page transitions ---------- */
/* Real page transitions on a static multi-page site, no JS. */
@view-transition { navigation: auto; }

::view-transition-old(root){
  animation: vtOut 200ms cubic-bezier(.65,0,.35,1) both;
}
::view-transition-new(root){
  animation: vtIn 420ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes vtOut{ to{ opacity:0; transform:translateY(-8px) } }
@keyframes vtIn { from{ opacity:0; transform:translateY(14px) } }

/* the header is the same on every page — let it sit still while
   the body cross-fades, instead of fading with it */
.hdr{ view-transition-name: site-header }
.progress{ view-transition-name: site-progress }

/* ---------- 2. Scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;z-index:101;
  height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .progress{
    animation:progressGrow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progressGrow{ to{ transform:scaleX(1) } }
}

/* ---------- 3. Scroll-linked parallax ---------- */
/* Only where a background sits behind content — never on the
   hero video, which already has its own slow drift. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band,.phead{ view-timeline:--sov-band block }
    .band__bg img,
    .phead__bg img{
      animation:parallaxDrift linear both;
      animation-timeline:--sov-band;
      animation-range:cover 0% cover 100%;
      will-change:transform;
    }
    @keyframes parallaxDrift{
      from{ transform:translate3d(0,-7%,0) scale(1.16) }
      to  { transform:translate3d(0, 7%,0) scale(1.16) }
    }

  }
}

/* ---------- 4. Image reveal ---------- */
/* pairs a clip wipe with a settle-in scale */
.js-reveal .rv-img img{
  transform:scale(1.12);
  transition:transform 1.6s var(--ease-photo);
  transition-delay:var(--d,0ms);
}
.js-reveal .rv-img.in img{ transform:scale(1) }

/* ---------- 5. Split-word heading reveal ---------- */
/* JS wraps each word; the mask is the .sw wrapper's overflow */
.sw{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;   /* room for descenders inside the mask */
  margin-bottom:-.08em;
}
.js-reveal .sw > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(110%);
  transition:transform 760ms var(--ease);
  /* cap the cascade: a long heading must not sit unreadable while
     the stagger walks through 25+ words */
  transition-delay:min(calc(var(--wi,0) * 34ms), 300ms);
}
.js-reveal [data-split].in .sw > i{ transform:translateY(0) }

/* a block whose heading does the word cascade shouldn't also
   slide as a block — the two motions fight. Fade only. */
.rv:has([data-split]){ transform:none }

/* ---------- 6. Magnetic primary buttons ---------- */
@media (hover:hover) and (pointer:fine){
  .btn--gold{
    transform:translate3d(var(--mx,0px),var(--my,0px),0);
    transition:background var(--t-hover) var(--ease-io),
               border-color var(--t-hover) var(--ease-io),
               transform 380ms var(--ease);
  }
  .btn--gold.is-magnet{ transition:background var(--t-hover) var(--ease-io),
                                   border-color var(--t-hover) var(--ease-io),
                                   transform 120ms linear }
  .btn--gold:hover{ transform:translate3d(var(--mx,0px),var(--my,0px),0) }
}

/* ---------- 7. Nav underline travels ---------- */
.nav{ position:relative }
.nav__ink{
  position:absolute;bottom:0;left:0;height:1px;
  background:var(--gold-500);
  transform:translateX(var(--ink-x,0)) scaleX(0);
  width:var(--ink-w,0px);
  transform-origin:0 50%;
  transition:transform 460ms var(--ease),width 460ms var(--ease);
  pointer-events:none;
}
.nav.has-ink a::after{ opacity:0 }
.nav.has-ink .nav__ink{ transform:translateX(var(--ink-x,0)) scaleX(1) }

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }

  .rv-img img,.js-reveal .rv-img img{ transform:none }
  .sw > i,.js-reveal .sw > i{ transform:none;transition:none }
  .btn--gold{ transform:none }
  .band__bg img,.phead__bg img{ animation:none }
  .progress{ display:none }
  .nav__ink{ display:none }
  .nav.has-ink a::after{ opacity:1 }
}