/* bridalwebguide.com -- splash/teaser */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #1a1210; 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, or the browser
	   re-rasterizes a full-size 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(). Restarting a CSS animation requires forcing a reflow,
   which stalls the browser at exactly the moment of every crossfade. */

/* 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,.22) 70%, rgba(0,0,0,.45) 100%),
		linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,0) 40%, rgba(0,0,0,.32));
}

/* ---- 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, sans body copy, deliberately. All locally installed faces --
   no webfont request, so nothing to load and nothing to go wrong on a slow
   connection. */
/* Headline now rotates with the image, same beat as the tagline -- see
   index.txt. Height reserved via min-height so the rule/tagline below don't
   jump vertically as shorter/longer words swap in. */
h1 {
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
	font-size: clamp(1.5rem, 6.6vw, 5.2rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.05;
	min-height: 1.1em;
	max-width: 100%;
	overflow-wrap: break-word;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	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);
}
h1.on { opacity: 1; }
#rule {
	width: clamp(120px, 30vw, 420px);
	height: 1px;
	margin: 3vh 0;
	background: linear-gradient(to right, transparent, rgba(255,255,255,.75), transparent);
}

/* Rotating tagline -- smaller and lighter than the headline, changes
   together with it on each slide. */
#tagline {
	min-height: 3.2em;
	font-size: clamp(.9rem, 2vw, 1.35rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: .02em;
	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: .85; }

/* ---- static site branding, unrotated ---- */
#brand-footer {
	position: fixed; left: 0; right: 0; bottom: 4vh;
	text-align: center;
	font-size: clamp(.65rem, 1.4vw, .8rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .7;
	text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.8);
}

/* Below ~600px the footer text and the pause button are both fixed to the
   same bottom edge and collide -- give the footer its own row above the
   button instead of sharing one. */
@media (max-width: 600px) {
	#brand-footer { bottom: 8vh; }
}

/* ---- pause/play toggle ---- */
/* Deliberately labelled rather than a bare glyph, same reasoning as the
   sound toggle it's adapted from: if the control isn't obvious, nobody
   discovers the page can be held on a slide. */
#pause {
	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;
}
#pause-label { letter-spacing: .18em; text-transform: uppercase; }
#pause:hover { opacity: 1; background: rgba(0,0,0,.65); }
#pause.on { opacity: 1; border-color: rgba(255,255,255,.9); }

/* No prefers-reduced-motion override here, on purpose -- see
   supplychaintycoon.com/style.css for the reasoning. A single slow zoom
   is not a vestibular trigger the way parallax or auto-scroll is, and the
   pause button already gives anyone who wants the motion stopped a way to
   stop it. */