/* ============================================================
   Base: reset, layout primitives, typography, buttons, a11y
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html, body { overflow-x: hidden; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
body.is-locked { overflow: hidden; }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

img, video, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(214, 74, 124, 0.45); color: var(--ivory); }

/* a11y */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 0; right: 0; z-index: 200; padding: .75rem 1.25rem; background: var(--magenta); color: #fff; transform: translateY(-120%); transition: transform .3s var(--ease-out); font-weight: 500; }
.skip-link:focus-visible { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--magenta-hi); outline-offset: 4px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------
   Fixed layers
   ------------------------------------------------------------ */
.atmo { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 50% 110%, rgba(90, 18, 48, .35) 0%, rgba(11, 7, 9, 0) 60%); opacity: var(--atmo-o, 0); transition: opacity 1.2s var(--ease-soft); }
.grain { position: fixed; inset: -20%; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 220px 220px; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)} }

.progress { position: fixed; top: 0; right: 0; left: 0; height: 2px; z-index: var(--z-nav); pointer-events: none; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--magenta), var(--pink)); transform-origin: right center; transform: scaleX(var(--p, 0)); opacity: .9; }

.scene-index { position: fixed; bottom: 2rem; left: 2rem; z-index: var(--z-nav); display: flex; align-items: baseline; gap: .6rem; direction: ltr; font-size: var(--fs-label); letter-spacing: .22em; color: var(--text-3); pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-soft); }
.scene-index.is-on { opacity: 1; }
.scene-index__num { font-family: var(--font-kinetic); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; color: var(--rose); line-height: 1; }
.scene-index__name { font-family: var(--font-body); direction: rtl; }
@media (max-width: 900px), (max-height: 560px) { .scene-index { display: none; } }

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
main { position: relative; z-index: var(--z-content); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.act { position: relative; }
.act__inner { position: relative; }
.pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.pin__stage { position: absolute; inset: 0; display: grid; place-items: center; }

/* subtle scrims to keep type readable over the live stage */
.scrim-b { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,7,9,0) 40%, rgba(11,7,9,.72) 100%); }
.scrim-r { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(5,3,4,.62) 0%, rgba(5,3,4,.35) 45%, rgba(5,3,4,0) 76%); }

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
.kicker { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--champagne-deep); font-weight: 500; line-height: 1.4; text-shadow: 0 1px 2px rgba(5,3,4,.8), 0 2px 14px rgba(5,3,4,.55); }
.kicker::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
/* display: Karantina 700, poster-tight (.9); the condensed face needs no negative tracking beyond -0.01em */
.display { font-family: var(--font-display); font-weight: var(--display-weight-chapter); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--ivory); text-wrap: balance; }
.display--hero { font-size: var(--fs-hero); font-weight: var(--display-weight-hero); text-shadow: var(--tshadow); }
.display--h1 { font-size: var(--fs-h1); }
.display--h2 { font-size: var(--fs-h2); font-weight: 700; line-height: .95; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--track-display); color: var(--ivory); }
/* kinetic numerals: the thin neon tube next to the bold display (01 / 20+); figures touch at 300, hence the tracking */
.kinetic { font-family: var(--font-kinetic); font-weight: 300; line-height: .9; letter-spacing: .02em; color: var(--rose); text-transform: none; }
/* no script face is loaded: the real handwriting is logo-tagline.png; this is the film-credit fallback when the image is absent */
.script { font-family: var(--font-script); font-weight: 300; letter-spacing: .06em; color: var(--rose); }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-body); color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.body { font-weight: 400; max-width: 60ch; color: var(--text-2); text-wrap: pretty; }
.champagne { color: var(--champagne); }
.magenta { color: var(--magenta-hi); }
.muted { color: var(--text-3); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }

/* split text structure (built by js/animations/text.js) */
.split { display: inline-block; }
.split .l { display: block; overflow: hidden; padding: .12em .12em; margin: -.12em -.12em; }
[data-assemble] .split .l, [data-reveal="assemble"] .split .l, [data-reveal="blur"] .split .l, [data-reveal="punch"] .split .l { overflow: visible; }
[data-reveal="assemble"] .split .c { transform-origin: 50% 60%; }
.split .w { display: inline-block; white-space: nowrap; }
.split .c { display: inline-block; }
.split[data-reveal] .w, .split[data-reveal] .c, .split[data-reveal] .l > .li { will-change: transform, opacity; }
.split.is-done .w, .split.is-done .c { will-change: auto; }

/* ------------------------------------------------------------
   Buttons & links
   ------------------------------------------------------------ */
.btn { --bg: transparent; --fg: var(--ivory); --bd: var(--line-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.25rem; padding: 0 1.75rem; border-radius: 999px; border: 1px solid var(--bd); color: var(--fg); background: var(--bg); font-family: var(--font-body); font-weight: 600; font-size: .98rem; letter-spacing: .01em; line-height: 3.25rem; white-space: nowrap; align-content: center; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); text-shadow: none; -webkit-tap-highlight-color: transparent; }
.btn__label { position: relative; z-index: 1; display: inline-block; line-height: inherit; vertical-align: middle; transform: none !important; }
.btn, .caction, .icon-btn, .track__play, .menu__list a { overflow: hidden; }
.press-burst { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,143,187,.35) 38%, rgba(255,143,187,0) 70%); animation: press-burst .62s var(--ease-out) forwards; }
@keyframes press-burst { from { transform: scale(0); opacity: .95; } to { transform: scale(calc(var(--s, 20) * 2.4)); opacity: 0; } }
.btn--primary.is-flash { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 36px rgba(255,143,187,.65), 0 14px 40px -10px rgba(214,74,124,.9); --bg: var(--magenta-hi); }
.caction.is-flash { border-color: rgba(255,143,187,.7); box-shadow: 0 0 30px rgba(214,74,124,.25); }
.btn__ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { --bg: var(--magenta); --fg: #fff; --bd: transparent; box-shadow: 0 10px 30px -12px rgba(214, 74, 124, .6); }
.btn--primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%); transform: translateX(-120%); transition: transform .9s var(--ease-out); }
.btn--primary:hover { --bg: var(--magenta-hi); box-shadow: 0 14px 36px -12px rgba(239, 109, 156, .75); }
.btn--primary:hover::before { transform: translateX(120%); }
.btn--ghost:hover { --bd: rgba(251,243,247,.55); background: rgba(251,243,247,.05); }
/* the "enter" button: pink hairline, pink-white label, lights up pink */
.btn--champagne { --bd: rgba(255,143,187,.55); --fg: #fbf3f7; }
.btn--champagne:hover { background: rgba(255,143,187,.12); --bd: var(--pink); }
.btn--champagne:focus-visible { outline-color: var(--pink); }
@media (hover: none) { .btn:active { transform: scale(.97); } }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (pointer: coarse) { .btn { min-height: 3.4rem; line-height: 3.4rem; } }

.link-line { position: relative; display: inline-block; padding-bottom: .15em; }
.link-line::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); transform-origin: right; }

.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--ivory); border-color: var(--line-strong); background: rgba(251,243,247,.05); }

/* ------------------------------------------------------------
   Reveal primitives (Intersection Observer toggles .in)
   ------------------------------------------------------------ */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv--blur { filter: blur(8px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out); }
.rv--blur.in { filter: blur(0); }
.rv--scale { transform: translateY(18px) scale(.96); }
.rv--line { transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-out), opacity .4s; }
.rv--line.in { clip-path: inset(0 0 0 0); }

/* ------------------------------------------------------------
   Utilities
   ------------------------------------------------------------ */
.hide-mobile { display: initial; }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }
.only-mobile { display: none !important; }
@media (max-width: 720px) { .only-mobile { display: initial !important; } }
.noise-panel { position: relative; background: var(--panel); border: 1px solid var(--panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); }
hr.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); margin: 0; }

/* ------------------------------------------------------------
   Reduced motion: keep content, drop the theatrics
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .rv, .rv--blur, .rv--line { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  .btn--primary::before { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }