/* The dark, cinematic theme. Loaded after styles.css, so it only says what is different:
   a midnight stage, one warm light, ivory type, white pill buttons, and the door of light.

   Palette:  midnight #060812   ink #0E1426   gold #E9B44C   warm light #FFF3D6   ivory #F4EDE0
*/

:root {
  color-scheme: dark;
  --hue: 224;
  --bg: 228 46% 4%;
  --fg: 40 28% 94%;
  --muted: 225 12% 70%;
  --border: 226 20% 16%;
  --card: 228 34% 7.5%;
  --soft: 228 28% 11%;
  --primary: 41 86% 62%;
  --primary-fg: 228 50% 6%;
  --accent: 228 28% 14%;
  --tile: 41 70% 45%;
  --danger: 0 66% 62%;
  --success: 150 50% 54%;
  --warn: 36 85% 62%;
  --dark: 228 50% 3%;
  --dark-fg: 40 22% 90%;
  --dark-line: 228 24% 13%;
  --lantern: 41 92% 64%;
  --lx: 70%;
  --ly: 46%;
  --mx: 50%;
  --my: 50%;
}

body { background: hsl(var(--bg)); }
a { color: hsl(var(--primary)); }
.brand .logo { display: block; height: 38px; width: auto; }
footer .brand .logo { height: 34px; opacity: .92; }

/* the colour wash that follows each pillar stays, but quiet and still */
.aurora i { animation: none; opacity: .2; }
.aurora i:nth-child(1) { background: hsl(var(--hue) 50% 22%); }
.aurora i:nth-child(2) { background: hsl(calc(var(--hue) + 48) 46% 20%); }
.aurora i:nth-child(3) { background: hsl(36 50% 18%); opacity: .12; }

/* white pill buttons: the one bright thing besides the light */
.btn { background: hsl(40 45% 94%); color: #06080f; border-radius: 999px; white-space: nowrap; flex: none; }
.btn:hover { filter: none; background: #fff; }
.btn.small { border-radius: 999px; }
.btn.ghost { background: transparent; color: hsl(var(--fg)); border: 1px solid hsl(0 0% 100% / .18); }
.btn.ghost:hover { background: hsl(0 0% 100% / .07); }
.btn.subtle { background: hsl(0 0% 100% / .08); color: hsl(var(--fg)); }
.nav { background: hsl(228 36% 6% / .62); border-color: hsl(0 0% 100% / .1); margin-bottom: -70px; }
.nav nav a:not(.btn) { color: hsl(225 10% 76%); }

/* cards and panels sit on the dark as quiet glass */
.card, .item, .mock, .window, .float, .phone { background: hsl(228 30% 8.5% / .88); }
.pillar { background: linear-gradient(150deg, hsl(var(--hue) 38% 13% / .95), hsl(calc(var(--hue) + 40) 38% 9% / .92)); }
.pillar .tag { color: hsl(var(--hue) 70% 72%); }
.join-card { background: hsl(0 0% 100% / .045); border-color: hsl(0 0% 100% / .13); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
input[type=email], input[type=text], select { background-color: hsl(0 0% 0% / .38); border-color: hsl(0 0% 100% / .14); }
select { color-scheme: dark; }
.share { background: hsl(0 0% 100% / .05); }
.marquee li { background: hsl(0 0% 100% / .04); color: hsl(var(--fg) / .82); }
.total { background: hsl(var(--hue) 40% 20%); }

/* ═══ the hero: a door of light ═════════════════════════════ */
/* words first, centred: headline, the box, the live count. The film is a wide band under them. */
.cine { --band: calc(min(100vw, 1500px) / 2.65); position: relative; overflow: hidden; padding: 104px 0 calc(var(--band) - 34px); isolation: isolate; }
.cine-bg, .cine-bg > * { position: absolute; inset: 0; pointer-events: none; }
.cine-bg { z-index: -1; }

.cine-lattice {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpolygon points='38,14 42.6,26.9 55,21 49.1,33.4 62,38 49.1,42.6 55,55 42.6,49.1 38,62 33.4,49.1 21,55 26.9,42.6 14,38 26.9,33.4 21,21 33.4,26.9' fill='none' stroke='%23e9b44c' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle 520px at var(--lx) var(--ly), #000 0, rgba(0,0,0,.45) 38%, transparent 74%), radial-gradient(circle 240px at var(--mx) var(--my), rgba(0,0,0,.8), transparent 70%);
  mask-image: radial-gradient(circle 520px at var(--lx) var(--ly), #000 0, rgba(0,0,0,.45) 38%, transparent 74%), radial-gradient(circle 240px at var(--mx) var(--my), rgba(0,0,0,.8), transparent 70%);
  opacity: .45;
}
.cine-fog { display: none; }
.cine-dust { width: 100%; height: 100%; }

/* the drawn scene (only used when the film cannot play) is the same wide band under the words.
   One quiet story: a man walks toward a door of light. The door never closes, no rays are drawn;
   the scene fades up from black at the start and back to black at the end, like footage. */
.door-scene {
  --dx: 50%;               /* where the door stands, across the scene */
  --hz: 32%;               /* how high the floor line sits */
  --walk: 22s;
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(100%, 1500px); height: var(--band); z-index: 0; pointer-events: none;
  container-type: size; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%);
}
.door-scene > * { position: absolute; }
.ds-world { inset: 0; transform-origin: var(--dx) 55%; animation: ds-world var(--walk) linear infinite, ds-cam var(--walk) linear infinite; }
.ds-world > * { position: absolute; }
.ds-night { inset: 0; background: radial-gradient(70% 62% at var(--dx) 44%, hsl(228 40% 14%) 0, hsl(228 50% 6.5%) 58%, hsl(228 55% 3%) 100%); }

/* the light: a soft bloom, a pool on the floor, and the door itself */
.ds-bloom { left: var(--dx); bottom: calc(var(--hz) + 8cqh); width: 100cqh; height: 100cqh; translate: -50% 50%;
  background: radial-gradient(closest-side, hsl(var(--lantern) / .42), hsl(var(--lantern) / .13) 46%, transparent 74%); animation: ds-bloom var(--walk) ease-in-out infinite; }
.ds-spill { left: var(--dx); bottom: 0; width: 70cqw; height: var(--hz); translate: -50% 0; filter: blur(14px);
  background: linear-gradient(to bottom, hsl(var(--lantern) / .3), hsl(var(--lantern) / .06) 78%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.ds-door { left: var(--dx); bottom: var(--hz); translate: -50% 0; width: min(calc(58cqh * 0.4889), 20cqw); aspect-ratio: 44 / 90; overflow: visible;
  filter: drop-shadow(0 0 22px hsl(var(--lantern) / .55)) blur(.8px); }
.ds-reflect { left: var(--dx); bottom: calc(var(--hz) - 17cqh); width: min(calc(46cqh * 0.3), 14cqw); height: 17cqh; translate: -50% 0; filter: blur(6px);
  background: linear-gradient(to bottom, hsl(var(--lantern) / .45), transparent); }

/* mist along the ground, with a thin veil in front of his feet */
.ds-fog { left: -20%; width: 100%; height: 26cqh; bottom: calc(var(--hz) - 16cqh); filter: blur(26px);
  background: radial-gradient(closest-side, hsl(225 25% 72% / .18), transparent); }
.ds-fog.a { animation: ds-fog-a 50s ease-in-out infinite alternate; }
.ds-fog.b { bottom: calc(var(--hz) - 26cqh); left: 20%; width: 90%; opacity: .8; animation: ds-fog-b 64s ease-in-out infinite alternate; }
.ds-fog.front { bottom: 0; left: 0; width: 100%; height: 22cqh; opacity: .55; animation: ds-fog-b 70s ease-in-out infinite alternate; }

/* film feel: darker corners and a fine moving grain */
.ds-vignette { inset: 0; background: radial-gradient(120% 100% at var(--dx) 45%, transparent 38%, rgba(0, 0, 0, .62) 100%); }
.ds-grain { top: -25%; left: -25%; width: 150%; height: 150%; opacity: .1; mix-blend-mode: overlay; animation: ds-grain .7s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ds-fade { inset: auto 0 0 0; height: 22%; background: linear-gradient(to bottom, transparent, hsl(var(--bg))); }

/* the man: seen from behind, in a thobe and ghutra, walking slowly toward the light */
.ds-walker { left: calc(var(--dx) - 16cqw); bottom: 3%; height: 36cqh; aspect-ratio: 100 / 300; translate: -50% 0; transform-origin: 50% 100%; animation: ds-walk var(--walk) cubic-bezier(.3, .4, .4, 1) infinite; }
.ds-man { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 0 2.5px hsl(var(--lantern) / .65)) blur(.45px); }
.ds-cloth { fill: #05070d; }
.ds-agal { fill: none; stroke: #0a0d17; stroke-width: 4; stroke-linecap: round; }
.ds-foot { fill: #05070d; }
.ds-shadow { position: absolute; left: 50%; top: 97%; width: 100%; height: 150%; translate: -50% 0; z-index: -1; filter: blur(10px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent); clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); }
.ds-body { animation: ds-bob 1.15s ease-in-out infinite; }
.ds-arm { transform-box: view-box; }
.ds-arm.l { transform-origin: 24px 66px; animation: ds-swing-l 1.15s ease-in-out infinite alternate; }
.ds-arm.r { transform-origin: 76px 66px; animation: ds-swing-r 1.15s ease-in-out infinite alternate; }
.ds-foot.a { animation: ds-step-a 1.15s ease-in-out infinite; }
.ds-foot.b { animation: ds-step-b 1.15s ease-in-out infinite; }

@keyframes ds-world { 0% { opacity: 0; } 2.4% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ds-cam { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes ds-bloom { 0%, 80% { opacity: .85; transform: scale(1); } 90% { opacity: 1; transform: scale(1.12); } 100% { opacity: .85; transform: scale(1); } }
@keyframes ds-walk {
  0%, 3% { opacity: 0; transform: translate(0, 0) scale(1); }
  8% { opacity: 1; transform: translate(0, 0) scale(1); }
  88% { opacity: 1; transform: translate(16cqw, -29cqh) scale(.34); }
  94%, 100% { opacity: 0; transform: translate(16cqw, -29cqh) scale(.34); }
}
@keyframes ds-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ds-swing-l { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes ds-swing-r { from { transform: rotate(4deg); } to { transform: rotate(-3deg); } }
@keyframes ds-step-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ds-step-b { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(0); } }
@keyframes ds-fog-a { to { transform: translate3d(8%, -3%, 0); } }
@keyframes ds-fog-b { to { transform: translate3d(-9%, 2%, 0); } }
@keyframes ds-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* real footage, when there is some (set heroVideo in config.js): it replaces the drawn scene.
   It is cropped to a wide band that keeps the door, the man and the floor, and cuts the corner mark.
   The top and the two sides melt into the page, so the door seems to rise out of the dark. */
.cine-video { inset: auto auto 0 50%; translate: -50% 0; width: min(100%, 1500px); height: var(--band); object-fit: cover; object-position: 50% 85%; opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect; }
.cine-video.cropped { object-position: 50% 50%; }   /* the phone film is already cropped to the band */
.cine.has-video .door-scene, .cine.has-video .cine-lattice, .cine.has-video .cine-dust { display: none; }

/* the words, in the middle */
.cine-copy { position: relative; z-index: 1; width: 100%; text-align: center; }
.cine-copy > * { margin-left: auto; margin-right: auto; }
.cine .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: hsl(225 10% 74%); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.cine .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--lantern)); box-shadow: 0 0 0 4px hsl(var(--lantern) / .18), 0 0 18px hsl(var(--lantern) / .7); }
.cine h1 { text-align: center; max-width: 17em; margin: 20px auto 0; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: #fafafa; }
.cine h1 span { display: block; color: hsl(41 90% 68%); }
.cine .lead { text-align: center; max-width: 36em; margin: 22px auto 0; font-size: clamp(16px, 1.4vw, 19px); color: hsl(225 10% 72%); }
.cine .join-card { margin: 32px auto 0; max-width: 540px; }

/* the one optional question, and the live count under the box */
.need { margin-top: 12px; }
.need-other { margin-top: 10px; }
.need-other input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid hsl(0 0% 100% / .14); border-radius: var(--radius); color: hsl(var(--fg)); font: inherit; font-size: 16px; }
.count { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 18px auto 0; padding: 7px 16px; border-radius: 999px;
  color: hsl(225 10% 78%); background: hsl(228 40% 5% / .62); border: 1px solid hsl(0 0% 100% / .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.count b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.count .live { width: 8px; height: 8px; border-radius: 50%; flex: none; background: hsl(var(--lantern)); animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--lantern) / .55); } 70%, 100% { box-shadow: 0 0 0 9px hsl(var(--lantern) / 0); } }
.cine-fade { position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(to bottom, transparent, hsl(var(--bg))); pointer-events: none; z-index: 0; }

.sources { margin-top: -24px; position: relative; z-index: 1; }
.peek { padding-top: 28px; }

/* phones: the same stack, a taller band so the door stays big */
@media (max-width: 860px) {
  .cine { --band: min(88vw, 400px); padding-top: 96px; }
  .cine h1 { font-size: clamp(32px, 9vw, 46px); margin-top: 14px; }
  .cine .lead { font-size: 15px; margin-top: 16px; }
  .cine .join-card { margin-top: 22px; }
}

/* very narrow phones: the header button says just "Join" */
@media (max-width: 400px) {
  .nav { padding-left: 12px; }
  .brand .logo { height: 32px; }
}

/* anyone who asked for less movement gets one still, calm frame: the door lit, the man midway */
@media (prefers-reduced-motion: reduce) {
  .door-scene *, .cine-fog { animation: none !important; }
  .ds-world { opacity: 1; }
  .ds-walker { opacity: 1; transform: translate(9cqw, -15cqh) scale(.62); }
  .ds-grain { display: none; }
  .count .live { animation: none; }
}