:root{
  --bg:#0a0612; --bg2:#120a24; --panel:#1a0b3d; --line:#2a0a5e;
  --v3:#8a00e6; --neon:#c000ff;
  --text:#f1e9ff; --muted:#a595c7;
  --live:#e91916;
}
*{box-sizing:border-box;margin:0}
a{color:inherit}

/* Fondo estilo linktree del clan Housen: degradado morado→lavanda, velo oscuro arriba y grano */
body{
  color:var(--text);font:16px/1.6 Saira,system-ui,sans-serif;overflow-x:hidden;min-height:100vh;
  background:
    linear-gradient(180deg, rgba(8,4,18,.92) 0%, rgba(8,4,18,.55) 45%, rgba(8,4,18,0) 100%),
    linear-gradient(0deg, #401e77, #525fab);
  background-color:var(--bg);
  background-attachment:fixed;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.18;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{position:fixed;inset:-20% -20% auto;height:80vh;background:radial-gradient(closest-side,#8a00e655,transparent);pointer-events:none;z-index:-1;opacity:.6}
/* Truenos: canvas fijo detrás de todo */
#storm{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* Tipografía del clan: Anton (títulos), Saira (texto), Space Mono (etiquetas) */
h1,h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
h2{font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.05}
.eyebrow,.rank h3,small,footer,.live-pill,.btn-ghost,.rank .mmr{font-family:"Space Mono",monospace}
small,.muted{color:var(--muted)}

/* Hero */
.hero{text-align:center;padding:48px 16px 28px}
.eyebrow{margin-top:12px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}
h1{font-size:clamp(2.4rem,9vw,5rem);line-height:1;margin-top:8px}
h1 .sub{display:block;color:var(--neon);text-shadow:0 0 24px #c000ff99;font:700 .5em "Space Mono",monospace;letter-spacing:.3em}
h1 [data-char]{display:inline-block}
.tag{color:var(--muted);margin-top:14px}

/* Lobo 3D: capas apiladas dan grosor; el giro lo controla anim.js */
.logo3d{width:min(240px,55vw);aspect-ratio:1;margin:0 auto;perspective:900px}
.spin{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:visible}
.spin .logo{transform:translateZ(1px);filter:drop-shadow(0 0 32px #c000ff88)}
.logo-layer{transform:translateZ(var(--z));filter:brightness(var(--b)) saturate(1.3)}
.logo-back{transform:translateZ(-16px) rotateY(180deg);filter:brightness(.8)}

/* En vivo */
@keyframes pulse{50%{opacity:.3}}
.live-pill{display:inline-flex;align-items:center;margin-top:14px;padding:6px 14px;border-radius:999px;background:var(--live);color:#fff;text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;box-shadow:0 0 20px rgba(233,25,22,.5)}
.live-pill[hidden]{display:none}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;margin-right:8px;animation:pulse 1.2s infinite}

/* Contenido */
main{max-width:1000px;margin:auto;padding:0 16px;text-align:center}
section{margin-bottom:56px}
.head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}

/* Redes: solo iconos */
.socials{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.social{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);transition:border-color .2s,transform .2s}
.social:hover{border-color:var(--neon);transform:translateY(-3px)}
.icon{width:34px;height:34px;color:var(--neon);filter:drop-shadow(0 0 10px rgba(192,0,255,.5));transition:transform .2s}
.social:hover .icon{transform:scale(1.12)}
.social.is-live::after{content:"";position:absolute;top:8px;right:8px;width:12px;height:12px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px var(--bg2);animation:pulse 1.2s infinite}

/* Carrusel de rank */
.carousel{max-width:760px;margin:0 auto}
.stage{position:relative;height:400px;perspective:1100px;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;user-select:none;outline:none}
.stage.dragging{cursor:grabbing}
.stage.dragging .rcard{transition:none}
.stage:focus-visible{box-shadow:0 0 0 2px var(--neon);border-radius:18px}
.rcard{position:absolute;top:10px;left:50%;width:min(300px,78vw);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s;transform-style:preserve-3d}
.rcard:not(.is-active){cursor:pointer}
.rank{
  position:relative;overflow:hidden;padding:28px 22px 26px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,rgba(26,11,61,.95),rgba(18,10,36,.95));
  border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45);
  transition:transform .25s ease-out,border-color .3s;
}
.rcard.is-active .rank{border-color:rgba(192,0,255,.6)}
.rank::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(192,0,255,.28),transparent 55%)}
.rcard.is-active:hover .rank::after{opacity:1}
.rank img{width:130px;height:130px;object-fit:contain;margin:10px auto 4px;display:block;pointer-events:none;filter:drop-shadow(0 8px 24px rgba(192,0,255,.35))}
.rank h3{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.rank .tier{font-family:Anton,Impact,sans-serif;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;margin-top:6px}
.rank .mmr{color:var(--neon);font-weight:600;font-size:1.5rem;margin-top:6px}
[data-mmr]{display:inline-block}
.controls{display:flex;justify-content:center;margin-top:6px}
.dots{display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.dot.on{width:28px;border-radius:6px;background:var(--neon)}
@media (max-width:520px){.stage{height:380px}}

/* Botones secundarios (Tracker, clan, Discord) */
.clan-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.btn-ghost{padding:10px 20px;border:1px solid var(--neon);border-radius:10px;text-decoration:none;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;transition:background .2s}
.btn-ghost:hover{background:rgba(192,0,255,.18)}

.about p{max-width:65ch;margin-inline:auto;color:#d9ccf3}
footer{text-align:center;padding:32px 16px;color:var(--muted);border-top:1px solid rgba(255,255,255,.08)}

/* anime.js: estado inicial oculto solo si hay animaciones */
.anim .logo3d,.anim .eyebrow,.anim .tag{opacity:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}