/* Homepage scroll motion: the hero recedes into the page, then sections reveal once. Loaded only by pages/home. */
@keyframes home-hero-copy-exit { to { transform: translateY(var(--home-hero-copy-shift)); opacity: 0; } }
@keyframes home-hero-visual-exit { to { transform: translateY(var(--home-hero-visual-shift)) scale(.92); opacity: .2; } }
@keyframes home-hero-veil { to { opacity: 1; } }
@keyframes home-reveal { from { opacity: 0; transform: translateY(var(--home-reveal-shift)); } }

/* The veil melts the hero into the surface that follows: the Spotlight night band, or pale indigo without it. */
.home-hero { --home-veil: #f4f5fc; }
main:has(> .home-dmo-spotlight) .home-hero { --home-veil: #0b1626; }
.home-hero::after {
    content: ''; position: absolute; inset: auto 0 0; z-index: 3; height: 50%; pointer-events: none; opacity: 0;
    background: linear-gradient(0deg, var(--home-veil) 0, color-mix(in srgb, var(--home-veil) 70%, #0000) 30%, #0000 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .home-hero {
        --home-hero-copy-shift: -88px; --home-hero-visual-shift: 120px;
        view-timeline: --home-hero block;
        /* Measure from under the sticky header, so the effect starts with the first scroll. */
        view-timeline-inset: var(--iw-header-height, 64px) 0;
    }
    .home-hero :is(.home-hero-content, .iw-city-hero, .travel-service-hero-visual),
    .home-hero::after { animation: 1s linear both; }
    .home-hero .home-hero-content { animation-name: home-hero-copy-exit; }
    .home-hero :is(.iw-city-hero, .travel-service-hero-visual) { animation-name: home-hero-visual-exit; transform-origin: 50% 100%; }
    .home-hero::after { animation-name: home-hero-veil; animation-timing-function: cubic-bezier(.45, 0, .7, .6); }

    @supports (animation-timeline: view()) {
        .home-hero :is(.home-hero-content, .iw-city-hero, .travel-service-hero-visual),
        .home-hero::after { animation-timeline: --home-hero; animation-range: exit-crossing 0% exit-crossing 100%; }
    }
    /* Without scroll timelines, home-scroll.js writes the same progress into a paused delay. */
    @supports not (animation-timeline: view()) {
        .home-hero :is(.home-hero-content, .iw-city-hero, .travel-service-hero-visual),
        .home-hero::after { animation-play-state: paused; animation-delay: calc(var(--home-hero-exit, 0) * -1s); }
    }

    main { --home-reveal-shift: 20px; }
    .home-reveal:not(.is-revealed) { opacity: 0; }
    .home-reveal:not(.is-revealed):focus-within { opacity: 1; }
    /* Backwards fill only, so hover transforms on cards work as soon as the reveal ends. */
    .home-reveal.is-revealed { animation: home-reveal .7s cubic-bezier(.2, .7, .2, 1) var(--home-reveal-delay, 0ms) backwards; }

    @media (max-width: 991px) {
        .home-hero { --home-hero-copy-shift: -48px; --home-hero-visual-shift: 64px; }
        main { --home-reveal-shift: 14px; }
    }
}

/* Page chapters: sections are numbered in page order (styled in home-editorial.css), and the compact dock carries
   segmented progress coloured like the hero's chapter bar. */
main { counter-reset: home-chapter; }
main > :is(.home-dmo-spotlight,.home-featured-section,.home-travel-services-section,.home-recommendations-section,.home-categories-section) { counter-increment: home-chapter; }
.home-discovery-section--sticky .home-discovery-card { position: relative; }
.home-chapter-progress { position: absolute; inset-inline: 20px; bottom: 3px; display: flex; gap: 4px; height: 2px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.home-discovery-section--sticky.is-compact .home-chapter-progress { opacity: 1; }
.home-chapter-progress i { position: relative; flex: 1; overflow: hidden; border-radius: 2px; }
.home-chapter-progress i::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--fill, 0));
    background: linear-gradient(90deg, #ff8990, #ffc0a8);
}
[dir="rtl"] .home-chapter-progress i::after { transform-origin: right; }
/* Recommendations and categories open on the map, so the entry points at it while they are in view. */
.home-discovery-section--sticky.is-compact.is-map-context .location-map-btn { color: var(--dock-map, #19978c); background: color-mix(in srgb, var(--dock-map, #19978c) 12%, #0000); }
@media (prefers-reduced-motion: no-preference) {
    .home-discovery-section--sticky.is-compact.is-map-context .location-map-btn .home-near-map { animation: home-near-map-lift .65s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
    .home-chapter-progress { transition: none; }
}

/* Photos drift inside their frames as they cross the viewport. Without scroll timelines they simply stay still. */
@keyframes home-photo-drift { from { translate: 0 -6%; } to { translate: 0 6%; } }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Featured photos are left out: the coverflow already moves them. */
        .home-categories-section .category-card-image { view-timeline: --home-photo block; }
        .home-categories-section .category-card-image > img {
            scale: 1.14; animation: home-photo-drift linear both; animation-timeline: --home-photo; animation-range: cover;
        }
    }
}