/* The films page's pricing and the neon sign. The paper tokens here are shared with the
   storyboard sheet; the price cards are at the end. */
:root {
  --paper: #f3e8d4;
  --paper-edge: #b7a27f;
  --paper-edge-2: #8d7a5b;
  --ink: #17120d;
  --ink-mid: #6d5f4e;
  --rule-ink: rgba(23, 18, 13, .22);
  --orange: #ff7a2e;
  --orange-deep: #c9561d;
  --glow: rgba(255, 122, 46, .2);
  --floor-shadow: rgba(0, 0, 0, .6);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.booth-head { display: grid; gap: 18px; }
.booth-head .big { font-size: var(--s-display); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.booth-head .mid { font-size: var(--s-label); line-height: 1.4; max-width: 40ch; }

.stage { position: relative; perspective: 1500px; display: grid; justify-items: center; gap: 40px; min-width: 0; touch-action: pan-y; }
.stage::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -24px; height: 46px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, var(--floor-shadow), transparent 70%); filter: blur(8px);
  transform: translateX(calc(var(--sx, 0) * 1px)) scaleX(.92); }

/* An object in space. --rx/--ry come from booth.js; at rest it lies flat. */
.obj { --rx: 0deg; --ry: 0deg; --rz: 0deg; --gx: 28%; --gy: 18%; position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
.ply { position: absolute; inset: 0; pointer-events: none; background: var(--paper-edge); transform: translateZ(calc(var(--z) * -2px)); }
.ply:nth-child(odd) { background: var(--paper-edge-2); }
.face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.5px); }
.paper { background-color: var(--paper); background-image: var(--noise); color: var(--ink); }
.glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .75), transparent 46%); }
.mono-k { font: 11px/1.3 var(--mono-face); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- The neon sign ----------
   "Launch films." as a sign over the box office: bare Tilt Neon tubes on the wall, their glow
   spilling onto it. booth.js switches
   it on with a short flicker (fewer than three flashes a second) and the "f" catches a beat
   late. Unlit, the tubes still show as glass. Reduced motion: lit from the start. */
:root {
  --neon: #ff7a2e;
  --neon-deep: #d4501a;
  --tube-core: #fff1e2;
  --tube-off: rgba(255, 150, 90, .2);
  --neon-spill: rgba(255, 122, 46, .2);
}
.page-intro h1.neon { max-width: none; margin-block: .1em .05em; font-size: clamp(42px, 10.5vw, 156px); line-height: 1; letter-spacing: 0; }
.neon-sign { position: relative; isolation: isolate; display: inline-block; }
.neon-sign::after { content: ""; position: absolute; inset: -45% -12%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--neon-spill), transparent 72%); transition: opacity .07s; }
.neon-text { font-family: "Tilt Neon", var(--type); font-weight: 400; color: var(--tube-off); transition: color .06s, text-shadow .06s; }
.neon.lit .neon-sign::after { opacity: 1; }
.neon.lit .neon-text, .neon.lit .late.on { color: var(--tube-core);
  text-shadow: 0 0 .02em #fff, 0 0 .06em var(--neon), 0 0 .14em var(--neon), 0 0 .32em var(--neon), 0 0 .7em var(--neon-deep); }
.neon.lit .late:not(.on) { color: var(--tube-off); text-shadow: none; }
.neon.dip .late { opacity: .45; }

/* ---------- How it works ---------- */
:root { --gold: #ffcd4f; }
.how-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.how-head .label { margin: 0; }

/* ---------- Price cards ----------
   The films' prices as three paper cards: the storyboard every film starts with, the product film
   and the cinematic film. Prices and lists come from offer.json (base.js bindOffer). */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(40px, 6vh, 72px); }
.price-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 28px; border-radius: 6px;
  background-color: var(--paper); background-image: var(--noise); color: var(--ink); box-shadow: 0 30px 60px -34px var(--floor-shadow); }
.price-card > * { margin: 0; }
.price-card h3 { font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.price-card .price { font-size: clamp(52px, 6vw, 76px); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.price-card .when { font-size: 20px; }
.price-card .what { font-size: 20px; line-height: 1.3; padding-top: 14px; border-top: 2px solid var(--ink); }
.price-card ul { padding: 0; list-style: none; display: grid; gap: 6px; font-size: 17px; line-height: 1.35; }
.price-card li::before { content: "·"; margin-right: 8px; color: var(--orange-deep); font-weight: 500; }
.price-card .rounds { font-size: 17px; color: var(--ink-mid); }
.price-card .book { margin-top: auto; align-self: flex-start; padding: 10px 18px; border-radius: 999px; font-size: 16px;
  background: var(--ink); color: var(--paper); }
.price-card .book:hover, .price-card .book:focus-visible { background: var(--orange-deep); }
.price-card .book:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.price-card .made { font-size: 17px; line-height: 1.35; }
/* The terms under the cards, one plain line each, ruled like the rest of the page. */
.price-terms { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 22px;
  font-size: var(--s-label); line-height: 1.4; }
.price-terms li { border-top: 1px solid var(--rule); padding: 12px 0; }
.price-card.cine { box-shadow: inset 0 6px 0 var(--gold), 0 30px 60px -34px var(--floor-shadow); }
@media (max-width: 960px) { .price-cards { grid-template-columns: minmax(0, 1fr); } }