/* ==========================================================================
   THE D'HiPPO FILM — the stage only.
   Nothing in this file applies anywhere but inside `.film`. The site's design
   system lives in analogue.css and is about the whole site; this is about one
   picture on one page, and mixing the two would put a dark-room token in front
   of every designer who ever opens the system looking for a paper colour.

   The one idea underneath all of it: the footage is shot on PURE BLACK and
   composited with `mix-blend-mode: screen`. Screen maps black to transparent,
   so the black of the film falls away entirely and whatever is painted BEHIND
   it shows through — around the hippopotamus, between the ten bodies, inside
   the gaps. That is the whole difference between a video in a box and an
   object hanging in a lit room.

   Which means: the layer behind the film must never be flat black, or screen
   has nothing to reveal.
   ========================================================================== */

.film {
  /* Stage-only tokens. Deliberately NOT in :root — see the note above. */
  --stage:  #0A0908;   /* the composite floor */
  --void2:  #141210;
  --glow-a: #D65C30;   /* clay */
  --glow-b: #608A66;   /* kiln green */
  --glow-c: #8A66C4;   /* lilac */

  /* Four screens of scroll ARE the timeline: the film has no clock of its own.
     It was nine when the film ran to the family group; it is the look now,
     and the lockup's flight, and four screens is enough for both without the
     scroll feeling like a climb. */
  height: 400vh;
  position: relative;
  /* Full bleed. The stage is the only dark object on a paper site and it goes
     edge to edge; a margin around it would make it a widget. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--stage);
}

.film__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* Solid, so `screen` has something to composite against — and so the sticky
     stage never shows the paper page through itself. */
  background: var(--stage);
  /* Keeps the blending inside the stage. Without it the film canvas would
     screen against the page behind it and lift the whole document. */
  isolation: isolate;
}

/* ---- 1. the room the object hangs in ------------------------------------
   Three glazes lighting an unglazed body: clay, kiln green, and a violet from
   the Lilac Breeze end of the range. The site's black is warm (--ink #16150F),
   so this is warm black too — a blue-black stage on a paper site reads as a
   widget from somebody else's website. */
.film__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(214, 92, 48, .20), transparent 68%),
    radial-gradient(78% 58% at 50% 104%, rgba(96, 138, 102, .16), transparent 70%),
    radial-gradient(64% 44% at 50% -6%, rgba(138, 102, 196, .12), transparent 72%),
    linear-gradient(180deg, #0b0a08, #141210 48%, #0a0908);
}

/* ---- 2. the dust -------------------------------------------------------- */
#film-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- 3. the film -------------------------------------------------------- */
#film-frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
}

/* ---- the flyer ------------------------------------------------------------
   The Kyme Toys lockup. It opens the film sitting in the empty middle between
   the two groups of heads, and as the page is scrolled it is dragged up the
   screen, shrinking, until it lands on the KYME TOYS link in the nav — and
   stays there as the button for the rest of the page. film.js does the
   arithmetic each tick against the live position of that link; this is only
   its resting size and the rule that it never catches a click.

   Fixed, not absolute: the journey ends in a sticky nav, and both ends of it
   are measured in viewport space. The initial values put it in the middle of
   the first screen before any script has run, so the landing frame is right
   from the first paint. */
.film__flyer {
  position: fixed;
  left: 50%; top: 46%;
  width: min(34vw, 360px);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 11;                 /* above the sticky nav (10) while it lands */
  will-change: transform;
}
.film__flyer[hidden] { display: none; }

/* Where it lands: the nav link keeps its text for screen readers and loses it
   for eyes; the lockup takes its place at the height of the type. */
.nav__link.is-kyme-logo { position: relative; color: transparent; }
.nav__link.is-kyme-logo .nav__kyme {
  position: absolute; left: 50%; top: 50%;
  height: 24px; width: auto;
  transform: translate(-50%, -50%);
  display: block;
}
.nav__link .nav__kyme { display: none; }
.nav__link.is-kyme-logo:hover { opacity: .55; }

/* ---- daylight ------------------------------------------------------------
   The studio cut. film.js sets data-daylight from the manifest and everything
   above that made a dark room — the floor, the glow, the screen compositing —
   is switched off here. The floor is WHITE, not paper: the film's own
   background is the white of the photographs and a cover-fitted frame meets
   the stage edge on a phone, where a paper-coloured floor behind a white film
   would show as a faint seam. The section below is still paper, and the hard
   edge between the two is the frame of the picture, as before. */
.film[data-daylight] { --stage: #FFFFFF; }
.film[data-daylight] .film__glow { display: none; }
.film[data-daylight] #film-dust { display: none; }
.film[data-daylight] #film-frames { mix-blend-mode: normal; }
/* The rail is a warm-white hairline on a dark stage. On white it needs ink. */
.film[data-daylight] .film__rail { background: rgba(22, 21, 15, .10); }

/* ---- the only chrome on the stage ---------------------------------------
   A 1px rail carrying the range itself. No label: a label would be type, and
   there is no type on this stage. */
.film__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(243, 241, 237, .10);
  transition: opacity .5s var(--ease);
}
.film__rail > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--dhippo-spectrum));
}
/* Once the stage is leaving, the rail has nothing left to report. */
.film__rail.is-spent { opacity: 0; }

/* ---- the join ------------------------------------------------------------
   The section below is solid paper and occludes the sticky stage on the way
   out. The hard edge IS the frame of the picture; a gradient here would make
   it a mood, and a mood is what every other website does. */
.film + .section { background: var(--paper); position: relative; z-index: 1; }

/* ---- somebody who asked for less motion ---------------------------------
   Nine screens of scroll with a still picture in them is nine screens of
   nothing. They get one screen, one frame, and the page underneath. */
@media (prefers-reduced-motion: reduce) {
  .film { height: 100svh; }
}

/* ==========================================================================
   BELOW THE STAGE — one line of type and one button, on paper.

   The accent is the range itself, and it is now used exactly twice on the whole
   page: the rail on the stage, and the border of the one button. Everything
   else that carried it — the counted figures, the rule under each plate — was
   words about the film rather than the film, and has been removed.
   ========================================================================== */

.film-cta {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.film-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  padding: 1px;
  background: linear-gradient(90deg, var(--dhippo-spectrum));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.film-cta:hover { opacity: .72; }