/* OverWatch — motion tokens + card boot (intro) / shutdown (outro) sequences.
   v2 (2026-07-06): retargeted to the sci-fi frame card — shell flare uses a
   drop-shadow filter (box-shadow can't follow the clip-path silhouette);
   header/body hooks are .ow-card-head / .ow-card-body.
   Stagger by DOM order via --bd. Deliberately does NOT honor
   prefers-reduced-motion (motion IS the feature); escape hatch = ?calm. */
:root{
  --ease-boot:cubic-bezier(.2,.9,.3,1.35); /* @kind other */  /* overshoot settle */
  --ease-body:cubic-bezier(.22,1.25,.36,1); /* @kind other */
  --ease-modal:cubic-bezier(.2,.9,.27,1.06); /* @kind other */
  --dur-fast:.15s; /* @kind other */
  --dur-med:.26s; /* @kind other */
  --dur-boot:.36s; /* @kind other */
}

/* ── CARD INTRO (boot) — add .boot to a .ow-card; set --bd per card for stagger ── */
.booting .ow-card{opacity:0;}
.ow-card.boot{opacity:1;animation:owBootShell var(--dur-boot) var(--ease-boot) var(--bd,0s) both;}
.ow-card.boot .ow-card-head{animation:owBootHead .32s ease-out calc(var(--bd,0s) + .12s) both;}
.ow-card.boot .ow-card-body{animation:owBootBody .4s var(--ease-body) calc(var(--bd,0s) + .28s) both;}
@keyframes owBootShell{
  0%{opacity:0;transform:translateY(16px) scale(.955);}
  55%{opacity:1;filter:drop-shadow(0 0 22px rgba(47,176,255,.5));}
  100%{opacity:1;transform:none;}}
@keyframes owBootHead{0%{opacity:0;clip-path:inset(0 100% 0 0);}100%{opacity:1;clip-path:inset(0 0 0 0);}}
@keyframes owBootBody{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:none;}}

/* ── CARD OUTRO (shutdown) — reverse of boot: body sinks, header wipes out, shell flares off ── */
.ow-card.shutdown{animation:owShutShell .3s ease-in calc(var(--bd,0s) + .22s) both;}
.ow-card.shutdown .ow-card-head{animation:owShutHead .24s ease-in calc(var(--bd,0s) + .1s) both;}
.ow-card.shutdown .ow-card-body{animation:owShutBody .26s ease-in var(--bd,0s) both;}
@keyframes owShutShell{
  0%{opacity:1;transform:none;}
  45%{opacity:1;filter:drop-shadow(0 0 22px rgba(47,176,255,.5));}
  100%{opacity:0;transform:translateY(14px) scale(.96);}}
@keyframes owShutHead{0%{opacity:1;clip-path:inset(0 0 0 0);}100%{opacity:0;clip-path:inset(0 100% 0 0);}}
@keyframes owShutBody{0%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(10px);}}

/* modal entrance — rise and settle */
@keyframes owmIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}

/* pulses */
@keyframes owHoverPod{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes owPulseDot{0%,100%{opacity:.55;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}
@keyframes owBlink{50%{opacity:.25;}}
@keyframes owThink{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes owTypeDot{0%,60%,100%{opacity:.25;}30%{opacity:1;}}