/* Shared by compositions/index.html (the MP4) and live.html (the website hero). */
/* variables live on the scene elements, not :root: HyperFrames scopes sub-composition CSS */
.hero, .next {
  --paper: #F4EEEA; --paper-2: #EDE3DE;
  --ink: #68204C; --ink-deep: #340323; --ink-soft: #7D3460;
  --gold: #E3A82E; --gold-soft: #F1D08A;
  --display: "Archivo", "Overpass", sans-serif;
  --mono: "Overpass Mono", ui-monospace, monospace;
  --m: 90px;
}
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink-deep); font-family: "Overpass", sans-serif; }
.hero .wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.hero .launches { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* the rider sits above the labels, so a label never covers it */
.hero .rider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; display: block; overflow: hidden; pointer-events: none; }
.hero .grain, .grain-fixed {
  position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .05  0 0 0 0 .15  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.mark { position: absolute; z-index: 3; left: var(--m); top: 44px; display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .16em; color: var(--ink-deep); }
.mark svg { width: 46px; height: auto; display: block; }
.plate { font-family: var(--display); font-weight: 900; font-stretch: 112%; line-height: .92; letter-spacing: -.035em;
  color: var(--ink); text-shadow: 7px 7px 0 var(--gold); margin: 0; }
.hero h1 { position: absolute; z-index: 3; left: var(--m); top: 17vh; font-size: min(8.6vw, 15vh); }
.hero h1 .m { display: none; }

/* launch labels: .launch sits on the crest; .launch-in carries the entry tween; transforms on
   .chip, .mk and the leader path follow the moving surface */
.launches { --cs: 1; }
.launch { position: absolute; width: 0; height: 0; }
.launch-in { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.launch .lead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.launch .lead path { fill: none; stroke: var(--ink-deep); stroke-width: 1.4; }
.chip { position: absolute; display: flex; align-items: center; gap: calc(7px * var(--cs));
  padding: calc(5px * var(--cs)) calc(8px * var(--cs)); background: var(--paper);
  border: 1.4px solid var(--ink-deep); box-shadow: 3px 3px 0 var(--gold); white-space: nowrap; will-change: transform; }
.chip .lg { width: calc(17px * var(--cs)); height: calc(17px * var(--cs)); flex: none; display: block; color: var(--ink-deep); }
.chip img.lg { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--ink-deep); }
.chip .tx { display: flex; flex-direction: column; gap: calc(3px * var(--cs)); }
.chip .nm { font: 700 calc(12px * var(--cs))/1 var(--mono); letter-spacing: .01em; color: var(--ink-deep); }
.chip .dt { font: 500 calc(10.5px * var(--cs))/1 var(--mono); letter-spacing: .01em; color: var(--ink-soft); }
.mk { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.mk-in { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mk svg { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; }

@media (max-width: 700px) {
  .hero, .next { --m: 24px; }
  .mark { top: 26px; gap: 10px; font-size: 12.5px; }
  .mark svg { width: 38px; }
  .hero h1 { top: 104px; font-size: 19.5vw; text-shadow: 5px 5px 0 var(--gold); }
  .hero h1 .d { display: none; }
  .hero h1 .m { display: inline; }
  .chip .nm { font-size: calc(9.5px * var(--cs) / .78); }
  .chip .dt { font-size: calc(8.5px * var(--cs) / .78); }
}