:root {
    --nixie-glow: #ff7700;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: #000;
}

/* --- CIEL (Confiné dans le viewport) --- */
.sky-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #a4c8e1 url('img/background-sky.jpg') no-repeat center 30%;
    background-size: cover;
    z-index: 1;
}

.sky-container { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 2; 
    pointer-events: none; 
}

/* --- VIEWPORT RESPONSIVE --- */
#main-viewport {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1072px;
    z-index: 5;
    background: #000;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* --- BUREAU --- */
.desk-foreground {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('img/desk-foreground.png') no-repeat center;
    background-size: 100% 100%; 
    z-index: 5;
    pointer-events: none;
}

/* --- TEXTE PARCHEMIN (V13) --- */
.invitation-text {
    position: absolute;
    top: 44.20%;
    left: 6.40%;
    width: 16%;
    font-family: 'Fondamento', cursive;
    color: #2b1d0e; 
    text-align: center;
    z-index: 6;
    perspective: 1000px;
}

.invitation-text p, .invitation-text h2 { margin: 0; position: relative; }

#invit-title { font-size: 1.64rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 15.14px; left: -85.57px; font-weight: bold; }
#invit-label { font-size: 1.00rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 35.10px; left: -85.00px; }
#invit-date { font-size: 1.70rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 59.75px; left: -72.15px; font-weight: bold; }
#invit-time { font-size: 1.20rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 60.00px; left: -60.00px; }
#invit-loc { font-size: 1.27rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 70.28px; left: -38.33px; line-height: 1.2; }

/* --- MACHINE DISPLAY --- */
.machine-display {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6;
    pointer-events: none;
    perspective: 1500px;
}

.nixie-digit {
    font-family: 'VT323', monospace;
    color: #ffaa00;
    text-shadow: 0 0 12px #ff9900, 0 0 25px #ff5e00;
    animation: flicker 5s infinite;
    position: relative;
    filter: blur(0.8px);
    display: inline-block;
}

/* 3 JOURS */
.row-days {
    position: absolute;
    top: 14.10%;
    left: 59.10%;
    transform: perspective(1000px) rotateY(-32deg);
    transform-origin: left center;
}
.row-days .nixie-digit { font-size: 7.35rem; }
#days-1 { top: 0.00px; left: 79.65px; transform: rotateY(-32deg); animation-delay: 0.2s; }
#days-2 { top: 0.00px; left: 126.70px; transform: rotateY(-22deg); animation-delay: 0.5s; }
#days-3 { top: 0.00px; left: 164.60px; transform: rotateY(0deg); animation-delay: 0.1s; }

/* HEURES/MINUTES */
.row-time-hours {
    position: absolute;
    top: 60.95%; 
    left: 60.35%;
    transform: perspective(1000px) rotateY(-30deg);
    transform-origin: left center;
}
.row-time-hours .nixie-digit { font-size: 3.70rem; }
#hours-1 { top: -1.70px; left: -4.00px; transform: rotateY(-49deg); animation-delay: 0.8s; }
#hours-2 { top: -0.25px; left: 14.75px; transform: rotateY(-40deg); animation-delay: 0.3s; }
#minutes-1 { top: 0.30px; left: 30.45px; transform: rotateY(-41deg); animation-delay: 0.6s; }
#minutes-2 { top: 0.80px; left: 46.65px; transform: rotateY(-36deg); animation-delay: 0.4s; font-size: 3.70rem; }

/* SECONDES/CENTIÈMES */
.row-time-seconds {
    position: absolute;
    top: 62.55%; 
    left: 71.80%;
    transform: perspective(1000px) rotateY(-30deg);
    transform-origin: left center;
}
.row-time-seconds .nixie-digit { font-size: 3.70rem; }
#seconds-1 { top: -0.65px; left: -18.60px; transform: rotateY(-35deg); animation-delay: 0.9s; }
#seconds-2 { top: 0.00px; left: 23.25px; transform: rotateY(-36deg); animation-delay: 0.2s; }
#centi-1 { top: 1.20px; left: 47.35px; transform: rotateY(-32deg); animation-delay: 0.7s; }
#centi-2 { top: 0.70px; left: 67.70px; transform: rotateY(-23deg); animation-delay: 0.5s; }

/* SCINTILLEMENT */
@keyframes flicker {
    0%   { opacity: 0.95; text-shadow: 0 0 10px #ff9900, 0 0 20px #ff5e00; filter: blur(0.8px); }
    2%   { opacity: 0.80; text-shadow: 0 0 15px #ffaa00, 0 0 30px #ff7700; filter: blur(1.2px); }
    40%  { opacity: 0.98; filter: blur(0.7px); }
    50%  { opacity: 1.00; text-shadow: 0 0 18px #ffaa00, 0 0 35px #ff7700; filter: blur(0.6px); }
    82%  { opacity: 0.85; filter: blur(1.3px); }
    100% { opacity: 0.95; filter: blur(0.8px); }
}

/* --- ZEPPELINS --- */
.zeppelin {
    position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain;
    z-index: 3; pointer-events: none; will-change: left; filter: drop-shadow(0 15px 15px rgba(0,0,0,0.4));
}
.zeppelin.flipped { transform: scaleX(-1); }

/* --- AUDIO --- */
#audio-control { position: fixed; top: 20px; left: 20px; z-index: 100; cursor: pointer; opacity: 0.6; transition: opacity 0.3s, transform 0.3s; }
#audio-control:hover { opacity: 1; transform: scale(1.1); }
.audio-btn-small {
    width: 80px; height: 80px; background: rgba(43, 29, 14, 0.6);
    border: 2px solid #ffaa00; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #ffaa00;
}

.overlay-vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.3) 100%);
    z-index: 8; pointer-events: none;
}