/* Launch motion polish: responsive, interruptible, and reduced-motion aware. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Keep marketing reveals brief; dense galleries should not animate tile-by-tile. */
.rv {
  transform: translateY(16px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.gallery .rv,
.gallery .rv.in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Frequently triggered UI should respond immediately. */
.nav {
  transition: transform 240ms var(--ease-out);
}
.btn {
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 160ms var(--ease-out);
}
.btn:active,
.burger:active,
.mobclose:active {
  transform: scale(0.97);
}
.burger,
.mobclose {
  transition: opacity 150ms ease, transform 160ms var(--ease-out);
}

/* Full-screen menu: spatial continuity without delaying navigation. */
.mobmenu,
.mobmenu.open {
  display: flex;
}
.mobmenu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2%);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    visibility 0s linear 220ms;
}
.mobmenu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Avoid repaint-heavy filter animation on large images. */
.ecard img {
  filter: saturate(.98);
  transition: none;
}
.gtile img {
  filter: saturate(.94);
  transition: transform 240ms ease;
}
.coach img {
  filter: none;
  transition: transform 240ms ease;
}
.tcard .ph,
.tcard img {
  transition: none;
}
.merchshot img {
  filter: saturate(.96);
  transition: transform 240ms ease;
}

/* Reset hover-only states first so touch cannot leave them stuck. */
.hud.hoverable:hover {
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.55);
  transform: none;
}
.btn-p:hover { background: var(--blue); box-shadow: none; transform: none; }
.btn-s:hover { border-color: rgba(255,255,255,.28); color: var(--white); transform: none; }
.btn-blue-o:hover { background: transparent; border-color: rgba(11,59,255,.6); transform: none; }
.tlink:hover { color: var(--text-mid); border-color: rgba(255,255,255,.2); }
.burger:hover { opacity: 1; }
.pstrip:hover .pstrip-track { animation-play-state: running; }
.pstrip-track img:hover { opacity: .46; }
.ecard:hover img { filter: saturate(.98); }
.logotile:hover img { opacity: .62; }
.gtile:hover img,
.coach:hover img,
.merchshot:hover img { transform: none; }
.coach:hover img { filter: none; }
.tcard:hover .ph,
.tcard:hover img { filter: grayscale(.45) saturate(.9) brightness(.85); }
.fcol a:hover { color: var(--text-mid); }
details summary:hover { color: inherit; }

/* Hover feedback is only for devices with a real, precise pointer. */
@media (hover: hover) and (pointer: fine) {
  .hud.hoverable:hover {
    border-color: rgba(11,59,255,.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 0 0 1px rgba(11,59,255,.22),
      0 0 40px rgba(11,59,255,.14),
      0 20px 52px rgba(0,0,0,.62);
    transform: translateY(-2px);
  }
  .btn-p:hover { background: var(--blue-lo); box-shadow: 0 8px 26px rgba(11,59,255,.42); transform: translateY(-2px); }
  .btn-s:hover { border-color: var(--blue); color: var(--blue-lo); transform: translateY(-2px); }
  .btn-blue-o:hover { background: rgba(11,59,255,.12); border-color: var(--blue); transform: translateY(-2px); }
  .tlink:hover { color: var(--white); border-color: var(--blue); }
  .burger:hover { opacity: .7; }
  .pstrip:hover .pstrip-track { animation-play-state: paused; }
  .pstrip-track img:hover { opacity: .95; }
  .ecard:hover img { filter: saturate(.98); }
  .logotile:hover img { opacity: 1; }
  .gtile:hover img { filter: saturate(.94); transform: scale(1.025); }
  .coach:hover img { filter: none; transform: scale(1.025); }
  .merchshot:hover img { filter: saturate(.96); transform: scale(1.02); }
  .tcard:hover .ph,
  .tcard:hover img { filter: grayscale(.45) saturate(.9) brightness(.85); }
  .fcol a:hover { color: var(--white); }
  details summary:hover { color: var(--blue-lo); }
}

/* The video already supplies movement on phones; keep only the cheap streak layer. */
@media (max-width: 700px) {
  .hero-bg {
    animation: none;
    transform: none;
  }
  .hero-sweep { display: none; }
  .hero-streaks {
    opacity: .24;
    animation-duration: 12s;
  }
}

/* Reduced motion keeps useful state feedback while removing displacement. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .burger,
  .mobclose,
  .tlink,
  .hud,
  details summary,
  .fcol a {
    transition-property: background-color, color, border-color, box-shadow, opacity !important;
    transition-duration: 200ms !important;
    transition-timing-function: ease !important;
  }
  .mobmenu {
    transform: none !important;
    transition: opacity 200ms ease, visibility 0s linear 200ms !important;
  }
  .mobmenu.open { transition-delay: 0s !important; }
  .rv,
  .rv.in,
  .btn:active,
  .burger:active,
  .mobclose:active,
  .hud.hoverable:hover,
  .gtile:hover img,
  .coach:hover img,
  .merchshot:hover img {
    transform: none !important;
  }
  .rv,
  .rv.in {
    opacity: 1 !important;
    transition: none !important;
  }
}