/* Make Fans TV display.
   Sized for a 16:9 TV viewed from across a room: type and spacing are in vmin/vh so the
   layout holds at 1280x720, 1920x1080 or a 960x540 smart-TV viewport alike.
   Conservative CSS on purpose (no inset/clamp/gap) so older TV browsers render it. */

@font-face {
  /* Outfit by Rodrigo Fuenzalida, SIL Open Font License 1.1 (self-hosted latin subset) */
  font-family: "Outfit";
  src: url("assets/fonts/outfit.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #07080d;
  --ink: #fbf8f3;
  --ink-soft: rgba(251, 248, 243, 0.74);
  --ink-faint: rgba(251, 248, 243, 0.46);
  --coral: #ff5f6d;
  --gold: #ffc371;
  --violet: #765cff;
  --fade: 1400ms;
  --shift-x: 0px;
  --shift-y: 0px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-shadow: 0 0.15vmin 0.9vmin rgba(0, 0, 0, 0.55), 0 0 2.6vmin rgba(0, 0, 0, 0.28);
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ground); color: var(--ink); }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; }
body.idle, body.idle * { cursor: none !important; }
[hidden] { display: none !important; }
img { display: block; border: 0; }

/* ---------- slides ---------- */

#stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--ground); }

.slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity var(--fade) ease-in-out; will-change: opacity; }
.slide.active { opacity: 1; }

/* Pre-blurred 384x216 copy from sync.py; no CSS filter, so weak TV GPUs stay smooth. */
.slide .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.slide .shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(7, 8, 13, 0.34) 0%, rgba(7, 8, 13, 0.6) 62%, rgba(7, 8, 13, 0.84) 100%); }
.slide.side .shade { background: linear-gradient(90deg, rgba(7, 8, 13, 0.86) 0%, rgba(7, 8, 13, 0.66) 34%, rgba(7, 8, 13, 0.44) 62%, rgba(7, 8, 13, 0.62) 100%); }

.slide .scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%); }
.slide.bleed .scrim { opacity: 1; }
.slide.bleed.nocap .scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%); }

.slide .frame { position: absolute; overflow: hidden; transform-origin: 50% 50%; }
.slide .fg { position: absolute; top: 0; left: 0; transform-origin: 50% 50%; }
.slide.card .frame { background: #fff; border-radius: 1.4vmin;
  box-shadow: 0 2.4vmin 6.5vmin rgba(0, 0, 0, 0.55), 0 0.4vmin 1.2vmin rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ---------- captions ---------- */

.caption { position: absolute; pointer-events: none; }
.caption.none { display: none; }
.caption.side { display: flex; flex-direction: column; justify-content: center; }
/* .cap-in entrance is animated from app.js, and skipped between images of the same post. */
.caption.side .cap-in:before { content: ""; display: block; width: 7vmin; height: 0.7vmin; border-radius: 0.35vmin; margin-bottom: 3vmin;
  background: linear-gradient(90deg, var(--coral), var(--gold)); }

.meta { display: flex; align-items: center; }
.avatar { flex: none; width: 6vmin; height: 6vmin; border-radius: 50%; object-fit: cover; margin-right: 1.7vmin;
  box-shadow: 0 0 0 0.3vmin rgba(255, 255, 255, 0.9), 0 0.5vmin 1.6vmin rgba(0, 0, 0, 0.45); }
.byline { min-width: 0; }
.who { font-size: 2.7vmin; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--text-shadow); }
.when { margin-top: 0.35vmin; font-size: 2vmin; line-height: 1.2; color: var(--ink-soft); text-shadow: var(--text-shadow); }
.who:empty, .when:empty { display: none; }
.pill-new { display: none; flex: none; margin-left: 2vmin; padding: 0.55vmin 1.3vmin 0.6vmin; border-radius: 99vmin;
  font-size: 1.6vmin; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #22110a;
  background: linear-gradient(90deg, var(--coral), var(--gold)); box-shadow: 0 0.4vmin 1.8vmin rgba(255, 95, 109, 0.45); }
.slide.fresh .pill-new { display: inline-block; }

.text { margin: 1.8vmin 0 0; font-size: 3.4vmin; line-height: 1.28; font-weight: 500; text-shadow: var(--text-shadow);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.caption.side .text { margin-top: 2.6vmin; font-size: 3.9vmin; line-height: 1.3; font-weight: 400; -webkit-line-clamp: 8; }
.text:empty { display: none; }

/* ---------- HUD ---------- */

#hud { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 1s ease; }
body.mode-slides #hud { opacity: 1; }
.drift { transform: translate3d(var(--shift-x), var(--shift-y), 0); transition: transform 40s linear; }

.brand { position: absolute; left: 4vw; top: 4.6vh; display: flex; align-items: center; }
.badge { flex: none; width: 6.8vmin; height: 6.8vmin; border-radius: 50%;
  box-shadow: 0 0 0 0.35vmin rgba(255, 255, 255, 0.2), 0 0.6vmin 2.2vmin rgba(0, 0, 0, 0.5); }
.brand-text { margin-left: 1.8vmin; }
.brand-title { font-size: 3vmin; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; line-height: 1; text-shadow: var(--text-shadow); }
.brand-sub { margin-top: 0.9vmin; font-size: 1.9vmin; font-weight: 400; letter-spacing: 0.02em; color: var(--ink-soft); text-shadow: var(--text-shadow); }

.clock { position: absolute; right: 4vw; top: 4.6vh; text-align: right; }
.clock .time { font-size: 4.6vmin; font-weight: 600; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-shadow: var(--text-shadow); }
.clock .date { margin-top: 0.9vmin; font-size: 1.8vmin; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); text-shadow: var(--text-shadow); }

/* Amber dot bottom-right when the feed has not refreshed for a while. Only ops will notice it. */
.health { position: absolute; right: 4vw; bottom: 3.4vh; width: 1vmin; height: 1vmin; border-radius: 50%; background: #ffb020;
  box-shadow: 0 0 1.2vmin rgba(255, 176, 32, 0.8); opacity: 0; transition: opacity 1s ease; }
.health.bad { opacity: 0.9; }

.paused-pill { position: absolute; top: 5vh; left: 50%; transform: translateX(-50%); padding: 0.9vmin 2.2vmin; border-radius: 99vmin;
  background: rgba(0, 0, 0, 0.6); font-size: 1.8vmin; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fs-hint { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); padding: 1.1vmin 2.6vmin; border-radius: 99vmin;
  background: rgba(0, 0, 0, 0.62); font-size: 2.1vmin; opacity: 0; transition: opacity 600ms ease; white-space: nowrap; }
.fs-hint.show { opacity: 1; }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 0.5vmin; background: rgba(255, 255, 255, 0.07); }
.progress i { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral), var(--gold)); }

/* ---------- empty + locked screens ---------- */

.screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center; background: var(--ground); }
.screen-in { position: relative; max-width: 82vw; }
.screen-badge { width: 16vmin; height: 16vmin; margin: 0 auto 4.4vmin; border-radius: 50%;
  box-shadow: 0 0 0 0.7vmin rgba(255, 255, 255, 0.12), 0 2vmin 6vmin rgba(0, 0, 0, 0.5); animation: bob 7s ease-in-out infinite; }
#empty h1 { margin: 0; font-size: 14vmin; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--gold);
  background: linear-gradient(90deg, var(--coral), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#empty .lede { margin: 3.2vmin 0 0; font-size: 3.8vmin; font-weight: 500; }
.screen .hint { margin: 2.2vmin 0 0; font-size: 2.5vmin; color: var(--ink-soft); }
.screen .hint b { color: var(--ink); font-weight: 600; }
#empty .status { margin: 7vmin 0 0; font-size: 1.8vmin; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
#locked h2 { margin: 0; font-size: 4.8vmin; font-weight: 700; }

.aurora i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; }
.aurora .a1 { left: -30vmax; top: -42vmax; background: radial-gradient(circle, rgba(255, 95, 109, 0.42) 0%, rgba(255, 95, 109, 0) 62%); animation: drift1 26s ease-in-out infinite alternate; }
.aurora .a2 { right: -36vmax; bottom: -46vmax; background: radial-gradient(circle, rgba(255, 195, 113, 0.34) 0%, rgba(255, 195, 113, 0) 62%); animation: drift2 32s ease-in-out infinite alternate; }
.aurora .a3 { left: 18vmax; bottom: -62vmax; background: radial-gradient(circle, rgba(118, 92, 255, 0.3) 0%, rgba(118, 92, 255, 0) 62%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(18vmax, 14vmax, 0); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16vmax, -10vmax, 0); } }
@keyframes drift3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(12vmax, -16vmax, 0); } }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1.3vmin, 0); } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .screen-badge { animation: none; }
}