/* HADES One Universe — V0.3
 * La escena del espacio se dibuja en 3D (assets/js/universe.js).
 * Este CSS sólo se encarga de la interfaz y de un respaldo sin WebGL. */

:root{
  color-scheme:dark;
  --bg:#030108;
  --violet:#8b5cf6;
  --violet-2:#c4b5fd;
  --violet-deep:#4c1d95;
  --rose:#f0abfc;
  --white:#f8f5ff;
  --muted:#c5bbd9;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--white)}
body{min-height:100vh;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}

.universe{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;min-height:560px;overflow:hidden;background:#020106;display:grid;place-items:center}

/* Lienzo 3D */
#universeCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:-5;display:block;opacity:0;transition:opacity .6s ease}
.universe-ready #universeCanvas{opacity:1}

/* Respaldo sin WebGL: nebulosa pintada con gradientes */
.fallback-sky{display:none;position:absolute;inset:0;z-index:-5;background:radial-gradient(ellipse at 50% 48%,#291052 0%,#130a2d 31%,#080516 63%,#020208 100%)}
.fallback-sky span{position:absolute;border-radius:50%;opacity:.75;will-change:transform}
.fallback-sky span:first-child{width:80vw;height:62vw;left:-14%;top:-16%;background:radial-gradient(closest-side,#8b2cc9a6 0%,#4c1d9566 45%,transparent 100%);animation:nebula-drift 18s ease-in-out infinite alternate}
.fallback-sky span:last-child{width:80vw;height:62vw;right:-18%;bottom:-24%;background:radial-gradient(closest-side,#e2558f8c 0%,#7c2bb85c 42%,transparent 100%);animation:nebula-drift 23s ease-in-out infinite alternate-reverse}
.fallback-sky:after{content:"";position:absolute;inset:0;opacity:.8;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 68% 14%,#e9ddff,transparent),radial-gradient(1.5px 1.5px at 84% 62%,#fff,transparent),radial-gradient(1px 1px at 32% 78%,#f5d0fe,transparent),radial-gradient(1px 1px at 52% 44%,#fff,transparent),radial-gradient(1.5px 1.5px at 22% 56%,#ddd6fe,transparent),radial-gradient(1px 1px at 90% 30%,#fff,transparent),radial-gradient(1px 1px at 6% 88%,#fff,transparent);background-size:420px 420px}
.no-webgl .stage-shade{opacity:1;transition:none}
.no-webgl .fallback-sky{display:block}
.no-webgl #universeCanvas{display:none}

/* Sombra suave detrás del texto para máxima legibilidad sobre la galaxia */
.stage-shade{position:absolute;left:50%;top:50%;width:min(900px,120vw);height:min(560px,90vh);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,#05020cc4 0%,#05020c80 42%,transparent 72%);opacity:0;transition:opacity 2s ease 2.8s}
.universe-ready .stage-shade{opacity:1}
.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#03010899 0%,transparent 26%,transparent 80%,#03010866 100%)}

/* Marca superior */
.top-mark{position:absolute;top:30px;left:34px;display:flex;align-items:center;gap:10px;color:#d9cafa;font-size:10px;letter-spacing:.22em;font-weight:700;opacity:0;animation:fade-in 1.4s ease 2.2s forwards}
.top-mark i{font-style:normal;color:var(--violet);padding:0 4px}
.top-mark__dot{width:7px;height:7px;border-radius:50%;background:#b794ff;box-shadow:0 0 14px #a78bfa;animation:dot-pulse 2.6s ease-in-out infinite}
.version{position:absolute;top:32px;right:34px;color:#88799e;font-size:8px;letter-spacing:.18em;opacity:0;animation:fade-in 1.4s ease 2.4s forwards}
.version span{color:var(--violet);padding:0 4px}

/* Escenario central */
.center-stage{position:relative;z-index:2;width:min(720px,92vw);padding:30px 20px 65px;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 30px #05020cdd}

.logo-symbol{width:84px;height:84px;position:relative;margin-bottom:22px;display:grid;place-items:center;opacity:0;transform:scale(.6)}
.logo-symbol svg{width:100%;height:100%;position:relative;z-index:1;filter:drop-shadow(0 0 16px #a78bfa) drop-shadow(0 0 44px #d946ef88)}
.logo-symbol__orbit{position:absolute;inset:-9px;border:1px solid #c4b5fd66;border-radius:27px;transform:rotate(35deg);box-shadow:0 0 30px #a855f744,inset 0 0 20px #a855f722;animation:orbit-turn 14s linear infinite}
.logo-symbol__orbit:after{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 20px #c084fc}

.eyebrow{margin:0 0 14px;color:var(--violet-2);font-size:10px;font-weight:600;letter-spacing:.32em;opacity:0}
.brand-title{margin:0;font-size:clamp(32px,5.6vw,68px);font-weight:600;letter-spacing:-.055em;line-height:1.08;opacity:0;text-shadow:0 0 50px #8b5cf655,0 2px 30px #05020c}
.brand-title span{font-weight:300;background:linear-gradient(100deg,#f5d0fe 0%,#c4b5fd 38%,#a78bfa 62%,#f0abfc 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:title-sheen 8s ease-in-out infinite}
.tagline{margin:18px 0 0;color:#ddd3f0;font-size:clamp(13px,1.7vw,17px);font-weight:400;letter-spacing:.08em;opacity:0}

.logo-symbol.is-visible{animation:logo-arrive 1.8s var(--ease-out) forwards}
.eyebrow.is-visible{animation:fade-up 1.2s ease forwards}
.brand-title.is-visible{animation:title-arrive 1.6s var(--ease-out) forwards}
.tagline.is-visible{animation:fade-up 1.3s ease forwards}

/* Carga */
.loading-block{width:min(260px,70vw);margin-top:44px;opacity:0;animation:fade-up .8s ease .5s forwards}
.loading-block[hidden]{display:none}
.loading-track{height:2px;width:100%;overflow:hidden;background:#ffffff18;border-radius:10px}
.loading-track span{display:block;width:35%;height:100%;background:linear-gradient(90deg,transparent,#f0abfc,#8b5cf6,transparent);box-shadow:0 0 12px #a78bfa;animation:loading-sweep 2.1s ease-in-out infinite}
.loading-block p{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#b7a9d1;margin:13px 0 0;transition:opacity .3s}

/* Acciones finales */
.final-actions{width:min(420px,100%);margin-top:34px;animation:fade-up 1s ease both}
.final-actions[hidden],.setup-error[hidden]{display:none}
.welcome-copy{max-width:370px;margin:0 auto 25px;color:#d6cde6;font-size:14px;line-height:1.75}
.start-button{min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:0 26px;border-radius:14px;border:1px solid #e9ddff66;
  background:linear-gradient(110deg,#a855f7 0%,#7c3aed 35%,#c026d3 67%,#7c3aed 100%);background-size:220% 100%;color:white;text-decoration:none;font-size:14px;font-weight:700;
  box-shadow:0 0 35px #a855f766,0 0 75px #d946ef33,inset 0 1px #ffffff66;transition:transform .25s var(--ease-out),box-shadow .25s ease;position:relative;overflow:hidden;
  animation:button-spectrum 6s ease-in-out infinite}
.start-button:before{content:"";position:absolute;top:0;left:-110%;width:60%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#ffffff40,transparent);animation:button-sheen 5s ease-in-out infinite}
.start-button:hover{transform:translateY(-3px);box-shadow:0 0 55px #a855f7aa,0 0 110px #d946ef55,inset 0 1px #ffffff77}
.start-button:focus-visible{outline:2px solid #f5d0fe;outline-offset:4px}
.start-button__arrow{font-size:20px;font-weight:400;transition:transform .25s var(--ease-out)}
.start-button:hover .start-button__arrow{transform:translate(3px,-3px)}
.microcopy{font-size:10px;letter-spacing:.12em;color:#a99bbd;margin:18px 0 0}

/* Botón de sonido con ecualizador */
.sound-toggle{position:absolute;right:27px;bottom:25px;display:flex;align-items:center;gap:11px;padding:10px 15px;border:1px solid #ffffff2c;border-radius:99px;background:#0b0616b3;color:#e9e0fb;font:inherit;font-size:11px;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .3s;opacity:0;animation:fade-in 1s ease 1s forwards}
.sound-toggle:hover{background:#1d0f33;border-color:#b794ff88}
.sound-toggle:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}
.sound-toggle.is-on{border-color:#c084fc88;box-shadow:0 0 24px #a855f744}
.sound-bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound-bars i{display:block;width:2px;height:4px;border-radius:2px;background:#c4b5fd;transition:height .3s}
.sound-toggle.is-on .sound-bars i{animation:eq 1.1s ease-in-out infinite}
.sound-toggle.is-on .sound-bars i:nth-child(2){animation-delay:-.4s}
.sound-toggle.is-on .sound-bars i:nth-child(3){animation-delay:-.8s}
.sound-toggle.is-on .sound-bars i:nth-child(4){animation-delay:-.2s}

.bottom-caption{position:absolute;bottom:31px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#9b8caf;font-size:8px;letter-spacing:.3em;white-space:nowrap;opacity:0;animation:fade-in 1.2s ease 4.4s forwards}
.bottom-caption__line{height:1px;width:27px;background:linear-gradient(90deg,transparent,var(--violet))}
.bottom-caption__line:last-child{transform:rotate(180deg)}

.setup-error{margin-top:35px;color:#f0d8ff;font-size:13px}
.retry-button{border:1px solid #c4b5fd55;border-radius:10px;padding:11px 17px;background:#211238;color:white;cursor:pointer;font:inherit}

/* Salida hacia la siguiente pantalla */
.universe:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 50%,#f5e9ff 0%,#a855f7 30%,#030108 75%);opacity:0;transition:opacity .65s ease}
.is-leaving .universe:after{opacity:1}
.is-leaving .center-stage{transform:scale(1.06);opacity:0;transition:transform .6s ease,opacity .6s ease}

/* Pantallas secundarias */
.secondary-body{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#32145b 0%,#10091d 42%,#07030f 100%);animation:fade-in .8s ease both}
.secondary-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.secondary-card{width:min(100%,500px);padding:42px 34px;text-align:center;border:1px solid #ffffff1c;border-radius:26px;background:#120b20d9;box-shadow:0 25px 100px #0008;backdrop-filter:blur(10px)}
.mini-emblem{width:62px;height:62px;margin:0 auto 22px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(135deg,#a78bfa,#5b21b6);font-size:34px;font-weight:800;box-shadow:0 0 30px #8b5cf655}
.secondary-card .eyebrow{opacity:1;animation:none}
.secondary-card h1{font-size:clamp(27px,5vw,42px);letter-spacing:-.045em;line-height:1.15}
.secondary-card h1 span{color:#c4b5fd}
.secondary-card p:not(.eyebrow){color:#c9c2d5;line-height:1.7}
.secondary-card .start-button{margin-top:18px}

@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-arrive{0%{opacity:0;transform:translateY(18px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes logo-arrive{0%{opacity:0;transform:scale(.4) rotate(-24deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes orbit-turn{to{transform:rotate(395deg)}}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 8px #a78bfa}50%{box-shadow:0 0 18px #e879f9,0 0 30px #a78bfa}}
@keyframes title-sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes loading-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}
@keyframes button-sheen{0%,65%{left:-110%}85%,100%{left:160%}}
@keyframes button-spectrum{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
@keyframes nebula-drift{from{transform:translate3d(-3%,2%,0) scale(.92) rotate(-6deg)}to{transform:translate3d(4%,-3%,0) scale(1.1) rotate(8deg)}}

@media(max-width:600px){
  .top-mark{top:20px;left:18px;font-size:8px}
  .version{display:none}
  .center-stage{padding:25px 16px 90px}
  .logo-symbol{width:70px;height:70px}
  .brand-title{font-size:clamp(30px,9vw,44px)}
  .tagline{letter-spacing:.03em}
  .sound-toggle{right:14px;bottom:14px;padding:9px 12px}
  .bottom-caption{bottom:60px;font-size:7px;letter-spacing:.18em}
  .bottom-caption__line{width:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.setup-error p b,.setup-error p code{color:#e9ddff}.demo-link{display:inline-block;margin-top:12px;color:#c4b5fd;font-size:13px;text-decoration:none;border-bottom:1px solid #c4b5fd55}.demo-link:hover{color:#fff}

/* Saltar la intro */
.skip-hint{margin:12px 0 0;font-size:10px;letter-spacing:.16em;color:#8f80a8;text-transform:uppercase;opacity:0;animation:fade-in 1s ease 1.6s forwards}
.intro-done .skip-hint{display:none}