/* 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;
}
.mark img, .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 title screen's three pieces at a WHOLE-NUMBER scale, assembled as
 * client/src/titlescene.ts assembles them. */
.mark {
  --s: 3;
  position: relative; margin: 0 0 .4rem;
  width: calc(118px * var(--s)); height: calc(88px * var(--s));
}
@media (min-width: 560px) { .mark { --s: 4; } }
.piece { position: absolute; display: block; transform-origin: 50% 100%; opacity: 0; }
.piece.vi  { left: calc(3px * var(--s));  top: calc(5px * var(--s));  width: calc(52px * var(--s)); height: auto; }
.piece.vu  { left: calc(46px * var(--s)); top: calc(2px * var(--s));  width: calc(69px * var(--s)); height: auto; }
.piece.mon { left: calc(4px * var(--s));  top: calc(42px * var(--s)); width: calc(110px * var(--s)); height: auto; }
.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 { opacity: 1; }

.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; opacity: 1; }
  .burst.on { animation: none; opacity: .42; }
}