/* A3 Growth. One full-viewport film. Words are HTML, not in the picture.
   Graphik is not on this machine. Open Sauce Sans is the licensed face used. */
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Regular.ttf?v=20260930-9") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Medium.ttf?v=20260930-9") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #090a0a;
  --ink: #c8cbc6;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--white);
  color-scheme: dark;
  font-family: "Open Sauce Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--void);
  z-index: 0;
}

#leaders {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

#leader {
  stroke: #000;
  stroke-width: 1;
  fill: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}

#leaders.on #leader {
  opacity: 1;
}

.callout {
  position: fixed;
  z-index: 3;
  margin: 0;
  max-width: min(34rem, 62vw);
  color: #000;
  font-weight: 700;
  font-synthesis: weight;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.callout.live {
  animation: callout-drift 3.6s ease-in-out infinite alternate;
}

.callout.in {
  opacity: 1;
}

@keyframes callout-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3px, -4px, 0); }
}

.words {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  z-index: 4;
  padding: 0 1.25rem;
  text-align: center;
  pointer-events: none;
}

.words h1,
.end h1 {
  margin: 0;
  color: var(--white);
  font-weight: 500;
  font-size: clamp(1.65rem, 4.2vw, 2.85rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.words p {
  margin: 0.4rem auto 0;
  max-width: 28rem;
  color: var(--white);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.1vw, 1.12rem);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.end {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--void);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.end.show { opacity: 1; }

body.ended .words,
body.ended #leaders,
body.ended .callout {
  opacity: 0;
}

@media (max-width: 720px) {
  .callout {
    max-width: min(22rem, 90vw);
    letter-spacing: 0.03em;
    font-size: 1.25rem;
  }
}

/* Phone only. Desktop cover framing is unchanged.
   A 16:9 cover on a tall phone is height-locked, so scale() under 1
   would show the void. The element stays wider than the screen and as
   tall as the viewport: 13% less tight than cover, still edge to edge,
   iris held where the leader already points. */
@media (max-width: 700px) {
  #film {
    top: 0;
    right: auto;
    bottom: auto;
    height: 100%;
    width: calc(100vh * 16 / 9 * 0.87);
    left: calc((100vw - 100vh * 16 / 9) / 2 + 0.484 * (100vh * 16 / 9) * 0.13);
    max-width: none;
    object-fit: fill;
    object-position: 48% 43%;
  }
}