/* ============ DESKTOP ONLY (>= 769px) ============ */
@media (min-width: 769px) {
    .hero-photo-desktop {
        display: block;
        position: absolute;
        right: 7vw;
        top: 50%;
        width: clamp(280px, 34vw, 440px);
        padding: 1rem 1rem 2.6rem 1rem;
        z-index: 2;
        opacity: 0;
        transform: translateY(-50%) translateY(-180px) rotate(-4deg) scale(0.82);
        transform-origin: center center;
        animation: heroPhotoIn 1.4s var(--ease-smooth) 2.2s forwards;
    }
    .hero-photo-desktop img {
        aspect-ratio: 3/4;
        object-fit: cover;
        width: 100%;
        height: auto;
        filter: brightness(1) contrast(1);
    }
    .hero-photo-desktop.fly-out {
        animation: polaroidFlyOut 0.85s var(--ease-smooth) forwards !important;
    }
    @keyframes heroPhotoIn {
        0% {
            opacity: 0;
            transform: translateY(-50%) translateY(40px) scale(0.94);
        }
        100% {
            opacity: 1;
            transform: translateY(-50%) translateY(0) rotate(-1.2deg) scale(1);
        }
    }
    .hero-content {
        align-items: flex-start;
        padding-left: 0;
        width: 100%;
        gap: 0.5rem;
        z-index: 3;
    }
    .hero-content .hero-eyebrow {
        text-align: center;
        justify-content: center;
        font-size: 0.7rem;
        letter-spacing: 7px;
        gap: 0.6rem;
        opacity: 0;
        position: absolute;
        top: 6vh;
        left: 50%;
        transform: translateX(-50%) translateY(-24px);
        transition: opacity 1.5s ease 0.3s, transform 1.5s var(--ease-smooth) 0.3s;
    }
    section.active .hero-content .hero-eyebrow {
        transform: translateX(-50%) translateY(0) !important;
    }
    .hero-content .hero-names {
        text-align: left;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        font-size: clamp(5rem, 9vw, 9rem);
        padding-left: clamp(5rem, 30vw, 34rem);
        text-shadow: 0 2px 6px rgba(80, 88, 100, 0.6), 0 1px 3px rgba(80, 88, 100, 0.4);
        animation: namesToPlace 1.3s var(--ease-smooth) 0.15s backwards;
        will-change: transform, opacity;
    }
    @keyframes namesToPlace {
        0% {
            opacity: 0;
            transform: translateX(14vw) translateY(-4vh) scale(1.55);
        }
        100% {
            opacity: 1;
            transform: translateX(0) translateY(0) scale(1);
        }
    }
    /* Let the container animation drive the names entrance on desktop (no per-word slide) */
    section.active .hero-content .name-left,
    section.active .hero-content .name-right,
    section.active .hero-content .name-and {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .hero-content .names-col {
        align-items: flex-start;
    }
    .hero-content .hero-date-row {
        margin-top: 0.6rem;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 1.5s ease 0.5s, transform 1.5s var(--ease-smooth) 0.5s;
    }
    #s0 .countdown {
        bottom: 3.5rem;
        gap: 1.5rem;
        text-align: left;
        justify-content: flex-start;
        left: auto;
        width: auto;
        transform: translateY(30px);
        transition: opacity 1.5s ease 0.8s, transform 1.5s var(--ease-smooth) 0.8s;
    }
    #s0.active .countdown {
        transform: translateY(0);
    }
    #s0 .countdown-num {
        font-size: clamp(1.7rem, 3.2vw, 2.8rem);
    }
    #s0 .countdown-sep {
        font-size: clamp(1.1rem, 2.2vw, 1.8rem);
        padding-bottom: 0.4rem;
    }

    /* S1 child photos — first above text, second below (moved from the right side) */
    .hero-section + section .child-photo {
        z-index: 1;
    }
    .child-photo {
        cursor: zoom-in;
    }
    /* Prevent any polaroid hover-lift on S1 children pics (handled globally in base.css) */
    .child-photo.polaroid-card:hover,
    .child-photo.polaroid-card:not(.zoomed):hover {
        box-shadow:
            var(--polaroid-shadow-1),
            var(--polaroid-shadow-2),
            var(--polaroid-shadow-3),
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    }
    .child-photo-left {
        left: 5vw;
        top: 6%;
        --rot: -18deg;
    }
    .child-photo-right {
        right: auto;
        left: 58%;
        top: auto;
        bottom: 3%;
        --rot: 15deg;
    }
    #s1.active .child-photo-right {
        transform: translateX(-50%) translateY(0) perspective(800px) rotateX(5deg) rotateZ(var(--rot));
    }

    /* Click-to-zoom child photos on desktop — grow the card to a large physical
       size (renders the high-res photo sharply) instead of transform-scaling the
       small base layer (which stretches a low-res raster and looks blurry). */
    .child-photo.zoomed,
    #s1.active .child-photo.zoomed {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        width: clamp(420px, 58vw, 780px);
        transform: translate(-50%, -50%) rotate(-6deg) !important;
        z-index: 999;
        cursor: zoom-out;
        transition: width 0.84s var(--ease-smooth), transform 0.84s var(--ease-smooth), box-shadow 0.84s var(--ease-smooth);
        /* Drop the filter layer so the enlarged photo stays crisp. */
        filter: none !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: auto;
    }
    .child-photo.zoomed:hover,
    #s1.active .child-photo.zoomed:hover {
        transform: translate(-50%, -50%) rotate(-6deg) !important;
        filter: none !important;
        will-change: auto;
    }
    .child-photo.zoomed img,
    .child-photo.zoomed:hover img {
        filter: none !important;
        image-rendering: auto;
    }
    .child-photo.zoomed::after {
        opacity: 1;
    }
}