/* =====================================================================================================
   Holy Bagel: intro + hero entrance (SGO, 16/10/2026 v3, package BG). Loads after main.css (inc/polish.php).
   The intro (template-parts/header/loader.php, v5 'through the bagel', package HM): a big sesame bagel on the cream
   counter, its hole opens onto the page, and the camera pushes through the hole into the page (~0.9s). The JS drives the intro
   itself (Web Animations); this file holds its resting styles, the failsafe and the hero entrance that answers it.

   MOTION TOKENS: one table, in polish-story.css (:root --hbm-*, loaded on every page). The eases this file used to
   repeat there (--hbm-out/inout/soft/fall/up) had identical values and were removed 16/10/2026 (fix-wave verifier).
   ===================================================================================================== */
:root {
	--hbi-base: .05s;   /* when the hero entrance starts: now, or as the intro's window opens */
}
html.hbi-played { --hbi-base: .7s; }   /* the hero lines rise as the camera comes through the hole. HM3 (16/10/2026): .6s let the
   headline show half-cut inside the hole at ~640ms on wide screens; at .7s it rises once the hole has cleared the text. */

/* The legacy loading screen is retired (its markup is gone); make sure nothing of it can lock the page. */
html.hb-loading { overflow-x: clip; overflow-y: visible; }

/* ---- Intro: "through the bagel" (v5, package HM) -----------------------------------------------------------
   .hbi__cam is the camera: it scales and banks about the centre of the bagel's hole (50.59% / 50.12% of the picture).
   Inside it, from the back: the cream counter (a cream field with a round opening under the bagel), the plug that
   closes the opening until the peek, the bagel, and its zoom-blurred twin for the fast part of the push. The opening
   (radius .3 of the bagel) always sits under the crust, so the only window onto the page is the bagel's own hole. */
.hbi { display: none; }
html.hbi-on .hbi {
	--b: clamp(240px, 64vmin, 600px);
	position: fixed; inset: 0; z-index: 10000; display: block; overflow: hidden; contain: strict;
	/* it catches the skip tap itself, so that tap can never land on a link underneath */
	/* failsafe: gone at 2.4s even if the script never runs */
	animation: hbi-failsafe .2s linear 2.4s forwards;
}
.hbi.is-skip { animation: hbi-out .16s var(--hbm-soft) forwards !important; pointer-events: none; }
.hbi__cam { position: absolute; left: calc(50% - var(--b) * .5059); top: calc(44% - var(--b) * .5012); width: var(--b); height: var(--b); transform-origin: 50.59% 50.12%; will-change: transform; }
.hbi__counter { position: absolute; left: calc(var(--b) * .5059 - 160vmax); top: calc(var(--b) * .5012 - 160vmax); width: 320vmax; height: 320vmax;
	background: radial-gradient(circle at 50% 50%, rgba(234, 224, 217, 0) calc(var(--b) * .3), var(--hb-cream) calc(var(--b) * .3 + 1px)); }
.hbi__plug { position: absolute; left: calc(var(--b) * (.5059 - .31)); top: calc(var(--b) * (.5012 - .31)); width: calc(var(--b) * .62); height: calc(var(--b) * .62); border-radius: 50%; background: var(--hb-cream); will-change: opacity; }
.hbi__bagel, .hbi__blur { position: absolute; inset: 0; display: block; width: 100%; height: 100%; will-change: opacity; }
.hbi__blur { opacity: 0; }
.hbi__logo { position: absolute; left: calc(var(--b) * .5059 - var(--lw) / 2); top: calc(var(--b) * .985); --lw: clamp(150px, 22vmin, 200px); width: var(--lw); height: auto; aspect-ratio: 382 / 120; display: block; }
/* Before the script starts (the bagel still on its way) the stage is plain cream and still: nothing half-drawn. */
html.hbi-on:not(.hbi-go) :is(.hbi__bagel, .hbi__logo) { opacity: 0; }
@keyframes hbi-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes hbi-out { to { opacity: 0; } }

/* (v5) The header logo no longer waits for a flying logo: the intro's logo is printed on the counter and leaves with it. */

/* ---- Header + hero entrance (home). Plays as the window opens, or at once on later visits. ------------ */
/* main.css plays flat fades on the whole hero and header (body.hb-intro); replaced here by one staged entrance. The
   hero box and its picture never go transparent, so the LCP image paints at once (under the intro, if any). */
body.home .hb-hero, body.home .hb-hero__title, body.home .hb-hero__media { animation: none !important; }
body.home .hb-topbar { animation: hbh-fade .5s var(--hbm-soft) calc(var(--hbi-base) + .4s) both !important; }
body.home .hb-header__inner { animation: hbh-drop .7s var(--hbm-out) calc(var(--hbi-base) + .05s) both !important; }
html.hbi-played body.home .hb-header__inner { animation: hbh-fade .4s var(--hbm-soft) .62s both !important; }

body.home .hb-hero__line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
body.home .hb-hero__line > span { display: block; animation: hbh-line .72s var(--hbm-out) calc(var(--hbi-base) + var(--l, 0) * 80ms) both; }
body.home .hb-hero__text { animation: hbh-rise .6s var(--hbm-out) calc(var(--hbi-base) + .16s) both !important; }
body.home .hb-hero__actions > :nth-child(1) { animation: hbh-rise .6s var(--hbm-out) calc(var(--hbi-base) + .24s) both !important; }
body.home .hb-hero__actions > :nth-child(2) { animation: hbh-rise .6s var(--hbm-out) calc(var(--hbi-base) + .29s) both !important; }
body.home .hb-hero__paths { animation: hbh-rise .6s var(--hbm-out) calc(var(--hbi-base) + .34s) both; }
/* The picture settles from a slow push-in, started under the opening window so the camera seems to keep moving. */
body.home .hb-hero__poster { animation: hbh-settle 1.8s var(--hbm-out) calc(var(--hbi-base) - .3s) both; transform-origin: 50% 40%; }
html:not(.hbi-played) body.home .hb-hero__poster { animation-name: hbh-settle-soft; animation-duration: 1.5s; }
/* While the photo decodes, the card is warm brown, never pure black. */
body.home .hb-hero__media, body.home .hb-ready__media { background-color: var(--hb-ink-warm); }
/* The video takes over from the poster in a long, soft cross-fade instead of a cut. */
body.home .hb-hero__video { transition: opacity 1.4s cubic-bezier(.45, 0, .55, 1); }
body.home .hb-hero__media.has-video .hb-hero__poster { transition: visibility 0s 1.4s; }
body.home .hb-benefits__item { opacity: 1; transform: none; animation: hbh-rise .6s var(--hbm-out) calc(var(--hbi-base) + .3s + var(--i, 0) * 50ms) both !important; }
body.home .hb-ticker { animation: hbh-fade .6s var(--hbm-soft) calc(var(--hbi-base) + .4s) both; }
/* While the intro waits for its images, the entrance waits with it. */
html.hbi-on:not(.hbi-go) body.home :is(.hb-hero, .hb-hero *, .hb-benefits__item, .hb-topbar, .hb-header__inner, .hb-ticker) { animation-play-state: paused !important; }

@keyframes hbh-line { from { transform: translateY(108%); } }
@keyframes hbh-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hbh-drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes hbh-fade { from { opacity: 0; } }
@keyframes hbh-settle { from { transform: scale(1.12); } }
@keyframes hbh-settle-soft { from { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
	html.hbi-on .hbi { display: none; }
	body.home :is(.hb-hero__line > span, .hb-hero__text, .hb-hero__actions > *, .hb-hero__paths, .hb-hero__poster, .hb-hero__video, .hb-benefits__item, .hb-topbar, .hb-header__inner, .hb-ticker) { animation: none !important; opacity: 1; transform: none; }
}
html.hb-a11y-motion .hbi { display: none !important; }