/* ----------------------------------------------------------------------------
   Fugamma Splash — shifting vertical color-stripe palettes.
   Loads black; full-height vertical stripes wipe on and cycle palettes over
   time (see splash.js). Huge white wordmark, a big/thin tagline, and three
   heavy-glass CTA cards that blur and blend the colors behind them.
   ------------------------------------------------------------------------- */

:root {
	--fg-ink: #000000;
	--fg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
	background: var(--fg-ink);
}

.splash {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 32px;
	background: var(--fg-ink);
	overflow: hidden;
	isolation: isolate;
}

/* ---- Stripe field (fixed, full viewport) -------------------------------- */
.splash__stripes {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: flex;
	background: #000;
	opacity: 0;
	transition: opacity 0.6s var(--fg-ease);
}
.splash__stripes.is-ready { opacity: 1; }

.stripe {
	position: relative;
	flex: 1 1 0;
	height: 100%;
	background: #000;
	overflow: hidden;
}
.stripe__sweep {
	position: absolute;
	inset: 0;
	transform: scaleY(0);
	will-change: transform;
}
/* Crossfade variant: no scale wipe — dissolves in via opacity + luminance. */
.stripe__sweep--fade {
	transform: none;
	opacity: 0;
	will-change: opacity, filter;
}

/* Filmic gloss + grain over the stripes for sophistication. */
.splash__sheen {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 22%, transparent 70%, rgba(0,0,0,0.28) 100%);
}
.splash__grain {
	position: fixed;
	inset: -150%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
	animation: fgGrain 0.6s steps(3) infinite;
}
@keyframes fgGrain {
	0%   { transform: translate3d(0, 0, 0); }
	33%  { transform: translate3d(-4%, 3%, 0); }
	66%  { transform: translate3d(3%, -2%, 0); }
	100% { transform: translate3d(-2%, 1%, 0); }
}

/* Soft central darkening so the white logo holds on lighter palettes. */
.splash__scrim {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(70% 60% at 50% 46%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.12) 45%, transparent 75%);
}

/* ---- Foreground content -------------------------------------------------- */
.splash__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 1240px;
}

/* Glass wordmark: the white logo SVG masks a frosted-glass panel, so the
   shifting stripes blur and bleed through the letterforms. */
.splash { --fg-logo-mask: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20121.4%2025%22%3E%3C%21--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226%29%20%20--%3E%3Cdefs%3E%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fff%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Layer_1-2%22%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M.5%2C1h14.4v3.8H4.7v4h9v3.8H4.7v7.3H.5V1Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M15.6%2C14.8V5.4h4.1v8.1c0%2C1.9.9%2C2.9%2C2.5%2C2.9s2.6-1%2C2.6-2.9V5.4h4.1v14.5h-4.1v-2.1c-.9%2C1.2-2.2%2C2.3-4.2%2C2.3-3.1%2C0-4.9-2.1-4.9-5.4h-.1Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M30.5%2C22.8l1.4-3.1c1.5.8%2C3%2C1.3%2C4.9%2C1.3%2C2.8%2C0%2C4.1-1.4%2C4.1-3.9v-.7c-1.2%2C1.5-2.5%2C2.3-4.7%2C2.3-3.4%2C0-6.4-2.5-6.4-6.8h0c0-4.4%2C3.1-6.8%2C6.4-6.8s3.6.9%2C4.7%2C2.2v-1.9h4.1v11.2c0%2C2.6-.6%2C4.5-1.8%2C5.7-1.4%2C1.4-3.4%2C1.9-6.2%2C1.9s-4.6-.5-6.4-1.5h0ZM40.9%2C12h0c0-2-1.5-3.4-3.5-3.4s-3.5%2C1.4-3.5%2C3.3h0c0%2C2.1%2C1.5%2C3.4%2C3.5%2C3.4s3.5-1.4%2C3.5-3.3Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M45.7%2C15.7h0c0-3.2%2C2.4-4.7%2C5.8-4.7s2.5.2%2C3.5.6v-.2c0-1.7-1-2.6-3.1-2.6s-2.7.3-4%2C.8l-1-3.1c1.6-.7%2C3.2-1.2%2C5.6-1.2s3.9.6%2C4.9%2C1.6c1.1%2C1.1%2C1.6%2C2.7%2C1.6%2C4.6v8.4h-4v-1.6c-1%2C1.1-2.4%2C1.8-4.4%2C1.8s-5-1.6-5-4.4h.1ZM55.1%2C14.8v-.7c-.7-.3-1.6-.5-2.6-.5-1.8%2C0-2.8.7-2.8%2C2h0c0%2C1.2.9%2C1.8%2C2.2%2C1.8%2C1.9%2C0%2C3.2-1%2C3.2-2.5h0Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M60.4%2C5.4h4.1v2.1c.9-1.2%2C2.2-2.3%2C4.3-2.3s3.3.8%2C4.1%2C2.3c1.3-1.5%2C2.8-2.3%2C4.7-2.3%2C3.1%2C0%2C4.9%2C1.8%2C4.9%2C5.3v9.4h-4.1v-8.1c0-1.9-.9-2.9-2.4-2.9s-2.5%2C1-2.5%2C2.9v8.1h-4.1v-8.1c0-1.9-.9-2.9-2.4-2.9s-2.5%2C1-2.5%2C2.9v8.1h-4.1V5.4h0Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M84%2C5.4h4.1v2.1c.9-1.2%2C2.2-2.3%2C4.3-2.3s3.3.8%2C4.1%2C2.3c1.3-1.5%2C2.8-2.3%2C4.7-2.3%2C3.1%2C0%2C4.9%2C1.8%2C4.9%2C5.3v9.4h-4.1v-8.1c0-1.9-.9-2.9-2.4-2.9s-2.5%2C1-2.5%2C2.9v8.1h-4.1v-8.1c0-1.9-.9-2.9-2.4-2.9s-2.5%2C1-2.5%2C2.9v8.1h-4.1V5.4h0Z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M106.6%2C15.7h0c0-3.2%2C2.4-4.7%2C5.8-4.7s2.5.2%2C3.5.6v-.2c0-1.7-1-2.6-3.1-2.6s-2.7.3-4%2C.8l-1-3.1c1.6-.7%2C3.2-1.2%2C5.6-1.2s3.9.6%2C4.9%2C1.6c1.1%2C1.1%2C1.6%2C2.7%2C1.6%2C4.6v8.4h-4v-1.6c-1%2C1.1-2.4%2C1.8-4.4%2C1.8s-5-1.6-5-4.4h0ZM116.1%2C14.8v-.7c-.7-.3-1.6-.5-2.6-.5-1.8%2C0-2.8.7-2.8%2C2h0c0%2C1.2.9%2C1.8%2C2.2%2C1.8%2C1.9%2C0%2C3.2-1%2C3.2-2.5h0Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

.splash__logo {
	width: clamp(300px, 74vw, 1080px);
	aspect-ratio: 121.4 / 25;
	position: relative;
	/* NOTE: the mask lives on .fg-glass (a child), NOT here — otherwise it would
	   clip the intro's scaling letters to the static glyph outlines. */
	filter:
		drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
		drop-shadow(0 8px 38px rgba(0, 0, 0, 0.55));
}

/* Resting glass wordmark — its own masked frosted panel. Visible by default
   (graceful no-JS fallback); the intro hides it, then settles back to it. */
.fg-glass {
	position: absolute;
	inset: 0;
	-webkit-mask-image: var(--fg-logo-mask);
	mask-image: var(--fg-logo-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background: rgba(255, 255, 255, 0.93);
	-webkit-backdrop-filter: blur(6px) saturate(1.08) brightness(1.08);
	backdrop-filter: blur(6px) saturate(1.08) brightness(1.08);
}

/* ---- Cinematic intro: letter-zoom + column inversion -------------------- *
 * During the intro the glass wordmark is hidden and two hero layers live
 * inside the (masked) .splash__logo box: a COLOR layer (the inline SVG, each
 * letter zooming in, filled with the same stripe columns) and a WHITE layer
 * (per-column bands that wipe in, synced to the background curtains). When the
 * curtains finish, the hero crossfades into the resting glass wordmark.        */
.fg-hero {
	position: absolute;
	inset: 0;
	opacity: 0; /* hidden unless the JS intro runs (graceful: glass shows) */
}
.fg-hero__svg,
.fg-hero__white { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-hero__svg { display: block; }
.fg-hero__svg path {
	fill: url(#fgCols);
	transform-box: fill-box;
	transform-origin: center center;
}
/* The white inversion layer self-masks to the wordmark so the bands read as
   white letters (the colored SVG layer above is intentionally NOT masked, so
   its letters can scale freely without being clipped). */
.fg-hero__white {
	-webkit-mask-image: var(--fg-logo-mask);
	mask-image: var(--fg-logo-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.fg-hero__white .fg-band { position: absolute; top: 0; height: 100%; background: #fff; }

/* Intro active: hide the resting glass, reveal the hero, zoom letters in. */
.splash.is-intro .fg-glass { opacity: 0; }
.splash.is-intro .fg-hero { opacity: 1; }
.splash.is-intro .fg-hero__svg path {
	/* Timing is baked per-keyframe below, so no global easing here. */
	animation: fgLetter 0.9s linear both;
}
.splash.is-intro .fg-hero__svg path:nth-of-type(1) { animation-delay: 0.00s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(2) { animation-delay: 0.085s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(3) { animation-delay: 0.17s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(4) { animation-delay: 0.255s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(5) { animation-delay: 0.34s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(6) { animation-delay: 0.425s; }
.splash.is-intro .fg-hero__svg path:nth-of-type(7) { animation-delay: 0.51s; }

/* Settle: the glass wordmark snaps to full opacity *instantly* behind the still
   -solid white hero (so it's hidden under it), the color layer is dropped, then
   only the white hero fades out — revealing the near-opaque glass underneath.
   Because the glass never sits at partial opacity, the logo stays covered the
   whole way: no mid-crossfade transparency/brightness flash. */
.splash.is-settled .fg-glass { opacity: 1; }
.splash.is-settled .fg-hero__svg { opacity: 0; }
.splash.is-settled .fg-hero { opacity: 0; transition: opacity 0.5s var(--fg-ease); }

/* Slinky: each letter eases up past its size and settles smoothly back — no
   bounce. The overlapping stagger makes the motion flow continuously across the
   word, so the letters feel connected, like a wave travelling down a slinky. */
@keyframes fgLetter {
	0%   { opacity: 0; transform: scale(0.7); animation-timing-function: cubic-bezier(0.22, 0.85, 0.3, 1); }
	58%  { opacity: 1; transform: scale(1.03); animation-timing-function: cubic-bezier(0.33, 0, 0.25, 1); }
	100% { opacity: 1; transform: scale(1); }
}

/* If backdrop-filter is unsupported, fall back to a near-solid white wordmark. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.fg-glass { background: rgba(255, 255, 255, 0.92); }
}

.splash__tagline {
	margin: 1.4rem 0 0;
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
	line-height: 1.05;
	letter-spacing: 0.005em;
	color: #ffffff;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}

/* Syncopated reveal: each word rises on its own slightly off-beat delay. */
.splash__tagline .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(18px);
	animation: fgRise 1.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}
.splash__tagline .word:nth-child(1) { animation-delay: 2.02s; }
.splash__tagline .word:nth-child(2) { animation-delay: 2.35s; }
.splash__tagline .word:nth-child(3) { animation-delay: 2.68s; }

/* ---- Heavy-glass CTA cards ---------------------------------------------- */
.splash__ctas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
	max-width: 1040px;
	margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
}

.cta {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 1.7rem 1.6rem 1.5rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	-webkit-backdrop-filter: blur(26px) saturate(1.4);
	backdrop-filter: blur(26px) saturate(1.4);
	box-shadow:
		0 12px 48px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);
	transition:
		transform 0.7s cubic-bezier(0.33, 0, 0.2, 1),
		background 0.55s var(--fg-ease),
		border-color 0.55s var(--fg-ease);
	opacity: 0;
	transform: translateY(59px) scale(0.97);
	/* All three reveal together as "Host." is settling. Fade is quick; the
	   upward glide + faint scale-up is long and cool-headed (gentle start,
	   soft landing). Both motions run *with* the fade, not after it. */
	animation:
		fgCardFade 1s ease-out 3s forwards,
		fgCardRise 1.6s cubic-bezier(0.2, 0.8, 0.25, 1) 3s forwards;
}

/* Once revealed: drop the animation hold so the transform is free for hover,
   and only from here on does hover apply (prevents the reveal from fighting
   :hover if the cursor is already over a card on load). */
.cta.is-in {
	animation: none;
	opacity: 1;
	transform: none;
}
.cta.is-in:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
}

.cta__title {
	margin: 0 0 0.6rem;
	font-family: 'Roboto', sans-serif;
	font-size: 1.18rem;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.cta__desc {
	margin: 0 0 1.5rem;
	font-size: 0.94rem;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

.cta__btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 1.15rem;
	font-family: 'Roboto', sans-serif;
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(4px) saturate(1.2);
	backdrop-filter: blur(4px) saturate(1.2);
	cursor: pointer;
	transition:
		background 0.3s var(--fg-ease),
		border-color 0.3s var(--fg-ease),
		-webkit-backdrop-filter 0.3s var(--fg-ease),
		backdrop-filter 0.3s var(--fg-ease);
}
.cta__btn svg { width: 14px; height: 14px; transition: transform 0.25s var(--fg-ease); }
/* Minimal glass interaction: the frosted panel brightens and the blur deepens,
   text stays white — no flat flip to a solid fill. */
.cta__btn:hover {
	background: rgba(255, 255, 255, 0.20);
	border-color: rgba(255, 255, 255, 0.75);
	-webkit-backdrop-filter: blur(12px) saturate(1.5) brightness(1.25);
	backdrop-filter: blur(12px) saturate(1.5) brightness(1.25);
}
.cta__btn:hover svg { transform: translateX(3px); }
.cta__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

@keyframes fgRise {
	to { opacity: 1; transform: translateY(0); }
}

/* Card reveal: fade and rise on independent timelines — quick fade-in,
   long cool-headed glide up. */
@keyframes fgCardFade {
	to { opacity: 1; }
}
@keyframes fgCardRise {
	to { transform: translateY(0) scale(1); }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
	.splash { padding: 48px 22px; }
	.splash__ctas { grid-template-columns: 1fr; max-width: 460px; gap: 14px; }
	.cta { padding: 1.4rem 1.4rem; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.splash__grain { animation: none; }
	.splash__logo,
	.splash__tagline,
	.splash__tagline .word,
	.cta {
		animation: none;
		opacity: 1;
		transform: none;
	}
}