/* =====================================================================
 * Event-Stats — Héros 3D minimaliste
 * Objets en volume (billet, sphère, anneau, cube, gélule) flottant
 * autour du titre, avec un léger relief qui suit la souris.
 * ===================================================================== */

.es-hero.es-hero-3d {
	--h3d-ink: #201433;
	--h3d-coral: #FF6B4A;
	--h3d-coral-dark: #E0552F;
	--h3d-sun: #FFB38F;
	--h3d-lilac: #8FD9B6;
	--h3d-lilac-dark: #2E9C6E;
	--h3d-rx: 0deg;
	--h3d-ry: 0deg;
	--h3d-px: 0px;
	--h3d-py: 0px;
	background:
		radial-gradient(720px 620px at 88% -10%, rgba(255,107,74,.30), rgba(255,107,74,0) 62%),
		radial-gradient(560px 520px at -8% 110%, rgba(95,191,154,.20), rgba(95,191,154,0) 65%),
		linear-gradient(160deg, #124A36 0%, #0E3B2B 55%, #0B2F22 100%);
	color: #FFFFFF;
	isolation: isolate;
	/* Le cadre : un grand panneau vert arrondi, posé dans la page */
	width: calc(100% - 48px);
	max-width: 1320px;
	margin: 20px auto 0;
	border-radius: 36px;
	border-bottom: 0;
	padding: 88px 0 80px;
	box-shadow: 0 50px 90px -60px rgba(14,59,43,.9);
}

/* Les anciens halos plats laissent la place à la scène 3D. */
.es-hero.es-hero-3d .es-hero-glow-1,
.es-hero.es-hero-3d .es-hero-glow-2 { display: none; }

/* Sol très léger : donne l'impression d'un plan sur lequel tout flotte. */
.es-hero.es-hero-3d::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -40%;
	width: 140%;
	height: 80%;
	transform: translateX(-50%) perspective(900px) rotateX(72deg);
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	        mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	pointer-events: none;
	z-index: -1;
}

/* ---------- Scène ---------- */
.h3d-scene {
	position: absolute;
	inset: 0;
	perspective: 1100px;
	pointer-events: none;
	z-index: 0;
}
.es-hero.es-hero-3d .es-wrap { position: relative; z-index: 1; }

.h3d-obj {
	position: absolute;
	transform-style: preserve-3d;
	will-change: transform;
	transform:
		translate3d(calc(var(--h3d-px) * var(--d, 1)), calc(var(--h3d-py) * var(--d, 1)), 0)
		rotateX(calc(var(--h3d-rx) * var(--d, 1)))
		rotateY(calc(var(--h3d-ry) * var(--d, 1)));
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.h3d-float {
	transform-style: preserve-3d;
	animation: h3d-float var(--t, 7s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}
@keyframes h3d-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
	50%      { transform: translate3d(0, -14px, 0) rotateZ(var(--tilt, 3deg)); }
}

/* Ombre portée douce sous chaque objet */
.h3d-shadow {
	position: absolute;
	left: 50%;
	bottom: -34px;
	width: 70%;
	height: 14px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0));
	filter: blur(2px);
	animation: h3d-shadow var(--t, 7s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}
@keyframes h3d-shadow {
	0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
	50%      { transform: translateX(-50%) scale(.82); opacity: .6; }
}

/* ---------- 1. Billet en volume (à droite) ---------- */
.h3d-ticket-wrap { right: 8%; top: 30%; --d: 1.2; --t: 8s; --tilt: -4deg; }
.h3d-ticket {
	position: relative;
	width: 300px;
	height: 146px;
	transform: rotateX(18deg) rotateY(-28deg) rotateZ(-12deg);
	transform-style: preserve-3d;
}
.h3d-ticket-face,
.h3d-ticket-back {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	-webkit-mask:
		radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	        mask:
		radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.h3d-ticket-back {
	background: var(--h3d-coral-dark);
	transform: translateZ(-10px);
}
.h3d-ticket-face {
	transform: translateZ(0);
	background:
		linear-gradient(145deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%),
		linear-gradient(135deg, #FF8A6B 0%, var(--h3d-coral) 55%, #F25A3A 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -6px 14px rgba(160,40,20,.25);
	overflow: hidden;
}
.h3d-ticket-face::before {
	/* Pointillés de la souche */
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	right: 52px;
	border-left: 2px dashed rgba(255,255,255,.55);
}
.h3d-ticket-face::after {
	/* Deux lignes de « texte » */
	content: "";
	position: absolute;
	left: 22px;
	top: 28px;
	width: 74px;
	height: 9px;
	border-radius: 5px;
	background: rgba(255,255,255,.75);
	box-shadow: 0 18px 0 -1px rgba(255,255,255,.45), 18px 18px 0 -1px rgba(255,255,255,0);
}
.h3d-ticket-star {
	position: absolute;
	right: 17px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FFF6D6, var(--h3d-sun) 60%, #E9A422);
	box-shadow: 0 2px 4px rgba(120,40,10,.25);
	transform: translateZ(2px);
}
/* Épaisseur : plusieurs couches derrière la face avant */
.h3d-ticket-layer {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: #E24C2B;
	-webkit-mask:
		radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	        mask:
		radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.h3d-ticket-layer:nth-of-type(1) { transform: translateZ(-2px); background: #EE5737; }
.h3d-ticket-layer:nth-of-type(2) { transform: translateZ(-4px); background: #E8512F; }
.h3d-ticket-layer:nth-of-type(3) { transform: translateZ(-6px); background: #E24C2B; }
.h3d-ticket-layer:nth-of-type(4) { transform: translateZ(-8px); background: #D94524; }

/* ---------- 2. Sphère brillante (en haut à gauche) ---------- */
.h3d-sphere-wrap { right: 30%; top: 12%; --d: .8; --t: 9s; --delay: -2s; --tilt: 0deg; }
.h3d-sphere {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, #FFF4EE 0%, #FFC2A8 18%, #FF8A6B 48%, #F25A3A 78%, #C2410C 100%);
	box-shadow:
		inset -10px -12px 22px rgba(120,30,10,.35),
		inset 6px 6px 14px rgba(255,255,255,.5),
		0 20px 36px -14px rgba(0,0,0,.45);
}

/* ---------- 3. Anneau (à gauche, plus bas) ---------- */
.h3d-ring-wrap { right: 33%; top: 64%; --d: 1.4; --t: 10s; --delay: -5s; --tilt: 6deg; }
.h3d-ring {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	transform: rotateX(62deg) rotateY(-14deg);
	background:
		radial-gradient(circle, transparent 0 40%, var(--h3d-lilac-dark) 41%, var(--h3d-lilac) 52%, #DDF5EA 60%, var(--h3d-lilac) 68%, #1F7A54 78%, transparent 79%);
	box-shadow: 0 26px 30px -18px rgba(0,0,0,.45);
}

/* ---------- 4. Cube (en bas à droite) ---------- */
.h3d-cube-wrap { right: 7%; top: 74%; --d: 1; --t: 11s; --delay: -3s; --tilt: 0deg; }
.h3d-cube {
	position: relative;
	width: 46px;
	height: 46px;
	transform-style: preserve-3d;
	animation: h3d-spin 22s linear infinite;
}
.h3d-cube span {
	position: absolute;
	inset: 0;
	border-radius: 9px;
	background: linear-gradient(135deg, #FFFFFF, #DDF5EA);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
	backface-visibility: hidden;
}
.h3d-cube span:nth-child(1) { transform: translateZ(23px); }
.h3d-cube span:nth-child(2) { transform: rotateY(180deg) translateZ(23px); background: linear-gradient(135deg, #5FBF9A, #2E9C6E); }
.h3d-cube span:nth-child(3) { transform: rotateY(90deg) translateZ(23px); background: linear-gradient(135deg, #BFE9D4, #8FD9B6); }
.h3d-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(23px); background: linear-gradient(135deg, #E8F5EF, #BFE9D4); }
.h3d-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(23px); background: linear-gradient(135deg, #FFFFFF, #E8F5EF); }
.h3d-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(23px); background: #1F7A54; }
@keyframes h3d-spin {
	from { transform: rotateX(-24deg) rotateY(0deg); }
	to   { transform: rotateX(-24deg) rotateY(360deg); }
}

/* ---------- 5. Gélule (en haut à droite, petite) ---------- */
.h3d-pill-wrap { right: 9%; top: 10%; --d: .6; --t: 7.5s; --delay: -1s; --tilt: 10deg; }
.h3d-pill {
	width: 58px;
	height: 24px;
	border-radius: 999px;
	transform: rotate(-28deg);
	background:
		linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
		linear-gradient(90deg, #FF6B4A 0 50%, #FFFFFF 50% 100%);
	box-shadow:
		inset 0 -5px 8px rgba(0,0,0,.12),
		0 12px 20px -10px rgba(0,0,0,.45);
}

/* ---------- Texte : à gauche, grand, blanc ---------- */
.es-hero.es-hero-3d .es-wrap { padding-left: 64px; padding-right: 64px; }
.es-hero.es-hero-3d .es-hero-inner {
	max-width: 640px;
	margin: 0 0 36px;
	text-align: left;
}
.es-hero.es-hero-3d .es-eyebrow {
	background: none;
	border: 0;
	padding: 0;
	color: #FFB38F;
	font-size: 13px;
	letter-spacing: .14em;
	gap: 12px;
	margin-bottom: 26px;
}
.es-hero.es-hero-3d .es-eyebrow-dot {
	width: 28px;
	height: 1px;
	border-radius: 0;
	background: #FFB38F;
}
.es-hero.es-hero-3d h1 {
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: clamp(40px, 5.6vw, 72px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin: 0 0 26px;
	text-shadow: none;
}
.es-hero.es-hero-3d h1 em {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.14em;
	letter-spacing: 0;
	color: #FF6B4A;
}
.es-hero.es-hero-3d p {
	color: rgba(255,255,255,.74);
	font-size: 18px;
	line-height: 1.6;
	max-width: 540px;
}

/* Barre de recherche : blanche, posée sur le vert */
.es-hero.es-hero-3d .es-search {
	max-width: 680px;
	margin: 0;
	border: 0;
	border-radius: 22px;
	padding: 8px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
	transition: transform .25s ease, box-shadow .25s ease;
}
.es-hero.es-hero-3d .es-search:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 0 0 4px rgba(255,107,74,.35), 0 36px 70px -20px rgba(0,0,0,.6);
}
.es-hero.es-hero-3d .es-search-field label { color: #6E6384; letter-spacing: .1em; }
.es-hero.es-hero-3d .es-search-divider { background: #E6E0D6; }
.es-hero.es-hero-3d .es-search-submit {
	background: #FF6B4A;
	color: #201433;
	font-weight: 800;
	border-radius: 16px;
	height: 54px;
	box-shadow: 0 4px 0 #C2410C;
	transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.es-hero.es-hero-3d .es-search-submit:hover { background: #FF7F62; color: #201433; }
.es-hero.es-hero-3d .es-search-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #C2410C; }

/* Catégories : pastilles claires sur le vert */
.es-hero.es-hero-3d .es-chips { justify-content: flex-start; margin-top: 26px; max-width: 680px; }
.es-hero.es-hero-3d .es-chip {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.22);
	color: #FFFFFF;
	box-shadow: none;
	transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.es-hero.es-hero-3d .es-chip:hover {
	transform: translateY(-2px);
	background: rgba(255,255,255,.16);
	border-color: rgba(255,255,255,.4);
	color: #FFFFFF;
}
.es-hero.es-hero-3d .es-chip.is-active {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: #0E3B2B;
}

/* Chiffres clés sous la recherche */
.h3d-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	margin: 44px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255,255,255,.14);
	max-width: 680px;
	list-style: none;
}
.h3d-stats li { margin: 0; }
.h3d-stats strong {
	display: block;
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.1;
}
.h3d-stats span { display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-top: 6px; }

/* Entrée douce au chargement */
.es-hero.es-hero-3d .es-hero-inner,
.es-hero.es-hero-3d .es-search,
.es-hero.es-hero-3d .es-chips,
.h3d-stats { animation: h3d-in .9s cubic-bezier(.2,.7,.2,1) both; }
.es-hero.es-hero-3d .es-search { animation-delay: .1s; }
.es-hero.es-hero-3d .es-chips { animation-delay: .18s; }
.h3d-stats { animation-delay: .26s; }
@keyframes h3d-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 1100px) {
	.h3d-ticket-wrap { right: 3%; top: 26%; }
	.h3d-ticket { width: 200px; height: 98px; }
	.h3d-pill-wrap, .h3d-ring-wrap { display: none; }
	.h3d-sphere-wrap { right: 6%; top: 8%; }
	.h3d-cube-wrap { right: 10%; top: 70%; }
	.es-hero.es-hero-3d .es-hero-inner,
	.es-hero.es-hero-3d .es-search,
	.es-hero.es-hero-3d .es-chips,
	.h3d-stats { max-width: 600px; }
}
@media (max-width: 980px) {
	.es-hero.es-hero-3d { width: calc(100% - 32px); margin-top: 12px; border-radius: 28px; padding: 64px 0 56px; }
	.es-hero.es-hero-3d .es-wrap { padding-left: 32px; padding-right: 32px; }
	.h3d-cube-wrap, .h3d-sphere-wrap { display: none; }
	.h3d-ticket-wrap { right: -40px; top: 18px; }
	.h3d-ticket { width: 150px; height: 74px; }
	.es-hero.es-hero-3d .es-hero-inner { max-width: 78%; }
}
@media (max-width: 640px) {
	.es-hero.es-hero-3d { width: calc(100% - 20px); margin-top: 10px; border-radius: 24px; padding: 76px 0 40px; }
	.es-hero.es-hero-3d .es-wrap { padding-left: 20px; padding-right: 20px; }
	.es-hero.es-hero-3d .es-hero-inner { max-width: none; margin-bottom: 26px; }
	.es-hero.es-hero-3d h1 { font-size: 36px; }
	.es-hero.es-hero-3d p { font-size: 15.5px; }
	.es-hero.es-hero-3d .es-search { border-radius: 18px; padding: 12px; }
	.es-hero.es-hero-3d .es-search-submit { width: 100%; justify-content: center; margin: 10px 0 0; }
	.h3d-ticket-wrap { right: -22px; top: 10px; }
	.h3d-ticket { width: 104px; height: 50px; }
	.h3d-ticket-face,
	.h3d-ticket-back,
	.h3d-ticket-layer { border-radius: 9px; }
	.h3d-ticket-face::after { left: 12px; top: 13px; width: 38px; height: 6px; box-shadow: 0 11px 0 -1px rgba(255,255,255,.45); }
	.h3d-ticket-face::before { right: 28px; top: 7px; bottom: 7px; }
	.h3d-ticket-star { right: 8px; width: 12px; height: 12px; margin-top: -6px; }
	.h3d-shadow { display: none; }
	.h3d-stats { gap: 20px 28px; margin-top: 30px; padding-top: 22px; }
	.h3d-stats strong { font-size: 20px; }
}

/* Pas d'animation pour les personnes qui l'ont désactivée */
@media (prefers-reduced-motion: reduce) {
	.h3d-float,
	.h3d-shadow,
	.h3d-cube,
	.es-hero.es-hero-3d .es-hero-inner,
	.es-hero.es-hero-3d .es-search,
	.es-hero.es-hero-3d .es-chips,
	.h3d-stats { animation: none; }
	.h3d-obj { transition: none; }
}

/* =====================================================================
 * Billet « À la une » (vrai prochain événement)
 * ===================================================================== */
.es-hero.has-feature .h3d-sphere-wrap { right: 4%; top: 6%; }
.es-hero.has-feature .h3d-pill-wrap { right: 36%; top: 7%; }
.h3d-feature-wrap {
	position: absolute;
	right: 64px;
	top: 50%;
	width: 360px;
	transform: translateY(-50%);
	perspective: 1100px;
	z-index: 2;
}
.h3d-feature-float { animation: h3d-feature-float 8s ease-in-out infinite; }
@keyframes h3d-feature-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}
.h3d-feature {
	display: block;
	text-decoration: none;
	color: #201433;
	background: #FFFFFF;
	border-radius: 26px;
	overflow: hidden;
	transform: rotate(-4deg) rotateX(var(--h3d-rx, 0deg)) rotateY(var(--h3d-ry, 0deg));
	transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
	box-shadow: 0 50px 80px -30px rgba(0,0,0,.65);
	/* Encoches du billet sur la ligne de découpe */
	-webkit-mask: radial-gradient(circle 14px at 0 74%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 74%, transparent 98%, #000) right / 51% 100% no-repeat;
	        mask: radial-gradient(circle 14px at 0 74%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 74%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.h3d-feature:hover { transform: rotate(-2deg) scale(1.02); color: #201433; }
.h3d-feature:focus-visible { outline: 3px solid #FF6B4A; outline-offset: 4px; }
.h3d-feature-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 4.3;
	background: linear-gradient(160deg, #1F7A54, #0E3B2B);
	overflow: hidden;
}
.h3d-feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}
.h3d-feature-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #FF6B4A;
	color: #201433;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 999px;
}
.h3d-feature-date {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #FFFFFF;
	border-radius: 14px;
	padding: 8px 12px;
	text-align: center;
	line-height: 1;
	box-shadow: 0 8px 18px -8px rgba(0,0,0,.4);
}
.h3d-feature-date strong {
	display: block;
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: #201433;
}
.h3d-feature-date span {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1F7A54;
}
.h3d-feature-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 14px;
	padding: 18px 22px 22px;
	border-top: 2px dashed #DCD5CA;
	margin: 0;
}
.h3d-feature-info { min-width: 0; }
.h3d-feature-title {
	display: block;
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #201433;
	overflow-wrap: anywhere;
}
.h3d-feature-where { display: block; margin-top: 6px; font-size: 13px; color: #5B4D74; }
.h3d-feature-price {
	flex: none;
	text-align: right;
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: #C2410C;
	line-height: 1.15;
	max-width: 46%;
}
.h3d-feature-price del { display: block; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 500; color: #8A7FA8; }
.h3d-feature-price ins { text-decoration: none; }

/* Laisse la place au billet sur ordinateur */
.es-hero.has-feature .es-hero-inner,
.es-hero.has-feature .es-search,
.es-hero.has-feature .es-chips,
.es-hero.has-feature .h3d-stats { max-width: min(640px, calc(100% - 420px)); }

/* =====================================================================
 * Bandeau défilant des catégories (sous le cadre vert)
 * ===================================================================== */
.h3d-marquee-outer {
	position: relative;
	z-index: 3;
	overflow: hidden;
	padding: 24px 0;
	margin-top: -50px;
}
.h3d-marquee {
	position: relative;
	width: calc(100% + 40px);
	margin: 0 -20px;
	background: #FF6B4A;
	transform: rotate(-1.2deg);
	overflow: hidden;
	padding: 16px 0;
	box-shadow: 0 18px 30px -20px rgba(194,65,12,.6);
}
.h3d-marquee-track {
	display: flex;
	width: max-content;
	animation: h3d-marquee 40s linear infinite;
}
.h3d-marquee:hover .h3d-marquee-track { animation-play-state: paused; }
@keyframes h3d-marquee { to { transform: translateX(-50%); } }
.h3d-marquee-group { display: flex; list-style: none; margin: 0; padding: 0; }
.h3d-marquee-group li { display: flex; align-items: center; gap: 22px; padding-right: 22px; margin: 0; white-space: nowrap; }
.h3d-marquee-group a {
	font-family: 'Unbounded', 'Work Sans', sans-serif;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #201433;
	text-decoration: none;
}
.h3d-marquee-group a:hover { color: #FFFFFF; }
.h3d-star { color: #0E3B2B; font-size: 18px; }

@media (max-width: 1100px) {
	.h3d-feature-wrap {
		position: relative;
		right: auto;
		top: auto;
		transform: none;
		width: min(360px, 100%);
		margin: 44px auto 0;
	}
	.es-hero.has-feature .es-hero-inner,
	.es-hero.has-feature .es-search,
	.es-hero.has-feature .es-chips,
	.es-hero.has-feature .h3d-stats { max-width: 680px; }
}
@media (max-width: 640px) {
	.h3d-feature-wrap { margin-top: 32px; }
	.h3d-feature { transform: rotate(-2deg); }
	.h3d-feature-title { font-size: 17px; }
	.h3d-marquee-outer { margin-top: -42px; }
	.h3d-marquee { padding: 12px 0; }
	.h3d-marquee-group a { font-size: 18px; }
	.es-hero.has-feature .h3d-pill-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.h3d-feature-float, .h3d-marquee-track { animation: none; }
	.h3d-marquee { overflow-x: auto; }
	.h3d-feature, .h3d-feature:hover { transition: none; transform: rotate(-3deg); }
}