/* ============ MOBILE ONLY (<= 768px) ============ */
@media (max-width: 768px) {
    section {
        padding: 2.5rem 1rem;
    }
    .hero-photo-bg {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
        object-position: center 28%;
    }
    .hero-section::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        display: none;
    }
    #s0 .countdown {
        bottom: 2.5rem;
        justify-content: center;
        gap: 1.2rem;
    }
    #s0 .countdown-item {
        padding: 0.4em 0.9em;
        border-radius: 1rem;
        background: radial-gradient(ellipse at center,
                rgba(10, 14, 26, 0.28) 0%,
                rgba(10, 14, 26, 0.14) 60%,
                rgba(10, 14, 26, 0) 100%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    #s0 .countdown-num {
        color: #fff;
        font-weight: 500;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    #s0 .countdown-label {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }
    #s0 .countdown-sep {
        color: rgba(255, 255, 255, 0.6);
    }

    /* Fix: move hero names lower on mobile */
    .hero-content .hero-names {
        margin-top: 33vh;
    }
    .cloud {
        top: 5%;
        width: 150px;
    }
    .cloud-2 {
        top: 2%;
        width: 110px;
    }
    .cloud-3 {
        top: 12%;
        width: 120px;
    }
    .hero-content .hero-eyebrow {
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 1vh);
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        text-align: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        font-size: 0.6rem;
        letter-spacing: 4px;
        gap: 0.35rem;
        line-height: 1.25;
    }
    .hero-content .hero-eyebrow .date-wrapper {
        display: block;
    }
    .hero-content .hero-eyebrow .mini-cal {
        left: 50%;
        transform: translateX(-50%) scale(0.9) translateY(8px);
    }
    section.active .hero-content .hero-eyebrow {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Банкетный зал Duna — plain white text on a hard-blurred frosted backdrop,
       with a black shadow for readability. */
    .hero-date-address {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
    }
    /* Date — always on one line, white text with black shadow. */
    .date-trigger {
        color: #ffffff;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
    }
}

@media (max-width: 768px) {
    /* Healthy frosted backplate behind the names — light/clear tint (no dark),
       keeps the blur + taper mask so it looks clean over the photo. */
    section.hero-section .hero-names {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.45);
        padding: 0.4em 1.8em;
        border-radius: 999px;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.3) 0%,
                rgba(255, 255, 255, 0.12) 55%,
                rgba(255, 255, 255, 0) 100%);
        backdrop-filter: blur(6px) saturate(1.3);
        -webkit-backdrop-filter: blur(6px) saturate(1.3);
        -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 78%);
        mask-image: radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 78%);
        transition: background 0.9s ease 1.6s, backdrop-filter 0.9s ease 1.6s, -webkit-backdrop-filter 0.9s ease 1.6s, text-shadow 0.9s ease 1.6s;
    }
    section.hero-section:not(.active) .hero-names {
        background: transparent;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        text-shadow: none;
    }
    /* Blur backplate for the hero top text (venue + date) on mobile —
       built on a ::before so the taper mask never clips the calendar dropdown. */
    section.hero-section .hero-eyebrow {
        padding: 1.1em 3em;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px) saturate(1.6);
        -webkit-backdrop-filter: blur(8px) saturate(1.6);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
        transition: opacity 1.2s ease 1.6s, transform 1.2s var(--ease-smooth) 1.6s;
    }
    /* No backplate until the hero section activates (matches the names behavior) */
    section.hero-section:not(.active) .hero-eyebrow {
        background: transparent;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        text-shadow: none;
    }
    /* Hard guarantee: no backplate/shadow can show before the picture is ready,
       even if the section becomes .active early for any reason. */
    body:not(.hero-photo-ready) .hero-names,
    body:not(.hero-photo-ready) .hero-eyebrow {
        background: transparent !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
        text-shadow: none !important;
    }
}

/* Map toggle on narrow screens */
@media (max-width: 600px) {
    .maps-row {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .map-frame {
        height: 170px;
    }
    .maps-row .map-wrapper {
        display: none;
    }
    .maps-row .map-wrapper.single-shown {
        display: block;
    }
    .map-toggle-btn {
        display: inline-flex;
    }
    section.active .map-toggle-btn {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s ease 0.9s, transform 0.7s var(--ease-bounce) 0.9s;
    }
}

/* ============ MOBILE ADAPTATION ============ */
@media (max-width: 768px) {
    .hero-names {
        font-size: clamp(3.1rem, 15vw, 6.5rem);
    }
    .hero-content .hero-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 4px;
        gap: 0.35rem;
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 1vh);
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        text-align: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
    section.active .hero-content .hero-eyebrow {
        transform: translateX(-50%) translateY(0) !important;
    }
    /* Center the "и" vertically between the two names on mobile */
    .names-col .name-and {
        top: 0.6em;
    }
    .story-panel,
    .schedule-wrapper,
    .rsvp-card,
    .gastro-card {
        padding: 1.6rem 1rem;
        border-radius: 1.6rem;
    }
    .option-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    #progress-dots {
        display: none;
    }
    .map-frame {
        height: 170px;
    }
    .tl-dot {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    .timeline-item {
        padding: 0.7rem 0.6rem;
        border-radius: 40px;
        gap: 0.8rem;
    }
    .tl-time {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }
    .tl-addr {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
        border-radius: 0.6rem;
    }
    input[type="text"]:disabled {
        font-size: 1.15rem;
    }
    .mini-cal {
        width: 290px;
        padding: 0.5rem 0.25rem;
        left: 50%;
        transform: translateX(-50%) scale(0.9) translateY(8px);
        right: auto;
        border-radius: 1.1rem;
        max-width: 90vw;
        bottom: auto;
        top: calc(100% + 0.4rem);
    }
    .cal-d {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }
    .cal-hd {
        width: 30px;
        height: 30px;
        font-size: 0.62rem;
    }
    .gastro-card h3 {
        font-size: 1.3rem;
    }
    /* On mobile the full-strength backdrop-blur on the menu cards is expensive and
       causes scroll lag. Keep the frosted look but use a much lighter blur radius. */
    #s6 .gastro-card {
        backdrop-filter: blur(3px) saturate(1.1) !important;
        -webkit-backdrop-filter: blur(3px) saturate(1.1) !important;
    }
    .rsvp-card h2 {
        font-size: 2rem;
    }
    .child-photo {
        width: clamp(120px, 34vw, 220px);
        padding: 0.5rem 0.5rem 1.8rem 0.5rem;
        border-radius: 0.14rem 0.14rem 0.4rem 0.4rem;
        cursor: zoom-in;
    }
    .child-photo-left {
        left: 2vw;
        top: 6%;
        --rot: -18deg;
    }
    .child-photo-right {
        left: 58%;
        right: auto;
        top: auto;
        bottom: 4%;
        --rot: 16deg;
    }
    #s1.active .child-photo {
        transform: translateY(0) perspective(700px) rotateX(5deg) rotateZ(var(--rot));
    }
    #s1.active .child-photo-right {
        transform: translateX(-50%) translateY(0) perspective(700px) rotateX(5deg) rotateZ(var(--rot));
    }

    /* Click-to-zoom child photos on mobile — 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: 92vw;
        max-width: 640px;
        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);
        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;
    }
    .dresscode-inner {
        padding: 0 0.5rem;
    }
    .dress-text p {
        font-size: 0.95rem;
    }
    .countdown {
        gap: 1rem;
    }
    .countdown-num {
        font-size: 2rem;
    }
    .maps-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* Floral on mobile — smaller, closer */
    .floral-frame {
        inset: -1.5rem -1.5rem;
    }
    .vine-tl,
    .vine-tr,
    .vine-bl,
    .vine-br {
        width: 0;
        height: 3px;
    }
    @keyframes vineGrow {
        0% {
            width: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            width: 60px;
            opacity: 1;
        }
    }
    @keyframes vineGrowVertical {
        0% {
            height: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            height: 50px;
            opacity: 1;
        }
    }
    .flower {
        transform: scale(0.7);
    }
    .flower-f1 {
        top: -0.2rem;
        left: 0.5rem;
    }
    .flower-f2 {
        top: -0.2rem;
        right: 0.5rem;
    }
    .flower-f3 {
        bottom: -0.2rem;
        left: 0.8rem;
    }
    .flower-f4 {
        bottom: -0.2rem;
        right: 0.8rem;
    }
    .flower-f5 {
        display: none;
    }
    .flower-f6 {
        display: none;
    }
    .leaf {
        display: none;
    }
    .sparkle {
        display: none;
    }
    .vine-edge-top,
    .vine-edge-bottom,
    .vine-edge-left,
    .vine-edge-right {
        display: none;
    }
}

@media (max-width: 480px) {
    section {
        padding: 1.8rem 0.6rem;
    }
    .hero-names {
        font-size: 2.9rem;
    }
    .hero-eyebrow {
        font-size: 0.5rem;
        letter-spacing: 3px;
        gap: 0.25rem;
    }
    .story-panel,
    .schedule-wrapper,
    .rsvp-card,
    .gastro-card {
        padding: 1.3rem 0.7rem;
        border-radius: 1.3rem;
    }
    .option-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
    .tl-dot {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .timeline-item {
        padding: 0.55rem 0.5rem;
        border-radius: 30px;
        gap: 0.6rem;
    }
    .tl-time {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }
    .tl-name {
        font-size: 0.8rem;
    }
    .tl-addr {
        font-size: 0.55rem;
        padding: 0.18rem 0.4rem;
    }
    .tl-route-btn {
        font-size: 0.6rem;
        letter-spacing: 1px;
        padding: 0.35rem 0.7rem;
    }
    .map-frame {
        height: 140px;
    }
    .btn-submit {
        padding: 0.85rem;
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
    input[type="text"],
    textarea {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }
    /* NOTE: #s6 must NOT get its own internal scroll container here. It needs to
       scroll together with the parent #scroll-container's native scroll-snap, so
       we keep overflow visible (handled by the snap block below). */
    .schedule-wrapper {
        max-height: 82vh;
        padding: 1.3rem 0.8rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    .child-photo {
        width: clamp(100px, 30vw, 180px);
        padding: 0.4rem 0.4rem 1.4rem 0.4rem;
    }
    .countdown {
        gap: 0.6rem;
    }
    .countdown-num {
        font-size: 1.7rem;
    }
    .countdown-label {
        font-size: 0.4rem;
        letter-spacing: 2px;
    }
    .countdown-sep {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }
    /* Floral on very small — minimal */
    .flower {
        transform: scale(0.5);
    }
    .flower-f1 {
        top: -0.5rem;
        left: 0.2rem;
    }
    .flower-f2 {
        top: -0.5rem;
        right: 0.2rem;
    }
    .flower-f3 {
        bottom: -0.5rem;
        left: 0.4rem;
    }
    .flower-f4 {
        bottom: -0.5rem;
        right: 0.4rem;
    }
    @keyframes vineGrow {
        0% {
            width: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            width: 40px;
            opacity: 1;
        }
    }
    @keyframes vineGrowVertical {
        0% {
            height: 0;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            height: 30px;
            opacity: 1;
        }
    }
}

/* ============ MOBILE TRANSITION ENGINE (JS-controlled transform slides) ============ */
@media (max-width: 768px) {
    html,
    body {
        overflow: hidden;
        height: 100%;
        height: 100dvh;
        width: 100%;
        touch-action: pan-y;
        overscroll-behavior: none;
    }
    /* The gradient sky is now a GPU-composited dual-layer element; hide the legacy
       canvas gradient so the two sources never double-draw (the flicker/stutter fix). */
    #bg-canvas {
        display: none !important;
    }
    #scroll-container {
        position: relative;
        height: 100vh;
        height: -webkit-fill-available;
        height: 100dvh;
        overflow: hidden !important;
        touch-action: pan-y;
        scroll-snap-type: none;
        overscroll-behavior: none;
    }
    /* JS drives the position. Native scroll-snap is fully disabled so fast swipes
       can never "fly through" more than one slide. */
    #slides-wrapper {
        position: relative;
        top: 0;
        left: 0;
        display: flex !important;
        flex-direction: column !important;
        transform: translateY(0);
        height: auto !important;
        will-change: transform;
        transition: transform 0.85s var(--ease-smooth);
    }
    #slides-wrapper.horizontal-mode,
    #slides-wrapper.vertical-mode {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    section,
    footer {
        scroll-snap-align: none;
        scroll-snap-stop: always;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        flex-shrink: 0;
        overflow: hidden;
    }
    #slides-wrapper.horizontal-mode section,
    #slides-wrapper.vertical-mode section {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }
    /* All slide content (windows, cards, text) stays hidden until the whole slide
       is active. This guarantees "background first, content second". */
    section:not(.active) > *:not(.hero-photo-bg),
    footer:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Clean exit — whole slide content fades out before it leaves the viewport. */
    section.exiting > *,
    footer.exiting {
        opacity: 0 !important;
        transition: opacity 0.35s ease-in !important;
    }
    /* Hero section keeps full-height layout, photo fills viewport with no top gap */
    section.hero-section {
        height: 100vh;
        height: -webkit-fill-available;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        padding: 0;
        overflow: hidden;
        margin: 0;
        border: 0;
    }
    section.hero-section .hero-photo-bg {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        object-fit: cover;
        object-position: center 30%;
        margin: 0;
        z-index: 0;
    }
    /* The menu slide is its own internal scroll container, exactly one screen tall.
       This keeps it a clean, uniform snap target (no giant tall block that fights
       the snap), and lets the menu content scroll smoothly up/down inside it —
       including when the "+1 / спутник" drinks card makes the list longer. */
    #s6 {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
    }
    /* Child polaroids on mobile stay fully visible (no watermark fade) */
    .child-photo {
        z-index: 1;
    }
    /* 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);
    }
    .intro-content {
        z-index: 2;
        text-shadow: 0 2px 10px rgba(255, 255, 255, 0.9);
    }
}

/* Keep fixed hero photo visible only while s0 occupies the top viewport on mobile */
@media (max-width: 768px) {
    #s0:not(.active) .hero-photo-bg {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
}

/* ============ MOBILE HERO LOAD + ONE-BY-ONE REVEAL ============ */
@media (max-width: 768px) {
    /* Nothing shown until the main picture is loaded: white background, and the
       sky-gradient canvases stay hidden until the photo is ready. */
    body {
        background: #fff;
    }
    /* Once the photo is ready, darken the body to the theme colour so no white
       edge/rectangle can ever flash at the bottom during scroll transitions. */
    body.hero-photo-ready {
        background: #0b0b15;
    }
    body:not(.hero-photo-ready) #bg-canvas,
    body:not(.hero-photo-ready) #stars-canvas {
        opacity: 0 !important;
    }
    /* On the hero slide the background gradient must never show — the photo
       replaces it. Restore the gradient only once the user scrolls away. */
    body.on-s0 #bg-canvas,
    body.on-s0 #stars-canvas {
        opacity: 0 !important;
    }
    /* Photo: fades in right after the main picture finishes downloading. */
    #s0 .hero-photo-bg {
        opacity: 0;
        transition: opacity 1.2s ease 0.15s;
    }
    body.hero-photo-ready #s0 .hero-photo-bg {
        opacity: 1;
    }

    /* The hero text animates in one-by-one AFTER the picture is fully visible:
       1) names     2) "и"       3) countdown   4) venue + date (Duna / 12·09·2026) */
    section.active .hero-content .name-left,
    section.active .hero-content .name-right {
        transition: opacity 2s ease 1.6s, transform 2s var(--ease-smooth) 1.6s, filter 2s ease 1.6s;
    }
    section.active .hero-content .name-and {
        transition: opacity 1.4s ease 3.4s, transform 1.4s var(--ease-bounce) 3.4s, filter 1.4s ease 3.4s;
    }
    section.active .hero-content .countdown {
        transition: opacity 1.1s ease 4.5s, transform 1.1s var(--ease-smooth) 4.5s;
    }
    section.active .hero-content .hero-eyebrow {
        transition: opacity 1.2s ease 1.6s, transform 1.2s var(--ease-smooth) 1.6s;
    }
    /* ===== Leaving the hero (s0), BEFORE the scroll transition runs =====
       The countdown and the names backplate fade in with long delays. If we let
       them linger while scrolling to S1, they'd stay visible during the whole
       transition. The moment the user starts scrolling away from s0 we hide both
       instantly with no transition delay so the scroll feels clean. */
    body.leaving-hero .countdown {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition: none !important;
    }
    body.leaving-hero section.hero-section .hero-names {
        background: transparent !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
        text-shadow: none !important;
    }
}