/* date night by Amora: the design tokens and the popcorn couple's motion,
   from the Claude Design export "Date Night UI Foundations" (2026-10-12),
   export/date-night-tokens.css. Dark only.

   This folder is copied byte for byte to web/assets/movie-night/date-night/
   so the extension and the website share one set of foundations;
   extension/movie-night/test/foundations.test.js fails if they drift.

   Each page declares its own Open Runde @font-face (the fonts live in a
   different folder on each side). SF Pro Rounded is listed first for the
   Macs that have it installed, but Apple's licence keeps the font itself
   out of what we ship. */
:root {
  color-scheme: dark;

  /* Type */
  --dn-font: "SF Pro Rounded", ui-rounded, "Open Runde", "SF Arabic", system-ui, sans-serif;
  --dn-tabular: tabular-nums;

  /* Surfaces: website and popup */
  --dn-bg-website: #0E1216;
  --dn-bg-popup: linear-gradient(180deg, #161B20, #1C232A);
  --dn-card: #242C34;
  --dn-raised: #2A323A;
  --dn-field: #1C232A;
  --dn-bubble: #323B45;

  /* Surfaces: side panel (near black) */
  --dn-panel: #07080A;
  --dn-panel-raised: #111318;
  --dn-panel-control: #1F262D;
  --dn-panel-bubble: #1C2026;
  --dn-panel-field-edge: #3A424C;
  --dn-panel-ambient: radial-gradient(ellipse 90% 140px at 50% 0%, rgba(255,160,120,.05), transparent);

  /* Fills for states */
  --dn-hover: #333C46;
  --dn-pressed: #3B4550;
  --dn-hover-quiet: rgba(255,255,255,.05);
  --dn-divider: rgba(255,255,255,.06);
  --dn-divider-strong: rgba(255,255,255,.10);
  --dn-field-edge: #6B7580;
  --dn-focus-ring: 0 0 0 2px #FF6B9D;
  --dn-focus-offset: 2px;

  /* Text */
  --dn-text: #E6EBEF;
  --dn-text-2: #A9B1BA;
  --dn-text-3: #7E8892;
  --dn-text-muted: #59636D; /* never for body text */

  /* Colour jobs */
  --dn-pink: #E91E63;
  --dn-pink-text: #FF6B9D;
  --dn-lavender: #B9A8F2;   /* Pro and Max badges only */
  --dn-live: #3EDB7C;       /* live and connected only */
  --dn-error: #E0645C;      /* errors and Disconnect only */
  --dn-error-text: #FF8A80;
  --dn-error-fill: rgba(224,100,92,.16);
  --dn-grad: linear-gradient(135deg, #FF4F8B, #E91E63 40%, #9C27B0);
  --dn-kernel: linear-gradient(180deg, #FFF8EA 15%, #FDEBC8 55%, #F3D6A2); /* "date night" in the lockup */

  /* Glow (one hero glow per view) */
  --dn-glow-hero-edge: inset 0 0 0 1px rgba(255,107,157,.85);
  --dn-glow-hero: 0 0 6px rgba(255,79,139,.4), 0 0 26px rgba(233,30,99,.16), inset 0 0 18px rgba(233,30,99,.08);
  --dn-glow-hero-fill: radial-gradient(ellipse 90% 140px at 50% 0%, rgba(233,30,99,.2), transparent), #211A28;
  --dn-glow-button-inner: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px -8px rgba(80,0,60,.35);
  --dn-glow-button-pool: radial-gradient(closest-side, rgba(233,30,99,.9), rgba(156,39,176,.4) 60%, transparent); /* blur 12px, 48px tall, under the button */
  --dn-glow-ambient: radial-gradient(ellipse 70% 160px at 50% 0%, rgba(233,30,99,.08), transparent);
  --dn-glow-rim: 0 0 0 1.5px rgba(255,107,157,.9), 0 0 22px 2px rgba(233,30,99,.55), 0 0 46px 6px rgba(156,39,176,.3); /* Sam's video while Sam talks */
  --dn-poster-wash: radial-gradient(circle at 25% 30%, rgba(75,99,201,.9), transparent 60%), radial-gradient(circle at 80% 55%, rgba(138,79,199,.75), transparent 60%), #1A1F3A;

  /* Glass, for anything over video */
  --dn-glass: rgba(18,24,28,.35);
  --dn-glass-blur: blur(20px) saturate(150%);
  --dn-glass-edge: inset 0 0 0 .5px rgba(255,255,255,.2);

  /* Space */
  --dn-s1: 4px; --dn-s2: 8px; --dn-s3: 12px; --dn-s4: 16px; --dn-s5: 24px; --dn-s6: 32px; --dn-s7: 40px;
  --dn-s8: 56px; --dn-s9: 80px; --dn-s10: 120px; /* website only */

  /* Corners */
  --dn-r-tile-sm: 10px; --dn-r-tile: 12px; --dn-r-control: 16px; --dn-r-video: 20px;
  --dn-r-card: 24px; --dn-r-primary: 25px; --dn-r-pill: 999px;

  /* Motion */
  --dn-ease: cubic-bezier(.23,1,.32,1);
  --dn-ease-io: cubic-bezier(.65,0,.35,1);
  --dn-ease-sheet: cubic-bezier(.32,.72,0,1);
  --dn-t-press: 160ms;   /* scale .97 */
  --dn-t-hover: 160ms;
  --dn-t-state: 240ms;   /* popup changing state, crossfade + 6px rise */
  --dn-t-sheet: 380ms;
  --dn-t-join: 600ms;    /* Sam's video fade in with one bloom */
  --dn-t-pill: 3000ms;   /* playback note visible, then 400ms fade */
  --dn-t-react: 2200ms;  /* reaction rise */
  --dn-t-countdown: 3500ms;
  --dn-t-breathe: 2400ms; /* rim light while Sam talks */
}
@media (prefers-reduced-motion: reduce) {
  :root { --dn-t-react: 0ms; --dn-t-breathe: 0ms; }
}

/* The popcorn couple (DN-1D): the brand mark, never recoloured and never
   given a glow. It bobs 3px over 2.4s while someone waits; reduced motion
   holds it still. Its one hop when Sam arrives belongs to the side panel. */
.dn-couple { display: block; flex: none; aspect-ratio: 1; object-fit: contain; }
.dn-couple.is-waiting { animation: dn-couple-bob 2.4s ease-in-out infinite; }
@keyframes dn-couple-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .dn-couple.is-waiting { animation: none; }
}

/* A specific show, shown as itself (Riley, 2026-10-18; lib/show-card.js), in
   the cover card's language (DN-9 What to Watch): small corners and a faint
   edge, a 3px pink progress line under the cover, then the title and a grey
   detail line. A real cover keeps its own shape and title art. */
.show-card { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; text-align: start; }
.show-card-pic { aspect-ratio: 16 / 9; border-radius: 6px; background: var(--art) center / cover no-repeat, #1A1F3A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.show-card-pic.with-bar { border-radius: 6px 6px 0 0; }
.show-card-bar { height: 3px; margin-top: -8px; background: rgba(255, 255, 255, .2); }
.show-card-bar span { display: block; height: 100%; background: #E91E63; }
.show-card-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.show-card-title { font-size: 15px; line-height: 20px; font-weight: 600; color: #E6EBEF; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.show-card-by { display: flex; align-items: center; min-width: 0; font-size: 13px; line-height: 18px; color: #7E8892; white-space: nowrap; }
.show-card-by img { height: 11px; width: auto; flex: none; margin-inline-end: 6px; }
.show-card-creator { overflow: hidden; text-overflow: ellipsis; }
.show-card-site:not(:empty) + .show-card-creator:not(:empty)::before { content: "·"; margin: 0 6px; }