/* IDR Hero Roll: the homepage top row (cube + Katherine) rolls like a vertical drum to three
 * full-width skyline slides and back. Prefix idrhero- (banner: idrroll- / #idrRoll; cube: idr- / #idrCube).
 * Nothing is moved in the page: the existing two-column container stays in normal flow (so the
 * section keeps its exact footprint) and is face 0; the slides sit absolutely over the same box.
 * 3D styles exist only while a roll is running (.is-rolling); at rest every face is untransformed,
 * so the cube and the video render exactly as before. Each roll animates two faces: the outgoing one
 * turns up and away (rotateX 0 -> 90deg), the incoming one comes up from below (-90deg -> 0), with
 * the cube's easing and 2.8 s duration, like idr-rolling-banner. The shape dividers are not touched.
 * Phones (<768px, where the columns stack) get no slides and no roll at all. */

.idrhero-slide {
	position: absolute;
	top: var(--idrhero-top, 0);
	left: var(--idrhero-left, 0);
	width: var(--idrhero-w, 100%);
	height: var(--idrhero-h, 100%);
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 14px;
	border: 3px solid #6B0F9C;
	box-shadow: 0 0 22px rgba(204, 68, 170, 0.35);
	background: #0d0118;
	visibility: hidden;
}
.idrhero-slide .idrhero-slide-art {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
/* v1.2.0: the 2:1 artwork fills the slide ("cover", centred): about 3px off top and bottom at 1366, a
 * light side crop at 1024, and 58% of the width at 768, where the title (middle 29-71%) still fits but
 * the side landmarks are cut. The blurred backdrop (v1.1.0, for the old 2.5:1 art shown whole) is kept
 * under the image; with cover it is never visible. */
.idrhero-slide .idrhero-slide-bg {
	position: absolute;
	inset: -40px;
	background: #0d0118 center / cover no-repeat;
	filter: blur(22px) brightness(0.45) saturate(1.2);
}
/* Specific enough to beat Elementor's global `.elementor img { height: auto; max-width: 100% }`, which
 * would otherwise leave the image at its natural height, pinned to the top of the slide. */
.idrhero .idrhero-slide .idrhero-slide-art img {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.idrhero-slide.is-front,
.idrhero-face.is-moving {
	visibility: visible;
}
/* The home view, rolled away: invisible but still in flow, so nothing on the page moves. */
.idrhero-home.is-away:not(.is-moving) {
	visibility: hidden;
}

/* While rolling: perspective (calmer than the banner's 1400px for this taller face) and a clip at
 * the section's own top and bottom edges only, so the turning face can't spill over the header or
 * the clock strip. Not clipped sideways: at 768px the cube already overflows its column. */
.idrhero.is-rolling {
	perspective: 2400px;
	perspective-origin: var(--idrhero-ox, 50%) var(--idrhero-oy, 50%);
	clip-path: inset(0 -400px);
}
.idrhero.is-rolling .idrhero-face.is-moving {
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}
.idrhero-face.is-anim {
	transition: transform 2.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.idrhero-face.is-fade {
	transition: opacity 0.8s ease;
}

/* Safari only (set by idr-hero.js): the video is hidden during a roll and a still frame is shown. */
.idrhero-still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.idrhero-video-still {
	visibility: hidden !important;
}

@media (max-width: 767px) {
	.idrhero-slide { display: none !important; }
	.idrhero-home.is-away:not(.is-moving) { visibility: visible; }
}