/*
 * Shared base for the Levier hero reels (reel/*.html).
 *
 * Layout contract
 * ───────────────
 * The iframe each reel runs in covers the whole viewport, including the strips
 * behind the site's frosted header and footer bars. Anything that should read
 * — type, cards, photography — lives inside `.frame`, which sits between those
 * bars (--safe-top / --safe-bottom, measured live by the host and posted in;
 * see kit.js) with generous gutters on every side. Only atmosphere (colour
 * washes, grain, glows) is allowed to bleed behind the bars.
 *
 * `.frame` is a size container, so reels size everything in cq units against
 * the space they actually have rather than against the window — the same
 * reel then composes correctly on an ultrawide, a laptop and a phone.
 */

:root {
  --safe-top: 88px;
  --safe-bottom: 72px;
  --gutter-x: clamp(20px, 5.5vw, 120px);
  --gutter-y: clamp(16px, 3.4vmin, 52px);

  /* Light theme: very light grey page, near-black ink. --ink-rgb lets a reel
     write rgba(var(--ink-rgb), .4) instead of a hard-coded colour. Cards sit
     on the page as white (--card) with a soft shadow, or as charcoal (--coal)
     where a dark accent is wanted. */
  --bg: #ededeb;
  --ink: #141414;
  --ink-rgb: 20, 20, 20;
  --ink-dim: rgba(20, 20, 20, 0.64);
  --ink-faint: rgba(20, 20, 20, 0.5);
  --on-dark: #f3efea;
  --card: #ffffff;
  --coal: #151515;
  --card-shadow: 0 1px 0 rgba(20, 20, 20, 0.04), 0 22px 44px -22px rgba(20, 20, 20, 0.28);

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A dark surface on the light page (a charcoal card, a lamp-lit room, a phone
   screen): inside it, the ink tokens flip back to light so text written with
   var(--ink*) just works. */
.on-dark {
  --ink: #f3efea;
  --ink-rgb: 243, 239, 234;
  --ink-dim: rgba(243, 239, 234, 0.62);
  --ink-faint: rgba(243, 239, 234, 0.4);
  color: var(--ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Nothing shows until fonts and images are in, so the first painted frame is
   the reel's real frame 0 rather than a flash of fallback type. */
body:not(.is-ready) .reel {
  visibility: hidden;
}

.reel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed atmosphere layer — may sit behind the header/footer bars. */
.bleed {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.safe {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--safe-top);
  bottom: var(--safe-bottom);
}

.frame {
  position: absolute;
  inset: var(--gutter-y) var(--gutter-x);
  container-type: size;
  container-name: frame;
}

.scene {
  position: absolute;
  inset: 0;
}

/* Invisible layout targets. Their position comes from CSS (and so from the
   container queries), and kit.js measures them at build time — shared
   elements tween between slots instead of between hard-coded numbers. */
.slot {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* A touch of room so descenders and italics aren't clipped by the mask. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Chapter marker — the showreel's running index. It sits in the top gutter,
   centred between the header bar and the frame, so it never collides with a
   scene's own content hugging the frame's top-left corner. */
.chapter {
  position: absolute;
  left: 0;
  top: calc(-0.5 * var(--gutter-y));
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  gap: 1.2em;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.25cqmin, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}

/* Every label in a box shares one grid cell, so the outgoing and incoming
   labels overlap and roll past each other inside the mask — rather than
   stacking in flow, where the incoming one would sit below it, clipped. */
.chapter .chapter-index,
.chapter .chapter-name {
  display: inline-grid;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
}

.chapter .chapter-index span,
.chapter .chapter-name span {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
}

.chapter .chapter-rule {
  display: inline-block;
  width: 3.2em;
  height: 1px;
  background: currentColor;
  align-self: center;
  transform-origin: left center;
}

/* Film grain — a static turbulence tile, jittered in steps so it reads as
   grain rather than as a sliding texture. */
.grain {
  position: absolute;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  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='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: reel-grain 0.9s steps(6) infinite;
}

@keyframes reel-grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-3%, 2%); }
  33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); }
  67% { transform: translate(3%, 3%); }
  83% { transform: translate(-1%, 4%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain {
    animation: none;
  }
}

/* The reels sit on exactly the page's grey (#ededeb) — no edge darkening and no
   grain — so nothing about their background can show as a seam against the
   page or the "Our products" section below. Colour washes (.glow, .wash,
   .atmos) stay; the footer fades the hero into the page at its lower edge. */
.vignette { background: none !important; }
.grain { display: none !important; }