.hero-motion { display: none; }
.hero-image-frame.hero-mascots-ready,html[data-theme="dark"] .hero-image-frame.hero-mascots-ready { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible; }
.hero-mascots-ready > .hero-friends { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.hero-trio { position: absolute; inset: 0; pointer-events: none; opacity: 0; isolation: isolate; }
.hero-mascots-ready > .hero-trio { opacity: 1; }
.hero-mascot { position: absolute; top: 10%; width: 58%; height: auto; max-width: none; aspect-ratio: 1; object-fit: contain; transform-origin: 50% 50%; user-select: none; filter: drop-shadow(0 18px 15px #1a243211); will-change: transform; }
.hero-mascot--hook { left: -12%; z-index: 2; transform: translateY(1.113138%) rotate(-8deg); }.hero-mascot--magnet { left: 22%; z-index: 3; }.hero-mascot--dollar { left: 50%; z-index: 4; transform: translateY(1.41098%) rotate(10.103677deg); }
.hero-steel-ball { position: absolute; left: 0; top: 0; width: 3.625%; aspect-ratio: 1; z-index: 5; border-radius: 50%; background: radial-gradient(circle at 29% 22%,#fff 0 7%,#e7f4f8 14%,#bbc9d1 32%,#61717e 56%,#d5e6f0 75%,#71868e 100%); box-shadow: inset -2px -3px 4px #10283760,0 3px 6px #10223530; will-change: transform; }
.hero-steel-ball::after { content: ''; position: absolute; inset: 17% 24% 51% 22%; border-radius: 50%; background: #fff8; rotate: -25deg; }
.hero-pole-field { position: absolute; width: 22%; height: 25%; left: 40%; top: 5%; border: 1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-bottom: 0; border-radius: 50% 50% 0 0; transform: rotate(2deg); z-index: 0; }
.hero-pole-field::before,.hero-pole-field::after { content: ''; position: absolute; inset: 8% 9% 0; border: inherit; border-bottom: 0; border-radius: inherit; opacity: .6; }
.hero-pole-field::after { inset: -13% -10% 0; opacity: .35; }
.hero-trio[data-motion-state="paused"] .hero-mascot,.hero-trio[data-motion-state="paused"] .hero-steel-ball { will-change: auto; }
@media(max-width:800px) { .hero-art { height: min(450px, 75vw + 52px); } }
@media(max-width:400px) { .hero-art { height: calc(75vw + 52px); } }
@media(prefers-reduced-motion:reduce) { .hero-mascot,.hero-steel-ball { will-change: auto; } }