/*
 * Opening animation on the home page, after the example site: a counter runs to 100% while
 * painted dolls rain down and pile up (intro.js, matter.js physics), a lagoon-blue panel with
 * the doll pattern sweeps up, and the hero rises with the 3D dolls flying in (pegdoll.js).
 * Only active while <html> has .pd-opening-on (set in <head> once per browser session,
 * never with reduced motion).
 */

.pd-opening {
	display: none;
}

html.pd-opening-on {
	overflow: hidden;
	/* Fail-safe if the script never runs. */
	animation: pd-opening-unlock 0s 12s forwards;
}

.pd-opening-on .pd-opening {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--pd-papier, #fbf7f2);
	color: var(--pd-koraal, #b04a26);
	cursor: progress;
	animation: pd-opening-failsafe 0s 12s forwards;
}

.pd-opening::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--pd-grain);
	opacity: 0.5;
	pointer-events: none;
}

/* --- counter (behind the pile, like the example) ------------------- */

.pd-opening__count {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.3em;
	text-align: center;
}

.pd-opening__num {
	font-family: var(--pd-display, "Raleway", sans-serif);
	font-size: clamp(84px, 19vmin, 220px);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.pd-opening__tag {
	font-family: var(--pd-script, "Caveat", cursive);
	font-size: clamp(20px, 3.2vmin, 30px);
	color: var(--pd-kraft, #245360);
}

/* --- the pile of dolls ----------------------------------------------- */

.pd-opening__pile {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.pd-opening__pile img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: none;
	height: auto;
	filter: drop-shadow(0 6px 10px rgba(20, 40, 46, 0.22));
	will-change: transform;
}

/* --- panel ----------------------------------------------------------- */

.pd-opening__curtain {
	--tear: var(--pd-tear-paper);
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--pd-kraft, #245360);
	background-image: var(--pd-pattern), var(--pd-grain);
	background-size: 200px 200px, auto;
	translate: 0 calc(100% + 60px);
}

.pd-opening__curtain::before,
.pd-opening__curtain::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 56px;
	background-color: var(--pd-kraft, #245360);
	-webkit-mask: var(--tear) center / 100% 100% no-repeat;
	mask: var(--tear) center / 100% 100% no-repeat;
}

.pd-opening__curtain::before {
	bottom: calc(100% - 1px);
}

.pd-opening__curtain::after {
	top: calc(100% - 1px);
	scale: 1 -1;
}

.pd-opening.is-covering .pd-opening__curtain {
	translate: 0 0;
	transition: translate 0.75s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Once covered, the page shows through behind the panel as it leaves upwards. */
.pd-opening.is-revealing {
	background: transparent;
	pointer-events: none;
}

.pd-opening.is-revealing::before,
.pd-opening.is-revealing .pd-opening__pile,
.pd-opening.is-revealing .pd-opening__count {
	visibility: hidden;
}

.pd-opening.is-revealing .pd-opening__curtain {
	translate: 0 calc(-100% - 60px);
	transition: translate 0.95s cubic-bezier(0.65, 0, 0.25, 1);
}

/* --- hero entrance (the 3D dolls themselves fly in from pegdoll.js) -- */

.pd-opening-on:not(.pd-opening-reveal) .pd-header {
	opacity: 0;
	translate: 0 -24px;
}

.pd-opening-on:not(.pd-opening-reveal) .pd-slider__shape {
	translate: 0 45%;
}

.pd-opening-on:not(.pd-opening-reveal) .pd-slider__badge {
	opacity: 0;
	rotate: -40deg;
}

.pd-opening-on:not(.pd-opening-reveal) .pd-slider__caption,
.pd-opening-on:not(.pd-opening-reveal) .pd-slider__arrow,
.pd-opening-on:not(.pd-opening-reveal) .pd-slider__prompt {
	opacity: 0;
	translate: 0 24px;
}

.pd-opening-reveal .pd-header {
	transition: opacity 0.7s 0.6s ease, translate 0.8s 0.6s var(--pd-ease);
}

.pd-opening-reveal .pd-slider__shape {
	transition: translate 1.1s 0.15s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.pd-opening-reveal .pd-slider__badge {
	transition: opacity 0.8s 0.6s ease, rotate 1.4s 0.6s var(--pd-ease);
}

.pd-opening-reveal .pd-slider__caption,
.pd-opening-reveal .pd-slider__arrow,
.pd-opening-reveal .pd-slider__prompt {
	transition: opacity 0.7s 1s ease, translate 0.8s 1s var(--pd-ease);
}

@keyframes pd-opening-failsafe {
	to { visibility: hidden; }
}

@keyframes pd-opening-unlock {
	to { overflow: visible; }
}