/* popcornpals landing page: the private screening room. A cinema screen in a
   dark room, velvet curtains that open as you scroll, Rocco and Pip in the
   front row, and the rest of the page told as reels of film. Monsoon gives
   the base, the buttons and the accordion; these rules set the room. */

:root {
  --seed: #7a2633;
  --velvet: #5e1a26;
  --velvet-2: #7a2633;
  --velvet-3: #9c4a55;
  --rose: #c9a1a6;
  --butter: #cdbb8e;
  --beam: 255 243 224;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --top-h: 64px;
}

:root[data-theme='dark'] {
  --background: #0a0a0b;
  --foreground: #ededed;
  --surface: #111113;
  --surface-2: #17171a;
  --surface-3: #1e1e22;
  --muted: #17171a;
  --muted-foreground: #8a8a8f;
  --border: rgb(255 255 255 / .08);
  --primary: #ededed;
  --primary-foreground: #0a0a0b;
  --ring: #c9a1a6;
  --accent: #9c4a55;
  --accent-foreground: #fff;
  --secondary: #1e1e22;
  --secondary-foreground: #ededed;
  --hair: rgb(255 255 255 / .08);
  --hair-2: rgb(255 255 255 / .14);
  --soft: #b9b4b1;
  --accent-ink: #c9a1a6;
  --stage-top: #0d0c0e;
  --stage-floor: #0a0a0b;
  --film: #1c181b;
  --frame-bg: #111113;
  --frame-glow: rgb(var(--beam) / .045);
  --spot: rgb(var(--beam) / .05);
  --beam-c: var(--beam);
  --beam-a: .1;
  --mote: rgb(var(--beam) / .5);
  --grain-opacity: .06;
  --cta-bg: #7a2633;
  --cta-hover: #8a2e3c;
  --cta-fg: #fbf1f1;
}

:root[data-theme='light'] {
  --background: #f5f3ef;
  --foreground: #141416;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #efece7;
  --muted: #efece7;
  --muted-foreground: #66666b;
  --border: rgb(0 0 0 / .09);
  --primary: #141416;
  --primary-foreground: #f5f3ef;
  --ring: #7a2633;
  --accent: #7a2633;
  --accent-foreground: #fff;
  --secondary: #efece7;
  --secondary-foreground: #141416;
  --hair: rgb(0 0 0 / .09);
  --hair-2: rgb(0 0 0 / .16);
  --soft: #4a4a50;
  --accent-ink: #7a2633;
  --stage-top: #ebe7e0;
  --stage-floor: #f5f3ef;
  --film: #d9d2c8;
  --frame-bg: #ffffff;
  --frame-glow: rgb(122 38 51 / .035);
  --spot: rgb(122 38 51 / .04);
  --beam-c: 122 38 51;
  --beam-a: .05;
  --mote: rgb(122 38 51 / .35);
  --grain-opacity: .035;
  --cta-bg: #7a2633;
  --cta-hover: #6a1f2b;
  --cta-fg: #ffffff;
}

/* ------------------------------------------------------------------ base */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body.site {
  margin: 0;
  font-family: var(--font);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

:root[data-theme='dark'] .art-light,
:root[data-theme='light'] .art-dark {
  display: none;
}

[data-voodoo-theme='dark'] .ti-light,
[data-voodoo-theme='light'] .ti-dark,
:root[data-theme='dark'] .ti-light,
:root[data-theme='light'] .ti-dark {
  display: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: .08em .35em;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1px solid var(--hair);
  overflow-wrap: anywhere;
}

.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--foreground);
  border: 1px solid var(--hair-2);
}

.skip:focus {
  top: 12px;
}

/* Buttons: Monsoon's .btn, dressed in velvet. */
.cta {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  --btn-hover: var(--cta-hover);
  --btn-press: var(--velvet);
  --btn-border: rgb(201 161 166 / .28);
  --btn-shadow: 0 14px 34px -16px rgb(122 38 51 / .9), inset 0 1px rgb(255 255 255 / .12);
  font-weight: 600;
  letter-spacing: .01em;
}

.ghost {
  --btn-fg: #ededed;
  --btn-border: rgb(255 255 255 / .18);
  --btn-hover: rgb(255 255 255 / .06);
  --btn-press: rgb(255 255 255 / .1);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  color: var(--foreground);
  transition: background-color .2s, border-color .2s;
}

.icon-btn:hover {
  background: var(--surface-3);
}

.icon-btn .ic {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------- header */

.top {
  position: relative;
  z-index: 20;
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 40px);
  background: var(--background);
  border-bottom: 1px solid var(--hair);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--foreground);
  text-decoration: none;
}

.nav {
  display: none;
  gap: clamp(18px, 2.2vw, 32px);
  font-size: .94rem;
}

.nav a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s;
}

.nav a:hover {
  color: var(--foreground);
}

.tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-cta {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  --btn-hover: var(--cta-hover);
  --btn-press: var(--velvet);
  --btn-border: rgb(201 161 166 / .25);
  font-weight: 600;
}

@media (min-width: 920px) {
  .nav {
    display: flex;
  }
}

/* ------------------------------------------------------------------ hero */

.cinema {
  --val-h: clamp(40px, 6.5svh, 76px);
  --screen-top: calc(var(--val-h) + clamp(10px, 2.5svh, 28px));
  --sh: clamp(300px, 55svh, 780px);
  --sw: min(88vw, calc(var(--sh) * 2.05));
  --seats-w: clamp(340px, 68vw, 1120px);
  --seat-lift: .5;
  --open-k: .55;
  --cover: .13;
  position: relative;
  height: 100svh;
  min-height: 600px;
  background: var(--stage-floor);
}

/* The curtains open once the page loads (see .motion .stage below): --p
   goes from 0, drawn over the edges of the screen, to 1, gathered at the
   sides. The hero is one viewport tall, with no pinned scroll range. */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.stage {
  --p: 1;
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgb(var(--beam-c) / calc(var(--beam-a) * .9)), transparent 70%),
    linear-gradient(180deg, var(--stage-top), var(--stage-floor) 70%);
}

/* Bottom fade into the page, behind the seats. */
.stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  z-index: 4;
  background: linear-gradient(180deg, transparent, var(--stage-floor));
  pointer-events: none;
}

/* The projector beam comes from behind the audience, over their heads. */
.beam {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% -35%, transparent 148deg, rgb(var(--beam-c) / calc(var(--beam-a) * .5)) 160deg, rgb(var(--beam-c) / var(--beam-a)) 180deg, rgb(var(--beam-c) / calc(var(--beam-a) * .5)) 200deg, transparent 212deg);
  opacity: calc(.55 + .45 * var(--p));
}

.screen {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--screen-top);
  width: var(--sw);
  height: var(--sh);
  transform: translateX(-50%);
  container-type: size;
  border-radius: 4px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, #1b1719 0%, #0d0c0e 62%, #070708 100%);
  border: 1px solid rgb(255 255 255 / .07);
  box-shadow:
    0 0 0 6px #050506,
    0 0 0 7px rgb(255 255 255 / .05),
    0 0 calc(60px + 80px * var(--p)) calc(4px + 14px * var(--p)) rgb(var(--beam) / calc(.035 + .04 * var(--p)));
}

:root[data-theme='light'] .screen {
  box-shadow:
    0 0 0 6px #1a1718,
    0 30px 80px -30px rgb(20 20 22 / .5);
}

/* A whisper of projected light moving across the screen. */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 50% 60% at 50% 30%, rgb(var(--beam) / .06), transparent 70%);
  pointer-events: none;
}

.credits {
  position: absolute;
  inset: 0 0 22% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.6cqh, 22px);
  padding: 4cqh clamp(18px, 6cqw, 72px) 0;
  text-align: center;
  color: #ededed;
}

.eyebrow {
  font-size: clamp(.66rem, 1.2cqw, .8rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #c9a1a6;
  margin: 0;
}

.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, min(7.4cqw, 12.5cqh), 6.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: #f1ede6;
  text-wrap: balance;
}

.headline .credit {
  display: block;
}

.lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(.95rem, min(1.75cqw, 3.3cqh), 1.3rem);
  line-height: 1.55;
  color: #b9b4b1;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(2px, 1cqh, 10px);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(.78rem, 1.3cqw, .9rem);
  color: #8a8a8f;
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.facts .ic {
  color: #cdbb8e;
  opacity: .85;
}

/* Opening credits: each line fades in after the one before it. */
.motion .credit {
  opacity: 0;
  animation: credit 1.2s var(--ease) forwards;
}

.motion .c1 { animation-delay: .15s; }
.motion .c2 { animation-delay: .5s; }
.motion .c3 { animation-delay: .9s; }
.motion .c4 { animation-delay: 1.1s; }
.motion .c5 { animation-delay: 1.3s; }
.motion .c6 { animation-delay: 1.5s; }

@keyframes credit {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Dust in the beam. */
.motes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.motes i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mote);
  opacity: .6;
}

.motes i:nth-child(1) { left: 42%; top: 18%; }
.motes i:nth-child(2) { left: 55%; top: 26%; width: 2px; height: 2px; }
.motes i:nth-child(3) { left: 48%; top: 44%; }
.motes i:nth-child(4) { left: 61%; top: 12%; width: 2px; height: 2px; }
.motes i:nth-child(5) { left: 37%; top: 33%; width: 2px; height: 2px; }
.motes i:nth-child(6) { left: 52%; top: 8%; }
.motes i:nth-child(7) { left: 58%; top: 39%; width: 2px; height: 2px; }
.motes i:nth-child(8) { left: 45%; top: 30%; width: 2px; height: 2px; }
.motes i:nth-child(9) { left: 39%; top: 52%; width: 2px; height: 2px; }
.motes i:nth-child(10) { left: 63%; top: 50%; }

.motion .motes i {
  animation: mote 16s ease-in-out infinite alternate;
}

.motion .motes i:nth-child(2n) { animation-duration: 21s; animation-delay: -6s; }
.motion .motes i:nth-child(3n) { animation-duration: 25s; animation-delay: -11s; }

@keyframes mote {
  0% { transform: translate(0, 0); opacity: .15; }
  50% { opacity: .7; }
  100% { transform: translate(28px, -46px); opacity: .2; }
}

/* The opening: the house lights dim, then the curtains part while the
   opening credits roll. Without motion (or without the .motion class the
   head script sets) the curtains simply start open. */
.motion .stage {
  animation: curtains-open 2.6s cubic-bezier(.55, 0, .25, 1) .45s both;
}

@keyframes curtains-open {
  from { --p: 0; }
  to { --p: 1; }
}

/* Curtains: they start drawn over the edges of the screen and gather to the
   sides as --p goes from 0 to 1. The folds are sized in sevenths of the
   panel, so they bunch up as the panel narrows. */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: calc(((100% - var(--sw)) / 2) * var(--open-k) + (((100% - var(--sw)) / 2) * (1 - var(--open-k)) + var(--sw) * var(--cover)) * (1 - var(--p)));
  background:
    linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 26%, rgb(0 0 0 / .1) 70%, rgb(0 0 0 / .55)),
    linear-gradient(90deg, #1a070b, #3a1018 32%, #561824 50%, #3a1018 68%, #1a070b) 0 0 / calc(100% / 7) 100% repeat-x;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
  pointer-events: none;
}

.curtain-l {
  left: 0;
  box-shadow: 16px 0 36px -10px rgb(0 0 0 / .7);
}

.curtain-r {
  right: 0;
  box-shadow: -16px 0 36px -10px rgb(0 0 0 / .7);
}

.curtain::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, rgb(201 161 166 / 0), rgb(201 161 166 / .12));
}

.curtain-l::after { right: 0; }

.curtain-r::after {
  left: 0;
  transform: scaleX(-1);
}

:root[data-theme='light'] .curtain-l { box-shadow: 14px 0 30px -12px rgb(20 10 12 / .45); }
:root[data-theme='light'] .curtain-r { box-shadow: -14px 0 30px -12px rgb(20 10 12 / .45); }

.valance {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: var(--val-h);
  background: url('../assets/site/valance.svg') 50% 0 / auto 100% repeat-x;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45));
}

/* Rocco and Pip in the front row: their heads sit against the lower edge of
   the screen, so they read as silhouettes in the light. */
.seats {
  position: absolute;
  z-index: 5;
  left: 50%;
  width: var(--seats-w);
  top: calc(var(--screen-top) + var(--sh) - var(--seats-w) * .32 * var(--seat-lift));
  transform: translateX(-50%) translateY(calc(var(--p) * 2.5svh)) scale(calc(1 + var(--p) * .03));
  transform-origin: 50% 100%;
}

.seats img {
  display: block;
  width: 100%;
  height: auto;
}

:root[data-theme='dark'] .stage::after {
  z-index: 6;
  height: 18%;
}

:root[data-theme='light'] .stage::after {
  display: none;
}

:root[data-theme='light'] .curtain {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 760px) {
  .cinema {
    --sh: clamp(360px, 62svh, 600px);
    --sw: calc(100vw - 28px);
    --seats-w: 150vw;
    --seat-lift: .36;
    --open-k: .5;
    --cover: .03;
  }

  .credits {
    inset: 0 0 14% 0;
    padding-inline: 18px;
  }

  .ghost {
    display: none;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .cinema {
    --sh: clamp(330px, 64svh, 600px);
  }

  .lede {
    font-size: .92rem;
  }
}

/* ------------------------------------------------------------------ reels */

.reel,
.faq {
  position: relative;
  padding: clamp(84px, 13vh, 160px) 16px clamp(24px, 4vh, 48px);
}

.reel::before,
.faq::before,
.boxoffice::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 560px;
  background: radial-gradient(ellipse 46% 64% at 50% 0%, var(--spot), transparent 100%);
  pointer-events: none;
}

.reel-head {
  position: relative;
  max-width: 760px;
  margin: 0 auto clamp(30px, 5vh, 56px);
  text-align: center;
}

.reel-no {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.reel-no span {
  padding: .45em .8em;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  color: var(--accent-ink);
}

.reel-head h2,
.box-head h2 {
  margin: .55em 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.25rem + 3.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.reel-head p:not(.reel-no) {
  max-width: 54ch;
  margin: 1rem auto 0;
  color: var(--muted-foreground);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The film strip: a dark base with a column of sprocket holes down each edge.
   The holes are cut with a mask, so the page shows through them. */
.strip {
  --edge: clamp(24px, 5vw, 46px);
  --gate: clamp(12px, 2vw, 20px);
  --sprocket-y: 0px;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--gate) var(--edge);
  list-style: none;
  background: linear-gradient(var(--film), var(--film)) 50% 0 / calc(100% - 2 * var(--edge) + 2px) 100% no-repeat;
}

.strip::before,
.strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--edge);
  background: var(--film);
  -webkit-mask: url('../assets/site/sprocket.svg') 0 var(--sprocket-y) / 100% auto repeat-y;
  mask: url('../assets/site/sprocket.svg') 0 var(--sprocket-y) / 100% auto repeat-y;
  transition: -webkit-mask-position 1.2s var(--ease), mask-position 1.2s var(--ease);
}

.strip::before {
  left: 0;
  border-radius: 6px 0 0 6px;
}

.strip::after {
  right: 0;
  border-radius: 0 6px 6px 0;
}

.frame {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 5vw, 60px) clamp(32px, 5vw, 56px);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--frame-glow), transparent 70%),
    var(--frame-bg);
  text-align: center;
}

.frame + .frame {
  margin-top: var(--gate);
}

.frame-no {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--muted-foreground);
}

.frame-no::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--butter);
  opacity: .7;
  vertical-align: 1px;
}

.frame h3 {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.frame p {
  max-width: 54ch;
  margin: .85rem auto 0;
  color: var(--muted-foreground);
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.frame-art {
  max-width: 580px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hair);
}

.frame-art img {
  display: block;
  width: 100%;
  height: auto;
}

.frame-art-free {
  max-width: 560px;
  border: 0;
  border-radius: 0;
}

.frame-ic {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: radial-gradient(circle at 50% 30%, rgb(122 38 51 / .35), transparent 72%);
  color: var(--accent-ink);
}

.frame-ic .ic {
  width: 28px;
  height: 28px;
}

.note {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  text-align: left;
  padding: .9rem 1.05rem;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--surface-2);
}

.frame p.note {
  margin-top: 1.25rem;
  color: var(--soft);
  font-size: .97rem;
  line-height: 1.55;
}

.note .ic {
  margin-top: .15em;
  color: var(--accent-ink);
}

.ticks {
  display: grid;
  gap: .85rem;
  max-width: 56ch;
  margin: 1.4rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  color: var(--muted-foreground);
  font-size: clamp(.98rem, .95rem + .2vw, 1.06rem);
  line-height: 1.6;
}

.ticks li {
  position: relative;
  padding-left: 1.5rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .7rem;
  height: 1px;
  background: var(--butter);
}

.ticks strong {
  color: var(--foreground);
  font-weight: 600;
}

.ticks-wide {
  margin-top: 1.8rem;
}

.frame-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.4rem;
  color: var(--accent-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.frame-link:hover .ic {
  transform: translateX(3px);
}

.frame-link .ic {
  transition: transform .2s var(--ease);
}

/* The frames advance into the gate as they scroll in. Only armed by the
   script, so without it every frame is simply there. */
.armed .frame {
  transform: translateY(36px);
  filter: brightness(.6);
  transition: transform .7s var(--ease), filter .8s var(--ease);
}

.armed .frame.is-in {
  transform: none;
  filter: none;
}

/* ----------------------------------------------------------------- ticket */

.frame-ticket {
  padding-top: clamp(48px, 6vw, 64px);
}

.ticket-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
}

.ticket-tab {
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .92rem;
  color: var(--muted-foreground);
  transition: background-color .2s, color .2s;
}

.ticket-tab:hover {
  color: var(--foreground);
}

.ticket-tab.on {
  background: var(--surface-3);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}

.ticket {
  --paper: #ebe3d1;
  --ink: #2b1b1f;
  position: relative;
  display: flex;
  max-width: 640px;
  margin: 30px auto 0;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgb(255 255 255 / .35), transparent 70%),
    var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / .85), 0 2px 0 rgb(255 255 255 / .4) inset;
  transform: rotate(-1.2deg);
}

.ticket::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  border-radius: 14px 0 0 14px;
  background:
    radial-gradient(circle, #ebe3d1 2px, transparent 2.5px) 50% 6px / 14px 22px repeat-y,
    #7a2633;
}

.ticket-main {
  flex: 1;
  min-width: 0;
  padding: 24px 24px 22px 40px;
}

.frame .ticket-kicker {
  margin: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #7a2633;
}

.frame .ticket-title {
  margin: .2rem 0 0;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}

.words {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  animation: words-in .5s var(--ease);
}

.words li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  background: rgb(122 38 51 / .07);
  border: 1px solid rgb(122 38 51 / .18);
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.words span {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  color: #7a2633;
}

.words-check,
.cap-check {
  display: none;
}

.ticket.is-check .words-invite,
.ticket.is-check .cap-invite {
  display: none;
}

.ticket.is-check .words-check {
  display: grid;
}

.ticket.is-check .cap-check {
  display: block;
}

.frame .ticket-cap {
  margin: 14px 0 0;
  max-width: none;
  color: #5b4a4d;
  font-size: .93rem;
  line-height: 1.5;
}

@keyframes words-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.ticket-stub {
  position: relative;
  flex: none;
  width: 150px;
  padding: 24px 18px;
  border-left: 2px dashed rgb(43 27 31 / .28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.ticket-stub::before,
.ticket-stub::after {
  content: '';
  position: absolute;
  left: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--frame-bg);
}

.ticket-stub::before { top: -11px; }
.ticket-stub::after { bottom: -11px; }

.stub-ic {
  width: 44px;
  height: 44px;
  color: var(--ink);
  opacity: .8;
}

.frame .stub-row {
  margin: 0;
  display: grid;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.stub-row span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7a2633;
}

.frame .ticket-note {
  margin-top: 26px;
  font-size: .93rem;
}

@media (max-width: 600px) {
  .ticket {
    flex-direction: column;
    transform: none;
  }

  .ticket-main {
    padding: 22px 18px 18px 30px;
  }

  .words {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-stub {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 16px 18px 18px 30px;
    border-left: 0;
    border-top: 2px dashed rgb(43 27 31 / .28);
  }

  .ticket-stub::before,
  .ticket-stub::after {
    top: -12px;
    bottom: auto;
  }

  .ticket-stub::before { left: -11px; }
  .ticket-stub::after { left: auto; right: -11px; }

  .stub-ic {
    width: 32px;
    height: 32px;
  }
}

/* --------------------------------------------------------- together mocks */

.mock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}

.seat-head {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 -4px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--surface-3);
}

.seat-head img {
  width: 54px;
  height: 54px;
}

.seat-head.talking {
  box-shadow: 0 0 0 3px var(--frame-bg), 0 0 0 5px rgb(201 161 166 / .6);
}

.motion .seat-head.talking {
  animation: talk 1.8s ease-in-out infinite;
}

@keyframes talk {
  0%, 100% { box-shadow: 0 0 0 3px var(--frame-bg), 0 0 0 5px rgb(201 161 166 / .55); }
  50% { box-shadow: 0 0 0 3px var(--frame-bg), 0 0 0 9px rgb(201 161 166 / .15); }
}

.muted-head .ic {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  color: var(--muted-foreground);
  background-image: linear-gradient(135deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%);
}

.mock-voice .seat-head + .seat-head {
  margin-left: 14px;
}

.mock-chat {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(100%, 340px);
  margin: 0 auto;
  text-align: left;
}

.frame .bubble {
  margin: 0;
  max-width: 82%;
  padding: .6rem .8rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--surface-3);
  border: 1px solid var(--hair);
  color: var(--foreground);
  font-size: .95rem;
  line-height: 1.4;
}

.bubble b {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.frame .bubble-reply {
  align-self: flex-end;
  border-radius: 14px 14px 4px;
}

.quote {
  display: block;
  margin-bottom: .35rem;
  padding-left: .55rem;
  border-left: 2px solid var(--velvet-3);
  color: var(--muted-foreground);
  font-size: .78rem;
}

.stamp {
  display: inline-block;
  padding: 0 .4em;
  border-radius: 6px;
  background: rgb(122 38 51 / .3);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: .86em;
  text-decoration: underline;
  text-decoration-color: rgb(201 161 166 / .6);
  text-underline-offset: 2px;
}

:root[data-theme='light'] .stamp {
  background: rgb(122 38 51 / .1);
}

.mini-screen {
  position: relative;
  width: min(100%, 300px);
  height: 132px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--hair-2);
  background:
    radial-gradient(circle at 70% 32%, #e9e1cf 0 13px, transparent 14px),
    radial-gradient(ellipse 120% 60% at 30% 110%, #5e1a26 0 60%, transparent 61%),
    linear-gradient(#1a1519, #2a2027);
}

.fly {
  position: absolute;
  bottom: 12px;
  width: 26px;
  height: 26px;
}

.f1 { left: 16%; bottom: 22px; }
.f2 { left: 32%; bottom: 58px; }
.f3 { left: 48%; bottom: 30px; }
.f4 { left: 62%; bottom: 70px; }
.f5 { left: 78%; bottom: 40px; }

.motion .fly {
  bottom: 6px;
  opacity: 0;
  animation: fly 4.2s var(--ease) infinite;
}

.motion .f2 { animation-delay: .8s; }
.motion .f3 { animation-delay: 1.6s; }
.motion .f4 { animation-delay: 2.4s; }
.motion .f5 { animation-delay: 3.2s; }

@keyframes fly {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-14px) scale(1); }
  70% { opacity: .9; }
  100% { transform: translateY(-104px) translateX(8px) scale(1); opacity: 0; }
}

.mock-cams {
  flex-direction: column;
  gap: 10px;
}

.mini-wide {
  height: 92px;
}

.cam-row {
  display: flex;
  gap: 8px;
}

.cam-row span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--hair-2);
  background: var(--surface-3);
}

.cam-row img {
  width: 30px;
  height: 30px;
}

.cam-row .cam-off {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 1.4rem auto 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .95rem;
}

.chips .ic {
  color: var(--accent-ink);
}

/* ------------------------------------------------------------ box office */

.boxoffice {
  position: relative;
  margin-top: clamp(60px, 10vh, 120px);
  padding: clamp(84px, 13vh, 150px) 16px clamp(72px, 10vh, 120px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--surface), var(--background) 60%);
}

.box-head {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.box-lede {
  max-width: 58ch;
  margin: 1.1rem auto 0;
  color: var(--muted-foreground);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.ext-btn {
  margin-top: 30px;
  max-width: 100%;
}

.ext-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .7rem;
  margin: 14px 0 0;
  color: var(--muted-foreground);
  font-size: .92rem;
}

.ext-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

.hash {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 660px;
  margin: 18px auto 0;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
}

.hash-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent-ink);
}

.hash code {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--soft);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.hash-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--hair-2);
  font-size: .85rem;
  color: var(--foreground);
  transition: background-color .2s;
}

.hash-copy:hover {
  background: var(--surface-3);
}

.hash-copy.v-copied .copy-text {
  display: none;
}

.hash-copy.v-copied::after {
  content: 'Copied';
}

.ext-support {
  max-width: 60ch;
  margin: 18px auto 0;
  color: var(--muted-foreground);
  font-size: .93rem;
  line-height: 1.6;
}

.steps-h {
  margin: clamp(60px, 9vh, 96px) 0 28px;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  letter-spacing: -.01em;
}

.install-steps {
  display: grid;
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.install-step {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}

.step-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.step-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: radial-gradient(circle at 50% 30%, rgb(122 38 51 / .32), transparent 72%);
  color: var(--accent-ink);
}

.step-ic .ic {
  width: 24px;
  height: 24px;
}

.step-no {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.install-step h4 {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.15;
}

.install-step > p:not(.step-top) {
  margin: .6rem auto 0;
  max-width: 44ch;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.shot {
  margin-top: auto;
  padding-top: 18px;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.then {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.shot-wide {
  max-width: 580px;
  margin: 0 auto;
  padding: 0;
}

.then-list {
  display: grid;
  gap: 12px;
  max-width: 580px;
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: then;
  text-align: left;
}

.then-list li {
  position: relative;
  padding: .8rem 1rem .8rem 3.2rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted-foreground);
  line-height: 1.55;
  counter-increment: then;
}

.then-list li::before {
  content: counter(then);
  position: absolute;
  left: 1rem;
  top: .8rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--accent-ink);
}

.then-list strong {
  color: var(--foreground);
}

@media (min-width: 640px) and (max-width: 999px) {
  .install-steps {
    max-width: 620px;
  }
}

@media (min-width: 1000px) {
  .install-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------- faq */

.faq-list {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  border-color: var(--hair-2);
  background: var(--surface);
}

.faq-list .collapse-title {
  padding: 1.1rem 1.35rem;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  font-weight: 500;
}

.faq-list .collapse-title::after {
  color: var(--accent-ink);
}

.faq-list .collapse-content p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
}

.faq-list > .collapse + .collapse {
  border-color: var(--hair);
}

.last-call {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: clamp(64px, 10vh, 110px) auto clamp(56px, 8vh, 96px);
  text-align: center;
}

.last-call p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  letter-spacing: -.01em;
}

/* ----------------------------------------------------------------- footer */

.foot {
  padding: clamp(48px, 7vh, 72px) 16px 28px;
  border-top: 1px solid var(--hair);
  background: var(--surface);
  font-size: .95rem;
}

.foot-in {
  display: grid;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
}

.foot-brand p {
  max-width: 52ch;
  margin: .8rem 0 0;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.foot a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--hair-2);
  text-underline-offset: 3px;
}

.foot a:hover {
  text-decoration-color: currentColor;
}

.foot .brand {
  text-decoration: none;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.foot-h {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.foot-more ul {
  display: grid;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-more li {
  display: grid;
  gap: 2px;
}

.foot-more small {
  color: var(--muted-foreground);
  font-size: .85rem;
}

.foot-legal {
  max-width: 1120px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  color: var(--muted-foreground);
  font-size: .85rem;
}

@media (min-width: 640px) {
  .foot-more ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .foot-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 64px;
  }
}

/* ---------------------------------------------------------------- 404 page */

.lost .cinema {
  height: calc(100svh - var(--top-h));
  min-height: 560px;
}

.lost .stage {
  height: calc(100svh - var(--top-h));
  min-height: 560px;
}

.lost .credits {
  inset: 0;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .grain,
  .motes i,
  .fly,
  .seat-head.talking {
    animation: none;
  }

  .stage,
  .motion .stage {
    --p: 1;
    animation: none;
  }

  .armed .frame {
    transform: none;
    filter: none;
  }

  .strip::before,
  .strip::after {
    transition: none;
  }

  .words {
    animation: none;
  }
}

@media (max-width: 420px) {
  .top-cta {
    display: none;
  }
}