/* GMEREK IT — motion.css
   States and transitions for the scroll engine. Phase is computed in motion.js;
   this file only declares what each state looks like.
   Easing: --m-ease for hovers and reveals, --m-spring for sheets. */

:root{
  --m-ease: cubic-bezier(.2,.8,.2,1);
  --m-soft: cubic-bezier(.16,1,.3,1);
  --m-spring: cubic-bezier(.34,1.4,.64,1);
  --m-reveal: 900ms;
  --m-word: 560ms;
  --m-dim: rgba(11,27,46,.13);
}

/* ---------- material header: opaque at rest, translucent after 8px ---------- */
/* both states come from this file, so an inline background cannot win the cascade */
[data-motion="material"]{
  background: #0B1B2E;
  transition: background 220ms var(--m-ease), backdrop-filter 220ms var(--m-ease);
}
[data-motion="material"][data-material="light"]{
  background: #FFFFFF;
}
/* Translucency alone is invisible when the bar and the content behind it are the same
   navy: rgba(11,27,46,.72) over #0B1B2E reads as no change at all. The material has to
   announce itself with depth - a hairline of light along the bottom edge and a shadow,
   so the bar reads as a layer lifted off the page rather than a painted strip. */
[data-motion="material"]{
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background 220ms var(--m-ease),
              backdrop-filter 220ms var(--m-ease),
              box-shadow 220ms var(--m-ease);
}
[data-motion="material"].is-material{
  background: rgba(11,27,46,.64);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.14),
              0 8px 24px rgba(0,0,0,.28);
}
[data-motion="material"][data-material="light"].is-material{
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 -1px 0 rgba(11,27,46,.10),
              0 8px 24px rgba(11,27,46,.10);
}

/* ---------- large title collapsing into the inline title ---------- */
[data-motion="title-inline"]{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--m-ease), transform 220ms var(--m-ease);
}
[data-motion="title-inline"].is-on{ opacity: 1; transform: translateY(0); }

/* ---------- page behind an open sheet ---------- */
[data-motion="page"]{
  transition: transform 420ms var(--m-spring), border-radius 420ms var(--m-spring);
  transform-origin: 50% 0;
}
body.m-sheet-open [data-motion="page"]{
  transform: scale(.976);
  border-radius: 13px;
  overflow: hidden;
}

/* ---------- hero recede ---------- */
[data-recede-inner]{ will-change: transform, opacity; }

/* ---------- reveal on scroll: symmetric crossfade, in and out ---------- */
.m-hidden{
  opacity: 0;
  transform: translateY(21px);
  transition: opacity var(--m-reveal) var(--m-soft), transform var(--m-reveal) var(--m-soft);
}
.m-hidden.m-in{ opacity: 1; transform: translateY(0); }
/* leaving upward keeps drifting up rather than snapping back down */
.m-hidden.m-up{ transform: translateY(-21px); }

/* ---------- scroll-scrubbed statement ---------- */
.m-stick{ position: sticky; top: 24vh; }
[data-motion="scrub"] .m-w{
  color: var(--m-dim);
  transition: color var(--m-word) var(--m-soft);
}
[data-motion="scrub"] .m-w.m-lit{ color: var(--navy-900, #0B1B2E); }
[data-motion="scrub"] .sig .m-w.m-lit,
[data-motion="scrub"] .m-w.sig.m-lit{ color: var(--accent, #0D5EAF); }

/* ---------- card stacking ---------- */
[data-motion="stack"] > *{
  position: sticky;
  top: var(--m-stack-top, 89px);
}
[data-motion="stack"] > * > *{
  transition: none;
  will-change: transform, opacity;
}

/* ---------- bottom sheet ---------- */
.m-sheet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  height: 38.2vh;
  transform: translateY(100%);
  transition: transform 420ms var(--m-spring), height 420ms var(--m-spring);
  overflow: auto;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -1px 2px rgba(11,27,46,.06), 0 -21px 55px rgba(11,27,46,.18);
}
.m-sheet.is-half{ height: 38.2vh; transform: translateY(0); }
.m-sheet.is-full{ height: 100vh;  transform: translateY(0); }
.m-grab{
  width: 36px; height: 5px;
  border-radius: 3px;
  background: rgba(20,32,46,.22);
  margin: 13px auto 8px;
}
.m-scrim{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11,27,46,.32);
  opacity: 0;
  transition: opacity 240ms var(--m-ease);
}
.m-scrim.is-on{ opacity: 1; }

/* ---------- stopped, not reduced ---------- */
@media (prefers-reduced-motion: reduce){
  [data-motion="material"],
  [data-motion="title-inline"],
  [data-motion="page"],
  .m-hidden,
  [data-motion="scrub"] .m-w,
  .m-sheet,
  .m-scrim{ transition: none !important; }

  .m-hidden{ opacity: 1; transform: none; }
  [data-motion="scrub"] .m-w{ color: var(--navy-900, #0B1B2E); }
  [data-motion="stack"] > *{ position: static; }
  [data-recede-inner]{ transform: none !important; opacity: 1 !important; }
}