/* supplychaintycoon.com -- splash/teaser */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #0b0d10; overflow: hidden; }
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
}

/* ---- background slides ---- */
#stage { position: fixed; inset: 0; }
#stage .slide {
	position: absolute; inset: 0;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	transition: opacity 2.5s ease-in-out;
	/* Keep each slide on its own compositor layer. Without this the browser
	   re-rasterizes a 1800px image every frame and the zoom stutters. */
	will-change: opacity, transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
#stage .slide.on { opacity: 1; }

/* The Ken Burns motion is NOT here -- it is driven from index.txt with
   element.animate(). It lived here as a CSS animation first, and restarting
   a CSS animation requires reading offsetWidth to force a reflow, which
   stalled the browser at exactly the moment of every crossfade and made the
   zoom visibly hitch just before each fade. */

/* Light darkening only. The images are the point -- the type is kept
   readable by its own shadow rather than by burying the picture. */
#scrim {
	position: fixed; inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.42) 100%),
		linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,0) 40%, rgba(0,0,0,.30));
}

/* ---- centered type ---- */
#title {
	position: fixed; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	padding: 0 6vw;
}
/* Serif title against the sans tagline, deliberately. All locally
   installed faces -- no webfont request, so nothing to load and nothing
   to go wrong on a slow connection. */
h1 {
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
	font-size: clamp(2.1rem, 7.4vw, 6rem);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.05;
	text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.9), 0 0 120px rgba(0,0,0,.7);
}
#rule {
	width: clamp(120px, 30vw, 420px);
	height: 1px;
	margin: 3.2vh 0;
	background: linear-gradient(to right, transparent, rgba(255,255,255,.75), transparent);
}
#tagline {
	min-height: 3.2em;
	font-size: clamp(.95rem, 2.1vw, 1.6rem);
	font-weight: 300;
	letter-spacing: .06em;
	max-width: 30em;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
#tagline.on { opacity: .92; }

#footnote {
	position: fixed; left: 0; right: 0; bottom: 4vh;
	text-align: center;
	font-size: clamp(.65rem, 1.4vw, .8rem);
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.8);
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
#footnote.on { opacity: .7; }

/* ---- outro: warp to black, one line, restart ---- */
#warpimg {
	position: fixed; inset: 0;
	background: url('/images/warp.jpg') center center / cover no-repeat;
	opacity: 0;
	pointer-events: none;
	z-index: 40;
	transition: opacity .45s ease-out;
	will-change: opacity, transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
#warpimg.on { opacity: 1; }

/* Signal loss between the warp and the black. Cuts in over .12s rather than
   fading, because a fade reads as a transition and a cut reads as a fault. */
#static {
	position: fixed; inset: 0;
	background: url('/images/static.jpg') center center / cover no-repeat;
	opacity: 0;
	pointer-events: none;
	z-index: 45;
	transition: opacity .12s linear;
	will-change: opacity, transform;
	backface-visibility: hidden;
}
#static.on { opacity: 1; }

#warp {
	position: fixed; inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	z-index: 50;
	transition: opacity 1.4s ease-in;   /* matches BLACK_LEN in index.txt */
}
#warp.on { opacity: 1; }

#outro {
	position: fixed; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 0 8vw;
	text-align: center;
	pointer-events: none;
	z-index: 51;
	opacity: 0;
	transition: opacity .9s ease-in-out;
}
#outro.on { opacity: .95; }
/* Deliberately small and plain -- an old terminal, not a title card. */
#outro p {
	font-family: "Andale Mono", "Courier New", Courier, monospace;
	font-size: clamp(.75rem, 1.8vw, 1.1rem);
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.6;
	color: #fff;
	text-shadow: 0 0 18px rgba(255,255,255,.35);
}
/* Only one line is on screen at a time -- the hail, then nothing, then the
   message. */
#hail, #prompt { display: none; }
#hail.on, #prompt.on { display: block; }

/* The hail is ON for most of each cycle and off briefly -- a signal pulsing,
   not a 50/50 flash. Its own keyframes, because the cursor below wants an
   even blink. */
#hail { animation: hailblink 1.15s steps(1) infinite; }
@keyframes hailblink { 0%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* The box carries a fade for its exit. Suppressed on entry, or the hail's
   first pulse arrives as a slow fade instead of just being there. */
#outro.instant { transition: none; }

#cursor { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

#title { transition: opacity 1.2s ease-in-out; }
#title.hide { opacity: 0; }

/* ---- sound toggle ---- */
/* Deliberately labelled rather than a bare glyph. Audio cannot autoplay, so
   if this control is not obvious the sound simply never gets heard -- which
   is exactly what happened when it was a small dim circle. */
#sound {
	position: fixed; right: 3vw; bottom: 3.5vh;
	display: flex; align-items: center; gap: .5em;
	padding: .55em 1.1em;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 999px;
	background: rgba(0,0,0,.45);
	color: #fff;
	font-family: inherit;
	font-size: .8rem;
	line-height: 1;
	cursor: pointer;
	opacity: .72;
	transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
#sound-label { letter-spacing: .18em; text-transform: uppercase; }
#sound:hover { opacity: 1; background: rgba(0,0,0,.65); }
#sound.on { opacity: 1; border-color: rgba(255,255,255,.9); }
#sound:disabled { cursor: default; opacity: .2; }

/* No prefers-reduced-motion override here, on purpose, and it took two tries
   to land on that. First it killed the motion outright, which deleted the
   only feature the page has on any machine with Reduce Motion on. Then it
   dropped to 1.06 over 40s, which was both invisible and visibly JERKY --
   travel that slow gets quantized into steps rather than a glide. A single
   slow zoom is not a vestibular trigger the way parallax or auto-scroll is,
   so it runs the same for everyone. */