s with their own transform-origin.
- Limb keyframes use per-dancer CSS custom properties (--swing-dur,
--swing-amp, etc.) so every character moves at its own pace/energy.
- Horizontal+vertical position is driven by JS (requestAnimationFrame);
each dancer picks random targets all over the viewport.
- --facing flips the puppet left/right depending on its velocity sign.
======================================================================== */
:root {
--skin: #f6c9a4;
--shoe: #2b2b2b;
--lexx-blue: #00acef;
--lexx-dark: #0b1f3a;
--head-size: 88px;
--torso-w: 66px;
--torso-h: 84px;
--arm-w: 17px;
--arm-len: 66px;
--leg-w: 21px;
--leg-len: 82px;
}
/* Embedded in lexx.test — do not reset global html/body (would break the site). */
#confetti-canvas {
position: fixed; inset: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 9998;
}
/* ===================== STAGE ======================= */
.stage {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
opacity: 0;
/* Dim eases in over 1s when .is-active is applied (sync with overlay timing) */
transition: opacity 1000ms ease-out;
}
.stage.is-active { opacity: 1; }
/* Soft dim over the page (behind banner + dancers, above site content). */
.celebration-backdrop {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(11, 24, 48, 0.52);
pointer-events: none;
}
/* ===================== DANCER ====================== */
/* JS sets left/top directly. --facing = 1 (right) or -1 (left).
--scale randomizes the dancer's size for depth variety. */
.dancer {
--facing: 1;
--scale: 1;
position: absolute;
z-index: 1;
left: 0; top: 0;
width: 130px; height: 240px;
transform:
translate(-50%, -50%)
scale(calc(var(--scale) * 1))
scaleX(calc(var(--facing) * 1));
will-change: left, top, transform;
}
/* ---------- TORSO ---------- */
.dancer__torso {
position: absolute;
left: 50%;
bottom: calc(var(--leg-len) - 10px);
transform: translateX(-50%);
width: var(--torso-w); height: var(--torso-h);
background: var(--body-color, var(--lexx-blue));
border-radius: 22px 22px 14px 14px;
box-shadow: inset -8px -4px 0 rgba(0,0,0,0.08);
/* every dancer gets its own sway speed/intensity */
animation: torso-sway var(--torso-dur, 0.7s) infinite ease-in-out;
animation-delay: var(--phase, 0s);
}
.dancer__torso::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -6px; height: 10px;
background: rgba(0,0,0,0.2); border-radius: 0 0 14px 14px;
}
.dancer__torso::before { /* neck stub (keeps body faceless) */
content: '';
position: absolute; top: -6px; left: 50%;
transform: translateX(-50%);
width: 22px; height: 14px;
background: var(--skin); border-radius: 50% 50% 0 0;
}
/* ---------- ARMS ---------- */
.dancer__arm {
position: absolute;
width: var(--arm-w); height: var(--arm-len);
top: calc(var(--leg-len) + 8px);
background: var(--body-color, var(--lexx-blue));
border-radius: var(--arm-w);
transform-origin: 50% 8px;
animation-duration: var(--arm-dur, 0.55s);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.dancer__arm::after { /* forearm/skin */
content: '';
position: absolute; left: 0; right: 0; bottom: -4px;
height: 26px;
background: var(--skin);
border-radius: 0 0 var(--arm-w) var(--arm-w);
}
.dancer__arm--left { left: calc(50% - var(--torso-w)/2 - var(--arm-w) + 2px); }
.dancer__arm--right { right: calc(50% - var(--torso-w)/2 - var(--arm-w) + 2px); }
/* ---------- LEGS ---------- */
.dancer__leg {
position: absolute;
width: var(--leg-w); height: var(--leg-len);
bottom: 0;
background: var(--lexx-dark);
border-radius: 8px 8px 4px 4px;
transform-origin: 50% 4px;
animation-duration: var(--leg-dur, 0.5s);
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.dancer__leg::after { /* shoe */
content: '';
position: absolute; left: -2px; right: -2px; bottom: -4px;
height: 12px;
background: var(--shoe);
border-radius: 4px 10px 6px 4px;
}
.dancer__leg--left { left: calc(50% - var(--leg-w) - 2px); }
.dancer__leg--right { right: calc(50% - var(--leg-w) - 2px); }
/* ---------- HEAD ---------- */
.dancer__head {
position: absolute;
z-index: 2; /* always paint the face on top of torso / neck / arms */
left: 50%;
bottom: calc(var(--leg-len) + var(--torso-h) - 8px);
transform: translateX(-50%);
width: var(--head-size); height: var(--head-size);
/* For text-initial fallback only; hidden as soon as an
![]()
is present. */
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: white; font-size: 26px;
letter-spacing: 0.5px;
animation: head-bob var(--head-dur, 0.55s) infinite ease-in-out;
animation-delay: var(--phase, 0s);
/* counter the parent's scaleX(facing) so the face PNG never mirrors */
--face-flip: calc(var(--facing) * 1);
}
.dancer__head img {
width: 100%; height: 100%; object-fit: contain; display: block;
transform: scaleX(var(--face-flip));
/* Soft lift shadow on the transparent PNG's actual shape */
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
/* Fallback styling for initials-only heads (no PNG yet):
keep the colored circle look. Browsers that don't support :has() will
simply render a square bubble, which is acceptable. */
.dancer__head:not(:has(img)) {
border-radius: 50%;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
border: 3px solid rgba(255,255,255,0.9);
}
/* ======================================================================
MOVES — applied via `data-move`. Each uses the dancer's per-instance
duration CSS vars so the troupe looks lively, not synchronized.
====================================================================== */
/* Walk / groove base: legs alternate, arms counter-swing, body + head bob. */
.dancer[data-move="walk"] .dancer__leg--left { animation-name: leg-swing; }
.dancer[data-move="walk"] .dancer__leg--right { animation-name: leg-swing; animation-direction: reverse; }
.dancer[data-move="walk"] .dancer__arm--left { animation-name: arm-swing; animation-direction: reverse; }
.dancer[data-move="walk"] .dancer__arm--right { animation-name: arm-swing; }
/* Disco: arms up pumping, legs wide, torso sways big */
.dancer[data-move="disco"] .dancer__arm--right { animation-name: arm-disco-up; }
.dancer[data-move="disco"] .dancer__arm--left { animation-name: arm-disco-hip; }
.dancer[data-move="disco"] .dancer__leg--left { animation-name: leg-disco-open; }
.dancer[data-move="disco"] .dancer__leg--right { animation-name: leg-disco-open; animation-direction: reverse; }
/* Twist: big torso rotation, arms out like airplane */
.dancer[data-move="twist"] .dancer__arm--left { animation-name: arm-twist-left; }
.dancer[data-move="twist"] .dancer__arm--right { animation-name: arm-twist-right; }
.dancer[data-move="twist"] .dancer__leg--left { animation-name: leg-twist; }
.dancer[data-move="twist"] .dancer__leg--right { animation-name: leg-twist; animation-direction: reverse; }
/* Shuffle: quick steps, arms pumping forward */
.dancer[data-move="shuffle"] .dancer__leg--left { animation-name: leg-shuffle; }
.dancer[data-move="shuffle"] .dancer__leg--right { animation-name: leg-shuffle; animation-direction: reverse; }
.dancer[data-move="shuffle"] .dancer__arm--left { animation-name: arm-pump; }
.dancer[data-move="shuffle"] .dancer__arm--right { animation-name: arm-pump; animation-direction: reverse; }
/* Jump / fist pump: both arms shooting to sky, legs tucked */
.dancer[data-move="jump"] .dancer__arm--left { animation-name: arm-sky; }
.dancer[data-move="jump"] .dancer__arm--right { animation-name: arm-sky; animation-direction: reverse; }
.dancer[data-move="jump"] .dancer__leg--left { animation-name: leg-bent; }
.dancer[data-move="jump"] .dancer__leg--right { animation-name: leg-bent; animation-direction: reverse; }
/* Windmill: both arms rotating fully, torso tilts */
.dancer[data-move="windmill"] .dancer__arm--left { animation-name: arm-windmill; animation-timing-function: linear; }
.dancer[data-move="windmill"] .dancer__arm--right { animation-name: arm-windmill; animation-timing-function: linear; animation-delay: calc(var(--arm-dur, 0.55s) / -2); }
.dancer[data-move="windmill"] .dancer__leg--left { animation-name: leg-swing; }
.dancer[data-move="windmill"] .dancer__leg--right { animation-name: leg-swing; animation-direction: reverse; }
/* Kick: one leg shoots forward/up rhythmically, arms out for balance */
.dancer[data-move="kick"] .dancer__leg--right { animation-name: leg-kick-big; }
.dancer[data-move="kick"] .dancer__leg--left { animation-name: leg-plant; }
.dancer[data-move="kick"] .dancer__arm--left { animation-name: arm-balance-left; }
.dancer[data-move="kick"] .dancer__arm--right { animation-name: arm-balance-right; }
/* ======================================================================
KEYFRAMES — each move uses --*-amp CSS vars so per-dancer amplitude
is randomized too. Bigger amps = looser, more energetic dance.
====================================================================== */
/* --- Basic walk/groove --- */
@keyframes leg-swing {
0%,100% { transform: rotate(calc(var(--leg-amp, 28deg) * -1)); }
50% { transform: rotate(var(--leg-amp, 28deg)); }
}
@keyframes arm-swing {
0%,100% { transform: rotate(calc(var(--arm-amp, 30deg) * -1)); }
50% { transform: rotate(var(--arm-amp, 30deg)); }
}
/* --- Disco --- */
@keyframes arm-disco-up {
0%,100% { transform: rotate(-150deg) translateY(2px); }
50% { transform: rotate(-195deg) translateY(-4px); }
}
@keyframes arm-disco-hip {
0%,100% { transform: rotate(30deg) translateY(20px); }
50% { transform: rotate(-20deg) translateY(18px); }
}
@keyframes leg-disco-open {
0%,100% { transform: rotate(-18deg); }
50% { transform: rotate(22deg); }
}
/* --- Twist --- */
@keyframes arm-twist-left {
0%,100% { transform: rotate(85deg); }
50% { transform: rotate(115deg); }
}
@keyframes arm-twist-right {
0%,100% { transform: rotate(-85deg); }
50% { transform: rotate(-115deg); }
}
@keyframes leg-twist {
0%,100% { transform: rotate(-12deg); }
50% { transform: rotate(12deg); }
}
/* --- Shuffle --- */
@keyframes leg-shuffle {
0%,100% { transform: rotate(-18deg); }
50% { transform: rotate(18deg); }
}
@keyframes arm-pump {
0%,100% { transform: rotate(-55deg); }
50% { transform: rotate(-95deg); }
}
/* --- Jump --- */
@keyframes arm-sky {
0%,100% { transform: rotate(-160deg); }
50% { transform: rotate(-185deg); }
}
@keyframes leg-bent {
0%,100% { transform: rotate(-4deg); }
50% { transform: rotate(-18deg); }
}
/* --- Windmill --- */
@keyframes arm-windmill { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* --- Kick --- */
@keyframes leg-kick-big {
0%,100% { transform: rotate(-8deg); }
35% { transform: rotate(-60deg); }
70% { transform: rotate(10deg); }
}
@keyframes leg-plant {
0%,100% { transform: rotate(0deg); }
50% { transform: rotate(-5deg); }
}
@keyframes arm-balance-left {
0%,100% { transform: rotate(70deg); }
50% { transform: rotate(95deg); }
}
@keyframes arm-balance-right {
0%,100% { transform: rotate(-70deg); }
50% { transform: rotate(-95deg); }
}
/* --- Body / head bobbles --- */
@keyframes torso-sway {
0%,100% { transform: translateX(-50%) rotate(calc(var(--torso-amp, 6deg) * -1)); }
50% { transform: translateX(-50%) rotate(var(--torso-amp, 6deg)); }
}
@keyframes head-bob {
0%,100% { transform: translateX(-50%) translateY(0) rotate(calc(var(--head-amp, 6deg) * -1)); }
50% { transform: translateX(-50%) translateY(-5px) rotate(var(--head-amp, 6deg)); }
}
/* ======================================================================
Banner
====================================================================== */
.stage__banner {
position: absolute; top: 30px; left: 50%;
z-index: 2;
transform: translateX(-50%) scale(0);
padding: 16px 32px;
background: linear-gradient(90deg, #ffcc00, #ff66b3, var(--lexx-blue));
color: white;
font-size: 28px; font-weight: 800; letter-spacing: 1px;
border-radius: 999px;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
text-shadow: 0 2px 0 rgba(0,0,0,0.2);
animation: banner-in 0.6s 0.2s cubic-bezier(.3,1.6,.4,1) forwards, banner-pulse 1.5s 0.8s infinite ease-in-out;
}
@keyframes banner-in { 0% { transform: translateX(-50%) scale(0) rotate(-10deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes banner-pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
/* TEMP: floating stopwatch — remove block + SHOW_FLOATING_TIMER in JS before production */
.celebration-debug-timer {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 100;
display: flex;
align-items: baseline;
gap: 6px;
padding: 10px 14px;
border-radius: 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: rgba(11, 24, 48, 0.88);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
pointer-events: none;
line-height: 1.2;
}
.celebration-debug-timer__label {
font-size: 13px;
font-weight: 600;
opacity: 0.85;
}
.celebration-debug-timer__value {
font-variant-numeric: tabular-nums;
min-width: 4.5ch;
}
.celebration-debug-timer__unit {
font-size: 14px;
font-weight: 600;
opacity: 0.9;
}
.celebration-debug-timer__hint {
margin-left: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7dd3fc;
opacity: 0.9;
}