/* Modo Backrooms (easter egg). Todo CSS/SVG. Fotosensibilidad: nada parpadea mas de ~3 veces por segundo y no hay destellos blancos a pantalla completa. */
#br-fondo, #br-vhs { display:none; position:fixed; inset:0; pointer-events:none; }
#br-fondo { z-index:-1; background:#cdb94e; }
#br-fondo svg { display:block; width:100%; height:100%; }
#br-vhs { z-index:40; overflow:hidden; font:700 clamp(15px,1.7vw,28px)/1.25 "Courier New",ui-monospace,monospace; color:#e8e6c4; letter-spacing:.04em; }
html.backrooms #br-fondo, html.backrooms #br-vhs, html.glitch #br-vhs { display:block; }

/* ---- pasillo ---- */
html.backrooms body { background:#3a3210; color:#2b2210; }
html.backrooms body::before, html.backrooms .cielo { display:none; }
html.backrooms #br-fondo::after { content:""; position:absolute; inset:0; background:#1a1400; opacity:0; animation:brFluor 11s linear infinite; }   /* parpadeo = capa negra que sube y baja (barato de componer) */
html.backrooms .l2 { animation:brL2 7s linear infinite; }
html.backrooms .l3 { animation:brL3 13s linear infinite; }
/* parpadeo irregular: como mucho 2 bajadas dentro de un mismo segundo */
@keyframes brFluor { 0%,12%{opacity:0.0} 12.4%{opacity:0.2} 13.4%{opacity:0.0} 14.8%{opacity:0.12} 15.6%,54%{opacity:0.0}
                     54.3%{opacity:0.22} 57%{opacity:0.14} 57.5%,88%{opacity:0.0} 88.3%{opacity:0.16} 89.2%,100%{opacity:0.0} }
@keyframes brL2 { 0%,30%{opacity:1} 30.5%{opacity:.35} 32%,70%{opacity:1} 70.5%{opacity:.5} 72%,100%{opacity:1} }
@keyframes brL3 { 0%,60%{opacity:1} 60.4%{opacity:.2} 63%{opacity:.2} 63.4%,100%{opacity:1} }

/* ---- filtro VHS ---- */
#br-vhs .scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); }
#br-vhs .noise { position:absolute; inset:-10%; opacity:.14; will-change:transform; animation:brNoise .6s steps(1) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes brNoise { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-6%,-2%)} 80%{transform:translate(5%,4%)} }
#br-vhs .roll { position:absolute; left:0; right:0; height:22%; top:0; background:linear-gradient(transparent, rgba(255,245,170,.07), transparent); animation:brRoll 9s linear infinite; will-change:transform; }
@keyframes brRoll { from { transform:translateY(-114%); } to { transform:translateY(500%); } }   /* solo transform: 'top' forzaba layout cada frame */
#br-vhs .vig { position:absolute; inset:0; background:radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(10,6,0,.5) 78%, rgba(0,0,0,.82) 100%); }
#br-vhs .osd { position:absolute; text-shadow:-2px 0 rgba(255,40,70,.6), 2px 0 rgba(40,220,255,.5), 0 0 6px rgba(0,0,0,.6); }
#br-vhs .rec { left:clamp(14px,2vw,34px); bottom:clamp(14px,2.4vh,34px); display:flex; align-items:center; gap:.5em; }
#br-vhs .rec i { width:.8em; height:.8em; border-radius:50%; background:#e0262a; box-shadow:0 0 8px #e0262a; animation:brRec 2s steps(1) infinite; }   /* 0,5 parpadeos por segundo */
@keyframes brRec { 50% { opacity:.15; } }
#br-vhs .fecha { right:clamp(14px,2vw,34px); top:clamp(14px,2.4vh,34px); text-align:right; }

/* ---- la libreta ---- */
html.backrooms #sheet { background-color:#dccf92; box-shadow:inset 0 0 70px rgba(90,60,10,.5), 6px 8px 0 rgba(0,0,0,.45);
  background-image:radial-gradient(ellipse 16% 22% at 80% 32%, rgba(110,75,20,.38), transparent 70%),
                   radial-gradient(ellipse 11% 28% at 18% 78%, rgba(90,55,10,.34), transparent 70%),
                   radial-gradient(ellipse 28% 9% at 55% 97%, rgba(80,55,20,.4), transparent 70%),
                   linear-gradient(90deg, transparent calc(var(--u) * 1.9), #a5402e calc(var(--u) * 1.9) calc(var(--u) * 1.9 + 2px), transparent calc(var(--u) * 1.9 + 2px)),
                   repeating-linear-gradient(#dccf92 0 calc(var(--u) - 1px), #b0a068 calc(var(--u) - 1px) var(--u));
  background-position:0 0, 0 0, 0 0, 0 0, 0 calc(var(--u) * .5 - var(--u) * .18);
  background-repeat:no-repeat, no-repeat, no-repeat, repeat-y, repeat; }
html.backrooms #sheet::before { background:radial-gradient(circle closest-side, #1d1708 0 88%, transparent 92%) 0 0/100% calc(var(--u) * 3) no-repeat space; }
html.backrooms .row { color:#85684a; }
html.backrooms .row b { color:#7d1d1d; text-decoration-color:#a5402e; letter-spacing:.12em; }
html.backrooms #q { color:#2b2210; -webkit-text-stroke:.6px #2b2210;   /* sin filter:blur (repintaba la hoja): el borroso va en el text-shadow */
  text-shadow:0 0 .7px rgba(43,34,16,.6), 0 3px 5px rgba(43,34,16,.5), 0 7px 9px rgba(43,34,16,.22), -2px 0 0 rgba(210,30,60,.5), 2px 0 0 rgba(0,190,210,.42); }   /* tinta corrida + aberracion cromatica */
html.backrooms #stamp { color:#6b3322; }
html.backrooms .tape { background:#b5a56c repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px); color:rgba(60,40,10,.6); }
html.backrooms .heart { display:none; }

/* palabras corruptas: el texto real queda en el DOM; el glitch es una capa que cambia por un instante */
html.backrooms .c { position:relative; display:inline-block; color:#7d1d1d; animation:brTremor .35s steps(1) infinite; }
html.backrooms .c::after { content:attr(data-g); position:absolute; left:0; top:0; display:none; color:#b01f2c; white-space:nowrap; text-shadow:2px 0 rgba(0,190,210,.6); }
html.backrooms .c.g { color:transparent; text-shadow:none; }
html.backrooms .c.g::after { display:block; }
@keyframes brTremor { 0%{transform:translate(0,0)} 25%{transform:translate(1px,-1px)} 50%{transform:translate(-2px,0)} 75%{transform:translate(1px,1px)} }

/* ---- chip, boton, sticker ---- */
html.backrooms .chip { background:#cdbf7c; color:#5b1010; border-color:#2a2412; font-family:"Courier New",ui-monospace,monospace; letter-spacing:.18em; box-shadow:3px 3px 0 #2a2412; }
html.backrooms .chip[aria-pressed=true] { background:#7a1313; color:#f1e8b8; border-color:#2a2412; box-shadow:3px 3px 0 #2a2412; }
html.backrooms #next { background:#7a1313; color:#f1e8b8; border-color:#241d0b; box-shadow:6px 6px 0 #241d0b; }
html.backrooms #raiku { filter:grayscale(1) contrast(1.1) drop-shadow(3px 4px 0 rgba(20,14,0,.4)); }
html.backrooms #sticker { animation:bob 3.5s ease-in-out infinite alternate, brSticker 6s steps(1) infinite; }
@keyframes brSticker { 0%,70%{translate:0 0;clip-path:none} 70.5%{translate:9% 0;clip-path:inset(15% 0 55% 0)} 71.5%{translate:-7% 0;clip-path:inset(60% 0 10% 0)} 72.5%,100%{translate:0 0;clip-path:none} }

/* ---- transicion de entrada/salida: ~0,8 s de glitch (sin blanco a pantalla completa) ---- */
html.glitch body { animation:brShake .8s steps(1) both; will-change:transform; }
/* aberracion cromatica: marco rojo + sombra cian en una capa propia que solo se mueve con transform (antes: drop-shadow sobre toda la pagina) */
html.glitch #sheet::after { content:""; position:absolute; inset:0; border-radius:6px; border:3px solid rgba(255,0,60,.7); box-shadow:12px 0 0 rgba(0,230,255,.7); pointer-events:none; will-change:transform; animation:brSplit .8s steps(1) both; }
html.glitch #br-vhs .noise { opacity:.55; }
html.glitch #br-vhs .tear { display:block; }
#br-vhs .tear { display:none; position:absolute; left:0; right:0; top:0; height:7%; will-change:transform; background:rgba(15,8,0,.45); box-shadow:0 0 0 2px rgba(255,40,70,.35), 0 3px 0 2px rgba(40,220,255,.3); }
#br-vhs .tr1 { animation:brTear1 .8s steps(1) both; } #br-vhs .tr2 { height:3%; animation:brTear2 .8s steps(1) both; }
@keyframes brShake { 0%{transform:translate(0,0)} 12%{transform:translate(-14px,5px)} 25%{transform:translate(11px,-6px)} 37%{transform:translate(-8px,-3px)} 50%{transform:translate(15px,4px)}
                     62%{transform:translate(-10px,7px)} 75%{transform:translate(6px,-4px)} 87%{transform:translate(-3px,2px)} 100%{transform:none} }
@keyframes brSplit { 0%{transform:translateX(-10px)} 40%{transform:translateX(14px)} 70%{transform:translateX(-6px)} 100%{transform:none;opacity:0} }
@keyframes brTear1 { 0%{transform:translateY(171%)} 25%{transform:translateY(586%)} 50%{transform:translateY(900%)} 75%{transform:translateY(400%)} 100%{transform:translateY(1257%)} }   /* % de su propia altura (7vh) = antiguos top 12/41/63/28/88% */
@keyframes brTear2 { 0%{transform:translateY(2333%)} 30%{transform:translateY(600%)} 60%{transform:translateY(1667%)} 100%{transform:translateY(267%)} }