/* ─────────────────────────────────────────────────────────────
   GACHELET · night-shift cinema
   Soot black, flour white, one ember. The page is 4 a.m.
   ───────────────────────────────────────────────────────────── */
:root {
  --soot:      oklch(0.155 0.012 52);
  --soot-2:    oklch(0.195 0.016 50);
  --soot-3:    oklch(0.25 0.02 48);
  --flour:     oklch(0.95 0.016 82);
  --flour-dim: oklch(0.78 0.022 76);
  --flour-low: oklch(0.6 0.02 70);
  --ember:     oklch(0.72 0.175 48);
  --ember-hot: oklch(0.82 0.15 70);
  --ember-deep:oklch(0.52 0.16 36);
  --line:      oklch(0.95 0.016 82 / 0.13);

  --f-display: "Karantina", "Rubik", system-ui, sans-serif;
  --f-body: "Rubik", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --gut: clamp(16px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--soot); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--soot); color: var(--flour);
  font-family: var(--f-body); font-weight: 300; font-size: 17px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.ltr { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* film grain, fixed and inert so it never repaints with scroll */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s 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; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--flour); color: var(--soot); padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }

/* ── masthead ── */
.mast {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) var(--gut) 14px;
  pointer-events: none;
}
.mast > * { pointer-events: auto; }
.mark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .01em;
  opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mark i { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px oklch(0.72 0.175 48 / .18); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px oklch(0.72 0.175 48 / .06); } }
.is-scrolled .mark { opacity: 1; transform: none; }
.mast__cta {
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--flour);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: oklch(0.155 0.012 52 / .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.mast__cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mast__cta:hover { background: var(--ember); border-color: var(--ember); color: var(--soot); } }

/* ═══ HERO / FLIGHT ═══ */
.flight { position: relative; height: 520vh; height: 520svh; }
.flight__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--soot); }
.flight__poster, .flight__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.flight__video { opacity: 0; transition: opacity .25s linear; }
.flight.has-video .flight__video { opacity: 1; }
.flight__poster { transform: scale(1.04); transition: transform 2.4s var(--ease-out); }
.is-loaded .flight__poster { transform: scale(1); }
.flight__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.flight__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, oklch(0.155 0.012 52 / .92) 0%, oklch(0.155 0.012 52 / .35) 32%, transparent 58%),
    linear-gradient(to bottom, oklch(0.155 0.012 52 / .55) 0%, transparent 18%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, oklch(0.12 0.01 50 / .55) 100%);
}

.flight__clock {
  position: absolute; z-index: 5; inset-inline-end: var(--gut); top: calc(74px + env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.flight__clock-label { font-size: 11px; letter-spacing: .14em; color: var(--flour-dim); }
.flight__clock-time {
  font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: .9; color: var(--flour);
  font-variant-numeric: tabular-nums; direction: ltr;
}
.flight__rail { position: absolute; z-index: 5; bottom: 0; inset-inline: 0; height: 2px; background: var(--line); }
.flight__rail span { display: block; height: 100%; background: var(--ember); transform-origin: right center; transform: scaleX(0); }

/* beats: positioned bottom, opacity + transform driven from JS */
.beat {
  position: absolute; z-index: 4; inset-inline: var(--gut);
  bottom: calc(clamp(56px, 11vh, 120px) + env(safe-area-inset-bottom));
  max-width: 640px; opacity: 0; will-change: opacity, transform, filter;
  text-shadow: 0 2px 30px oklch(0.12 0.01 50 / .6);
}
.beat__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--ember-hot); direction: ltr;
}
.beat__eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--ember); order: -1; }
.beat__title {
  margin-top: 10px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(64px, 17vw, 132px); line-height: .84; letter-spacing: -.005em; color: var(--flour);
}
.beat__body { margin-top: 16px; max-width: 34ch; font-size: clamp(17px, 4.4vw, 21px); line-height: 1.5; color: oklch(0.95 0.016 82 / .88); }
.beat--fire .beat__title { color: var(--ember-hot); }

.beat--title { bottom: calc(clamp(64px, 12vh, 132px) + env(safe-area-inset-bottom)); opacity: 1; }
.beat__kicker { font-size: 14px; letter-spacing: .16em; color: var(--flour-dim); }
.beat__brand {
  font-family: var(--f-display); font-weight: 700; color: var(--flour);
  font-size: clamp(170px, 52vw, 360px); line-height: .74; letter-spacing: -.01em; margin: 18px 0 6px;
}
.beat__line { font-size: clamp(20px, 5.4vw, 28px); font-weight: 400; color: var(--flour); }
.beat__hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 13px; letter-spacing: .12em; color: var(--flour-dim);
}
.beat__hint i { width: 1px; height: 30px; background: linear-gradient(var(--ember), transparent); position: relative; overflow: hidden; }
.beat__hint i::after { content: ""; position: absolute; top: -12px; inset-inline: 0; height: 12px; background: var(--ember-hot); animation: drip 1.8s var(--ease-io) infinite; }
@keyframes drip { to { transform: translateY(44px); } }

/* entrance of the title beat on load (staggered, ease-out) */
.js-motion .beat--title > * { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.is-loaded .beat--title > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
}
.is-loaded .beat--title > :nth-child(2) { transition-delay: .08s; }
.is-loaded .beat--title > :nth-child(3) { transition-delay: .22s; }
.is-loaded .beat--title > :nth-child(4) { transition-delay: .5s; }

/* ═══ MANIFESTO ═══ */
.manifesto { padding: clamp(110px, 22vh, 220px) var(--gut) clamp(90px, 16vh, 180px); max-width: 1180px; }
.manifesto__eyebrow, .sec-head__eyebrow {
  display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .16em; color: var(--ember);
}
.manifesto__eyebrow::before, .sec-head__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.manifesto__text {
  margin-top: 26px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(50px, 13vw, 112px); line-height: .92; color: var(--flour);
}
.manifesto__text .w { opacity: .14; transition: opacity .35s ease; }
.manifesto__text .w.on { opacity: 1; }
.manifesto__text .w.hot { color: var(--ember-hot); }

/* ═══ SECTION HEAD ═══ */
.sec-head__title {
  margin-top: 18px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(58px, 14vw, 120px); line-height: .86; color: var(--flour);
}

/* ═══ BREADS ═══ */
.breads { padding: 40px var(--gut) clamp(60px, 10vh, 120px); }
.breads .sec-head { margin-bottom: clamp(56px, 10vh, 110px); }
.loaf { display: grid; gap: 22px; margin-bottom: clamp(72px, 14vh, 150px); }
.loaf__img { margin: 0; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; background: var(--soot-2); }
.loaf__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.loaf__num { font-family: var(--f-display); font-size: 26px; color: var(--ember); direction: ltr; display: inline-block; }
.loaf__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 16vw, 110px); line-height: .86; margin-top: 2px; }
.loaf__desc { margin-top: 14px; max-width: 42ch; color: var(--flour-dim); font-size: 18px; }
.loaf__meta { display: flex; gap: 0; margin: 22px 0 0; border-top: 1px solid var(--line); }
.loaf__meta div { flex: 1; padding: 12px 0 0; }
.loaf__meta div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); margin-inline-start: 16px; }
.loaf__meta dt { font-size: 12px; letter-spacing: .12em; color: var(--flour-low); }
.loaf__meta dd { margin: 2px 0 0; font-family: var(--f-display); font-size: 32px; line-height: 1; color: var(--flour); }

@media (min-width: 900px) {
  .loaf { grid-template-columns: 7fr 5fr; align-items: end; gap: clamp(40px, 6vw, 110px); }
  .loaf--flip { grid-template-columns: 5fr 7fr; }
  .loaf--flip .loaf__img { order: 2; }
  .loaf__copy { padding-bottom: 6%; }
  .loaf:nth-child(odd of .loaf) .loaf__img { aspect-ratio: 5 / 5.4; }
}

/* reveal primitives (only hidden under .js-motion) */
.js-motion .reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js-motion .reveal-img { clip-path: inset(18% 0 18% 0 round 4px); }
.reveal-img.in { clip-path: inset(0 0 0 0 round 4px); transition: clip-path 1.3s var(--ease-io); }
.reveal-img.in img { transform: scale(1); }

/* ═══ TEAR · sticky, scrubbed, the frame opens to full bleed ═══ */
.tear { position: relative; height: 300vh; height: 300svh; }
.tear__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tear__frame {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(var(--ty, 14%) var(--tx, 8%) round var(--tr, 8px)); will-change: clip-path;
}
.tear__poster, .tear__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tear__video { opacity: 0; transition: opacity .25s linear; }
.tear.has-video .tear__video { opacity: 1; }
.tear__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.155 0.012 52 / .9) 0%, oklch(0.155 0.012 52 / .2) 40%, transparent 60%); }
.tear__kicker {
  position: absolute; z-index: 2; top: calc(84px + env(safe-area-inset-top)); inset-inline-start: var(--gut);
  display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .16em; color: var(--ember);
}
.tear__kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.tear__quote { position: absolute; z-index: 2; inset-inline: var(--gut); bottom: calc(clamp(56px, 11vh, 120px) + env(safe-area-inset-bottom)); margin: 0; opacity: 0; }
.tear__quote p { font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, 14vw, 128px); line-height: .86; text-shadow: 0 2px 30px oklch(0.12 0.01 50 / .6); }

.night__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s linear; }
.night.has-video .night__video { opacity: 1; }
.night.is-fire .night__video { opacity: 0; transition: opacity 1s ease; }

/* ═══ NIGHT ═══ */
.night { padding: clamp(90px, 16vh, 180px) var(--gut); display: grid; gap: 48px; }
.night__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--soot-2); }
.night__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease, transform 2s var(--ease-out); }
.night__img--b { opacity: 0; transform: scale(1.08); }
.night.is-fire .night__img--a { opacity: 0; }
.night.is-fire .night__img--b { opacity: 1; transform: scale(1); }
.night__list { list-style: none; margin: 44px 0 0; padding: 0; position: relative; }
.night__list::before, .night__list::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line);
}
.night__list::after { background: var(--ember); transform-origin: top; transform: scaleY(var(--np, 0)); }
.night__list li { position: relative; padding: 0 30px 34px 0; display: grid; gap: 4px; }
.night__list li::before {
  content: ""; position: absolute; inset-inline-start: -4px; top: 13px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--soot); border: 1px solid var(--flour-low); transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.night__list li.lit::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 5px oklch(0.72 0.175 48 / .16); }
.night__list time { font-family: var(--f-display); font-size: 36px; line-height: 1; color: var(--flour-low); direction: ltr; text-align: right; transition: color .4s ease; }
.night__list li.lit time { color: var(--ember-hot); }
.night__list p { color: var(--flour-dim); max-width: 40ch; }
.night__list b { font-weight: 500; color: var(--flour); }
@media (min-width: 900px) {
  .night { grid-template-columns: 5fr 6fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .night__media { position: sticky; top: 12vh; aspect-ratio: 3 / 4; max-height: 78vh; }
}

/* ═══ RESERVE ═══ */
.reserve {
  margin: 0 var(--gut); padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 80px);
  background: var(--soot-2); border-radius: 6px; border: 1px solid var(--line);
  display: grid; gap: 40px;
}
@media (min-width: 900px) { .reserve { grid-template-columns: 5fr 6fr; align-items: start; } }
.batch {
  margin-top: 28px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 15px; color: var(--flour-dim); padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line);
}
.batch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.batch__time { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ember-hot); direction: ltr; font-variant-numeric: tabular-nums; }

.order { display: grid; gap: 26px; }
.order__group { border: 0; margin: 0; padding: 0; }
.order__group legend { font-size: 13px; letter-spacing: .14em; color: var(--flour-low); margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span {
  display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 15px; color: var(--flour-dim); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.chips label:active span { transform: scale(.97); }
.chips input:checked + span { background: var(--flour); color: var(--soot); border-color: var(--flour); font-weight: 500; }
.chips input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
.order__fields { display: grid; gap: 14px; }
@media (min-width: 640px) { .order__fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field span { font-size: 13px; letter-spacing: .14em; color: var(--flour-low); }
.field input {
  font: inherit; font-weight: 400; color: var(--flour); background: var(--soot); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 14px; transition: border-color .2s ease;
}
.field input::placeholder { color: var(--flour-low); }
.field input:focus { outline: none; border-color: var(--ember); }
.field input[aria-invalid="true"] { border-color: var(--ember-deep); }
.order__error { color: var(--ember-hot); font-size: 15px; }
.btn {
  justify-self: start; font: inherit; font-weight: 500; font-size: 17px; color: var(--soot); background: var(--ember);
  border: 0; border-radius: 999px; padding: 16px 34px; cursor: pointer;
  transition: transform .16s var(--ease-out), background .2s ease;
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ember-hot); } }
.order__done { font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--ember-hot); }

/* ═══ VISIT + FOOT ═══ */
.visit { padding: clamp(100px, 18vh, 200px) var(--gut) clamp(70px, 12vh, 130px); }
.visit__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(60px, 15vw, 150px); line-height: .86; }
.visit__cols { margin-top: 48px; display: grid; gap: 28px; border-top: 1px solid var(--line); padding-top: 28px; }
@media (min-width: 900px) { .visit__cols { grid-template-columns: 1.2fr .8fr 1.2fr; } }
.visit__cols h3 { font-size: 13px; font-weight: 400; letter-spacing: .14em; color: var(--ember); margin-bottom: 8px; }
.visit__cols p { color: var(--flour-dim); }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--flour-low);
}
.foot__mark { font-family: var(--f-display); font-weight: 700; font-size: 34px; color: var(--flour); }

.foot__disc { flex-basis: 100%; font-size: 13px; line-height: 1.6; color: var(--flour-low); }
.foot__disc a { color: var(--flour-dim); }
.order__note { font-size: 14px; color: var(--flour-dim); }

/* ═══ desktop hero composition ═══ */
@media (min-width: 900px) {
  .beat { max-width: 760px; }
  .beat__title { font-size: clamp(96px, 9vw, 150px); }
  .beat__brand { font-size: clamp(220px, 21vw, 330px); }
  .flight__clock-time { font-size: 56px; }
  .flight__shade {
    background:
      linear-gradient(to left, oklch(0.155 0.012 52 / .78) 0%, oklch(0.155 0.012 52 / .3) 34%, transparent 60%),
      linear-gradient(to top, oklch(0.155 0.012 52 / .7) 0%, transparent 40%),
      linear-gradient(to bottom, oklch(0.155 0.012 52 / .5) 0%, transparent 16%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .flight, .tear { height: auto; }
  .flight__stage, .tear__stage { position: relative; }
  .tear__frame { clip-path: none; }
  .tear__quote { opacity: 1; }
  .beat:not(.beat--title) { display: none; }
  .manifesto__text .w { opacity: 1; }
  .mark { opacity: 1; transform: none; }
}