/* ============================================
   8-BIT DESERT ADVENTURE WEDDING WEBSITE
   Laura & Andrea — Desert + Beach + Retro Platformer
   ============================================ */

:root {
    /* Color Palette — Desert + Beach */
    --color-bg: #1f160f;
    --color-bg-alt: #3a2a1b;
    --color-primary: #d7782f;
    --color-accent: #4ec2cf;
    --color-accent-text: #1a8fa8;
    --color-highlight: #f2c96a;
    --color-text: #f4e8d0;
    --color-success: #7ec06c;
    --color-white: #fff8e9;
    --sand-light: #f1cf94;
    --sand-mid: #d5a765;
    --sand-dark: #9f6f3e;
    --sea-shallow: #67d0d8;
    --sea-deep: #2b8aa0;
    --sun-glow: #ffd06b;

    /* Fonts */
    --font-pixel: 'Press Start 2P', monospace;

    /* Spacing */
    --section-padding: 100px;
    --container-width: 1100px;

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.6s ease;

    /* Pixel borders */
    --pixel-border: 4px solid var(--color-accent);
    --pixel-border-pink: 4px solid var(--color-primary);
    --pixel-border-gold: 4px solid var(--color-highlight);
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-pixel);
    color: var(--color-text);
    background: linear-gradient(180deg, #2b1d12 0%, #1f160f 100%);
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    image-rendering: pixelated;
}

/* ============================================
   CRT SCANLINE OVERLAY
   ============================================ */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.08) 1px,
        rgba(0, 0, 0, 0.08) 2px
    );
}

.crt-overlay::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-label {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--color-accent-text);
    margin-bottom: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.78),
        0 0 6px rgba(11, 97, 119, 0.45);
}

.section-title {
    font-family: var(--font-pixel);
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 16px;
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.section-subtitle {
    font-family: var(--font-pixel);
    font-size: 0.64rem;
    color: var(--color-text);
    opacity: 0.7;
    line-height: 2.2;
}

/* ============================================
   SPEECH BUBBLE
   ============================================ */
.speech-bubble {
    position: relative;
    background: #3a2b1a;
    border: var(--pixel-border);
    border-radius: 0;
    padding: 28px 24px;
}

/* Pixel-stepped tail pointing down-left */
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 32px;
    width: 16px;
    height: 16px;
    background: #3a2b1a;
    border-bottom: var(--pixel-border);
    border-right: var(--pixel-border);
    border-top: none;
    border-left: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 36px;
    width: 8px;
    height: 8px;
    background: #3a2b1a;
    border-bottom: var(--pixel-border);
    border-right: var(--pixel-border);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Right-pointing bubble tail */
.speech-bubble.bubble-right::after {
    left: auto;
    right: 32px;
}

.speech-bubble.bubble-right::before {
    left: auto;
    right: 36px;
}

/* Center bubble */
.speech-bubble.bubble-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.speech-bubble.bubble-center::before {
    left: 50%;
    transform: translateX(-50%);
}

.speech-bubble h3 {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-bottom: 14px;
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.speech-bubble p {
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    line-height: 2.4;
    color: #f8ecd2;
    text-shadow: 1px 1px 0 rgba(35, 20, 9, 0.45);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(
        180deg,
        #8bc7dc 0%,
        #a7d8e8 34%,
        #90cedf 45%,
        #67b9cf 46%,
        #4fa3bd 64%,
        #3e8ea7 74%,
        #d6a368 84%,
        #be8347 100%
    );
    overflow: hidden;
}

/* Pixel desert sky + sea + dunes */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image:
        radial-gradient(120px 120px at 18% 26%, rgba(255, 208, 107, 0.9) 0%, rgba(255, 208, 107, 0.55) 45%, transparent 60%),
        linear-gradient(180deg, rgba(255, 246, 221, 0.28) 0%, rgba(255, 246, 221, 0) 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 44%, rgba(186, 233, 245, 0.52) 45%, rgba(156, 219, 235, 0.62) 47%, rgba(89, 178, 202, 0.8) 58%, rgba(62, 139, 164, 0.84) 70%, rgba(42, 106, 128, 0.68) 76%, rgba(0, 0, 0, 0) 84%),
        repeating-linear-gradient(178deg, rgba(255, 255, 255, 0) 46.5%, rgba(255, 255, 255, 0.24) 47%, rgba(255, 255, 255, 0) 47.6%),
        radial-gradient(520px 90px at 50% 90%, rgba(205, 148, 84, 0.88) 58%, transparent 59%);
    animation: seaShimmer 7s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0 3px,
        rgba(0, 0, 0, 0.03) 3px 6px
    );
    mix-blend-mode: soft-light;
}

@keyframes seaShimmer {
    0% { filter: saturate(1); transform: translateX(0); }
    100% { filter: saturate(1.08); transform: translateX(2px); }
}

@keyframes heroScoreFlash {
    0% {
        filter: brightness(1);
        transform: translateY(0);
    }
    50% {
        filter: brightness(1.18);
        transform: translateY(-1px);
    }
    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
}

@keyframes heroGameOverPop {
    0% {
        opacity: 0;
        transform: scale(0.94);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    animation: fadeInUp 1.2s ease;
}

.hero-names {
    font-family: var(--font-pixel);
    font-size: clamp(1.4rem, 6vw, 3rem);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow:
        2px 2px 0 #5f2f13,
        0 0 12px rgba(215, 120, 47, 0.45);
}

.hero-date {
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 2.8vw, 1.35rem);
    color: var(--color-highlight);
    margin-bottom: 12px;
    text-shadow: 2px 2px 0 #6d4a20;
}

.hero-tagline {
    font-family: var(--font-pixel);
    font-size: clamp(0.52rem, 1.8vw, 0.75rem);
    color: var(--color-accent-text);
    opacity: 0.95;
    margin-bottom: 48px;
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.84),
        0 0 4px rgba(11, 97, 119, 0.32);
}

/* Language selector characters */
.language-selector {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(24px, 6vw, 60px);
    margin-top: clamp(90px, 16vh, 190px);
    flex-wrap: wrap;
    position: relative;
}

.lang-character {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: outline-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    background: none;
    border: none;
    padding: 8px;
    min-width: 112px;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.language-selector .character-svg {
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transform: translateX(var(--selector-char-offset, 0px));
}

.lang-character[data-lang="es"] .character-svg {
    --selector-char-offset: -10px;
}

.lang-character[data-lang="en"] .character-svg {
    --selector-char-offset: -10px;
}

.lang-character[data-lang="it"] .character-svg {
    --selector-char-offset: 0px;
}

/* Explicit breathing for Laura/Andrea selectors (keeps pole+flag attached) */
.language-selector .lang-character[data-lang="es"] .character-svg,
.language-selector .lang-character[data-lang="it"] .character-svg {
    animation: humanSelectorBreathe 1.7s steps(4) infinite;
}

.language-selector .lang-character[data-lang="it"] .character-svg {
    animation-delay: 0.2s;
}

.lang-character:hover,
.lang-character:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px rgba(78, 194, 207, 0.25);
}

.lang-character.active {
    outline: 3px solid var(--color-highlight);
    outline-offset: 4px;
    background: rgba(34, 23, 14, 0.35);
    box-shadow:
        0 0 0 3px rgba(242, 201, 106, 0.2),
        0 0 12px rgba(242, 201, 106, 0.35);
}

.lang-character.active:hover,
.lang-character.active:focus-visible {
    transform: none;
}

.lang-character.active::after {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    background: var(--color-highlight);
    margin-top: 4px;
    box-shadow: 0 0 8px var(--color-highlight);
}

.lang-character.active::before {
    content: 'PLAYER 1';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    line-height: 1;
    color: #1f160f;
    background: var(--color-highlight);
    border: 2px solid #7a5f28;
    padding: 3px 4px 2px;
    white-space: nowrap;
}

.lang-label {
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    color: var(--color-text);
    position: relative;
    z-index: 4;
    padding: 2px 6px;
    background: rgba(34, 23, 14, 0.65);
    border: 2px solid rgba(242, 201, 106, 0.6);
}

.hero-scenery {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-minigame-ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.hero-score-panel {
    position: relative;
    z-index: 3;
    top: auto;
    right: auto;
    left: auto;
    transform: translateY(-10px);
    transform-origin: top center;
    opacity: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1.2vw, 14px);
    width: fit-content;
    max-width: min(94vw, 640px);
    margin: 0 auto clamp(12px, 2.1vw, 20px);
    padding: 8px 12px 7px;
    border: 3px solid #3b2918;
    background: linear-gradient(180deg, rgba(255, 245, 204, 0.98) 0%, rgba(239, 205, 123, 0.96) 100%);
    box-shadow:
        0 4px 0 rgba(58, 37, 17, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition: opacity 180ms steps(2, end), transform 180ms steps(2, end);
    white-space: normal;
}

.hero-score-panel.is-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.hero-score-panel.is-score-flash {
    animation: heroScoreFlash 180ms steps(2, end);
}

.hero-score-label {
    font-family: var(--font-pixel);
    font-size: clamp(0.45rem, 1.2vw, 0.62rem);
    color: #2c1a0f;
    padding: 3px 5px 2px;
    border: 2px solid rgba(80, 53, 21, 0.55);
    background: rgba(255, 248, 231, 0.65);
}

.hero-score-value {
    font-family: var(--font-pixel);
    font-size: clamp(0.58rem, 1.55vw, 0.86rem);
    color: #4a180d;
    text-shadow:
        1px 1px 0 rgba(255, 247, 224, 0.45),
        0 0 6px rgba(217, 96, 35, 0.18);
    letter-spacing: 0.03em;
    min-width: 6.6ch;
    text-align: right;
}

.hero-score-high {
    font-family: var(--font-pixel);
    font-size: clamp(0.4rem, 1.02vw, 0.54rem);
    color: #3d2416;
    border-left: 2px solid rgba(82, 57, 29, 0.35);
    padding-left: 8px;
    opacity: 0.96;
}

.hero-score-high strong {
    color: #5a1f10;
    font-weight: 400;
}

.hero-score-hits {
    font-family: var(--font-pixel);
    font-size: clamp(0.42rem, 1.05vw, 0.56rem);
    color: #382417;
    opacity: 0.95;
    border-left: 2px solid rgba(82, 57, 29, 0.35);
    padding-left: 8px;
}

.hero-score-hits strong {
    color: #5a1f10;
    font-weight: 400;
}

.hero-game-over-panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    background: linear-gradient(180deg, rgba(8, 13, 23, 0.28), rgba(6, 9, 16, 0.62));
    transition: opacity 220ms steps(2, end), visibility 0s linear 220ms;
    pointer-events: none;
}

.hero-game-over-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms steps(2, end);
    pointer-events: auto;
}

.hero-game-over-box {
    width: min(92vw, 760px);
    padding: clamp(18px, 3vw, 30px);
    border: 4px solid rgba(180, 231, 255, 0.85);
    background: linear-gradient(180deg, rgba(8, 24, 41, 0.95) 0%, rgba(13, 37, 63, 0.96) 100%);
    box-shadow:
        0 0 0 4px rgba(15, 68, 94, 0.52),
        0 8px 0 rgba(3, 14, 27, 0.45),
        0 0 24px rgba(107, 218, 255, 0.16);
    text-align: center;
    animation: heroGameOverPop 280ms steps(3, end);
}

.hero-game-over-title {
    font-family: var(--font-pixel);
    font-size: clamp(1rem, 4.6vw, 2.4rem);
    line-height: 1.25;
    color: #ffefb8;
    text-shadow:
        2px 2px 0 #3f1808,
        0 0 10px rgba(255, 146, 79, 0.25);
    margin-bottom: 12px;
}

.hero-game-over-subtitle {
    font-family: var(--font-pixel);
    font-size: clamp(0.4rem, 1.25vw, 0.62rem);
    line-height: 1.8;
    color: #cbefff;
    opacity: 0.95;
    margin-bottom: 16px;
}

.hero-game-over-score {
    font-family: var(--font-pixel);
    font-size: clamp(0.48rem, 1.45vw, 0.72rem);
    color: #9de7ff;
    border-top: 2px solid rgba(146, 220, 255, 0.28);
    padding-top: 12px;
    margin-bottom: 14px;
}

.hero-game-over-score span {
    color: #fff1b7;
}

.hero-game-over-best {
    margin: 0 auto 14px;
    width: min(100%, 520px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-pixel);
    font-size: clamp(0.34rem, 1vw, 0.5rem);
    color: #98e5ff;
    padding: 9px 10px 8px;
    border: 2px solid rgba(133, 207, 239, 0.35);
    background: rgba(5, 15, 27, 0.35);
}

.hero-game-over-best-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #d8f8ff;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.hero-game-over-best-score {
    flex: 0 0 auto;
    color: #fff1b7;
    font-weight: 400;
}

.hero-game-over-best.is-pending {
    border-color: rgba(255, 223, 133, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 226, 138, 0.14) inset;
}

.hero-game-over-best.is-pending .hero-game-over-best-name {
    color: #ffe7a7;
}

.hero-game-over-submit {
    margin: 0 auto 12px;
    width: min(100%, 520px);
    text-align: left;
}

.hero-game-over-name-label {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--font-pixel);
    font-size: clamp(0.38rem, 1.05vw, 0.52rem);
    color: #b8efff;
    letter-spacing: 0.04em;
}

.hero-game-over-submit-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.hero-game-over-name-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-pixel);
    font-size: clamp(0.42rem, 1.2vw, 0.58rem);
    color: #effaff;
    background: rgba(8, 17, 28, 0.92);
    border: 3px solid rgba(154, 224, 255, 0.5);
    padding: 8px 10px 7px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-game-over-name-input::placeholder {
    color: rgba(186, 229, 246, 0.68);
}

.hero-game-over-name-input:focus-visible {
    outline: 3px solid rgba(255, 239, 184, 0.9);
    outline-offset: 2px;
    border-color: rgba(214, 238, 255, 0.9);
}

.hero-game-submit {
    flex: 0 0 auto;
    font-family: var(--font-pixel);
    font-size: clamp(0.38rem, 1.05vw, 0.52rem);
    color: #1f170f;
    background: linear-gradient(180deg, #aef5ff 0%, #6fd4ea 100%);
    border: 3px solid #225a69;
    padding: 8px 11px 7px;
    box-shadow:
        0 3px 0 rgba(12, 43, 52, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    cursor: pointer;
    pointer-events: auto;
}

.hero-game-submit:hover,
.hero-game-submit:focus-visible {
    outline: 3px solid rgba(255, 239, 184, 0.9);
    outline-offset: 3px;
    filter: brightness(1.05);
}

.hero-game-submit:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 rgba(12, 43, 52, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.hero-game-submit:disabled,
.hero-game-over-name-input:disabled {
    opacity: 0.72;
    cursor: default;
    filter: saturate(0.75);
}

.hero-game-submit-status {
    min-height: 1.2em;
    margin-top: 8px;
    font-family: var(--font-pixel);
    font-size: clamp(0.34rem, 0.95vw, 0.48rem);
    color: #b8efff;
    text-align: center;
    letter-spacing: 0.03em;
}

.hero-game-submit-status.is-error {
    color: #ffd1c4;
}

.hero-game-submit-status.is-success {
    color: #c8ffd3;
}

.hero-game-restart {
    margin-top: 16px;
    font-family: var(--font-pixel);
    font-size: clamp(0.42rem, 1.15vw, 0.62rem);
    color: #1f170f;
    background: linear-gradient(180deg, #ffe7a8 0%, #f0c45b 100%);
    border: 3px solid #6f4c1f;
    padding: 8px 12px 7px;
    box-shadow:
        0 3px 0 rgba(71, 46, 19, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    cursor: pointer;
    pointer-events: auto;
}

.hero-game-restart:hover,
.hero-game-restart:focus-visible {
    outline: 3px solid rgba(157, 235, 255, 0.8);
    outline-offset: 3px;
    filter: brightness(1.06);
}

.hero-game-restart:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 rgba(71, 46, 19, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
    .hero-score-panel {
        width: auto;
        max-width: 92vw;
        display: none;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 5px 8px 4px;
        white-space: nowrap;
    }

    .hero-score-panel.is-visible {
        display: flex;
    }

    .hero-score-label {
        font-size: 0.38rem;
    }

    .hero-score-value {
        min-width: 0;
        text-align: right;
        font-size: 0.5rem;
    }

    .hero-score-panel > * + * {
        border-left: 2px solid rgba(82, 57, 29, 0.35);
        margin-left: 6px;
        padding-left: 6px;
    }

    .hero-score-value {
        border-left: none;
        margin-left: 4px;
        padding-left: 0;
    }

    .hero-score-high {
        padding-left: 6px;
        font-size: 0.36rem;
        text-align: left;
    }

    .hero-score-hits {
        padding-left: 6px;
        text-align: right;
        font-size: 0.36rem;
    }

    .hero-game-over-best {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 8px 7px;
        text-align: left;
    }

    .hero-game-over-best-name {
        flex-basis: auto;
        min-width: 0;
        text-align: left;
    }

    .hero-game-over-submit-row {
        flex-direction: column;
    }

    .hero-game-submit,
    .hero-game-over-name-input {
        width: 100%;
    }
}

.palm {
    position: absolute;
    display: block;
}

.palm {
    width: 10px;
    height: 124px;
    bottom: 60px;
    background:
        repeating-linear-gradient(
            180deg,
            #8e5d2d 0 10px,
            #6f411d 10px 20px
        );
    box-shadow:
        0 0 0 1px #3a220f,
        1px 0 0 #5f3418 inset;
    transform-origin: bottom center;
    animation: palmSway 1.8s steps(2) infinite alternate;
}

.palm::before,
.palm::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    top: -8px;
    background: #2f7a45;
    box-shadow:
        0 0 0 2px #1f4f2e inset,
        -10px -1px 0 #3f955a,
        -20px 2px 0 #2f7a45,
        -30px 7px 0 #3f955a,
        -40px 14px 0 #2f7a45,
        -50px 24px 0 #3f955a,
        10px -1px 0 #3f955a,
        20px 2px 0 #2f7a45,
        30px 7px 0 #3f955a,
        40px 14px 0 #2f7a45,
        50px 24px 0 #3f955a,
        -24px 20px 0 #2f7a45,
        24px 20px 0 #2f7a45;
}

.palm::before {
    left: 0;
}

.palm::after {
    left: 0;
    top: 3px;
    transform: scale(0.86);
    opacity: 0.95;
}

.palm-left {
    left: 4%;
}

.palm-right {
    right: 5%;
    animation-delay: 0.35s;
}

/* Pixel agave plants (decorative) */
.agave {
    position: absolute;
    display: block;
    --agave-hue: 0deg;
    width: 4px;
    height: 4px;
    background: #7fb081;
    box-shadow:
        0 -4px 0 #98c78e,
        0 -8px 0 #b3d7a6,
        0 -12px 0 #d5e9c6,
        0 -16px 0 #e9f5dc,
        -4px -8px 0 #89be87,
        4px -8px 0 #89be87,
        -8px -4px 0 #5b865f,
        -4px -4px 0 #90c28b,
        4px -4px 0 #90c28b,
        8px -4px 0 #5b865f,
        -12px 0 0 #385f44,
        -8px 0 0 #648d67,
        -4px 0 0 #8fbc86,
        4px 0 0 #8fbc86,
        8px 0 0 #648d67,
        12px 0 0 #385f44,
        -16px 4px 0 #2a4936,
        -12px 4px 0 #456c50,
        -8px 4px 0 #5f8761,
        -4px 4px 0 #779f76,
        0 4px 0 #486d4f,
        4px 4px 0 #779f76,
        8px 4px 0 #5f8761,
        12px 4px 0 #456c50,
        16px 4px 0 #2a4936,
        -20px 8px 0 #223a2d,
        -16px 8px 0 #2f4d39,
        -12px 8px 0 #3d5f47,
        -8px 8px 0 #4a6d52,
        -4px 8px 0 #4a6246,
        0 8px 0 #7a532d,
        4px 8px 0 #4a6246,
        8px 8px 0 #4a6d52,
        12px 8px 0 #3d5f47,
        16px 8px 0 #2f4d39,
        20px 8px 0 #223a2d,
        -12px 12px 0 #2a4633,
        -8px 12px 0 #375741,
        8px 12px 0 #375741,
        12px 12px 0 #2a4633,
        0 12px 0 #603914;
    transform-origin: bottom center;
    filter:
        hue-rotate(var(--agave-hue))
        saturate(0.98)
        contrast(1.06)
        drop-shadow(0 1px 0 rgba(20, 11, 6, 0.32))
        drop-shadow(0 2px 0 rgba(20, 11, 6, 0.16));
}

.agave::before,
.agave::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    background: #7eb07b;
    box-shadow:
        0 -4px 0 #96c78d,
        0 -8px 0 #78ab79,
        0 -12px 0 #557f5d,
        0 -16px 0 #355640,
        4px -8px 0 #9ed09a,
        4px -4px 0 #86b684,
        4px 0 0 #68926b,
        4px 4px 0 #4d7154,
        8px 4px 0 #31503d,
        8px 8px 0 #264133,
        8px 12px 0 #20352a,
        0 4px 0 #638863,
        0 8px 0 #49684e,
        0 12px 0 #375342,
        0 16px 0 #264135;
    transform-origin: bottom center;
}

.agave::before {
    left: -6px;
    transform: rotate(-47deg) translateY(-1px);
}

.agave::after {
    right: -6px;
    transform: rotate(47deg) translateY(-1px);
}

.hero-agave {
    display: none;
}

.hero-agave-left {
    left: 14%;
    bottom: 58px;
    opacity: 0.78;
    transform: scale(1.28);
}

.hero-agave-right {
    right: 16%;
    bottom: 54px;
    opacity: 0.76;
    transform: scale(1.18);
}

.gull {
    position: absolute;
    width: 30px;
    height: 11px;
    opacity: 0.9;
    --gull-flee-x: 0px;
    --gull-flee-y: 0px;
    animation: gullGlide 14s ease-in-out infinite alternate;
    will-change: transform;
}

.gull::before,
.gull::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    border-top: 2px solid rgba(250, 250, 243, 0.9);
    border-radius: 10px 10px 0 0;
}

.gull::before {
    left: 0;
    transform: rotate(-8deg);
    transform-origin: right bottom;
    animation: gullWingLeft 0.9s steps(2) infinite alternate;
}

.gull::after {
    right: 0;
    transform: rotate(8deg);
    transform-origin: left bottom;
    animation: gullWingRight 0.9s steps(2) infinite alternate;
}

.gull-1 {
    top: 12%;
    left: 10%;
    --gull-drift: 120px;
    animation-duration: 16s;
}

.gull-2 {
    top: 19%;
    left: 48%;
    --gull-drift: 90px;
    animation-duration: 13s;
    animation-delay: -5s;
}

.gull-3 {
    top: 9%;
    left: 74%;
    --gull-drift: 70px;
    animation-duration: 12s;
    animation-delay: -2s;
}

.gull-4 {
    top: 15%;
    left: 30%;
    --gull-drift: 105px;
    animation-duration: 15s;
    animation-delay: -7s;
}

.gull-5 {
    top: 24%;
    left: 62%;
    --gull-drift: 80px;
    animation-duration: 11s;
    animation-delay: -3s;
}

.gull-6 {
    top: 8%;
    left: 58%;
    --gull-drift: 115px;
    animation-duration: 18s;
    animation-delay: -9s;
}

.gull-7 {
    top: 17%;
    left: 22%;
    --gull-drift: 88px;
    animation-duration: 12.5s;
    animation-delay: -4.5s;
}

.gull-8 {
    top: 27%;
    left: 80%;
    --gull-drift: 65px;
    animation-duration: 10.5s;
    animation-delay: -6s;
}

.hero-ovi-paddle {
    position: absolute;
    top: 54%;
    left: 0;
    width: 124px;
    height: 52px;
    opacity: 0;
    --paddle-from: -160px;
    --paddle-to: calc(100vw + 160px);
    --paddle-y: 0px;
    --paddle-ovi-facing: 1;
    --chaser-facing: 1;
    --chaser-x: -32px;
    --chaser-toward-sign: 1;
    --chaser-chase-amount: 10px;
    --paddle-duration: 13s;
    pointer-events: none;
    filter:
        drop-shadow(0 2px 0 rgba(17, 66, 84, 0.36))
        drop-shadow(0 0 4px rgba(227, 246, 255, 0.22));
    will-change: transform, opacity;
}

.hero-ovi-paddle.is-active {
    opacity: 1;
    animation: oviPaddleCross var(--paddle-duration, 13s) linear forwards;
}

.hero-ovi-paddle .paddle-rider {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-ovi-paddle.is-active .paddle-rider {
    animation: oviPaddleBob 0.92s steps(2) infinite alternate;
}

.hero-ovi-board-svg {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.hero-ovi-board-svg .paddle-ovi {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(var(--paddle-ovi-facing, 1));
}

.hero-ovi-paddle .paddle-chaser {
    position: absolute;
    top: 17px;
    left: var(--chaser-x, -32px);
    width: 52px;
    height: 30px;
    z-index: 0;
    opacity: 0.9;
    transform: translateX(0) translateY(2px);
    filter: drop-shadow(0 1px 0 rgba(16, 56, 71, 0.32));
}

.hero-andrea-swim-svg {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.hero-ovi-paddle .paddle-chaser .swimmer {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(var(--chaser-facing, 1));
}

.hero-ovi-paddle.is-active .paddle-chaser .swim-arm-left {
    animation: andreaSwimArmLeft 0.34s steps(3) infinite alternate;
}

.hero-ovi-paddle.is-active .paddle-chaser .swim-arm-right {
    animation: andreaSwimArmRight 0.34s steps(3) infinite alternate;
}

.hero-ovi-paddle.is-active .paddle-chaser {
    animation: andreaSwimChase 0.64s steps(4) infinite;
}

.hero-andrea-wingfoil,
.hero-laura-wingfoil {
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.hero-andrea-wingfoil {
    top: 53%;
    width: 152px;
    height: 72px;
    --aw-from: -180px;
    --aw-to: calc(100vw + 180px);
    --aw-y: 0px;
    --aw-facing: 1;
    --aw-duration: 12000ms;
}

.hero-laura-wingfoil {
    top: 54%;
    width: 124px;
    height: 62px;
    --lw-start-x: 0px;
    --lw-start-y: 0px;
    --lw-end-x: 0px;
    --lw-end-y: -130px;
    --lw-facing: 1;
    --lw-duration: 9600ms;
}

.hero-andrea-wingfoil.is-active {
    opacity: 1;
    animation: andreaWingfoilRun var(--aw-duration, 12000ms) linear forwards;
}

.hero-laura-wingfoil.is-active {
    animation: lauraWingfoilHorizon var(--lw-duration, 9600ms) ease-in forwards;
}

.hero-ovi-paddle::before,
.hero-ovi-paddle::after,
.hero-andrea-wingfoil::before,
.hero-andrea-wingfoil::after,
.hero-laura-wingfoil::before,
.hero-laura-wingfoil::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 22px;
    height: 8px;
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    background:
        linear-gradient(90deg, transparent 0%, rgba(230, 249, 255, 0.95) 25%, rgba(230, 249, 255, 0.95) 75%, transparent 100%);
    box-shadow:
        -10px -4px 0 rgba(193, 236, 246, 0.85),
        10px -4px 0 rgba(193, 236, 246, 0.85);
    pointer-events: none;
}

.hero-ovi-paddle::before,
.hero-andrea-wingfoil::before,
.hero-laura-wingfoil::before {
    width: 14px;
    height: 5px;
    bottom: 0;
    box-shadow:
        -6px -2px 0 rgba(193, 236, 246, 0.8),
        6px -2px 0 rgba(193, 236, 246, 0.8);
}

.hero-ovi-paddle.is-splashed,
.hero-andrea-wingfoil.is-splashed,
.hero-laura-wingfoil.is-splashed {
    opacity: 1;
    pointer-events: none;
}

.hero-ovi-paddle.is-splashed::before,
.hero-andrea-wingfoil.is-splashed::before,
.hero-laura-wingfoil.is-splashed::before {
    animation: splashBurst 0.56s steps(3) forwards;
}

.hero-ovi-paddle.is-splashed::after,
.hero-andrea-wingfoil.is-splashed::after,
.hero-laura-wingfoil.is-splashed::after {
    animation: splashBurstLarge 0.74s steps(4) 0.06s forwards;
}

.hero-ovi-paddle.is-splashed .paddle-ovi {
    animation: seaCrashDropOvi 0.78s ease-in forwards;
}

.hero-andrea-wingfoil.is-splashed .wingfoil-character,
.hero-laura-wingfoil.is-splashed .wingfoil-character {
    animation: seaCrashDrop 0.8s ease-in forwards;
}

.hero-ovi-paddle.is-splashed .paddle-chaser {
    animation: seaCrashDrop 0.74s ease-in forwards;
}

.hero-andrea-wingfoil .wingfoil-rider,
.hero-laura-wingfoil .wingfoil-rider {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-wingfoil-svg .wingfoil-character {
    transform-box: fill-box;
    transform-origin: center;
}

.hero-andrea-wingfoil .wingfoil-rider {
    transform: scaleX(var(--aw-facing, 1));
}

.hero-laura-wingfoil .wingfoil-rider {
    transform: scaleX(var(--lw-facing, 1));
}

.hero-andrea-wingfoil.is-active .hero-wingfoil-svg {
    animation: wingfoilRideBob 0.38s steps(2) infinite alternate;
}

.hero-laura-wingfoil.is-active .hero-wingfoil-svg {
    animation: wingfoilRideBob 0.48s steps(2) infinite alternate;
}

.hero-wingfoil-svg {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 2px 0 rgba(15, 61, 78, 0.34))
        drop-shadow(0 0 3px rgba(232, 248, 255, 0.2));
}

.hero-wingfoil-svg .wingfoil-wing {
    transform-box: fill-box;
    transform-origin: left center;
}

.hero-andrea-wingfoil.is-active .hero-wingfoil-svg .wingfoil-wing {
    animation: wingFlap 0.42s steps(2) infinite alternate;
}

.hero-laura-wingfoil.is-active .hero-wingfoil-svg .wingfoil-wing {
    animation: wingFlap 0.56s steps(2) infinite alternate;
}

.hero-andrea-wingfoil.is-splashed .hero-wingfoil-svg .wingfoil-wing,
.hero-laura-wingfoil.is-splashed .hero-wingfoil-svg .wingfoil-wing {
    transform-origin: center;
    animation: wingFlyAway 0.86s ease-out forwards;
}

.wave-field {
    position: absolute;
    inset: 47% 2% 26% 2%;
    overflow: hidden;
}

.wave-splash {
    position: absolute;
    width: var(--wave-width, 30px);
    height: 2px;
    opacity: 0;
    background: linear-gradient(
        90deg,
        rgba(239, 251, 255, 0) 0%,
        rgba(239, 251, 255, 0.88) 24%,
        rgba(229, 246, 255, 0.72) 72%,
        rgba(239, 251, 255, 0) 100%
    );
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(210, 241, 255, 0.45);
    animation: waveDrift var(--wave-drift-duration, 8s) ease-in-out infinite alternate;
    animation-delay: var(--wave-drift-delay, 0s);
    transition: opacity 180ms steps(2, end);
}

.wave-splash::before,
.wave-splash::after {
    content: '';
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(239, 251, 255, 0) 0%,
        rgba(239, 251, 255, 0.7) 30%,
        rgba(239, 251, 255, 0) 100%
    );
}

.wave-splash::before {
    top: -3px;
    left: 14%;
    width: calc(var(--wave-width, 30px) * 0.56);
    opacity: 0.78;
}

.wave-splash::after {
    top: 4px;
    left: 6%;
    width: calc(var(--wave-width, 30px) * 0.4);
    opacity: 0.56;
}

.wave-splash.is-visible {
    opacity: var(--wave-opacity, 0.5);
}

@keyframes palmSway {
    from { transform: skewX(0deg) translateY(0); }
    to   { transform: skewX(1.6deg) translateY(-1px); }
}

@keyframes gullGlide {
    0% {
        transform: translateX(var(--gull-flee-x, 0px)) translateY(var(--gull-flee-y, 0px));
    }
    50% {
        transform:
            translateX(calc((var(--gull-drift, 100px) * 0.55) + var(--gull-flee-x, 0px)))
            translateY(calc(-9px + var(--gull-flee-y, 0px)));
    }
    100% {
        transform:
            translateX(calc(var(--gull-drift, 100px) + var(--gull-flee-x, 0px)))
            translateY(calc(-2px + var(--gull-flee-y, 0px)));
    }
}

@keyframes gullWingLeft {
    from { transform: rotate(-13deg); }
    to   { transform: rotate(-2deg); }
}

@keyframes gullWingRight {
    from { transform: rotate(13deg); }
    to   { transform: rotate(2deg); }
}

@keyframes waveDrift {
    0% {
        transform:
            translateX(calc(var(--wave-drift, 12px) * -0.4))
            translateY(0);
    }
    50% {
        transform:
            translateX(calc(var(--wave-drift, 12px) * 0.45))
            translateY(var(--wave-rise, -2px));
    }
    100% {
        transform:
            translateX(var(--wave-drift, 12px))
            translateY(calc(var(--wave-rise, -2px) * -0.4));
    }
}

@keyframes oviPaddleCross {
    0% {
        transform:
            translateX(var(--paddle-from, -160px))
            translateY(var(--paddle-y, 0px));
    }
    100% {
        transform:
            translateX(var(--paddle-to, calc(100vw + 160px)))
            translateY(var(--paddle-y, 0px));
    }
}

@keyframes oviPaddleBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-2px); }
}

@keyframes andreaWingfoilRun {
    0% {
        transform:
            translateX(var(--aw-from, -180px))
            translateY(var(--aw-y, 0px));
    }
    50% {
        transform:
            translateX(calc((var(--aw-from, -180px) + var(--aw-to, calc(100vw + 180px))) * 0.5))
            translateY(calc(var(--aw-y, 0px) - 10px));
    }
    100% {
        transform:
            translateX(var(--aw-to, calc(100vw + 180px)))
            translateY(var(--aw-y, 0px));
    }
}

@keyframes lauraWingfoilHorizon {
    0% {
        opacity: 0;
        transform:
            translateX(var(--lw-start-x, 0px))
            translateY(var(--lw-start-y, 0px))
            scale(1);
    }
    12% {
        opacity: 0.95;
    }
    58% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform:
            translateX(var(--lw-end-x, 0px))
            translateY(var(--lw-end-y, -130px))
            scale(0.34);
    }
}

@keyframes wingfoilRideBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-2px); }
}

@keyframes wingFlap {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(9deg); }
}

@keyframes wingFlyAway {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    55% {
        transform: translateX(18px) translateY(-16px) rotate(14deg) scale(0.95);
        opacity: 1;
    }
    100% {
        transform: translateX(34px) translateY(-34px) rotate(24deg) scale(0.88);
        opacity: 0;
    }
}

@keyframes seaCrashDrop {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(22px) rotate(8deg) scale(0.76);
        opacity: 0;
    }
}

@keyframes seaCrashDropOvi {
    0% {
        transform: scaleX(var(--paddle-ovi-facing, 1)) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scaleX(var(--paddle-ovi-facing, 1)) translateY(20px) rotate(7deg) scale(0.78);
        opacity: 0;
    }
}

@keyframes splashBurst {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.4);
    }
    35% {
        opacity: 0.95;
        transform: translateX(-50%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.8);
    }
}

@keyframes splashBurstLarge {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.55);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) scale(1.45);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(2.7);
    }
}

@keyframes andreaSwimArmLeft {
    from { transform: rotate(-24deg); }
    to   { transform: rotate(14deg); }
}

@keyframes andreaSwimArmRight {
    from { transform: rotate(24deg); }
    to   { transform: rotate(-14deg); }
}

@keyframes andreaSwimChase {
    0% {
        transform: translateX(0) translateY(3px);
    }
    20% {
        transform:
            translateX(calc(var(--chaser-chase-amount, 10px) * var(--chaser-toward-sign, 1) * 0.35))
            translateY(1px);
    }
    42% {
        transform:
            translateX(calc(var(--chaser-chase-amount, 10px) * var(--chaser-toward-sign, 1)))
            translateY(-1px);
    }
    58% {
        transform:
            translateX(calc(var(--chaser-chase-amount, 10px) * var(--chaser-toward-sign, 1) * 0.52))
            translateY(2px);
    }
    76% {
        transform:
            translateX(calc(var(--chaser-chase-amount, 10px) * var(--chaser-toward-sign, 1) * 0.88))
            translateY(0);
    }
    100% {
        transform: translateX(0) translateY(3px);
    }
}

@keyframes andreaFrenchBaguette {
    0% {
        transform: translateX(var(--andrea-french-shift, 0px)) translateY(0) scaleX(-1) rotate(-2deg);
    }
    25% {
        transform: translateX(var(--andrea-french-shift, 0px)) translateY(-2px) scaleX(-1) rotate(1.2deg);
    }
    50% {
        transform: translateX(var(--andrea-french-shift, 0px)) translateY(0) scaleX(-1) rotate(-1deg);
    }
    75% {
        transform: translateX(var(--andrea-french-shift, 0px)) translateY(-1px) scaleX(-1) rotate(1.8deg);
    }
    100% {
        transform: translateX(var(--andrea-french-shift, 0px)) translateY(0) scaleX(-1) rotate(-2deg);
    }
}

/* Scroll indicator — pixel arrow */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-accent-text);
    animation: fadeIn 1s ease 1.5s both;
}

.pixel-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: pixelBlink 1s steps(2) infinite;
}

.pixel-arrow .arrow-row {
    display: flex;
    gap: 0;
}

.pixel-arrow .px {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    box-shadow: 0 0 4px var(--color-accent);
}

@keyframes pixelBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

.scroll-indicator span {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.84),
        0 0 4px rgba(11, 97, 119, 0.38);
}

/* ============================================
   OUR STORY SECTION — Scroll-Driven Walking
   ============================================ */
.story {
    position: relative;
    padding: 0;
    background: linear-gradient(180deg, #ba8a52 0%, #99673a 100%);
}

.story::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(340px 90px at 5% 18%, rgba(241, 207, 148, 0.65) 55%, transparent 56%),
        radial-gradient(360px 110px at 70% 34%, rgba(213, 167, 101, 0.58) 55%, transparent 56%),
        radial-gradient(380px 120px at 35% 57%, rgba(159, 111, 62, 0.48) 55%, transparent 56%),
        radial-gradient(420px 130px at 72% 82%, rgba(126, 88, 48, 0.45) 55%, transparent 56%);
    opacity: 0.9;
}

.story::after {
    display: none;
}

.story .section-header {
    position: sticky;
    top: 0;
    z-index: 6;
    margin-bottom: 24px;
    padding: 28px 24px 20px;
    background: linear-gradient(
        180deg,
        rgba(186, 138, 82, 0.98) 0%,
        rgba(186, 138, 82, 0.9) 72%,
        rgba(186, 138, 82, 0) 100%
    );
}

.story .section-title {
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.venue .section-header,
.transport .section-header,
.rsvp .section-header {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 24px;
    padding: 28px 24px 20px;
}

.venue .section-header {
    background: linear-gradient(
        180deg,
        rgba(74, 50, 31, 0.98) 0%,
        rgba(74, 50, 31, 0.9) 72%,
        rgba(74, 50, 31, 0) 100%
    );
}

.transport .section-header {
    background: linear-gradient(
        180deg,
        rgba(58, 42, 27, 0.98) 0%,
        rgba(58, 42, 27, 0.9) 72%,
        rgba(58, 42, 27, 0) 100%
    );
}

.rsvp .section-header {
    background: linear-gradient(
        180deg,
        rgba(45, 31, 19, 0.98) 0%,
        rgba(45, 31, 19, 0.9) 72%,
        rgba(45, 31, 19, 0) 100%
    );
}

.scroll-zone {
    height: 250vh;
    position: relative;
}

.scroll-zone-meeting {
    height: 300vh;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(58vw 24vh at 14% 10%, rgba(206, 220, 236, 0.2) 0 52%, rgba(206, 220, 236, 0) 66%),
        radial-gradient(64vw 22vh at 84% 12%, rgba(167, 186, 206, 0.24) 0 50%, rgba(167, 186, 206, 0) 65%),
        linear-gradient(180deg, #4a5f78 0%, #3d5268 21%, #33475d 36%, #2a3f55 48%, #1f394d 62%, #162a3b 100%);
}

.scroll-zone-meeting::before,
.scroll-zone-meeting::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Primary rain layer */
.scroll-zone-meeting::before {
    z-index: 2;
    opacity: 0.055;
    background-image:
        repeating-linear-gradient(
            103deg,
            rgba(224, 234, 244, 0) 0 28px,
            rgba(224, 234, 244, 0.55) 28px 29px,
            rgba(224, 234, 244, 0) 29px 58px
        ),
        repeating-linear-gradient(
            102deg,
            rgba(195, 211, 227, 0) 0 46px,
            rgba(195, 211, 227, 0.44) 46px 47px,
            rgba(195, 211, 227, 0) 47px 94px
        );
    background-size: 260px 240px, 360px 320px;
    animation: meetingRainFall 2.8s linear infinite;
}

/* Fine mist/rain sheen */
.scroll-zone-meeting::after {
    z-index: 4;
    opacity: 0.01;
    background-image: repeating-linear-gradient(
        102deg,
        rgba(236, 244, 250, 0) 0 34px,
        rgba(236, 244, 250, 0.62) 34px 35px,
        rgba(236, 244, 250, 0) 35px 72px
    );
    background-size: 240px 260px;
    animation: meetingRainFallFine 4.8s linear infinite;
}

/* Story background palms behind walking characters */
.story-scenery {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.story-scenery .story-palm {
    bottom: auto;
    width: 11px;
    height: 86px;
    opacity: 0.38;
    animation-duration: 2.2s;
}

.story-scenery .story-palm-1 {
    left: 18%;
    top: 18%;
    transform: scale(0.84);
}

.story-scenery .story-palm-2 {
    left: 26%;
    top: 72%;
    transform: scale(0.72);
    animation-delay: 0.12s;
}

.story-scenery .story-palm-3 {
    left: 34%;
    top: 8%;
    transform: scale(0.86);
    animation-delay: 0.24s;
}

.story-scenery .story-palm-4 {
    left: 42%;
    top: 58%;
    transform: scale(0.68);
    animation-delay: 0.36s;
}

.story-scenery .story-palm-5 {
    left: 50%;
    top: 30%;
    transform: scale(0.82);
    animation-delay: 0.48s;
}

.story-scenery .story-palm-6 {
    left: 58%;
    top: 84%;
    transform: scale(0.74);
    animation-delay: 0.6s;
}

.story-scenery .story-palm-7 {
    left: 66%;
    top: 44%;
    transform: scale(0.8);
    animation-delay: 0.72s;
}

.story-scenery .story-palm-8 {
    left: 74%;
    top: 92%;
    transform: scale(0.7);
    animation-delay: 0.84s;
}

.story-scenery .story-agave {
    width: 4px;
    height: 4px;
    opacity: 0.46;
    filter:
        hue-rotate(var(--agave-hue))
        saturate(0.9)
        brightness(0.92)
        contrast(1.08)
        drop-shadow(0 1px 0 rgba(24, 14, 7, 0.18));
}

.story-scenery .story-agave-1 {
    --agave-hue: -8deg;
    left: 8%;
    top: 86%;
    transform: scale(1.16) rotate(-4deg);
}

.story-scenery .story-agave-2 {
    --agave-hue: 9deg;
    left: 22%;
    top: 58%;
    transform: scale(0.88) rotate(8deg);
}

.story-scenery .story-agave-3 {
    --agave-hue: -4deg;
    left: 78%;
    top: 70%;
    transform: scale(1.06) rotate(-7deg);
}

.story-scenery .story-agave-4 {
    --agave-hue: 12deg;
    left: 90%;
    top: 90%;
    transform: scale(0.82) rotate(5deg);
}

.story-scenery .story-agave-5 {
    --agave-hue: 4deg;
    left: 16%;
    top: 92%;
    transform: scale(0.76) rotate(-9deg);
    opacity: 0.31;
}

.story-scenery .story-agave-6 {
    --agave-hue: -10deg;
    left: 34%;
    top: 84%;
    transform: scale(0.96) rotate(10deg);
    opacity: 0.35;
}

.story-scenery .story-agave-7 {
    --agave-hue: 7deg;
    left: 62%;
    top: 66%;
    transform: scale(0.78) rotate(-6deg);
    opacity: 0.29;
}

.story-scenery .story-agave-8 {
    --agave-hue: -6deg;
    left: 84%;
    top: 82%;
    transform: scale(1) rotate(7deg);
    opacity: 0.36;
}

.story-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    z-index: 1;
}

.story-panel.panel-reverse {
    flex-direction: row-reverse;
}

.story-panel .character-container {
    flex: 0 0 180px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

.story-panel .character-container::after {
    content: '';
    position: absolute;
    bottom: 8px;
    width: 80px;
    height: 10px;
    background: rgba(63, 36, 18, 0.38);
    filter: blur(1px);
    transform: scaleX(var(--shadow-scale, 1));
    opacity: var(--shadow-opacity, 1);
    transform-origin: center;
}

.story-panel .bubble-container {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Laura scroll-zone scenery: full-width mountain horizon that scrolls with the background */
.story-scenery-laura {
    overflow: hidden;
}

.story-scenery-laura .story-palm,
.story-scenery-laura .story-agave {
    display: block;
    z-index: 1;
}

.story-scenery-laura .story-prop {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 2;
    image-rendering: pixelated;
    transform-origin: bottom center;
}

/* Keep the opening of Laura's scroll-zone sparse: a few palms/agaves first */
.story-scenery-laura .story-palm {
    opacity: 0.4;
}

.story-scenery-laura .story-palm-4 {
    left: 10%;
    top: 36%;
    transform: scale(0.78);
}

.story-scenery-laura .story-palm-5 {
    left: 22%;
    top: 43%;
    transform: scale(0.88);
    animation-delay: 0.18s;
}

.story-scenery-laura .story-palm-6 {
    left: 34%;
    top: 50%;
    transform: scale(0.72);
    opacity: 0.32;
    animation-delay: 0.34s;
}

.story-scenery-laura .story-agave-1 {
    left: 14%;
    top: 46%;
    transform: scale(0.92) rotate(-7deg);
    opacity: 0.36;
}

.story-scenery-laura .story-agave-2 {
    left: 28%;
    top: 50%;
    transform: scale(0.76) rotate(8deg);
    opacity: 0.32;
}

.story-scenery-laura .story-agave-3 {
    left: 38%;
    top: 55%;
    transform: scale(0.84) rotate(-5deg);
    opacity: 0.3;
}

/* Laura-only vegetation pass: denser, more natural scatter below the mountain horizon */
.story-scenery-laura .laura-palm {
    width: 84px;
    height: 194px;
    bottom: auto;
    background: url('assets/laura-palm.svg') center bottom / contain no-repeat;
    box-shadow: none;
    animation: none;
    image-rendering: auto;
    opacity: 0.5;
    filter:
        saturate(0.96)
        contrast(1.12)
        brightness(0.96)
        drop-shadow(0 2px 0 rgba(61, 38, 22, 0.24))
        drop-shadow(0 10px 13px rgba(61, 38, 22, 0.14));
    transform-origin: bottom center;
}

.story-scenery-laura .laura-palm::before,
.story-scenery-laura .laura-palm::after {
    content: none;
}

.story-scenery-laura .laura-agave {
    width: 64px;
    height: 42px;
    background: url('assets/laura-agave.svg') center bottom / contain no-repeat;
    box-shadow: none;
    image-rendering: auto;
    opacity: 0.46;
    filter:
        hue-rotate(var(--agave-hue))
        saturate(1)
        brightness(0.93)
        contrast(1.04)
        drop-shadow(0 1px 0 rgba(32, 20, 11, 0.24))
        drop-shadow(0 5px 6px rgba(32, 20, 11, 0.1));
}

.story-scenery-laura .laura-agave::before,
.story-scenery-laura .laura-agave::after {
    content: none;
}

.story-scenery-laura .laura-agave-pita {
    width: 78px;
    height: 50px;
    background: url('assets/laura-agave-pita.svg') center bottom / contain no-repeat;
    box-shadow: none;
    image-rendering: auto;
    opacity: 0.5;
    filter:
        hue-rotate(var(--agave-hue))
        saturate(1.02)
        brightness(0.92)
        contrast(1.04)
        drop-shadow(0 1px 0 rgba(36, 23, 13, 0.24))
        drop-shadow(0 5px 6px rgba(36, 23, 13, 0.1));
}

.story-scenery-laura .laura-agave-sprout {
    width: 96px;
    height: 246px;
    background: url('assets/laura-agave-sprout.svg') center bottom / contain no-repeat;
    box-shadow: none;
    image-rendering: auto;
    opacity: 0.54;
    filter:
        hue-rotate(var(--sprout-hue, 0deg))
        saturate(0.95)
        brightness(0.97)
        contrast(1.08)
        drop-shadow(0 2px 0 rgba(42, 27, 16, 0.24))
        drop-shadow(0 10px 12px rgba(42, 27, 16, 0.14));
}

.story-scenery-laura .laura-agave-sprout::before,
.story-scenery-laura .laura-agave-sprout::after {
    content: none;
}

.story-scenery-laura .laura-palm-1 { left: 5%; top: 12%; transform: scale(1.2) rotate(-5deg); opacity: 0.42; }
.story-scenery-laura .laura-palm-2 { right: 0%; top: 15%; transform: scale(0.9) rotate(4deg); opacity: 0.46; }
.story-scenery-laura .laura-palm-3 { left: 5%; top: 30%; transform: scale(1.3) rotate(-4deg); opacity: 0.44; }
.story-scenery-laura .laura-palm-4 { left: 82%; top: 47%; transform: scale(1.1) rotate(5deg); opacity: 0.48; }
.story-scenery-laura .laura-palm-5 { left: 4%; top: 65%; transform: scale(1.2) rotate(-3deg); opacity: 0.45; }
.story-scenery-laura .laura-palm-6 { left: 86%; top: 81%; transform: scale(1.3) rotate(4deg); opacity: 0.47; }

.story-scenery-laura .laura-agave-1 { --agave-hue: -7deg; left: 10%; top: 21%; transform: scale(0.92) rotate(-8deg); opacity: 0.43; }
.story-scenery-laura .laura-agave-2 { --agave-hue: 8deg; left: 8%; top: 22%; transform: scale(0.8) rotate(7deg); opacity: 0.42; }
.story-scenery-laura .laura-agave-3 { --agave-hue: -4deg; left: 31%; top: 50%; transform: scale(0.86) rotate(-7deg); opacity: 0.43; }
.story-scenery-laura .laura-agave-4 { --agave-hue: 12deg; left: 84%; top: 70%; transform: scale(0.78) rotate(6deg); opacity: 0.4; }
.story-scenery-laura .laura-agave-5 { --agave-hue: -11deg; left: 96%; top: 25%; transform: scale(0.82) rotate(-8deg); opacity: 0.41; }
.story-scenery-laura .laura-agave-6 { --agave-hue: 5deg; left: 87%; top: 76%; transform: scale(0.78) rotate(8deg); opacity: 0.39; }
.story-scenery-laura .laura-agave-7 { --agave-hue: -2deg; left: 24%; top: 90%; transform: scale(0.84) rotate(-6deg); opacity: 0.41; }
.story-scenery-laura .laura-agave-8 { --agave-hue: 10deg; left: 83%; top: 93%; transform: scale(0.74) rotate(8deg); opacity: 0.39; }

.story-scenery-laura .laura-agave-pita-1 { --agave-hue: -6deg; left: 4%; top: 26%; transform: scale(0.94) rotate(-7deg); opacity: 0.5; }
.story-scenery-laura .laura-agave-pita-2 { --agave-hue: 7deg; left: 88%; top: 31%; transform: scale(0.86) rotate(6deg); opacity: 0.48; }
.story-scenery-laura .laura-agave-pita-3 { --agave-hue: -4deg; left: 6%; top: 44%; transform: scale(0.92) rotate(-5deg); opacity: 0.49; }
.story-scenery-laura .laura-agave-pita-4 { --agave-hue: 10deg; left: 82%; top: 58%; transform: scale(0.82) rotate(7deg); opacity: 0.46; }
.story-scenery-laura .laura-agave-pita-5 { --agave-hue: -9deg; left: 5%; top: 60%; transform: scale(0.9) rotate(-6deg); opacity: 0.48; }
.story-scenery-laura .laura-agave-pita-6 { --agave-hue: 5deg; left: 88%; top: 66%; transform: scale(0.84) rotate(6deg); opacity: 0.45; }

.story-scenery-laura .laura-agave-sprout-1 { --sprout-hue: -6deg; left: 18%; top: 30%; transform: scale(0.86) rotate(-2deg); opacity: 0.52; }
.story-scenery-laura .laura-agave-sprout-2 { --sprout-hue: 4deg; right: 5%; top: 50%; transform: scale(0.8) rotate(2deg); opacity: 0.5; }
.story-scenery-laura .laura-agave-sprout-3 { --sprout-hue: 8deg; left: 22%; top: 31%; transform: scale(0.84) rotate(25deg); opacity: 0.51; }
.story-scenery-laura .laura-agave-sprout-4 { --sprout-hue: 7deg; left: 79%; top: 40%; transform: scale(0.9) rotate(2deg); opacity: 0.54; }
.story-scenery-laura .laura-agave-sprout-5 { --sprout-hue: -3deg; left: 13%; top: 56%; transform: scale(0.82) rotate(-2deg); opacity: 0.5; }
.story-scenery-laura .laura-agave-sprout-6 { --sprout-hue: 5deg; left: 80%; top: 60%; transform: scale(0.86) rotate(3deg); opacity: 0.52; }
.story-scenery-laura .laura-agave-sprout-7 { --sprout-hue: -4deg; left: 15%; top: 76%; transform: scale(0.84) rotate(-3deg); opacity: 0.53; }
.story-scenery-laura .laura-agave-sprout-8 { --sprout-hue: 9deg; left: 78%; top: 80%; transform: scale(0.8) rotate(3deg); opacity: 0.49; }
.story-scenery-laura .laura-agave-sprout-9 { --sprout-hue: -1deg; left: 26%; top: 85%; transform: scale(0.8) rotate(-2deg); opacity: 0.5; }

.story-scenery-laura::before,
.story-scenery-laura::after {
    content: '';
    position: absolute;
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 0;
}

/* Distant, softer range */
.story-scenery-laura::before {
    top: -8vh;
    width: 118vw;
    height: 38vh;
    opacity: 0.62;
    background:
        radial-gradient(120% 90% at 50% 8%, rgba(244, 213, 161, 0.34) 0 22%, rgba(244, 213, 161, 0) 52%),
        linear-gradient(180deg, rgba(203, 170, 128, 0.92) 0%, rgba(166, 130, 93, 0.94) 40%, rgba(120, 90, 64, 0.96) 100%);
    clip-path: polygon(
        0 100%,
        0 70%,
        4% 68%,
        8% 58%,
        13% 62%,
        18% 46%,
        24% 52%,
        30% 38%,
        36% 47%,
        43% 22%,
        49% 34%,
        56% 18%,
        62% 31%,
        68% 25%,
        74% 38%,
        81% 29%,
        88% 44%,
        94% 40%,
        100% 52%,
        100% 100%
    );
    filter:
        saturate(0.9)
        contrast(0.95)
        drop-shadow(0 2px 0 rgba(95, 66, 43, 0.2));
}

/* Foreground range with warmer tones and deeper contrast */
.story-scenery-laura::after {
    top: 2vh;
    width: 126vw;
    height: 42vh;
    opacity: 0.78;
    background:
        linear-gradient(180deg, rgba(241, 193, 119, 0.22) 0 8%, rgba(241, 193, 119, 0) 20%),
        linear-gradient(180deg, rgba(163, 118, 76, 0.98) 0%, rgba(120, 81, 47, 0.98) 56%, rgba(89, 58, 34, 0.99) 100%);
    clip-path: polygon(
        0 100%,
        0 76%,
        5% 72%,
        10% 61%,
        16% 68%,
        22% 46%,
        28% 56%,
        35% 33%,
        40% 47%,
        47% 21%,
        53% 37%,
        60% 17%,
        66% 31%,
        73% 23%,
        80% 41%,
        87% 32%,
        93% 45%,
        100% 38%,
        100% 100%
    );
    box-shadow:
        0 3px 0 rgba(84, 56, 31, 0.26),
        0 12px 20px rgba(84, 55, 30, 0.14);
}

/* Large western backlot street + set dressing (Laura panel only) */
.story-scenery-laura .story-western-set {
    opacity: 0.98;
    image-rendering: auto;
    filter:
        drop-shadow(0 2px 0 rgba(71, 44, 24, 0.14))
        drop-shadow(0 12px 18px rgba(65, 39, 22, 0.07));
}

.story-scenery-laura .story-western-set-1 {
    left: auto;
    right: 1.5%;
    top: 30%;
    width: clamp(440px, 49vw, 680px);
    aspect-ratio: 1000 / 360;
    height: auto;
    z-index: 2;
    filter: saturate(0.88) contrast(1.03) brightness(1);
}

.story-scenery-laura .story-western-set-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url('assets/laura-western-set.svg') center bottom / contain no-repeat;
}

.story-scenery-laura .story-western-set-1::after {
    content: none;
}

.story-scenery-laura .story-western-set-3 {
    left: auto;
    right: -4%;
    top: 30%;
    width: clamp(620px, 68vw, 1080px);
    aspect-ratio: 1920 / 620;
    height: auto;
    z-index: 2;
    opacity: 0.94;
    filter: saturate(0.9) contrast(1.04) brightness(1.01);
}

.story-scenery-laura .story-western-set-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url('assets/laura-western-set-yellow-rose.svg') center bottom / contain no-repeat;
}

.story-scenery-laura .story-western-set-3::after {
    content: none;
}

.story-scenery-laura .story-western-set-2 {
    left: auto;
    right: 8%;
    top: 30%;
    width: clamp(220px, 24vw, 340px);
    height: clamp(74px, 8vw, 104px);
    opacity: 0.86;
    z-index: 3;
    filter:
        drop-shadow(0 2px 0 rgba(67, 43, 24, 0.16))
        drop-shadow(0 7px 12px rgba(67, 43, 24, 0.1));
}

.story-scenery-laura .story-western-set-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* ground shadow */
        radial-gradient(ellipse at 50% 76%, rgba(56, 35, 20, 0.18) 0 56%, rgba(56, 35, 20, 0) 62%) 50% 92% / 100% 42% no-repeat,
        /* wagon body and canvas */
        linear-gradient(180deg, #9d6b3a 0%, #7b532b 100%) 38% 60% / 28% 16% no-repeat,
        linear-gradient(180deg, #c8a06a 0%, #aa7f4f 100%) 38% 49% / 24% 11% no-repeat,
        linear-gradient(180deg, #8f5d31 0%, #6d4726 100%) 54% 57% / 16% 4% no-repeat,
        /* wheels */
        radial-gradient(circle at 50% 50%, transparent 0 36%, #5b3a22 38% 56%, transparent 58%) 28% 71% / 11% 24% no-repeat,
        radial-gradient(circle at 50% 50%, transparent 0 36%, #5b3a22 38% 56%, transparent 58%) 47% 72% / 11% 24% no-repeat,
        /* hitch rail + posts */
        linear-gradient(180deg, #86603f 0%, #65472f 100%) 77% 68% / 30% 6% no-repeat,
        linear-gradient(180deg, #755435 0%, #593d27 100%) 69% 56% / 1.8% 20% no-repeat,
        linear-gradient(180deg, #755435 0%, #593d27 100%) 83% 54% / 1.8% 22% no-repeat,
        linear-gradient(180deg, #755435 0%, #593d27 100%) 92% 56% / 1.8% 20% no-repeat,
        /* crate + barrel */
        linear-gradient(180deg, #936740 0%, #6f4d30 100%) 17% 73% / 12% 12% no-repeat,
        linear-gradient(180deg, #7f5633 0%, #603f25 100%) 61% 72% / 7% 13% no-repeat;
}

.story-scenery-laura .story-western-set-2::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* trough and bench planks */
        linear-gradient(180deg, #8a5f39 0%, #6a4a2d 100%) 8% 77% / 18% 5% no-repeat,
        linear-gradient(180deg, #7a5230 0%, #5c3d25 100%) 10% 66% / 1.5% 14% no-repeat,
        linear-gradient(180deg, #7a5230 0%, #5c3d25 100%) 21% 66% / 1.5% 14% no-repeat,
        /* subtle highlight on wagon canvas */
        linear-gradient(180deg, rgba(247, 227, 194, 0.2) 0%, rgba(247, 227, 194, 0) 100%) 38% 46% / 24% 6% no-repeat,
        /* long shadow line */
        linear-gradient(90deg, rgba(83, 56, 31, 0) 0%, rgba(83, 56, 31, 0.12) 12%, rgba(83, 56, 31, 0.12) 88%, rgba(83, 56, 31, 0) 100%) 50% 88% / 100% 7% no-repeat;
}

.story-scenery-laura .story-tomato-plants {
    width: clamp(190px, 26vw, 320px);
    height: clamp(106px, 14vw, 170px);
    background: url('assets/laura-tomato-plants.svg') center bottom / contain no-repeat;
    image-rendering: auto;
    z-index: 3;
    opacity: 0.94;
    filter:
        saturate(0.96)
        contrast(1.05)
        brightness(0.98)
        drop-shadow(0 2px 0 rgba(63, 40, 22, 0.18))
        drop-shadow(0 9px 12px rgba(63, 40, 22, 0.1));
}

.story-scenery-laura .story-tomato-plants-1 {
    left: auto;
    right: 33%;
    top: 49%;
    height: 148px;
    transform: rotate(-2deg) scale(1);
}

.story-scenery-laura .story-tomato-plants-2 {
    left: auto;
    right: 23%;
    top: 52%;
    height: 132px;
    transform: rotate(2deg) scale(0.9);
    opacity: 0.9;
}

.story-scenery-laura .story-tomato-plants-3 {
    left: auto;
    right: 41%;
    top: 54%;
    height: 118px;
    transform: rotate(-4deg) scale(0.82);
    opacity: 0.86;
}

.story-scenery-laura .story-analog-camera {
    width: 42px;
    height: 27px;
    border: 2px solid #1a1714;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 22%, rgba(255, 255, 255, 0) 23%),
        linear-gradient(180deg, #4d4945 0%, #302d2a 62%, #221f1c 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 0 rgba(73, 49, 31, 0.2);
    z-index: 3;
}

.story-scenery-laura .story-analog-camera::before {
    content: '';
    position: absolute;
    left: 10px;
    top: -8px;
    width: 20px;
    height: 10px;
    background:
        linear-gradient(180deg, #66615b 0%, #4c4742 100%);
    clip-path: polygon(0 100%, 16% 34%, 84% 34%, 100% 100%);
    box-shadow:
        0 0 0 2px #1a1714,
        11px 1px 0 -2px #6f685f,
        -10px 2px 0 -3px #59534d;
}

.story-scenery-laura .story-analog-camera::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #1b1815;
    background:
        radial-gradient(circle at 42% 36%, rgba(171, 214, 221, 0.52) 0 18%, rgba(66, 94, 112, 0.45) 19% 34%, rgba(23, 29, 34, 0.96) 55%, #0c0f12 72%);
    box-shadow:
        0 0 0 2px #403932,
        10px -7px 0 -5px #7b736b,
        -11px -5px 0 -4px #5f5953;
}

.story-scenery-laura .story-analog-camera-1 {
    left: auto;
    right: 22%;
    top: 65%;
    transform: rotate(8deg) scale(1);
    opacity: 0.94;
    z-index: 3;
}

.story-scenery-laura .story-flight-ticket {
    width: 168px;
    height: 64px;
    border: 2px solid rgba(109, 79, 49, 0.58);
    border-radius: 5px;
    background:
        radial-gradient(circle at 8% 50%, rgba(203, 173, 124, 0.95) 0 7%, rgba(203, 173, 124, 0) 7.6%),
        radial-gradient(circle at 92% 50%, rgba(203, 173, 124, 0.95) 0 7%, rgba(203, 173, 124, 0) 7.6%),
        repeating-linear-gradient(90deg, rgba(110, 85, 60, 0.28) 0 2px, rgba(110, 85, 60, 0) 2px 5px) 86% 50% / 12% 72% no-repeat,
        linear-gradient(90deg, rgba(158, 122, 84, 0.35) 0 72%, rgba(109, 79, 49, 0.12) 72% 74%, rgba(255, 242, 215, 0.1) 74% 100%),
        linear-gradient(180deg, rgba(241, 222, 187, 0.96) 0%, rgba(222, 196, 151, 0.96) 100%);
    box-shadow:
        0 2px 0 rgba(75, 49, 29, 0.14),
        0 7px 12px rgba(75, 49, 29, 0.12),
        inset 0 1px 0 rgba(255, 245, 224, 0.38);
    image-rendering: auto;
    z-index: 3;
}

.story-scenery-laura .story-flight-ticket::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(126, 93, 62, 0.18) 0 1px, rgba(126, 93, 62, 0) 1px 6px) 86% 50% / 1px 82% no-repeat,
        linear-gradient(90deg, rgba(118, 86, 56, 0.22) 0 1px, transparent 1px) 74% 8% / 1px 84% no-repeat,
        radial-gradient(circle at 8% 50%, rgba(181, 149, 105, 0.78) 0 5%, rgba(181, 149, 105, 0) 5.6%),
        radial-gradient(circle at 92% 50%, rgba(181, 149, 105, 0.78) 0 5%, rgba(181, 149, 105, 0) 5.6%);
    opacity: 0.9;
}

.story-scenery-laura .story-flight-ticket::after {
    content: 'LEI -> AMS AMSTERDAM';
    position: absolute;
    left: 12px;
    top: 12px;
    color: rgba(83, 55, 31, 0.92);
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.35;
    white-space: pre-line;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.22);
}

.story-scenery-laura .story-flight-ticket-1 {
    left: auto;
    right: 28%;
    top: 94%;
    transform: rotate(-8deg) scale(1.16);
    opacity: 0.95;
}

/* Andrea scroll-zone scenery: greener Calabria range + Strait of Messina */
.story-scenery-andrea {
    overflow: hidden;
    z-index: 0;
    background:
        radial-gradient(58vw 22vh at 16% 14%, rgba(244, 248, 252, 0.36) 0 55%, rgba(244, 248, 252, 0) 67%),
        radial-gradient(54vw 18vh at 82% 15%, rgba(236, 242, 248, 0.3) 0 54%, rgba(236, 242, 248, 0) 66%),
        linear-gradient(180deg, #d4e3ea 0%, #bcccd5 36%, #9caab4 64%, #858f99 100%);
}

.story-scenery-andrea .andrea-layer {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.story-scenery-andrea .andrea-range-calabria {
    top: 1%;
    height: 20%;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(202, 229, 187, 0.3) 0 20%, rgba(202, 229, 187, 0) 40%),
        repeating-linear-gradient(90deg, rgba(72, 114, 76, 0.24) 0 2.2%, rgba(72, 114, 76, 0) 2.2% 5%),
        linear-gradient(180deg, #79a779 0%, #608d64 56%, #4a744f 100%);
    clip-path: polygon(
        0 100%,
        0 78%,
        6% 72%,
        14% 52%,
        22% 62%,
        30% 38%,
        38% 50%,
        47% 27%,
        55% 44%,
        64% 24%,
        72% 39%,
        80% 29%,
        89% 45%,
        95% 39%,
        100% 48%,
        100% 100%
    );
    filter:
        saturate(1.04)
        contrast(1.05)
        drop-shadow(0 2px 0 rgba(42, 70, 48, 0.26));
}

.story-scenery-andrea .andrea-strait {
    top: 19%;
    height: 13%;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(246, 252, 255, 0.86) 0 8%, rgba(246, 252, 255, 0.36) 8% 14%, rgba(246, 252, 255, 0) 26%),
        repeating-linear-gradient(90deg, rgba(131, 191, 216, 0.32) 0 8%, rgba(98, 158, 186, 0.16) 8% 15%, rgba(82, 142, 172, 0.24) 15% 20%, rgba(82, 142, 172, 0.06) 20% 26%),
        linear-gradient(180deg, #79bdd5 0%, #4d91b0 48%, #356e8f 100%);
    box-shadow:
        inset 0 2px 0 rgba(248, 254, 255, 0.88),
        inset 0 -2px 0 rgba(27, 76, 99, 0.46),
        0 1px 0 rgba(200, 233, 246, 0.32);
}

.story-scenery-andrea .andrea-strait::before,
.story-scenery-andrea .andrea-strait::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* Seafront fence (SVG): stone parapet + bollards + dark rails */
.story-scenery-andrea .andrea-strait::before {
    bottom: -22px;
    height: 70px;
    z-index: 3;
    background: url('assets/andrea-messina-fence.svg') left bottom / auto 70px repeat-x;
    filter:
        drop-shadow(0 -1px 0 rgba(243, 245, 244, 0.84))
        drop-shadow(0 1px 0 rgba(52, 62, 73, 0.28));
}

.story-scenery-andrea .andrea-strait::after {
    content: none;
}

.story-scenery-andrea .andrea-ferry {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 2;
    width: clamp(240px, 27vw, 390px);
    aspect-ratio: 1400 / 320;
    background: url('assets/andrea-messina-ferry.svg') center / contain no-repeat;
    image-rendering: auto;
    opacity: 0.98;
    filter:
        drop-shadow(0 1px 0 rgba(238, 247, 252, 0.45))
        drop-shadow(0 6px 7px rgba(20, 53, 69, 0.28));
}

.story-scenery-andrea .andrea-ferry-1 {
    left: 63%;
    top: 22%;
    transform: translateX(calc(-50% + var(--andrea-ferry-shift, 0px))) scale(0.6);
}

.story-scenery-andrea .andrea-madonnina {
    position: absolute;
    right: 1.5%;
    top: 23%;
    z-index: 2;
    width: clamp(84px, 8.2vw, 132px);
    aspect-ratio: 760 / 760;
    pointer-events: none;
    background: url('assets/andrea-madonnina.svg') center bottom / contain no-repeat;
    opacity: 0.96;
    transform: scaleX(1.5) scaleY(1.5);
    transform-origin: center bottom;
    filter:
        drop-shadow(0 1px 0 rgba(245, 236, 219, 0.34))
        drop-shadow(0 4px 6px rgba(20, 53, 69, 0.3));
}

.story-scenery-laura .laura-caramelo {
    position: absolute;
    left: 49%;
    top: 70%;
    z-index: 4;
    width: clamp(240px, 30vw, 470px);
    aspect-ratio: 1200 / 620;
    pointer-events: none;
    background: url('assets/laura-caramelo-discoteca.svg') center bottom / contain no-repeat;
    opacity: 0.95;
    transform: translateX(-50%);
    filter:
        drop-shadow(0 1px 0 rgba(244, 236, 226, 0.24))
        drop-shadow(0 7px 10px rgba(24, 48, 63, 0.26));
}

.story-scenery-andrea .andrea-guy {
    position: absolute;
    left: 20%;
    top: 45.8%;
    right: auto;
    z-index: 5;
    width: clamp(78px, 8.6vw, 132px);
    aspect-ratio: 320 / 400;
    pointer-events: none;
    background: url('assets/andrea-land-guy.svg') center bottom / contain no-repeat;
    opacity: 0.97;
    transform: rotate(-1deg);
    transform-origin: center bottom;
    filter:
        drop-shadow(0 1px 0 rgba(237, 211, 184, 0.2))
        drop-shadow(0 5px 8px rgba(23, 45, 48, 0.3));
}

.story-scenery-andrea .andrea-interviewer {
    position: absolute;
    left: 13%;
    top: 47.2%;
    right: auto;
    z-index: 6;
    width: clamp(74px, 8vw, 124px);
    aspect-ratio: 300 / 320;
    pointer-events: none;
    background: url('assets/andrea-interviewer.svg') center bottom / contain no-repeat;
    opacity: 0.96;
    transform: rotate(-2deg);
    transform-origin: center bottom;
    filter:
        drop-shadow(0 1px 0 rgba(225, 208, 182, 0.16))
        drop-shadow(0 5px 8px rgba(22, 44, 46, 0.28));
}

.story-scenery-andrea .andrea-duomo {
    position: absolute;
    left: 40%;
    top: 61.2%;
    z-index: 5;
    width: clamp(184px, 25vw, 320px);
    aspect-ratio: 560 / 420;
    pointer-events: none;
    background: url('assets/andrea-duomo.svg') center bottom / contain no-repeat;
    opacity: 0.95;
    filter: none;
}

.story-scenery-andrea .andrea-negresco {
    position: absolute;
    left: 39%;
    top: 85%;
    z-index: 5;
    width: clamp(260px, 25vw, 540px);
    aspect-ratio: 1300 / 760;
    pointer-events: none;
    background: url('assets/andrea-negresco.svg') center bottom / contain no-repeat;
    opacity: 0.97;
    transform-origin: center bottom;
    filter: none
}

.story-scenery-andrea .andrea-willis {
    position: absolute;
    left: 20%;
    top: 73%;
    z-index: 5;
    width: clamp(64px, 7.8vw, 122px);
    aspect-ratio: 340 / 920;
    pointer-events: none;
    background: url('assets/andrea-willis-tower.svg') center bottom / contain no-repeat;
    opacity: 0.97;
    filter: none;
}

.story-scenery-andrea .andrea-french {
    position: absolute;
    left: 45.6%;
    top: 92%;
    z-index: 5;
    width: clamp(66px, 8.2vw, 128px);
    aspect-ratio: 260 / 360;
    pointer-events: none;
    background: url('assets/andrea-french-baguette.svg') center / contain no-repeat;
    opacity: 0.96;
    transform-origin: center bottom;
    animation: andreaFrenchBaguette 2s ease-in-out infinite;
    animation-play-state: paused;
}

.story-scenery-andrea .andrea-land {
    top: 43%;
    height: 54%;
    z-index: 4;
    background:
        linear-gradient(180deg, rgba(236, 242, 248, 0.24) 0 10%, rgba(236, 242, 248, 0) 16%),
        repeating-linear-gradient(180deg, rgba(104, 113, 122, 0.22) 0 5.6%, rgba(104, 113, 122, 0) 5.6% 10.2%),
        repeating-linear-gradient(90deg, rgba(154, 163, 172, 0.2) 0 8%, rgba(154, 163, 172, 0) 8% 12%),
        linear-gradient(180deg, #98a2ad 0%, #828c97 50%, #69737e 100%);
    box-shadow:
        inset 0 2px 0 rgba(230, 236, 243, 0.22),
        0 -1px 0 rgba(57, 64, 72, 0.24);
}

.story-scenery-andrea .andrea-path {
    top: 66%;
    left: 49%;
    width: 38%;
    height: 31%;
    z-index: 5;
    background:
        linear-gradient(180deg, rgba(238, 241, 245, 0.34) 0 15%, rgba(238, 241, 245, 0) 34%),
        repeating-linear-gradient(90deg, rgba(86, 94, 103, 0.2) 0 9%, rgba(86, 94, 103, 0) 9% 12%),
        linear-gradient(180deg, #8f979f 0%, #76808a 52%, #616b75 100%);
    clip-path: polygon(26% 0, 70% 0, 100% 100%, 0 100%);
    box-shadow:
        inset 1px 0 0 rgba(210, 218, 228, 0.42),
        inset -1px 0 0 rgba(73, 80, 88, 0.38),
        0 1px 0 rgba(42, 49, 56, 0.24);
    opacity: 0.92;
}

.story-scenery-andrea .andrea-path::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(86, 94, 102, 0.34) 0 8.5%, rgba(86, 94, 102, 0) 8.5% 14%),
        repeating-linear-gradient(90deg, rgba(170, 179, 188, 0.2) 0 11%, rgba(170, 179, 188, 0) 11% 22%),
        linear-gradient(90deg, rgba(210, 219, 230, 0) 0, rgba(210, 219, 230, 0.18) 52%, rgba(95, 104, 114, 0.14) 100%);
    clip-path: polygon(28% 0, 64% 0, 98% 100%, 2% 100%);
}

/* Meeting scroll-zone scenery: gloomy Amsterdam canal */
.story-scenery-meeting {
    z-index: 1;
    overflow: hidden;
}

.story-scenery-meeting::before,
.story-scenery-meeting::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* Quay between houses and canal */
.story-scenery-meeting::before {
    top: 11%;
    height: 1.3%;
    z-index: 2;
    background:
        repeating-linear-gradient(90deg, rgba(137, 145, 157, 0.24) 0 8%, rgba(137, 145, 157, 0) 8% 14%),
        linear-gradient(180deg, #7d838d 0%, #6a727d 46%, #505a65 100%);
    box-shadow:
        inset 0 1px 0 rgba(220, 228, 236, 0.22),
        inset 0 -1px 0 rgba(36, 46, 57, 0.45),
        0 1px 0 rgba(188, 202, 216, 0.22);
}

.story-scenery-meeting::after {
    top: 34%;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(18, 33, 45, 0) 0%, rgba(15, 26, 38, 0.52) 100%);
}

.story-scenery-meeting .meeting-canal-row {
    position: absolute;
    top: -13.3%;
    left: 0;
    width: 100%;
    height: 34.7%;
    transform: none;
    z-index: 3;
    background: url('assets/amsterdam-canal-row.svg') center top / 108% 100% no-repeat;
    image-rendering: auto;
    filter:
        saturate(0.95)
        brightness(0.96)
        drop-shadow(0 4px 7px rgba(16, 24, 35, 0.24));
}

.story-scenery-meeting .meeting-canal-row::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 17, 25, 0) 78%, rgba(10, 17, 25, 0.08) 100%);
}

.story-scenery-meeting .meeting-booking-office {
    position: absolute;
    right: 2%;
    top: 35%;
    width: clamp(210px, 18vw, 320px);
    aspect-ratio: 1100 / 760;
    z-index: 4;
    pointer-events: none;
    background: url('assets/andrea-booking-office.svg') right bottom / contain no-repeat;
    filter: saturate(0.92) brightness(0.9) drop-shadow(0 10px 14px rgba(14, 24, 35, 0.25));
}

.story-scenery-meeting .meeting-zaandam-hotel {
    position: absolute;
    left: 2.5%;
    top: 45.2%;
    width: clamp(160px, 13vw, 206px);
    aspect-ratio: 760 / 1240;
    z-index: 4;
    pointer-events: none;
    background: url('assets/laura-zaandam-hotel.svg') left bottom / contain no-repeat;
    filter: saturate(0.98) brightness(0.94) drop-shadow(0 10px 14px rgba(10, 21, 30, 0.28));
}

.story-scenery-meeting .meeting-canal-water {
    position: absolute;
    top: 12.2%;
    left: 0;
    width: 100%;
    height: 5.8%;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(218, 231, 242, 0.3) 0 12%, rgba(218, 231, 242, 0) 24%),
        repeating-linear-gradient(90deg, rgba(82, 124, 155, 0.2) 0 3%, rgba(82, 124, 155, 0.08) 3% 6%, rgba(52, 92, 122, 0.18) 6% 9%, rgba(52, 92, 122, 0.04) 9% 12%),
        linear-gradient(180deg, #3f6684 0%, #2a4c68 44%, #1a3348 100%);
    box-shadow:
        inset 0 2px 0 rgba(225, 236, 244, 0.52),
        inset 0 -2px 0 rgba(18, 35, 50, 0.6),
        0 -2px 0 rgba(20, 31, 41, 0.52);
}

.story-scenery-meeting .meeting-canal-water::before,
.story-scenery-meeting .meeting-canal-water::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* Reflection bars from houses */
.story-scenery-meeting .meeting-canal-water::before {
    top: 0;
    height: 68%;
    background:
        repeating-linear-gradient(90deg, rgba(207, 176, 151, 0.1) 0 2.8%, rgba(207, 176, 151, 0) 2.8% 6.5%, rgba(170, 144, 130, 0.08) 6.5% 8.6%, rgba(170, 144, 130, 0) 8.6% 12.8%);
    opacity: 0.42;
}

.story-scenery-meeting .meeting-canal-water::after {
    bottom: 0;
    height: 56%;
    background:
        repeating-linear-gradient(180deg, rgba(190, 214, 232, 0.18) 0 3%, rgba(190, 214, 232, 0) 3% 10%);
    opacity: 0.44;
}

.story-scenery-meeting .meeting-canal-boat {
    position: absolute;
    top: 13.5%;
    left: 62%;
    width: clamp(120px, 14vw, 204px);
    height: clamp(14px, 2vh, 22px);
    transform: translateX(calc(-50% + 14px));
    z-index: 3;
    border: 3px solid #2f1d21;
    border-top-color: #5f4747;
    background:
        linear-gradient(180deg, #8d5959 0%, #643f44 54%, #3f272d 100%);
    clip-path: polygon(2% 8%, 98% 8%, 92% 78%, 12% 100%, 0 100%, 2% 55%);
    box-shadow:
        0 2px 0 rgba(18, 31, 44, 0.5),
        0 0 0 1px rgba(145, 108, 108, 0.2);
    animation: meetingBoatDrift 8.4s ease-in-out infinite;
}

.story-scenery-meeting .meeting-canal-boat::before {
    content: '';
    position: absolute;
    width: 36%;
    height: 44%;
    top: -56%;
    left: 48%;
    transform: translateX(-50%);
    border: 3px solid #2f1d21;
    background: linear-gradient(180deg, #d8dfe8 0%, #b7c2ce 100%);
}

.story-scenery-meeting .meeting-canal-boat::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 22%;
    top: -35%;
    left: 48%;
    transform: translateX(-50%);
    background:
        repeating-linear-gradient(90deg, rgba(39, 54, 72, 0.96) 0 18%, rgba(39, 54, 72, 0) 18% 32%);
}

.scroll-zone-meeting #panelC {
    z-index: 5;
}

.scroll-zone-meeting .speech-bubble {
    background: rgba(16, 28, 40, 0.92);
    border-color: #7eaec7;
    box-shadow:
        0 0 0 1px rgba(168, 204, 225, 0.18),
        0 5px 10px rgba(10, 20, 30, 0.28);
}

.scroll-zone-meeting .speech-bubble h3 {
    color: #e6bf96;
    text-shadow:
        2px 2px 0 #4f2f1d,
        4px 4px 0 #25160e;
}

.scroll-zone-meeting .speech-bubble p {
    color: #e4edf4;
    text-shadow: 1px 1px 0 rgba(10, 20, 31, 0.56);
}

#panelC .character-container::after {
    background: rgba(13, 29, 43, 0.52);
}

@keyframes meetingRainFall {
    0% {
        transform: translate3d(-12px, -120px, 0);
    }
    100% {
        transform: translate3d(12px, 120px, 0);
    }
}

@keyframes meetingRainFallFine {
    0% {
        transform: translate3d(-8px, -160px, 0);
    }
    100% {
        transform: translate3d(8px, 160px, 0);
    }
}

@keyframes meetingBoatDrift {
    0%, 100% {
        transform: translateX(calc(-50% + 14px)) translateY(0);
    }
    50% {
        transform: translateX(calc(-50% - 8px)) translateY(2px);
    }
}

@keyframes meetingCyclistBackTravel {
    0% {
        transform: translate3d(calc(-60vw - 120px), 18px, 0) scale(2.08);
    }
    100% {
        transform: translate3d(calc(60vw + 120px), 15px, 0) scale(2.32);
    }
}

@keyframes meetingCyclistFrontTravel {
    0% {
        transform: translate3d(calc(62vw + 130px), 8px, 0) scale(-2.56, 2.56);
    }
    100% {
        transform: translate3d(calc(-62vw - 130px), 10px, 0) scale(-2.48, 2.48);
    }
}

@keyframes meetingCyclistReverseTravel {
    0% {
        transform: translate3d(calc(-64vw - 140px), 12px, 0) scale(2.36);
    }
    100% {
        transform: translate3d(calc(64vw + 140px), 12px, 0) scale(2.4);
    }
}

@keyframes meetingWheelSpin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes meetingRiderBob {
    0%, 100% {
        transform: translateY(0) scale(var(--rider-scale, 1));
    }
    50% {
        transform: translateY(-0.5px) scale(var(--rider-scale, 1));
    }
}

@keyframes meetingPedalA {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@keyframes meetingPedalB {
    0%, 100% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}

@keyframes meetingLowerLegA {
    0%, 100% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-4deg);
    }
}

@keyframes meetingLowerLegB {
    0%, 100% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

#panelB .character-container::after {
    background: rgba(40, 72, 44, 0.34);
}

/* Debug-only screenshot mode for Andrea panel (enabled via ?debugView=andrea) */
body.debug-view-andrea > :not(svg):not(#story) {
    display: none !important;
}

body.debug-view-andrea #story {
    min-height: 100vh;
}

body.debug-view-andrea #story .section-header,
body.debug-view-andrea #story .scroll-zone:not(#panelBZone) {
    display: none !important;
}

body.debug-view-andrea #panelBZone {
    height: 100vh;
}

body.debug-view-andrea #panelBZone #panelB {
    position: relative;
    top: auto;
}

/* Debug-only screenshot mode for meeting panel (enabled via ?debugView=meeting) */
body.debug-view-meeting > :not(svg):not(#story) {
    display: none !important;
}

body.debug-view-meeting #story {
    min-height: 100vh;
}

body.debug-view-meeting #story .section-header,
body.debug-view-meeting #story .scroll-zone:not(.scroll-zone-meeting) {
    display: none !important;
}

body.debug-view-meeting .scroll-zone-meeting {
    height: 100vh;
}

body.debug-view-meeting .scroll-zone-meeting #panelC {
    position: relative;
    top: auto;
}

/* Laura panel bubble tail should point toward Laura (left side) */
#panelA .speech-bubble::after {
    left: 22px;
    border-right: none;
    border-left: var(--pixel-border);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

#panelA .speech-bubble::before {
    left: 26px;
    border-right: none;
    border-left: var(--pixel-border);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Panel C — meeting panel */
.story-panel.panel-meeting {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: sticky;
    top:-20vh;
    min-height: unset;
    height: 120vh;
}

.meeting-characters {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    width: 100%;
    position: relative;
    top: 150px;
    isolation: isolate;
}

.meeting-cyclists {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    pointer-events: none;
    z-index: 6;
}

.meeting-cyclist {
    --bike-color: #7ba1c7;
    --bike-dark: #304356;
    --shirt-color: #39587d;
    --pants-color: #2d3b4f;
    --skin-color: #f1d0b1;
    --outline-color: #1c2736;
    --rim-color: #2b3a4d;
    --hub-color: #e5edf6;
    --wheel-spin-duration: 0.24s;
    --pedal-duration: 0.26s;
    --rider-scale: 1.08;
    --wheel-size: 28px;
    --rear-wheel-x: 4px;
    --front-wheel-x: 56px;
    --frame-x: 22px;
    --frame-y: 17px;
    --frame-width: 38px;
    position: absolute;
    left: 50%;
    top: var(--cyclist-lane, 58%);
    width: 96px;
    height: 66px;
    transform-origin: 50% 82%;
    image-rendering: pixelated;
    will-change: transform;
    filter: drop-shadow(0 2px 0 rgba(12, 22, 34, 0.48));
}

.meeting-cyclist::before {
    content: '';
    position: absolute;
    left: 40px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--outline-color);
    border-radius: 50%;
    background: #aebfd0;
    z-index: 5;
}

.meeting-cyclist::after {
    content: '';
    position: absolute;
    left: 9px;
    bottom: -1px;
    width: 70px;
    height: 4px;
    background: rgba(8, 18, 30, 0.34);
    filter: blur(1px);
}

.meeting-cyclist .bike-wheel {
    position: absolute;
    bottom: 0;
    width: var(--wheel-size);
    height: var(--wheel-size);
    border: 2px solid var(--rim-color);
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 1;
    background:
        radial-gradient(circle at center, var(--hub-color) 0 17%, transparent 18%),
        repeating-conic-gradient(
            from 0deg,
            rgba(220, 231, 242, 0.94) 0 4%,
            rgba(220, 231, 242, 0.08) 4% 12%
        ),
        radial-gradient(circle at center, #93a7bb 0 56%, #5d7187 57% 100%);
    animation: meetingWheelSpin var(--wheel-spin-duration) linear infinite;
}

.meeting-cyclist .wheel-rear {
    left: var(--rear-wheel-x);
}

.meeting-cyclist .wheel-front {
    left: var(--front-wheel-x);
}

.meeting-cyclist .bike-frame {
    position: absolute;
    left: var(--frame-x);
    bottom: var(--frame-y);
    width: var(--frame-width);
    height: 3px;
    background: linear-gradient(90deg, rgba(74, 102, 128, 0.96) 0%, var(--bike-color) 100%);
    z-index: 3;
    box-shadow: 0 1px 0 var(--bike-dark);
}

.meeting-cyclist .bike-frame::before {
    content: '';
    position: absolute;
    left: 6px;
    top: -9px;
    width: 3px;
    height: 15px;
    background: var(--bike-color);
    box-shadow:
        11px 1px 0 var(--bike-color),
        21px 4px 0 var(--bike-color),
        21px -4px 0 var(--bike-color),
        -6px 1px 0 var(--bike-dark);
}

.meeting-cyclist .bike-frame::after {
    content: '';
    position: absolute;
    left: 14px;
    top: -8px;
    width: 3px;
    height: 13px;
    background: var(--bike-color);
    box-shadow: 0 2px 0 var(--bike-dark);
}

.meeting-cyclist .bike-city-kit {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.meeting-cyclist .city-handlebar {
    position: absolute;
    left: calc(var(--front-wheel-x) + 9px);
    bottom: 34px;
    width: 13px;
    height: 2px;
    background: var(--bike-dark);
}

.meeting-cyclist .city-handlebar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 2px;
    height: 7px;
    background: var(--bike-dark);
}

.meeting-cyclist .city-basket {
    position: absolute;
    left: calc(var(--front-wheel-x) + 18px);
    bottom: 20px;
    width: 11px;
    height: 10px;
    border: 1.5px solid var(--bike-dark);
    background:
        repeating-linear-gradient(90deg, rgba(198, 179, 155, 0.72) 0 2px, rgba(198, 179, 155, 0.22) 2px 4px),
        repeating-linear-gradient(180deg, rgba(168, 142, 118, 0.42) 0 2px, rgba(168, 142, 118, 0) 2px 4px);
}

.meeting-cyclist .city-saddle {
    position: absolute;
    left: calc(var(--frame-x) + 1px);
    bottom: 34px;
    width: 11px;
    height: 4px;
    background: #2b313b;
    border-radius: 3px 3px 2px 2px;
}

.meeting-cyclist .city-rack {
    position: absolute;
    left: calc(var(--rear-wheel-x) + 1px);
    bottom: 23px;
    width: 14px;
    height: 2px;
    background: var(--bike-dark);
}

.meeting-cyclist .city-rack::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 2px;
    height: 5px;
    background: var(--bike-dark);
    box-shadow: 8px 0 0 var(--bike-dark);
}

.meeting-cyclist .city-chain-guard {
    position: absolute;
    left: calc(var(--frame-x) + 3px);
    bottom: 14px;
    width: 18px;
    height: 8px;
    border: 1.5px solid rgba(57, 73, 91, 0.95);
    border-top-color: transparent;
    border-radius: 0 0 9px 9px;
}

.meeting-cyclist .city-fender {
    position: absolute;
    width: var(--wheel-size);
    height: calc(var(--wheel-size) * 0.5);
    border: 2px solid rgba(92, 109, 128, 0.88);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
}

.meeting-cyclist .city-fender-rear {
    left: var(--rear-wheel-x);
    bottom: 13px;
}

.meeting-cyclist .city-fender-front {
    left: var(--front-wheel-x);
    bottom: 13px;
}

.meeting-cyclist .bike-rider {
    position: absolute;
    left: 30px;
    bottom: 21px;
    width: 30px;
    height: 33px;
    transform-origin: 45% 100%;
    z-index: 6;
    animation: meetingRiderBob var(--pedal-duration) steps(2) infinite;
}

.meeting-cyclist .rider-head {
    position: absolute;
    top: 0;
    left: 8px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--outline-color);
    box-sizing: border-box;
    background: var(--skin-color);
    border-radius: 2px;
}

.meeting-cyclist .rider-head::after {
    content: '';
    position: absolute;
    left: -0.5px;
    top: -4px;
    width: 9px;
    height: 3px;
    background: var(--outline-color);
    box-shadow: 0 1px 0 rgba(220, 231, 243, 0.2);
}

.meeting-cyclist .rider-torso {
    position: absolute;
    top: 8px;
    left: 5px;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--outline-color);
    box-sizing: border-box;
    background: var(--shirt-color);
    transform: skewX(4deg);
}

.meeting-cyclist .rider-torso::before,
.meeting-cyclist .rider-torso::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background: var(--skin-color);
}

.meeting-cyclist .rider-torso::before {
    left: -8px;
    top: 4px;
    transform: rotate(-2deg);
}

.meeting-cyclist .rider-torso::after {
    right: -8px;
    top: 3px;
    transform: rotate(12deg);
}

.meeting-cyclist .rider-leg {
    position: absolute;
    left: 2px;
    top: 20px;
    width: 15px;
    height: 2px;
    background: var(--pants-color);
    transform-origin: 92% 50%;
}

.meeting-cyclist .rider-leg::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    width: 11px;
    height: 2px;
    background: var(--pants-color);
    transform-origin: 90% 50%;
}

.meeting-cyclist .rider-leg-a {
    animation: meetingPedalA var(--pedal-duration) steps(3) infinite;
}

.meeting-cyclist .rider-leg-a::after {
    animation: meetingLowerLegA var(--pedal-duration) steps(3) infinite;
}

.meeting-cyclist .rider-leg-b {
    animation: meetingPedalB var(--pedal-duration) steps(3) infinite;
}

.meeting-cyclist .rider-leg-b::after {
    animation: meetingLowerLegB var(--pedal-duration) steps(3) infinite;
}

.meeting-cyclist.cyclist-back {
    --cyclist-lane: 22%;
    z-index: 4;
    opacity: var(--travel-opacity, 0.84);
    animation: meetingCyclistBackTravel var(--travel-duration, 1.45s) linear infinite;
    animation-delay: var(--travel-delay, -1.7s);
}

.meeting-cyclist.cyclist-front {
    --cyclist-lane: 46%;
    z-index: 11;
    opacity: var(--travel-opacity, 0.95);
    animation: meetingCyclistFrontTravel var(--travel-duration, 1.15s) linear infinite;
    animation-delay: var(--travel-delay, -1.4s);
}

.meeting-cyclist.cyclist-reverse {
    --cyclist-lane: 58%;
    animation: meetingCyclistReverseTravel var(--travel-duration, 1.25s) linear infinite;
    animation-delay: var(--travel-delay, -1.55s);
    opacity: var(--travel-opacity, 0.88);
}

.meeting-cyclist.cyclist-amber {
    --bike-color: #c5a06e;
    --bike-dark: #483423;
    --shirt-color: #644f2f;
    --pants-color: #4c4138;
    --skin-color: #f5d1ac;
    --rim-color: #54473a;
    --outline-color: #2d251f;
    --wheel-spin-duration: 0.27s;
    --pedal-duration: 0.28s;
}

.meeting-cyclist.cyclist-blue {
    --bike-color: #7ba7cb;
    --bike-dark: #28415d;
    --shirt-color: #2f5d8f;
    --pants-color: #263145;
    --skin-color: #ebc3a3;
    --rim-color: #2b4159;
    --outline-color: #1a2737;
    --wheel-spin-duration: 0.22s;
    --pedal-duration: 0.24s;
}

.meeting-cyclist.cyclist-ruby {
    --bike-color: #bc8f9b;
    --bike-dark: #4e3341;
    --shirt-color: #7d3646;
    --pants-color: #442f45;
    --skin-color: #f1c2a7;
    --rim-color: #4a3145;
    --outline-color: #271b25;
    --wheel-spin-duration: 0.25s;
    --pedal-duration: 0.25s;
}

.meeting-characters .character-container {
    flex: 0 0 auto;
}

/* Scroll-driven positions via CSS custom properties set by JS */
.meeting-characters .char-laura {
    z-index: 9;
    transform: translateX(var(--laura-x, -200px));
}

.meeting-characters .char-andrea {
    z-index: 9;
    transform: translateX(var(--andrea-x, 200px));
}

.meeting-characters .char-ovi {
    opacity: var(--ovi-opacity, 0);
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
}

.meeting-heart {
    position: absolute;
    left: 50%;
    bottom: 132px;
    z-index: 12;
    width: 3px;
    height: 3px;
    background: transparent;
    opacity: calc(var(--ovi-opacity, 0) * 0.95);
    pointer-events: none;
    image-rendering: pixelated;
    transform-origin: center;
    transform:
        translateX(calc(-50% + 1.5px))
        translateY(calc((1 - var(--ovi-opacity, 0)) * 8px))
        scale(calc(0.88 + (var(--ovi-opacity, 0) * 0.32)));
    box-shadow:
        -9px 0 0 #f06b7b,
        -6px 0 0 #f06b7b,
        6px 0 0 #f06b7b,
        9px 0 0 #f06b7b,
        -12px 3px 0 #f06b7b,
        -9px 3px 0 #f06b7b,
        -6px 3px 0 #f06b7b,
        -3px 3px 0 #f06b7b,
        3px 3px 0 #f06b7b,
        6px 3px 0 #f06b7b,
        9px 3px 0 #f06b7b,
        12px 3px 0 #f06b7b,
        -12px 6px 0 #f06b7b,
        -9px 6px 0 #f06b7b,
        -6px 6px 0 #f06b7b,
        -3px 6px 0 #f06b7b,
        0 6px 0 #f06b7b,
        3px 6px 0 #f06b7b,
        6px 6px 0 #f06b7b,
        9px 6px 0 #f06b7b,
        12px 6px 0 #f06b7b,
        -9px 9px 0 #f06b7b,
        -6px 9px 0 #f06b7b,
        -3px 9px 0 #f06b7b,
        0 9px 0 #f06b7b,
        3px 9px 0 #f06b7b,
        6px 9px 0 #f06b7b,
        9px 9px 0 #f06b7b,
        -6px 12px 0 #f06b7b,
        -3px 12px 0 #f06b7b,
        0 12px 0 #f06b7b,
        3px 12px 0 #f06b7b,
        6px 12px 0 #f06b7b,
        -3px 15px 0 #f06b7b,
        0 15px 0 #f06b7b,
        3px 15px 0 #f06b7b,
        0 18px 0 #f06b7b;
    filter:
        drop-shadow(0 0 0 #fff2d4)
        drop-shadow(0 1px 0 rgba(77, 28, 34, 0.5));
    animation:
        pixelHeartPump 0.95s steps(2) infinite,
        pixelHeartFloat 1.8s ease-in-out infinite;
}

.meeting-bubble {
    margin-top: 30px;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    opacity: var(--bubble-opacity, 0);
    translate: 0 100px;
}

/* Panel C bubble tail should sit on top and point to the group above. */
.meeting-bubble .speech-bubble.bubble-center::after {
    top: -16px;
    bottom: auto;
    left: 50%;
    transform: rotate(180deg);
}

.meeting-bubble .speech-bubble.bubble-center::before {
    top: -8px;
    bottom: auto;
    left: 50%;
    transform: rotate(180deg);
}

/* ============================================
   SVG CHARACTER STYLES
   ============================================ */
.character-svg {
    display: block;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 3px 0 rgba(62, 35, 17, 0.45))
        drop-shadow(2px 0 0 rgba(0, 0, 0, 0.2));
}

/* transform-box: fill-box for SVG element transforms */
.leg-left, .leg-right,
.arm-left, .arm-right,
.body-group,
.ovi-tail,
.ovi-leg-fl, .ovi-leg-fr,
.ovi-leg-bl, .ovi-leg-br {
    transform-box: fill-box;
    transform-origin: top center;
}

.ovi-tail {
    transform-origin: left center;
}

/* --- Scroll-driven transforms (story panels only) --- */
.scroll-zone .leg-left {
    transform:
        translate(var(--leg-left-x, 0px), var(--leg-left-y, 0px))
        rotate(var(--leg-rotation, 0deg));
}
.scroll-zone .leg-right {
    transform:
        translate(var(--leg-right-x, 0px), var(--leg-right-y, 0px))
        rotate(calc(var(--leg-rotation, 0deg) * -1));
}
.scroll-zone .arm-left {
    transform:
        translate(var(--arm-left-x, 0px), var(--arm-left-y, 0px))
        rotate(calc(var(--arm-rotation, 0deg) * -1));
}
.scroll-zone .arm-right {
    transform:
        translate(var(--arm-right-x, 0px), var(--arm-right-y, 0px))
        rotate(var(--arm-rotation, 0deg));
}
.scroll-zone .body-group {
    transform: none;
}
.scroll-zone .character-svg { transform: translateY(var(--jump-y, 0px)); }
.scroll-zone:not(.scroll-zone-meeting) .character-container {
    transform:
        translateX(var(--walk-shift, 0px))
        translateY(var(--panel-char-y, 0px));
}
.scroll-zone:not(.scroll-zone-meeting) .story-panel.panel-reverse .character-container {
    transform:
        translateX(calc(var(--walk-shift, 0px) * -1))
        translateY(var(--panel-char-y, 0px));
}

#panelA .character-container,
#panelB .character-container {
    --panel-char-y: 180px;
}

#panelB .character-container {
    --panel-char-y: 180px;
}

#panelA .character-svg,
#panelB .character-svg,
#panelC .char-laura .character-svg,
#panelC .char-andrea .character-svg {
    animation: humanScrollBreathe 1.9s steps(4) infinite;
}

/* --- Ovi always-on animations with stepped timing --- */
.ovi-tail {
    animation: oviTailWag 0.4s steps(4) infinite alternate;
}

@keyframes oviTailWag {
    from { transform: rotate(-18deg); }
    to   { transform: rotate(18deg); }
}

/* Hero Ovi idle breathing bob */
.language-selector .body-group {
    animation: oviBreathe 2s steps(4) infinite;
}

/* Laura + Andrea use whole-sprite breathing animation above */
.language-selector .lang-character:not([data-lang="en"]) .body-group {
    animation: none;
}

@keyframes oviBreathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Hero Ovi subtle idle leg sway */
.language-selector .ovi-leg-fl,
.language-selector .ovi-leg-br {
    animation: oviIdleLegA 1.2s steps(4) infinite alternate;
}

.language-selector .ovi-leg-fr,
.language-selector .ovi-leg-bl {
    animation: oviIdleLegB 1.2s steps(4) infinite alternate;
}

@keyframes oviIdleLegA {
    from { transform: rotate(-3deg); }
    to   { transform: rotate(3deg); }
}

@keyframes oviIdleLegB {
    from { transform: rotate(3deg); }
    to   { transform: rotate(-3deg); }
}

@keyframes humanBreathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.5px); }
}

@keyframes humanSelectorBreathe {
    0%, 100% {
        transform: translateX(var(--selector-char-offset, 0px)) translateY(0);
    }
    50% {
        transform: translateX(var(--selector-char-offset, 0px)) translateY(-2px);
    }
}

@keyframes humanScrollBreathe {
    0%, 100% { transform: translateY(var(--jump-y, 0px)); }
    50%      { transform: translateY(calc(var(--jump-y, 0px) - 1.5px)); }
}

@keyframes pixelHeartPump {
    0%, 100% {
        transform:
            translateX(calc(-50% + 1.5px))
            translateY(calc((1 - var(--ovi-opacity, 0)) * 8px))
            scale(calc(0.92 + (var(--ovi-opacity, 0) * 0.3)));
    }
    50% {
        transform:
            translateX(calc(-50% + 1.5px))
            translateY(calc((1 - var(--ovi-opacity, 0)) * 8px - 1px))
            scale(calc(1.06 + (var(--ovi-opacity, 0) * 0.4)));
    }
}

@keyframes pixelHeartFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -2px; }
}

/* ============================================
   THE VENUE SECTION
   ============================================ */
.venue {
    padding: var(--section-padding) 24px;
    background: linear-gradient(180deg, #4a321f 0%, #312115 100%);
}

.venue-cards {
    max-width: var(--container-width);
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.venue-card {
    background: var(--color-bg-alt);
    border: var(--pixel-border);
    padding: 36px 24px;
    text-align: center;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    border-radius: 0;
}

.venue-card:hover {
    transform: translate(-2px, -2px);
    border-color: var(--color-primary);
    box-shadow: 4px 4px 0px var(--color-primary);
}

.venue-card .card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: var(--color-accent);
}

.venue-card .card-icon svg {
    width: 100%;
    height: 100%;
}

.venue-card h3 {
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    color: var(--color-primary);
    margin-bottom: 16px;
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.venue-card .card-main {
    font-family: var(--font-pixel);
    font-size: 0.64rem;
    color: var(--color-highlight);
    margin-bottom: 12px;
    text-shadow: 0 0 4px var(--color-highlight);
}

.venue-card .card-sub {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: 6px;
    line-height: 2.2;
}

/* Map placeholder */
.map-container {
    max-width: var(--container-width);
    margin: 0 auto 60px;
    border: var(--pixel-border);
    overflow: hidden;
    background: var(--color-bg-alt);
    border-radius: 0;
}

.map-container iframe {
    display: block;
}

/* Countdown */
.countdown {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}

.countdown h3 {
    font-family: var(--font-pixel);
    font-size: clamp(0.5rem, 2vw, 0.7rem);
    color: var(--color-primary);
    margin-bottom: 32px;
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 40px);
    flex-wrap: wrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.countdown-number {
    font-family: var(--font-pixel);
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    font-weight: 400;
    color: var(--color-highlight);
    background: var(--color-bg-alt);
    border: var(--pixel-border);
    width: clamp(86px, 18vw, 124px);
    height: clamp(78px, 17vw, 112px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    text-shadow:
        0 0 10px var(--color-highlight),
        0 0 20px var(--color-highlight);
    box-shadow:
        inset 0 0 20px rgba(255, 215, 0, 0.1),
        0 0 10px rgba(0, 255, 255, 0.2);
}

.countdown-label {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    color: var(--color-accent-text);
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.72),
        0 0 4px rgba(11, 97, 119, 0.45);
}

/* ============================================
   TRANSPORTATION & ACCOMMODATION SECTION
   ============================================ */
.transport {
    padding: var(--section-padding) 24px;
    background: linear-gradient(180deg, #3a2a1b 0%, #2d1f13 100%);
}

.transport-grid {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.transport-card {
    background: var(--color-bg);
    border: var(--pixel-border);
    padding: 28px 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
    border-radius: 0;
}

.transport-card:hover {
    transform: translate(-2px, -2px);
    border-color: var(--color-primary);
    box-shadow: 4px 4px 0px var(--color-primary);
}

.transport-card .card-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--color-accent);
}

.transport-card .card-icon svg {
    width: 100%;
    height: 100%;
}

.transport-card .card-content h3 {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--color-primary);
    margin-bottom: 12px;
    text-shadow:
        2px 2px 0 #5a3519,
        4px 4px 0 #2d190c;
}

.transport-card .card-content p {
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    line-height: 2.4;
    color: var(--color-text);
    opacity: 0.8;
}

.transport-card .transport-links {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transport-card .transport-links a {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-pixel);
    font-size: 0.48rem;
    line-height: 1.8;
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    opacity: 0.95;
}

.transport-card .transport-links a:hover,
.transport-card .transport-links a:focus-visible {
    color: var(--color-highlight);
    outline: 2px solid rgba(242, 201, 106, 0.45);
    outline-offset: 3px;
}

@media (min-width: 1100px) {
    .transport-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .transport-grid > .transport-card {
        grid-column: span 2;
        min-width: 0;
    }

    /* When there are 5 cards, center the last two on the second row (3 + 2 layout). */
    .transport-grid > .transport-card:nth-child(4):nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    .transport-grid > .transport-card:nth-child(5):last-child {
        grid-column: 4 / span 2;
    }
}

/* ============================================
   RSVP SECTION
   ============================================ */
.rsvp {
    padding: var(--section-padding) 24px;
    background: linear-gradient(180deg, #2d1f13 0%, #1f160f 100%);
}

.rsvp-container {
    max-width: 600px;
    margin: 0 auto;
}

.rsvp-form {
    background: var(--color-bg-alt);
    border: var(--pixel-border-pink);
    padding: 48px 32px;
    border-radius: 0;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-primary);
    text-shadow: 0 0 4px var(--color-primary);
}

.required-mark {
    color: var(--color-highlight);
    font-size: 0.72rem;
    text-shadow: 0 0 4px rgba(242, 201, 106, 0.4);
    vertical-align: middle;
}

.form-required-hint {
    margin-bottom: 18px;
    color: var(--color-sand-light);
    font-size: 0.56rem;
    opacity: 0.82;
    line-height: 1.6;
    text-shadow: 0 0 4px rgba(241, 207, 148, 0.35);
}

.form-feedback {
    display: none;
    margin-bottom: 18px;
    color: #ff8d94;
    font-size: 0.56rem;
    line-height: 1.6;
    text-shadow: 0 0 6px rgba(255, 141, 148, 0.4);
}

.form-feedback.is-visible {
    display: block;
}

.form-group--error label,
.form-group--error select,
.form-group--error textarea,
.form-group--error input:not([type="radio"]) {
    color: #ffd0d4;
}

.form-group--error input[type="text"],
.form-group--error input[type="email"],
.form-group--error select,
.form-group--error textarea {
    border-color: #ff8d94;
    box-shadow: 0 0 0 2px rgba(255, 141, 148, 0.25);
}

.form-group--error .radio-label {
    border-color: rgba(255, 141, 148, 0.65);
    box-shadow: 0 0 0 2px rgba(255, 141, 148, 0.2);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    color: var(--color-text);
    border: 2px solid var(--color-accent);
    border-radius: 0;
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 2;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #555;
    font-family: var(--font-pixel);
    font-size: 0.52rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.3), 0 0 20px rgba(255, 107, 157, 0.1);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300ffff'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    padding: 8px 10px;
    border: 2px solid rgba(242, 201, 106, 0.25);
    background: rgba(31, 22, 15, 0.45);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    max-width: 100%;
}

.radio-label input {
    display: none;
}

.radio-custom {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 3px solid var(--color-highlight);
    border-radius: 0;
    position: relative;
    transition: all var(--transition-fast);
    background: #1b120b;
    box-shadow: inset 0 0 0 2px rgba(78, 194, 207, 0.18);
    margin-top: 1px;
}

.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px #0f3740;
    border-radius: 0;
    transition: transform var(--transition-fast);
}

.radio-label:hover {
    border-color: rgba(242, 201, 106, 0.65);
    background: rgba(31, 22, 15, 0.62);
}

.radio-text {
    display: block;
    line-height: 1.9;
    opacity: 0.72;
    color: rgba(244, 232, 208, 0.9);
}

.radio-label input:checked + .radio-custom {
    border-color: var(--color-accent);
    box-shadow:
        0 0 0 2px rgba(244, 232, 208, 0.5),
        0 0 10px rgba(78, 194, 207, 0.65);
}

.radio-label input:checked + .radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.radio-label input:checked + .radio-custom + .radio-text {
    color: #fff6df;
    opacity: 1;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(242, 201, 106, 0.75);
}

.radio-label:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(26, 52, 58, 0.35);
    box-shadow: 0 0 0 2px rgba(78, 194, 207, 0.24);
}

/* Submit button */
.submit-btn {
    width: 100%;
    padding: 18px 32px;
    background: var(--color-primary);
    border: 4px solid var(--color-white);
    color: var(--color-white);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    font-weight: 400;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.submit-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary), inset 0 0 15px rgba(255, 107, 157, 0.1);
}

.submit-btn span {
    position: relative;
    z-index: 1;
}

.submit-btn .btn-loading,
.submit-btn .btn-success {
    display: none;
}

.submit-btn.loading .btn-text { display: none; }
.submit-btn.loading .btn-loading { display: inline-flex; align-items: center; gap: 8px; }

.loading-dots span {
    animation: loadingDots 1.4s steps(3) infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.submit-btn.success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
    text-shadow: none;
    box-shadow: 0 0 20px var(--color-success);
}
.submit-btn.success .btn-text { display: none; }
.submit-btn.success .btn-success { display: inline; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: 60px 24px 40px;
    background: linear-gradient(180deg, #332314 0%, #281b10 100%);
    text-align: center;
    border-top: var(--pixel-border);
}

.footer-content {
    max-width: var(--container-width);
    margin: 0 auto;
}

.footer-gift-note {
    font-family: var(--font-pixel);
    font-size: 0.44rem;
    color: #f7e5c7;
    opacity: 0.88;
    line-height: 2;
    margin: 0 auto 22px;
    text-align: center;
    max-width: 860px;
    padding: 16px 16px;
    border: 2px dashed rgba(78, 194, 207, 0.36);
    background: rgba(18, 56, 68, 0.24);
    box-shadow: inset 0 0 0 2px rgba(242, 201, 106, 0.08);
}

.footer-gift-title {
    font-size: 0.48rem;
    color: var(--color-accent-text);
    margin-bottom: 8px;
}

.footer-gift-text {
    margin: 0 auto 8px;
    color: rgba(244, 232, 208, 0.82);
}

.footer-gift-details {
    margin: 10px auto;
    display: inline-block;
    text-align: left;
    border-left: 3px solid rgba(242, 201, 106, 0.52);
    padding-left: 8px;
}

.footer-gift-line {
    font-size: 0.4rem;
    line-height: 1.8;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.footer-gift-line span:first-child {
    color: var(--color-accent-text);
}

.footer-gift-line span:last-child {
    color: #fff6df;
}

.footer-gift-footnote {
    margin-top: 8px;
    color: rgba(244, 232, 208, 0.72);
    font-size: 0.36rem;
    line-height: 1.9;
}

.hashtag {
    font-family: var(--font-pixel);
    font-size: clamp(0.68rem, 2.8vw, 1.15rem);
    color: var(--color-primary);
    margin-bottom: 24px;
    text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-pixel);
    font-size: 0.52rem;
    padding: 8px 14px;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
    border-radius: 0;
}

.nav-link:hover {
    color: var(--color-accent-text);
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.72),
        0 0 6px rgba(11, 97, 119, 0.4);
}

.footer-contact {
    font-family: var(--font-pixel);
    font-size: 0.46rem;
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: 24px;
    line-height: 2.4;
}

.footer-contact a {
    color: var(--color-accent-text);
    text-decoration: none;
    transition: text-shadow var(--transition-fast);
}

.footer-contact a:hover {
    text-shadow:
        1px 1px 0 rgba(6, 39, 50, 0.75),
        0 0 6px rgba(11, 97, 119, 0.42);
}

.footer-credit {
    font-family: var(--font-pixel);
    font-size: 0.46rem;
    color: var(--color-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 4px var(--color-highlight);
}

.credit-line {
    width: 40px;
    height: 2px;
    background: var(--color-highlight);
    box-shadow: 0 0 4px var(--color-highlight);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll animation classes */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (min-width: 1025px) and (max-width: 1399px) {
    .hero-agave {
        display: block;
    }

    .hero {
        justify-content: flex-start;
        padding-top: 34px;
    }

    .hero-content {
        width: min(100%, 1120px);
        min-height: calc(100vh - 86px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .language-selector {
        margin-top: auto;
        padding-bottom: clamp(30px, 6vh, 58px);
    }
}

@media (min-width: 1400px) {
    :root {
        --section-padding: 116px;
        --container-width: 1360px;
    }

    html {
        font-size: 19px;
    }

    .hero {
        justify-content: flex-start;
        padding-top: 38px;
    }

    .hero-agave {
        display: block;
    }

    .hero-content {
        width: min(100%, 1260px);
        min-height: calc(100vh - 92px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .language-selector {
        margin-top: auto;
        padding-bottom: clamp(38px, 7vh, 74px);
        gap: clamp(28px, 4vw, 64px);
    }

    .lang-character {
        min-width: 124px;
        gap: 16px;
    }

    .language-selector .character-svg {
        width: 84px;
        height: 126px;
    }

    .section-header {
        margin-bottom: 52px;
    }

    .speech-bubble {
        padding: 36px 32px;
    }

    .speech-bubble p {
        line-height: 2.25;
    }

    .meeting-bubble {
        max-width: 640px;
    }
}

@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    .hero {
        min-height: 100svh;
        justify-content: flex-start;
        padding-top: 28px;
    }

    @supports (height: 100dvh) {
        .hero {
            min-height: 100dvh;
        }
    }

    .hero-content {
        width: min(100%, 640px);
        min-height: calc(100svh - 72px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @supports (height: 100dvh) {
        .hero-content {
            min-height: calc(100dvh - 72px);
        }
    }

    .scroll-indicator {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .story .section-header {
        top: env(safe-area-inset-top, 0px);
        padding: 20px 16px 14px;
        margin-bottom: 14px;
    }

    .venue .section-header,
    .transport .section-header,
    .rsvp .section-header {
        top: env(safe-area-inset-top, 0px);
        padding: 20px 16px 14px;
        margin-bottom: 14px;
    }

    .story-panel {
        flex-direction: column !important;
        justify-content: center;
        text-align: center;
        height: 100svh;
    }

    .story-panel.panel-meeting {
        --meeting-y-offset: clamp(210px, 26svh, 300px);
    }

    .meeting-cyclists {
        top: 0;
        width: 100%;
        height: 100%;
    }

    .meeting-cyclist {
        --rider-scale: 1.05;
        --wheel-size: 26px;
        --rear-wheel-x: 4px;
        --front-wheel-x: 52px;
        --frame-x: 20px;
        --frame-y: 16px;
        --frame-width: 35px;
        width: 84px;
        height: 58px;
    }

    .meeting-cyclist .bike-rider {
        left: 28px;
        bottom: 20px;
        width: 28px;
        height: 31px;
    }

    .meeting-cyclist .city-basket {
        left: calc(var(--front-wheel-x) + 16px);
        width: 9px;
        height: 9px;
    }

    .scroll-zone-meeting::before {
        opacity: 0.1;
        background-size: 200px 190px, 280px 240px;
    }

    .scroll-zone-meeting::after {
        opacity: 0.03;
        background-size: 170px 190px;
    }

    .story-scenery-meeting::before {
        top: 10.7%;
        height: 1.3%;
    }

    .story-scenery-meeting .meeting-canal-row {
        top: -14.2%;
        width: 100%;
        height: 37%;
    }

    .story-scenery-meeting .meeting-canal-water {
        top: 12%;
        height: 5.5%;
    }

    .story-scenery-meeting .meeting-booking-office {
        right: 0.8%;
        top: 35%;
        width: clamp(150px, 21vw, 240px);
    }

    .story-scenery-meeting .meeting-zaandam-hotel {
        left: 0%;
        top: 45.5%;
        width: clamp(118px, 16vw, 172px);
    }

    .story-scenery-meeting .meeting-canal-boat {
        top: 13.4%;
        left: 59%;
        width: clamp(100px, 24vw, 152px);
        height: clamp(12px, 2.4vh, 18px);
    }

    @supports (height: 100dvh) {
        .story-panel {
            height: 100dvh;
        }
    }

    .story-scenery .story-palm {
        height: 66px;
        width: 8px;
        opacity: 0.4;
    }

    .story-scenery .story-palm-1 {
        left: 16%;
        top: 18%;
    }

    .story-scenery .story-palm-2 {
        left: 24%;
        top: 72%;
    }

    .story-scenery .story-palm-3 {
        left: 32%;
        top: 8%;
    }

    .story-scenery .story-palm-4 {
        left: 40%;
        top: 58%;
    }

    .story-scenery .story-palm-5 {
        left: 58%;
        top: 30%;
    }

    .story-scenery .story-palm-6 {
        left: 66%;
        top: 84%;
    }

    .story-scenery .story-palm-7 {
        left: 74%;
        top: 44%;
    }

    .story-scenery .story-palm-8 {
        left: 82%;
        top: 92%;
    }

    .story-scenery .story-agave {
        width: 3px;
        height: 3px;
        opacity: 0.34;
    }

    .story-scenery .story-agave-1 {
        left: 10%;
        top: 88%;
        transform: scale(1) rotate(-4deg);
    }

    .story-scenery .story-agave-2 {
        left: 28%;
        top: 62%;
        transform: scale(0.76) rotate(7deg);
    }

    .story-scenery .story-agave-3 {
        left: 74%;
        top: 76%;
        transform: scale(0.92) rotate(-6deg);
    }

    .story-scenery .story-agave-4 {
        left: 86%;
        top: 90%;
        transform: scale(0.74) rotate(4deg);
    }

    .story-scenery .story-agave-5 {
        left: 18%;
        top: 92%;
        transform: scale(0.66) rotate(-8deg);
        opacity: 0.26;
    }

    .story-scenery .story-agave-6 {
        left: 36%;
        top: 86%;
        transform: scale(0.82) rotate(9deg);
        opacity: 0.31;
    }

    .story-scenery .story-agave-7 {
        left: 60%;
        top: 72%;
        transform: scale(0.72) rotate(-5deg);
        opacity: 0.24;
    }

    .story-scenery .story-agave-8 {
        left: 82%;
        top: 84%;
        transform: scale(0.84) rotate(6deg);
        opacity: 0.33;
    }

    .story-panel .character-container {
        flex: 0 0 auto;
    }

    #panelA .character-container,
    #panelB .character-container {
        --panel-char-y: 140px;
    }

    #panelB .character-container {
        --panel-char-y: 140px;
    }

    .story-scenery-laura::before {
        top: -5svh;
        width: 134vw;
        height: 28svh;
        opacity: 0.5;
    }

    .story-scenery-laura::after {
        top: 5svh;
        width: 140vw;
        height: 32svh;
        opacity: 0.66;
    }

    .story-scenery-laura .laura-palm {
        width: 68px;
        height: 156px;
        opacity: 0.44;
    }

    .story-scenery-laura .laura-agave {
        width: 52px;
        height: 34px;
        opacity: 0.44;
    }

    .story-scenery-laura .laura-agave-pita {
        width: 62px;
        height: 40px;
        opacity: 0.48;
    }

    .story-scenery-laura .laura-agave-sprout {
        width: 72px;
        height: 188px;
        opacity: 0.5;
    }

    .story-scenery-laura .story-palm-4 {
        left: 8%;
        top: 38%;
        transform: scale(0.7);
    }

    .story-scenery-laura .story-palm-5 {
        left: 21%;
        top: 45%;
        transform: scale(0.78);
    }

    .story-scenery-laura .story-palm-6 {
        left: 33%;
        top: 52%;
        transform: scale(0.66);
    }

    .story-scenery-laura .story-agave-1 {
        left: 12%;
        top: 48%;
        transform: scale(0.82) rotate(-6deg);
    }

    .story-scenery-laura .story-agave-2 {
        left: 25%;
        top: 52%;
        transform: scale(0.68) rotate(7deg);
    }

    .story-scenery-laura .story-agave-3 {
        left: 35%;
        top: 57%;
        transform: scale(0.74) rotate(-5deg);
    }

    .story-scenery-laura .story-western-set-1 {
        left: auto;
        right: 0;
        top: 72%;
        width: 82vw;
        height: auto;
        max-width: 580px;
        opacity: 0.94;
    }

    .story-scenery-laura .story-western-set-3 {
        left: auto;
        right: -8%;
        top: 73%;
        width: 98vw;
        height: auto;
        max-width: 760px;
        opacity: 0.9;
    }

    .story-scenery-laura .story-western-set-2 {
        left: auto;
        right: 8%;
        top: 90%;
        width: min(46vw, 240px);
        height: min(9svh, 72px);
        opacity: 0.68;
    }

    .story-scenery-laura .story-analog-camera-1 {
        right: 18%;
        left: auto;
        top: 63%;
        transform: rotate(8deg) scale(0.84);
        opacity: 0.9;
    }

    .story-scenery-laura .story-tomato-plants-1 {
        right: 27%;
        top: 44%;
        width: min(56vw, 250px);
        height: 128px;
        transform: rotate(-2deg) scale(0.9);
    }

    .story-scenery-laura .story-tomato-plants-2 {
        right: 20%;
        top: 47%;
        width: min(50vw, 220px);
        height: 114px;
        transform: rotate(2deg) scale(0.8);
        opacity: 0.84;
    }

    .story-scenery-laura .story-tomato-plants-3 {
        right: 35%;
        top: 50%;
        height: 102px;
        transform: rotate(-4deg) scale(0.74);
    }

    .story-scenery-laura .story-flight-ticket-1 {
        right: 24%;
        top: 95%;
        transform: rotate(-8deg) scale(1.02);
    }

    .story-scenery-andrea .andrea-range-calabria {
        top: 2%;
        height: 18%;
    }

    .story-scenery-andrea .andrea-strait {
        top: 19%;
        height: 13%;
    }

    .story-scenery-andrea .andrea-strait::before {
        bottom: -18px;
        height: 60px;
        background-size: auto 60px;
    }

    .story-scenery-andrea .andrea-strait::after {
        content: none;
    }

    .story-scenery-andrea .andrea-ferry {
        width: min(40vw, 300px);
    }

    .story-scenery-andrea .andrea-ferry-1 {
        left: 66%;
        top: 22.4%;
    }

    .story-scenery-andrea .andrea-madonnina {
        right: 1.5%;
        top: 23%;
        width: min(14vw, 126px);
    }

    .story-scenery-laura .laura-caramelo {
        left: 50%;
        top: 43%;
        width: min(42vw, 388px);
    }

    .story-scenery-andrea .andrea-guy {
        left: 10.4%;
        top: 46.8%;
        right: auto;
        width: min(13vw, 116px);
    }

    .story-scenery-andrea .andrea-interviewer {
        left: 3.4%;
        top: 48%;
        right: auto;
        width: min(12vw, 106px);
    }

    .story-scenery-andrea .andrea-duomo {
        left: 24%;
        top: 62%;
        width: min(25vw, 246px);
    }

    .story-scenery-andrea .andrea-negresco {
        left: 43.6%;
        top: 64.8%;
        width: min(37vw, 370px);
    }

    .story-scenery-andrea .andrea-willis {
        left: 16.4%;
        top: 73.6%;
        width: min(9vw, 112px);
    }

    .story-scenery-andrea .andrea-french {
        left: 24%;
        top: 89.8%;
        width: min(10vw, 122px);
    }

    .story-scenery-andrea .andrea-land {
        top: 44%;
        height: 53%;
    }

    .story-scenery-andrea .andrea-path {
        top: 69%;
        left: 44%;
        width: 45%;
        height: 30%;
    }

    #panelB .bubble-container {
        transform: translateY(124px) !important;
    }

    #panelA .bubble-container,
    #panelB .bubble-container {
        transform: translateY(124px);
    }

    .speech-bubble::after,
    .speech-bubble::before {
        left: 50%;
        transform: translateX(-50%);
    }

    /* In mobile stacked layout, Laura/Andrea individual bubbles should point up to the characters. */
    #panelA .speech-bubble::after,
    #panelB .speech-bubble::after {
        top: -16px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(180deg);
        border-left: none;
        border-right: var(--pixel-border);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    #panelA .speech-bubble::before,
    #panelB .speech-bubble::before {
        top: -8px;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(180deg);
        border-left: none;
        border-right: var(--pixel-border);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .meeting-characters .char-laura {
        --laura-start: -100px;
    }

    .meeting-characters .char-andrea {
        --andrea-start: 100px;
    }

    .meeting-heart {
        left: 50%;
        bottom: 118px;
    }

    .venue-cards {
        grid-template-columns: 1fr;
    }

    .transport-grid {
        grid-template-columns: 1fr;
    }

    .rsvp-form {
        padding: 32px 16px;
    }

    .language-selector {
        margin-top: auto;
        padding-bottom: 20px;
        position: relative;
        bottom: 12px;
        gap: clamp(8px, 3vw, 18px);
        flex-wrap: nowrap;
    }

    .lang-character {
        min-width: 86px;
        padding: 6px 4px;
        gap: 10px;
    }

    .language-selector .character-svg {
        width: 64px;
        height: 96px;
    }

    .lang-label {
        font-size: 0.48rem;
        padding: 2px 4px;
    }

    .palm {
        height: 96px;
        width: 8px;
        bottom: 72px;
    }

    .palm::before,
    .palm::after {
        width: 8px;
        height: 5px;
    }

    .gull {
        width: 20px;
        height: 7px;
        opacity: 0.74;
    }

    .gull::before,
    .gull::after {
        width: 10px;
        height: 5px;
    }

    .wave-field {
        inset: 49% 2% 28% 2%;
    }

    .wave-splash {
        height: 1px;
    }

    .hero-ovi-paddle {
        width: 104px;
        height: 44px;
        top: 55%;
    }

    .hero-ovi-paddle .paddle-chaser {
        width: 44px;
        height: 26px;
        top: 15px;
    }

    .hero-andrea-wingfoil {
        width: 124px;
        height: 58px;
        top: 54%;
    }

    .hero-laura-wingfoil {
        width: 104px;
        height: 52px;
        top: 55%;
    }

    .radio-group {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .hero-names {
        font-size: clamp(3rem, 9vw, 2.35rem);
    }

    .hero {
        padding-top: 22px;
    }

    .hero-content {
        min-height: calc(100svh - 60px);
    }

    @supports (height: 100dvh) {
        .hero-content {
            min-height: calc(100dvh - 60px);
        }
    }

    .scroll-indicator {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .story .section-header {
        padding: 16px 12px 10px;
        margin-bottom: 10px;
    }

    .venue .section-header,
    .transport .section-header,
    .rsvp .section-header {
        padding: 16px 12px 10px;
        margin-bottom: 10px;
    }

    .story-panel.panel-meeting {
        --meeting-y-offset: clamp(220px, 30svh, 330px);
    }

    .meeting-cyclists {
        top: 0;
        width: 100%;
        height: 100%;
    }

    .meeting-cyclist {
        --rider-scale: 1;
        --wheel-size: 22px;
        --rear-wheel-x: 3px;
        --front-wheel-x: 46px;
        --frame-x: 18px;
        --frame-y: 14px;
        --frame-width: 30px;
        width: 74px;
        height: 52px;
    }

    .meeting-cyclist .bike-rider {
        left: 24px;
        bottom: 17px;
        width: 25px;
        height: 27px;
    }

    .meeting-cyclist .city-basket {
        left: calc(var(--front-wheel-x) + 13px);
        width: 8px;
        height: 8px;
    }

    .meeting-cyclist.cyclist-back {
        opacity: 0.76;
    }

    .scroll-zone-meeting::before {
        opacity: 0.085;
        background-size: 150px 150px, 210px 200px;
    }

    .scroll-zone-meeting::after {
        opacity: 0.022;
        background-size: 132px 150px;
    }

    .story-scenery-meeting::before {
        top: 8.2%;
        height: 0.5%;
    }

    .story-scenery-meeting .meeting-canal-row {
        top: -15.8%;
        width: 200%;
        height: 39%;
    }

    .story-scenery-meeting .meeting-canal-water {
        top: 8.5%;
        height: 5%;
    }

    .story-scenery-meeting .meeting-booking-office {
        right: -2%;
        top: 35%;
        width: clamp(120px, 40vw, 188px);
        opacity: 0.92;
    }

    .story-scenery-meeting .meeting-zaandam-hotel {
        left: -8%;
        top: 46%;
        width: clamp(98px, 36vw, 150px);
        opacity: 0.95;
    }

    .story-scenery-meeting .meeting-canal-boat {
        top: 11.1%;
        left: 63%;
        width: clamp(82px, 30vw, 120px);
        height: clamp(10px, 1.9vh, 15px);
    }

    #panelA .character-container,
    #panelB .character-container {
        --panel-char-y: 170px;
    }

    #panelB .character-container {
        --panel-char-y: 170px;
    }

    .story-scenery-laura::before {
        top: -3svh;
        height: 24svh;
        opacity: 0.44;
    }

    .story-scenery-laura::after {
        top: 6svh;
        height: 28svh;
        opacity: 0.58;
    }

    .story-scenery-laura .laura-palm {
        width: 58px;
        height: 138px;
        opacity: 0.4;
    }

    .story-scenery-laura .laura-agave {
        width: 46px;
        height: 30px;
        opacity: 0.4;
    }

    .story-scenery-laura .laura-agave-pita {
        width: 54px;
        height: 34px;
        opacity: 0.44;
    }

    .story-scenery-laura .laura-agave-sprout {
        width: 64px;
        height: 170px;
        opacity: 0.46;
    }

    .story-scenery-laura .story-palm-4 {
        left: 6%;
        top: 40%;
        transform: scale(0.62);
    }

    .story-scenery-laura .story-palm-5 {
        left: 18%;
        top: 47%;
        transform: scale(0.7);
    }

    .story-scenery-laura .story-palm-6 {
        left: 29%;
        top: 54%;
        transform: scale(0.58);
        opacity: 0.28;
    }

    .story-scenery-laura .story-agave-1 {
        left: 10%;
        top: 49%;
        transform: scale(0.74) rotate(-6deg);
    }

    .story-scenery-laura .story-agave-2 {
        left: 22%;
        top: 53%;
        transform: scale(0.62) rotate(7deg);
    }

    .story-scenery-laura .story-agave-3 {
        left: 31%;
        top: 58%;
        transform: scale(0.66) rotate(-5deg);
    }

    .story-scenery-laura .story-western-set-1 {
        left: auto;
        right: 0;
        top: 74%;
        width: 84vw;
        height: auto;
        max-width: 460px;
        opacity: 0.92;
    }

    .story-scenery-laura .story-western-set-3 {
        left: auto;
        right: -10%;
        top: 76%;
        width: 104vw;
        height: auto;
        max-width: 620px;
        opacity: 0.86;
    }

    .story-scenery-laura .story-western-set-2 {
        left: auto;
        right: 6%;
        top: 92%;
        width: min(48vw, 200px);
        height: min(8svh, 58px);
        opacity: 0.58;
    }

    .story-scenery-laura .story-analog-camera-1 {
        right: 16%;
        left: auto;
        top: 61%;
        transform: rotate(8deg) scale(0.7);
        opacity: 0.86;
    }

    .story-scenery-laura .story-tomato-plants-1 {
        right: 6%;
        top: 24%;
        width: min(60vw, 220px);
        height: 106px;
        transform: rotate(-2deg) scale(0.76);
        opacity: 0.96;
    }

    .story-scenery-laura .story-tomato-plants-2 {
        right: 0%;
        top: 27%;
        width: min(54vw, 200px);
        height: 94px;
        transform: rotate(2deg) scale(0.72);
        opacity: 0.92;
    }

    .story-scenery-laura .story-tomato-plants-3 {
        right: 16%;
        top: 30%;
        width: min(48vw, 180px);
        height: 84px;
        transform: rotate(-4deg) scale(0.68);
        opacity: 0.88;
    }

    .story-scenery-laura .story-flight-ticket-1 {
        right: 22%;
        top: 96%;
        transform: rotate(-8deg) scale(0.9);
        opacity: 0.92;
    }

    .story-scenery-andrea .andrea-range-calabria {
        top: 3%;
        height: 16%;
    }

    .story-scenery-andrea .andrea-strait {
        top: 18%;
        height: 12%;
    }

    .story-scenery-andrea .andrea-strait::before {
        bottom: -16px;
        height: 54px;
        background-size: auto 54px;
    }

    .story-scenery-andrea .andrea-strait::after {
        content: none;
    }

    .story-scenery-andrea .andrea-ferry {
        width: min(58vw, 270px);
    }

    .story-scenery-andrea .andrea-ferry-1 {
        left: 66%;
        top: 21.8%;
    }

    .story-scenery-andrea .andrea-madonnina {
        right: 1.8%;
        top: 24%;
        width: min(20vw, 116px);
    }

    .story-scenery-laura .laura-caramelo {
        left: 51%;
        top: 42.6%;
        width: min(65vw, 312px);
    }

    .story-scenery-andrea .andrea-guy {
        left: 8.4%;
        top: 48.2%;
        right: auto;
        width: min(17vw, 94px);
    }

    .story-scenery-andrea .andrea-interviewer {
        left: 2.2%;
        top: 50%;
        right: auto;
        width: min(15vw, 84px);
    }

    .story-scenery-andrea .andrea-duomo {
        left: 22.8%;
        top: 62.2%;
        width: min(34vw, 214px);
    }

    .story-scenery-andrea .andrea-negresco {
        left: 31%;
        top: 70.6%;
        width: min(54vw, 298px);
    }

    .story-scenery-andrea .andrea-willis {
        left: 15.4%;
        top: 71.2%;
        width: min(12vw, 102px);
    }

    .story-scenery-andrea .andrea-french {
        left: 22.8%;
        top: 86.2%;
        width: min(14vw, 98px);
    }

    .story-scenery-andrea .andrea-land {
        top: 45%;
        height: 52%;
    }

    .story-scenery-andrea .andrea-path {
        top: 70%;
        left: 41%;
        width: 49%;
        height: 29%;
    }

    #panelB .bubble-container {
        transform: translateY(146px) !important;
    }

    #panelA .bubble-container,
    #panelB .bubble-container {
        transform: translateY(146px);
    }

    .meeting-heart {
        left: 50%;
        bottom: 114px;
    }

    .language-selector {
        gap: 6px;
        margin-top: auto;
        padding-bottom: 14px;
        position: relative;
        bottom: 30px;
        flex-wrap: nowrap;
    }

    .lang-character {
        min-width: 74px;
        padding: 4px 2px;
        gap: 8px;
    }

    .language-selector .character-svg {
        width: 56px;
        height: 84px;
    }

    .lang-label {
        font-size: 0.42rem;
        padding: 1px 3px;
    }

    .countdown-timer {
        gap: 12px;
    }

    .countdown-item {
        width: calc(50% - 6px);
    }

    .speech-bubble {
        padding: 20px 16px;
    }

    .speech-bubble p {
        font-size: 0.46rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .leg-left, .leg-right,
    .arm-left, .arm-right,
    .body-group,
    .ovi-tail,
    .ovi-leg-fl, .ovi-leg-fr,
    .ovi-leg-bl, .ovi-leg-br {
        transform: none !important;
    }

    .meeting-characters .char-laura,
    .meeting-characters .char-andrea {
        transform: translateX(0) !important;
    }

    .meeting-characters .char-ovi {
        opacity: 1 !important;
    }

    .meeting-cyclist {
        animation: none !important;
        transform: translate3d(0, 0, 0) scale(2.2) !important;
    }

    .meeting-cyclist.cyclist-back {
        opacity: 0;
    }

    .meeting-bubble {
        opacity: 1 !important;
    }

    .scroll-zone,
    .scroll-zone-meeting {
        height: auto;
    }

    .story-panel {
        position: relative;
        height: auto;
        min-height: 400px;
    }
}