.pinxel-intro {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 100000;
}

.pinxel-intro__panel {
	background: var(--pinxel-intro-bg);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
	width: 50%;
}

.pinxel-intro__panel--b {
	left: auto;
	right: 0;
}

.pinxel-intro__logo {
	max-width: min(220px, 40vw);
	position: relative;
	transition: opacity 300ms ease, transform 400ms ease;
	z-index: 1;
}

.pinxel-intro__logo-img {
	display: block;
	height: auto;
	width: 100%;
}

/* Fade: background and logo dissolve together, no movement */
.pinxel-intro--exit-fade {
	transition: opacity 600ms ease;
}

.pinxel-intro--exit-fade.is-exiting {
	opacity: 0;
}

.pinxel-intro--exit-fade.is-exiting .pinxel-intro__logo {
	opacity: 0;
}

/* Split in two: vertical halves slide apart sideways */
.pinxel-intro--exit-split.is-exiting .pinxel-intro__panel--a {
	transform: translateX(-100%);
}

.pinxel-intro--exit-split.is-exiting .pinxel-intro__panel--b {
	transform: translateX(100%);
}

.pinxel-intro--exit-split.is-exiting .pinxel-intro__logo {
	opacity: 0;
	transform: scale(0.94);
}

/* Split in two with a turn: the same straight slide-apart as "Dividir en
   dos", except the inner (seam) edge of each half morphs into a diagonal
   cut as it goes, while the outer edge (against the screen border) never
   moves and stays perfectly straight. Both cuts share the same slope, so
   they read as one parallel pair rather than two independent shapes. The
   shape is an exact clip-path polygon rather than an approximate rotation,
   so there is never a stray or jagged corner — only the deliberate
   diagonal edge. No 3D, no rotation, no fade: pure straight-line motion. */
.pinxel-intro--exit-split-rotate .pinxel-intro__panel {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), clip-path 800ms cubic-bezier(0.65, 0, 0.35, 1);
}

.pinxel-intro--exit-split-rotate.is-exiting .pinxel-intro__panel--a {
	clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%);
	transform: translateX(-100%);
}

.pinxel-intro--exit-split-rotate.is-exiting .pinxel-intro__panel--b {
	clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%);
	transform: translateX(100%);
}

.pinxel-intro--exit-split-rotate.is-exiting .pinxel-intro__logo {
	opacity: 0;
	transform: scale(0.94);
}

/* Iris: the background closes in a circle around the logo, like a camera shutter.
   The radius is set in vmax (not %) so it always covers every corner of the
   screen regardless of aspect ratio, and always closes down to a true point. */
.pinxel-intro--exit-iris .pinxel-intro__panel--b {
	display: none;
}

.pinxel-intro--exit-iris .pinxel-intro__panel--a {
	clip-path: circle(75vmax at 50% 50%);
	left: 0;
	transition: clip-path 800ms cubic-bezier(0.65, 0, 0.35, 1);
	width: 100%;
}

.pinxel-intro--exit-iris.is-exiting .pinxel-intro__panel--a {
	clip-path: circle(0vmax at 50% 50%);
}

.pinxel-intro--exit-iris.is-exiting .pinxel-intro__logo {
	opacity: 0;
}

/* Lock scrolling while the intro is visible. The exact scrollbar width is
   measured and compensated for in intro.js (as extra padding-right on body)
   rather than reserved here with scrollbar-gutter: that CSS property shrinks
   the viewport itself, and a fixed, inset:0 overlay is positioned against
   that same (now narrower) viewport — so the reserved strip ends up outside
   what the overlay can ever paint over, always showing the page's real,
   un-tinted background through it instead of the intro's color. */
html.pinxel-intro-lock,
html.pinxel-intro-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.pinxel-intro,
	.pinxel-intro__panel,
	.pinxel-intro__logo {
		transition: none !important;
	}
}