html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #f4f1ea;
    /* Subtle paper texture effect */
    background-image: url("../images/natural-paper.png");
}

.page-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When activated, move the entire screen up */
.page-wrapper.slide-up {
    transform: translateY(100vh) scale(1.5); /* moves viewport up */
}


.envelope {
    position: relative;
    width: 85vw;           /* Na mobilu chceme obálku přes většinu šířky */
    height: auto;          /* Výšku necháme na poměru stran */
    aspect-ratio: 3 / 2;   /* Pevný poměr stran */
    
    /* Zbytek tvého kódu... */
    opacity: 0.2;
    transform: scale(0.8);
    animation: envelope-appear 2s ease-out forwards;
}

/* Pro počítače (větší obrazovky) ji trochu zmenšíme, aby nebyla obří */
@media (min-width: 768px) {
    .envelope {
        width: 70vw;       /* Na PC stačí polovina šířky */
        max-width: 800px;  /* Ale nikdy ne víc než 600px */
    }
}

@keyframes envelope-appear {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.envelope.exit {
    transform: scale(1) translateY(120vh);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    outline: 2px solid red;
}

.envelope-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff url("../images/paperboard-texture.jpg") repeat;
    /*background: #fff url("../images/zuzka_papir.jpeg") repeat;*/
    background-size: cover; 
    border-radius: 0.5%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1;
    transition: box-shadow 0.6s ease;
}

.flap-shadow {
    position: absolute;
    top: 1.2%;
    left: 0;
    width: 100%;
    height: 60%;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,   /* tiny shadow at tip */
        rgba(0,0,0,0.25) 33%,  /* strongest shadow ~1/3 from tip */
        rgba(0,0,0,0) 100%     /* fade to zero at flap base */
    );
    filter: blur(10px);       /* softer and more natural shadow */
    z-index: 2;

    transition:
        opacity 0.6s ease,
        filter 0.6s ease,
        transform 0.6s ease;
}

.envelope-flap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    
    /* Linear gradient: tiny at tip, stronger near flap base */
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.01) 0%,   /* nearly transparent at flap tip/seal */
        rgba(0,0,0,0.06) 50%,  /* stronger in middle of flap */
        rgba(0,0,0,0.04) 100%  /* subtle near base of flap */
    );

    z-index: 4;       /* above flap for tint */
    pointer-events: none;
}



.envelope-flap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background: rgba(0,0,0,0.08);
    z-index: 4;
}



.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.05)),
        url("../images/paperboard-texture.jpg") repeat;
    background-size: cover;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    z-index: 3;

    /* new: tilt flap slightly forward */
    transform-origin: top center;
    transform: perspective(600px) rotateX(5deg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* subtle extra depth */

    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s ease;
}
/*
.envelope-flap.open {
    transform-origin: top center;
    transform: perspective(600px) rotateX(-120deg);
    transition: transform 0.8s ease-in-out;
}
*/  
.envelope-flap.open {
    transform: perspective(900px) rotateX(-135deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: flap-flex 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.envelope-flap.open + .flap-shadow,
.envelope-flap.open ~ .flap-shadow {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-10px);
}

.envelope-flap.open ~ .envelope-body {
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.envelope-flap.open ~ .seal {
    animation: 
        seal-shatter 0.12s ease-out,
        seal-break-fall 0.75s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
    animation-delay: 0, 0.1s;

    pointer-events: none;
}

.seal {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 4;          /* on top of flap and line */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}

@media (min-width: 768px) {
    .seal {
        max-width: 170px;
    }
}

.seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* click passes through to .seal */
}

.seal:hover {
    transform: translate(-50%, -50%) scale(1.05);
    animation: seal-tingle 0.3s ease-in-out infinite;
}

@keyframes seal-tingle {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    20%  { transform: translate(-50%, -50%) rotate(2deg); }
    40%  { transform: translate(-50%, -50%) rotate(-2deg); }
    60%  { transform: translate(-50%, -50%) rotate(1deg); }
    80%  { transform: translate(-50%, -50%) rotate(-1deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes flap-flex {
    0%   { transform: perspective(900px) rotateX(5deg); }
    20%  { transform: perspective(900px) rotateX(0deg); }
    100% { transform: perspective(900px) rotateX(-135deg); }
}

@keyframes seal-break-fall {
    /* intact */
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }

    /* crack moment */
    12% {
        transform: translate(-50%, -50%) scale(1.06) rotate(-2deg);
    }

    /* fracture release */
    20% {
        transform: translate(-50%, -48%) scale(0.92) rotate(3deg);
        opacity: 0.95;
    }

    /* gravity */
    100% {
        transform: translate(-50%, 120%) scale(0.9) rotate(28deg);
        opacity: 0.9;
    }
}

@keyframes seal-shatter {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    25%  { transform: translate(-50%, -50%) rotate(1deg); }
    50%  { transform: translate(-50%, -50%) rotate(-1deg); }
    75%  { transform: translate(-50%, -50%) rotate(0.5deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.mist {
    position: fixed;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.85),
        rgba(255,255,255,1)
    );
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    transition: opacity 2s ease;
}

.mist.show {
    opacity: 1;
}