/* ==================================================================
   DAEMS FILMS — home

   1. The showreel curtain that greets every visitor
   2. Statement — the breath after the curtain
   3. The work — full-screen chapters you move through
   4. Craft, studio, close

   The whole page after the curtain is built to keep something on the
   screen at all times: a frame is always filling the viewport, and type
   dissolves in and out over it rather than travelling.
   ================================================================== */

/* ============================================ 1. THE SHOWREEL CURTAIN

   .reel-stage is pure scroll room — just under two screens of it. The
   reel itself is fixed, so it holds the frame while the visitor scrolls,
   dimming and drifting closer, until the statement (which is opaque and
   sits in a higher layer) rises up and takes the screen from it.

   Using fixed rather than sticky matters: a sticky reel would still
   occupy a screen's worth of the flow, leaving a blank gap between the
   end of the intro and the top of the page.
   ------------------------------------------------------------------ */

.reel-stage {
  position: relative;
  height: 190vh;
  z-index: 1;
}

.reel {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
}

.reel__media {
  position: absolute;
  inset: 0;
  transform: scale(var(--reel-scale, 1));
  transform-origin: center 55%;
  will-change: transform;
}

.reel__media video,
.reel__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stills fallback: a slow cross-faded Ken Burns sequence when no
   showreel.mp4 has been dropped in yet. */
.reel__still {
  opacity: 0;
  transition: opacity 1.6s linear;
  animation: kenburns 18s ease-in-out infinite alternate;
}
.reel__still.is-on { opacity: 1; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
}

/* Grade the footage so white type always holds. */
.reel__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.85) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* Fades to solid black as the curtain hands over. */
.reel__fade {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--reel-fade, 0);
  pointer-events: none;
}

.reel__ui {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: var(--reel-ui, 1);
  transform: translateY(calc(var(--reel-lift, 0) * -40px));
  will-change: opacity, transform;
}

.reel__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.62);
}

.reel__center {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1.1rem;
}

.reel__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-hero);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.5);
}
.reel__wordmark .thin {
  display: block;
  font-weight: 300;
  color: rgba(242, 239, 233, 0.85);
}

.reel__tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.2vw, 0.8rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.7);
  margin: 0;
}

.reel__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

/* The invitation to scroll — a nod to the original site's Enter gate. */
.reel__enter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 1rem;
}
.reel__enter-line {
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.reel__enter-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: enter-run 2.2s var(--ease-in-out) infinite;
}
@keyframes enter-run {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.reel__enter:hover { color: var(--accent); }

/* Sound + skip controls */
.reel__ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.reel__ctl:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,0.06); }

/* Equaliser bars animate only while sound is on. */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 2px; height: 3px; background: currentColor; display: block; }
.reel__ctl[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }
.reel__ctl[aria-pressed='true'] .eq i { animation: eq 0.9s ease-in-out infinite; }
.reel__ctl[aria-pressed='true'] .eq i:nth-child(2) { animation-delay: 0.18s; }
.reel__ctl[aria-pressed='true'] .eq i:nth-child(3) { animation-delay: 0.36s; }
.reel__ctl[aria-pressed='true'] .eq i:nth-child(4) { animation-delay: 0.1s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }

@media (max-width: 640px) {
  .reel__bottom { flex-direction: column; align-items: center; }
  .reel__top .reel__top-right { display: none; }
}

/* ================================================================
   THE REVEALED PAGE
   Sits above the curtain and covers it as it rises.
   ================================================================ */

.home-main {
  position: relative;
  z-index: 3;
  background: var(--bg);
}

/* A frame that fills the viewport and holds while its section scrolls. */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
}

.stage__media {
  position: absolute;
  inset: 0;
  transform: scale(var(--m-scale, 1.06)) translate3d(0, var(--m-shift, 0px), 0);
  will-change: transform;
}
.stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grading layer — keeps type legible whatever the frame underneath is. */
.stage__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8,8,9,0.94) 0%, rgba(8,8,9,0.55) 38%, rgba(8,8,9,0.22) 68%, rgba(8,8,9,0.6) 100%),
    radial-gradient(ellipse at 30% 60%, transparent 30%, rgba(8,8,9,0.5) 100%);
}

.stage__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: center;
}

/* ============================================== 2. STATEMENT

   One screen of quiet after the curtain: type on near-black, a single
   frame breathing behind it at low strength.
   --------------------------------------------------------------- */

.statement { position: relative; height: 150vh; }

/* The two quiet frames carry a defocused plate: enough light and depth
   to keep the screen alive, never a specific place competing for
   attention — and no legible title treatment from the artwork. */
.statement .stage__media img,
.close .stage__media img {
  transform: scale(1.12);
  filter: grayscale(1) contrast(1.1) blur(16px);
}

.statement .stage__media { opacity: 0.3; }
.statement .stage__grade {
  background: radial-gradient(ellipse at 50% 45%, rgba(8,8,9,0.55) 0%, rgba(8,8,9,0.94) 72%);
}

.statement__line {
  font-size: clamp(2rem, 5.6vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 18ch;
  margin: 0;
}
.statement__line em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.statement__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 58rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.statement__meta b { color: var(--ink-dim); font-weight: 400; }

/* ================================================ 3. THE WORK

   Each project takes the whole screen and holds it while you scroll,
   then hands over to the next. Image pushes in slowly; type dissolves.
   --------------------------------------------------------------- */

.work { position: relative; }

.work__intro {
  position: relative;
  z-index: 4;
  background: var(--bg);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 5vw, 4rem);
}
.work__intro h2 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  max-width: 20ch;
}

/* ---- one chapter ------------------------------------------------ */

.chapter {
  position: relative;
  height: 165vh;
}

.chapter .stage__media img { filter: saturate(var(--m-sat, 0.55)) contrast(1.05); }

/* Everything in the frame fades together as the chapter takes and
   gives up the screen. No movement — a dissolve, like a cut. */
.chapter__content {
  opacity: var(--c-fade, 1);
  will-change: opacity;
}

.chapter__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: clamp(0.8rem, 2vw, 1.4rem);
}

.chapter__title {
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0 0 1.25rem;
  max-width: 14ch;
}
.chapter__title small {
  display: block;
  font-size: 0.28em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  margin-top: 0.7rem;
}

.chapter__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1.1rem;
}

.chapter__blurb {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 42ch;
  margin: 0 0 2rem;
}

/* ---- the rail ---------------------------------------------------

   A fixed index of the chapters, so you always know where you are in
   the reel and can jump. Only present while the work section is.
   ---------------------------------------------------------------- */

.rail {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: grid;
  gap: 0.65rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.rail.is-on { opacity: 1; pointer-events: auto; }

.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  transition: color 0.4s var(--ease);
}
.rail a:hover { color: var(--ink); }
.rail a[aria-current='true'] { color: var(--accent); }

.rail__name {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  text-transform: uppercase;
  transition: max-width 0.5s var(--ease), opacity 0.4s var(--ease);
}
.rail a:hover .rail__name { max-width: 14rem; opacity: 1; }

.rail__tick {
  width: 22px;
  height: 1px;
  background: currentColor;
  flex: none;
  transition: width 0.45s var(--ease);
}
.rail a[aria-current='true'] .rail__tick { width: 40px; }

@media (max-width: 860px) { .rail { display: none; } }

/* ---- out of the work section ------------------------------------ */

.work__out {
  position: relative;
  z-index: 4;
  background: var(--bg);
  padding-block: clamp(4rem, 9vw, 7rem);
  text-align: center;
}

/* ================================================ 4. CRAFT

   Text-led, but still sitting on a frame so the screen never empties.
   --------------------------------------------------------------- */

.craft { position: relative; height: auto; }

/* No overflow clipping on this box: it would make it the sticky child's
   scroll container, and a container that never scrolls pins the image at
   the top instead of letting it hold the viewport. */
.craft__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Image and its grading travel together as one sticky screen, so the
   frame reads evenly however far through the section you are. */
.craft__bg > span {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  overflow: hidden;
}
/* Thrown well out of focus: the frame reads as depth and light rather
   than as a specific place, and the signage in the plate stops competing
   with the type. Scaled up so the blur has no soft edge to reveal. */
.craft__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  transform: scale(1.12);
  filter: grayscale(1) contrast(1.1) blur(18px);
}
.craft__bg > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(10,10,11,0.55) 22%, rgba(10,10,11,0.55) 78%, var(--bg) 100%);
}

.craft .wrap { position: relative; z-index: 1; }

.craft__list { border-top: 1px solid var(--line); }

.craft__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.craft__row dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing: -0.025em;
  margin: 0;
}
.craft__row dd { margin: 0; color: var(--ink-dim); max-width: 52ch; }
.craft__no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  padding-top: 0.5rem;
}

@media (max-width: 760px) {
  .craft__row { grid-template-columns: 3rem 1fr; }
  .craft__row dd { grid-column: 2; }
}

/* ================================================ 5. STUDIO

   A frame that holds on one side while the words scroll past it.
   --------------------------------------------------------------- */

.studio { position: relative; }

.studio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.studio__figure {
  position: sticky;
  top: 0;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
.studio__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.studio__figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(10, 10, 11, 0.85);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Taller than the frame beside it, which is what gives the sticky figure
   something to hold through while the words move past it. */
.studio__body {
  min-height: 140vh;
  padding: clamp(4rem, 12vw, 11rem) clamp(1.5rem, 5vw, 5rem);
  display: grid;
  align-content: center;
  gap: 1.4rem;
}
.studio__body h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.studio__body p { color: var(--ink-dim); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 46ch; }

@media (max-width: 860px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__figure { position: relative; height: 62vh; }
  .studio__body { min-height: 0; }
}

/* ================================================ 6. CLOSE

   Bookend: the same quiet as the statement, at the other end.
   --------------------------------------------------------------- */

.close { position: relative; height: 140vh; }

.close .stage__media { opacity: 0.32; }
.close .stage__grade {
  background: radial-gradient(ellipse at 50% 50%, rgba(8,8,9,0.5) 0%, rgba(8,8,9,0.95) 70%);
}
.close .stage__inner { text-align: center; }

.close h2 {
  font-size: clamp(2.2rem, 7vw, 6rem);
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.close .lede { margin-inline: auto; }

.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
}

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

@media (prefers-reduced-motion: reduce) {
  /* Hold each frame still rather than pushing in. */
  .stage__media { transform: none !important; }
  .chapter__content { opacity: 1 !important; }
}