/* ========================================
   RESET & BASE STYLES
   ======================================== */

@font-face {
    font-family: 'Tan Pearl';
    src: url('../fonts/TAN - PEARL.woff2') format('woff2'),
        url('../fonts/TAN - PEARL.woff') format('woff'),
        url('../fonts/TAN - PEARL.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (max-width: 1023px) {
    html {
        overflow: visible;
    }
}

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

body {
    font-family: 'Georgia', serif;
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
}

@media (max-width: 1023px) {
    body {
        overflow: visible;
    }
}

body.mobile-opened {
    min-height: 100vh;
    height: auto;
}

#zoom-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

#zoom-root {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1024px;
    height: 768px;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(var(--zoom-level, 1));
    will-change: transform;
    overflow: hidden;
}

/* Make zoom-root responsive on mobile/tablet */
@media (max-width: 1023px) {
    #zoom-root {
        width: 1024px;
        height: 768px;
        max-width: none;
        max-height: none;
        overflow: visible;
    }
}

/* ========================================
   LAYOUT
   ======================================== */

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    perspective: 2000px;
}

@media (max-width: 1023px) {
    .hero {
        overflow: visible;
    }
}

/* ========================================
   HERO TEXT ELEMENTS
   ======================================== */

.hero-text {
    position: absolute;
    text-align: center;
    color: #4a3f35;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.8s ease-out;
}

.hero-text h1 {
    font-family: 'Tan Pearl', serif;
    margin: 0 0 10px 0;
    line-height: 1.2;
    white-space: nowrap;
}

.hero-text h1 {
    font-size: 30px;
    font-weight: 400;
}

.hero-text p {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

.hero-text-1 {
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeInDown 1s ease-out 0.8s forwards;
}

.envelope-container.flipped .hero-text,
.envelope-container.opened .hero-text {
    opacity: 0 !important;
    animation: none !important;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   ENVELOPE CONTAINER
   ======================================== */

.envelope-container {
    position: relative;
    width: 500px;
    height: 350px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none;
    perspective: 2000px;
    transform-style: preserve-3d;
    overflow: visible !important;
    will-change: transform;
    animation: fadeInUp 0.8s ease-out;
    transition: transform 0.3s ease;
}

.envelope-container.ready {
    pointer-events: auto;
}

.envelope-container * {
    pointer-events: none;
}

.envelope-container:hover {
    transform: scale(1.05);
}

.envelope-container.flipped:hover,
.envelope-container.opened:hover {
    transform: none;
}

/* ========================================
   ENVELOPE STRUCTURE
   ======================================== */

.envelope,
.envelope-back-bottom,
.envelope-back-top,
.envelope-flap,
.envelope-flap-inside {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.envelope {
    position: relative;
    width: 350px;
    height: 210px;
    transform-style: preserve-3d;
    overflow: visible !important;
    transition: transform 1s ease-out;
}

.envelope-container.flipped .envelope {
    transform: rotateY(180deg);
}

/* ========================================
   ENVELOPE FRONT
   ======================================== */

.envelope-front {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../images/envelope_front.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    z-index: 2;
    transition: opacity 0.8s ease-out 0.4s;
}

.envelope-front.visible {
    opacity: 1;
}

.envelope-text {
    position: absolute;
    left: 22%;
    top: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #f7f4e8;
    opacity: 0;
    z-index: 4;
    animation: fadeInText 0.8s ease-out 1.6s forwards;
}

.envelope-text .envelope-title {
    font-family: 'Mistrully', sans-serif;
    font-size: 26px;
    margin-bottom: 20px;
}

.envelope-text .date {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.stamp {
    position: absolute;
    width: 20%;
    height: auto;
    aspect-ratio: 1/1;
    top: 3%;
    right: 10%;
    background-image: url('../images/stamp.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 3;
    animation: fadeInStamp 0.6s ease-out 1.2s forwards;
}

.postal-wave {
    position: absolute;
    width: 62.5%;
    height: 12.5%;
    top: 21%;
    right: -1%;
    background-image: url('../images/postal_wave.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 3;
    animation: fadeInStamp 0.6s ease-out 1.4s forwards;
}

/* ========================================
   ENVELOPE BACK
   ======================================== */

.envelope-back-bottom {
    position: absolute;
    width: 91.5%;
    height: 100%;
    bottom: 0;
    left: 0;
    background-image: url('../images/envelope_back_bottom.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 4;
}

.envelope-back-top {
    position: absolute;
    width: 92%;
    height: 100%;
    top: 0.125%;
    left: -1%;
    background-image: url('../images/envelope_back_top.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 2;
}

/* ========================================
   ENVELOPE FLAP
   ======================================== */

.envelope-flap {
    position: absolute;
    width: 94.5%;
    height: 80%;
    left: -1%;
    top: 0;
    background-image: url('../images/envelope_flap.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: top center;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 4;
    transition: transform 1s ease-out;
}

.envelope-container.flipped .envelope-flap {
    transform: rotateY(180deg);
    transition-delay: 0s;
}

.envelope-container.opened .envelope-flap {
    transform: rotateY(180deg) rotateX(180deg);
    transition-delay: 1.5s;
}

.envelope-flap-inside {
    position: absolute;
    width: 92.5%;
    height: 70%;
    left: 0%;
    top: 0%;
    background-image: url('../images/envelope_flap_inside.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: top center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    opacity: 0;
    z-index: 2;
}

.envelope-container.flipped .envelope-flap-inside {
    opacity: 0;
}

.envelope-container.opened .envelope-flap-inside {
    opacity: 1;
    animation: flapInsideOpen 1s ease-out 1.5s forwards;
}

/* ========================================
   SEAL
   ======================================== */

.seal {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 84%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/seal.png');
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
    transition: opacity 0.25s ease;
}

.envelope-container.flipped .seal {
    opacity: 1;
}

.envelope-container.opened .seal {
    opacity: 0;
    transition-delay: 1s;
}

/* ========================================
   FLOWERS
   ======================================== */

.flowers-container,
.flower-1-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1600px;
    height: 960px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 1s ease-out;
}

.flowers-container.opened,
.flower-1-container.opened {
    opacity: 1;
    animation: flowersReappear 1s ease-out forwards;
}

.flowers-container.opened .flowers,
.flower-1-container.opened .flower-1 {
    opacity: 1;
}

.flower-1-container.opened .flower-1 {
    width: 250px;
    height: 313px;
    top: 20%;
    left: 59%;
    transition: opacity 1s ease-out;
}

.flower-1-container .flower-1 {
    position: absolute;
    width: 180px;
    height: 225px;
    top: 31%;
    left: 35.75%;
    background-image: url('../images/flower_1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 1s ease-out;
    animation: fadeInUpFlowers 1.2s ease-out 0.5s forwards;
}

.flowers-container {
    z-index: 0;
}

.flower-1-container {
    z-index: 10;
}

.flowers-container.flipped,
.flower-1-container.flipped {
    opacity: 0;
}

.flowers-container .flowers {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.flowers-container .flower-2 {
    width: 184px;
    height: 203px;
    top: 33%;
    left: 32.4%;
    background-image: url('../images/flower_2.png');
    animation: fadeInUpFlowers 1.2s ease-out 0.7s forwards;
    z-index: 2;
}

.flowers-container .flower-3 {
    width: 405px;
    height: 430px;
    top: 34%;
    left: 28.2%;
    background-image: url('../images/flower_3.png');
    animation: fadeInUpFlowers 1.2s ease-out 0.9s forwards;
    z-index: 1;
}

/* ========================================
   PHOTOS
   ======================================== */

.photos-container {
    position: fixed;
    top: 45%;
    left: 50%;
    width: 1600px;
    height: 960px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.1s ease;
}

.envelope-container.opened~.photos-container {
    opacity: 1;
}

.photo {
    position: absolute;
    width: 40px;
    height: 30px;
    top: 43%;
    left: 50%;
    margin-left: -100px;
    margin-top: -75px;
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: rotate(0deg);
    z-index: 5;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.envelope-container.opened .photos-container .photo {
    opacity: 1;
}

.photo:nth-child(1) {
    transition-delay: 3s;
}

.envelope-container.opened .photos-container .photo:nth-child(1) {
    animation: arcMotion1 2s linear 3s forwards;
}

.photo:nth-child(2) {
    transition-delay: 3.2s;
}

.envelope-container.opened .photos-container .photo:nth-child(2) {
    animation: arcMotion2 2s linear 3s forwards;
}

.photo:nth-child(3) {
    transition-delay: 3.4s;
}

.envelope-container.opened .photos-container .photo:nth-child(3) {
    animation: arcMotion3 2s linear 3s forwards;
}

.photo:nth-child(4) {
    transition-delay: 3.6s;
}

.envelope-container.opened .photos-container .photo:nth-child(4) {
    animation: arcMotion4 2s linear 3s forwards;
}

.photo:nth-child(5) {
    transition-delay: 3.8s;
}

.envelope-container.opened .photos-container .photo:nth-child(5) {
    animation: arcMotion5 2s linear 3s forwards;
}

/* ========================================
   INFO CARD
   ======================================== */

.info-card-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1600px;
    height: 960px;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.1s ease;
}

.envelope-container.opened .info-card-container {
    opacity: 1;
}

.info-card {
    position: absolute;
    width: 40px;
    height: 30px;
    top: -70px;
    left: 20px;
    margin: -30px 0 0 -30px;
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: rotate(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.info-card {
    transition-delay: 3s;
}

.envelope-container.opened .info-card-container .info-card {
    opacity: 1;
    animation: arcMotionInfoCard 2s linear 3s forwards;
}


/* ========================================
   SAVE THE DATE
   ======================================== */

.save-the-date-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1600px;
    height: 960px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: opacity 1s ease-out;
}

.save-the-date-container.flipped {
    opacity: 0;
    visibility: hidden;
}

.save-the-date-container.show {
    opacity: 1;
    visibility: visible;
}

.save-the-date-image {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.save-the-date-container .image-1 {
    width: 250px;
    height: 250px;
    top: 17%;
    left: 20%;
    background-image: url('../images/save_the_date.png');
    animation: none;
    opacity: 0;
}

.save-the-date-container.show .image-1 {
    animation: fadeInUpFlowers 1.2s ease-out 0s forwards;
}

/* ========================================
   ADDITIONAL IMAGES
   ======================================== */

.additional-images-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1600px;
    height: 960px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    z-index: 11;
    transition: opacity 1s ease-out;
}

.additional-images-container.flipped {
    opacity: 0;
}

.additional-images-container.show {
    opacity: 1;
}

.additional-image {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.additional-images-container .image-1 {
    width: 100px;
    height: 100px;
    top: 35%;
    left: 48%;
    background-image: url('../images/additional_image_1.png');
    animation: fadeInUpFlowers 1.2s ease-out 0.2s forwards;
}

.additional-images-container .image-2 {
    width: 225px;
    height: 225px;
    top: 38%;
    right: 16%;
    background-image: url('../images/additional_image_2.png');
    animation: fadeInUpFlowers 1.2s ease-out 0.4s forwards;
}

.additional-images-container .image-3 {
    width: 200px;
    height: 138px;
    bottom: 15%;
    right: 23%;
    background-image: url('../images/additional_image_3.png');
    animation: fadeInUpFlowers 1.2s ease-out 0.4s forwards;
}

/* ========================================
   UI ELEMENTS
   ======================================== */

.click-text {
    position: absolute;
    bottom: -10%;
    left: 50%;
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    animation: fadeInPulse 0.8s ease-out 2s forwards, pulse 2s ease-in-out 2.8s infinite;
}

.envelope-container.flipped .click-text,
.envelope-container.opened .click-text {
    animation: slowFadeOut 0.5s ease-out forwards;
}

.reset-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background: #8b7355;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease, background 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
    transform: none !important;
}

html>.reset-btn {
    position: fixed !important;
}

.reset-btn.show {
    opacity: 1 !important;
    pointer-events: all !important;
}

.reset-btn:hover {
    background: #6d5a43;
}

.reset-btn:hover svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.reset-btn svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpFlowers {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes fadeInStamp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flowersReappear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes flapInsideOpen {
    0% {
        transform: rotateX(0deg);
    }

    5% {
        transform: rotateX(-10deg);
    }

    100% {
        transform: rotateX(-180deg);
    }
}

@keyframes fadeInPulse {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.7;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes slowFadeOut {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
    }
}

@keyframes simpleFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes arcMotion1 {
    0% {
        width: 40px;
        height: 30px;
        top: 43%;
        left: 50%;
        margin-left: -100px;
        margin-top: -75px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 145px;
        height: 109px;
        top: 10%;
        left: 44.25%;
        margin: 0;
        transform: rotate(172.5deg);
    }

    100% {
        width: 250px;
        height: 188px;
        top: 26%;
        left: 38.5%;
        margin: 0;
        transform: rotate(345deg) translateY(0);
    }
}

@keyframes arcMotion2 {
    0% {
        width: 40px;
        height: 30px;
        top: 43%;
        left: 50%;
        margin-left: -100px;
        margin-top: -75px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 195px;
        height: 146.5px;
        top: 10%;
        left: 33%;
        margin: 0;
        transform: rotate(180deg);
    }

    100% {
        width: 350px;
        height: 263px;
        top: 52%;
        left: 18%;
        margin: 0;
        transform: rotate(360deg) translateY(0);
    }
}

@keyframes arcMotion3 {
    0% {
        width: 40px;
        height: 30px;
        top: 43%;
        left: 50%;
        margin-left: -100px;
        margin-top: -75px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 180px;
        height: 135px;
        top: 10%;
        left: 42.5%;
        margin: 0;
        transform: rotate(175deg);
    }

    100% {
        width: 270px;
        height: 203px;
        top: 51%;
        left: 38%;
        margin: 0;
        transform: rotate(350deg) translateY(0);
    }
}

@keyframes arcMotion4 {
    0% {
        width: 40px;
        height: 30px;
        top: 43%;
        left: 50%;
        margin-left: -100px;
        margin-top: -75px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 160px;
        height: 120px;
        top: 10%;
        left: 57.5%;
        margin: 0;
        transform: rotate(190deg);
    }

    100% {
        width: 280px;
        height: 210px;
        top: 52.5%;
        left: 65%;
        margin: 0;
        transform: rotate(380deg) translateY(0);
    }
}

@keyframes arcMotion5 {
    0% {
        width: 40px;
        height: 30px;
        top: 43%;
        left: 50%;
        margin-left: -100px;
        margin-top: -75px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 185px;
        height: 138.5px;
        top: 10%;
        left: 57%;
        margin: 0;
        transform: rotate(180deg);
    }

    100% {
        width: 330px;
        height: 247px;
        top: 25%;
        left: 64%;
        margin: 0;
        transform: rotate(360deg) translateY(0);
    }
}

@keyframes arcMotionInfoCard {
    0% {
        width: 40px;
        height: 30px;
        top: -70px;
        left: 20px;
        margin: -30px 0 0 -30px;
        transform: rotate(0deg) translateY(0);
    }

    50% {
        width: 345px;
        height: 250px;
        top: -500px;
        left: -90px;
        margin: 0;
        transform: rotate(180deg);
    }

    100% {
        width: 500px;
        height: 362px;
        top: -10%;
        left: -6%;
        margin: 0;
        transform: rotate(360deg) translateY(0);
    }
}

@media (min-width: 1024px) {

    .photos-container,
    .info-card-container {
        display: block !important;
        opacity: 1 !important;
    }

    .photo {
        display: block !important;
        visibility: visible !important;
    }
}

/* ========================================
   MOBILE PHASE 1 — LOCKED FULLSCREEN
   ========================================
   Envelope only. No scroll. All other
   containers hidden until .opened fires.
   ======================================== */

@media (max-width: 1023px) {

    /* ========================================
       CAMERA ZOOM APPROACH
       Handled by JavaScript for smooth continuous scaling
       ======================================== */

    /* ========================================
       ORIGINAL MOBILE STYLES CONTINUE BELOW
       ======================================== */

    /* Let desktop sizes scale via transform - don't override with smaller fixed sizes */
    .envelope-container {
        flex-shrink: 0;
        margin: 0;
        transition: width 0.5s ease, margin 0.5s ease;
    }


    .click-text {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        /* Font size will scale with transform */
    }

    .envelope-front {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* LOCK SCROLL ON MOBILE UNTIL OPENED */
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    #zoom-root {
        width: 1024px !important;
        height: 768px !important;
        position: relative;
        transform-origin: center center;
        will-change: transform;
    }

    .hero {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        perspective: none;
    }

    .envelope-container:hover {
        transform: none;
    }

    .envelope-back-bottom,
    .envelope-back-top {
        opacity: 1;
        transition: opacity 1.5s ease 0.5s;
    }

    /* Keep flap-inside hidden on envelope front */
    .envelope-front .envelope-flap-inside {
        opacity: 0;
        visibility: hidden;
    }

    /* Show flap-inside ONLY after envelope opens */
    .envelope.opened .envelope-flap-inside {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.6s ease;
    }


    body.envelope-fade-out .envelope-back-bottom,
    body.envelope-fade-out .envelope-back-top,
    body.envelope-fade-out .envelope-flap-inside {
        opacity: 0 !important;
        transition: opacity 1.2s ease;
    }

    body.envelope-fade-out .envelope-container {
        position: fixed !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        z-index: 50;
    }

    /* Release envelope back into layout after scroll activates */
    body.mobile-opened .envelope-container {
        position: static !important;
        transform: none !important;
    }

    /* Show decorations on mobile initially (matching desktop intro) */
    .flowers-container,
    .flower-1-container,
    .save-the-date-container {
        display: block !important;
        position: absolute;
        opacity: 1;
    }

    /* Hide additional images on mobile - they only appear in scroll layout */
    .additional-images-container {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Make sure individual elements run their animations */
    .flowers-container .flowers,
    .flower-1-container .flower-1,
    .save-the-date-container .save-the-date-image {
        opacity: 0;
        animation-play-state: running !important;
    }

    /* Additional images stay hidden until mobile-opened */
    .additional-images-container .additional-image {
        opacity: 0;
        animation-play-state: paused !important;
    }

    /* Fade out containers when envelope flips */
    .envelope-container.flipped~.flowers-container,
    .envelope-container.flipped~.flower-1-container,
    .envelope-container.flipped~.save-the-date-container,
    .envelope-container.flipped~.additional-images-container {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    /* Photos and info card stay hidden until envelope opens */
    .photos-container,
    .info-card-container {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .reset-btn {
        width: 42px !important;
        height: 42px !important;
        bottom: 18px !important;
        right: 18px !important;
    }

    .reset-btn svg {
        width: 20px;
        height: 20px;
    }


    /* ========================================
       MOBILE PHASE 2 — SCROLLABLE LAYOUT
       ========================================
       After envelope opens, transition to
       vertical scrolling grid layout
       ======================================== */

    /* Unlock scrolling when envelope is opened */
    body.mobile-opened {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        overscroll-behavior: auto !important;
        touch-action: auto !important;
    }

    body.mobile-opened html {
        overflow-y: auto;
    }

    /* Hero becomes a vertical grid container */
    body.mobile-opened .hero {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
        width: 768px !important;
        /* ← Portrait base width */
        max-width: none !important;
        margin: 0 auto;
        padding: 60px 80px 600px; /* Increased bottom padding from 100px to 300px */
        height: auto;
        min-height: auto;
        align-content: start;
    }

    /* Envelope at top of grid - CRITICAL: Use display:contents wrapper */
    body.mobile-opened .envelope-container {
        /* Container becomes transparent to grid - children participate directly */
        display: contents !important;
    }

    /* The actual envelope needs to be a grid item */
    body.mobile-opened .envelope-container>.envelope {
        position: static !important;
        grid-column: 1 / -1;
        width: 600px !important;
        height: 360px !important;
        max-width: none !important;
        display: block;
        margin: 600px 50px auto 0; /* Changed from 60vh */
        justify-self: center;
        pointer-events: none;
        order: 1;
        flex-shrink: 0;
    }

    /* Click text needs to be positioned relative to envelope */
    body.mobile-opened .click-text {
        display: none !important;
        /* Hide on mobile-opened */
    }

    /* Hero text also needs to be hidden or repositioned */
    body.mobile-opened .hero-text {
        display: none !important;
    }

    body.mobile-opened .envelope-flap-inside {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: 65% !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 999 !important;
        position: absolute !important;
        backface-visibility: visible !important;
        transform: none !important;
        pointer-events: none;
        transform: rotateX(180deg) !important;
        transform-origin: top center !important;
    }

    body.mobile-opened .envelope-back-bottom,
    body.mobile-opened .envelope-back-top {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    /* Ensure flap-inside renders ABOVE envelope back */
    body.mobile-opened .envelope-flap-inside {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 3 !important;
        position: absolute !important;
        inset: 0;
        backface-visibility: visible !important;
        pointer-events: none;
    }

    /* Prevent flap-inside from inheriting flipped 3D state */
    body.mobile-opened .envelope-flap-inside * {
        transform: none !important;
    }

    body.mobile-opened .envelope.opened .envelope-flap-inside {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transition: opacity 0.6s ease;
    }


    /* Make envelope back visible and properly sized */
    body.mobile-opened .envelope-back-bottom {
        width: 91.5%;
        height: 100%;
    }

    body.mobile-opened .envelope-back-top {
        width: 92%;
        height: 100%;
    }

    body.mobile-opened .envelope-back-bottom,
    body.mobile-opened .envelope-back-top {
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.8s ease;
    }


    /* Speed up flap animation on mobile */
    body.mobile-opened .envelope-container.opened .envelope-flap {
        transition-delay: 0.6s;
    }

    body.mobile-opened .envelope-container.opened .envelope-flap-inside {
        animation-delay: 0.6s;
    }

    /* Hide original decoration containers and prepare for grid */
    body.mobile-opened .flowers-container,
    body.mobile-opened .flower-1-container,
    body.mobile-opened .additional-images-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
    }

    body.mobile-opened .save-the-date-container {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        transform: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        order: 1;
        grid-column: 1 / -1;
        z-index: 200 !important;
    }

    /* Container ordering */
    body.mobile-opened .save-the-date-container {
        order: 0;
    }

    body.mobile-opened .flower-1-container {
        order: 5;
    }

    body.mobile-opened .flowers-container {
        display: contents !important;
        order: 8;
    }

    body.mobile-opened .additional-images-container {
        display: contents !important;
        grid-column: 1 / -1 !important;
    }

    /* Show photos and info card containers - use display:contents */
    body.mobile-opened .photos-container {
        display: contents !important;
    }

    /* STEP 1 — Info card must KEEP a real box */
    body.mobile-opened .info-card-container {
        display: contents !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
    }

    /* Force photos to display */
    body.mobile-opened .photo {
        display: block !important;
        visibility: visible !important;
    }

    /* Base styles for all grid items */
    body.mobile-opened .flowers,
    body.mobile-opened .flower-1,
    body.mobile-opened .save-the-date-image,
    body.mobile-opened .additional-image,
    body.mobile-opened .info-card {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22)) !important;
        animation: simpleFadeIn 0.6s ease-out forwards !important;
        animation-play-state: running !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border-radius: 4px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    body.mobile-opened .photo {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22)) !important;
        animation: simpleFadeIn 0.6s ease-out forwards !important;
        animation-play-state: running !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border-radius: 4px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    body.mobile-opened .flowers-container,
    body.mobile-opened .additional-images-container,
    body.mobile-opened .info-card-container {
        display: contents !important;
    }

    body.mobile-opened .flower-2,
    body.mobile-opened .flower-3,
    body.mobile-opened .additional-image.image-3,
    body.mobile-opened .info-card {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.mobile-opened .flower-2,
    body.mobile-opened .flower-3,
    body.mobile-opened .additional-image:nth-child(3) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.mobile-opened .flower-2,
    body.mobile-opened .flower-3 {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        pointer-events: none !important;
        left: auto !important;
        top: auto !important;
        min-height: 140px !important;
        transform: none !important;
    }

    body.mobile-opened .additional-image.image-3 {
        aspect-ratio: 1 / 1 !important;
        min-height: 140px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    body.mobile-opened .info-card {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        min-height: 220px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* ===== MOBILE LAYOUT ORDER ===== */

    /* Row 2: Save the date (full width) - order: 2 */
    body.mobile-opened .save-the-date-image {
        position: absolute !important;
        top: 450px !important; /* 45% of 768px */
        left: -200px !important; /* 20% of 768px */
        width: 400px !important;
        height: 400px !important;
        z-index: 200 !important;
        aspect-ratio: 1 / 1;
        animation: simpleFadeIn 0.6s ease-out forwards !important;
        animation-delay: 0.1s !important;
        opacity: 1 !important;
        pointer-events: none;
    }

    /* Row 3: Photo 5 (2 cols) + Photo 1 (2 cols) + Flower 1 (1 col) = 5 cols total */
    body.mobile-opened .photo:nth-child(5) {
        order: 3;
        grid-column: 1 / 3;
        aspect-ratio: 4 / 3;
        animation-delay: 0.2s !important;
        min-height: 280px !important;
        max-height: 280px !important;
        max-width: 100% !important;
        margin-top: -160px !important; /* 21% of 768px */
        margin-left: 120px !important; /* 14% of 768px */
        z-index: 10 !important;
        transform: rotate(-10deg) !important;
    }

    body.mobile-opened .photo:nth-child(1) {
        order: 4;
        grid-column: 3 / 5;
        aspect-ratio: 4 / 3;
        animation-delay: 0.25s !important;
        min-height: 260px;
        max-height: 260px;
        margin-top: -50px !important; /* 5% of 768px */
        margin-left: -20px !important; /* 3% of 768px */
        transform: rotate(18deg) !important;
    }

    body.mobile-opened .flower-1 {
        order: 5;
        grid-column: 5 / 6;
        aspect-ratio: 180 / 225;
        animation-delay: 0.3s !important;
        min-height: 450px;
        max-height: 450px;
        margin-top: -250px !important; /* 30% of 768px */
        margin-left: -150px !important; /* 10% of 768px */
    }

    /* Row 4: Additional image 1 (full width across 5 columns) */
    body.mobile-opened .additional-image:nth-child(1) {
        width: 20% !important;
        max-width: 200px !important;
        height: auto !important;
        margin: 0px auto !important;
        grid-column: 1 / -1 !important;
        order: 6 !important;
        aspect-ratio: 1 / 1;
        animation-delay: 0.4s !important;
        min-height: 120px;
        margin-top: 38px !important; /* 5% of 768px */
        margin-bottom: 38px !important; /* 5% of 768px */
    }

    /* Additional image 2 */
    body.mobile-opened .additional-image:nth-child(2) {
        order: 7 !important;
    }

    /* ===== ROW 5: FIXED LAYOUT ===== */
    /* Flower 2 - base layer in column 1 */
    body.mobile-opened .flower-2 {
        grid-column: 1 / 2 !important;
        grid-row: 5 !important;
        order: 20 !important;
        min-height: 200px !important;
        max-height: 200px !important;
        aspect-ratio: 1 / 1 !important;
        z-index: 6 !important;
        animation-delay: 0.5s !important;
        margin-left: 92px !important; /* 12% of 768px */
        margin-top: -461px !important; /* 60% of 768px */
        margin-right: -230px !important; /* 30% of 768px */
    }

    /* Flower 3 - overlaps flower 2 on z-axis in SAME cell */
    body.mobile-opened .flower-3 {
        grid-column: 1 / 2 !important;
        grid-row: 5 !important;
        order: 20 !important;
        min-height: 500px !important;
        max-height: 500px !important;
        aspect-ratio: 1 / 1 !important;
        z-index: 5 !important;
        animation-delay: 0.55s !important;
        margin-left: 115px !important; /* 15% of 768px */
        margin-top: -207px !important; /* 27% of 768px */
        margin-right: -215px !important; /* 28% of 768px */
    }

    /* Info card - spans columns 2-6 */
    body.mobile-opened .info-card {
        grid-column: 2 / 6 !important;
        grid-row: 5 !important;
        order: 21 !important;
        display: block !important;
        width: 90% !important;
        aspect-ratio: 4 / 5 !important;
        min-height: 300px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        z-index: 7 !important;
        margin-left: -100px !important; /* 5% of 768px */
        margin-right: 77px !important; /* 10% of 768px */
    }

    /* Additional image 3 - overlaps info card on z-axis in SAME cells */
    body.mobile-opened .additional-image:nth-child(3) {
        grid-column: 4 / 6 !important;
        grid-row: 5 !important;
        order: 21 !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 350px !important;
        max-height: 350px !important;
        width: 40% !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        z-index: 8 !important;
        margin-top: -538px !important; /* 70% of 768px */
        margin-left: 54px !important; /* 7% of 768px */
    }

    /* Row 7: Photo 3 + Photo 4 */
    body.mobile-opened .photo:nth-child(3) {
        order: 24;
        grid-column: 1 / 3;
        aspect-ratio: 4 / 3;
        animation-delay: 0.7s !important;
        z-index: 9 !important;
        min-height: 330px;
        max-height: 330px;
        margin-top: -60px !important; /* 5% of 768px */
        margin-left: 115px !important; /* 15% of 768px */
        margin-right: -154px !important; /* 20% of 768px */
        transform: rotate(-8deg) !important;
    }

    body.mobile-opened .photo:nth-child(4) {
        order: 25;
        grid-column: 4 / 6;
        aspect-ratio: 4 / 3;
        animation-delay: 0.75s !important;
        z-index: 10 !important;
        min-height: 300px;
        max-height: 300px;
        margin-top: -60px !important; /* 5% of 768px */
        margin-left: -150px !important; /* 15% of 768px */
        transform: rotate(8deg) !important;
    }

    /* Row 8: Photo 2 (full width across 5 columns) */
    body.mobile-opened .photo:nth-child(2) {
        grid-column: 1 / -1;
        order: 26;
        aspect-ratio: 4 / 3;
        animation-delay: 0.8s !important;
        z-index: 110 !important;
        min-height: 300px;
        max-height: 300px;
        margin-top: -69px !important; /* 9% of 768px */
    }

}

/* ========================================
   SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 479px) {
    /* Scale handled by JavaScript */

    body.mobile-opened .hero {
        max-width: 100%;
        padding: 30px 12px 300px; /* Increased bottom padding from 70px to 150px */
        gap: 12px;
    }

    body.mobile-opened .envelope-container {
        width: 400px;
    }

    body.mobile-opened .envelope {
        width: 400px;
        height: 240px;
    }

    .reset-btn {
        width: 36px !important;
        height: 36px !important;
        bottom: 14px !important;
        right: 14px !important;
    }

    .reset-btn svg {
        width: 17px;
        height: 17px;
    }
}


/* ========================================
   TABLET (768–1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Scale handled by JavaScript */

    .hero-text-1 {
        top: -25%;
    }

    body.mobile-opened .envelope-container {
        width: 560px;
        max-width: 560x;
    }

    body.mobile-opened .envelope {
        width: 560px;
        height: 336px;
    }

    body.mobile-opened .hero {
        max-width: 700px;
        gap: 20px;
        padding: 80px 20px 480px; /* Increased bottom padding from 80px to 200px */
    }
}