/* =========================================================
   SCÈNE D’ACCUEIL — PORTE GOTHIQUE IMMERSIVE
   ========================================================= */

.scene-porte {
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at center, #0b0705, #020101);
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ---------- CADRE À RATIO FIXE ----------
   porte-gothique.png fait 1536x1024 (ratio 3:2). Sa largeur et sa hauteur
   sont calculées en JavaScript (voir Index.cshtml) pour toujours
   conserver ce ratio : l'image et la zone cliquable qu'elle contient
   restent donc alignées sur mobile comme sur desktop. */
.porte-cadre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------- IMAGE GOTHIQUE (ARCHITECTURE) ---------- */
.porte-frame {
    position: absolute;
    inset: 0;

    background: url("/images/scene/porte-gothique.png") center center no-repeat;
    background-size: cover;

    filter:
        drop-shadow(0 0 120px rgba(0,0,0,0.95))
        contrast(1.1)
        brightness(0.9);

    pointer-events: none;
}

/* ---------- LUMIÈRE SACRÉE (AU CLIC) ---------- */
/* ---------- LUMIÈRE SACRÉE (CONFINÉE AUX PORTES) ---------- */
.porte-lumiere {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse 22% 45% at center 52%,
            rgba(255,220,160,0.0),
            rgba(255,200,120,0.0),
            transparent 70%
        );

    opacity: 0;
    transition: opacity 3.5s ease;
    pointer-events: none;
}

.porte-lumiere.active {
    opacity: 1;
    background:
        radial-gradient(
            ellipse 22% 45% at center 52%,
            rgba(255,220,160,0.85),
            rgba(255,180,100,0.45),
            rgba(255,120,60,0.15),
            transparent 72%
        );
}


/* ---------- ZONE CLIQUABLE INVISIBLE ----------
   Coordonnées en pourcentage du cadre, calibrées visuellement sur
   porte-gothique.png (le battant de la porte). */
.porte-zone {
    position: absolute;
    left: 40.4%;
    top: 31.3%;
    width: 22.1%;
    height: 49.8%;

    cursor: pointer;
    background: transparent;
}

/* ---------- TEXTE D’INVITATION ---------- */
.instruction {
    position: absolute;
    bottom: 8%;
    width: 100%;
    text-align: center;

    color: #c9b28a;
    font-family: "Uncial Antiqua", serif;
    letter-spacing: 2px;

    animation: respiration 4s ease-in-out infinite;
}

.instruction span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

@keyframes respiration {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* ---------- RESPIRATION DE LA LUMIÈRE ---------- */
.porte-lumiere.active {
    animation: souffle-sacral 8s ease-in-out infinite;
}

@keyframes souffle-sacral {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* ---------- ZOOM DE SCÈNE ---------- */
.scene.zoom {
    transform: scale(1.04);
    transition: transform 3.5s ease;
    transform-origin: center center;
}