@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

/* ===========================================================
   Enveloppe ivoire — tout est de la même couleur.
   Le relief vient UNIQUEMENT des ombres portées et internes.
   =========================================================== */

:root {
    --paper:        #f6efe3;   /* papier de base */
    --paper-hi:     #fffdf8;   /* arête éclairée */
    --paper-lo:     #ece2d1;   /* creux */
    --wax:          #f3e9d8;   /* cire ivoire */
    --shade:        rgba(163, 134, 92, 0.30); /* ombre chaude, jamais du gris */
    --shade-soft:   rgba(163, 134, 92, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    background: var(--paper);
    font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
    overflow: hidden;
    height: 100dvh;
    /* lumière douce venant du haut, comme sur la photo */
    background-image:
        radial-gradient(120% 80% at 50% 0%, #fffdf8e6 0%, rgba(255, 253, 248, 0) 60%),
        radial-gradient(100% 70% at 50% 100%, var(--shade-soft) 0%, rgba(0, 0, 0, 0) 55%);
}

.scene {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    /* "creux" de l'intérieur de l'enveloppe : invisible tant que le rabat
       est fermé (il le recouvre entièrement), mais donne un vrai contraste
       visible dès que le rabat pivote et le découvre */
    background:
        radial-gradient(ellipse 65% 42% at 50% 30%, rgba(120, 95, 55, 0.38) 0%, rgba(120, 95, 55, 0) 72%),
        var(--paper);
}

.envelope-link {
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

/* --- Grain de papier : indispensable pour ne pas faire "plastique" --- */
.scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* --- Enveloppe : garde ses proportions (3:2) mais se dimensionne
   comme un background-size:cover, pour toujours couvrir l'écran
   sans jamais laisser de bord vide, quel que soit le format --- */
#envelope {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, 150vh);
    height: max(66.667vw, 100vh);
    transform: translate(-50%, -50%);
    perspective: 1600px;
}
.env-back {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* On utilise la variable du creux pour assombrir le fond */
    background-color: var(--paper-lo); 
    /* Ajoute une légère profondeur à l'intérieur */
    box-shadow: inset 0 15px 40px rgba(120, 92, 48, 0.25);
    z-index: 1; /* Il reste tout au fond, sous les rabats ! */
}

/* Rabat gauche (au-dessus du droit) */
.pocket-left {
    position: absolute;
    top: 0; left: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient(94deg, var(--paper-hi) 0%, var(--paper) 70%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 4;
    /* Ombre foncée et très peu floue (2px) pour un bord net */
    -webkit-filter: drop-shadow(4px 0 2px rgba(120, 90, 50, 0.6));
    filter: drop-shadow(4px 0 2px rgba(120, 90, 50, 0.6));
}

/* Rabat droit (en dessous du gauche) */
.pocket-right {
    position: absolute;
    top: 0; right: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient(-94deg, var(--paper-hi) 0%, var(--paper) 70%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    z-index: 3;
    -webkit-filter: brightness(0.98) drop-shadow(-4px 0 2px rgba(120, 90, 50, 0.6));
    filter: brightness(0.98) drop-shadow(-4px 0 2px rgba(120, 90, 50, 0.6));
}

/* Rabat bas (se superpose sur les côtés pour former le V) */
.pocket-bottom {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 58%;
    background: linear-gradient(0deg, var(--paper-lo) 0%, var(--paper) 60%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    z-index: 5;
    -webkit-filter: brightness(0.96) drop-shadow(0 -4px 3px rgba(120, 90, 50, 0.7));
    filter: brightness(0.96) drop-shadow(0 -4px 3px rgba(120, 90, 50, 0.7));
}

/* Rabat haut (tout au-dessus) */
.flap {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 62%;
    transform-origin: top;
    transform-style: preserve-3d;
    z-index: 6; /* Doit obligatoirement être supérieur au z-index du pocket-bottom ! */
    
    /* Ombre durcie pour le V supérieur */
    -webkit-filter: drop-shadow(0 6px 4px rgba(120, 90, 50, 0.5));
    filter: drop-shadow(0 6px 4px rgba(120, 90, 50, 0.5));
    
    transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
}

.flap {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 62%;
    transform-origin: top;
    transform-style: preserve-3d;
    z-index: 6;
    
    /* On applique l'ombre au conteneur, avec couleurs en dur */
    -webkit-filter: drop-shadow(0 10px 16px rgba(163, 134, 92, 0.30));
    filter: drop-shadow(0 10px 16px rgba(163, 134, 92, 0.30));
    
    transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
}

/* La forme : uniquement le fond et le découpage */
.flap-shape {
    position: absolute;
    inset: 0;
    background: linear-gradient(178deg, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* --- Sceau de cire ivoire --- */
.wax-seal {
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(3deg);
    width: 33vw;
    height: 33vw;
    max-width: 230px;
    max-height: 230px;
    z-index: 6;
    border-radius: 47% 53% 51% 49% / 50% 47% 53% 50%;
    background:
        radial-gradient(circle at 36% 30%, #fffdf8 0%, var(--wax) 42%, #e9dcc5 78%, #e3d4ba 100%);
    box-shadow:
        0 14px 26px var(--shade),
        0 3px 6px var(--shade-soft),
        inset 0 -8px 14px rgba(163, 134, 92, 0.22),
        inset 0 8px 12px rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* anneau intérieur du tampon */
.wax-seal::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50% 48% 52% 50% / 49% 52% 48% 51%;
    box-shadow:
        inset 0 2px 3px rgba(163, 134, 92, 0.35),
        inset 0 -2px 2px rgba(255, 255, 255, 0.9),
        0 1px 1px rgba(255, 255, 255, 0.7);
}

.wax-seal .seal-icon {
    position: relative;
    display: block;
    
    font-size: clamp(32px, 10vw, 70px);
    
    transform: translate(-8%, -10%) rotate(-3deg);
    
    line-height: 1;
    color: #fffaf0;
    letter-spacing: 0.01em;
    text-shadow:
        0 1px 0 #f1e4c8,
        0 2px 0 #e8d8b8,
        0 3px 0 #dfcca7,
        0 4px 0 #d6c096,
        0 5px 0 #cdb486,
        0 6px 1px rgba(255, 255, 255, 0.5),
        0 8px 10px rgba(120, 92, 48, 0.45),
        0 -1px 0 rgba(255, 255, 255, 0.9);
}

/* --- Texte gravé --- */
.note {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    z-index: 10;
    text-align: center;
    font-size: clamp(26px, 8.4vw, 56px);
    line-height: 1.5;
    color: #8b7665;
    transition: opacity 0.4s ease;
}

/* --- Ouverture au clic --- */
.open .flap {
    transform: rotateX(18deg);
    
    -webkit-filter:
        drop-shadow(-15px 60px 25px rgba(120, 92, 48, 0.60))
        drop-shadow(-5px 18px 12px rgba(120, 92, 48, 0.45))
        drop-shadow(0 1px 0 #fffdf8);
    filter:
        drop-shadow(-15px 60px 25px rgba(120, 92, 48, 0.60))
        drop-shadow(-5px 18px 12px rgba(120, 92, 48, 0.45))
        drop-shadow(0 1px 0 #fffdf8);
}

@media (min-aspect-ratio: 3/4) {
    .wax-seal {
        width: 30vh; height: 30vh;
        max-width: none; max-height: none;
    }
    .note { font-size: clamp(22px, 4.6vh, 48px); }
}

@media (prefers-reduced-motion: reduce) {
    .flap, .wax-seal, .note { transition: none; }
}