/* Smooth anchor scroll + offset for the fixed navbar */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 80px;
}

body {
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar ---------- */
#navbar {
    background: transparent;
}

#navbar.navbar-scrolled {
    background: rgba(250, 246, 241, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    box-shadow: 0 1px 0 rgba(61, 46, 38, 0.06);
}

/* While over the hero, nav links are white; after scroll, ink */
#navbar .nav-link {
    color: rgba(255, 255, 255, 0.92);
    transition: color 200ms ease;
    position: relative;
}

#navbar .nav-link:hover {
    color: #ffffff;
}

#navbar.navbar-scrolled .nav-link {
    color: #3D2E26;
}

#navbar.navbar-scrolled .nav-link:hover {
    color: #9A6C53;
}

#navbar a[href="#hero"] {
    color: rgba(255, 255, 255, 0.92);
}

#navbar.navbar-scrolled a[href="#hero"] {
    color: #3D2E26;
}

/* ---------- Hero ---------- */
.hero-swiper .swiper-slide img {
    /* Subtle Ken-Burns-ish breathing while the slide is active */
    will-change: transform;
}

/* Swiper pagination styling */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.5 !important;
    width: 8px;
    height: 8px;
    transition: opacity 200ms ease, transform 200ms ease;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.2);
}

/* Scroll indicator line animation */
.scroll-indicator-line {
    position: relative;
    overflow: hidden;
}

.scroll-indicator-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    transform-origin: top;
    animation: scroll-line 2.4s ease-in-out infinite;
}

@keyframes scroll-line {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Timeline ---------- */
.timeline-dot {
    position: absolute;
    left: 1rem;            /* 16px - matches mobile padding */
    top: 0.6rem;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #FAF6F1;
    border: 2px solid #B5856A;
    transform: translateX(-50%);
}

@media (min-width: 640px) {
    .timeline-dot {
        left: 50%;
    }
}

/* ---------- Embed placeholders (size-locked so layout doesn't jump) ---------- */
.map-embed-slot {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 320px;
    max-height: 480px;
    background: #F1EAE0;
}

.map-embed-slot iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

.map-placeholder,
.tally-placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.tally-embed-slot {
    min-height: 700px;
}

.tally-embed-slot iframe {
    width: 100% !important;
    min-height: 700px;
    border: 0;
    display: block;
}

/* ---------- Fade-in on scroll ---------- */
.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-in { opacity: 1; transform: none; transition: none; }
    .scroll-indicator-line::after { animation: none; }
}