/* ============================================
   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); }
}

.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;
}

.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);
    }
}

/* 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;
}

/* 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 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 {
    --meeting-y-offset: 76px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: sticky;
    min-height: unset;
}

.meeting-characters {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    width: 100%;
    position: relative;
    transform: translateY(var(--meeting-y-offset, 0px));
}

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

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

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

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

.meeting-heart {
    position: absolute;
    left: 50%;
    bottom: 132px;
    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);
    transform: translateY(var(--meeting-y-offset, 0px));
}

/* 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;
}

#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;
}

/* ============================================
   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);
}

.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;
}

.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(108px, 14svh, 170px);
    }

    @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;
    }

    #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(120px, 16svh, 185px);
    }

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

    #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-bubble {
        opacity: 1 !important;
    }

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

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