/* ==========================================================================
   Homepage scene (replaces the fullscreen Slider Revolution module)
   Grid: desktop 1400×900, mobile (≤480px) 480×720, scaled to fit the viewport
   exactly like a fullscreen slider: s = min(1, vw/gridW, vh/gridH).
   Easing: power3.inOut ≈ cubic-bezier(.645,.045,.355,1), power4.inOut ≈ cubic-bezier(.77,0,.175,1)
   ========================================================================== */

.hilm-scene-page { background: var(--hilm-scene-bg-color, #16244e); overflow-x: hidden; }
.hilm-scene-main { padding: 0; }
.hilm-scene {
	--s: 1;
	--p3: cubic-bezier(.645, .045, .355, 1);
	--p4: cubic-bezier(.77, 0, .175, 1);
	position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden;
	background: var(--hilm-scene-bg-color, #16244e);
}
.admin-bar .hilm-scene { height: calc(100vh - 32px); }
.hs-bg {
	position: absolute; inset: 0; z-index: 0;
	background: var(--hilm-scene-bg) center center / cover no-repeat;
	opacity: 0; animation: hs-fade .3s linear .05s forwards;
}
.hs-stage {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	width: 1400px; height: 900px;
	transform: translate(-50%, -50%) scale(var(--s));
	transform-origin: 50% 50%;
}
.hs-layer {
	position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
	display: block; margin: 0; padding: 0;
}
.hs-layer img { display: block; width: 100%; height: 100%; }

/* Logo – masked slide down (frame_0 y:-100%, mask on, 3200ms) */
.hs-logo { z-index: 10; overflow: hidden; }
.hs-logo img { transform: translateY(-100%); animation: hs-mask-down 3.2s var(--p3) .01s forwards; }

/* Buttons – fade in (st 700 / sp 2500 / power4.inOut); hover: scale .95, white bg */
.hs-buttons { display: contents; }
.hs-btn {
	z-index: 20; height: auto; padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: 25px;
	background: rgba(0, 0, 0, 0); color: #fff;
	font: 400 15px/40px "Poppins", sans-serif; text-align: center; white-space: nowrap;
	opacity: 0; animation: hs-fade 2.5s var(--p4) .7s forwards;
	transition: transform .3s cubic-bezier(.45, 0, .55, 1), background-color .3s cubic-bezier(.45, 0, .55, 1), color .3s cubic-bezier(.45, 0, .55, 1), border-color .3s cubic-bezier(.45, 0, .55, 1);
}
.hs-btn:hover, .hs-btn:focus-visible { transform: scale(.95); background: #fff; color: var(--hilm-base, #16244e); border-color: rgba(255, 255, 255, .75); }

/* 7+ (or <6) buttons: two groups that hug the logo with the same 35px clearance as the original row */
.hs-btn-group { position: absolute; top: 65px; z-index: 20; display: flex; align-items: center; gap: 15px; width: 464.5px; height: 42px; }
.hs-btn-left { left: 0; justify-content: flex-end; }
.hs-btn-right { left: 935.5px; justify-content: flex-start; }
.hs-btn.hs-btn-flow { position: relative; left: auto; top: auto; width: auto; height: auto; min-width: 100px; padding: 0 16px; }

/* Language switcher (Polylang): top right corner of the scene, fades in with the buttons */
.hilm-lang-scene { position: absolute; top: 18px; right: 22px; z-index: 40; opacity: 0; animation: hs-fade 2.5s var(--p4) .7s forwards; }
.hilm-lang-scene ul { padding: 3px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 25px; }
.hilm-lang-scene li + li::before { display: none; }
.hilm-lang-scene a, .hilm-lang-scene .is-current > span { display: block; padding: 8px 13px; border-radius: 25px; color: #fff; }
.hilm-lang-scene a { opacity: .85; transition: background-color .3s, color .3s, opacity .3s; }
.hilm-lang-scene a:hover, .hilm-lang-scene a:focus-visible { opacity: 1; background: rgba(255, 255, 255, .18); color: #fff; }
.hilm-lang-scene .is-current > span { background: #fff; color: var(--hilm-base, #16244e); }

/* Faint collage outline (o:0.05, st 1000 / sp 1000) */
.hs-ghost { z-index: 24; opacity: 0; animation: hs-ghost 1s var(--p3) 1s forwards; pointer-events: none; }
.hs-ghost img { height: auto; }

/* Collage photos – white block wipe (st 2000 / sp 3000 / power4.inOut), grayscale, colour on hover */
.hs-photo { z-index: 30; overflow: hidden; }
.hs-photo img {
	object-fit: cover; filter: grayscale(1); opacity: 0;
	animation: hs-show 1.5s steps(1, end) 2s forwards;
	transition: filter .3s ease;
}
.hs-photo:hover img { filter: grayscale(0); }
.hs-photo::after {
	content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; pointer-events: none;
	transform: scaleY(0); animation: 3s var(--p4) 2s both;
}
.hs-dir-top::after { animation-name: hs-block-top; }
.hs-dir-bottom::after { animation-name: hs-block-bottom; }
.hs-dir-left::after { animation-name: hs-block-left; transform: scaleX(0); }
.hs-dir-right::after { animation-name: hs-block-right; transform: scaleX(0); }

/* Shelf – rises from below (st 1000 / sp 3000) */
.hs-wall { z-index: 8; height: auto; transform: translateY(1100px); animation: hs-rise 3s var(--p3) 1s forwards; pointer-events: none; }
.hs-wall img { height: auto; }

/* Books – rise from below (sp 3200), hover scale 1.1 from bottom centre, click opens modal */
.hs-books { display: contents; }
.hs-book {
	z-index: 12; border: 0; background: none; cursor: pointer;
	transform: translateY(300px); animation: hs-rise 3.2s var(--p3) .01s forwards;
}
.hs-book img { transform-origin: 50% 100%; transition: transform .3s var(--p3); }
.hs-book:hover img, .hs-book:focus-visible img { transform: scale(1.1); }
.hs-book:focus-visible { outline: none; }

@keyframes hs-fade { to { opacity: 1; } }
@keyframes hs-ghost { to { opacity: .05; } }
@keyframes hs-show { to { opacity: 1; } }
@keyframes hs-mask-down { to { transform: translateY(0); } }
@keyframes hs-rise { to { transform: translateY(0); } }
@keyframes hs-block-top {
	0% { transform: scaleY(0); transform-origin: 50% 100%; }
	50% { transform: scaleY(1); transform-origin: 50% 100%; }
	50.01% { transform: scaleY(1); transform-origin: 50% 0; }
	100% { transform: scaleY(0); transform-origin: 50% 0; }
}
@keyframes hs-block-bottom {
	0% { transform: scaleY(0); transform-origin: 50% 0; }
	50% { transform: scaleY(1); transform-origin: 50% 0; }
	50.01% { transform: scaleY(1); transform-origin: 50% 100%; }
	100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
@keyframes hs-block-left {
	0% { transform: scaleX(0); transform-origin: 100% 50%; }
	50% { transform: scaleX(1); transform-origin: 100% 50%; }
	50.01% { transform: scaleX(1); transform-origin: 0 50%; }
	100% { transform: scaleX(0); transform-origin: 0 50%; }
}
@keyframes hs-block-right {
	0% { transform: scaleX(0); transform-origin: 0 50%; }
	50% { transform: scaleX(1); transform-origin: 0 50%; }
	50.01% { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- Book modal ---------- */
.hs-modal {
	position: fixed; inset: 0; z-index: 9700;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .85);
	opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s;
}
.hs-modal.open { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }
.hs-modal-inner {
	--ms: 1;
	position: relative; width: 450px; height: 300px; transform: scale(var(--ms));
}
.hs-frame { position: absolute; left: 25px; width: 400px; height: 23px; opacity: 0; }
.hs-frame-top { top: 0; }
.hs-frame-bottom { bottom: 0; transform: scaleY(-1); }
.hs-close {
	position: absolute; top: 0; left: 475px; width: 25px; height: 25px; padding: 0;
	border: 0; background: none; cursor: pointer; opacity: 0;
}
.hs-close img { width: 25px; height: 25px; display: block; }
.hs-book-panel { position: absolute; inset: 0; }
.hs-book-title {
	position: absolute; left: -100px; right: -100px; top: 77px; margin: 0;
	font: 500 17px/25px "Poppins", sans-serif; color: #fff; text-align: center; white-space: nowrap; opacity: 0;
}
.hs-mbtn {
	position: absolute; left: 100px; width: 250px; padding: 0 25px;
	border: 1px solid var(--hilm-accent, #ce9354); border-radius: 25px; background: rgba(0, 0, 0, 0);
	font: 500 16px/40px "Poppins", sans-serif; color: var(--hilm-accent, #ce9354); text-align: center; white-space: nowrap; opacity: 0;
	transition: background-color .3s cubic-bezier(.45, 0, .55, 1), color .3s cubic-bezier(.45, 0, .55, 1);
}
.hs-mbtn:nth-of-type(1) { top: 129px; }
.hs-mbtn:nth-of-type(2) { top: 189px; }
.hs-mbtn:hover, .hs-mbtn:focus-visible { background: var(--hilm-accent, #ce9354); color: #fff; }
.hs-modal.open .hs-frame-top, .hs-modal.open .hs-book-title { animation: hs-drop 3s var(--p3) forwards; }
.hs-modal.open .hs-frame-bottom { animation: hs-drop-flip 3s var(--p3) forwards; }
.hs-modal.open .hs-mbtn { animation: hs-lift 3s var(--p3) forwards; }
.hs-modal.open .hs-close { animation: hs-fade 5s var(--p3) forwards; }
@keyframes hs-drop { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
@keyframes hs-drop-flip { from { opacity: 0; transform: translateY(-50px) scaleY(-1); } to { opacity: 1; transform: scaleY(-1); } }
@keyframes hs-lift { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

/* ---------- Mobile grid (≤480px): 480×720 ---------- */
@media (max-width: 480px) {
	.hs-stage { width: 480px; height: 720px; }
	.hs-layer { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: var(--mw, var(--w)); height: var(--mh, var(--h)); }
	.hs-btn { height: auto; padding: 0 7px; font-size: 14px; line-height: 25px; }
	.hs-btn-group { left: 0; width: 480px; height: 27px; gap: 8px; justify-content: center; }
	.hs-btn-left { top: 171px; }
	.hs-btn-right { top: 211px; }
	.hs-btn.hs-btn-flow { padding: 0 7px; min-width: 100px; }
	.hs-wall, .hs-ghost { height: auto; }
	.hilm-lang-scene { top: 10px; right: 12px; }
	.hilm-lang-scene a, .hilm-lang-scene .is-current > span { padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.hs-layer, .hs-layer img, .hs-photo::after, .hs-bg, .hilm-lang-scene { animation: none !important; opacity: 1; transform: none; }
	.hs-photo::after { display: none; }
	.hs-ghost { opacity: .05; }
}

/* Start the timeline only once the page has loaded (like the slider did). */
.hilm-scene.is-waiting .hs-bg,
.hilm-scene.is-waiting .hs-layer,
.hilm-scene.is-waiting .hs-btn,
.hilm-scene.is-waiting .hilm-lang-scene,
.hilm-scene.is-waiting .hs-layer img,
.hilm-scene.is-waiting .hs-photo::after { animation-play-state: paused; }