/*
 * HomeReel's screen player (docs: PRODUCT.md, Viewer rules; UI.md, The screen player).
 * Always dark, sized in viewport units so it reads the same on a TV and in a HomeBoard tile.
 * The numbers here were tuned by eye on real TVs in v1 (notes/v1-brief.md §6): keep them.
 */

@property --lap {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--player-bg, rgb(13, 12, 12));
  color: rgb(241, 245, 249);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
body.idle { cursor: none; }

#stage { position: fixed; inset: 0; }

/* A slide: its blurred backdrop fills the letterbox, the media sits whole on top. */
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; will-change: transform, opacity; }
.layer .backdrop { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(4vmin) brightness(.5) saturate(1.2); transform: scale(1.15); }
.layer .frame { position: relative; display: flex; max-width: 96vw; max-height: 94vh; border-radius: 24px; }
.layer img, .layer video { display: block; max-width: 96vw; max-height: 94vh; width: auto; height: auto; border-radius: 24px; object-fit: contain; }
.layer.kb img { animation: var(--kb) var(--slide-ms) linear both; }

/* Rule 1: the incoming slide goes on top; the outgoing one holds, then fades. Never a
 * simultaneous crossfade, which dims the screen. */
.layer.in { z-index: 2; }
.layer.out { z-index: 1; }
.layer.out.hold { animation: out-hold-fade var(--t-ms) ease both; }
@keyframes out-hold-fade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

.in.t-fade { animation: in-fade var(--t-ms) ease both; }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
.in.t-zoom { animation: in-zoom var(--t-ms) ease both; }
@keyframes in-zoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.in.t-scale_in { animation: in-scale var(--t-ms) ease both; }
@keyframes in-scale { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* Slides are full-screen pushes, both layers on one curve. */
.in.t-slide_left { animation: push-in-left var(--t-ms) cubic-bezier(.65, 0, .35, 1) both; }
.out.t-slide_left { animation: push-out-left var(--t-ms) cubic-bezier(.65, 0, .35, 1) both; }
.in.t-slide_right { animation: push-in-right var(--t-ms) cubic-bezier(.65, 0, .35, 1) both; }
.out.t-slide_right { animation: push-out-right var(--t-ms) cubic-bezier(.65, 0, .35, 1) both; }
@keyframes push-in-left { from { transform: translateX(100vw); } to { transform: translateX(0); } }
@keyframes push-out-left { from { transform: translateX(0); } to { transform: translateX(-100vw); } }
@keyframes push-in-right { from { transform: translateX(-100vw); } to { transform: translateX(0); } }
@keyframes push-out-right { from { transform: translateX(0); } to { transform: translateX(100vw); } }

/* Rule 3: Ken Burns, images only: 1 to 1.06, ±1.2 %. */
@keyframes kb-0 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, -1.2%); } }
@keyframes kb-1 { from { transform: scale(1.06) translate(1.2%, 0); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb-2 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(1.2%, 1.2%); } }
@keyframes kb-3 { from { transform: scale(1.06) translate(0, 1.2%); } to { transform: scale(1) translate(-1.2%, 0); } }

/* Rule 6: the racetrack, a glowing lap around a new upload. */
.frame.new { padding: .55vmin; background: conic-gradient(from var(--lap), transparent 0 62%, var(--chaser) 80%, transparent 98%); border-radius: calc(24px + .55vmin); animation: lap var(--lap-ms) linear infinite; box-shadow: 0 0 3vmin -0.5vmin var(--chaser); }
@keyframes lap { to { --lap: 360deg; } }

/* Rule 7: the album label, bottom left, on glass. */
.glass { position: fixed; z-index: 5; background: rgba(15, 23, 42, .45); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.6vmin; color: rgb(255, 255, 255); }
#label { left: 2.4vmin; bottom: 2.4vmin; padding: 1vmin 1.8vmin; font-size: 2.3vmin; font-weight: 600; max-width: 45vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#label .by { font-weight: 400; opacity: .75; }
body.promo-on #label { display: none; }

/* Rule 9: the promo slide fills the screen. */
.promo { flex-direction: column; gap: 3vh; text-align: center; background: radial-gradient(circle at 30% 20%, rgba(79, 70, 229, .55), transparent 60%), radial-gradient(circle at 80% 90%, rgba(0, 255, 209, .25), transparent 55%), rgb(13, 15, 18); }
.promo h1 { margin: 0; font-size: 9vh; font-weight: 800; letter-spacing: -.02em; }
.promo p { margin: 0; font-size: 3.6vh; opacity: .8; }

/* Rule 8: the QR card, bottom right. Darker glass than the label: its words must read over any
   photo, white ones included (white on 75% slate over white is 7.95:1). It glows once a minute. */
.qr-card { right: 2.4vmin; bottom: 2.4vmin; display: flex; align-items: center; gap: 1.6vmin; padding: 1.4vmin; background: rgba(15, 23, 42, .75); animation: qr-glow 60s ease-in-out infinite, drift 23min ease-in-out infinite; }
.qr-card[hidden] { display: none; }
.qr-code { flex: 0 0 auto; width: clamp(120px, 13vw, 300px); padding: .6vmin; border-radius: 1vmin; background: rgb(255, 255, 255); line-height: 0; }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-code path.dark { fill: rgb(0, 0, 0); }
.qr-text { display: flex; flex-direction: column; gap: .6vmin; max-width: 22vw; }
.qr-text strong { font-size: 2.6vmin; font-weight: 700; }
.qr-sub { font-size: 1.9vmin; opacity: .85; }
.qr-link { font-size: 1.9vmin; font-weight: 600; overflow-wrap: anywhere; }
@keyframes qr-glow { 0%, 96%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 98% { box-shadow: 0 0 4vmin .6vmin rgba(165, 180, 252, .55); } }
body.promo-on .qr-card { display: none; }
.promo-qr { width: clamp(180px, 26vh, 420px); margin-top: 1vh; }
.promo .promo-link { font-size: 3.4vh; font-weight: 700; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .qr-card { animation: drift 23min ease-in-out infinite; } }

/* Rule 10: the connection pill, top left. */
.pill { position: fixed; z-index: 6; top: 2vmin; left: 2vmin; display: flex; align-items: center; gap: .8vmin; padding: .6vmin 1.4vmin; border-radius: 999px; background: rgba(15, 23, 42, .45); font-size: 1.6vmin; color: rgba(255, 255, 255, .85); transition: opacity .6s; user-select: none; }
.pill .dot { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; background: rgb(74, 222, 128); }
.pill.warn .dot { background: rgb(251, 191, 36); }
.pill.calm { opacity: .35; }

/* Waiting and pairing: never a blank screen. */
.card { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5vh; padding: 8vh 10vw; text-align: center; background: rgb(13, 15, 18); }
.card-title { font-size: 4.5vh; font-weight: 700; }
.card-code { font-size: 18vh; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.card-code:empty { display: none; }
.card-detail { font-size: 2.8vh; color: rgb(167, 174, 187); max-width: 60ch; }

/* Rule 16: in a small tile the overlays step back so the photo stays the subject. */
@media (max-width: 700px), (max-height: 420px) {
  #label { font-size: 3.2vmin; }
  .pill { display: none; }
  .qr-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .layer.kb img, .frame.new { animation: none; }
}

/* Paused from the remote: everything holds where it is. */
body.paused .layer, body.paused .layer * { animation-play-state: paused; }

/* Burn-in (docs: contracts/homeboard.md): a display may show the same overlays for weeks, and
   HomeBoard's pixel shift moves the whole page only. So everything that stays put drifts by a
   couple of vmin, too slowly to notice, each on its own period so they never move together.
   It runs even with reduced motion: nobody can see it, and the TV needs it. */
#label { animation: drift 17min ease-in-out infinite; }
.pill { animation: drift 29min ease-in-out infinite reverse; }
.card-title, .card-code, .card-detail { animation: drift 19min ease-in-out infinite; }
@keyframes drift {
  0%, 100% { translate: 0 0; }
  25% { translate: 1.4vmin -.8vmin; }
  50% { translate: .6vmin -1.8vmin; }
  75% { translate: -.4vmin -.9vmin; }
}

/* `hidden` must win over the display rules above. */
[hidden] { display: none !important; }