/* ==========================================
   HOME PAGE
========================================== */

.hero {
    position: relative;
    min-height: 108vh;
    overflow: hidden;
    display: grid;
    align-items: center;
    isolation: isolate;
    background: var(--clr-navy);
}

.hero__slides {
    position: absolute;
    inset: 0;
    z-index: -5;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.4s ease, visibility 1.4s ease;
}

.hero__slide.active {
    opacity: 1;
    visibility: visible;
}

.hero__slide picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.08) saturate(1.08) brightness(0.88);
}

.hero__slide.active img {
    animation: cinematicHero 13s ease-out forwards;
}

.hero__grade {
    position: absolute;
    inset: 0;
    z-index: -4;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 156, 45, 0.28), transparent 30%),
        radial-gradient(circle at 18% 84%, rgba(0, 0, 0, 0.65), transparent 38%),
        linear-gradient(180deg, rgba(22, 50, 79, 0.28), rgba(0, 0, 0, 0.62));
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.62) 34%,
            rgba(0, 0, 0, 0.22) 67%,
            rgba(0, 0, 0, 0.46) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.8) 100%
        );
}

.hero__content {
    padding-top: 84px;
    max-width: 1200px;
    color: var(--clr-surface);
}

.hero__eyebrow {
    margin-bottom: var(--space-4);
    color: var(--clr-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-style: italic;
    line-height: 1;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.hero__title {
    max-width: 880px;
    color: var(--clr-surface);
    font-size: clamp(3.8rem, 8.4vw, 8.4rem);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    text-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}

.hero__text {
    max-width: 570px;
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.02rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    animation: revealHero 0.9s ease forwards;
}

.reveal-item:nth-child(1) {
    animation-delay: 0.25s;
}

.reveal-item:nth-child(2) {
    animation-delay: 0.45s;
}

.reveal-item:nth-child(3) {
    animation-delay: 0.65s;
}

.reveal-item:nth-child(4) {
    animation-delay: 0.85s;
}

.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
    color: var(--clr-surface);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-50%);
    animation: revealControls 0.8s ease 1.15s forwards;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.hero__arrow:hover {
    background: rgba(230, 126, 34, 0.25);
    border-color: var(--clr-primary);
    transform: translateY(-50%) scale(1.08);
}

.hero__arrow--left {
    left: var(--space-6);
}

.hero__arrow--right {
    right: var(--space-6);
}

.hero__progress {
    position: absolute;
    left: 50%;
    bottom: var(--space-7);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: min(280px, 70vw);
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
    animation: revealProgress 0.8s ease 1.15s forwards;
}

.hero__count {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.hero__progress-track {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
}

.hero__progress-track i {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--clr-primary);
}

.hero__progress-track i.running {
    animation: fillHeroProgress 6.5s linear forwards;
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-50%);
    animation: revealControls 0.8s ease 1.4s forwards;
}

.hero__scroll i {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, var(--clr-primary), transparent);
    animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes cinematicHero{

    from{
        scale:1.02;
    }

    to{
        scale:1.12;
    }

}

@keyframes revealHero {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealControls {
    to {
        opacity: 1;
    }
}

@keyframes revealProgress {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fillHeroProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes scrollPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scaleY(0.7);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

@media (max-width: 980px) {
    .hero {
        min-height: 100vh;
    }

    .hero__content {
        padding-top: 120px;
    }

    .hero__arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero {
        min-height: 96vh;
    }

    .hero__content {
        padding-top: 110px;
    }

    .hero__title {
        font-size: clamp(3rem, 14vw, 4.8rem);
        letter-spacing: 0.035em;
    }

    .hero__text {
        font-size: 1rem;
    }

    .hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__progress {
        bottom: var(--space-6);
    }

    .hero__scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide.active img,
    .reveal-item,
    .hero__arrow,
    .hero__progress,
    .hero__scroll,
    .hero__scroll i,
    .hero__progress-track i.running {
        animation: none;
    }

    .reveal-item,
    .hero__arrow,
    .hero__progress,
    .hero__scroll {
        opacity: 1;
        transform: none;
    }
}
/* ==========================================
   TRUST SECTION
========================================== */

.section-header {
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.section-kicker {
    margin-bottom: var(--space-2);
    color: var(--clr-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.section-header h2 {
    margin-bottom: var(--space-4);
    font-size: clamp(2.8rem, 5vw, 4.4rem);
}

.section-header p {
    color: var(--clr-text-light);
    font-size: var(--fs-body-lg);
}

.trust {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(212, 160, 23, 0.14), transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(46, 125, 50, 0.08), transparent 28%),
        var(--clr-background);
}

.trust::before {
    content: "ECO";
    position: absolute;
    top: 4%;
    left: 50%;
    color: rgba(31, 41, 51, 0.035);
    font-family: var(--font-heading);
    font-size: clamp(10rem, 22vw, 24rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: translateX(-50%);
    pointer-events: none;
}

.trust__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    z-index: 1;
}

.trust-card {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: var(--space-7) var(--space-5);
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(230, 126, 34, 0.16), transparent 34%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.trust-card:hover {
    transform: translateY(-12px);
    border-color: rgba(230, 126, 34, 0.38);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
}

.trust-card:hover::before {
    opacity: 1;
}

.trust-card__number {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    color: rgba(31, 41, 51, 0.11);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.trust-card__icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-6);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(230, 126, 34, 0.95), rgba(212, 160, 23, 0.95));
    color: var(--clr-surface);
    font-size: 2rem;
    box-shadow:
        0 18px 36px rgba(230, 126, 34, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    transition: transform var(--transition-normal);
}

.trust-card:hover .trust-card__icon {
    transform: rotate(-6deg) scale(1.08);
}

.trust-card h3 {
    position: relative;
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--clr-dark);
    z-index: 1;
}

.trust-card p {
    position: relative;
    color: var(--clr-text-light);
    font-size: 0.96rem;
    line-height: 1.75;
    z-index: 1;
}

.trust-card__line {
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    height: 2px;
    overflow: hidden;
    background: rgba(31, 41, 51, 0.08);
}

.trust-card__line::after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    transition: width var(--transition-normal);
}

.trust-card:hover .trust-card__line::after {
    width: 100%;
}

/* Responsive */

@media (max-width: 1050px) {
    .trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .trust__grid {
        grid-template-columns: 1fr;
    }

    .trust-card {
        min-height: auto;
    }
}
/* ==========================================
   FEATURED DESTINATIONS
========================================== */

.destinations {
    background:
        linear-gradient(180deg, var(--clr-background), rgba(248, 244, 233, 0.92)),
        var(--clr-background);
}

.destinations__header {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
    text-align: left;
}

.destinations__header h2 {
    max-width: 700px;
}

.destinations__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--clr-primary);
    font-weight: 800;
    white-space: nowrap;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.destinations__view-all:hover {
    gap: var(--space-3);
    color: var(--clr-accent);
}

.destinations__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.destination-card {
    min-height: 430px;
}

.destination-card--large {
    grid-column: auto;
}

.destination-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    isolation: isolate;
    box-shadow: var(--shadow-md);
    background: var(--clr-dark);
}

.destination-card img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.05);
    transition: transform 1.2s ease, filter 1.2s ease;
}

.destination-card__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.2) 42%,
            rgba(0, 0, 0, 0.82) 100%
        );
    transition: background var(--transition-normal);
}

.destination-card__content {
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
    color: var(--clr-surface);
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.destination-card__content p {
    margin-bottom: var(--space-2);
    color: var(--clr-accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.destination-card__content h3 {
    margin-bottom: var(--space-2);
    color: var(--clr-surface);
    font-size: clamp(2rem, 3vw, 3rem);
}

.destination-card__content span {
    display: block;
    max-width: 340px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.96rem;
}

.destination-card__content a {
    display: inline-flex;
    margin-top: var(--space-4);
    color: var(--clr-primary);
    font-weight: 800;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal),
        color var(--transition-fast);
}

.destination-card:hover img {
    transform: scale(1.12);
    filter: saturate(1.22) contrast(1.08);
}

.destination-card:hover .destination-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.18) 36%,
            rgba(0, 0, 0, 0.88) 100%
        );
}

.destination-card:hover .destination-card__content {
    transform: translateY(0);
}

.destination-card:hover .destination-card__content a {
    opacity: 1;
    transform: translateY(0);
}

.destination-card__content a:hover {
    color: var(--clr-accent);
}

.destination-card__badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 2;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: rgba(22, 50, 79, 0.88);
    color: var(--clr-surface);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.destination-card--coming img {
    filter: saturate(0.9) contrast(1.02) brightness(0.88);
}

.destination-card--coming:hover .destination-card__badge {
    background: var(--clr-primary);
}

/* Responsive */

@media (max-width: 1050px) {
    .destinations__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 330px;
    }

    .destination-card--large {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .destinations__header {
        align-items: start;
        flex-direction: column;
    }

    .destinations__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 360px;
    }
}
/* ==========================================
   CRAFT YOUR SAFARI
========================================== */

.planner {
    position: relative;
    overflow: hidden;
    padding-block: 9rem 7rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(230,126,34,.16), transparent 28%),
        radial-gradient(circle at 80% 75%, rgba(212,160,23,.12), transparent 30%),
        linear-gradient(180deg, #061f12 0%, #12361f 50%, #061a0f 100%);
    color: var(--clr-surface);
}

.planner__texture {
    position: absolute;
    inset: 0;
    opacity: .1;
    background:
        repeating-radial-gradient(circle at 30% 30%, transparent 0 18px, rgba(255,255,255,.13) 19px 20px, transparent 21px 42px),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 220px 220px, 90px 90px, 90px 90px;
    pointer-events: none;
}

.planner__map {
    position: absolute;
    top: 10%;
    right: 6%;
    color: rgba(212,160,23,.11);
    font-family: var(--font-heading);
    font-size: clamp(5rem, 11vw, 12rem);
    letter-spacing: .18em;
    pointer-events: none;
}

.planner__header {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto var(--space-8);
}

.planner__header .section-kicker {
    color: var(--clr-accent);
}

.planner__header h2 {
    color: var(--clr-surface);
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    line-height: 1.05;
    text-shadow: 0 20px 60px rgba(0,0,0,.42);
}

.planner__header p {
    max-width: 720px;
    margin-inline: auto;
    color: rgba(255,255,255,.78);
    font-size: var(--fs-body-lg);
}

.planner__journey {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
}

.planner__journey::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    border-top: 2px dashed rgba(212,160,23,.65);
    transform: translateY(-50%);
    pointer-events: none;
}

.planner-card {
    position: relative;
    min-height: 260px;
    padding: var(--space-7);
    border: 1px solid rgba(212,160,23,.28);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0,0,0,.24);
    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}

.planner-card:hover {
    transform: translateY(-14px) scale(1.01);
    border-color: rgba(212,160,23,.85);
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
    box-shadow: 0 40px 100px rgba(0,0,0,.34);
}

.planner-card__number {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--clr-accent);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
}

.planner-card__icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-5);
    border: 1px solid rgba(212,160,23,.7);
    border-radius: 50%;
    color: var(--clr-accent);
    font-size: 1.8rem;
    box-shadow: inset 0 0 28px rgba(212,160,23,.1);
    transition: transform var(--transition-normal), background var(--transition-normal);
}

.planner-card:hover .planner-card__icon {
    transform: rotate(-6deg) scale(1.08);
    background: rgba(212,160,23,.12);
}

.planner-card h3 {
    margin-bottom: var(--space-3);
    color: var(--clr-surface);
    font-size: 1.9rem;
    line-height: 1.05;
}

.planner-card p {
    margin-bottom: var(--space-3);
    color: rgba(255,255,255,.8);
}

.planner-card small {
    color: var(--clr-accent);
    font-size: .96rem;
    line-height: 1.65;
}

.planner__cta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: var(--space-9);
}

.planner__cta a {
    position: relative;
    overflow: hidden;
    width: min(720px, 100%);
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-8);
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 20px;
    background: linear-gradient(135deg, #c87913, #f0ad32 55%, #d68a18);
    color: #081b10;
    box-shadow: 0 34px 90px rgba(212,160,23,.28);
}

.planner__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transition: transform .75s ease;
}

.planner__cta a:hover::before {
    transform: translateX(120%);
}

.planner__cta span {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
}

.planner__cta small {
    font-weight: 900;
}

.planner__trust-strip {
    position: relative;
    z-index: 2;
    margin-top: var(--space-7);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: rgba(255,255,255,.78);
}

.planner__trust-strip div {
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid rgba(255,255,255,.16);
}

.planner__trust-strip div:last-child {
    border-right: 0;
}

.planner__trust-strip strong {
    display: block;
    color: var(--clr-surface);
}

.planner__trust-strip small {
    color: rgba(255,255,255,.6);
}

@media (max-width: 1050px) {
    .planner__journey {
        grid-template-columns: repeat(2, 1fr);
    }

    .planner__journey::before {
        display: none;
    }

    .planner__trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .planner {
        padding-block: 6rem;
    }

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

    .planner__cta a {
        flex-direction: column;
        text-align: center;
    }

    .planner__trust-strip {
        grid-template-columns: 1fr;
    }

    .planner__trust-strip div {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }
}

/* ==========================================
   PLANNER ICONS + ANIMATIONS
========================================== */

.planner-card__icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.planner-card:hover .planner-card__icon svg {
    animation: iconFloat 0.7s ease;
}

.reveal-card {
    opacity: 0;
    transform: translateY(36px);
}

.reveal-card.show {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

.reveal-card:nth-child(1).show {
    transition-delay: 0.05s;
}

.reveal-card:nth-child(2).show {
    transition-delay: 0.16s;
}

.reveal-card:nth-child(3).show {
    transition-delay: 0.27s;
}

.reveal-card:nth-child(4).show {
    transition-delay: 0.38s;
}

.reveal-card:nth-child(5).show {
    transition-delay: 0.49s;
}

.reveal-card:nth-child(6).show {
    transition-delay: 0.6s;
}

.planner__map {
    opacity: 0.72;
}

@keyframes iconFloat {
    0% {
        transform: translateY(0) rotate(0);
    }

    45% {
        transform: translateY(-5px) rotate(-4deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}
/* ==========================================
   THE SAFARI JOURNEY
========================================== */

.journey {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(212, 160, 23, 0.12), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(46, 125, 50, 0.08), transparent 26%),
        var(--clr-background);
}

.journey::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 16%;
    width: min(1100px, 90%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 160, 23, 0.35),
        transparent
    );
    transform: translateX(-50%);
}

.journey__timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.journey__timeline::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 68px;
    height: 2px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--clr-accent) 0 8px,
            transparent 8px 18px
        );
    opacity: 0.55;
    z-index: 0;
}

.journey-step {
    position: relative;
    z-index: 1;
    min-height: 310px;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.journey-step:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 160, 23, 0.45);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
}

.journey-step__number {
    display: block;
    margin-bottom: var(--space-4);
    color: rgba(31, 41, 51, 0.18);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
}

.journey-step__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 23, 0.55);
    background:
        linear-gradient(
            135deg,
            rgba(230, 126, 34, 0.1),
            rgba(212, 160, 23, 0.08)
        );
    color: var(--clr-primary);
    box-shadow: inset 0 0 24px rgba(212, 160, 23, 0.08);
    transition:
        transform var(--transition-normal),
        background var(--transition-normal);
}

.journey-step:hover .journey-step__icon {
    transform: translateY(-4px) rotate(-4deg) scale(1.05);
    background:
        linear-gradient(
            135deg,
            rgba(230, 126, 34, 0.18),
            rgba(212, 160, 23, 0.14)
        );
}

.journey-step__icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journey-step h3 {
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    color: var(--clr-dark);
}

.journey-step p {
    color: var(--clr-text-light);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Reveal animation */

.reveal-journey {
    opacity: 0;
    transform: translateY(36px);
}

.reveal-journey.show {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

.reveal-journey:nth-child(1).show {
    transition-delay: 0.05s;
}

.reveal-journey:nth-child(2).show {
    transition-delay: 0.16s;
}

.reveal-journey:nth-child(3).show {
    transition-delay: 0.27s;
}

.reveal-journey:nth-child(4).show {
    transition-delay: 0.38s;
}

.reveal-journey:nth-child(5).show {
    transition-delay: 0.49s;
}

.reveal-journey:nth-child(6).show {
    transition-delay: 0.6s;
}

/* Responsive */

@media (max-width: 1100px) {
    .journey__timeline {
        grid-template-columns: repeat(3, 1fr);
    }

    .journey__timeline::before {
        display: none;
    }
}

@media (max-width: 720px) {
    .journey__timeline {
        grid-template-columns: 1fr;
    }

    .journey-step {
        min-height: auto;
        text-align: left;
        display: grid;
        grid-template-columns: 70px 1fr;
        column-gap: var(--space-4);
        align-items: start;
    }

    .journey-step__number {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
    }

    .journey-step__icon {
        margin: 0;
        grid-row: span 3;
    }
}
/* ==========================================
   SAFARI JOURNEY — PREMIUM ANIMATIONS
========================================== */

/* Keep the cards hidden until JavaScript reveals them */

.reveal-journey {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-journey.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered entrance */

.reveal-journey:nth-child(1).show {
    transition-delay: 0.05s;
}

.reveal-journey:nth-child(2).show {
    transition-delay: 0.16s;
}

.reveal-journey:nth-child(3).show {
    transition-delay: 0.27s;
}

.reveal-journey:nth-child(4).show {
    transition-delay: 0.38s;
}

.reveal-journey:nth-child(5).show {
    transition-delay: 0.49s;
}

.reveal-journey:nth-child(6).show {
    transition-delay: 0.6s;
}

/* Premium card treatment */

.journey-step {
    overflow: hidden;
    transform-origin: center bottom;
}

.journey-step::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 0;
    height: 3px;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(
            90deg,
            var(--clr-primary),
            var(--clr-accent)
        );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-step:hover {
    transform: translateY(-12px) rotate(-0.35deg);
}

.journey-step:hover::after {
    transform: scaleX(1);
}

/* Soft gold reflection inside the card */

.journey-step::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(212, 160, 23, 0.16),
            transparent 34%
        );
    transition: opacity var(--transition-normal);
}

.journey-step:hover::before {
    opacity: 1;
}

/* Icon polish */

.journey-step__icon {
    position: relative;
}

.journey-step__icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 23, 0.18);
    opacity: 0;
    transform: scale(0.78);
    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);
}

.journey-step:hover .journey-step__icon {
    transform: translateY(-6px) rotate(-5deg) scale(1.08);
    box-shadow:
        0 16px 34px rgba(212, 160, 23, 0.18),
        inset 0 0 26px rgba(212, 160, 23, 0.13);
}

.journey-step:hover .journey-step__icon::after {
    opacity: 1;
    transform: scale(1);
}

.journey-step:hover .journey-step__icon svg {
    animation: journeyIconFloat 0.75s ease;
}

/* Animated light travelling across the timeline */

.journey__timeline {
    --journey-progress: 0%;
}

.journey__timeline::after {
    content: "";
    position: absolute;
    left: 4%;
    top: 64px;
    z-index: 2;
    width: 85px;
    height: 8px;
    border-radius: var(--radius-pill);
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 192, 63, 0.3),
            var(--clr-accent),
            rgba(255, 192, 63, 0.3),
            transparent
        );
    filter: blur(1px);
    box-shadow: 0 0 16px rgba(212, 160, 23, 0.55);
}

.journey__timeline.is-visible::after {
    opacity: 1;
    animation: journeyLight 8s ease-in-out infinite;
}

/* Very subtle number animation */

.journey-step:hover .journey-step__number {
    color: rgba(230, 126, 34, 0.34);
    transform: translateY(-2px);
}

.journey-step__number {
    transition:
        color var(--transition-normal),
        transform var(--transition-normal);
}

/* Section heading reveal */

.journey .section-header {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey .section-header.show {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframes */

@keyframes journeyLight {
    0% {
        left: 4%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(96% - 85px);
        opacity: 0;
    }
}

@keyframes journeyIconFloat {
    0% {
        transform: translateY(0) rotate(0);
    }

    45% {
        transform: translateY(-4px) rotate(-5deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

/* Hide the moving light when timeline becomes multi-row */

@media (max-width: 1100px) {
    .journey__timeline::after {
        display: none;
    }
}

/* Accessibility: respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .reveal-journey,
    .journey .section-header {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .journey__timeline::after,
    .journey-step:hover .journey-step__icon svg {
        animation: none;
    }

    .journey-step,
    .journey-step__icon,
    .journey-step__icon::after,
    .journey-step::after {
        transition: none;
    }
}
/* ==========================================
   CONSERVATION PROMISE
========================================== */

.conservation {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    display: grid;
    align-items: center;
    isolation: isolate;
    color: var(--clr-surface);
}

.conservation__media {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.conservation__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 8s ease;
}

.conservation.is-visible .conservation__media img {
    transform: scale(1.1);
}

.conservation__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(4, 19, 12, 0.94) 0%,
            rgba(4, 19, 12, 0.82) 44%,
            rgba(4, 19, 12, 0.34) 72%,
            rgba(4, 19, 12, 0.58) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16),
            rgba(0, 0, 0, 0.68)
        );
}

.conservation__inner {
    position: relative;
    z-index: 1;
}

.conservation__content {
    max-width: 670px;
}

.conservation__kicker {
    color: var(--clr-accent);
}

.conservation__content h2 {
    margin-bottom: var(--space-5);
    color: var(--clr-surface);
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: 1.02;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.conservation__intro {
    max-width: 620px;
    margin-bottom: var(--space-7);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-body-lg);
    line-height: 1.8;
}

.conservation__commitments {
    display: grid;
    gap: var(--space-5);
}

.conservation-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.conservation-item:hover {
    transform: translateX(10px);
    border-color: rgba(212, 160, 23, 0.52);
    background: rgba(255, 255, 255, 0.09);
}

.conservation-item__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 23, 0.62);
    color: var(--clr-accent);
    background: rgba(212, 160, 23, 0.08);
    box-shadow: inset 0 0 24px rgba(212, 160, 23, 0.08);
}

.conservation-item__icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.conservation-item h3 {
    margin-bottom: var(--space-2);
    color: var(--clr-surface);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
}

.conservation-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.7;
}

.conservation__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(212, 160, 23, 0.6);
    color: var(--clr-accent);
    font-weight: 800;
    transition:
        gap var(--transition-fast),
        color var(--transition-fast);
}

.conservation__link:hover {
    gap: var(--space-4);
    color: var(--clr-primary);
}

/* Reveal animation */

.reveal-conservation {
    opacity: 0;
    transform: translateX(-34px);
}

.reveal-conservation.show {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(.22, 1, .36, 1);
}

.reveal-conservation:nth-child(1).show {
    transition-delay: 0.08s;
}

.reveal-conservation:nth-child(2).show {
    transition-delay: 0.2s;
}

.reveal-conservation:nth-child(3).show {
    transition-delay: 0.32s;
}

@media (max-width: 800px) {
    .conservation {
        min-height: auto;
    }

    .conservation__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 19, 12, 0.78),
                rgba(4, 19, 12, 0.94)
            );
    }

    .conservation__content {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .conservation-item {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .conservation__media img,
    .reveal-conservation {
        transition: none;
        transform: none;
    }

    .reveal-conservation {
        opacity: 1;
    }
}
.conservation::before{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    right:-180px;
    top:-120px;

    background:
        radial-gradient(
            circle,
            rgba(212,160,23,.22),
            transparent 70%
        );

    pointer-events:none;
    z-index:-1;
}
/* ==========================================
   GUEST STORIES / TESTIMONIALS
========================================== */

.testimonials {
    position: relative;
    overflow: hidden;
    padding-block: 8rem;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(212, 160, 23, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(46, 125, 50, 0.08),
            transparent 30%
        ),
        var(--clr-background);
}

.testimonials::before {
    content: "STORIES";
    position: absolute;
    top: 4%;
    right: 3%;
    color: rgba(31, 41, 51, 0.035);
    font-family: var(--font-heading);
    font-size: clamp(8rem, 18vw, 20rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    pointer-events: none;
}

.testimonials__header {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin-bottom: var(--space-8);
}

.testimonials__header .section-kicker {
    color: var(--clr-secondary);
}

.testimonials__header h2 {
    max-width: 720px;
    margin-bottom: var(--space-4);
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.05;
}

.testimonials__header > p:last-child {
    max-width: 700px;
    color: var(--clr-text-light);
    font-size: var(--fs-body-lg);
    line-height: 1.8;
}

/* Main testimonial card */

.testimonial {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 30px 90px rgba(31, 41, 51, 0.14);
}

/* Quote/content side */

.testimonial__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 5vw, 5.4rem);
}

.testimonial__quote {
    position: absolute;
    top: 1.2rem;
    left: 2.2rem;
    color: rgba(212, 160, 23, 0.09);
    font-family: Georgia, serif;
    font-size: clamp(7rem, 13vw, 12rem);
    line-height: 1;
    pointer-events: none;
}

.testimonial blockquote {
    position: relative;
    z-index: 1;
    max-width: 570px;
    margin: 0;
    color: var(--clr-dark);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.testimonial__stars {
    margin-top: var(--space-6);
    color: var(--clr-primary);
    font-size: 1.18rem;
    letter-spacing: 0.18em;
}

.testimonial__author {
    margin-top: var(--space-5);
}

.testimonial__author h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--clr-dark);
}

.testimonial__author span {
    display: block;
    color: var(--clr-text-light);
    font-size: 0.95rem;
}

.testimonial__author::after {
    content: "7 Days · Maasai Mara & Amboseli";
    display: block;
    margin-top: var(--space-2);
    color: var(--clr-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

/* Controls */

.testimonial__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

.testimonial-btn {
    min-height: 46px;
    padding: 0 var(--space-5);
    border: 1px solid rgba(31, 41, 51, 0.12);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--clr-dark);
    font-weight: 800;
    cursor: pointer;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.testimonial-btn:hover {
    transform: translateY(-2px);
    border-color: var(--clr-primary);
    background: var(--clr-primary);
    color: var(--clr-surface);
    box-shadow: 0 12px 28px rgba(230, 126, 34, 0.22);
}

/* Image side */

.testimonial__image {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    background: var(--clr-dark);
}

.testimonial__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0, 0, 0, 0.28)
        );
    pointer-events: none;
}

.testimonial__image::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -100px;
    z-index: 1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(230, 126, 34, 0.2),
            transparent 70%
        );
    pointer-events: none;
}

.testimonial__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter:
        brightness(0.92)
        saturate(1.06)
        contrast(1.04);
    transform: scale(1.03);
    transition:
        transform 8s ease,
        filter 0.6s ease;
}

.testimonial:hover .testimonial__image img {
    transform: scale(1.09);
    filter:
        brightness(0.96)
        saturate(1.1)
        contrast(1.05);
}

/* Optional fade class for future JavaScript slider */

.testimonial.is-changing .testimonial__content,
.testimonial.is-changing .testimonial__image img {
    opacity: 0;
    transform: translateY(12px);
}

.testimonial__content,
.testimonial__image img {
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

/* Statistics */

.testimonial-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--space-7);
    border-top: 1px solid rgba(31, 41, 51, 0.1);
    border-bottom: 1px solid rgba(31, 41, 51, 0.1);
}

.stat {
    padding: var(--space-6) var(--space-5);
    text-align: center;
    border-right: 1px solid rgba(31, 41, 51, 0.1);
}

.stat:last-child {
    border-right: 0;
}

.stat__number {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--clr-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

.stat p {
    margin: 0;
    color: var(--clr-text-light);
    font-size: 0.92rem;
    font-weight: 700;
}

/* Hover polish */

.testimonial::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            var(--clr-primary),
            var(--clr-accent)
        );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial:hover::after {
    transform: scaleX(1);
}

/* Responsive */

@media (max-width: 1050px) {
    .testimonial {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .testimonial blockquote {
        font-size: clamp(1.9rem, 3vw, 2.8rem);
    }
}

@media (max-width: 900px) {
    .testimonial {
        grid-template-columns: 1fr;
    }

    .testimonial__image {
        order: -1;
        min-height: 500px;
    }

    .testimonial__content {
        padding: var(--space-7);
    }

    .testimonial-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat:nth-child(2) {
        border-right: 0;
    }

    .stat:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(31, 41, 51, 0.1);
    }
}

@media (max-width: 560px) {
    .testimonials {
        padding-block: 6rem;
    }

    .testimonial {
        border-radius: 22px;
    }

    .testimonial__image {
        min-height: 360px;
    }

    .testimonial__content {
        padding: var(--space-6);
    }

    .testimonial__quote {
        top: 0.8rem;
        left: 1rem;
        font-size: 7rem;
    }

    .testimonial blockquote {
        font-size: 2rem;
        line-height: 1.2;
    }

    .testimonial__controls {
        flex-direction: column;
    }

    .testimonial-btn {
        width: 100%;
    }

    .testimonial-stats {
        grid-template-columns: 1fr;
    }

    .stat {
        border-right: 0;
        border-bottom: 1px solid rgba(31, 41, 51, 0.1);
    }

    .stat:last-child {
        border-bottom: 0;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .testimonial,
    .testimonial__image img,
    .testimonial-btn,
    .testimonial::after {
        transition: none;
    }

    .testimonial:hover .testimonial__image img {
        transform: none;
    }
}
/* ==========================================
   FINAL CALL TO ACTION
========================================== */

.final-cta {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    display: grid;
    align-items: center;
    isolation: isolate;
    color: var(--clr-surface);
}

.final-cta__media {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.final-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter:
        brightness(0.82)
        saturate(1.05)
        contrast(1.05);
    transform: scale(1.03);
    transition: transform 9s ease;
}

.final-cta.is-visible .final-cta__media img {
    transform: scale(1.1);
}

.final-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(4, 18, 12, 0.95) 0%,
            rgba(4, 18, 12, 0.83) 42%,
            rgba(4, 18, 12, 0.48) 70%,
            rgba(4, 18, 12, 0.68) 100%
        ),
        radial-gradient(
            circle at 75% 20%,
            rgba(230, 126, 34, 0.18),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.72)
        );
}

.final-cta__inner {
    position: relative;
    z-index: 1;
}

.final-cta__content {
    max-width: 760px;
}

.final-cta__kicker {
    color: var(--clr-accent);
}

.final-cta__content h2 {
    max-width: 720px;
    margin-bottom: var(--space-5);
    color: var(--clr-surface);
    font-size: clamp(3.2rem, 5.5vw, 5.8rem);
    line-height: 1.02;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.52);
}

.final-cta__intro {
    max-width: 690px;
    margin-bottom: var(--space-7);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-body-lg);
    line-height: 1.8;
}

.final-cta__actions {
    display: grid;
    gap: var(--space-4);
    max-width: 700px;
}

.final-cta__action {
    position: relative;
    overflow: hidden;
    min-height: 82px;
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.07);
    color: var(--clr-surface);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal),
        box-shadow var(--transition-normal);
}

.final-cta__action::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.12),
            transparent
        );
    transform: translateX(-120%);
    transition:
        opacity var(--transition-normal),
        transform 0.75s ease;
}

.final-cta__action:hover {
    transform: translateX(8px);
    border-color: rgba(212, 160, 23, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

.final-cta__action:hover::before {
    opacity: 1;
    transform: translateX(120%);
}

.final-cta__action--primary {
    border-color: rgba(255, 255, 255, 0.35);
    background:
        linear-gradient(
            135deg,
            #c97913,
            #eeaa30 55%,
            #d78617
        );
    color: #0b2114;
    box-shadow: 0 24px 65px rgba(212, 160, 23, 0.28);
}

.final-cta__action--primary:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(
            135deg,
            #d78617,
            #f3b640 55%,
            #df901e
        );
}

.final-cta__action-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(212, 160, 23, 0.52);
    border-radius: 50%;
    color: var(--clr-accent);
    background: rgba(212, 160, 23, 0.08);
    transition:
        transform var(--transition-normal),
        background var(--transition-normal);
}

.final-cta__action--primary .final-cta__action-icon {
    color: #0b2114;
    border-color: rgba(11, 33, 20, 0.28);
    background: rgba(255, 255, 255, 0.2);
}

.final-cta__action:hover .final-cta__action-icon {
    transform: rotate(-5deg) scale(1.08);
    background: rgba(212, 160, 23, 0.14);
}

.final-cta__action-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.final-cta__action strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 1rem;
}

.final-cta__action small {
    display: block;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.88rem;
}

.final-cta__action--primary small {
    color: rgba(11, 33, 20, 0.66);
}

.final-cta__arrow {
    font-size: 1.35rem;
    transition: transform var(--transition-fast);
}

.final-cta__action:hover .final-cta__arrow {
    transform: translateX(6px);
}

.final-cta__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.final-cta__note span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(212, 160, 23, 0.45);
    border-radius: 50%;
    color: var(--clr-accent);
}

/* Reveal */

.final-cta__content {
    opacity: 0;
    transform: translateY(40px);
}

.final-cta.is-visible .final-cta__content {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 800px) {
    .final-cta {
        min-height: auto;
    }

    .final-cta__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 18, 12, 0.72),
                rgba(4, 18, 12, 0.95)
            );
    }

    .final-cta__content {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .final-cta__action {
        grid-template-columns: 48px 1fr;
    }

    .final-cta__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-cta__media img,
    .final-cta__content,
    .final-cta__action,
    .final-cta__action::before,
    .final-cta__action-icon,
    .final-cta__arrow {
        transition: none;
        transform: none;
    }

    .final-cta__content {
        opacity: 1;
    }
}
/* ==========================================
   MOBILE REFINEMENT — HOMEPAGE
========================================== */

@media (max-width: 560px) {
    /* Planner */

    .planner__header h2 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .planner__header p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .planner-card {
        min-height: auto;
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: var(--space-4);
        padding: var(--space-5);
    }

    .planner-card__number {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        margin: 0;
        font-size: 1.8rem;
    }

    .planner-card__icon {
        grid-row: 1 / span 3;
        width: 58px;
        height: 58px;
        margin: var(--space-6) 0 0;
    }

    .planner-card__icon svg {
        width: 28px;
        height: 28px;
    }

    .planner-card h3 {
        margin-top: var(--space-6);
        font-size: 1.55rem;
    }

    .planner-card p {
        margin-bottom: var(--space-2);
    }

    .planner__cta a {
        min-height: auto;
        padding: var(--space-5);
    }

    .planner__cta span {
        font-size: 2rem;
    }

    /* Testimonials */

    .testimonials__header h2 {
        font-size: clamp(2.8rem, 12vw, 4rem);
    }

    .testimonial__image {
        min-height: 440px;
        max-height: 480px;
    }

    .testimonial__image img {
        object-position: center 35%;
    }

    .testimonial blockquote {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.22;
    }

    .testimonial__quote {
        font-size: 6rem;
    }

    /* Final CTA */

    .final-cta__content h2 {
        font-size: clamp(2.9rem, 12vw, 4.2rem);
    }
}

/* ==================================================
   PREMIUM HERO PHYSICS
================================================== */

.hero__slide img{
    will-change:transform;
    transition:
        transform .18s linear,
        filter .45s ease;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
    radial-gradient(
        circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,.08),
        transparent 22%
    );

    mix-blend-mode:soft-light;

    opacity:0;
    transition:opacity .4s ease;
}

.hero:hover::after{
    opacity:1;
}

.hero__content{
    transition:
        transform .25s ease;
    will-change:transform;
}

/* ==================================================
   PREMIUM MAGNETIC BUTTONS
================================================== */

[data-magnetic] {
    --magnetic-x: 0px;
    --magnetic-y: 0px;
    --magnetic-light-x: 50%;
    --magnetic-light-y: 50%;

    position: relative;
    isolation: isolate;
    translate: var(--magnetic-x) var(--magnetic-y);
    will-change: translate;
    transition:
        translate 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal);
}

/*
   The moving light is attached to an inner overlay so it does not
   interfere with existing ::before effects on planner and CTA links.
*/

[data-magnetic] .magnetic-light {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

[data-magnetic] .magnetic-light::before {
    content: "";
    position: absolute;
    left: var(--magnetic-light-x);
    top: var(--magnetic-light-y);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.1) 28%,
            transparent 70%
        );
    opacity: 0;
    translate: -50% -50%;
    transform: scale(0.65);
    transition:
        opacity 0.35s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-magnetic].is-magnetic-active {
    transition:
        translate 0.12s linear,
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal);
}

[data-magnetic].is-magnetic-active .magnetic-light::before {
    opacity: 1;
    transform: scale(1);
}

[data-magnetic].is-magnetic-releasing {
    transition:
        translate 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal);
}

/* Very subtle pressed response */

[data-magnetic]:active {
    scale: 0.985;
}

/* Keep text and icons above the moving highlight */

[data-magnetic] > *:not(.magnetic-light) {
    position: relative;
    z-index: 1;
}

/* Touch devices do not need cursor attraction */

@media (hover: none), (pointer: coarse) {
    [data-magnetic] {
        translate: none;
    }

    [data-magnetic] .magnetic-light {
        display: none;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    [data-magnetic],
    [data-magnetic].is-magnetic-active,
    [data-magnetic].is-magnetic-releasing {
        translate: none;
        transition: none;
    }

    [data-magnetic] .magnetic-light {
        display: none;
    }
}

/* ==================================================
   PREMIUM CARD PHYSICS
================================================== */

[data-card-physics] {
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-shadow-x: 0px;
    --card-shadow-y: 20px;
    --card-glare-x: 50%;
    --card-glare-y: 50%;
    --card-depth-x: 0px;
    --card-depth-y: 0px;

    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform, box-shadow;
}

/*
   Cursor-following light.

   JavaScript injects this element so that we do not disturb
   the existing ::before and ::after effects on your cards.
*/

.card-physics__glare {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at var(--card-glare-x) var(--card-glare-y),
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.09) 18%,
            transparent 48%
        );
    mix-blend-mode: soft-light;
    transition: opacity 0.4s ease;
}

[data-card-physics].is-physics-active .card-physics__glare {
    opacity: 1;
}

/* ------------------------------------------
   TRUST CARDS
------------------------------------------ */

.trust-card[data-card-physics] {
    transform:
        translateY(0)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.trust-card[data-card-physics].is-physics-active {
    transform:
        translateY(-12px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));

    box-shadow:
        var(--card-shadow-x)
        var(--card-shadow-y)
        55px
        rgba(31, 41, 51, 0.2);
}

.trust-card[data-card-physics] .trust-card__icon,
.trust-card[data-card-physics] h3,
.trust-card[data-card-physics] p {
    translate:
        calc(var(--card-depth-x) * 0.35)
        calc(var(--card-depth-y) * 0.35);
    transition:
        translate 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--transition-normal);
}

/* ------------------------------------------
   DESTINATION CARDS
------------------------------------------ */

.destination-card[data-card-physics] {
    transform:
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));
    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.destination-card[data-card-physics].is-physics-active {
    box-shadow:
        var(--card-shadow-x)
        var(--card-shadow-y)
        65px
        rgba(4, 18, 12, 0.32);
}

.destination-card[data-card-physics] img {
    translate:
        calc(var(--card-depth-x) * -0.55)
        calc(var(--card-depth-y) * -0.55);
    transition:
        translate 0.28s linear,
        transform 1.2s ease,
        filter 1.2s ease;
}

.destination-card[data-card-physics] .destination-card__content {
    translate:
        calc(var(--card-depth-x) * 0.55)
        calc(var(--card-depth-y) * 0.55);
    transition:
        translate 0.3s ease,
        transform var(--transition-normal);
}

.destination-card[data-card-physics] .destination-card__badge {
    translate:
        calc(var(--card-depth-x) * 0.8)
        calc(var(--card-depth-y) * 0.8);
    transition:
        translate 0.3s ease,
        background var(--transition-normal);
}

/* ------------------------------------------
   PLANNER CARDS
------------------------------------------ */

.planner-card[data-card-physics] {
    transform:
        translateY(0)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));

    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.planner-card[data-card-physics].is-physics-active {
    transform:
        translateY(-14px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));

    box-shadow:
        var(--card-shadow-x)
        var(--card-shadow-y)
        75px
        rgba(0, 0, 0, 0.38);
}

.planner-card[data-card-physics] .planner-card__icon,
.planner-card[data-card-physics] h3,
.planner-card[data-card-physics] p,
.planner-card[data-card-physics] small {
    translate:
        calc(var(--card-depth-x) * 0.45)
        calc(var(--card-depth-y) * 0.45);
    transition:
        translate 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--transition-normal),
        background var(--transition-normal);
}

/* ------------------------------------------
   JOURNEY CARDS
------------------------------------------ */

.journey-step[data-card-physics] {
    transform:
        translateY(0)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));

    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.journey-step[data-card-physics].is-physics-active {
    transform:
        translateY(-12px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y));

    box-shadow:
        var(--card-shadow-x)
        var(--card-shadow-y)
        60px
        rgba(31, 41, 51, 0.2);
}

.journey-step[data-card-physics] .journey-step__icon,
.journey-step[data-card-physics] h3,
.journey-step[data-card-physics] p {
    translate:
        calc(var(--card-depth-x) * 0.4)
        calc(var(--card-depth-y) * 0.4);
    transition:
        translate 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--transition-normal);
}

/* ------------------------------------------
   ELASTIC RELEASE
------------------------------------------ */

[data-card-physics].is-physics-releasing {
    transition:
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.75s ease;
}

[data-card-physics].is-physics-releasing img,
[data-card-physics].is-physics-releasing
    > *:not(.card-physics__glare) {
    transition:
        translate 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform var(--transition-normal);
}

/* Disable cursor physics where it does not provide value */

@media (hover: none), (pointer: coarse) {
    [data-card-physics] {
        transform: none !important;
    }

    .card-physics__glare {
        display: none;
    }

    [data-card-physics] img,
    [data-card-physics] > * {
        translate: none !important;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    [data-card-physics],
    [data-card-physics].is-physics-active,
    [data-card-physics].is-physics-releasing {
        transform: none !important;
        transition: none !important;
    }

    [data-card-physics] img,
    [data-card-physics] > * {
        translate: none !important;
        transition: none !important;
    }

    .card-physics__glare {
        display: none;
    }
}

/* ==================================================
   SCROLL CHOREOGRAPHY
================================================== */

:root{
    --scroll-progress:0;
}

/*
    Every section receives a progress value
*/

[data-scroll-section]{

    --section-progress:0;

    transition:
        transform .18s linear,
        opacity .18s linear;

    will-change:
        transform,
        opacity;
}

/* ------------------------
   Headings
-------------------------*/

[data-scroll-section] h2{

    transform:
        translateY(
            calc(
                (1 - var(--section-progress))
                * 24px
            )
        );

    opacity:
        calc(
            .45 + (.55 * var(--section-progress))
        );

}

/* ------------------------
   Paragraphs
-------------------------*/

[data-scroll-section] p{

    transform:
        translateY(
            calc(
                (1 - var(--section-progress))
                * 12px
            )
        );

}

/* ------------------------
   Destination Grid
-------------------------*/

.destinations__grid{

    transform:
        translateY(
            calc(
                (1 - var(--section-progress))
                * 18px
            )
        );

}

/* ------------------------
   Planner Glow
-------------------------*/

.planner{

    box-shadow:

        0 0
        calc(
            30px +
            (50px * var(--section-progress))
        )

        rgba(
            212,
            175,
            55,

            calc(
                .03 +
                (.08 * var(--section-progress))
            )

        );

}

/* ------------------------
   Conservation image
-------------------------*/

.conservation__image img{

    transform:
        translateY(
            calc(
                (1 - var(--section-progress))
                * 18px
            )
        )
        scale(1.04);

}

/* ------------------------
   CTA
-------------------------*/

.final-cta{

    transform:
        translateY(
            calc(
                (1 - var(--section-progress))
                * 22px
            )
        );

}

/* ------------------------
   Smooth variables
-------------------------*/

@media(prefers-reduced-motion:reduce){

    [data-scroll-section]{

        transform:none !important;

    }

}

/* ==================================================
   AMBIENT SAFARI — THE PIXAR STAGE
================================================== */

/*
   Ambient layers are inserted as the first child of their section,
   so they sit above the background but beneath the real content.
*/

.ambient-safari {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    contain: layout paint style;
}

/* Ensure the selected sections can contain ambient layers */

.hero,
.planner,
.conservation,
.final-cta {
    position: relative;
    isolation: isolate;
}

/* ==================================================
   HERO ATMOSPHERE
================================================== */

.hero .ambient-safari {
    z-index: 1;
}

/*
   Keep important hero content above the atmosphere.
   These selectors only affect stacking, not layout.
*/

.hero__content,
.hero__controls,
.hero__navigation,
.hero__progress,
.hero__dots,
.hero__scroll {
    position: relative;
    z-index: 3;
}

/* ------------------------------------------
   Golden atmospheric breathing
------------------------------------------ */

.ambient-safari__sunlight {
    position: absolute;
    top: -25%;
    right: -12%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 221, 145, 0.2) 0%,
            rgba(233, 178, 74, 0.09) 28%,
            transparent 68%
        );

    filter: blur(16px);
    opacity: 0.52;
    transform: scale(0.96);
    animation:
        ambientSunBreathing 11s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes ambientSunBreathing {
    0% {
        opacity: 0.38;
        transform: scale(0.94) translate3d(0, 0, 0);
    }

    100% {
        opacity: 0.66;
        transform: scale(1.05) translate3d(-1.5%, 1%, 0);
    }
}

/* ------------------------------------------
   Heat shimmer
------------------------------------------ */

.ambient-safari__heat {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -4%;
    height: 34%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.055) 2px,
            transparent 5px,
            transparent 11px
        );

    opacity: 0.38;
    filter: blur(1px);
    mask-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9),
            transparent
        );

    transform-origin: bottom center;
    animation: ambientHeatShimmer 8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes ambientHeatShimmer {
    0% {
        opacity: 0.2;
        transform:
            translate3d(-0.4%, 0, 0)
            skewX(-0.35deg)
            scaleY(0.98);
    }

    50% {
        opacity: 0.38;
    }

    100% {
        opacity: 0.25;
        transform:
            translate3d(0.5%, -1%, 0)
            skewX(0.45deg)
            scaleY(1.03);
    }
}

/* ==================================================
   DUST AND POLLEN
================================================== */

.ambient-particle {
    --particle-size: 3px;
    --particle-opacity: 0.3;
    --particle-duration: 18s;
    --particle-delay: 0s;
    --particle-drift-x: 40px;
    --particle-rise: -140px;

    position: absolute;
    left: var(--particle-left, 50%);
    bottom: var(--particle-bottom, -8%);

    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;

    background:
        rgba(255, 229, 169, var(--particle-opacity));

    box-shadow:
        0 0 8px
        rgba(255, 214, 130, calc(var(--particle-opacity) * 0.7));

    opacity: 0;
    animation:
        ambientParticleDrift
        var(--particle-duration)
        linear
        var(--particle-delay)
        infinite;

    will-change: transform, opacity;
}

.ambient-particle--soft {
    filter: blur(1px);
}

.ambient-particle--small {
    filter: blur(0.3px);
}

@keyframes ambientParticleDrift {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 20px, 0)
            scale(0.7);
    }

    12% {
        opacity: var(--particle-opacity);
    }

    55% {
        opacity:
            calc(var(--particle-opacity) * 0.75);

        transform:
            translate3d(
                calc(var(--particle-drift-x) * 0.55),
                calc(var(--particle-rise) * 0.55),
                0
            )
            scale(1);
    }

    88% {
        opacity:
            calc(var(--particle-opacity) * 0.25);
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--particle-drift-x),
                var(--particle-rise),
                0
            )
            scale(0.8);
    }
}

/* ==================================================
   DISTANT BIRDS
================================================== */

.ambient-bird {
    --bird-scale: 0.65;
    --bird-y: 24%;
    --bird-duration: 23s;

    position: absolute;
    top: var(--bird-y);
    left: -12%;
    width: 54px;
    height: 24px;

    opacity: 0;
    color: rgba(15, 22, 17, 0.58);

    transform:
        scale(var(--bird-scale))
        translate3d(0, 0, 0);

    animation:
        ambientBirdJourney
        var(--bird-duration)
        linear
        forwards;

    will-change: transform, opacity;
}

.ambient-bird svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Independent wing movement makes the silhouette less mechanical */

.ambient-bird__left-wing {
    transform-origin: 24px 13px;
    animation:
        ambientWingLeft 1.35s ease-in-out infinite;
}

.ambient-bird__right-wing {
    transform-origin: 30px 13px;
    animation:
        ambientWingRight 1.35s ease-in-out infinite;
}

@keyframes ambientWingLeft {
    0%,
    100% {
        transform: rotate(1deg);
    }

    50% {
        transform: rotate(-8deg) translateY(1px);
    }
}

@keyframes ambientWingRight {
    0%,
    100% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(8deg) translateY(1px);
    }
}

@keyframes ambientBirdJourney {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 8px, 0)
            scale(var(--bird-scale));
    }

    8% {
        opacity: 0.42;
    }

    28% {
        transform:
            translate3d(32vw, -7px, 0)
            scale(var(--bird-scale));
    }

    52% {
        opacity: 0.56;
        transform:
            translate3d(62vw, 4px, 0)
            scale(var(--bird-scale));
    }

    78% {
        transform:
            translate3d(96vw, -5px, 0)
            scale(var(--bird-scale));
    }

    92% {
        opacity: 0.28;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(125vw, 5px, 0)
            scale(var(--bird-scale));
    }
}

/* A bird further away should look softer */

.ambient-bird--distant {
    filter: blur(0.35px);
    opacity: 0.42;
}

/* ==================================================
   SECTION-SPECIFIC ATMOSPHERE
================================================== */

/* Planner receives a restrained golden glow */

.planner .ambient-safari__section-light {
    position: absolute;
    left: 15%;
    bottom: -45%;
    width: 70%;
    height: 70%;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.11),
            transparent 68%
        );

    filter: blur(30px);
    opacity:
        calc(0.2 + var(--section-progress, 0) * 0.55);

    transform:
        scale(
            calc(0.9 + var(--section-progress, 0) * 0.15)
        );

    transition:
        opacity 0.18s linear,
        transform 0.18s linear;
}

/* Conservation gets soft drifting warmth */

.conservation .ambient-safari__section-light {
    position: absolute;
    top: -30%;
    left: -18%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(246, 193, 92, 0.12),
            transparent 70%
        );

    filter: blur(32px);
    animation:
        ambientSectionLight 13s ease-in-out infinite alternate;
}

/* Final CTA receives a slow dawn-like wash */

.final-cta .ambient-safari__section-light {
    position: absolute;
    inset: -35% -20%;
    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255, 211, 124, 0.09) 47%,
            transparent 68%
        );

    transform: translateX(-22%);
    animation:
        ambientLightWash 16s ease-in-out infinite;
}

@keyframes ambientSectionLight {
    from {
        opacity: 0.28;
        transform: translate3d(-2%, 1%, 0) scale(0.96);
    }

    to {
        opacity: 0.56;
        transform: translate3d(3%, -2%, 0) scale(1.06);
    }
}

@keyframes ambientLightWash {
    0%,
    15% {
        opacity: 0;
        transform: translateX(-25%);
    }

    42% {
        opacity: 0.65;
    }

    75%,
    100% {
        opacity: 0;
        transform: translateX(30%);
    }
}

/* ==================================================
   PERFORMANCE ADJUSTMENTS
================================================== */

@media (max-width: 900px) {
    .ambient-safari__heat {
        opacity: 0.18;
        height: 25%;
    }

    .ambient-safari__sunlight {
        width: 95%;
        right: -40%;
    }

    .ambient-bird {
        --bird-scale: 0.5;
    }
}

@media (max-width: 600px) {
    /*
       Mobile keeps the light atmosphere but removes heat distortion
       and most particles to protect battery and scrolling smoothness.
    */

    .ambient-safari__heat {
        display: none;
    }

    .ambient-particle:nth-of-type(n + 8) {
        display: none;
    }

    .ambient-bird {
        --bird-scale: 0.42;
    }
}

/* Reduced-motion visitors receive a calm static atmosphere */

@media (prefers-reduced-motion: reduce) {
    .ambient-safari__sunlight,
    .ambient-safari__heat,
    .ambient-particle,
    .ambient-bird,
    .ambient-safari__section-light {
        animation: none !important;
        transform: none !important;
    }

    .ambient-particle,
    .ambient-bird,
    .ambient-safari__heat {
        display: none !important;
    }

    .ambient-safari__sunlight,
    .ambient-safari__section-light {
        opacity: 0.2;
    }
}

/* ==================================================
   PHASE 2 — INTERACTIVE SAFARI MAP
================================================== */

.safari-map {
    --map-green: #1f3428;
    --map-green-dark: #10231a;
    --map-green-deep: #091810;
    --map-gold: #c99447;
    --map-gold-light: #e1bd7b;
    --map-cream: #f3ecdf;
    --map-muted: #756f63;
    --map-border: rgba(31, 52, 40, 0.14);
    --map-ease: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    overflow: hidden;
    padding:
        clamp(90px, 10vw, 160px)
        0;
    background:
        linear-gradient(
            135deg,
            #f7f1e6,
            #ece1cc
        );
    isolation: isolate;
}

.safari-map__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(
            rgba(31, 52, 40, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(31, 52, 40, 0.04) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 78%
        );
}

.safari-map__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);
    gap: clamp(50px, 8vw, 130px);
    align-items: end;
    margin-bottom: clamp(54px, 7vw, 100px);
}

.safari-map__heading h2 {
    max-width: 760px;
    margin: 0;
    color: var(--map-green);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 6.2rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.88;
}

.safari-map__intro {
    max-width: 570px;
    padding-bottom: 6px;
}

.safari-map__intro > p:first-child {
    margin: 0;
    color: var(--map-muted);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.9;
}

.safari-map__hint {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 30px 0 0;
    color: var(--map-green);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.safari-map__hint span {
    color: var(--map-gold);
    animation:
        safariMapHint
        1.8s ease-in-out
        infinite;
}

.safari-map__experience {
    display: grid;
    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(330px, 0.58fr);
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(31, 52, 40, 0.12);
    border-radius: clamp(24px, 3vw, 42px);
    box-shadow:
        0 45px 100px
        rgba(35, 31, 22, 0.16);
}

/* ==================================================
   MAP CANVAS
================================================== */

.safari-map__canvas {
    position: relative;
    display: grid;
    min-height: 720px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 48% 45%,
            rgba(212, 175, 95, 0.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #1d382a,
            #0b2017
        );
}

.safari-map__canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.05),
            transparent 35%
        );
}

.safari-map__canvas::after {
    content: "KENYA";
    position: absolute;
    bottom: 1%;
    left: 2%;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.025);
    font-family: var(--font-heading);
    font-size: clamp(7rem, 17vw, 17rem);
    line-height: 1;
}

.safari-map__svg {
    position: relative;
    z-index: 1;
    width: min(93%, 740px);
    height: auto;
    overflow: visible;
}

.safari-map__status {
    position: absolute;
    top: 28px;
    left: 30px;
    z-index: 3;
    padding: 10px 15px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(3, 17, 11, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.safari-map__coordinates path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.045);
    stroke-width: 1;
}

.safari-map__country {
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 2;
}

.safari-map__country-light {
    pointer-events: none;
}

.safari-map__terrain path {
    fill: none;
    stroke: rgba(61, 66, 48, 0.24);
    stroke-width: 3;
    stroke-linecap: round;
}

.safari-map__terrain circle {
    fill: rgba(31, 52, 40, 0.35);
}

/* ==================================================
   CINEMATIC ROUTE DRAWING
================================================== */

.safari-route-group {
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
}

.safari-route-group.is-active {
    opacity: 1;
}

.safari-route {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.safari-route--base {
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 3;
    stroke-dasharray: 4 11;
}

.safari-route--active {
    stroke: var(--map-gold-light);
    stroke-width: 4;
    filter:
        drop-shadow(
            0 0 6px
            rgba(225, 189, 123, 0.46)
        );
}

/*
   JavaScript sets the route length dynamically.
*/

.safari-route--active.is-drawing {
    animation:
        safariRouteDraw
        var(--route-duration, 1500ms)
        var(--map-ease)
        forwards;
}

.safari-route--active.is-traveling {
    animation:
        safariRouteFlow
        1.4s linear
        infinite;
}

@keyframes safariRouteDraw {
    from {
        stroke-dashoffset:
            var(--route-length);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes safariRouteFlow {
    to {
        stroke-dashoffset: -30;
    }
}

/* ==================================================
   ANIMATED SAFARI JEEP
================================================== */

.safari-jeep {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.safari-jeep.is-visible {
    opacity: 1;
}

.safari-jeep.is-arriving {
    animation:
        safariJeepArrival
        620ms
        cubic-bezier(0.34, 1.56, 0.64, 1);
}

.safari-jeep__body {
    transform-box: fill-box;
    transform-origin: center;
    animation:
        safariJeepEngine
        420ms ease-in-out
        infinite alternate;
}

.safari-jeep__shadow {
    fill: rgba(1, 10, 6, 0.28);
    filter: blur(2px);
}

.safari-jeep__base {
    fill: #d78c28;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.4;
}

.safari-jeep__cabin {
    fill: #b56c18;
    stroke: rgba(255, 255, 255, 0.76);
    stroke-width: 1.2;
}

.safari-jeep__window {
    fill: #223d32;
    stroke: rgba(255, 255, 255, 0.65);
    stroke-width: 0.8;
}

.safari-jeep__bonnet {
    fill: #e59a35;
}

.safari-jeep__rack {
    fill: none;
    stroke: #f4d6a3;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.safari-jeep__wheel {
    fill: #17231d;
    stroke: rgba(255, 255, 255, 0.68);
    stroke-width: 1;
}

.safari-jeep__light {
    fill: #fff2bc;
    filter:
        drop-shadow(
            0 0 4px
            rgba(255, 236, 170, 0.9)
        );
}

.safari-jeep.is-moving
.safari-jeep__wheel {
    animation:
        safariJeepWheel
        380ms linear
        infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes safariJeepEngine {
    from {
        transform: translateY(-0.6px);
    }

    to {
        transform: translateY(0.7px);
    }
}

@keyframes safariJeepWheel {
    to {
        transform: rotate(360deg);
    }
}

@keyframes safariJeepArrival {
    0% {
        opacity: 0;
        scale: 0.55;
    }

    65% {
        opacity: 1;
        scale: 1.12;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

/* ==================================================
   REFINED JEEP JOURNEY
================================================== */

.safari-jeep {
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 320ms ease,
        filter 320ms ease;
}

.safari-jeep.is-visible {
    opacity: 1;
}

.safari-jeep.is-fading {
    opacity: 0;
    filter: blur(2px);
}

.safari-jeep.is-starting
.safari-jeep__body {
    animation:
        safariJeepIgnition
        480ms
        cubic-bezier(0.34, 1.56, 0.64, 1);
}

.safari-jeep.is-arriving
.safari-jeep__body {
    animation:
        safariJeepArrivalBody
        650ms
        cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------
   Dust
------------------------------------------ */

.safari-jeep-dust {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.safari-jeep-dust.is-visible {
    opacity: 1;
}

.safari-jeep-dust__particle {
    fill: rgba(222, 190, 125, 0.7);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.safari-jeep-dust.is-moving
.safari-jeep-dust__particle {
    animation:
        safariDustTrail
        850ms ease-out
        infinite;
}

.safari-jeep-dust.is-moving
.safari-jeep-dust__particle:nth-child(2) {
    animation-delay: 120ms;
    animation-duration: 720ms;
}

.safari-jeep-dust.is-moving
.safari-jeep-dust__particle:nth-child(3) {
    animation-delay: 240ms;
    animation-duration: 960ms;
}

.safari-jeep-dust.is-moving
.safari-jeep-dust__particle:nth-child(4) {
    animation-delay: 330ms;
    animation-duration: 780ms;
}

.safari-jeep-dust.is-moving
.safari-jeep-dust__particle:nth-child(5) {
    animation-delay: 430ms;
    animation-duration: 1050ms;
}

.safari-jeep-dust.is-settling
.safari-jeep-dust__particle {
    animation:
        safariDustSettle
        720ms ease-out
        forwards;
}

/* ------------------------------------------
   Compass journey cue
------------------------------------------ */

.safari-map__compass {
    transform-box: fill-box;
    transform-origin: center;
}

.safari-map__compass.is-calibrating {
    animation:
        safariCompassCalibrate
        720ms
        cubic-bezier(0.16, 1, 0.3, 1);
}

.safari-map__compass.is-calibrating path {
    animation:
        safariCompassNeedle
        720ms
        cubic-bezier(0.16, 1, 0.3, 1);
    transform-box: fill-box;
    transform-origin: center;
}

/* ------------------------------------------
   Journey animations
------------------------------------------ */

@keyframes safariJeepIgnition {
    0% {
        transform:
            translateY(2px)
            scale(0.9);
    }

    25% {
        transform:
            translateY(-2px)
            rotate(-1.5deg)
            scale(1.04);
    }

    55% {
        transform:
            translateY(1px)
            rotate(1deg);
    }

    100% {
        transform:
            translateY(0)
            rotate(0)
            scale(1);
    }
}

@keyframes safariJeepArrivalBody {
    0% {
        transform:
            translateY(0)
            scale(1);
    }

    38% {
        transform:
            translateY(-5px)
            scale(1.07);
    }

    68% {
        transform:
            translateY(1px)
            scale(0.98);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes safariDustTrail {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 0, 0)
            scale(0.55);
    }

    20% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(-24px, -9px, 0)
            scale(1.75);
    }
}

@keyframes safariDustSettle {
    0% {
        opacity: 0.56;
        transform:
            translate3d(0, 0, 0)
            scale(0.8);
    }

    100% {
        opacity: 0;
        transform:
            translate3d(-15px, -18px, 0)
            scale(2);
    }
}

@keyframes safariCompassCalibrate {
    0% {
        transform: rotate(0);
    }

    45% {
        transform: rotate(22deg);
    }

    72% {
        transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes safariCompassNeedle {
    0% {
        transform: rotate(0);
    }

    35% {
        transform: rotate(135deg);
    }

    70% {
        transform: rotate(320deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==================================================
   MAP MARKERS
================================================== */

.safari-marker {
    cursor: pointer;
    outline: none;
}

.safari-marker--origin {
    cursor: default;
}

.safari-marker__pulse {
    fill: rgba(201, 148, 71, 0.12);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.safari-marker__ring {
    fill: rgba(12, 37, 25, 0.78);
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 2;
    transition:
        fill 350ms ease,
        stroke 350ms ease,
        transform 450ms var(--map-ease);
    transform-box: fill-box;
    transform-origin: center;
}

.safari-marker__point {
    fill: #ffffff;
    transition:
        fill 350ms ease,
        transform 450ms var(--map-ease);
    transform-box: fill-box;
    transform-origin: center;
}

.safari-marker__label {
    fill: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.safari-marker__sub-label {
    fill: rgba(255, 255, 255, 0.54);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.safari-marker--coming .safari-marker__ring {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-dasharray: 3 3;
}

.safari-marker--coming .safari-marker__point {
    fill: rgba(255, 255, 255, 0.72);
}

.safari-marker:hover .safari-marker__ring,
.safari-marker:focus-visible .safari-marker__ring,
.safari-marker.is-active .safari-marker__ring {
    fill: var(--map-gold);
    stroke: #ffffff;
    transform: scale(1.18);
}

.safari-marker:hover .safari-marker__point,
.safari-marker:focus-visible .safari-marker__point,
.safari-marker.is-active .safari-marker__point {
    transform: scale(0.72);
}

.safari-marker.is-active .safari-marker__pulse {
    opacity: 1;
    animation:
        safariMarkerPulse
        2.4s ease-out
        infinite;
}

/* Keep destination markers interactive above routes and vehicle */

.safari-map__routes,
.safari-jeep {
    pointer-events: none;
}

.safari-marker[role="button"] {
    pointer-events: all;
    cursor: pointer;
}

.safari-marker[role="button"]:focus-visible {
    outline: none;
}

.safari-marker[role="button"]:focus-visible
.safari-marker__ring {
    stroke: #ffffff;
    stroke-width: 3;
}

/* ==================================================
   COMPASS + LEGEND
================================================== */

.safari-map__compass circle {
    fill: rgba(5, 24, 15, 0.28);
    stroke: rgba(255, 255, 255, 0.18);
}

.safari-map__compass path {
    fill: var(--map-gold-light);
}

.safari-map__compass text {
    fill: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
}

.safari-map__legend {
    position: absolute;
    right: 26px;
    bottom: 25px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(3, 17, 11, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.safari-map__legend span {
    display: flex;
    gap: 8px;
    align-items: center;
}

.safari-map__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.safari-map__legend .is-available {
    background: var(--map-gold-light);
    box-shadow:
        0 0 10px
        rgba(225, 189, 123, 0.6);
}

.safari-map__legend .is-coming {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.7);
}

/* ==================================================
   INFORMATION PANEL
================================================== */

.safari-map__panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding:
        clamp(38px, 4.5vw, 64px)
        clamp(30px, 4vw, 56px);
    color: #ffffff;
    background:
        linear-gradient(
            165deg,
            #273f31,
            #152b20 64%,
            #0d2017
        );
}

.safari-map__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(216, 170, 88, 0.14),
            transparent 38%
        );
}

.safari-map__panel.is-changing
.safari-map__panel-content,
.safari-map__panel.is-changing
.safari-map__details,
.safari-map__panel.is-changing
.safari-map__wildlife,
.safari-map__panel.is-changing
.safari-map__panel-actions {
    opacity: 0;
    transform: translateY(12px);
}

.safari-map__panel-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding-bottom: 28px;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.safari-map__panel-count {
    margin: 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.safari-map__availability {
    padding: 8px 11px;
    color: #1b2f23;
    background: var(--map-gold-light);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        color 300ms ease,
        background 300ms ease;
}

.safari-map__availability.is-coming {
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.08);
    border:
        1px solid
        rgba(255, 255, 255, 0.18);
}

.safari-map__panel-content,
.safari-map__details,
.safari-map__wildlife,
.safari-map__panel-actions {
    transition:
        opacity 250ms ease,
        transform 400ms var(--map-ease);
}

.safari-map__panel-content {
    padding-top: clamp(40px, 6vw, 75px);
}

.safari-map__panel-category {
    margin: 0 0 10px;
    color: var(--map-gold-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.safari-map__panel h3 {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.9;
}

.safari-map__panel-description {
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.98rem;
    line-height: 1.85;
}

.safari-map__details {
    display: grid;
    gap: 0;
    margin: 42px 0 0;
}

.safari-map__details > div {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 24px;
    padding: 18px 0;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.safari-map__details dt {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.safari-map__details dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
}

.safari-map__wildlife {
    margin-top: 28px;
}

.safari-map__wildlife > p {
    margin: 0 0 13px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.safari-map__wildlife-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.safari-map__wildlife-list span {
    padding: 8px 11px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.065);
    border:
        1px solid
        rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 0.67rem;
}

.safari-map__panel-actions {
    display: grid;
    gap: 18px;
    margin-top: auto;
    padding-top: 42px;
}

.safari-map__primary-action {
    justify-content: space-between;
    width: 100%;
}

.safari-map__primary-action.is-disabled {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.safari-map__secondary-action {
    width: max-content;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        color 250ms ease;
}

.safari-map__secondary-action:hover {
    color: var(--map-gold-light);
}

/* ==================================================
   MOBILE SELECTOR
================================================== */

.safari-map__mobile-selector {
    display: none;
}

/* ==================================================
   ANIMATIONS
================================================== */

@keyframes safariMarkerPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.45);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes safariRouteTravel {
    to {
        stroke-dashoffset: -38;
    }
}

@keyframes safariMapHint {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1040px) {
    .safari-map__experience {
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(310px, 0.88fr);
    }

    .safari-map__canvas {
        min-height: 650px;
    }

    .safari-map__experience {
        min-height: 650px;
    }

    .safari-map__panel {
        padding:
            40px
            32px;
    }
}

@media (max-width: 820px) {
    .safari-map__header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .safari-map__intro {
        max-width: 650px;
    }

    .safari-map__experience {
        grid-template-columns: 1fr;
    }

    .safari-map__canvas {
        min-height: 610px;
    }

    .safari-map__panel {
        min-height: 580px;
    }

    .safari-map__panel-content {
        padding-top: 42px;
    }

    .safari-map__mobile-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 18px;
    }

    .safari-map__mobile-option {
        display: grid;
        gap: 7px;
        min-height: 82px;
        padding: 15px;
        cursor: pointer;
        color: var(--map-muted);
        background: rgba(255, 255, 255, 0.42);
        border: 1px solid var(--map-border);
        border-radius: 16px;
        font: inherit;
        font-size: 0.71rem;
        font-weight: 700;
        text-align: left;
        transition:
            color 300ms ease,
            background 300ms ease,
            border-color 300ms ease,
            transform 300ms var(--map-ease);
    }

    .safari-map__mobile-option span {
        color: var(--map-gold);
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .safari-map__mobile-option.is-active {
        color: #ffffff;
        background: var(--map-green);
        border-color: var(--map-green);
        transform: translateY(-3px);
    }
}

@media (max-width: 560px) {
    .safari-map {
        padding:
            80px 0
            95px;
    }

    .safari-map__heading h2 {
        font-size: clamp(3rem, 15vw, 4.4rem);
    }

    .safari-map__experience {
        border-radius: 22px;
    }

    .safari-map__canvas {
        min-height: 500px;
    }

    .safari-map__svg {
        width: 108%;
        transform: translateX(-2%);
    }

    .safari-map__status {
        top: 16px;
        left: 16px;
        font-size: 0.58rem;
    }

    .safari-map__legend {
        right: 14px;
        bottom: 14px;
        gap: 10px;
        font-size: 0.55rem;
    }

    .safari-marker__label {
        font-size: 15px;
    }

    .safari-map__panel {
        min-height: 630px;
        padding:
            34px
            24px;
    }

    .safari-map__details > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .safari-map__details dd {
        text-align: left;
    }

    .safari-map__mobile-selector {
        grid-template-columns: 1fr;
    }

    .safari-map__mobile-option {
        grid-template-columns: 38px 1fr;
        align-items: center;
        min-height: 58px;
    }
}

/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {
    .safari-jeep,
    .safari-jeep__body,
    .safari-jeep-dust,
    .safari-jeep-dust__particle,
    .safari-map__compass,
    .safari-map__compass path {
        animation: none !important;
        transition: none !important;
    }
}

/* ==================================================
   FINAL JEEP + DUST STABILITY OVERRIDES
================================================== */

.safari-map__routes,
.safari-jeep,
.safari-jeep-dust {
    pointer-events: none;
}

.safari-marker[role="button"] {
    pointer-events: all;
    cursor: pointer;
}

.safari-jeep,
.safari-jeep-dust {
    transform-box: view-box;
    transform-origin: 0 0;
}

.safari-jeep {
    opacity: 0;
    filter: none;
    transition: opacity 320ms ease, filter 320ms ease;
}

.safari-jeep.is-visible {
    opacity: 1;
}

.safari-jeep.is-fading {
    opacity: 0;
    filter: blur(1.5px);
}

.safari-jeep__body {
    transform-box: fill-box;
    transform-origin: center;
    animation: none;
}

.safari-jeep.is-moving .safari-jeep__body {
    animation: safariJeepEngine 420ms ease-in-out infinite alternate;
}

.safari-jeep.is-starting .safari-jeep__body {
    animation: safariJeepIgnition 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.safari-jeep.is-arriving .safari-jeep__body {
    animation: safariJeepArrivalBody 650ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.safari-jeep-dust {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease;
}

.safari-jeep-dust.is-visible {
    opacity: 1;
    visibility: visible;
}

.safari-jeep-dust__particle {
    fill: rgba(229, 196, 132, 0.82);
    stroke: rgba(255, 232, 184, 0.18);
    stroke-width: 0.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 2px rgba(229, 196, 132, 0.35));
}

.safari-jeep-dust.is-moving .safari-jeep-dust__particle {
    animation-name: safariDustTrail;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.safari-jeep-dust.is-settling .safari-jeep-dust__particle {
    animation: safariDustSettle 720ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .safari-jeep,
    .safari-jeep__body,
    .safari-jeep-dust,
    .safari-jeep-dust__particle,
    .safari-map__compass,
    .safari-map__compass path {
        animation: none !important;
        transition: none !important;
    }
}


/* ==================================================
   PHASE 2 — WILDLIFE EXPLORER
================================================== */

.safari-wildlife {
    pointer-events: none;
}

.safari-wildlife__scene {
    opacity: 0;
    visibility: hidden;
    transform-box: fill-box;
    transform-origin: center;
    transform: translateY(12px) scale(0.94);
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 760ms;
}

.safari-wildlife__scene.is-active {
    opacity: 0.92;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 80ms, 80ms, 0s;
}

.safari-wildlife__fill {
    fill: rgba(31, 52, 40, 0.78);
}

.safari-wildlife__fill--earth {
    fill: rgba(151, 86, 44, 0.78);
}

.safari-wildlife__detail-fill {
    fill: rgba(201, 148, 71, 0.45);
}

.safari-wildlife__detail-fill--earth {
    fill: rgba(231, 180, 105, 0.42);
}

.safari-wildlife__mane {
    fill: none;
    stroke: rgba(31, 52, 40, 0.72);
    stroke-width: 7;
}

.safari-wildlife__line,
.safari-wildlife__detail,
.safari-wildlife__tusk {
    fill: none;
    stroke: rgba(31, 52, 40, 0.76);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.safari-wildlife__detail {
    stroke: rgba(201, 148, 71, 0.72);
    stroke-width: 1.4;
}

.safari-wildlife__tusk {
    stroke: rgba(248, 238, 214, 0.96);
    stroke-width: 2.4;
}

.safari-wildlife__mountain-back {
    fill: rgba(63, 87, 70, 0.22);
    stroke: rgba(31, 52, 40, 0.28);
    stroke-width: 2;
}

.safari-wildlife__mountain-snow {
    fill: rgba(248, 241, 225, 0.78);
}

.safari-wildlife__balloon,
.safari-wildlife__animal,
.safari-wildlife__mountain,
.safari-wildlife__baobab {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.safari-wildlife__scene.is-active .safari-wildlife__balloon {
    animation: safariBalloonDrift 7s ease-in-out infinite alternate;
}

.safari-wildlife__scene.is-active .safari-wildlife__animal--lion {
    animation: safariWildlifeBreathe 4.8s ease-in-out infinite;
}

.safari-wildlife__scene.is-active .safari-wildlife__herd {
    animation: safariHerdDrift 6.5s ease-in-out infinite alternate;
}

.safari-wildlife__scene.is-active .safari-wildlife__animal--elephant,
.safari-wildlife__scene.is-active .safari-wildlife__animal--elephant-small,
.safari-wildlife__scene.is-active .safari-wildlife__animal--tsavo-elephant {
    animation: safariElephantSway 4.4s ease-in-out infinite;
}

.safari-wildlife__scene.is-active .safari-wildlife__animal--giraffe {
    animation: safariGiraffeLook 5.8s ease-in-out infinite;
}

.safari-wildlife__scene.is-active .safari-wildlife__baobab {
    animation: safariBaobabBreathe 7s ease-in-out infinite alternate;
}

@keyframes safariBalloonDrift {
    from { transform: translate3d(-3px, 3px, 0) rotate(-1deg); }
    to { transform: translate3d(7px, -7px, 0) rotate(1.5deg); }
}

@keyframes safariWildlifeBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.018); }
}

@keyframes safariHerdDrift {
    from { transform: translateX(-3px); }
    to { transform: translateX(7px); }
}

@keyframes safariElephantSway {
    0%, 100% { transform: rotate(-0.7deg) translateY(0); }
    50% { transform: rotate(0.8deg) translateY(-1px); }
}

@keyframes safariGiraffeLook {
    0%, 100% { transform: rotate(0); }
    45% { transform: rotate(-1.8deg); }
    70% { transform: rotate(1deg); }
}

@keyframes safariBaobabBreathe {
    from { transform: scale(0.99); }
    to { transform: scale(1.015); }
}

@media (max-width: 820px) {
    .safari-wildlife__scene {
        opacity: 0;
    }

    .safari-wildlife__scene.is-active {
        opacity: 0.74;
    }
}

@media (prefers-reduced-motion: reduce) {
    .safari-wildlife__scene,
    .safari-wildlife__scene.is-active,
    .safari-wildlife__scene.is-active .safari-wildlife__balloon,
    .safari-wildlife__scene.is-active .safari-wildlife__animal,
    .safari-wildlife__scene.is-active .safari-wildlife__herd,
    .safari-wildlife__scene.is-active .safari-wildlife__mountain,
    .safari-wildlife__scene.is-active .safari-wildlife__baobab {
        animation: none !important;
        transition: none !important;
        transform: none;
    }
}


/* ==================================================
   PHASE 2 — DYNAMIC TIME OF DAY
================================================== */

.safari-map__canvas {
    --time-sky-top: #274d38;
    --time-sky-bottom: #0b2017;
    --time-glow: rgba(244, 169, 73, 0.3);
    --time-map-brightness: 1;
    --time-map-saturation: 1;
    --time-map-hue: 0deg;
    transition: background 1.2s ease, box-shadow 1.2s ease;
}

.safari-map__canvas[data-time="dawn"] {
    --time-sky-top: #6f6672;
    --time-sky-bottom: #243d37;
    --time-glow: rgba(255, 174, 111, 0.34);
    --time-map-brightness: 1.06;
    --time-map-saturation: 0.88;
    background:
        radial-gradient(circle at 22% 28%, rgba(255, 192, 134, 0.34), transparent 34%),
        linear-gradient(155deg, #7d6b73 0%, #43564c 48%, #172d25 100%);
}

.safari-map__canvas[data-time="day"] {
    --time-sky-top: #47725e;
    --time-sky-bottom: #173c2c;
    --time-glow: rgba(255, 224, 143, 0.24);
    --time-map-brightness: 1.1;
    --time-map-saturation: 1.02;
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 232, 171, 0.24), transparent 30%),
        linear-gradient(145deg, #315f48 0%, #173d2c 55%, #0c2419 100%);
}

.safari-map__canvas[data-time="sunset"] {
    --time-sky-top: #6d4933;
    --time-sky-bottom: #172b20;
    --time-glow: rgba(255, 151, 65, 0.38);
    --time-map-brightness: 0.98;
    --time-map-saturation: 1.08;
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 157, 70, 0.42), transparent 34%),
        linear-gradient(145deg, #70472f 0%, #3d3d2d 48%, #10251b 100%);
}

.safari-map__canvas[data-time="night"] {
    --time-sky-top: #14223a;
    --time-sky-bottom: #050d14;
    --time-glow: rgba(123, 164, 255, 0.18);
    --time-map-brightness: 0.68;
    --time-map-saturation: 0.62;
    --time-map-hue: -8deg;
    background:
        radial-gradient(circle at 76% 17%, rgba(124, 153, 224, 0.16), transparent 28%),
        linear-gradient(150deg, #172743 0%, #0b1727 50%, #040b11 100%);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.32);
}

.safari-time__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.safari-time__atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(2, 12, 8, 0.18));
    transition: opacity 1.2s ease;
}

.safari-time__horizon {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: 8%;
    height: 36%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--time-glow), transparent 66%);
    filter: blur(18px);
    opacity: 0.9;
    transition: background 1.2s ease, opacity 1.2s ease, transform 1.2s ease;
}

.safari-time__sun,
.safari-time__moon {
    position: absolute;
    width: 54px;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.2s ease;
}

.safari-time__sun {
    top: 14%;
    right: 16%;
    background: #ffe4a0;
    box-shadow: 0 0 38px rgba(255, 210, 120, 0.54), 0 0 90px rgba(255, 164, 68, 0.22);
    transform: translateY(45px) scale(0.75);
}

.safari-time__moon {
    top: 12%;
    right: 15%;
    background: #dce8f7;
    box-shadow: 0 0 28px rgba(184, 211, 255, 0.35);
    transform: translateY(38px) scale(0.7);
}

.safari-time__moon::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: -7px;
    left: 13px;
    border-radius: 50%;
    background: #172743;
}

.safari-time__stars {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle at 29% 11%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 20%, rgba(255,255,255,.8) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at 61% 10%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
        radial-gradient(circle at 80% 25%, rgba(255,255,255,.86) 0 1px, transparent 1.6px),
        radial-gradient(circle at 91% 9%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
        radial-gradient(circle at 22% 34%, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 38%, rgba(255,255,255,.68) 0 1px, transparent 1.5px);
    transition: opacity 1.2s ease;
}

.safari-map__canvas[data-time="dawn"] .safari-time__sun,
.safari-map__canvas[data-time="day"] .safari-time__sun,
.safari-map__canvas[data-time="sunset"] .safari-time__sun {
    opacity: 1;
}

.safari-map__canvas[data-time="dawn"] .safari-time__sun {
    top: 29%;
    right: 77%;
    transform: scale(0.76);
    filter: saturate(0.86);
}

.safari-map__canvas[data-time="day"] .safari-time__sun {
    top: 10%;
    right: 15%;
    transform: scale(0.9);
}

.safari-map__canvas[data-time="sunset"] .safari-time__sun {
    top: 28%;
    right: 10%;
    transform: scale(0.82);
    filter: saturate(1.3);
}

.safari-map__canvas[data-time="night"] .safari-time__moon {
    opacity: 1;
    transform: scale(0.84);
}

.safari-map__canvas[data-time="night"] .safari-time__stars {
    opacity: 0.78;
    animation: safariStarsTwinkle 5.5s ease-in-out infinite alternate;
}

.safari-map__canvas[data-time="night"] .safari-time__horizon {
    opacity: 0.34;
    transform: translateY(12%);
}

.safari-map__canvas .safari-map__svg {
    filter:
        brightness(var(--time-map-brightness))
        saturate(var(--time-map-saturation))
        hue-rotate(var(--time-map-hue));
    transition: filter 1.2s ease;
}

.safari-map__canvas[data-time="night"] .safari-route--active,
.safari-map__canvas[data-time="night"] .safari-marker__ring,
.safari-map__canvas[data-time="night"] .safari-jeep__light {
    filter: drop-shadow(0 0 5px rgba(255, 198, 95, 0.72));
}

.safari-map__canvas[data-time="night"] .safari-jeep__light {
    r: 2.8;
    fill: #ffe8a6;
}

.safari-time {
    position: absolute;
    top: 25px;
    right: 26px;
    z-index: 5;
    display: grid;
    justify-items: end;
    gap: 8px;
}

.safari-time__label {
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    background: rgba(3,17,11,.34);
    backdrop-filter: blur(12px);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.safari-time__options {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(3,17,11,.36);
    backdrop-filter: blur(14px);
}

.safari-time__option {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.62);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .28s ease, background .28s ease, transform .28s ease;
}

.safari-time__option:hover,
.safari-time__option:focus-visible {
    color: #fff;
    outline: none;
    background: rgba(255,255,255,.1);
}

.safari-time__option.is-active {
    color: #13281d;
    background: #e3bd76;
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.safari-time__option:active {
    transform: scale(.96);
}

@keyframes safariStarsTwinkle {
    from { opacity: .5; transform: scale(1); }
    to { opacity: .88; transform: scale(1.008); }
}

@media (max-width: 820px) {
    .safari-time {
        top: 66px;
        right: 16px;
    }
}

@media (max-width: 560px) {
    .safari-time {
        top: 54px;
        right: 12px;
        left: 12px;
        justify-items: stretch;
    }

    .safari-time__label {
        justify-self: end;
        font-size: .52rem;
    }

    .safari-time__options {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .safari-time__options::-webkit-scrollbar { display: none; }

    .safari-time__option {
        flex: 0 0 auto;
        padding-inline: 9px;
        font-size: .52rem;
    }

    .safari-time__sun,
    .safari-time__moon {
        width: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .safari-map__canvas,
    .safari-map__svg,
    .safari-time__sun,
    .safari-time__moon,
    .safari-time__stars,
    .safari-time__horizon {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   STEP 7 — GREAT MIGRATION
   ========================================================= */
.great-migration {
    opacity: 0;
    pointer-events: none;
    transition: opacity .65s ease;
}

.great-migration.is-active { opacity: 1; }
.great-migration__track { fill: none; stroke: none; }

.great-migration__runner {
    opacity: 0;
    transform-origin: 0 0;
    transition: opacity .35s ease;
}

.great-migration.is-running .great-migration__runner { opacity: 1; }

.great-migration__animal ellipse,
.great-migration__animal circle,
.great-migration__predators ellipse,
.great-migration__predators circle {
    fill: #25372c;
}

.great-migration__animal path,
.great-migration__birds path,
.great-migration__grass path,
.great-migration__predators path {
    fill: none;
    stroke: #25372c;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.great-migration__animal--zebra ellipse,
.great-migration__animal--zebra circle { fill: #ede2c7; stroke: #25372c; stroke-width: 1.8; }
.great-migration__animal--zebra path { stroke-width: 2.2; }

.great-migration__animal {
    transform-box: fill-box;
    transform-origin: center;
    animation: migrationGallop .42s ease-in-out infinite alternate;
}
.great-migration__animal:nth-child(2) { animation-delay: -.14s; }
.great-migration__animal:nth-child(3) { animation-delay: -.28s; }
.great-migration__animal:nth-child(4) { animation-delay: -.08s; }

.great-migration__dust circle {
    fill: rgba(181, 132, 74, .34);
    transform-box: fill-box;
    transform-origin: center;
    animation: migrationDust 1.15s ease-out infinite;
}
.great-migration__dust circle:nth-child(2) { animation-delay: -.38s; }
.great-migration__dust circle:nth-child(3) { animation-delay: -.76s; }

.great-migration__birds {
    opacity: 0;
    animation: migrationBirds 5.4s ease-in-out infinite alternate;
}
.great-migration.is-active .great-migration__birds { opacity: .72; }

.great-migration__grass { opacity: .55; }
.great-migration.is-running .great-migration__grass path {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: migrationGrass .65s ease-in-out infinite alternate;
}

.great-migration__predators {
    opacity: 0;
    transition: opacity 1.1s ease .2s;
}
.great-migration.has-arrived .great-migration__predators { opacity: .62; }

.safari-map__canvas[data-time="night"] .great-migration__animal ellipse,
.safari-map__canvas[data-time="night"] .great-migration__animal circle,
.safari-map__canvas[data-time="night"] .great-migration__predators ellipse,
.safari-map__canvas[data-time="night"] .great-migration__predators circle { fill: #d8c99f; }
.safari-map__canvas[data-time="night"] .great-migration__animal path,
.safari-map__canvas[data-time="night"] .great-migration__birds path,
.safari-map__canvas[data-time="night"] .great-migration__grass path,
.safari-map__canvas[data-time="night"] .great-migration__predators path { stroke: #d8c99f; }

@keyframes migrationGallop {
    from { translate: 0 -1px; rotate: -1deg; }
    to { translate: 0 2px; rotate: 1deg; }
}
@keyframes migrationDust {
    0% { opacity: 0; scale: .45; translate: 8px 0; }
    35% { opacity: .7; }
    100% { opacity: 0; scale: 1.8; translate: -18px -7px; }
}
@keyframes migrationBirds {
    from { transform: translate(-8px, 2px); }
    to { transform: translate(14px, -8px); }
}
@keyframes migrationGrass {
    from { transform: skewX(-3deg); }
    to { transform: skewX(6deg); }
}

@media (max-width: 560px) {
    .great-migration__birds { opacity: .52; }
    .great-migration__predators { opacity: 0; }
    .great-migration.has-arrived .great-migration__predators { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .great-migration__animal,
    .great-migration__dust circle,
    .great-migration__birds,
    .great-migration__grass path { animation: none !important; }
    .great-migration__runner { transition: none !important; }
}


/* ==================================================
   STEP 8 — CUSTOM ILLUSTRATED KENYA MAP
================================================== */

.kenya-illustration {
    pointer-events: none;
    color: rgba(41, 58, 43, .62);
}

.kenya-illustration__ocean {
    fill: rgba(79, 142, 145, .13);
}

.kenya-illustration__coast,
.kenya-illustration__wave,
.kenya-illustration__waterline,
.kenya-illustration__rift,
.kenya-illustration__rift-hatch,
.kenya-illustration__mountain-detail,
.kenya-illustration__region path,
.kenya-illustration__acacia path,
.kenya-illustration__palm path,
.kenya-illustration__wild-mark path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kenya-illustration__coast {
    stroke: rgba(45, 94, 91, .5);
    stroke-width: 3;
}

.kenya-illustration__wave {
    stroke: rgba(45, 94, 91, .38);
    stroke-width: 2;
}

.kenya-illustration__lake path:first-child {
    fill: rgba(65, 123, 132, .33);
    stroke: rgba(255, 255, 255, .28);
    stroke-width: 1.5;
}

.kenya-illustration__waterline {
    stroke: rgba(255, 255, 255, .45);
    stroke-width: 1.5;
}

.kenya-illustration__rift {
    stroke: rgba(121, 79, 42, .42);
    stroke-width: 3.5;
    stroke-dasharray: 2 9;
}

.kenya-illustration__rift-hatch {
    stroke: rgba(121, 79, 42, .24);
    stroke-width: 2;
}

.kenya-illustration__mountain-range {
    fill: rgba(80, 91, 69, .28);
    stroke: rgba(49, 66, 49, .42);
    stroke-width: 2;
    stroke-linejoin: round;
}

.kenya-illustration__snow {
    fill: rgba(255, 255, 255, .55);
}

.kenya-illustration__mountain-detail {
    stroke: rgba(255, 255, 255, .34);
    stroke-width: 1.5;
}

.kenya-illustration__region path {
    stroke-width: 2.2;
    opacity: .48;
}

.kenya-illustration__region--north { color: rgba(137, 103, 58, .48); }
.kenya-illustration__region--savanna { color: rgba(65, 91, 57, .55); }
.kenya-illustration__region--east { color: rgba(126, 81, 45, .45); }

.kenya-illustration__acacia path,
.kenya-illustration__palm path {
    stroke-width: 3;
}

.kenya-illustration__acacia path:last-child {
    fill: rgba(35, 60, 42, .34);
    stroke: rgba(35, 60, 42, .46);
}

.kenya-illustration__palm { color: rgba(41, 78, 55, .56); }

.kenya-illustration__labels text {
    fill: rgba(31, 47, 35, .54);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-anchor: middle;
    text-transform: uppercase;
}

.kenya-illustration__labels text:nth-child(2) { font-size: 9px; }
.kenya-illustration__labels text:nth-child(5) {
    fill: rgba(57, 104, 105, .58);
    transform: rotate(-64deg);
    transform-origin: 552px 688px;
}

.kenya-illustration__wild-mark {
    color: rgba(38, 57, 42, .42);
}

.kenya-illustration__wild-mark path {
    stroke-width: 2;
}

.safari-map__canvas[data-time="sunset"] .kenya-illustration__ocean,
.safari-map__canvas[data-time="dawn"] .kenya-illustration__ocean {
    fill: rgba(120, 121, 113, .14);
}

.safari-map__canvas[data-time="night"] .kenya-illustration {
    color: rgba(207, 198, 157, .48);
}

.safari-map__canvas[data-time="night"] .kenya-illustration__ocean {
    fill: rgba(55, 97, 119, .24);
}

.safari-map__canvas[data-time="night"] .kenya-illustration__labels text {
    fill: rgba(223, 213, 173, .56);
}

.safari-map__canvas[data-time="night"] .kenya-illustration__labels text:nth-child(5) {
    fill: rgba(152, 202, 210, .56);
}

@media (max-width: 560px) {
    .kenya-illustration__labels text { font-size: 9px; }
    .kenya-illustration__labels text:nth-child(2),
    .kenya-illustration__wild-mark { display: none; }
    .kenya-illustration__region path { opacity: .34; }
}