/* Nagbox hero motion: a self-playing triage loop layered onto the static am-* mock.
   Everything here is scoped under .am-phone.is-live, which hero-motion.js adds ONLY
   when motion is allowed (JS present, prefers-reduced-motion not set). No-JS and
   reduced-motion never get .is-live, so the pristine static phone stands untouched.
   Palette + rows come from style.css; this file only adds motion + injected layers.
   Animates transform/opacity/grid-rows only. No em or en dashes anywhere. */

/* --- screen becomes a fixed-height flex column so inserts/collapses never grow the phone --- */
.am-phone.is-live .am-screen { display: flex; flex-direction: column; }
.am-phone.is-live .am-stream {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.am-phone.is-live .am-streamscroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* --- collapsible slot around every row --- */
.am-phone.is-live .am-slot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s ease 0.05s;
}
.am-phone.is-live .am-slot.is-gone { grid-template-rows: 0fr; }
.am-phone.is-live .am-slotin { overflow: hidden; min-height: 0; }

/* --- content occludes the reveal behind it; drag/fly/sweep move it via state classes --- */
.am-phone.is-live .am-content {
  position: relative;
  z-index: 1;
  background: var(--bg);
  transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.34s;
}

/* JS retargets this to the first visible row: kills the hairline under the streamhead
   that the base ".am-streamhead + .am-row" rule stops matching once rows are wrapped. */
.am-phone.is-live .am-rowtop { border-top: 0; }

/* --- swipe / sweep reveal layers behind each row (square, full bleed) --- */
.am-phone.is-live .am-reveal {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.am-phone.is-live .am-reveal-snooze { background: var(--orange); justify-content: flex-end; padding-right: 14px; }
.am-phone.is-live .am-reveal-done { background: var(--green); justify-content: flex-start; padding-left: 14px; }
.am-phone.is-live .am-revlab {
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* drag left into Snooze, then fly off */
.am-phone.is-live .am-row.is-dragging .am-content { transform: translateX(-34%) rotate(-0.6deg); }
.am-phone.is-live .am-row.is-dragging .am-reveal-snooze { opacity: 1; }
.am-phone.is-live .am-row.is-flyleft .am-content { transform: translateX(-130%) rotate(-2deg); opacity: 0; }
.am-phone.is-live .am-row.is-flyleft .am-reveal-snooze { transition: opacity 0.3s 0.18s; opacity: 0; }

/* sweep right into Done */
.am-phone.is-live .am-row.is-sweeping .am-content { transform: translateX(130%); opacity: 0; }
.am-phone.is-live .am-row.is-sweeping .am-reveal-done { opacity: 1; }
.am-phone.is-live .am-row.is-swept .am-reveal-done { opacity: 0; }

/* pop-in, resurface glow, survivor settle */
.am-phone.is-live .am-content.am-pop { animation: amDrop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
.am-phone.is-live .am-content.am-glow { animation: amDrop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both, amGlow 1.8s ease 0.4s; }
.am-phone.is-live .am-content.am-nudge { animation: amNudge 0.5s ease; }

/* done pin turns green (resurfaced item completed in the sunrise beat) */
.am-phone.is-live .am-pin.is-donepin { color: var(--green); }

/* --- capture bar: slides up from the bottom of the screen, types, recedes --- */
.am-phone.is-live .am-capture {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.3s;
}
.am-phone.is-live .am-capture.is-typing { opacity: 1; transform: none; border-color: rgba(127, 90, 240, 0.7); }
.am-phone.is-live .am-cap-plus { flex: 0 0 auto; display: inline-flex; width: 16px; height: 16px; color: var(--accent); }
.am-phone.is-live .am-cap-plus svg { display: block; width: 16px; height: 16px; }
.am-phone.is-live .am-cap-field { display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--text); }
.am-phone.is-live .am-cap-ph { color: var(--muted); }
.am-phone.is-live .am-capture.is-typing .am-cap-ph { display: none; }
.am-phone.is-live .am-cap-text { white-space: nowrap; overflow: hidden; }
.am-phone.is-live .am-cap-caret { display: none; width: 1.5px; height: 14px; margin-left: 1px; background: var(--accent); }
.am-phone.is-live .am-capture.is-typing .am-cap-caret { display: inline-block; animation: amBlink 1s steps(1) infinite; }

/* --- time-skip chip --- */
.am-phone.is-live .am-streamscroll.is-dim { opacity: 0.28; transition: opacity 0.4s; }
.am-phone.is-live .am-skip {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  opacity: 0;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.45s, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.am-phone.is-live .am-skip.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.am-phone.is-live .am-skip svg { color: var(--orange); display: block; }

/* --- sunrise reward overlay (opaque, covers the whole screen) --- */
.am-phone.is-live .am-sunrise {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 30%, #211b2e 100%);
  transition: opacity 0.7s;
}
.am-phone.is-live .am-sunrise.is-on { opacity: 1; }
.am-phone.is-live .am-sun-wrap { width: 120px; height: 64px; overflow: hidden; display: flex; justify-content: center; }
.am-phone.is-live .am-sun {
  width: 56px;
  height: 56px;
  margin-top: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd76f, #ff8906 70%);
  box-shadow: 0 0 34px rgba(255, 137, 6, 0.55), 0 0 80px rgba(255, 137, 6, 0.25);
  transform: translateY(64px);
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.am-phone.is-live .am-sunrise.is-on .am-sun { transform: translateY(0); }
.am-phone.is-live .am-horizon { width: 150px; height: 1px; background: linear-gradient(90deg, transparent, var(--muted), transparent); }
.am-phone.is-live .am-sun-title { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.am-phone.is-live .am-sun-sub { font-size: 11px; color: var(--muted); }

/* --- Sweep pill cue: color + a scale beat, never a box-size change --- */
.am-phone.is-live .am-broom { transition: color 0.25s; }
.am-phone.is-live .am-broom.is-invite { animation: amInvite 4.5s ease-in-out infinite; }
.am-phone.is-live .am-broom.is-flash { color: var(--green); animation: amBroomFlash 0.5s ease; }

/* --- count pop on each change --- */
.am-phone.is-live .am-count.is-pulse { animation: amCountPulse 0.24s ease; }

/* --- reset suppressor: mutate the DOM with no visible tween on uncovered reset paths --- */
.am-phone.is-live.no-anim,
.am-phone.is-live.no-anim *,
.am-phone.is-live.no-anim *::before,
.am-phone.is-live.no-anim *::after { transition: none !important; animation: none !important; }

/* --- keyframes (transform/opacity/inset-shadow only) --- */
@keyframes amDrop {
  from { transform: translateY(-16px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* INSET shadow: rows are full-bleed square clipped by overflow:hidden, so an outer
   glow would clip into hard top/bottom bands. Inset paints a clean ring inside. */
@keyframes amGlow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(127, 90, 240, 0); }
  30% { box-shadow: inset 0 0 0 2px rgba(127, 90, 240, 0.55), inset 0 0 18px rgba(127, 90, 240, 0.28); }
}
@keyframes amNudge {
  0%, 100% { transform: none; }
  30% { transform: translateX(7px); }
  60% { transform: translateX(-3px); }
}
@keyframes amBlink { 50% { opacity: 0; } }
@keyframes amInvite { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.95; } }
@keyframes amBroomFlash { 0%, 100% { transform: none; } 40% { transform: scale(1.08); } }
@keyframes amCountPulse { 0%, 100% { transform: none; } 40% { transform: scale(1.12); } }

/* --- belt and suspenders: any runtime race still cannot leave motion running --- */
@media (prefers-reduced-motion: reduce) {
  .am-phone.is-live,
  .am-phone.is-live *,
  .am-phone.is-live *::before,
  .am-phone.is-live *::after { animation: none !important; transition: none !important; }
}