/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:black;
}

/* =========================
   SKYBOX
========================= */

.skybox{

    width:100vw;
    height:100vh;

    position:relative;
    overflow:hidden;

    perspective:1200px;

    background-image:url("https://caar1960-page.neocities.org/art/KxPFmfh.png");
    background-size:cover;
    background-position:center;
}

/* Oscurecer fondo */

.skybox::after{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.25);

    pointer-events:none;
}

/* =========================
   RETURN HOME - PORTAL
========================= */

.return_home{

    position:fixed;
    top:20px;
    left:20px;

    width:220px;

    z-index:10;

    cursor:pointer;

    transition:0.3s ease;

    animation:portalIdle 3s ease-in-out infinite;

    filter:drop-shadow(0 0 10px rgba(0,0,0,0.6));
}

/* si es imagen */
.return_home img{
    width:100%;
    height:auto;
    display:block;
}

/* hover energia */
.return_home:hover{

    transform:scale(1.08);

    filter:
    drop-shadow(0 0 15px rgba(0,255,255,0.6))
    drop-shadow(0 0 25px rgba(0,120,255,0.4));
}

/* pulso del portal */
@keyframes portalIdle{

    0%{
        transform:translateY(0px);
        filter:drop-shadow(0 0 8px rgba(0,180,255,0.3));
    }

    50%{
        transform:translateY(-5px);
        filter:drop-shadow(0 0 18px rgba(0,220,255,0.6));
    }

    100%{
        transform:translateY(0px);
        filter:drop-shadow(0 0 8px rgba(0,180,255,0.3));
    }
}

/* halo energético extra */
.return_home::after{

    content:"";

    position:absolute;
    inset:-10px;

    background:radial-gradient(circle,
        rgba(0,200,255,0.25),
        transparent 70%
    );

    z-index:-1;

    animation:glowPulse 2s infinite;
}

/* pulso del glow */
@keyframes glowPulse{

    0%{
        opacity:0.4;
        transform:scale(1);
    }

    50%{
        opacity:0.8;
        transform:scale(1.1);
    }

    100%{
        opacity:0.4;
        transform:scale(1);
    }
}

/* =========================
   RENDERS
========================= */

.render{

    position:absolute;

    width:320px;

    cursor:pointer;

    transform-style:preserve-3d;

    animation:float 5s ease-in-out infinite;

    transition:
    transform 0.6s ease,
    filter 0.6s ease;

    z-index:5;
}

.render img{

    width:100%;

    display:block;

    border:3px solid black;

    border-radius:8px;

    box-shadow:
    0 0 25px rgba(0,0,0,0.5);

    user-select:none;
}

/* =========================
   FLOAT ANIMATION
========================= */

@keyframes float{

    0%{
        transform:
        rotateY(-6deg)
        translateY(0px);
    }

    50%{
        transform:
        rotateY(6deg)
        translateY(-12px);
    }

    100%{
        transform:
        rotateY(-6deg)
        translateY(0px);
    }
}

/* =========================
   POSICIONES
========================= */

.render1{ top:10%; left:4%; animation-duration:5s; }
.render2{ top:8%; left:40%; width:430px; animation-duration:6s; }
.render3{ top:10%; right:4%; animation-duration:4.5s; }
.render4{ top:42%; left:15%; width:420px; animation-duration:5.5s; }
.render5{ top:45%; right:15%; width:380px; animation-duration:6.5s; }

/* =========================
   HOVER
========================= */

.render:hover{

    filter:
    brightness(1.15)
    drop-shadow(0 0 20px rgba(255,255,255,0.3));

    transform:
    scale(1.03)
    rotateY(0deg);
}

/* =========================
   ZOOM
========================= */

.render.active{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:92vw;
    height:92vh;

    overflow:hidden;

    background:black;

    z-index:999;

    animation:none;

    border-radius:12px;
}

.render.active img{

    width:100%;
    height:100%;

    object-fit:cover;

    border:none;

    border-radius:12px;
}

/* =========================
   OVERLAY
========================= */

.overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.7);

    backdrop-filter:blur(5px);

    opacity:0;
    pointer-events:none;

    transition:0.4s;

    z-index:500;
}

.overlay.show{

    opacity:1;
    pointer-events:all;
}

/* =========================
   PAGINATION
========================= */

.pages{

    position:absolute;

    bottom:30px;
    left:50%;

    transform:translateX(-50%);

    background:rgba(0,0,0,0.55);

    backdrop-filter:blur(4px);

    border:2px solid rgba(255,255,255,0.2);

    padding:12px 22px;

    border-radius:12px;

    display:flex;

    gap:10px;

    z-index:20;
}

.pages button{

    width:40px;
    height:40px;

    border:none;

    border-radius:8px;

    background:white;

    font-size:16px;

    cursor:pointer;

    transition:0.3s;
}

.pages button:hover{

    background:#ffd54a;
    transform:scale(1.1);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .render{
        width:220px !important;
    }

    .render.active{
        width:95vw;
        height:88vh;
    }
}

/* =========================
   INTRO
========================= */

.intro{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    background:black;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:5000;

    animation:introFade 4s forwards;
}

.intro img{

    width:100%;
    height:100%;
    object-fit:cover;
}

@keyframes introFade{

    0%{ opacity:1; }
    70%{ opacity:1; }
    100%{ opacity:0; visibility:hidden; }
}