/* CineIris teaser. One title card: darkness, an iris, light.
   Color strategy: restrained. Near-black and projector light; the only color is the REC tally. */

@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-300italic-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Near-black, tinted a breath toward the tally's red so the dark reads as one room. */
  --bg: oklch(0.13 0.006 8);
  --bg-edge: oklch(0.08 0.004 8);
  --ink: oklch(0.94 0.004 60);
  --ink-soft: oklch(0.80 0.006 60);
  --ink-quiet: oklch(0.66 0.006 60);
  /* A camera's REC tally: warm red, not pink. */
  --tally: oklch(0.62 0.22 27);

  --display: "Michroma", "Eurostile", "Arial", sans-serif;
  --subtitle: "Spectral", "Iowan Old Style", "Georgia", serif;

  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-s: clamp(0.9rem, 2vw, 1.25rem);
  --space-m: clamp(1.4rem, 3.4vw, 2.4rem);
  --space-l: clamp(2rem, 6vh, 4rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-grain: 1;
  --z-content: 2;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, transparent 30%, var(--bg-edge) 100%),
    var(--bg);
  color: var(--ink);
  font-family: var(--subtitle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Short screens (a phone on its side) scroll rather than lose the slate. */
  overflow-x: clip;
}

.card {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-l) var(--space-m) var(--space-m);
  text-align: center;
}

.presents {
  margin: 0 0 var(--space-m);
  font-family: var(--subtitle);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-quiet);
}

/* The mark: the app's own iris, with a spill of its colors behind it like light through glass. */
.mark {
  position: relative;
  width: min(54vw, 38vh, 360px);
  aspect-ratio: 1;
  translate: 0 0;
  scale: 1;
  transition: scale 900ms var(--ease-out);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* Press and hold: it stops down, like a depth-of-field preview. */
.mark:active {
  scale: 0.94;
}

.logo,
.spill {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.logo {
  inset: 0;
  width: 100%;
  height: 100%;
}

.spill {
  inset: -22%;
  width: 144%;
  height: 144%;
  filter: blur(clamp(28px, 6vw, 56px)) saturate(1.3);
  opacity: 0.38;
  translate: calc(var(--px, 0) * 7%) calc(var(--py, 0) * 7%);
  transition: translate 1.6s var(--ease-out);
  animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { scale: 0.96; }
  50% { scale: 1.04; }
}

.title {
  margin: var(--space-m) 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 4.6vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: 0.34em;
  /* The tracking trails the last letter; pull it back so the word sits on center. */
  margin-right: -0.34em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.line {
  margin: var(--space-s) 0 0;
  max-width: 40ch;
  font-family: var(--subtitle);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* The trailer's end card: wide, small, last. */
.soon {
  margin: var(--space-l) 0 0;
  font-family: var(--display);
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  line-height: 1.4;
  letter-spacing: 0.52em;
  margin-right: -0.52em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.slate {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m) max(var(--space-s), env(safe-area-inset-bottom));
  font-family: var(--display);
  font-size: clamp(0.62rem, 1vw, 0.72rem);
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--ink-quiet);
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}

.tally {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 0.9em oklch(0.62 0.22 27 / 0.55);
}

.timecode {
  font-variant-numeric: tabular-nums;
  /* Michroma's digits are not tabular; fixed cells keep the count from jittering. */
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  justify-items: center;
}

.timecode > span {
  display: block;
  width: 1.02em;
  text-align: center;
}

.timecode > .colon {
  width: 0.5em;
}

/* Film grain: a still noise field, nudged a few frames a second. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grain 1s steps(8) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  12% { transform: translate(-3%, 2%); }
  25% { transform: translate(2%, -4%); }
  37% { transform: translate(-4%, -1%); }
  50% { transform: translate(3%, 3%); }
  62% { transform: translate(-1%, 4%); }
  75% { transform: translate(4%, -2%); }
  87% { transform: translate(-2%, -3%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 520px) {
  .slate {
    letter-spacing: 0.16em;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .mark {
    width: min(34vh, 240px);
  }
  .card {
    padding-top: var(--space-m);
  }
  .presents {
    margin-bottom: var(--space-s);
  }
  .title {
    margin-top: var(--space-s);
  }
  .soon {
    margin-top: var(--space-m);
  }
}

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