.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #f4f3ef; color: #111; pointer-events:none; transition: opacity .2s var(--ease), visibility .2s; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.counter { font-family: var(--display); font-size: clamp(4rem, 10vw, 9rem); font-variant-numeric: tabular-nums; }
.counter::after { content: "%"; color: var(--acid); }
.hero-orbit { transform-style: preserve-3d; transform: rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); transition: transform .25s ease-out; }
.orbit-line { position: absolute; border: 1px solid rgba(255,213,39,.45); border-radius: 50%; animation: orbit 18s linear infinite; }
.orbit-line:nth-child(2) { animation-direction: reverse; animation-duration: 24s; }
.particle { position: absolute; width: 3px; aspect-ratio: 1; border-radius: 50%; background: var(--acid); box-shadow: 0 0 15px var(--acid); animation: flicker 2s ease-in-out infinite alternate; }
.float-card { animation: drift 6s ease-in-out infinite alternate; }
.float-card:nth-child(even) { animation-delay: -3s; animation-direction: alternate-reverse; }
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); }
.marquee-track { display: inline-flex; min-width: max-content; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--display); font-size: clamp(4rem,9vw,10rem); line-height: .9; padding-right: 3rem; }
.word-wipe { background: linear-gradient(90deg,var(--acid),var(--acid)) no-repeat 0 100%/0 12%; transition: background-size 1s var(--ease); }
.is-visible .word-wipe { background-size: 100% 12%; }
.cursor { position: fixed; z-index: 90; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%,-50%); transition: width .2s,height .2s; }
.cursor.is-active { width: 46px; height: 46px; }
.cursor.is-hero { width: 30px; height: 30px; border-color: var(--acid); background: radial-gradient(circle, var(--acid) 0 2px, transparent 3px); box-shadow: 0 0 0 5px rgba(255,213,39,.08), 0 0 28px rgba(255,213,39,.45); mix-blend-mode: screen; }
.cursor.is-hero.is-active { width: 52px; height: 52px; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes flicker { to { opacity: .2; transform: scale(.5); } }
@keyframes drift { to { transform: translate3d(0,-14px,20px) rotate(1deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover:none), (pointer:coarse) { .cursor { display:none; } }