/* Cinemática "ritual" estilo Deltarune
   (archivo: css/components/ritual.css) */
#ritual-root{
  position:fixed; inset:0; z-index:2000000; display:none;
  font-family:'Press Start 2P','Courier New',monospace;
  color:#e8e8ee; overflow:hidden; user-select:none; -webkit-font-smoothing:none;
}
#ritual-root.on{ display:block; }
#ritual-root *{ box-sizing:border-box; }

#rit-bg{ position:absolute; inset:0; background:#050507; opacity:0; transition:opacity 1.6s ease; }
#rit-bg.show{ opacity:1; }
#rit-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#rit-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.72) 100%); mix-blend-mode:multiply; }
#rit-scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.9) 0 1px,transparent 1px 3px); }

#rit-toptext{ position:absolute; top:9%; left:8%; right:8%;
  font-size:clamp(11px,2.4vw,22px); line-height:1.9; letter-spacing:2px; text-shadow:2px 2px 0 #000;
  white-space:pre-wrap; min-height:2.4em; filter:drop-shadow(0 0 2px rgba(180,180,190,.25)); }

#rit-stage{ position:absolute; left:0; right:0; top:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
#rit-heart{ width:clamp(34px,5vw,56px); height:auto; margin-bottom:clamp(10px,2vh,22px);
  image-rendering:pixelated; filter:drop-shadow(0 0 6px rgba(255,40,60,.55));
  animation:rit-heartbeat 1.15s ease-in-out infinite; }
@keyframes rit-heartbeat{ 0%,100%{transform:scale(1);}12%{transform:scale(1.18);}24%{transform:scale(1);}36%{transform:scale(1.12);} }
#rit-heart svg,#rit-heart img{ display:block; width:100%; height:auto; image-rendering:pixelated; }

#rit-char{ position:relative; width:clamp(120px,20vw,190px); height:auto; image-rendering:pixelated;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); transition:transform .18s ease; }
#rit-char img{ width:100%; height:auto; display:block; image-rendering:pixelated; }
#rit-char.bop{ animation:rit-bop .16s ease; }
@keyframes rit-bop{ 50%{transform:translateY(-8px);} }
#rit-char.breathe{ animation:rit-breathe 3.4s ease-in-out infinite; }
@keyframes rit-breathe{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
#rit-char .rit-char-fallback{ width:clamp(120px,20vw,190px); height:clamp(150px,26vw,240px);
  display:flex; align-items:center; justify-content:center; font-size:clamp(48px,9vw,92px);
  background:linear-gradient(160deg,#2a2130,#140f18); border:3px solid #4a3a52; border-radius:10px; }

#rit-banner{ margin-top:clamp(14px,2.5vh,26px); width:clamp(180px,34vw,340px);
  border:3px solid #5a4a62; border-radius:8px;
  box-shadow:0 0 22px rgba(120,90,140,.4),0 8px 20px rgba(0,0,0,.6); display:none; }
#rit-banner.show{ display:block; animation:rit-bannerIn .5s ease; }
@keyframes rit-bannerIn{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

#rit-dlg{ position:absolute; left:6%; right:6%; bottom:6%; min-height:clamp(84px,14vh,130px);
  background:rgba(6,6,9,.82); border:3px solid #d8d8e0; border-radius:4px; padding:clamp(14px,2.4vw,26px);
  font-size:clamp(11px,1.9vw,17px); line-height:1.85; letter-spacing:1px; text-shadow:1px 1px 0 #000;
  box-shadow:0 0 0 3px #000, inset 0 0 24px rgba(120,120,140,.08); display:none; white-space:pre-wrap; }
#rit-dlg.show{ display:block; }
#rit-next{ position:absolute; right:14px; bottom:8px; font-size:12px; opacity:.6; animation:rit-arrow 1s ease-in-out infinite; }
@keyframes rit-arrow{ 50%{transform:translateY(3px);opacity:1;} }

#rit-choices{ position:absolute; left:0; right:0; bottom:calc(6% + clamp(84px,14vh,130px) + 18px);
  display:none; gap:clamp(16px,4vw,48px); justify-content:center; }
#rit-choices.show{ display:flex; }
.rit-choice{ font-family:inherit; cursor:pointer; background:rgba(6,6,9,.85); color:#e8e8ee;
  border:3px solid #d8d8e0; border-radius:4px; padding:clamp(10px,1.6vw,16px) clamp(20px,4vw,40px);
  font-size:clamp(12px,2vw,18px); letter-spacing:2px; text-shadow:1px 1px 0 #000; box-shadow:0 0 0 3px #000;
  transition:transform .1s ease,background .1s ease; }
.rit-choice:hover,.rit-choice.sel{ background:#d8d8e0; color:#0a0a0c; transform:translateY(-2px); }

#rit-input-wrap{ position:absolute; left:8%; right:8%; bottom:calc(6% + clamp(84px,14vh,130px) + 18px);
  display:none; flex-direction:column; align-items:center; gap:12px; }
#rit-input-wrap.show{ display:flex; }
#rit-input{ width:min(520px,90%); font-family:inherit; background:rgba(0,0,0,.6); color:#e8e8ee;
  border:3px solid #d8d8e0; border-radius:4px; box-shadow:0 0 0 3px #000; padding:14px 16px;
  font-size:clamp(12px,2vw,18px); letter-spacing:2px; text-align:center; text-shadow:1px 1px 0 #000;
  outline:none; caret-color:#ff556e; }
#rit-input::placeholder{ color:#6a6a76; letter-spacing:1px; }
#rit-input-hint{ font-size:clamp(9px,1.4vw,12px); opacity:.55; letter-spacing:1px; text-align:center; max-width:560px; }
#rit-input-submit{ font-family:inherit; cursor:pointer; margin-top:2px; background:rgba(6,6,9,.85); color:#e8e8ee;
  border:3px solid #d8d8e0; border-radius:4px; box-shadow:0 0 0 3px #000; padding:10px 30px;
  font-size:clamp(11px,1.8vw,15px); letter-spacing:2px; text-shadow:1px 1px 0 #000; transition:background .1s; }
#rit-input-submit:hover{ background:#d8d8e0; color:#0a0a0c; }

#rit-glitch{ position:absolute; inset:0; z-index:5; display:none; pointer-events:none; background:#000; }
#rit-glitch.run{ display:block; animation:rit-glitchFlash .55s steps(2) forwards; }
@keyframes rit-glitchFlash{ 0%{opacity:0;} 10%{opacity:1;background:#0ff;transform:translateX(-6px);}
  22%{opacity:1;background:#f0f;transform:translateX(8px);} 34%{opacity:.8;background:#000;transform:translateX(-4px);}
  55%{opacity:1;background:#000;transform:none;} 100%{opacity:1;background:#000;} }

#rit-scare{ position:absolute; inset:0; z-index:8; display:none; align-items:center; justify-content:center; }
#rit-scare.show{ display:flex; }
#rit-scare img{ width:min(60vw,60vh); height:auto; image-rendering:pixelated; transform:scale(.2); opacity:0; }
#rit-scare.zoom img{ animation:rit-zoom 1.15s cubic-bezier(.6,0,.9,1) forwards; }
@keyframes rit-zoom{ 0%{transform:scale(.2);opacity:0;} 55%{opacity:1;} 100%{transform:scale(3.4);opacity:1;} }

#rit-black{ position:absolute; inset:0; z-index:9; background:#000; display:none; opacity:0; transition:opacity .35s; }
#rit-black.show{ display:block; opacity:1; }

#rit-eyes{ position:absolute; inset:0; z-index:10; display:none; pointer-events:none; }
#rit-eyes.show{ display:block; }
.rit-eye{ position:absolute; image-rendering:pixelated; opacity:0; width:clamp(80px,14vw,190px); height:auto;
  filter:drop-shadow(0 0 10px rgba(255,20,40,.35)); animation:rit-eyePop 1.4s ease forwards; }
@keyframes rit-eyePop{ 0%{opacity:0;transform:scale(.4) rotate(var(--r));} 30%{opacity:.95;}
  70%{opacity:.95;transform:scale(1) rotate(var(--r));} 100%{opacity:0;transform:scale(1.1) rotate(var(--r));} }
.rit-eye-fallback{ display:flex;align-items:center;justify-content:center;font-size:clamp(60px,12vw,150px);color:#ff2338; }

#rit-shred{ position:absolute; inset:0; z-index:11; display:none; }
#rit-shred.show{ display:flex; align-items:center; justify-content:center; }
.rit-shard{ position:absolute; width:clamp(140px,26vw,260px); border:3px solid #444; border-radius:6px;
  overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.7); }
.rit-shard img{ width:100%; height:auto; display:block; }
.rit-shard.tearing{ animation:rit-tear 1.1s ease forwards; }
@keyframes rit-tear{ 0%{opacity:0;transform:scale(1) translate(0,0) rotate(0);filter:none;} 20%{opacity:1;}
  55%{opacity:1;filter:contrast(1.4) brightness(.8);transform:scale(1.02) rotate(-1deg);}
  100%{opacity:0;transform:scale(.7) translate(var(--tx),var(--ty)) rotate(var(--tr));filter:grayscale(1) contrast(2);} }

#rit-final{ position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center;
  text-align:center; padding:8%; background:#000; }
#rit-final.show{ display:flex; }
#rit-final .rit-final-txt{ font-size:clamp(13px,2.6vw,26px); line-height:2.1; letter-spacing:2px; color:#c8c8d0;
  text-shadow:0 0 12px rgba(200,40,60,.5),2px 2px 0 #000; animation:rit-finalPulse 3.2s ease-in-out infinite; max-width:900px; }
@keyframes rit-finalPulse{ 0%,100%{opacity:.72;filter:none} 50%{opacity:1;filter:drop-shadow(0 0 8px rgba(220,40,60,.7))} }

#ritual-root.shake #rit-stage,#ritual-root.shake #rit-toptext{ animation:rit-shake .3s linear; }
@keyframes rit-shake{ 0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,-2px)} }

@media (prefers-reduced-motion: reduce){ #rit-heart,#rit-char.breathe,#rit-final .rit-final-txt{ animation:none !important; } }