/* Capa visual del sitio: WebGL, viñeta, grano, loader, cursor, revelado de texto, mini-reproductor */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.veil{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(3,3,24,.7) 100%)}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:2;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* Si el navegador no tiene WebGL: resplandor CSS de respaldo */
html.no-gl body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 46% at 86% -6%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(70,60,190,.16),transparent 70%)}

/* loader (igual que el del sitio) */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
#loader .logo{display:block;width:212px;height:auto}
#loader .bar{width:160px;height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#loader p{margin:0;font-size:13px;color:var(--muted);letter-spacing:.04em}

/* revelado de títulos por palabra */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin-bottom:-.14em}
.c{display:inline-block;will-change:transform}

/* cursor */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:200;display:none;place-items:center;
  font-size:13px;font-weight:500;color:#07061a;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){.cursor{display:grid}}

/* mini-reproductor (el del sitio): suena en cualquier pantalla */
.mini{position:fixed;left:clamp(18px,3.4vw,48px);bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(3,3,24,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s,transform .5s,visibility 0s linear .5s}
.mini.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .5s,visibility 0s}
.mini .pbtn{width:42px;height:42px}.mini .pbtn .ico{width:13px;height:13px}
.mini button.info{text-align:left;max-width:190px}
.mini b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini span.s{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq{display:flex;gap:3px;align-items:flex-end;height:22px;width:26px}
.eq i{flex:1;background:var(--accent);height:28%;border-radius:2px;transition:background .8s}
.mini.playing .eq i{animation:eq .9s ease-in-out infinite}
.mini.playing .eq i:nth-child(2){animation-delay:-.3s}.mini.playing .eq i:nth-child(3){animation-delay:-.6s}.mini.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}

/* portada / arte en el drawer de release */
.d-hero{display:flex;gap:22px;align-items:flex-end;margin:0 0 30px}
.d-hero>div{min-width:0}
.d-cover{flex:none;width:clamp(130px,16vw,190px);aspect-ratio:1/1;object-fit:cover;border-radius:4px;border:1px solid var(--line);box-shadow:0 0 60px -14px var(--accent);background:#07061a}
.d-hero .d-sub{margin-bottom:6px}
@media (max-width:860px){.d-hero{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.mini.playing .eq i{animation:none}}

/* aviso del modo mock (config.useMock) */
.preview-badge{position:fixed;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:35;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(10,10,42,.85);backdrop-filter:blur(8px);font-size:12.5px;color:var(--muted);pointer-events:none}