/*
 * DiunaDent intro — overlay styles.
 *
 * Derived 1:1 from the approved standalone component; the only changes:
 * - rules are scoped to the #dd-intro overlay instead of the demo page body,
 * - the six embedded data-URI images are external files (logo-mask.webp,
 *   rim-mask.webp, logo-copper.webp) in this directory, re-encoded from the
 *   component's PNG/JPEG by ops/intro-assets.py — mask alpha bit-identical,
 *   305 kB down to 145 kB on the critical path,
 * - integration states (skip / active / done) right after the base
 *   overlay rules below.
 *
 * DO NOT minify or concatenate this file (cache plugins must exclude it).
 */

#dd-intro {
	--bg: #070403;
	--label: rgba(214, 178, 148, .5);

	position: fixed;
	inset: 0;
	z-index: 10000;
	margin: 0;
	background: var(--bg);
	overflow: hidden;
	display: none;
	place-items: center;
	font-family: Georgia, 'Times New Roman', serif;
}

/* JS adds dd-intro-active before first paint; without JS the overlay stays hidden. */
html.dd-intro-active #dd-intro {
	display: grid;
}

html.dd-intro-skip #dd-intro,
html.dd-intro-done #dd-intro {
	display: none;
}

/* The resting state defined further down is the FINISHED logo, so that a
   broken intro.js still leaves the brand on screen. Until the timeline
   actually takes over, the stage has to be black: with the images now
   preloaded they are decoded before the deferred scripts run, and the lit
   logo would flash for a frame before the intro that reveals it starts.
   intro.js drops this class in the same task that arms the keyframes. */
html.dd-intro-hold #dd-intro .logo,
html.dd-intro-hold #dd-intro .halo {
	opacity: 0;
}

/* page is locked and the header logo slot stays empty while the intro plays —
   the docking animation hands the logo over at the end */
html.dd-intro-active body {
	overflow: hidden;
}

html.dd-intro-active .dd-header__logo-img {
	opacity: 0;
}

/* The consent banner must not land on top of the intro — it covered the lower
   right corner (including the "DiunaDent Clinic" signature) from the first
   second. Nothing external loads during the intro, so deferring it costs
   nothing; the banner appears the moment the intro hands over to the page. */
html.dd-intro-active #cmplz-cookiebanner-container {
	display: none;
}

#dd-intro .stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

/* warm halo behind the logo, swells with the light */
#dd-intro .halo {
	position: absolute;
	width: min(110vw, 1200px);
	aspect-ratio: 16 / 9;
	background: radial-gradient(closest-side, rgba(198, 116, 64, .11), rgba(198, 116, 64, .035) 55%, transparent 72%);
}

/* defaults below are the FINAL resting state — if JS ever fails,
   the page still shows the finished lit logo instead of nothing */

/* The window. Nothing is painted here — its only job is to be the thing
   that travels, and to be closeable: the exit shrinks its height to the
   proportions of the header mark so that the box which lands is the box
   which stays. Everything inside keeps its own geometry, so closing the
   window crops the signature band away instead of squashing the artwork.
   While the intro plays the two boxes are identical and this is inert. */
#dd-intro .logo {
	position: relative;
	width: min(80vw, 880px);
	aspect-ratio: 1073 / 651;
	overflow: hidden;
}

/* The artwork. Sized from its own width, never from the window's height,
   which is what lets the window close over it. Carries the mask (and so
   clips every layer that deliberately overflows it: the light pool, the
   sheen band). */
#dd-intro .lockup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1073 / 651;
	-webkit-mask: url(logo-mask.webp) center / contain no-repeat;
	mask: url(logo-mask.webp) center / contain no-repeat;
}

/* the client's actual render, baked metallic reflections included —
   the whole intro is this image emerging from black */
#dd-intro .metal {
	position: absolute;
	inset: 0;
	background: url(logo-copper.webp) center / contain no-repeat;
}

/* phase 1: only the upward-facing bevel rims catch a wandering light.
   Four independent fragments flare and DIE asynchronously (top-right
   first) before any letter face exists — the reference's flicker.
   One liquid filter on the parent wobbles them all organically. */
#dd-intro .rimglints {
	position: absolute;
	inset: 0;
	-webkit-mask: url(rim-mask.webp) center / contain no-repeat;
	mask: url(rim-mask.webp) center / contain no-repeat;
	filter: url(#liquid);
}

#dd-intro .rimglints > div {
	position: absolute;
	background: radial-gradient(closest-side,
		rgba(255, 228, 194, .95),
		rgba(255, 180, 120, .4) 58%,
		transparent 100%);
	opacity: 0;
}

#dd-intro .frag-na   { left: 58%; top: -6%; width: 38%; height: 58%; }
#dd-intro .frag-idot { left: 20%; top: -8%; width: 20%; height: 44%; }

#dd-intro .rimglints > .frag-idot {
	background: radial-gradient(ellipse 55% 60% at 36% 28%,
		rgba(255, 232, 200, .95),
		rgba(255, 176, 112, .3) 52%,
		transparent 78%);
}

#dd-intro .frag-d    { left: 0%;  top: 2%;  width: 24%; height: 58%; }
#dd-intro .frag-u    { left: 30%; top: 6%;  width: 22%; height: 62%; }

/* phase 2: a local pool of light reveals the lit render only where it
   stands — faces surface and sink back as it drifts (counter-transformed
   inner keeps the image registered while the mask window moves) */
#dd-intro .spotm {
	position: absolute;
	left: -20%;
	top: -30%;
	width: 140%;
	height: 160%;
	-webkit-mask-image: radial-gradient(ellipse 30% 40% at 50% 36%,
		#000, rgba(0, 0, 0, .5) 48%, transparent 70%);
	mask-image: radial-gradient(ellipse 30% 40% at 50% 36%,
		#000, rgba(0, 0, 0, .5) 48%, transparent 70%);
	filter: url(#liquid);
	opacity: 0;
}

#dd-intro .spotm-inner {
	position: absolute;
	left: 14.2857%;
	top: 18.75%;
	width: 71.4286%;
	height: 62.5%;
	background: url(logo-copper.webp) center / contain no-repeat;
	filter: brightness(1.42) saturate(1.08);
}

/* holds the tagline in darkness a beat longer than the main word */
#dd-intro .tagline-dim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 27%;
	background: var(--bg);
	opacity: 0;
}

/* --- Skip control ------------------------------------------------------ */

/* The intro runs for 7.6 s and starts on its own, which is precisely the
   situation WCAG 2.2.2 (Pause, Stop, Hide) asks to be escapable. Clicking
   anywhere on the overlay or pressing Escape ends it; this is the visible
   promise that it can be done, and the target for anyone who cannot click
   an unlabelled black rectangle on the strength of a hunch.

   Deliberately not deferred behind a delay: an escape hatch that shows up
   after the thing it escapes has been running for a while is not one. It
   is the first thing in the tab order, ahead of the theme's skip link,
   because it sits at the top of the body.

   Colours are opaque rather than mixed into the stage, so the contrast is
   the same 10.1:1 in every frame of an intro whose backdrop is by design
   changing brightness underneath it. */
#dd-intro .dd-intro__skip {
	position: absolute;
	right: max(1.25rem, env(safe-area-inset-right));
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0.7rem 1.4rem;
	border: 1px solid rgba(214, 178, 148, .38);
	border-radius: 999px;
	background: #0d0806;
	color: #d6b294;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	/* Resting state is visible. The fade is a courtesy the button can lose
	   (a global reduced-motion reset zeroes animation-duration) without
	   ever leaving a focusable control invisible. */
	animation: dd-intro-skip-in .8s ease-out;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

@keyframes dd-intro-skip-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#dd-intro .dd-intro__skip:hover {
	border-color: rgba(214, 178, 148, .72);
	background: #150d09;
	color: #f0d9c0;
}

#dd-intro .dd-intro__skip:focus-visible {
	outline: 2px solid #e8c9a8;
	outline-offset: 3px;
}

/* Once the exit is under way the control has nothing left to do, and a
   button that outlives its own action invites a second press at the one
   moment the geometry is mid-flight. */
html.dd-intro-exiting #dd-intro .dd-intro__skip {
	animation: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* faint recurring sheen once the intro settles */
#dd-intro .sheen-band {
	position: absolute;
	top: -18%;
	bottom: -18%;
	left: 0;
	width: 56%;
	background: linear-gradient(100deg,
		transparent 12%,
		rgba(255, 230, 202, .36) 46%,
		rgba(255, 247, 234, .55) 50%,
		rgba(255, 230, 202, .36) 54%,
		transparent 88%);
	mix-blend-mode: screen;
	transform: translateX(-120%);
}