/* =============================================================================
   MissionAlarm — "Watch a morning": a scripted, self-playing walkthrough.

   This is the closest thing to a product video we can honestly ship. Nothing
   has been built yet, so there is no footage to record and no screen to
   capture; every frame here is the real interface rebuilt from
   design-system tokens and driven on a timer.

   Contract with assets/demo.js:
   - [data-player] is the root. JS sets data-scene="1".."5" on it.
   - Each [data-scene-panel="n"] shows only while that scene is current.
   - .is-paused on the root freezes the progress fill and every animation.
   - With no JavaScript, scene 1 is visible and the rest are not, so the
     component degrades to a still of the alarm ringing rather than to a gap.
   ========================================================================== */

.player {
  display: grid;
  /* Capped, and centred. Left to fill the page the copy column runs to ~1400px
     on a desktop, which strands the phone on one side of an empty band. */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-xxl);
  align-items: center;
  margin-top: var(--space-xxl);
  max-width: 880px;
}
@media (max-width: 780px) {
  .player { grid-template-columns: 1fr; gap: var(--space-xl); justify-items: center; }
  .player-phone { height: 480px; }
}

/* ---------- the device ----------------------------------------------------- */

.player-phone {
  position: relative;
  /* Height-led, not width-led: a 9:19.5 phone at 300px wide is 650px tall,
     which pushes the alert card off the bottom of most viewports. Capping the
     height and letting the width follow keeps the whole screen visible. */
  max-height: 560px;
  height: 560px;
  width: auto;
  max-width: 100%;
  /* 360x780 is the real screen aspect, the same crop hero.js uses. */
  aspect-ratio: 360 / 780;
  border-radius: 34px;
  background: var(--surface-base);
  border: var(--border-control) solid var(--smoke-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  overflow: hidden;
  isolation: isolate;
}

.player-screen { position: absolute; inset: 0; padding: var(--space-md); }

.scene {
  position: absolute;
  inset: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-blaze-fade) ease,
              transform var(--duration-blaze-fade) var(--ease-spring),
              visibility 0s linear var(--duration-blaze-fade);
}
[data-scene="1"] .scene[data-scene-panel="1"],
[data-scene="2"] .scene[data-scene-panel="2"],
[data-scene="3"] .scene[data-scene-panel="3"],
[data-scene="4"] .scene[data-scene-panel="4"],
[data-scene="5"] .scene[data-scene-panel="5"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* No JS: the root never gets data-scene, so this is what a visitor sees. */
.player-phone:not([data-scene]) .scene[data-scene-panel="1"] {
  opacity: 1; visibility: visible; transform: none;
}

.s-label {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}
.s-acid { color: var(--acid); }

/* ---------- scene 1: the lock screen --------------------------------------- */

.s1-time {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: var(--alarm-time-weight);
  letter-spacing: var(--alarm-time-tracking);
  line-height: 1;
  color: var(--text-primary);
  margin-top: var(--space-lg);
}
.s1-alert {
  margin-top: auto;
  background: var(--surface-float);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.s1-alert b { font-size: var(--caption-size); color: var(--text-primary); }
.s1-stop {
  position: relative;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--smoke);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.s1-stop::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%,
              rgba(240, 238, 233, var(--opacity-lock-shimmer)) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: s-shimmer 2.6s linear infinite;
}
@keyframes s-shimmer { to { transform: translateX(100%); } }

.s-cta {
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--acid);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
[data-scene="1"] .s1-alert .s-cta { animation: s-pulse var(--duration-blaze-pulse) ease-in-out infinite; }
@keyframes s-pulse { 50% { transform: scale(1.04); } }

/* ---------- scene 2: the arrival ------------------------------------------- */

.s2-time {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: var(--alarm-time-weight);
  line-height: 1;
  color: var(--text-primary);
  text-align: center;
  margin-top: var(--space-xl);
}
.s2-card {
  margin-top: var(--space-lg);
  background: var(--surface-raised);
  border-left: var(--size-mission-stripe-width) solid var(--acid);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
}
.s2-card b { display: block; font-size: var(--body-size); color: var(--text-primary); }
.s2-foot { margin-top: auto; text-align: center; }

/* ---------- scene 3: push-ups ---------------------------------------------- */

.s3-meter {
  height: var(--size-confidence-bar-height);
  border-radius: var(--radius-full);
  background: var(--smoke);
  overflow: hidden;
  margin-top: var(--space-sm);
}
.s3-meter i { display: block; height: 100%; width: 88%; background: var(--acid); }
[data-scene="3"] .s3-meter i { animation: s3-fill 2.2s var(--ease-spring); }
@keyframes s3-fill { from { width: 8%; } to { width: 88%; } }

/* The camera panel. This was diagonal stripes with the words "Camera preview"
   across them, which on a marketing page reads as a broken image rather than a
   placeholder. It now shows what the front camera actually frames. */
.s3-view {
  flex: 1;
  margin-top: var(--space-sm);
  border-radius: var(--radius-lg);
  background-image: url("feed-pushup.webp");
  background-size: cover;
  background-position: center 38%;
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.s3-view::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12,12,15,.35) 0%, rgba(12,12,15,0) 40%,
              rgba(12,12,15,0) 60%, rgba(12,12,15,.65) 100%);
}
.s3-watermark { position: relative; z-index: 1; padding-bottom: var(--space-xs); }
.s3-count {
  display: flex; align-items: baseline; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: var(--mono-counter-weight);
  color: var(--acid);
  margin-top: var(--space-sm);
}
.s3-window { height: 1em; overflow: hidden; }
.s3-strip { display: block; transform: translateY(calc(-20 * 1em)); }
[data-scene="3"] .s3-strip { animation: s3-roll 4s steps(20, end); animation-fill-mode: forwards; }
.s3-strip b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
@keyframes s3-roll { from { transform: translateY(0); } to { transform: translateY(calc(-20 * 1em)); } }
.s3-total { font-size: 20px; color: var(--text-secondary-accessible); }
.s3-exit {
  margin-top: var(--space-sm);
  height: 30px;
  border-radius: var(--radius-full);
  border: var(--border-hairline) solid var(--smoke-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--text-secondary-accessible);
}

/* ---------- scene 4: the object hunt --------------------------------------- */

.s4-card {
  background: var(--surface-float);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  text-align: center;
  margin-top: var(--space-sm);
}
.s4-card b { display: block; font-size: var(--body-size); color: var(--text-primary); }
.s4-view {
  position: relative;
  flex: 1;
  margin-top: var(--space-sm);
  border-radius: var(--radius-lg);
  /* Was a flat empty panel. It now frames what the shutter is pointed at,
     which is the whole point of the mission. */
  background: url("feed-sink.webp") center / cover no-repeat, var(--surface-float);
  overflow: hidden;
}
.s4-view::before {
  content: "";
  position: absolute; inset: 16%;
  border: var(--border-control) solid var(--smoke-border);
  border-radius: var(--radius-sm);
}
.s4-scan {
  position: absolute; left: 0; right: 0; top: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  opacity: 0;
}
[data-scene="4"] .s4-scan { animation: s4-scan 2.8s ease-in-out; }
@keyframes s4-scan {
  0%   { top: 8%;  opacity: 0; }
  15%  { opacity: .95; }
  70%  { top: 86%; opacity: .95; }
  100% { top: 86%; opacity: 0; }
}
.s4-verdict {
  position: absolute; left: 50%; top: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-inverse);
  background: var(--acid);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  opacity: 0;
}
[data-scene="4"] .s4-verdict { animation: s4-verdict 4s var(--ease-spring) forwards; }
@keyframes s4-verdict {
  0%, 62%  { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
  76%,100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- scene 5: logged ------------------------------------------------ */

.s5-grid {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.s5-grid i { aspect-ratio: 1; border-radius: 2px; background: var(--smoke); opacity: .3; }
.s5-grid i.on { background: var(--acid); }
.s5-grid i.late { background: var(--ember); }
.s5-grid i.grey { background: var(--text-secondary); }
[data-scene="5"] .s5-grid i {
  animation: s5-pop var(--duration-streak-burst) var(--ease-spring) forwards;
  animation-delay: calc(var(--i) * 22ms);
}
@keyframes s5-pop { to { opacity: 1; } }

.s5-day {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: var(--mono-counter-weight);
  color: var(--acid);
  text-align: center;
  line-height: 1;
}
.s5-card {
  margin-top: var(--space-sm);
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  text-align: center;
  opacity: 0;
}
[data-scene="5"] .s5-card { animation: s5-in var(--duration-card-reveal) var(--ease-spring) 1.1s forwards; }
@keyframes s5-in { to { opacity: 1; } }

/* ---------- the transport -------------------------------------------------- */

.player-side { width: 100%; }

.player-segments {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-lg);
}
.player-seg {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--smoke);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.player-seg::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--acid);
  transform-origin: left center;
  transform: scaleX(0);
}
.player-seg[data-state="done"]::after { transform: scaleX(1); }
.player-seg[data-state="active"]::after {
  animation: seg-fill var(--seg-duration, 5s) linear forwards;
}
.is-paused .player-seg[data-state="active"]::after { animation-play-state: paused; }
@keyframes seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.player-seg:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

.player-copy { min-height: 8.5em; max-width: 46ch; }
.player-step {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--acid);
}
.player-copy h3 {
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  color: var(--text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}
.player-copy p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary-accessible);
  margin: 0;
}

.player-controls { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.player-btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--size-touch-target);
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);
  border: var(--border-hairline) solid var(--smoke-border);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duration-ui) ease, color var(--duration-ui) ease;
}
.player-btn:hover { border-color: var(--acid); color: var(--acid); }
.player-btn:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.player-btn svg { width: 12px; height: 12px; fill: currentColor; }

/* Reduced motion: no autoplay, no looping animation. The scenes still switch
   when the visitor presses a segment, which is the whole component minus the
   part that moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
  .s1-stop::after,
  [data-scene="1"] .s1-alert .s-cta,
  [data-scene="3"] .s3-meter i,
  [data-scene="3"] .s3-strip,
  [data-scene="4"] .s4-scan,
  [data-scene="4"] .s4-verdict,
  [data-scene="5"] .s5-grid i,
  [data-scene="5"] .s5-card,
  .player-seg[data-state="active"]::after { animation: none !important; }
  .s3-strip  { transform: translateY(calc(-20 * 1em)); }
  .s4-verdict, .s5-card { opacity: 1; }
  .s5-grid i { opacity: 1; }
  .player-seg[data-state="active"]::after { transform: scaleX(1); }
}

/* The transport button swaps its glyph with its state. The label alone changing
   from Pause to Play while a pause icon stays put reads as a broken control. */
.player-btn .i-play { display: none; }
.player-btn[aria-pressed="true"] .i-pause { display: none; }
.player-btn[aria-pressed="true"] .i-play { display: inline-block; }