*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
background:#000;
}
body{
background:#05060b;
font-family:'VT323',monospace;
color:#d9f3ff;
overflow-x:hidden;
position:relative;
animation:flicker 4s infinite;
}
/* ===== GIF DE FONDO ===== */
.bg-gif{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.14;
filter:grayscale(30%) brightness(.75);
z-index:-1;
pointer-events:none;
}
/* ===== AUDIO OCULTO (YouTube embed, 100% invisible) ===== */
.hidden-audio{
position:absolute !important;
top:0 !important;
left:0 !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
border:0 !important;
opacity:0 !important;
visibility:hidden !important;
overflow:hidden !important;
pointer-events:none !important;
z-index:-999 !important;
}
/* ===== CONTROL DE AUDIO (único, esquina inferior derecha) ===== */
.audio-indicator{
position:fixed;
bottom:20px;
right:90px;
display:flex;
align-items:center;
gap:8px;
padding:6px 14px;
font-family:'VT323',monospace;
font-size:15px;
color:#97ffd5;
border:1px solid #2f6b57;
background:rgba(11,18,34,.75);
text-shadow:0 0 6px rgba(151,255,213,.6);
letter-spacing:3px;
z-index:30;
backdrop-filter:blur(2px);
opacity:1;
cursor:pointer;
transition:border-color .15s, color .15s, box-shadow .15s, text-shadow .15s, opacity .2s;
}
.audio-indicator .audio-icon{
display:inline-block;
animation:pulse 1s infinite;
}
@keyframes pulse{
0%, 100%{ opacity:1; }
50%{ opacity:.3; }
}
.audio-indicator:hover{
box-shadow:0 0 10px rgba(151,255,213,.35);
}
.audio-indicator:active{
transform:translateY(1px);
}
/* Estado apagado: rosa vivo de la paleta */
.audio-indicator.is-off{
color:#ff2079;
border-color:#8a1148;
text-shadow:0 0 8px rgba(255,32,121,.7);
opacity:.85;
}
.audio-indicator.is-off:hover{
box-shadow:0 0 10px rgba(255,32,121,.35);
}
.audio-indicator.is-off .audio-icon{
animation:none;
opacity:1;
}
/* ===== NOISE / GRAIN ===== */
#noise{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-image:
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size:3px 3px;
pointer-events:none;
opacity:.35;
z-index:10;
animation:grain 0.2s steps(2) infinite;
}
/* ===== VIÑETA / CURVATURA DE TUBO ===== */
.crt-vignette{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:22;
box-shadow:
inset 0 0 120px 40px rgba(0,0,0,.85),
inset 0 0 300px 100px rgba(0,0,0,.5);
}
.container{
width:900px;
max-width:100%;
margin:auto;
padding:40px;
position:relative;
z-index:1;
}
/* ===== FRANJAS LATERALES (solo en pantallas anchas) ===== */
.side-rail{
position:fixed;
top:0;
height:100%;
width:120px;
display:none;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:40px 0;
pointer-events:none;
z-index:2;
opacity:.55;
}
.side-rail.left{ left:0; }
.side-rail.right{ right:0; }
.side-rail span{
writing-mode:vertical-rl;
font-size:20px;
letter-spacing:4px;
color:#4a7bab;
text-shadow:0 0 8px rgba(78,184,255,.4);
white-space:nowrap;
}
.side-rail .rail-line{
width:1px;
flex:1;
background:linear-gradient(
0deg,
transparent,
#29496d 15%,
#29496d 85%,
transparent
);
margin:15px 0;
}
.side-rail .rail-tick{
font-size:14px;
color:#3574b8;
letter-spacing:2px;
}
@media (min-width:1200px){
.side-rail{ display:flex; }
}
/* ===== CORNER BRACKETS (esquinas del container) ===== */
.corner{
position:absolute;
width:28px;
height:28px;
border:2px solid #4eb8ff;
opacity:.7;
z-index:3;
pointer-events:none;
}
.corner-tl{ top:6px; left:6px; border-right:none; border-bottom:none; }
.corner-tr{ top:6px; right:6px; border-left:none; border-bottom:none; }
.corner-bl{ bottom:6px; left:6px; border-right:none; border-top:none; }
.corner-br{ bottom:6px; right:6px; border-left:none; border-top:none; }
/* ===== HEADER ===== */
header{
text-align:center;
margin-bottom:20px;
position:relative;
padding:0 95px 90px;
}
h1{
font-size:72px;
letter-spacing:6px;
color:#7ec8ff;
text-shadow:
0 0 5px #fff,
0 0 15px #0099ff,
0 0 40px #0050aa,
0 0 80px #0050aa;
animation:textFlicker 3s infinite;
position:relative;
display:inline-block;
}
h1::before,
h1::after{
content:"SCORNVEX";
position:absolute;
top:0;
left:0;
width:100%;
overflow:hidden;
}
h1::before{
color:#ff2079;
z-index:-1;
animation:glitchTop 3.5s infinite linear alternate-reverse;
}
h1::after{
color:#00ffe1;
z-index:-1;
animation:glitchBottom 2.7s infinite linear alternate-reverse;
}
.subtitle{
color:#8d96aa;
font-size:28px;
margin-top:10px;
text-shadow:0 0 8px rgba(141,150,170,.5);
}
/* ===== STAMPS / SELLOS (dentro del container, no se salen) ===== */
.stamp{
position:absolute;
border:4px dashed #ff2079;
color:#ff2079;
font-size:32px;
line-height:1.15;
padding:14px 22px;
text-align:center;
text-shadow:0 0 6px #ff2079;
background:rgba(11,18,34,.85);
z-index:5;
white-space:nowrap;
}
.stamp1{
top:4px;
right:36px;
transform:rotate(17deg);
border-color:#ffcc00;
color:#ffcc00;
text-shadow:0 0 6px #ffcc00;
}
.stamp4{
top:44px;
left:8px;
transform:rotate(-19deg) scale(.95);
border-color:#ff8c42;
color:#ff8c42;
text-shadow:0 0 6px rgba(255,140,66,.7);
}
.stamp2{
top:128px;
left:36px;
transform:rotate(-15deg) scale(.92);
}
.stamp3{
top:70px;
right:0px;
transform:rotate(22deg) scale(1.05);
border-color:#97ffd5;
color:#97ffd5;
text-shadow:0 0 6px #97ffd5;
}
/* ===== MARQUEE ===== */
.ticker{
background:#0b1222;
border-top:1px solid #3574b8;
border-bottom:1px solid #3574b8;
color:#80d9ff;
font-size:22px;
padding:6px 0;
text-shadow:0 0 6px #0099ff;
margin:20px 0 30px;
}
/* ===== NAV ===== */
nav{
display:flex;
justify-content:center;
align-items:baseline;
flex-wrap:wrap;
gap:22px;
margin-bottom:40px;
font-size:22px;
}
.nav-prompt{
color:#97ffd5;
text-shadow:0 0 6px rgba(151,255,213,.5);
margin-right:4px;
}
.nav-prompt::after{
content:"_";
animation:blink 1s steps(2) infinite;
}
nav a{
color:#7ec8ff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
transition:.15s;
text-shadow:0 0 6px rgba(78,184,255,.4);
}
nav a::before{
content:"[";
color:#3574b8;
margin-right:2px;
}
nav a::after{
content:"]";
color:#3574b8;
margin-left:2px;
}
nav a:hover{
color:#fff;
text-shadow:0 0 10px #4eb8ff, 0 0 20px #0099ff;
}
nav a:hover::before,
nav a:hover::after{
color:#4eb8ff;
}
/* ===== MAIN / SECTIONS ===== */
.main{
display:flex;
flex-direction:column;
gap:25px;
}
section{
background:#0d1323;
padding:20px;
border:1px solid #29496d;
box-shadow:
0 0 15px rgba(0,150,255,.2),
inset 0 0 30px rgba(0,0,0,.6),
2px 0 0 rgba(255,32,121,.15),
-2px 0 0 rgba(0,255,225,.12);
position:relative;
}
section h2{
margin-bottom:15px;
font-size:32px;
color:#80d9ff;
text-shadow:0 0 8px #0099ff;
display:inline-block;
}
p,li{
font-size:24px;
line-height:32px;
text-shadow:0 0 2px rgba(217,243,255,.3);
}
/* Poemas: respeta saltos de línea del texto tal cual, sin necesitar <br> */
.poem{
white-space:pre-wrap;
}
/* Nota: las rotaciones/skew de las sections ya no se fijan aquí por
   nth-of-type; se aplican por JS al cargar (dentro de un rango pequeño
   y controlado) para que cada carga de la página tenga una variación
   sutil sin que las cajas se monten unas sobre otras. */
/* ===== CARDS ===== */
.cards{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:15px;
}
.card{
flex:1;
min-width:150px;
background:#111b2f;
padding:15px;
border:1px solid #3769a8;
box-shadow:1px 0 0 rgba(255,32,121,.1), -1px 0 0 rgba(0,255,225,.1);
}
.card h3{
font-size:28px;
margin-bottom:10px;
color:white;
text-shadow:0 0 6px #4eb8ff;
}
.card.highlight{
border-color:#4eb8ff;
box-shadow:0 0 12px rgba(78,184,255,.4);
}
.card:nth-child(1){ transform:rotate(-2deg) skewX(-0.5deg); border-width:2px 1px 1px 1px; }
.card:nth-child(2){ transform:rotate(1.3deg) skewX(0.4deg); margin-top:8px; border-width:1px 1px 2px 1px; }
.card:nth-child(3){ transform:rotate(-1deg) skewX(-0.3deg); border-width:1px 2px 1px 1px; }
/* ===== BADGES ===== */
.badges{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:15px;
}
.badge{
width:88px;
height:31px;
background:#0b1222;
border:1px solid #3574b8;
font-size:11px;
line-height:11px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
color:#7ec8ff;
text-shadow:0 0 6px #0099ff;
animation:blink 1.5s steps(2) infinite;
}
@keyframes blink{
50%{ opacity:.6; }
}
pre{
font-size:22px;
color:#97ffd5;
text-shadow:0 0 6px rgba(151,255,213,.5);
white-space:pre-wrap;
}
footer{
margin-top:40px;
text-align:center;
font-size:24px;
color:#777;
text-shadow:0 0 6px rgba(119,119,119,.5);
}
/* ===== VLOG POST TEMPLATE ===== */
.vlog-post{
background:#0d1323;
padding:22px;
border:1px solid #29496d;
box-shadow:
0 0 15px rgba(0,150,255,.2),
inset 0 0 30px rgba(0,0,0,.6),
2px 0 0 rgba(255,32,121,.15),
-2px 0 0 rgba(0,255,225,.12);
position:relative;
}
.vlog-post-head{
display:flex;
justify-content:space-between;
align-items:baseline;
flex-wrap:wrap;
gap:10px;
border-bottom:1px dashed #3574b8;
padding-bottom:10px;
margin-bottom:16px;
}
.vlog-title{
font-size:34px;
color:#80d9ff;
text-shadow:0 0 8px #0099ff;
}
.vlog-date{
font-size:20px;
color:#97ffd5;
text-shadow:0 0 6px rgba(151,255,213,.5);
letter-spacing:2px;
}
.vlog-image-box{
width:100%;
min-height:220px;
border:2px dashed #3769a8;
background:#0b1222;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin-bottom:18px;
}
.vlog-image-box img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(15%) contrast(1.05);
}
.vlog-image-box:empty::before,
.vlog-image-box.no-image::before{
content:"[ SIN IMAGEN // DROP IMG HERE ]";
font-size:20px;
color:#3574b8;
letter-spacing:2px;
}
.vlog-text{
font-size:24px;
line-height:34px;
color:#d9f3ff;
text-shadow:0 0 2px rgba(217,243,255,.3);
white-space:pre-wrap;
}
.vlog-post + .vlog-post{
margin-top:0;
}
/* ===== CRT SCANLINES ===== */
body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:
repeating-linear-gradient(
0deg,
rgba(0,0,0,.35),
rgba(0,0,0,.35) 1px,
transparent 2px,
transparent 3px
);
z-index:20;
mix-blend-mode:multiply;
}
/* ===== ROLLING SCAN BAR ===== */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:21;
background:linear-gradient(
0deg,
transparent 0%,
rgba(180,220,255,.05) 50%,
transparent 100%
);
background-size:100% 6px;
animation:scan 6s linear infinite;
mix-blend-mode:screen;
}
/* ===== ANIMACIONES ===== */
@keyframes grain{
0%{ transform:translate(0,0); }
50%{ transform:translate(-1px,1px); }
100%{ transform:translate(1px,-1px); }
}
@keyframes scan{
0%{ background-position:0 -100vh; }
100%{ background-position:0 100vh; }
}
@keyframes flicker{
0%, 100%{ opacity:1; }
92%{ opacity:1; }
93%{ opacity:.92; }
94%{ opacity:1; }
95%{ opacity:.85; }
96%{ opacity:1; }
}
@keyframes textFlicker{
0%, 100%{
text-shadow:
0 0 5px #fff,
0 0 15px #0099ff,
0 0 40px #0050aa,
0 0 80px #0050aa;
}
50%{
text-shadow:
0 0 4px #fff,
0 0 12px #0099ff,
0 0 30px #0050aa,
0 0 60px #0050aa;
}
}
@keyframes glitchTop{
0%{ clip-path:inset(0 0 90% 0); transform:translate(-2px,-1px); }
20%{ clip-path:inset(10% 0 60% 0); transform:translate(2px,1px); }
40%{ clip-path:inset(40% 0 30% 0); transform:translate(-2px,1px); }
60%{ clip-path:inset(60% 0 10% 0); transform:translate(2px,-1px); }
80%{ clip-path:inset(20% 0 70% 0); transform:translate(-1px,2px); }
100%{ clip-path:inset(0 0 90% 0); transform:translate(1px,-2px); }
}
@keyframes glitchBottom{
0%{ clip-path:inset(85% 0 0 0); transform:translate(2px,1px); }
20%{ clip-path:inset(50% 0 20% 0); transform:translate(-2px,-1px); }
40%{ clip-path:inset(20% 0 50% 0); transform:translate(2px,-1px); }
60%{ clip-path:inset(70% 0 5% 0); transform:translate(-2px,1px); }
80%{ clip-path:inset(30% 0 40% 0); transform:translate(1px,-2px); }
100%{ clip-path:inset(85% 0 0 0); transform:translate(-1px,2px); }
}