/* HDKN Immersif 2 : ouverture « deux portes » et parcours au scroll, charte Bel Élan.
   Sans la classe hf-imm-on (animations réduites, économiseur de données), tout reste lisible :
   les portes sont des liens, les parcours des écrans fixes avec leurs textes empilés. */

:root {
	--hf-head: 0px;
	--hf-plum: #2E1420;
	--hf-deep: #1F0C15;
	--hf-cream: #F4EDE1;
	--hf-verm: #E8452C;
	--hf-verm2: #F26B4F;
	--hf-olive: #6B6B2E;
	--hf-ease: cubic-bezier(.76, 0, .24, 1);
	--hf-out: cubic-bezier(.16, 1, .3, 1);
	--hf-disp: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
	--hf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html, body { overflow-x: clip; }

.hf-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Fondu de bascule entre deux parcours */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: var(--hf-deep);
	opacity: 0;
	pointer-events: none;
	transition: opacity .26s ease;
}
html.hf-swap body::after { opacity: 1; }

/* ---------- Mots qui montent, coup de pinceau ---------- */

.hf-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0 .09em .08em 0;
	margin: 0 -.09em -.08em 0;
}
.hf-w > span { display: inline-block; }

.hf-nb { display: inline-block; white-space: nowrap; }

.hf-brush {
	position: relative;
	display: inline-block;
	isolation: isolate;
	white-space: nowrap;
}
.hf-brush .hf-w { position: relative; z-index: 1; }
.hf-brush__svg {
	position: absolute;
	z-index: 0;
	left: -5%;
	width: 110%;
	bottom: -.02em;
	height: .46em;
	overflow: visible;
	pointer-events: none;
}
.hf-brush__svg path {
	fill: none;
	stroke: var(--hf-verm);
	stroke-width: .3em;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	opacity: .95;
}

/* Animé seulement quand la séquence est active */
.hf-imm-on .hf-w > span {
	transform: translateY(108%);
	transition: transform .5s cubic-bezier(.7, 0, .84, 0);
}
.hf-imm-on .hf-brush__svg path {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset .35s ease;
}
.hf-imm-on .hf-entree.is-in .hf-w > span,
.hf-imm-on .hf-step.is-active .hf-w > span {
	transform: none;
	transition: transform 1.15s var(--hf-out) calc(var(--i, 0) * 55ms + .08s);
}
.hf-imm-on .hf-entree.is-in .hf-brush__svg path,
.hf-imm-on .hf-step.is-active .hf-brush__svg path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s var(--hf-out) calc(var(--i, 0) * 55ms + .55s);
}

/* ====================================================================
 * Ouverture : les deux portes
 * ================================================================== */

.e-con.hf-entree {
	position: relative;
	isolation: isolate;
	min-height: calc(100svh - var(--hf-head));
	overflow: hidden;
}

.hf-entree .hf-display .elementor-heading-title {
	font-family: var(--hf-disp) !important;
	font-weight: 800 !important;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(50px, 8.2vw, 150px) !important;
	line-height: .84 !important;
	letter-spacing: -.012em !important;
	color: var(--hf-plum);
}
.hf-entree .hf-lead { max-width: 380px !important; }

/* Ordinateur : l'ouverture tient dans l'écran, les portes prennent la hauteur restante */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
	.e-con.hf-entree { height: calc(100svh - var(--hf-head)); min-height: 620px; }
	.hf-entree > .hf-doors { flex: 1 1 auto !important; min-height: 0; }
	.hf-entree .e-con.hf-door { min-height: 0; }
	.hf-entree .hf-display .elementor-heading-title { font-size: clamp(48px, min(7.4vw, 11.5vh), 150px) !important; }
}

.hf-doors { align-items: stretch !important; }

.e-con.hf-door {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	cursor: pointer;
	flex: 1 1 0 !important;
	width: auto !important;
	min-height: clamp(300px, 50svh, 640px);
	border-radius: 28px;
	color: var(--hf-cream);
	transition: flex-grow .9s var(--hf-ease), filter .6s ease, opacity 1s ease, transform 1.2s var(--hf-out);
}
.hf-door__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--hf-deep);
	background-size: cover;
	background-position: center;
	transform: scale(1.07);
	transition: transform 1.6s var(--hf-out);
}
.hf-door__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hf-door::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(31, 12, 21, .1) 0%, rgba(31, 12, 21, .42) 42%, rgba(31, 12, 21, .92) 100%),
		linear-gradient(90deg, rgba(31, 12, 21, .55) 0%, rgba(31, 12, 21, 0) 70%);
}
.hf-door::after {
	position: absolute;
	top: 26px;
	left: 30px;
	font-family: var(--hf-disp);
	font-weight: 800;
	font-style: italic;
	font-size: 22px;
	letter-spacing: .06em;
	color: var(--hf-cream);
	opacity: .8;
}
.hf-door--part::after { content: "01"; }
.hf-door--pro::after { content: "02"; }

.hf-door h2.elementor-heading-title {
	font-family: var(--hf-disp) !important;
	font-weight: 800 !important;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(40px, 5vw, 92px) !important;
	line-height: .86 !important;
	letter-spacing: -.01em !important;
	color: var(--hf-cream) !important;
	text-shadow: 0 2px 30px rgba(31, 12, 21, .55);
}
.hf-door .hf-eyebrow .elementor-heading-title { color: var(--hf-verm2) !important; text-shadow: 0 1px 14px rgba(31, 12, 21, .7); }
.hf-door .elementor-widget-text-editor { color: rgba(244, 237, 225, .92) !important; max-width: 430px !important; text-shadow: 0 1px 16px rgba(31, 12, 21, .8); }
/* La lumière du ring est très forte : on la tempère derrière les textes */
.hf-door--part .hf-door__media { filter: brightness(.78) contrast(1.06); }
.hf-door .elementor-button {
	background: var(--hf-cream) !important;
	border-color: var(--hf-cream) !important;
	color: var(--hf-plum) !important;
	border-radius: 999px !important;
	transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--hf-out);
}
.hf-door .elementor-button svg, .hf-door .elementor-button i { fill: currentColor; color: currentColor; transition: transform .5s var(--hf-out); }
.hf-door:hover .elementor-button,
.hf-door .elementor-button:focus-visible {
	background: var(--hf-verm) !important;
	border-color: var(--hf-verm) !important;
	color: var(--hf-cream) !important;
}
.hf-door:hover .elementor-button svg, .hf-door:hover .elementor-button i { transform: translateX(4px); }
.hf-door:focus-within { outline: 3px solid var(--hf-verm); outline-offset: 4px; }

.hf-door .hf-grain { border-radius: inherit; }

@media (hover: hover) and (min-width: 768px) {
	.hf-doors:hover .hf-door { flex-grow: .8 !important; }
	.hf-doors:hover .hf-door:hover { flex-grow: 1.5 !important; }
	.hf-door__media { transition: transform 1.6s var(--hf-out), filter .6s ease; }
	.hf-doors:hover .hf-door:not(:hover) .hf-door__media { filter: saturate(.6) brightness(.7); }
	.hf-door:hover .hf-door__media { transform: scale(1); }
}

/* Arrivée : le titre monte mot par mot, les portes s'élèvent */
.hf-imm-on .hf-entree .hf-door { opacity: 0; transform: translateY(48px); }
.hf-imm-on .hf-entree.is-in .hf-door { opacity: 1; transform: none; transition-delay: 0s, 0s, .4s, .4s; }
.hf-imm-on .hf-entree.is-in .hf-door--pro { transition-delay: 0s, 0s, .55s, .55s; }
.hf-imm-on .hf-entree .hf-lead, .hf-imm-on .hf-entree .hf-kicker { opacity: 0; transition: opacity 1s ease .5s; }
.hf-imm-on .hf-entree.is-in .hf-lead, .hf-imm-on .hf-entree.is-in .hf-kicker { opacity: 1; }

/* Bandeau défilant au pied de l'ouverture */
.hf-marquee {
	overflow: hidden;
	margin-top: 4px;
	padding: 12px 0;
	border-top: 1px solid rgba(46, 20, 32, .16);
	font-family: var(--hf-disp);
	font-weight: 700;
	font-style: italic;
	font-size: 15px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hf-plum);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hf-marquee > div { display: flex; width: max-content; animation: hf-marq 42s linear infinite; }
.hf-marquee span { white-space: nowrap; padding-right: .5em; }
@keyframes hf-marq { to { transform: translateX(-50%); } }

/* Rideau : la porte choisie s'ouvre en plein écran */
.hf-curtain {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	background: var(--hf-deep);
	transition: clip-path 1s var(--hf-ease), opacity .7s ease;
}
.hf-curtain__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.hf-curtain__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hf-curtain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(31, 12, 21, .42);
}
.hf-curtain__brush {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 52%;
	width: 170vmax;
	height: 30vmin;
	border-radius: 999px;
	background: var(--hf-verm);
	transform: translate(-50%, -50%) rotate(-24deg) scaleX(0);
	transform-origin: 0 50%;
	transition: transform .85s var(--hf-ease) .35s;
}
.hf-curtain__brush::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--hf-noise);
	background-size: 220px;
	mix-blend-mode: multiply;
	opacity: .35;
}
.hf-curtain.is-open .hf-curtain__brush { transform: translate(-50%, -50%) rotate(-24deg) scaleX(1); }
.hf-curtain__label {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	white-space: nowrap;
	font-family: var(--hf-disp);
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(54px, 11vw, 210px);
	line-height: .9;
	color: var(--hf-cream);
	opacity: 0;
	transform: translate(-50%, -40%);
	transition: opacity .5s ease .2s, transform 1.1s var(--hf-out) .15s;
}
.hf-curtain.is-open .hf-curtain__label { opacity: 1; transform: translate(-50%, -50%); }
.hf-curtain.is-gone { opacity: 0; }

/* ====================================================================
 * Parcours
 * ================================================================== */

.hf-immersif { position: relative; }

.hf-immersif .hf-immersif__stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--hf-deep);
	background-image: var(--hf-poster-part, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--hf-cream);
}
.hf-track--pro .hf-immersif__stage { background-image: var(--hf-poster-pro, none); }

.hf-immersif__canvas {
	position: absolute;
	inset: 0;
	z-index: -3;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .35s ease;
}
.hf-immersif__canvas.is-on { opacity: 1; }

/* Voile aubergine pour la lisibilité, vignette douce */
.hf-immersif .hf-immersif__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(31, 12, 21, .8) 0%, rgba(31, 12, 21, .42) 42%, rgba(31, 12, 21, 0) 72%),
		linear-gradient(0deg, rgba(31, 12, 21, .78) 0%, rgba(31, 12, 21, 0) 46%),
		radial-gradient(140% 110% at 50% 40%, rgba(31, 12, 21, 0) 55%, rgba(31, 12, 21, .55) 100%);
}

/* Grain argentique */
.hf-grain {
	position: absolute;
	inset: -80px;
	z-index: 1;
	pointer-events: none;
	opacity: .17;
	mix-blend-mode: overlay;
	background-image: var(--hf-noise);
	background-size: 220px;
	animation: hf-grain .8s steps(5) infinite;
}
@keyframes hf-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-24px, 16px); }
	40% { transform: translate(18px, -14px); }
	60% { transform: translate(-12px, -26px); }
	80% { transform: translate(22px, 20px); }
	100% { transform: translate(0, 0); }
}

/* Titres des messages : grandes capitales italiques, comme le « Bel » du logo */
.hf-imm-title .elementor-heading-title {
	font-family: var(--hf-disp) !important;
	font-weight: 800 !important;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(46px, min(7vw, 12.5vh), 128px) !important;
	line-height: .87 !important;
	letter-spacing: -.01em !important;
	color: var(--hf-cream) !important;
	max-width: 14ch;
}
.hf-immersif .hf-eyebrow .elementor-heading-title { color: var(--hf-verm2) !important; }
.hf-immersif .hf-step .elementor-widget-text-editor { max-width: 560px !important; }

/* Bascule Particuliers / Professionnels et « Passer l'intro » */
.hf-switch, .hf-skip {
	position: absolute;
	top: 22px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: 999px;
	background: rgba(31, 12, 21, .42);
	border: 1px solid rgba(244, 237, 225, .28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.hf-switch { left: clamp(20px, 6vw, 104px); padding: 4px; gap: 2px; }
.hf-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	color: rgba(244, 237, 225, .78) !important;
	text-decoration: none !important;
	transition: background-color .3s, color .3s;
}
.hf-switch a:hover { color: var(--hf-cream) !important; }
.hf-switch a[aria-current="true"] { background: var(--hf-cream); color: var(--hf-plum) !important; }
.hf-skip {
	right: clamp(20px, 3vw, 44px);
	gap: 8px;
	padding: 0 18px;
	color: var(--hf-cream) !important;
	text-decoration: none !important;
}
.hf-skip:hover { background: rgba(244, 237, 225, .16); }
.hf-switch a:focus-visible, .hf-skip:focus-visible, .hf-chapters button:focus-visible {
	outline: 3px solid var(--hf-verm2);
	outline-offset: 3px;
}

/* ---------- Séquence active ---------- */

.hf-imm-on:not(.hf-path-part) .hf-track--part,
.hf-imm-on:not(.hf-path-pro) .hf-track--pro { display: none !important; }

.hf-imm-on .hf-immersif { min-height: var(--hf-len, 600svh); }

.hf-imm-on .hf-immersif .hf-immersif__stage {
	position: sticky;
	top: var(--hf-head);
	height: calc(100svh - var(--hf-head));
	min-height: 0;
}

.hf-imm-on .hf-immersif .hf-step {
	position: absolute !important;
	z-index: 2;
	left: clamp(20px, 6vw, 104px);
	right: clamp(20px, 24vw, 420px);
	bottom: clamp(108px, 17vh, 190px);
	width: auto !important;
	max-width: 1000px;
	margin: 0 !important;
	visibility: hidden;
	transition: visibility 0s linear .7s;
}
.hf-imm-on .hf-immersif .hf-step.is-active { visibility: visible; transition: visibility 0s; }

/* Sur-titre, texte et boutons : apparaissent après le titre */
.hf-imm-on .hf-step > .elementor-element:not(.hf-imm-title) {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .4s ease, transform .5s ease;
}
.hf-imm-on .hf-step.is-active > .elementor-element:not(.hf-imm-title) {
	opacity: 1;
	transform: none;
	transition: opacity .8s ease .5s, transform 1s var(--hf-out) .5s;
}
.hf-imm-on .hf-step.is-active > .elementor-element:first-child { transition-delay: .05s; }

/* Grand numéro de chapitre, en contour */
.hf-bignum {
	position: absolute;
	z-index: 2;
	right: clamp(20px, 5vw, 96px);
	bottom: clamp(100px, 15vh, 176px);
	pointer-events: none;
	text-align: right;
	font-family: var(--hf-disp);
	font-weight: 800;
	font-style: italic;
	line-height: .8;
}
.hf-bignum b {
	display: block;
	font-size: clamp(110px, 17vw, 300px);
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(244, 237, 225, .55);
}
.hf-bignum small {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	letter-spacing: .2em;
	color: rgba(244, 237, 225, .7);
}
.hf-bignum.is-in b { animation: hf-num 1s var(--hf-out); }
@keyframes hf-num { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }

/* Chapitres, façon génériques de film, en bas de l'écran */
.hf-chapters {
	position: absolute;
	z-index: 3;
	left: clamp(20px, 6vw, 104px);
	right: clamp(20px, 6vw, 104px);
	bottom: 30px;
	display: flex;
	gap: clamp(14px, 2.4vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hf-immersif .hf-chapters li { margin: 0; padding: 0; list-style: none; }
.hf-immersif .hf-chapters button,
.hf-immersif .hf-chapters button:hover,
.hf-immersif .hf-chapters button:focus {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 0 4px !important;
	cursor: pointer;
	color: rgba(244, 237, 225, .55);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: color .35s ease;
}
.hf-chapters button em { font-style: italic; font-weight: 800; font-family: var(--hf-disp); font-size: 15px; letter-spacing: .04em; }
.hf-chapters button i {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: rgba(244, 237, 225, .25);
	transform-origin: left center;
}
.hf-chapters button i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hf-verm);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--hf-out);
}
.hf-immersif .hf-chapters button:hover { color: var(--hf-cream); }
.hf-immersif .hf-chapters button[aria-current="step"] { color: var(--hf-cream); }
.hf-chapters button[aria-current="step"] i::after { transform: scaleX(1); }

/* Invitation à défiler, à la verticale sur le bord droit */
.hf-hint {
	position: absolute;
	z-index: 2;
	right: clamp(18px, 2.4vw, 36px);
	top: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	transform: translateY(-50%);
	color: var(--hf-cream);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity .5s ease;
}
.hf-hint span { writing-mode: vertical-rl; }
.hf-hint i {
	position: relative;
	display: block;
	width: 1px;
	height: 64px;
	overflow: hidden;
	background: rgba(244, 237, 225, .3);
}
.hf-hint i::after {
	content: "";
	position: absolute;
	left: 0;
	top: -40%;
	width: 1px;
	height: 40%;
	background: var(--hf-verm2);
	animation: hf-drop 1.6s var(--hf-ease) infinite;
}
@keyframes hf-drop { to { top: 100%; } }
.hf-hint.is-hidden { opacity: 0; }

.hf-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 3px;
	background: rgba(244, 237, 225, .14);
	pointer-events: none;
}
.hf-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hf-verm);
	transform-origin: left center;
	transform: scaleX(0);
}

/* Après le choix, la page ne garde que les sections du parcours choisi (classes hf-only-part / hf-only-pro) */
.hf-path-part .hf-only-pro,
.hf-path-pro .hf-only-part { display: none !important; }

/* La barre d'appel mobile s'efface pendant le parcours (le dernier écran a ses propres boutons) */
.hf-mobile-bar { transition: transform .45s var(--hf-out); }
.hf-in-track .hf-mobile-bar { transform: translateY(120%); }

/* ---------- Mode statique : écrans fixes, textes empilés ---------- */

html:not(.hf-imm-on) .hf-immersif .hf-immersif__stage { min-height: 86svh; justify-content: flex-end; }
html:not(.hf-imm-on) .hf-immersif .hf-step { position: relative; z-index: 2; }
html:not(.hf-imm-on) .hf-grain { animation: none; }
.hf-track--static .hf-immersif__stage { background-image: none; }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 1024px) {
	.hf-imm-on .hf-immersif .hf-step { right: clamp(20px, 6vw, 104px); }
	.hf-bignum { display: none; }
	.hf-chapters button span { display: none; }
}

@media (max-width: 767px), (max-aspect-ratio: 1/1) {
	.e-con.hf-entree { min-height: 0; }
	.hf-entree .hf-display .elementor-heading-title { font-size: clamp(40px, 11vw, 72px) !important; }
	.hf-entree .hf-lead { max-width: none; }
	.hf-doors { flex-direction: column !important; }
	.e-con.hf-door { min-height: 36svh; border-radius: 22px; flex: none !important; width: 100% !important; }
	.e-con.hf-door { padding-top: 64px !important; }
	.hf-door::after { top: 20px; left: 20px; font-size: 18px; }
	.hf-door h2.elementor-heading-title { font-size: clamp(32px, 9.4vw, 56px) !important; }

	.hf-immersif .hf-immersif__stage::before {
		background:
			linear-gradient(0deg, rgba(31, 12, 21, .9) 0%, rgba(31, 12, 21, .6) 40%, rgba(31, 12, 21, 0) 72%),
			linear-gradient(180deg, rgba(31, 12, 21, .45) 0%, rgba(31, 12, 21, 0) 22%);
	}
	.hf-imm-title .elementor-heading-title { font-size: clamp(36px, 10.6vw, 56px) !important; max-width: none; }
	.hf-imm-on .hf-immersif .hf-step { left: 20px; right: 20px; bottom: 92px; max-width: none; }
	.hf-switch { top: 12px; left: 12px; font-size: 11px; letter-spacing: .08em; }
	.hf-switch a { padding: 0 11px; }
	.hf-skip { top: 12px; right: 12px; padding: 0 12px; font-size: 0; gap: 0; }
	.hf-skip svg { width: 18px; height: 18px; }
	.hf-chapters { display: none; }
	.hf-hint { top: auto; right: auto; left: 50%; bottom: 40px; transform: translateX(-50%); flex-direction: row; gap: 10px; }
	.hf-hint span { writing-mode: horizontal-tb; }
	.hf-hint i { width: 36px; height: 1px; }
	.hf-hint i::after { top: 0; left: -40%; width: 40%; height: 1px; animation-name: hf-slide; }
	@keyframes hf-slide { to { left: 100%; } }
}

@media (prefers-reduced-motion: reduce) {
	.hf-grain, .hf-marquee > div, .hf-hint i::after { animation: none; }
}