/* Home page: banner that leads to the TrailTrack AI planners hub (/ai/). */
.tt-ai-banner { width: 100%; margin: 24px auto 0; }
.tt-ai-banner__card {
    --ab-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 36px);
    padding: clamp(20px, 3vw, 32px) clamp(20px, 3.5vw, 40px); border-radius: 28px; color: #fff; text-decoration: none;
    background-color: #10291d;
    background-image: linear-gradient(90deg, rgba(5, 20, 13, .88) 0%, rgba(5, 20, 13, .76) 36%, rgba(5, 20, 13, .18) 66%, rgba(5, 20, 13, .42) 100%), url('../../img/home/ai-planner-forest-lake-v1.webp');
    background-size: cover;
    background-position: center, center 60%;
    box-shadow: 0 24px 54px rgba(11, 29, 20, .3); transition: transform .4s var(--ab-ease), box-shadow .4s var(--ab-ease);
}
.tt-ai-banner__card:hover { transform: translateY(-3px); box-shadow: 0 32px 68px rgba(11, 29, 20, .38); }
.tt-ai-banner__card:focus-visible { outline: 3px solid #ffb27f; outline-offset: 4px; }
.tt-ai-banner__topo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; animation: ab-drift 18s ease-in-out infinite alternate; }
.tt-ai-banner__copy { display: grid; gap: 8px; min-width: 0; max-width: 600px; }
.tt-ai-banner__chip { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd2b5; }
.tt-ai-banner__chip svg { width: 15px; height: 15px; fill: #ffb27f; }
.tt-ai-banner__copy strong { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.tt-ai-banner__text { max-width: 54ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.tt-ai-banner__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tt-ai-banner__tags span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; color: #e3f2e8; }
.tt-ai-banner__visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.tt-ai-banner__route { fill: none; stroke: #ff8a47; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 106, 26, .6)); animation: ab-draw 2.4s var(--ab-ease, ease) .3s forwards, ab-loop 9s ease-in-out 3s infinite; }
.tt-ai-banner__pin { fill: #fff; stroke: #2c8a5a; stroke-width: 3.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ab-pin .5s cubic-bezier(.34, 1.56, .64, 1) .3s forwards; }
.tt-ai-banner__pin--2 { animation-delay: 1s; } .tt-ai-banner__pin--3 { animation-delay: 1.8s; }
.tt-ai-banner__pin--end { stroke: #ff6a1a; stroke-width: 4; animation: ab-pin .5s cubic-bezier(.34, 1.56, .64, 1) 2.5s forwards, ab-pulse 2.2s ease-in-out 3s infinite; }
.tt-ai-banner__cta {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 16px; white-space: nowrap;
    background: linear-gradient(135deg, #ff6a1a, #ef540c); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 12px 28px rgba(255, 106, 26, .45);
}
.tt-ai-banner__cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ab-ease); }
.tt-ai-banner__card:hover .tt-ai-banner__cta svg { transform: translateX(4px); }

/* The photograph replaces the abstract map decoration; keep the scenery clear. */
.tt-ai-banner__topo, .tt-ai-banner__visual { display: none; }

@keyframes ab-drift { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes ab-draw { to { stroke-dashoffset: 0; } }
@keyframes ab-loop { 0%, 70%, 100% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: .03; } }
@keyframes ab-pin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ab-pulse { 50% { transform: scale(1.3); } }

@media (max-width: 900px) {
    .tt-ai-banner__card { grid-template-columns: minmax(0, 1fr) auto; }
    .tt-ai-banner__visual { display: none; }
}
@media (max-width: 600px) {
    .tt-ai-banner { width: calc(100% - 32px); margin-top: 16px; }
    .tt-ai-banner__card {
        grid-template-columns: 1fr; border-radius: 22px;
        background-image: linear-gradient(180deg, rgba(5, 20, 13, .80), rgba(5, 20, 13, .58) 58%, rgba(5, 20, 13, .82)), url('../../img/home/ai-planner-forest-lake-v1.webp');
        background-position: center, 64% center;
    }
    .tt-ai-banner__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-ai-banner__topo, .tt-ai-banner__route, .tt-ai-banner__pin { animation: none; }
    .tt-ai-banner__route { stroke-dashoffset: 0; } .tt-ai-banner__pin { opacity: 1; }
    .tt-ai-banner__card, .tt-ai-banner__cta svg { transition: none; }
}