/* ==========================================================================
 * Shared background scene: interactive map + events
 * ======================================================================= */

.water-home-scene {
    --water-ripple-opacity: 0.8;
    --events-offset-top: 100vh;
    --home-hero-banner-overlap: 0px;
    position: relative;
    isolation: isolate;
    width: 100%;
    margin-top: calc(var(--home-hero-banner-overlap) * -1);
    padding-top: var(--home-hero-banner-overlap);
    overflow: hidden;
    overflow: clip;
    /* background-color: #f8fbfa; */
}

.water-home-scene__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.water-home-scene__hero-bg,
.water-home-scene__card-bg,
.water-home-scene__ripple-hero,
.water-home-scene__ripple-card {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.water-home-scene__hero-bg,
.water-home-scene__ripple-hero {
    top: 0;
    height: var(--events-offset-top);
}

.water-home-scene__card-bg,
.water-home-scene__ripple-card {
    top: calc(var(--events-offset-top) + 280px);
    /* 背景2往下移動 50px */
    bottom: 0;
}

.water-home-scene__hero-bg img,
.water-home-scene__card-bg img,
.water-home-scene__ripple-hero img,
.water-home-scene__ripple-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* On desktop, keep the hero artwork at its native aspect ratio. The scene
   starts slightly inside the Banner, while equal top padding keeps all map
   and card content in its original document position. */
@media (min-width: 1024px) {
    .water-home-scene {
        --home-hero-banner-overlap: clamp(72px, 8.333vw, 120px);
    }

    .water-home-scene__hero-bg,
    .water-home-scene__ripple-hero {
        height: auto;
        aspect-ratio: 1921 / 1627;
        overflow: visible;
    }

    .water-home-scene__hero-bg img,
    .water-home-scene__ripple-hero img {
        height: auto;
        object-fit: contain;
    }
}

/* The duplicated backgrounds are lightly displaced to create a calm ripple. */
.water-home-scene__ripples {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    mix-blend-mode: normal;
    pointer-events: none;
    transition: opacity 600ms ease;
}

.water-home-scene.is-ripple-ready .water-home-scene__ripples {
    opacity: var(--water-ripple-opacity);
}

.water-home-scene__ripple-hero,
.water-home-scene__ripple-card {
    filter: url('#water-home-ripple-filter');
    will-change: filter;
}

.water-home-scene__filter {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.water-home-scene__ripples,
.water-home-scene__ripples canvas,
.water-home-scene__ripples * {
    pointer-events: none;
}

.water-home-scene__content {
    position: relative;
    z-index: 2;
}

.water-home-scene #water-map-section,
.water-home-scene #events,
.water-home-scene #announcement {
    position: relative;
    z-index: 2;
    background: transparent;
}

@media (max-width: 767px) {
    .water-home-scene {
        --water-ripple-opacity: 0.28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .water-home-scene__ripples,
    .water-home-scene__filter {
        display: none;
    }
}