/* INTRO SEQUENCE
   Fullscreen white canvas with a single icon centered. JS (icons-intro.js)
   swaps the <img src> between the 7 piñata icons and applies rotate/scale
   via inline style. Base width of 6.07vw × scale 14 = 85vw, so the icon
   hands off to the CSS mask at exactly the right size. */

body.preview {
	background-color: white;
	overflow: hidden;
}

body.preview .intro-icons {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	pointer-events: none;
	background-color: white;
}

body.preview .intro-icons img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6.07vw;              /* 85vw ÷ 14 = exact handoff size */
	height: auto;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
}

/* Fade out the icon overlay after the animation completes. Not scoped to
   body.preview so the hidden state survives once .preview is removed. */
.intro-icons.is-done {
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}

.intro-icons.is-hidden {
	display: none;
}

/* MASK REVEAL
   The mask is applied to .page-reveal (the wrapper around header/content/footer)
   instead of body, so the .intro-icons overlay is NOT masked and continues to
   animate smoothly while the mask grows behind it. */

body.preview .page-reveal {
	-webkit-mask-image: url(/assets/images/mask.svg);
	mask-image: url(/assets/images/mask.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;

	-webkit-mask-size: 0;
	mask-size: 0;

	height: 100vh;
	overflow: hidden;

	-webkit-transition: -webkit-mask-size 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	transition: mask-size 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

body.preview.mask .page-reveal {
	-webkit-mask-size: 200vw;
	mask-size: 200vw;
}

/* COOKIE BANNER — hidden while the intro is running, fades in after */
cookie-though,
.cookie-though,
[class*="ct-banner"] {
	-webkit-transition: opacity 0.5s ease 0.2s;
	transition: opacity 0.5s ease 0.2s;
}

body.preview cookie-though,
body.preview .cookie-though,
body.preview [class*="ct-banner"],
body.preview [class^="cookie"]:not(.cookie-though) {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}