/* The teaser: the full page's hero and nothing else, so its rules are COPIED
 * from ../../public/style.css rather than shared -- the two are served by
 * different Workers and this one is temporary. The colours and the mark's
 * assembly are the brand's; if they change there, change them here, and the
 * day the full page takes vivumon.com this file is deleted with its Worker. */
:root {
  --night: rgb(24, 19, 15);
  --panel: #2a2119;
  --gold: #c9a24a;
  --cream: #efe3c8;
  --cream-dim: #b9ab90;
  --heavy: "Arial Black", "Arial Bold", Gadget, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* The film is the game's own pixels; the mark is the smooth master, and is
 * left to the browser's smoothing on purpose. */
.film video { image-rendering: pixelated; }

.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.25rem 3rem;
  background: radial-gradient(ellipse at 50% 30%, #2b1f14 0%, var(--night) 70%);
}
/* Everything stands IN FRONT of the burst: only positioned boxes take part in
 * stacking, and an unpositioned box paints under the absolute canvas. */
.hero > * { position: relative; z-index: 1; }
.hero > .burst {
  position: absolute; z-index: 0; left: 50%; top: 26%;
  width: max(115vw, 900px); aspect-ratio: 3 / 2; height: auto;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.burst.on { animation: flare 900ms ease-out forwards; }
@keyframes flare { 0% { opacity: 0; } 7% { opacity: 1; } 100% { opacity: .42; } }

/* The SMOOTH mark (his word, 2026-10-27: "the logo needs to be the vector
 * version"), in the three pieces the title screen assembles. Each piece is
 * drawn alone through forge/brandmark.py's own stack, on the whole mark's
 * crop, at 1022x760 -- so these percentages are its places in that frame and
 * the mark scales to any width without a seam. The pieces stacked differ from
 * the mark by a few edge pixels where keylines overlap, so, as titlescene.ts
 * does, the whole mark is swapped in the moment MON lands (`landed`). */
.mark {
  position: relative; margin: 0 0 .4rem;
  width: min(354px, 86vw); aspect-ratio: 1022 / 760;
}
@media (min-width: 560px) { .mark { width: 472px; } }
.piece { position: absolute; display: block; transform-origin: 50% 100%; opacity: 0; height: auto; }
.piece.vi    { left: 1.859%;  top: 5.789%;  width: 44.912%; }
.piece.vu    { left: 38.552%; top: 2.5%;    width: 59.589%; }
.piece.mon   { left: 3.229%;  top: 47.105%; width: 93.444%; }
.piece.whole { left: 0; top: 0; width: 100%; }
.landed .piece { visibility: hidden; }
.landed .piece.whole, .still .piece.whole { visibility: visible; opacity: 1; }
.go .piece.vi  { animation: in-right 840ms 250ms both; }
.go .piece.vu  { animation: in-right 840ms 380ms both; }
.go .piece.mon { animation: in-up    840ms 510ms both; }
@keyframes in-right {
  0%   { opacity: 1; transform: translateX(110vw); animation-timing-function: linear; }
  24%  { transform: translateX(0) scale(1.3, .7); animation-timing-function: ease-out; }
  45%  { transform: scale(.88, 1.12); }
  64%  { transform: scale(1.05, .95); }
  82%  { transform: scale(.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes in-up {
  0%   { opacity: 1; transform: translateY(80vh); animation-timing-function: linear; }
  24%  { transform: translateY(0) scale(1.3, .7); animation-timing-function: ease-out; }
  45%  { transform: scale(.88, 1.12); }
  64%  { transform: scale(1.05, .95); }
  82%  { transform: scale(.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
.still .piece { visibility: hidden; }

.motto {
  font: 900 clamp(1.5rem, 4.5vw, 2.4rem)/1 var(--heavy);
  margin: .3rem 0 .8rem; color: #fff;
  text-shadow: 0 3px 0 #120d0a, 0 0 18px rgba(18, 13, 10, .8);
}
.lede { max-width: 34em; margin: 0 auto 1.8rem; font-size: 1.1rem; color: #fff;
        text-shadow: 0 1px 2px #120d0a, 0 0 14px rgba(18, 13, 10, .9); }

/* One clip, in the dialogue box's gold rim. 480 is the clip's 2x of 240: a
 * whole number, so its pixels stay square wherever there is room for it. */
.film { margin: 0; }
.film video {
  display: block; width: 480px; max-width: 86vw; height: auto;
  border: 3px solid var(--gold); border-radius: 10px; background: #000;
}
.soon { margin: 1.4rem 0 .3rem; font-weight: 700; color: var(--cream);
        text-shadow: 0 1px 2px #120d0a; }
.ask { margin: 0; font-size: .92rem; color: var(--cream-dim); }
.ask a { color: var(--gold); text-underline-offset: 2px; }

footer { text-align: center; padding: 1.6rem 1rem 2.4rem; color: var(--cream-dim);
         font-size: .85rem; border-top: 2px solid var(--panel); }

@media (prefers-reduced-motion: reduce) {
  .go .piece { animation: none; }
  .burst.on { animation: none; opacity: .42; }
}