/* =====================================================
   Bunker Animazione Porta – Stili Desktop
   Prefisso: bunker_animazione_porta_
   ===================================================== */

.bunker_animazione_porta_scene *,
.bunker_animazione_porta_scene *::before,
.bunker_animazione_porta_scene *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Wrapper alto: crea lo spazio di scroll necessario ── */
/* L'altezza extra (250vh) determina quanto scroll serve per l'animazione completa.
   La scena si appiccica dentro questo wrapper e il progress va da 0 a 1
   man mano che il wrapper scorre via. */
.bunker_animazione_porta_scroll_wrapper {
    position: relative;
    height: 250vh; /* 150vh di scroll utile (250 - 100vh della scena) */
}

/* ── Scena principale: sticky dentro il wrapper ── */
.bunker_animazione_porta_scene {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenitore principale di tutti i layer + porta intera */
.bunker_animazione_porta_door_assembly {
    position: relative;
    width: min(75vh, 75vw);
    height: min(75vh, 75vw);
}

/* La porta intera completa – visibile all'inizio */
.bunker_animazione_porta_door_complete {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: opacity 0.5s ease;
}

.bunker_animazione_porta_door_complete img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(4px 8px 20px rgba(0, 0, 0, 0.15));
}

/* Ogni layer dell'esploso */
.bunker_animazione_porta_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    transition: none;
}

.bunker_animazione_porta_layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.10));
}

/* ── Etichette specifiche tecniche ── */
.bunker_animazione_porta_spec_labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

.bunker_animazione_porta_spec_label {
    position: absolute;
    background: rgba(28, 75, 92, 0.82);
    color: #fff;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(9px, 1.2vw, 13px);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    white-space: nowrap;
    opacity: 0;
    transition: none;
}

.bunker_animazione_porta_spec_label .bunker_animazione_porta_value {
    font-weight: 700;
}

/* Posizioni delle 6 etichette – lato sinistro */
.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_1 {
    top: 12%;
    left: -5%;
}

.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_2 {
    top: 30%;
    left: -8%;
}

.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_3 {
    top: 62%;
    left: -10%;
}

/* Posizioni delle 6 etichette – lato destro */
.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_4 {
    top: 20%;
    right: -8%;
    left: auto;
}

.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_5 {
    top: 48%;
    right: -10%;
    left: auto;
}

.bunker_animazione_porta_spec_label.bunker_animazione_porta_lbl_6 {
    top: 72%;
    right: -8%;
    left: auto;
}

/* Barra di progresso scroll in basso */
.bunker_animazione_porta_scroll_indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 200;
}

.bunker_animazione_porta_scroll_indicator.bunker_animazione_porta_hidden {
    opacity: 0;
}

.bunker_animazione_porta_scroll_indicator span {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    font-weight: 500;
}

.bunker_animazione_porta_scroll_track {
    width: 200px;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.bunker_animazione_porta_scroll_fill {
    width: 0%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    transition: width 0.15s ease-out;
}

/* Freccia animata per invitare allo scroll */
.bunker_animazione_porta_scroll_arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid rgba(0, 0, 0, 0.25);
    transform: rotate(45deg);
    animation: bunker_animazione_porta_bounceArrow 2s ease-in-out infinite;
}

@keyframes bunker_animazione_porta_bounceArrow {
    0%,
    100% {
        transform: rotate(45deg) translateY(0);
    }
    50% {
        transform: rotate(45deg) translateY(6px);
    }
}