/* ==================================================
   TAMBUN BUNGAI PREMIUM 2026
================================================== */

/* ==========================================
   MODAL
========================================== */

.tambun-modal{
    position:fixed;
    inset:0;

    background:
    radial-gradient(
        circle at top,
        #11293f 0%,
        #081018 45%,
        #03070b 100%
    );

    z-index:999999;

    display:none;

    overflow-y:auto;

    padding:60px;
}

.tambun-modal.active{
    display:block;
}

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

.tambun-header{
    text-align:center;
    margin-bottom:60px;
}

.tambun-header span{
    color:#f5c542;
    letter-spacing:4px;
    font-size:13px;
    text-transform:uppercase;
}

.tambun-header h2{
    font-size:64px;
    color:white;
    margin:15px 0;
    font-family:"Cinzel",serif;
}

.tambun-header p{
    color:#b8c1cc;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* ==========================================
   GRID
========================================== */

.tambun-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:30px;
}

/* ==========================================
   CARD PREMIUM
========================================== */

.tambun-card{
    position:relative;

    overflow:hidden;

    border-radius:32px;

    aspect-ratio:16/9;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 15px 40px rgba(0,0,0,.4);

    transition:.5s ease;
}

.tambun-card:hover{
    transform:
    translateY(-10px)
    scale(1.02);
}

.tambun-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform 1.2s ease;
}

.tambun-card:hover img{
    transform:scale(1.08);
}

.tambun-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.25),
        transparent
    );

    z-index:1;
}

.tambun-card::after{
    content:"→";

    position:absolute;

    top:20px;
    right:20px;

    width:55px;
    height:55px;

    border-radius:50%;

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

    background:
    rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    color:white;

    font-size:22px;

    z-index:5;

    transition:.4s;
}

.tambun-card:hover::after{
    transform:
    rotate(-45deg);

    background:#f5c542;

    color:#000;
}

/* ==========================================
   INFO
========================================== */

.tambun-info{
    position:absolute;

    left:30px;
    right:30px;
    bottom:30px;

    z-index:2;
}

.tambun-info h3{
    color:white;
    font-size:32px;
    margin-bottom:12px;
}

.tambun-info p{
    color:#d0d0d0;
    line-height:1.7;
}

/* ==========================================
   CLOSE BUTTON
========================================== */

.close-tambun{
    position:fixed;

    top:25px;
    right:25px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:24px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(12px);

    z-index:99999999;

    transition:.4s;
}

.close-tambun:hover{
    background:
    rgba(245,197,66,.25);

    transform:rotate(90deg);
}

/* ==================================================
   STORY VIEWER CINEMATIC
================================================== */

.story-modal{
    position:fixed;
    inset:0;

    z-index:99999999;

    opacity:0;
    visibility:hidden;

    transition:.5s ease;

    background:#000;

    overflow:hidden;
}

.story-modal.active{
    opacity:1;
    visibility:visible;
}

/* ==========================================
   BLUR BACKGROUND
========================================== */

.story-bg-wrapper{
    position:absolute;
    inset:0;

    overflow:hidden;
    z-index:1;
}

.story-bg{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    blur(50px)
    brightness(.25)
    saturate(130%);

    transform:scale(1.4);
}

/* ==========================================
   MAIN IMAGE
========================================== */

.story-image{
    position:absolute;

    top:50%;
    left:50%;

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

    max-width:92vw;
    max-height:82vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:24px;

    box-shadow:
    0 40px 100px
    rgba(0,0,0,.6);

    z-index:5;

    transition:
    opacity .6s ease;
}

.story-image.fade-out{
    opacity:0;
}

.story-image.fade-in{
    opacity:1;
}

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

.story-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:40px;

    z-index:10;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.75) 35%,
        rgba(0,0,0,.15) 100%
    );
}
/* ==========================================
   TEXT BOX
========================================== */

.story-text{

    width:100%;

    max-width:950px;

    padding:0;

    background:none;

    border:none;

    backdrop-filter:none;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

#storyProgram{

    color:#f5c542;

    letter-spacing:5px;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    display:block;

    margin-bottom:20px;
}

.story-text h2{

    max-width:800px;

    font-size:
    clamp(24px,2.5vw,44px);

    line-height:1.2;

    font-weight:700;

    margin-bottom:15px;

    color:#fff;

    letter-spacing:-0.5px;
}

.story-text p{

    max-width:1000px;

    font-size:
    clamp(18px,1.2vw,24px);

    line-height:1.9;

    color:
    rgba(255,255,255,.92);

    text-align:justify;

    text-wrap:pretty;

    text-shadow:
    0 2px 8px rgba(0,0,0,.35);
}

/* ==========================================
   NAVIGATION
========================================== */

.story-nav{
    position:absolute;

    top:50%;

    transform:
    translateY(-50%);

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:28px;

    z-index:30;

    backdrop-filter:
    blur(15px);

    background:
    rgba(255,255,255,.08);

    border:
    1px solid
    rgba(255,255,255,.08);

    transition:.3s;
}

.story-nav:hover{
    transform:
    translateY(-50%)
    scale(1.08);

    background:
    rgba(245,197,66,.2);
}

.story-nav.prev{
    left:25px;
}

.story-nav.next{
    right:25px;
}

/* ==========================================
   CLOSE STORY
========================================== */

.story-close{
    position:absolute;

    top:25px;
    right:25px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:24px;

    color:white;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(12px);

    z-index:50;
}
/* ==========================================
   PAUSE BUTTON
========================================== */

.story-pause{

    position:absolute;

    top:25px;
    right:100px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:24px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(12px);

    border:
    1px solid rgba(255,255,255,.08);

    z-index:60;

    transition:.3s ease;
}

.story-pause:hover{

    transform:scale(1.08);

    background:
    rgba(245,197,66,.25);

    color:#f5c542;
}

/* ==========================================
   PROGRESS
========================================== */

.story-progress{
    position:absolute;

    top:20px;
    left:50%;

    transform:
    translateX(-50%);

    width:90%;

    height:6px;

    border-radius:999px;

    overflow:hidden;

    background:
    rgba(255,255,255,.15);

    z-index:40;
}

#storyProgress{
    width:0%;
    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #f5c542,
        #ffe27a
    );
}

@keyframes progressStory{

    from{
        width:0%;
    }

    to{
        width:100%;
    }

}

/* ==========================================
   INDICATORS
========================================== */

.story-indicators{
    position:absolute;

    top:40px;
    left:50%;

    transform:
    translateX(-50%);

    display:flex;
    gap:8px;

    z-index:50;
}

.story-dot{
    width:50px;
    height:4px;

    border-radius:999px;

    background:
    rgba(255,255,255,.2);
}

.story-dot.active{
    background:
    linear-gradient(
        90deg,
        #f5c542,
        #ffde7a
    );

    box-shadow:
    0 0 15px
    rgba(245,197,66,.8);
}

/* ==========================================
   COUNTER
========================================== */

#storyCounter{

    position:absolute;

    bottom:20px;
    right:20px;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(0,0,0,.45);

    backdrop-filter:blur(10px);

    color:white;

    font-size:13px;

    z-index:50;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .tambun-modal{
        padding:20px;
    }

    .tambun-header h2{
        font-size:34px;
    }

    .tambun-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .tambun-card{

        min-height:260px;
    }

    .tambun-info{

        left:20px;
        right:20px;
        bottom:20px;
    }

    .tambun-info h3{
        font-size:24px;
    }

    .story-image{

        max-width:60vw;
        max-height:60vh;
    }

    .story-overlay{

        padding:20px;
    }

    .story-text h2{

        font-size:15px;
    }

    .story-text p{

        font-size:14px;
    }

    .story-nav{

        width:50px;
        height:50px;

        font-size:18px;
    }

    .story-nav.prev{
        left:10px;
    }

    .story-nav.next{
        right:10px;
    }

    .story-close{

        width:48px;
        height:48px;

        top:12px;
        right:12px;
    }

    .story-dot{

        width:28px;
    }
}
@media (max-width:768px){

    .tambun-modal{

        padding:20px 16px;
    }

    .tambun-header{

        margin-bottom:25px;
    }

    .tambun-header span{

        font-size:11px;
        letter-spacing:3px;
    }

    .tambun-header h2{

        font-size:38px;
        line-height:1.1;

        margin-top:8px;
        margin-bottom:0;
    }

    .tambun-grid{

        gap:16px;
    }

    .tambun-card{

        min-height:220px;

        border-radius:24px;
    }

    .tambun-card img{

        object-fit:cover;
        object-position:center;
    }

    .tambun-info{

        left:18px;
        right:18px;
        bottom:18px;
    }

    .tambun-info h3{

        font-size:18px;

        line-height:1.3;

        margin-bottom:0;
    }

    .tambun-info p{

        display:none;
    }

    .tambun-card::after{

        width:42px;
        height:42px;

        top:15px;
        right:15px;

        font-size:18px;
    }

}