/* ==========================================================================
   Landing page — scroll reveal, kojitsunagi divider, watermark zone
   ========================================================================== */

/* === Scroll track === */
.scroll-track {
    position: relative;
    background: var(--ktb-indigo-deep);
}

/* === Sticky wrapper: kanji ONLY === */
.scroll-track__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kanji */
.scroll-track__kanji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    will-change: transform, opacity;
    pointer-events: none;
}

.scroll-track__kanji img {
    width: clamp(200px, 28vw, 400px);
    height: auto;
    display: block;
}

/* === Grid: outside sticky, inside scroll-track === */
.scroll-track__grid {
    width: 100%;
    max-width: var(--content-landing-wide);
    margin: 0 auto;
    padding: 0 1rem;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.scroll-track__grid.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Tiles: staggered reveal */
.scroll-track__grid .initiative-tile {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--tile-i, 0) * 100ms);
}

.scroll-track__grid.is-visible .initiative-tile {
    opacity: 1;
    transform: scale(1);
}

/* Graceful degradation */
.scroll-track__grid.no-js {
    position: relative !important;
    opacity: 1;
    pointer-events: auto;
}

.scroll-track__grid.no-js .initiative-tile {
    opacity: 1;
    transform: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-track__kanji {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

    .scroll-track__grid {
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .scroll-track__grid .initiative-tile {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* === MOBILE: kanji scene + normal grid flow === */
@media (max-width: 768px) {
    .scroll-track {
        height: auto;
        overflow: visible;
    }

    .scroll-track__sticky {
        height: 100vh;
        height: 100dvh;
    }

    /* Grid: always visible, normal flow */
    .scroll-track__grid {
        position: relative;
        margin-top: 4rem;
        opacity: 1;
        pointer-events: auto;
    }

    .initiative-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* Mobile tile entrance */
    .scroll-track__grid .initiative-tile {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .scroll-track__grid.is-visible .initiative-tile {
        opacity: 1;
        transform: none;
    }
}

/* === Kojitsunagi lattice divider (between grid and Mission) === */
.zodiac-divider {
    background: var(--ktb-indigo-deep);
}

.zodiac-divider__inner {
    max-width: var(--content-landing-wide);
    margin: 0 auto;
    position: relative;
    height: 140px;
}

/* Pattern URL set via data-pattern-url attribute on .zodiac-divider__pattern */
.zodiac-divider__pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-image: var(--zodiac-pattern-url);
    background-repeat: repeat-x;
    background-size: auto 100%;
    filter: brightness(0) invert(1);
    -webkit-mask-image: linear-gradient(
        to right, transparent 0%, black 10%, black 90%, transparent 100%
    );
    mask-image: linear-gradient(
        to right, transparent 0%, black 10%, black 90%, transparent 100%
    );
    opacity: 0.9;
}

@media (max-width: 768px) {
    .zodiac-divider__inner {
        height: 100px;
    }

    .zodiac-divider__pattern {
        height: 36px;
    }
}

/* === Horse watermark scoped to Mission/About/Contact + footer === */
.watermark-zone {
    position: relative;
    overflow: visible;
}

.watermark-zone__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 300px);
    z-index: 10;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.watermark-zone__dark,
.watermark-zone__light {
    position: absolute;
    width: min(90vh, 800px);
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    filter: blur(0.5px);
}

.watermark-zone__dark {
    opacity: 0.06;
}

.watermark-zone__light {
    opacity: 0.08;
    filter: blur(0.5px) brightness(0) invert(1);
}

@media (max-width: 768px) {
    .watermark-zone__layer {
        height: calc(100% + 200px);
    }

    .watermark-zone__dark,
    .watermark-zone__light {
        width: min(80vh, 500px);
    }
}

@media (prefers-contrast: more) {
    .watermark-zone__layer { display: none !important; }
}