/**
 * Genève Urban Trail — Brand foundation (canonical, loaded by the plugin so it
 * works regardless of the active theme).
 * Tokens, typography (.font-display / .gut-display), shadows, radius, keyframes.
 */

:root {
	--gut-orange: #ec6436;
	--gut-green:  #00a184;
	--gut-blue:   #81d4da;
	--gut-yellow: #febf2c;
	--gut-purple: #7d7ebc;
	--gut-cream:  #f0eeea;
	--gut-ink:    #14110f;
	--gut-paper:  #ffffff;

	--gut-shadow-sm: 0 1px 2px rgba(20,17,15,0.04), 0 1px 3px rgba(20,17,15,0.06);
	--gut-shadow:    0 4px 12px rgba(20,17,15,0.06), 0 2px 4px rgba(20,17,15,0.04);
	--gut-shadow-lg: 0 12px 32px rgba(20,17,15,0.08), 0 4px 8px rgba(20,17,15,0.04);
	--gut-shadow-xl: 0 24px 48px rgba(20,17,15,0.10), 0 8px 16px rgba(20,17,15,0.06);

	--gut-radius-sm: 12px;
	--gut-radius-md: 16px;
	--gut-radius-lg: 24px;
	--gut-radius-xl: 32px;
	--gut-radius-2xl: 40px;
	--gut-radius-pill: 9999px;

	--gut-font-display: 'Bungee', Impact, sans-serif;
	--gut-font-body: 'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---------- Typography ---------- */
.font-display {
	font-family: 'Bungee', Impact, sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 0.95;
}
.gut-display {
	font-family: 'Bungee', Impact, sans-serif;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
}
.gut-body { font-family: var(--gut-font-body); }
.gut-eyebrow {
	font-family: var(--gut-font-body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
}

/* ---------- Shared atoms ---------- */
.gut-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	border-radius: var(--gut-radius-pill); padding: 0.75rem 1.5rem;
	font-family: var(--gut-font-body); font-weight: 700; font-size: 0.95rem; line-height: 1;
	text-decoration: none;
	transition: transform .25s cubic-bezier(0.22,1,0.36,1), box-shadow .25s, background-color .25s;
}
.gut-pill:hover { transform: translateY(-2px); box-shadow: var(--gut-shadow-lg); }
.gut-pill--orange { background: var(--gut-orange); color: #fff; }
.gut-pill--ink    { background: var(--gut-ink); color: #fff; }
.gut-pill--ghost  { background: transparent; color: var(--gut-ink); box-shadow: inset 0 0 0 2px rgba(20,17,15,0.12); }
.gut-pill--ghost:hover { box-shadow: inset 0 0 0 2px var(--gut-orange); }

/* ---------- Reveal-on-scroll ---------- */
.gut-reveal {
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1);
	will-change: opacity, transform;
}
.gut-reveal.is-visible { opacity: 1; transform: none; }
.fl-builder-edit .gut-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.gut-reveal { opacity: 1; transform: none; transition: none; }
}

/* ====== Custom reveal-on-scroll — distinct animation per module type ====== */
/* Hidden until the wrapper enters the viewport (.is-visible added by gut-reveal.js). */
/* program-timeline is excluded: it is too tall to reveal as one block — its items reveal individually (see below). */
.fl-module[class*="fl-module-gut-"]:not([class*="gut-finish-stripe"]):not([class*="gut-program-timeline"]) { opacity: 0; will-change: opacity, transform; }
.fl-builder-edit .fl-module[class*="fl-module-gut-"] { opacity: 1 !important; }

/* Default — dynamic rise with a slight overshoot. */
.fl-module[class*="fl-module-gut-"].is-visible { animation: gut-rise .7s cubic-bezier(0.22,1,0.36,1) both; }

/* Big panels — cinematic wipe-up (reveals top → bottom). */
.fl-module-gut-banner-hero.is-visible,
.fl-module-gut-photo-banner.is-visible,
.fl-module-gut-cta.is-visible { animation: gut-wipe .9s cubic-bezier(0.22,1,0.36,1) both; }

/* Highlight blocks — pop in with a springy ease. */
.fl-module-gut-dossard-counter.is-visible,
.fl-module-gut-course-map.is-visible,
.fl-module-gut-photo-route-map.is-visible,
.fl-module-gut-itinerary-ticket.is-visible { animation: gut-pop .7s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Grids & sliders — the wrapper only fades; children come in staggered. */
.fl-module-gut-races-slider.is-visible,
.fl-module-gut-advantages-slider.is-visible,
.fl-module-gut-village-reveal.is-visible,
.fl-module-gut-stat.is-visible,
.fl-module-gut-partners-marquee.is-visible { animation: gut-fade .4s ease both; }

/* Staggered children (delay driven by --gi set in JS). */
.fl-module-gut-races-slider.is-visible .gut-rc,
.fl-module-gut-advantages-slider.is-visible .gut-adv__card,
.fl-module-gut-village-reveal.is-visible .gut-vr__card,
.fl-module-gut-stat.is-visible .gut-stats__item { animation: gut-pop .6s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: calc(var(--gi, 0) * .08s); }

/* Timeline — each item reveals individually as it scrolls in (the section is too tall to reveal at once). */
.fl-module-gut-program-timeline .gut-tl__item { opacity: 0; will-change: opacity, transform; }
.fl-builder-edit .fl-module-gut-program-timeline .gut-tl__item { opacity: 1 !important; }
.fl-module-gut-program-timeline .gut-tl__item.is-visible { animation: gut-rise .7s cubic-bezier(0.22,1,0.36,1) both; }

@media (prefers-reduced-motion: reduce) {
	.fl-module[class*="fl-module-gut-"],
	.fl-module[class*="fl-module-gut-"] .gut-rc,
	.fl-module[class*="fl-module-gut-"] .gut-adv__card,
	.fl-module[class*="fl-module-gut-"] .gut-vr__card,
	.fl-module[class*="fl-module-gut-"] .gut-stats__item,
	.fl-module[class*="fl-module-gut-"] .gut-tl__item { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Keyframes ---------- */
@keyframes gut-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gut-mascot-bounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes gut-banner-drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,2%,0) scale(1.05); } }
@keyframes gut-route-flow { to { stroke-dashoffset: -32; } }
@keyframes gut-pulse-ring { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes gut-rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes gut-route-draw { to { stroke-dashoffset: 0; } }
@keyframes gut-rise { 0% { opacity: 0; transform: translateY(40px); } 60% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes gut-pop { 0% { opacity: 0; transform: scale(.9) translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes gut-wipe { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes gut-fade { from { opacity: 0; } to { opacity: 1; } }