/* GoWithMe — native-feel motion layer. Loaded by the live app only (NOT the
   screenshot harness), so captures stay static. All classes are inert without
   this stylesheet, so components can carry them safely in both contexts. */

:root {
  --gw-ease: cubic-bezier(0.32, 0.72, 0, 1);     /* iOS nav slide */
  --gw-out:  cubic-bezier(0.16, 1, 0.30, 1);     /* expo ease-out */
  --gw-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* overshoot pop */
  --gw-nav: 0.46s;
}

/* ---- page-transition layers ---- */
.gw-layer { backface-visibility: hidden; }

.gw-push-in    { animation: gwPushIn var(--gw-nav) var(--gw-ease) both; box-shadow: -18px 0 40px rgba(8,18,32,0.22); }
.gw-push-under { animation: gwPushUnder var(--gw-nav) var(--gw-ease) both; }
.gw-pop-out    { animation: gwPopOut var(--gw-nav) var(--gw-ease) both; box-shadow: -18px 0 40px rgba(8,18,32,0.22); }
.gw-pop-in     { animation: gwPopIn var(--gw-nav) var(--gw-ease) both; }
.gw-fade-in    { animation: gwFadeUp 0.40s var(--gw-out) both; }
.gw-fade-out   { animation: gwFadeOut 0.24s ease both; }

@keyframes gwPushIn    { from { transform: translate3d(100%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes gwPushUnder { from { transform: translate3d(0,0,0); } to { transform: translate3d(-22%,0,0); } }
@keyframes gwPopOut    { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
@keyframes gwPopIn     { from { transform: translate3d(-22%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes gwFadeUp    { from { opacity: 0; transform: translate3d(0,16px,0) scale(0.986); } to { opacity: 1; transform: none; } }
@keyframes gwFadeOut   { from { opacity: 1; } to { opacity: 0; } }

/* dim scrim painted over the layer that recedes under the incoming screen */
.gw-dim-in  { animation: gwDimIn  var(--gw-nav) var(--gw-ease) both; }
.gw-dim-out { animation: gwDimOut var(--gw-nav) var(--gw-ease) both; }
@keyframes gwDimIn  { from { opacity: 0; } to { opacity: 0.28; } }
@keyframes gwDimOut { from { opacity: 0.28; } to { opacity: 0; } }

/* ---- content entrance (staggered rise) ---- */
.gw-rise { animation: gwRise 0.52s var(--gw-out) both; }
@keyframes gwRise { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }

/* ---- bottom sheet (audio player) ---- */
.gw-sheet-in   { animation: gwSheetIn 0.44s var(--gw-ease) both; }
.gw-sheet-out  { animation: gwSheetOut 0.30s cubic-bezier(0.4,0,1,1) both; }
@keyframes gwSheetIn  { from { transform: translate3d(0,100%,0); } to { transform: none; } }
@keyframes gwSheetOut { from { transform: none; } to { transform: translate3d(0,100%,0); } }
.gw-back-in  { animation: gwBackIn 0.34s ease both; }
.gw-back-out { animation: gwFadeOut 0.28s ease both; }
@keyframes gwBackIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- scam toast spring-in ---- */
.gw-toast-in  { animation: gwToastIn 0.52s var(--gw-spring) both; }
.gw-toast-out { animation: gwToastOut 0.26s cubic-bezier(0.4,0,1,1) both; }
@keyframes gwToastIn  { from { opacity: 0; transform: translate3d(0,-26px,0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes gwToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0,-18px,0) scale(0.97); } }

/* ---- tab-bar active icon pop (ends at rest scale, so static = normal) ---- */
.gw-tabpop { animation: gwTabPop 0.46s var(--gw-spring); }
@keyframes gwTabPop { 0% { transform: none; } 38% { transform: translateY(-3px) scale(1.24); } 100% { transform: none; } }

/* ---- universal press feedback ---- */
button { transition: transform 0.16s var(--gw-spring); }
button:active { transform: scale(0.93); }
.gw-press { transition: transform 0.16s var(--gw-spring); }
.gw-press:active { transform: scale(0.972); }

@media (prefers-reduced-motion: reduce) {
  .gw-push-in, .gw-push-under, .gw-pop-out, .gw-pop-in, .gw-fade-in, .gw-fade-out,
  .gw-rise, .gw-sheet-in, .gw-sheet-out, .gw-back-in, .gw-back-out,
  .gw-toast-in, .gw-toast-out, .gw-dim-in, .gw-dim-out, .gw-tabpop {
    animation-duration: 0.001s !important;
  }
  button:active, .gw-press:active { transform: none !important; }
}