/* UMBRA FILMS — cinema black / silver-white / deep crimson
   The grammar of this page is film itself: letterbox bars, projector light,
   grain, hard cuts. Darkness is the material. */

:root {
  --black: #050505;
  --pitch: #000000;
  --silver: #e8e6e1;
  --silver-dim: #9d9990;
  --silver-faint: #807d75;
  --crimson: #8c1d18;
  --crimson-lift: #c33a32;   /* surfaces, borders, hovers */
  --crimson-text: #d4544b;   /* text accents — AA on cinema black */
  --mono: "Space Mono", ui-monospace, monospace;
  --serif: "Playfair Display", Georgia, serif;
  /* authentic letterbox: bars sized so the inner frame reads 2.39:1 on wide
     viewports; clamped to a slate strip on tall/narrow ones */
  --bar-h: clamp(2.6rem, calc((100svh - 100vw / 2.39) / 2), 22svh);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--black);
  color: var(--silver);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--crimson); color: var(--silver); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--crimson-lift); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--crimson); color: var(--silver);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  padding: .5rem 1rem; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ---------- projector overlay ---------- */
#projector {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 40; pointer-events: none;
}

/* ---------- academy leader loader ---------- */
.leader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem;
}
.leader.done { display: none; } /* hard cut, no fade — this is the point */
.leader-sweep { transform-origin: 100px 100px; animation: sweep
  .75s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.leader-num {
  font-family: var(--serif); font-weight: 900; font-size: 84px;
  fill: var(--silver);
}
.leader-word {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--silver-dim);
}
@media (prefers-reduced-motion: reduce) {
  .leader { display: none; }
  .leader-sweep { animation: none; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  transition: background .3s;
}
.nav.scrolled { background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px); }
.nav-mark {
  font-family: var(--serif); font-weight: 900; letter-spacing: .04em;
  font-size: 1.05rem; text-decoration: none;
}
.nav-mark span { font-family: var(--mono); font-weight: 400; font-size: .62rem; letter-spacing: .34em; color: var(--silver-dim); }
.nav nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); align-items: center; }
.nav nav a {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; color: var(--silver-dim);
  transition: color .15s;
}
.nav nav a:hover { color: var(--silver); }
.nav-cta {
  color: var(--silver) !important;
  border: 1px solid var(--crimson); padding: .5rem .9rem;
  transition: background .15s;
}
.nav-cta:hover { background: var(--crimson); }

/* ---------- letterboxed frames ---------- */
.frame {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100svh;
}
.bar {
  flex: 0 0 auto;
  height: var(--bar-h);
  min-height: 2.6rem;
  background: var(--pitch);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  color: var(--silver-dim);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.bar-r { text-align: right; }
.frame-inner {
  flex: 1; position: relative; overflow: hidden;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.2rem, 5vw, 5rem);
}

/* scene headers */
.scene-index {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--crimson-text);
  margin-bottom: 1rem;
}
.scene-title {
  font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.01em;
}

/* hard-cut reveal: no easing, no fade — visibility snaps on,
   with a two-frame projector flicker to sell the splice */
.js .cut-in { opacity: 0; }
.js .cut .cut-in, .js .cut-in.cut { opacity: 1; transition: none; }
.js .cut-in.cut { animation: cutflash .14s steps(2, end) 1; }
@keyframes cutflash {
  0% { filter: brightness(2.2); }
  50% { filter: brightness(.6); }
  100% { filter: brightness(1); }
}

/* ---------- SCENE 01 · hero ---------- */
/* the fixed nav sits over the hero's top slate bar — push the slate text
   to the bottom edge of the bar so the two mono lines never collide */
.hero .bar-top {
  min-height: 5.2rem;
  align-items: flex-end;
  padding-bottom: .85rem;
}
.hero-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.hero-kicker {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--silver-dim);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.hero-title {
  font-weight: 900; letter-spacing: .02em;
  font-size: clamp(4.2rem, 17vw, 15rem);
  line-height: .95;
  text-shadow: 0 0 90px rgba(232, 230, 225, .12);
}
.hero-films {
  font-family: var(--mono); font-size: clamp(.7rem, 1.6vw, 1rem);
  letter-spacing: .9em; text-indent: .9em; color: var(--silver-dim);
  margin-top: .8rem;
}
.hero-sub {
  max-width: 34rem; margin-top: clamp(1.4rem, 4vh, 2.6rem);
  font-size: clamp(1rem, 1.4vw, 1.2rem); font-style: italic;
  color: var(--silver-dim);
}
.hero-hint {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--silver-faint);
  white-space: nowrap;
}
.hint-touch { display: none; }
@media (hover: none) {
  .hint-desktop { display: none; }
  .hint-touch { display: inline; }
}

/* ---------- SCENE 02 · showreel ---------- */
.reel-inner { display: flex; flex-direction: column; gap: clamp(1.2rem, 3vh, 2.2rem); }
.scene-head { margin-bottom: clamp(.5rem, 2vh, 1.5rem); }

.film {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  min-height: clamp(200px, 24vw, 320px);
  border: 1px solid #1a1a18;
  padding: clamp(1.2rem, 2.6vw, 2.4rem);
  overflow: hidden;
}
.film-still { position: absolute; inset: 0; z-index: 0; }
.film-body, .film-laurel { position: relative; z-index: 1; }

/* procedural "stills" — abstract light compositions per picture */
.film[data-film="silence"] .film-still {
  background:
    radial-gradient(120% 90% at 82% 30%, rgba(232,230,225,.14), transparent 55%),
    linear-gradient(100deg, transparent 55%, rgba(232,230,225,.05) 56%, transparent 58%),
    linear-gradient(#070707, #030303);
}
.film[data-film="vermilion"] .film-still {
  background:
    radial-gradient(70% 120% at 20% 80%, rgba(140,29,24,.5), transparent 60%),
    radial-gradient(40% 60% at 70% 20%, rgba(195,58,50,.16), transparent 70%),
    linear-gradient(#060404, #030202);
}
.film[data-film="saltworks"] .film-still {
  background:
    linear-gradient(178deg, transparent 62%, rgba(232,230,225,.10) 63%, rgba(232,230,225,.03) 78%, transparent 92%),
    radial-gradient(100% 60% at 50% 0%, rgba(157,153,144,.12), transparent 60%),
    linear-gradient(#060606, #020202);
}
.film[data-film="nightbus"] .film-still {
  background:
    radial-gradient(9% 14% at 24% 44%, rgba(232,230,225,.5), transparent 100%),
    radial-gradient(9% 14% at 33% 44%, rgba(232,230,225,.38), transparent 100%),
    radial-gradient(60% 100% at 30% 46%, rgba(232,230,225,.07), transparent 60%),
    radial-gradient(20% 30% at 78% 60%, rgba(140,29,24,.35), transparent 100%),
    linear-gradient(#050506, #020203);
}
.film[data-film="cartographer"] .film-still {
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(232,230,225,.045) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(232,230,225,.045) 46px 47px),
    radial-gradient(50% 70% at 62% 40%, rgba(232,230,225,.08), transparent 65%),
    linear-gradient(#050505, #020202);
}

.film-no {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--crimson-text); margin-bottom: .6rem;
}
.film-title {
  font-weight: 700; font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.05;
  letter-spacing: .005em;
}
.film-meta {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .22em;
  color: var(--silver-dim); margin-top: .7rem;
}
.film-log {
  max-width: 30rem; margin-top: .8rem;
  font-size: .95rem; color: var(--silver-dim);
}
.film-laurel {
  text-align: center; color: var(--silver-dim);
  min-width: 11rem;
}
.laurel { width: 88px; height: 56px; color: var(--silver-dim); }
.laurel-line { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; margin-top: -2.4rem; }
.laurel-fest { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; color: var(--silver-faint); margin-top: .3rem; }

/* ---------- SCENE 03 · statement ---------- */
.statement-inner-wrap {
  display: flex; align-items: center; justify-content: center;
}
.statement-inner {
  max-width: 46rem; text-align: left;
  will-change: transform;
}
.statement-quote p {
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.5; font-weight: 400;
}
.statement-quote p + p { margin-top: 1.4rem; }
.statement-quote em { color: var(--crimson-text); font-style: italic; }
.statement-sig {
  margin-top: 2rem; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--silver-dim);
}

/* ---------- SCENE 04 · services ---------- */
.services-inner { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem); }
.service-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.service {
  border-top: 1px solid #1f1f1d;
  padding-top: 1.4rem;
}
.service-slate {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .26em;
  color: var(--crimson-text); margin-bottom: .9rem;
}
.service h3 {
  font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin-bottom: .8rem;
}
.service p { font-size: .95rem; color: var(--silver-dim); }
.service-fine {
  margin-top: 1rem; font-family: var(--mono);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--silver-faint) !important;
}

/* ---------- SCENE 05 · enquiry ---------- */
.enquiry-inner {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-content: center;
}
.enquiry-sub { margin-top: 1.4rem; color: var(--silver-dim); max-width: 26rem; }
.enquiry-alt {
  margin-top: 2rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  line-height: 2; text-transform: uppercase; color: var(--silver-faint);
}
.enquiry-alt a { color: var(--silver-dim); }

.callsheet {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.6rem;
  border: 1px solid #1f1f1d;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(0, 0, 0, .5);
}
.cs-field { display: flex; flex-direction: column; gap: .5rem; }
.cs-wide { grid-column: 1 / -1; }
.callsheet label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--silver-dim);
}
.callsheet input, .callsheet select, .callsheet textarea {
  background: transparent; border: 0; border-bottom: 1px solid #34322e;
  color: var(--silver); font-family: var(--serif); font-size: 1rem;
  padding: .4rem 0; border-radius: 0;
  transition: border-color .15s;
}
.callsheet select { appearance: none; cursor: pointer; }
.callsheet select option { background: var(--black); color: var(--silver); }
.callsheet textarea { resize: vertical; line-height: 1.5; }
.callsheet input::placeholder, .callsheet textarea::placeholder { color: var(--silver-faint); font-style: italic; }
.callsheet input:focus, .callsheet select:focus, .callsheet textarea:focus {
  outline: none; border-bottom-color: var(--crimson-lift);
}
.cs-submit {
  grid-column: 1 / -1;
  background: var(--crimson); color: var(--silver);
  border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase;
  padding: 1rem;
  transition: background .15s;
}
.cs-submit:hover { background: var(--crimson-lift); }
.cs-confirm {
  grid-column: 1 / -1;
  font-style: italic; color: var(--silver-dim); min-height: 1.4rem;
}

/* ---------- footer / end credits ---------- */
.footer {
  background: var(--pitch);
  text-align: center;
  padding: clamp(3rem, 8vh, 5rem) 1.2rem 2.4rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: center;
}
.credit-line {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .24em;
  color: var(--silver-faint); text-transform: uppercase;
}
.credit-line span { color: var(--silver-dim); }
.footer nav a {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--silver);
}
.footer-fine { font-size: .8rem; color: var(--silver-faint); max-width: 34rem; }
.footer-fine a { color: var(--silver-dim); }

/* ---------- 404 ---------- */
.lost {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 1.6rem; padding: 2rem;
}
.lost-dial { color: var(--silver-dim); }
.lost-title { font-weight: 900; font-size: clamp(2.4rem, 7vw, 5rem); }
.lost-sub { color: var(--silver-dim); font-style: italic; max-width: 30rem; }
.lost-link {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--crimson); padding: .8rem 1.4rem;
  transition: background .15s;
}
.lost-link:hover { background: var(--crimson); }

/* ---------- guide ---------- */
.guide-body {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) 1.4rem 4rem;
}
.guide-body .back {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--silver-dim); text-decoration: none;
}
.guide-body h1 {
  font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin: 1.6rem 0 1rem; line-height: 1.05;
}
.guide-body h2 {
  font-weight: 700; font-size: 1.35rem;
  margin: 2.6rem 0 .8rem;
  padding-top: 1.2rem; border-top: 1px solid #1f1f1d;
}
.guide-body h2::before {
  content: "SCENE — "; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .26em; color: var(--crimson-text);
  display: block; margin-bottom: .4rem;
}
.guide-body p, .guide-body li { color: var(--silver-dim); }
.guide-body strong { color: var(--silver); font-weight: 700; }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; display: grid; gap: .5rem; margin: .6rem 0; }
.guide-body code {
  font-family: var(--mono); font-size: .84em;
  background: #121210; padding: .08em .4em; color: var(--silver);
}
.guide-body a { color: var(--silver); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; gap: 2rem; }
  .enquiry-inner { grid-template-columns: 1fr; }
  .film { grid-template-columns: 1fr; min-height: 0; gap: 1.4rem; }
  .film-laurel { text-align: left; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 1rem; min-width: 0; }
  .laurel { grid-row: 1 / 3; width: 64px; height: 42px; }
  .laurel-line { margin-top: 0; align-self: end; }
  .laurel-fest { margin-top: .1rem; align-self: start; }
}
@media (max-width: 640px) {
  .nav nav a:not(.nav-cta) { display: none; }
  .bar { font-size: .52rem; letter-spacing: .12em; }
  .bar-r { display: none; }
  .bar { justify-content: center; }
  .callsheet { grid-template-columns: 1fr; }
  .hero-hint { display: none; }
}

/* ---------- reduced motion: fully lit, fully still ---------- */
@media (prefers-reduced-motion: reduce) {
  #projector { display: none; }
  .js .cut-in { opacity: 1; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* JS marks body.lit when the projector engine is off (reduced motion) */
body.lit #projector { display: none; }