/* ======================================================================
   TRANSICIONES · View Transitions API (Chrome 111+/126+, Safari 18+); el resto cae al CSS de abajo
   ====================================================================== */
/* Entre páginas (rituales ↔ carta ↔ códigos): fundido suave, sin parpadeo */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-fade-out .28s ease both}
::view-transition-new(root){animation:vt-fade-in .38s ease both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
/* Entrada a la caverna (carta → rituales en el mismo documento) */
.vt-cave::view-transition-old(root){animation:vt-cave-out .6s cubic-bezier(.7,0,.3,1) both}
.vt-cave::view-transition-new(root){animation:vt-cave-in .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-cave-out{0%{transform:scale(1);opacity:1;filter:brightness(1)}100%{transform:scale(1.35);opacity:0;filter:brightness(.15) blur(6px)}}
@keyframes vt-cave-in{0%{opacity:0;transform:scale(1.08);filter:brightness(.35) saturate(.6)}60%{opacity:1}100%{opacity:1;transform:scale(1);filter:brightness(1) saturate(1)}}
/* Los seis medallones salen del remolino hacia su lugar en el anillo */
.vt-cave::view-transition-group(med-tierra),.vt-cave::view-transition-group(med-fuego),.vt-cave::view-transition-group(med-aire),
.vt-cave::view-transition-group(med-agua),.vt-cave::view-transition-group(med-mercurio),.vt-cave::view-transition-group(med-quintaesencia){animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.8,.2,1);z-index:11}
.vt-cave::view-transition-old(med-tierra),.vt-cave::view-transition-old(med-fuego),.vt-cave::view-transition-old(med-aire),.vt-cave::view-transition-old(med-agua),.vt-cave::view-transition-old(med-mercurio),.vt-cave::view-transition-old(med-quintaesencia){animation:none;opacity:0}
.vt-cave::view-transition-new(med-tierra),.vt-cave::view-transition-new(med-fuego),.vt-cave::view-transition-new(med-aire),.vt-cave::view-transition-new(med-agua),.vt-cave::view-transition-new(med-mercurio),.vt-cave::view-transition-new(med-quintaesencia){animation:vt-med-in .9s ease-out both;border-radius:50%;overflow:hidden}
@keyframes vt-med-in{0%{opacity:0;filter:brightness(3)}30%{opacity:1}100%{opacity:1;filter:brightness(1)}}
/* El logo viaja de la carta al centro de los elementos */
.vt-cave::view-transition-group(logo){animation-duration:.85s;animation-timing-function:cubic-bezier(.2,.8,.2,1);z-index:10}
.vt-cave::view-transition-old(logo){animation:vt-logo-out .85s ease both}
.vt-cave::view-transition-new(logo){animation:vt-logo-in .85s ease both}
@keyframes vt-logo-out{60%{opacity:1}100%{opacity:0}}
@keyframes vt-logo-in{0%{opacity:0}40%{opacity:0}100%{opacity:1}}
.vt-cave::view-transition-old(logo),.vt-cave::view-transition-new(logo){height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 0 22px rgba(201,168,76,.6))}

/* ---------- ENTRAR A LA CAVERNA (carta → rituales) y salir de ella ---------- */
/* la carta se hunde hacia la boca de la caverna */
.wrap{transition:transform .9s cubic-bezier(.6,0,.4,1),filter .9s ease}
.wrap.cave-in{transform:scale(1.6);filter:brightness(.25) blur(3px)}
.cave{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden;--x:50%;--y:45%}
/* paredes de roca que se cierran desde los lados */
.cave-rock{position:absolute;top:0;height:100%;width:60%;fill:#050400;filter:drop-shadow(0 0 30px rgba(0,0,0,.9))}
.cave-rock path{stroke:rgba(201,168,76,.28);stroke-width:.6;vector-effect:non-scaling-stroke}
.cave-rock-l{left:0;transform:translateX(-100%);animation:rock-l .75s cubic-bezier(.7,0,.3,1) .05s forwards}
.cave-rock-r{right:0;transform:translateX(100%);animation:rock-r .75s cubic-bezier(.7,0,.3,1) .05s forwards}
@keyframes rock-l{to{transform:translateX(-8%)}}
@keyframes rock-r{to{transform:translateX(8%)}}
/* luz de antorcha al fondo, titilando, centrada en la boca */
.cave-torch{position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),rgba(255,190,90,.55) 0,rgba(201,140,50,.28) 12%,rgba(10,9,0,0) 40%);animation:torch .9s ease-in-out forwards,torch-flicker .11s steps(2) infinite}
@keyframes torch{0%{opacity:0}25%{opacity:1}100%{opacity:.6}}
@keyframes torch-flicker{0%{filter:brightness(1)}100%{filter:brightness(1.25)}}
/* polvo de oro que flota hacia arriba */
.cave-dust{position:absolute;inset:0;opacity:0;background:
  radial-gradient(2px 2px at 30% 70%,#F1DE9A,transparent 60%),radial-gradient(1.5px 1.5px at 55% 80%,#C9A84C,transparent 60%),
  radial-gradient(2px 2px at 65% 60%,#FFF4CC,transparent 60%),radial-gradient(1.5px 1.5px at 42% 90%,#C9A84C,transparent 60%),
  radial-gradient(2px 2px at 72% 85%,#F1DE9A,transparent 60%),radial-gradient(1.5px 1.5px at 25% 88%,#FFF4CC,transparent 60%);
  animation:dust .9s ease-out forwards}
@keyframes dust{0%{opacity:0;transform:translateY(0) scale(1)}30%{opacity:1}100%{opacity:.6;transform:translateY(-14vh) scale(1.15)}}
/* la oscuridad cierra al final */
.cave-dark{position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),transparent 0,rgba(10,9,0,.6) 25%,#0A0900 55%);opacity:0;animation:cave-dark .45s ease-in .45s forwards}
@keyframes cave-dark{to{opacity:1}}
/* llegada: se abre la caverna desde lo oscuro, con la antorcha apagándose */
.portal-in{position:fixed;inset:0;z-index:999;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,190,90,.35) 0,rgba(10,9,0,.85) 30%,#0A0900 60%);animation:cave-open .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cave-open{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.cave,.portal-in{display:none}.wrap.cave-in{transform:none;filter:none}}