/* Hades Studio – Animaciones y escenas (yelmo, templo, scroll) */

/* ---------- Estado base con JS ---------- */
.js:not(.fx-failed):not(.rm) [data-hero]{opacity:0}
.fx-on .reveal{opacity:1;transform:none;transition:none}

/* ---------- Barra de progreso + luz del cursor ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#c15cff,#8c52ff 45%,#f6b834);box-shadow:0 0 14px rgba(140,82,255,.7);pointer-events:none}
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(circle,rgba(140,82,255,.13),rgba(246,184,52,.04) 40%,transparent 66%);mix-blend-mode:screen}
@media (pointer:coarse){.cursor-glow{display:none}}
.nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease}
.nav.is-hidden:not(.open){transform:translateY(-110%)}
.nav.is-solid{background:rgba(13,2,32,.92);border-bottom-color:rgba(149,108,255,.22)}

/* ---------- Palabras que suben (títulos) ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .14em;margin:-.06em -.02em -.14em}
.fx-wi{display:inline-block;will-change:transform}

/* ---------- Hero: el yelmo ---------- */
.helm-stage{position:relative;width:min(600px,100%);aspect-ratio:1/1;display:grid;place-items:center}
.helm-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.helm-halo{position:absolute;inset:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(140,82,255,.34),rgba(180,77,255,.13) 46%,transparent 70%);filter:blur(34px);animation:haloBreath 5.5s ease-in-out infinite}
.helm-stage .orbit-ring{border-color:rgba(126,92,255,.2)}
.helm-stage .orbit-ring::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.helm-stage .ring-2::after{background:var(--violet2);box-shadow:0 0 14px var(--violet2);left:12%;top:auto;bottom:6%}
.helm-stage .ring-3::after{display:none}
.brain-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border-radius:15px;font-weight:700;font-size:.88rem;line-height:1.1;white-space:nowrap;color:#fff;background:rgba(30,8,62,.78);border:1px solid rgba(200,130,255,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 30px rgba(0,0,0,.28);animation:chipFloat 6.5s ease-in-out infinite}
.brain-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.brain-chip.chip-2::before,.brain-chip.chip-4::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.helm-stage .chip-1{left:2%;top:15%}
.helm-stage .chip-2{right:0;top:9%;animation-delay:-1.6s}
.helm-stage .chip-3{left:-1%;bottom:25%;animation-delay:-3.1s}
.helm-stage .chip-4{right:3%;bottom:17%;animation-delay:-4.4s}
.brain-readout{position:absolute;left:50%;bottom:1%;z-index:3;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px;row-gap:8px;padding:12px 18px;border-radius:16px;background:rgba(22,5,48,.72);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.brain-readout b{font-family:var(--font-head);font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.brain-readout span{color:var(--muted);font-size:.84rem}
.brain-readout i{grid-column:1/-1;height:3px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.brain-readout u{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--violet2),var(--gold));text-decoration:none}
@keyframes haloBreath{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.06}}
@keyframes chipFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ---------- Divisor griego (greca) ---------- */
.greca{height:24px;width:min(1180px,92%);margin:6px auto;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='24' viewBox='0 0 36 24'%3E%3Cpath d='M0 22H36M8 22V4H30V17H18V10H24' fill='none' stroke='%238c52ff' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x center/auto 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.js:not(.rm) .greca{clip-path:inset(0 100% 0 0)}

/* ---------- Tilt 3D (luz que sigue al puntero) ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 46%)}
[data-tilt]:hover::after{opacity:1}
.quote[data-tilt]::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(140,82,255,.12),transparent 50%)}

/* ---------- Panteón: panel y emblema ---------- */
.pan-art .em-big{will-change:transform}
.pan-art.is-swap .em-big{filter:drop-shadow(0 0 22px rgba(140,82,255,.55))}
.em-big .wing,.em-big .hammer{transform-box:fill-box}
.pan-cta.is-soon{background:linear-gradient(135deg,#2a1a8c,#7a2fe0);border:1px solid rgba(255,255,255,.2)}

/* ---------- Templo (escena fijada) ---------- */
.temple .t-torch .flame{transform-box:fill-box;transform-origin:50% 100%}
.temple .t-torch.lit .flame{animation:flame 1.1s ease-in-out infinite alternate}
.temple #torchR.lit .flame{animation-delay:-.5s}
.temple .t-stars circle{animation:twinkle 3.2s ease-in-out infinite}
.temple .t-stars circle:nth-child(2n){animation-delay:-1.1s}
.temple .t-stars circle:nth-child(3n){animation-delay:-2.1s}
@keyframes flame{0%{transform:scale(1,.9) skewX(-3deg)}100%{transform:scale(1.08,1.12) skewX(4deg)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}

/* Pantallas chicas o con movimiento reducido: sin fijar, todo visible */
.god-section.is-static .god-pin{min-height:0;padding:70px 0}
.god-section.is-static .god-chapters{min-height:0;display:grid;gap:34px}
.god-section.is-static .chapter{grid-area:auto;max-width:none}
.god-section.is-static .chapter:not(:first-child){padding:24px 22px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.god-section.is-static .god-steps{display:none}
.god-section.is-static .temple-wrap{order:-1}

/* ---------- Oráculo: tablero ---------- */
.dash{will-change:transform}
.js:not(.rm) .dash-tip{opacity:0}

/* ---------- Ventana "Próximamente" ---------- */
.soon-modal{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(2,4,14,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.soon-modal.active{display:flex}
.soon-card{position:relative;width:min(420px,92vw);padding:42px 30px 32px;border-radius:32px;text-align:center;overflow:hidden;background:linear-gradient(160deg,#35106e,#16043a);border:1px solid rgba(149,108,255,.4);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:soonIn .35s cubic-bezier(.2,.8,.2,1)}
.soon-card::before{content:"";position:absolute;left:50%;top:-90px;width:320px;height:200px;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgba(140,82,255,.45),transparent 70%);pointer-events:none}
.soon-card>*{position:relative}
.soon-ico{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(140,82,255,.35),rgba(180,77,255,.2));border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(80,60,255,.4)}
.soon-ico .em{width:54px;height:54px}
.soon-tag{display:inline-flex;margin-bottom:10px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:#c9a7ff;font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em}
.soon-card h2{display:inline-block;font-size:clamp(2rem,9vw,2.7rem);line-height:1.2;padding:0 .08em .14em;margin:6px 0 10px;background:linear-gradient(135deg,#c9a4ff,#2f8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.soon-card p{color:var(--muted);line-height:1.6;max-width:350px;margin:auto}
.soon-close{position:absolute!important;top:14px;right:14px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;cursor:pointer}
.soon-close:hover{background:rgba(255,255,255,.14)}
.soon-form{display:grid;gap:12px;margin-top:22px;text-align:left}
.soon-form input[type=email]{width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(18,4,40,.85);color:#fff;font-size:1rem}
.soon-form input[type=email]::placeholder{color:#8e8bb3}
.soon-form input[type=email]:focus{outline:2px solid var(--violet);border-color:transparent}
.soon-form .btn{width:100%;margin:0}
.soon-form .btn[disabled]{opacity:.7;cursor:wait}
.soon-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.soon-msg{min-height:1.3em;margin:0;text-align:center;font-size:.92rem;line-height:1.4}
.soon-msg.ok{color:#7ff0b0}
.soon-msg.bad{color:#ffb3cf}
@keyframes soonIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Movimiento reducido ---------- */
.rm *,.rm *::before,.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
.rm .greca{clip-path:none}
.fx-failed [data-hero]{opacity:1!important}
.fx-failed .greca{clip-path:none}
.fx-failed .dash-tip{opacity:1}

@media (max-width:760px){
  .brain-chip{font-size:.78rem;padding:9px 12px}
  .helm-stage .chip-1{left:0;top:8%}
  .helm-stage .chip-3{left:0;bottom:24%}
  .brain-readout{padding:10px 14px}
  .pan-panel{text-align:left}
}