:root { color-scheme: light; font-family: "Arial Rounded MT Bold", "Arial Black", Arial, sans-serif; color: #050505; background: #17355c; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; overflow-x: hidden; isolation: isolate; }
.ambient { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; filter: hue-rotate(var(--background-hue, 0deg)); background: linear-gradient(155deg, #14375f 0%, #1760a0 45%, #072e80 100%); }
.light { position: absolute; border-radius: 48%; filter: blur(clamp(35px, 6vw, 100px)); will-change: transform; }
.light--blue { width: 70vmax; height: 75vmax; left: -28vmax; top: -24vmax; background: radial-gradient(ellipse, #009dff 10%, #0078ef 40%, #1644a8 60%, transparent 72%); animation: blue-flow 14s ease-in-out infinite alternate; }
.light--cyan { width: 85vmax; height: 65vmax; right: -40vmax; top: 3vh; background: radial-gradient(ellipse, #00a2ff 10%, #0086f4 36%, #0352b7 58%, transparent 72%); animation: cyan-flow 17s ease-in-out infinite alternate; }
.light--white { width: 68vmax; height: 35vmax; left: 15vw; top: -22vmax; background: #155f9e; animation: white-flow 19s ease-in-out infinite alternate; }
.light--mist { width: 60vmax; height: 55vmax; left: 12vw; top: 12vh; background: radial-gradient(ellipse, #2374b9ee 5%, #205b9dcc 32%, transparent 65%); animation: mist-flow 12s ease-in-out infinite alternate; }
.light--navy { width: 80vmax; height: 50vmax; left: -35vmax; bottom: -33vmax; background: #061653; animation: navy-flow 16s ease-in-out infinite alternate; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: clamp(180px, 30vh, 320px); background: linear-gradient(to bottom, rgba(4, 7, 20, .85) 0%, rgba(4, 7, 20, .58) 38%, rgba(4, 7, 20, 0) 100%); pointer-events: none; z-index: 0; }
header { position: absolute; top: 24px; left: 26px; z-index: 1; }
.logo { display: flex; align-items: center; gap: .13em; font-size: clamp(36px, 3.6vw, 56px); }
.logo-type { font-family: "Google Sans Flex", sans-serif; font-weight: 800; font-synthesis: none; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.logo-outline { color: #fff; }
.logo-solid { color: #fff; }
.logo-face { position: relative; display: block; width: 1.08em; height: 1.12em; overflow: hidden; flex: none; }
.logo-face img { position: absolute; display: block; width: 4.27em; max-width: none; height: auto; left: -3.01em; top: -.15em; }
main { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100svh; padding: 140px 6vw; }
h1 { margin: 0; max-width: 100%; font-size: clamp(44px, 11.4vw, 185px); font-weight: 900; letter-spacing: -.065em; line-height: 1.04; color: #fff; text-shadow: 0 2px 24px #06256233; text-align: center; text-wrap: balance; animation-duration: 950ms; animation-delay: 1150ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-fill-mode: both; }
h1.long { font-size: clamp(44px, 8.6vw, 140px); }
@keyframes blue-flow { to { transform: translate(28vw, 18vh) rotate(25deg) scale(.9); } }
@keyframes cyan-flow { to { transform: translate(-30vw, 25vh) rotate(-28deg) scale(1.15); } }
@keyframes white-flow { to { transform: translate(-25vw, 28vh) rotate(-18deg); } }
@keyframes mist-flow { to { transform: translate(10vw, 17vh) rotate(35deg) scale(.85); } }
@keyframes navy-flow { to { transform: translate(35vw, -8vh) rotate(20deg); } }
h1[data-entrance="zoom"] { animation-name: entrance-zoom; }
h1[data-entrance="focus"] { animation-name: entrance-focus; animation-duration: 1200ms; }
h1[data-entrance="bounce"] { animation-name: entrance-bounce; }
h1[data-entrance="tilt"] { animation-name: entrance-tilt; transform-origin: 50% 80%; }
h1[data-entrance="words"] span { display: inline-block; animation: entrance-word 800ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1150ms + var(--word-index) * 170ms); }
@keyframes entrance-zoom { 0% { opacity: 0; transform: scale(.65); } 70% { opacity: 1; transform: scale(1.035); } 100% { opacity: 1; transform: none; } }
@keyframes entrance-focus { from { opacity: 0; filter: blur(18px); transform: scale(.94); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes entrance-bounce { 0% { opacity: 0; transform: translateY(-55px) scale(.96); } 55% { opacity: 1; transform: translateY(9px); } 78% { transform: translateY(-5px); } 100% { opacity: 1; transform: none; } }
@keyframes entrance-tilt { from { opacity: 0; transform: translateY(30px) rotate(-7deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes entrance-word { from { opacity: 0; transform: translateY(35px) rotate(4deg); } to { opacity: 1; transform: none; } }

/* Geometric motion inspired by the sports motion reference; cool colors only. */
.motion-bands { position: absolute; inset: -40%; opacity: .22; background: repeating-linear-gradient(135deg, transparent 0 100px, #062b70 100px 155px, transparent 155px 225px); animation: bands-shift 9s cubic-bezier(.76,0,.24,1) infinite; }
.motion-grid { position: absolute; inset: -25%; opacity: .16; background-image: repeating-linear-gradient(135deg, transparent 0 77px, #158bca 78px 80px, transparent 81px 160px), repeating-linear-gradient(45deg, transparent 0 77px, #158bca 78px 80px, transparent 81px 160px); mask-image: linear-gradient(transparent 5%, #000 80%); animation: grid-shift 12s cubic-bezier(.76,0,.24,1) infinite; }
.motion-ring { position: absolute; width: 65vmin; height: 65vmin; right: -23vmin; bottom: -20vmin; border: 7vmin solid #0875bb; border-left-color: transparent; border-bottom-color: #103a79; border-radius: 50%; opacity: .3; animation: ring-turn 10s cubic-bezier(.76,0,.24,1) infinite; }
.motion-shapes { position: absolute; inset: 0; overflow: hidden; }
.motion-shapes i { position: absolute; display: block; left: calc(mod(var(--i) * 29, 100) * 1%); top: calc(mod(var(--i) * 43, 100) * 1%); width: clamp(14px, 2.5vw, 38px); aspect-ratio: 1; background: #0a417b; opacity: .24; animation: shape-shift 8s cubic-bezier(.76,0,.24,1) infinite; animation-delay: calc(var(--i) * -370ms); }
.motion-shapes i:nth-child(3n) { background: #087eb9; clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.motion-shapes i:nth-child(3n + 1) { clip-path: polygon(0 0,100% 0,0 100%); }
@keyframes bands-shift { 0%,20% { transform: translate(-35px,35px); } 40%,65% { transform: translate(65px,-65px); } 85%,100% { transform: translate(-35px,35px); } }
@keyframes grid-shift { 0%,20% { transform: translateY(0); } 45%,70% { transform: translateY(80px); } 100% { transform: translateY(0); } }
@keyframes ring-turn { 0%,15% { transform: rotate(0) scale(.85); } 40%,60% { transform: rotate(180deg) scale(1); } 85%,100% { transform: rotate(360deg) scale(.85); } }
@keyframes shape-shift { 0%,15% { transform: translate(0,0) rotate(0); } 40%,60% { transform: translate(25px,-45px) rotate(135deg); } 85%,100% { transform: translate(0,0) rotate(360deg); } }

/* One-shot opening sequence, separate from the ongoing background motion. */
.ambient { animation: background-enter 1500ms cubic-bezier(.16,1,.3,1) both; }
.bg-intro { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; display: flex; }
.bg-intro span { flex: 1; height: 150%; margin-top: -15vh; margin-right: -2px; background: #060e20; transform: skewY(-12deg); animation: panel-reveal 950ms cubic-bezier(.76,0,.24,1) both; animation-delay: calc(100ms + var(--panel) * 100ms); }
@keyframes panel-reveal { 0%,12% { transform: translateY(0) skewY(-12deg); } 100% { transform: translateY(-140%) skewY(-12deg); } }
@keyframes background-enter { from { transform: scale(1.18) translateX(-3%); } to { transform: scale(1) translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bg-intro { display: none; } }

/* Random entrance variants share a 1.45-second maximum reveal. */
[data-bg-entrance="sides"] .bg-intro span { animation-name: panel-side; }
[data-bg-entrance="sides"] .bg-intro span:nth-child(even) { animation-name: panel-side-reverse; }
[data-bg-entrance="diagonal"] .bg-intro span { animation-name: panel-diagonal; }
[data-bg-entrance="shutter"] .bg-intro span { animation-name: panel-shutter; transform-origin: left center; }
[data-bg-entrance="iris"] .bg-intro { display: none; }
[data-bg-entrance="iris"] .ambient { animation: iris-reveal 1450ms cubic-bezier(.76,0,.24,1) both; }
html[data-bg-entrance="iris"] { background: #060e20; }
@keyframes panel-side { from { transform: translateY(0) skewY(0); } to { transform: translateY(-140%) skewY(0); } }
@keyframes panel-side-reverse { from { transform: translateY(0) skewY(0); } to { transform: translateY(140%) skewY(0); } }
@keyframes panel-diagonal { from { transform: translate(0,0) skewY(-12deg); } to { transform: translate(110vw,-140%) skewY(-12deg); } }
@keyframes panel-shutter { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(0) skewY(0); } }
@keyframes iris-reveal { from { clip-path: circle(0% at 50% 50%); transform: scale(1.12); } to { clip-path: circle(80% at 50% 50%); transform: none; } }

/* Independent continuous motion, chosen once per page load. */
[data-bg-motion="orbit"] .motion-bands { opacity: .08; animation: orbit-loop 45s linear infinite; }
[data-bg-motion="orbit"] .motion-grid { animation: orbit-loop 65s linear infinite reverse; }
[data-bg-motion="orbit"] .motion-ring { animation: orbit-loop 16s linear infinite; }
[data-bg-motion="orbit"] .motion-shapes i { animation-name: orbit-shape; animation-duration: 14s; animation-timing-function: linear; }
[data-bg-motion="float"] .motion-bands { opacity: .09; animation: float-loop 18s ease-in-out infinite; }
[data-bg-motion="float"] .motion-grid { animation: float-loop 24s ease-in-out infinite reverse; }
[data-bg-motion="float"] .motion-ring { animation: float-loop 15s ease-in-out infinite; }
[data-bg-motion="float"] .motion-shapes i { animation-name: float-loop; animation-duration: 11s; animation-timing-function: ease-in-out; }
[data-bg-motion="pulse"] .motion-bands { animation: pulse-loop 8s ease-in-out infinite; }
[data-bg-motion="pulse"] .motion-grid { animation: pulse-loop 10s ease-in-out infinite reverse; }
[data-bg-motion="pulse"] .motion-ring { animation: pulse-loop 6s ease-in-out infinite; }
[data-bg-motion="pulse"] .motion-shapes i { animation-name: pulse-loop; animation-duration: 7s; }
[data-bg-motion="pulse"] .light { animation-name: light-breathe; animation-duration: 12s; }
[data-bg-motion="crossflow"] .motion-bands { animation: cross-loop 14s ease-in-out infinite; }
[data-bg-motion="crossflow"] .motion-grid { animation: cross-loop 19s ease-in-out infinite reverse; }
[data-bg-motion="crossflow"] .motion-ring { animation: cross-loop 17s ease-in-out infinite; }
[data-bg-motion="crossflow"] .motion-shapes i { animation-name: cross-loop; animation-duration: 12s; }
[data-bg-motion="crossflow"] .motion-shapes i:nth-child(even) { animation-direction: reverse; }
[data-bg-motion="orbit"] .light, [data-bg-motion="float"] .light { animation-duration: 25s; }
@keyframes orbit-loop { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes orbit-shape { from { transform: rotate(0) translateX(32px) rotate(0); } to { transform: rotate(360deg) translateX(32px) rotate(-360deg); } }
@keyframes float-loop { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-50px) rotate(4deg); } }
@keyframes pulse-loop { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
@keyframes light-breathe { from { transform: scale(.85); } to { transform: scale(1.2); } }
@keyframes cross-loop { 0%,100% { transform: translate(-50px,25px) rotate(-5deg); } 50% { transform: translate(50px,-25px) rotate(5deg); } }

.phrase-burst { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; filter: hue-rotate(var(--background-hue, 0deg)); background: radial-gradient(ellipse at center, #020e2255, transparent 70%); }
.phrase-burst.active { animation: burst-envelope 3000ms ease-out both; }
.phrase-burst span { position: absolute; left: 50%; top: 50%; width: 75vmax; height: 6px; transform-origin: left center; transform: rotate(var(--angle)); }
.phrase-burst span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #008af5 45%, #28c9ee 85%, transparent); box-shadow: 0 0 18px #008af5, 0 0 35px #28c9ee; opacity: 0; }
.phrase-burst.active span::after { animation: speed-ray 950ms linear 3 both; animation-delay: var(--delay); }
@keyframes burst-envelope { 0%,100% { opacity: 0; } 15%,70% { opacity: 1; } }
@keyframes speed-ray { 0% { opacity: 0; transform: translateX(8vmin) scaleX(.25); } 30%,65% { opacity: 1; } 100% { opacity: 0; transform: translateX(75vmax) scaleX(1.3); } }
@media (max-width: 600px) { header { left: 14px; top: 18px; } main { padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; will-change: auto !important; } }

.reference-canvas { position:absolute; inset:0; width:100%; height:100%; }
[data-bg-motion="rays"] .ambient > :not(.reference-canvas), [data-bg-motion="vortex"] .ambient > :not(.reference-canvas), [data-bg-motion="zigzag"] .ambient > :not(.reference-canvas) { display:none; }
[data-bg-motion="sport"] .motion-bands { opacity:.5; inset: auto; left:50%; top:50%; width:250vmax; height:250vmax; margin-left:-125vmax; margin-top:-125vmax; transform-origin:center; animation: sport-bars 3s linear infinite, sport-direction 16s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes sport-bars { from { background-position: 0 0; } to { background-position: 318.198px 0; } }
@keyframes sport-direction { 0%,18% { transform:rotate(0deg); } 25%,43% { transform:rotate(90deg); } 50%,68% { transform:rotate(180deg); } 75%,93% { transform:rotate(270deg); } 100% { transform:rotate(360deg); } }
[data-bg-motion="sport"] .motion-grid { opacity:.28; animation-duration:5s; }
[data-bg-motion="sport"] .motion-shapes i { opacity:.6; width:clamp(20px,5vw,70px); animation-duration:3s; }
[data-bg-motion="sport"] .motion-ring { opacity:.55; animation-duration:4s; }

.motion-ring--upper, .motion-shapes i.extra-cross { display:none; }
[data-bg-motion="sport"] .motion-ring--upper { display:block; width:48vmin; height:48vmin; left:-13vmin; top:-11vmin; right:auto; bottom:auto; border-width:5vmin; animation-direction:reverse; animation-duration:6s; }
[data-bg-motion="sport"] .motion-shapes i.extra-cross { display:block; width:clamp(18px,3vw,42px); background:#087eb9; clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }

/* Original soft color-blob background, without geometric overlays. */
[data-bg-motion="original"] .motion-bands,
[data-bg-motion="original"] .motion-grid,
[data-bg-motion="original"] .motion-ring,
[data-bg-motion="original"] .motion-shapes { display: none; }

[data-bg-motion="vortex"] .ambient > .waves-host { display:block; position:absolute; inset:0; }

/* Blend the central phrase with the fluid gradient. */
[data-bg-motion="original"] main { mix-blend-mode: overlay; }
[data-bg-motion="original"] h1 { color: #fff; text-shadow: none; }

[data-bg-motion="vortex"] .waves-host { filter: contrast(1.65) brightness(.92); }