/* =========================
   BASE
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    background:
        radial-gradient(circle at top, rgba(255,0,0,0.08), transparent 30%),
        linear-gradient(180deg, #111 0%, #090909 100%);
    font-family:Arial, sans-serif;
    color:white;
    overflow-x:hidden;
}

/* =========================
   SITE SHELL
========================= */

.site-shell{
    opacity:0;
    transform:translateY(18px) scale(0.99);
    pointer-events:none;
}

.site-shell.site-reveal{
    animation:siteReveal 0.85s cubic-bezier(.22,.9,.2,1) forwards;
    pointer-events:auto;
}

@keyframes siteReveal{
    0%{
        opacity:0;
        transform:translateY(18px) scale(0.99);
        filter:blur(6px);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

/* =========================
   HEADER
========================= */

.site-header{
    text-align:center;
    padding:34px 20px 16px;
}

.site-label{
    display:inline-block;
    padding:6px 12px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;
    color:#cfcfcf;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    background:rgba(255,255,255,0.03);
    margin-bottom:14px;
}

.site-title{
    margin:0;
    font-size:44px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 0 20px rgba(255,0,0,0.16);
}

.site-subtitle{
    margin:10px 0 0;
    color:#9e9e9e;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
}

/* =========================
   GALLERY
========================= */

.gallery{
    column-count:5;
    column-gap:12px;
    padding:18px;
    width:100%;
    max-width:1800px;
    margin:0 auto;
}

.gallery-item{
    break-inside:avoid;
    margin-bottom:12px;
    position:relative;
}

.gallery img,
.gallery video{
    width:100%;
    display:block;
    border-radius:10px;
    cursor:pointer;
    opacity:0;
    transform:translateY(20px) scale(0.985);
    animation:imageReveal 0.6s ease forwards;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    background:#0d0d0d;
}

.gallery img:hover,
.gallery video:hover{
    transform:scale(1.03);
    box-shadow:0 10px 28px rgba(0,0,0,0.55);
    filter:brightness(1.08);
}

@keyframes imageReveal{
    from{
        opacity:0;
        transform:translateY(20px) scale(0.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* =========================
   WARNING SCREEN
========================= */

#warning-screen{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:
        radial-gradient(circle at top, rgba(255,0,0,0.12), transparent 25%),
        rgba(0,0,0,0.97);
    z-index:9999;
    animation:warningOverlayIn 0.55s ease;
}

@keyframes warningOverlayIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

#warning-screen.fade-out{
    animation:warningOverlayOut 0.55s cubic-bezier(.22,.9,.2,1) forwards;
}

@keyframes warningOverlayOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
        visibility:hidden;
    }
}

.warning-box{
    width:100%;
    max-width:560px;
    padding:36px;
    border-radius:16px;
    text-align:center;
    color:white;
    background:linear-gradient(180deg, #141414 0%, #101010 100%);
    border:1px solid #2d2d2d;
    box-shadow:
        0 0 42px rgba(0,0,0,0.75),
        0 0 18px rgba(255,0,0,0.10);
    animation:warningBoxIn 0.5s cubic-bezier(.22,.9,.2,1);
}

@keyframes warningBoxIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.warning-label{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 12px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#cfcfcf;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
}

.warning-box h1{
    margin:0 0 14px;
    color:#ff3b3b;
    font-size:34px;
    letter-spacing:3px;
    text-shadow:0 0 12px rgba(255,0,0,0.22);
    animation:warningPulse 2s infinite;
}

@keyframes warningPulse{
    0%{opacity:1}
    50%{opacity:0.68}
    100%{opacity:1}
}

.warning-text{
    margin:0 0 18px;
    color:#c8c8c8;
    line-height:1.6;
}

/* =========================
   WARNING LINKS
========================= */

.warning-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    margin-bottom:22px;
}

.warning-links a{
    color:#ddd;
    text-decoration:none;
    position:relative;
    transition:color 0.25s ease, transform 0.25s ease;
}

.warning-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0%;
    height:2px;
    background:#ff3b3b;
    transition:width 0.25s ease;
}

.warning-links a:hover{
    color:#fff;
    transform:translateY(-1px);
}

.warning-links a:hover::after{
    width:100%;
}

/* special glow link */
#info{
    color:rgb(255, 90, 140);
    text-shadow:
        0 0 5px rgb(255, 90, 140),
        0 0 10px rgb(255, 90, 140),
        0 0 18px rgba(255, 90, 140, 0.6);
}

#info:hover{
    color:rgb(255, 140, 190);
    text-shadow:
        0 0 8px rgb(255, 140, 190),
        0 0 20px rgb(255, 140, 190),
        0 0 34px rgba(255, 90, 140, 0.8);
}

/* =========================
   BUTTONS
========================= */

.buttons{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.buttons button{
    padding:12px 30px;
    background:#1f1f1f;
    color:white;
    border:1px solid #2f2f2f;
    border-radius:9px;
    cursor:pointer;
    font-size:15px;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.buttons button:hover{
    background:#2a2a2a;
    transform:translateY(-2px);
    border-color:#454545;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.45),
        0 0 10px rgba(255,0,0,0.15);
}

.buttons button:active{
    transform:scale(0.96);
}

#accept:hover{
    box-shadow:
        0 8px 18px rgba(0,0,0,0.45),
        0 0 12px rgba(0,255,100,0.18);
}

#decline:hover{
    box-shadow:
        0 8px 18px rgba(0,0,0,0.45),
        0 0 12px rgba(255,0,0,0.22);
}

/* =========================
   LIGHTBOX
========================= */

.lightbox{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.93);
    backdrop-filter:blur(5px);
    z-index:9998;
    padding:20px;
}

.lightbox.show{
    display:flex;
    animation:lightboxFade 0.22s ease;
}

@keyframes lightboxFade{
    from{opacity:0}
    to{opacity:1}
}

.lightbox img,
.lightbox video{
    max-width:90%;
    max-height:90%;
    border-radius:12px;
    box-shadow:0 0 30px rgba(0,0,0,0.72);
    animation:lightboxZoom 0.25s ease;
    background:#000;
}

#lightbox-video{
    display:none;
}

#lightbox-img{
    display:none;
}

@keyframes lightboxZoom{
    from{
        opacity:0;
        transform:scale(0.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

.close-btn{
    position:absolute;
    top:22px;
    right:28px;
    background:none;
    border:none;
    color:white;
    font-size:30px;
    cursor:pointer;
    transition:
        transform 0.2s ease,
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.close-btn:hover{
    color:#ff3b3b;
    transform:scale(1.15);
    text-shadow:0 0 10px rgba(255,0,0,0.45);
}

/* =========================
   GENERIC LINKS
========================= */

a{
    text-decoration:none;
}

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

@media (max-width: 1400px){
    .gallery{
        column-count:4;
    }
}

@media (max-width: 1100px){
    .gallery{
        column-count:3;
    }
}

@media (max-width: 850px){
    .site-title{
        font-size:36px;
    }
}

@media (max-width: 700px){
    .gallery{
        column-count:2;
    }
}

@media (max-width: 600px){
    .warning-box{
        padding:26px;
    }

    .site-title{
        font-size:30px;
    }

    .buttons{
        flex-direction:column;
    }

    .buttons button{
        width:100%;
    }
}

@media (max-width: 500px){
    .gallery{
        column-count:1;
    }
}

#lightbox-video{
    display:none;
    max-width:90%;
    max-height:90%;
    border-radius:12px;
    box-shadow:0 0 30px rgba(0,0,0,0.72);
    background:#000;
}

#lightbox-img{
    display:none;
    max-width:90%;
    max-height:90%;
    border-radius:12px;
    box-shadow:0 0 30px rgba(0,0,0,0.72);
    background:#000;
}

.gallery video{
    width:100%;
    display:block;
    border-radius:10px;
    cursor:pointer;
    background:#000;
}

#view-counter{
    position:fixed;
    top:18px;
    left:22px;
    padding:8px 14px;

    font-size:13px;
    letter-spacing:1px;

    color:#fff;
    background:rgba(0,0,0,0.55);

    border:1px solid #2a2a2a;
    border-radius:8px;

    backdrop-filter:blur(6px);

    box-shadow:
        0 0 10px rgba(255,0,0,0.25),
        0 0 25px rgba(255,0,0,0.15);

    z-index:9999;
}

#view-counter{
    animation:fadeCounter 0.6s ease;
}

@keyframes fadeCounter{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}