/* ==========================================================================
   Homepage engine styles (assets/js/pages/home.js).
   1. .hh  hero — scroll-scrubbed frame sequence
   2. .hs  slide stage — full-screen slides, one step per gesture, shared phone
   Slide content styles: home-a.css / home-b.css (phone component: home-a.css).
   Without JS (or ?static) everything stacks as plain 100svh sections.
   ========================================================================== */

/* =====================================================================
   1. HERO
   ===================================================================== */
.hh {
	position: relative; z-index: 5;
	height: 260vh; height: 260svh;       /* scroll distance of the zoom scrub (the head turn autoplays) */
	margin-bottom: -100vh; margin-bottom: -100svh; /* last hero screen overlaps the first slide → dissolve */
	pointer-events: none;
}
.hh__sticky {
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	overflow: hidden;
	opacity: calc(1 - var(--hh-fade, 0));
	background: #fff;
	pointer-events: auto;
}
.hh.is-past .hh__sticky { visibility: hidden; }
.hh__media, .hh__media picture, .hh__poster, .hh__media canvas {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
}
.hh__poster { object-fit: cover; object-position: 50% 45%; }
.hh__media canvas { display: block; }

/* Hero texts (home-hero.html) sit on top and fade as the zoom begins */
.hh .home-hero { position: absolute; inset: 0; z-index: 2; opacity: var(--hh-text, 1); }
.hh .home-hero [data-in] { opacity: 0; transform: translate3d(0, 24px, 0); }
.hh.is-ready .home-hero [data-in] {
	opacity: 1; transform: none;
	transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
	transition-delay: calc(.5s + var(--in-i, 0) * .15s);
}
.hh .home-hero [data-type][data-in] { opacity: 1; transform: none; } /* typing is its entrance */
.hh .home-hero .sv-type { --type-start: .5s; }
.hh.is-ready .home-hero .sv-btn { animation: sv-btn-rise .75s var(--ease-out) backwards; animation-delay: 1.4s; }

/* Splash: logo on white while the first frames load */
.hh__splash {
	position: absolute; inset: 0; z-index: 30;
	display: grid; place-items: center;
	background: #fff;
	transition: opacity .7s ease, visibility 0s linear .7s;
}
.hh__splash .sv-logo { width: clamp(160px, 14vw, 260px); }
.hh.is-ready .hh__splash { opacity: 0; visibility: hidden; }
html:has(.hh:not(.is-ready)) .sv-header { opacity: 0; }
.sv-header { transition: opacity .6s ease, background-color .4s, box-shadow .4s, transform .5s var(--ease-out); }

/* Header stays transparent over the hero */
html:has(.hh:not(.is-past)) .sv-header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Fallback / ?static: a single screen with the poster and texts */
.hh.hh-static { height: auto; margin-bottom: 0; }
.hh.hh-static .hh__sticky { position: relative; opacity: 1; }
.hh.hh-static canvas { display: none; }
.hh.hh-static .home-hero [data-in] { opacity: 1; transform: none; }

/* =====================================================================
   2. SLIDE STAGE
   ===================================================================== */
.hs { position: relative; z-index: 1; }
.hs__viewport { position: relative; }

.hs.hs-on { height: calc(var(--hs-steps, 1) * var(--hs-vh, 100svh)); }
.hs.hs-on .hs__viewport {
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	overflow: hidden;
	background: rgba(20, 24, 52, 0); /* light slides: the site background video shows through */
	transition: background-color .9s var(--ease-in-out);
}
.hs.hs-on[data-theme="dark"] .hs__viewport { background: rgba(20, 24, 52, 1); }

/* Slides cross-fade */
.hs.hs-on .hs-slide {
	position: absolute; inset: 0; z-index: 2;
	opacity: 0; visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
.hs.hs-on .hs-slide.is-active {
	z-index: 3; opacity: 1; visibility: visible;
	transition: opacity .7s ease .2s, visibility 0s;
}

/* Entrance choreography: [data-in="n"] in order, [data-in-from] = big words / photos sliding in */
.hs.hs-on .hs-slide [data-in] {
	opacity: 0; transform: translate3d(0, 28px, 0);
	transition: opacity .3s ease, transform .3s ease;
}
.hs.hs-on .hs-slide.is-active [data-in] {
	opacity: 1; transform: none;
	transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
	transition-delay: calc(var(--hs-delay, .3s) + var(--in-i, 0) * .14s);
}
.hs.hs-on .hs-slide [data-in-from] {
	opacity: 0; transform: translate3d(-55vw, 0, 0);
	transition: opacity .3s ease, transform .3s ease;
}
.hs.hs-on .hs-slide [data-in-from="right"] { transform: translate3d(55vw, 0, 0); }
.hs.hs-on .hs-slide.is-active [data-in-from] {
	opacity: 1; transform: none;
	transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
	transition-delay: calc(var(--hs-delay, .3s) + .1s);
}

/* Typewriter text + buttons rising through a mask line (prototype) */
.hs.hs-on .hs-slide .sv-type { --type-start: calc(var(--hs-delay, .3s) + var(--in-i, 0) * .14s); }
.hs.hs-on .hs-slide [data-type][data-in] { opacity: 1; transform: none; }
.hs.hs-on .hs-slide.is-active .sv-btn {
	animation: sv-btn-rise .75s var(--ease-out) backwards;
	animation-delay: calc(var(--hs-delay, .3s) + var(--in-i, 0) * .14s + .15s);
}

/* ---------- Shared phone (component styles: home-a.css) ---------- */
.hs.hs-on .home-phone {
	position: absolute; inset: 0; z-index: 4;
	height: auto; margin: 0;
	pointer-events: none;
	transition: visibility 0s, opacity .2s ease;
}
.hs:not(.hs-on) .home-phone { display: none; }
/* Only on its own slides: before ("") and after ("gone") it's hidden once its 1s move has finished. */
.hs.hs-on[data-phone=""] .home-phone,
.hs.hs-on[data-phone="gone"] .home-phone,
.hs.hs-on:not([data-phone]) .home-phone { visibility: hidden; opacity: 0; transition: visibility 0s linear 1s, opacity .3s ease .7s; }
/* Screen wallpaper fills the whole display */
.hs .home-phone__display { background-size: cover; background-position: 35% center; }

/* ---------- Header over the stage ---------- */
html.hs-in-stage .sv-header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.hs-in-stage .sv-header.is-scrolled .sv-header__inner,
html:has(.hh:not(.is-past)) .sv-header.is-scrolled .sv-header__inner { padding-top: 43px; padding-bottom: 0; }
html.hs-in-stage .sv-header.is-scrolled .sv-header__logo .sv-logo,
html:has(.hh:not(.is-past)) .sv-header.is-scrolled .sv-header__logo .sv-logo { width: 170px; }
.sv-header__logo img, .sv-burger, .sv-burger__lines i { transition: filter .6s ease, border-color .6s ease, background-color .6s ease, transform .45s var(--ease-out), opacity .3s; }
html.hs-dark .sv-header__logo img { filter: brightness(0) invert(1); }
html.hs-dark .sv-burger { border-color: #fff; }
html.hs-dark .sv-burger__lines i { background: #fff; }
@media (max-width: 900px) {
	html.hs-in-stage .sv-header.is-scrolled .sv-header__inner,
	html:has(.hh:not(.is-past)) .sv-header.is-scrolled .sv-header__inner { padding-top: 24px; }
	html.hs-in-stage .sv-header.is-scrolled .sv-header__logo .sv-logo,
	html:has(.hh:not(.is-past)) .sv-header.is-scrolled .sv-header__logo .sv-logo { width: 139px; }
}

/* ---------- Fallback: stacked sections ---------- */
.hs:not(.hs-on) .hs-slide { position: relative; min-height: 100vh; min-height: 100svh; }
.hs:not(.hs-on) .hs-slide--empty { display: none; }

/* ---------- Phone intro: Seelavita → MSB transition ----------
   Seelavita word + slogan sink back (scale down, blur, fade) while the phone shrinks;
   "MSB" letters rise one by one through a mask line, then the paragraph lines follow. */
.hs.hs-on .home-phone__intro { transform-origin: 50% 30%; transition: opacity .55s ease, transform .8s var(--ease-out), filter .6s ease; }
.hs.hs-on:is([data-phone="msb"], [data-phone="msb-text"], [data-phone="empty"]) .home-phone__intro { opacity: 0; transform: translate3d(0, calc(-30 * var(--u)), 0) scale(.82); filter: blur(10px); }
.hs.hs-on .home-phone__msb { opacity: 1; direction: ltr; unicode-bidi: isolate; } /* per-letter spans must stay M-S-B in RTL */
.hs.hs-on .home-phone__msb span {
	display: inline-block;
	opacity: 0; transform: translate3d(0, 60%, 0); clip-path: inset(0 0 100% 0); filter: blur(6px);
	transition: opacity .3s ease, transform .4s ease, clip-path .4s ease, filter .3s ease;
}
.hs.hs-on:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__msb span {
	opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none;
	transition: opacity .7s var(--ease-out), transform .9s cubic-bezier(.16, 1, .3, 1), clip-path .9s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
}
.hs.hs-on:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__msb span:nth-child(1) { transition-delay: .45s; }
.hs.hs-on:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__msb span:nth-child(2) { transition-delay: .55s; }
.hs.hs-on:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__msb span:nth-child(3) { transition-delay: .65s; }
.hs.hs-on .home-phone__desc { opacity: 1; transform: none; }
.hs.hs-on .home-phone__desc > * { opacity: 0; transform: translate3d(0, calc(24 * var(--u)), 0); filter: blur(4px); transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.hs.hs-on[data-phone="msb-text"] .home-phone__desc > * { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .6s ease; }
.hs.hs-on[data-phone="msb-text"] .home-phone__desc > :nth-child(1) { transition-delay: .15s; }
.hs.hs-on[data-phone="msb-text"] .home-phone__desc > :nth-child(2) { transition-delay: .3s; }
.hs.hs-on[data-phone="msb-text"] .home-phone__desc > :nth-child(3) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
	.hs.hs-on .home-phone__msb span, .hs.hs-on .home-phone__desc > * { filter: none; clip-path: none; }
}