/* ── LITTORAL™ MOTION LAYER · v2.0 ──────────────────────────── */

/* CROSS-DOCUMENT VIEW TRANSITIONS */
@view-transition { navigation: auto; }

/* keep header and footer anchored across navigation */
.site-header { view-transition-name: site-header; }
.site-footer  { view-transition-name: site-footer; }

/* tide-like ease on the content swap */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* TIDE KEYFRAMES */
@keyframes tide-a  { 0%,100%{transform:translate(0,0)}   50%{transform:translate(-2.2%,7px)}  }
@keyframes tide-b  { 0%,100%{transform:translate(0,0)}   50%{transform:translate( 2%,  4px)}  }
@keyframes tide-c  { 0%,100%{transform:translate(0,0)}   50%{transform:translate(-1.4%,9px)}  }
@keyframes tide-rise{ 0%,100%{transform:translateY( 8px)} 50%{transform:translateY(-6px)}      }
@keyframes bob      { 0%,100%{transform:translateY( 0)}   50%{transform:translateY( 5px)}      }
@keyframes star-twinkle { 0%,100%{opacity:.55} 50%{opacity:1} }

/* will-change on animated layers */
.wlayer { will-change: transform; }

/* MOTION: gated on .js.mo (JS loaded and reduced-motion not set) */
body.js.mo .hero-tide .grp { animation: tide-rise 14s ease-in-out infinite; }
body.js.mo .wlayer.a       { animation: tide-a  9s   ease-in-out infinite; }
body.js.mo .wlayer.b       { animation: tide-b  11s  ease-in-out infinite; }
body.js.mo .wlayer.c       { animation: tide-c  7.5s ease-in-out infinite; }
body.js.mo .star            { animation: star-twinkle 3s ease-in-out infinite; }

/* REVEAL ON SCROLL */
body.js.mo .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
}
body.js.mo .reveal.in  { opacity: 1; transform: none; }
body.js.mo .reveal.d1  { transition-delay: .08s; }
body.js.mo .reveal.d2  { transition-delay: .16s; }
body.js.mo .reveal.d3  { transition-delay: .24s; }

/* TIDE-WIPE OVERLAY (fallback for browsers without View Transitions) */
.tide-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6,16,31,.98) 0%,
    rgba(12,23,38,.98) 50%,
    rgba(26,111,204,.85) 85%,
    rgba(74,172,240,.6) 100%
  );
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}
.tide-wipe.sweeping {
  animation: tide-wipe-out .42s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes tide-wipe-out {
  0%   { transform: translateY(100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* STAR CANVAS (hero only) */
#star-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* PREFERS-REDUCED-MOTION: TOTAL KILL */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}