/* ═══════════════ SafarMore Horizons — shared styles ═══════════════ */

/* Ken Burns hero zoom */
@keyframes kenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.12); }
}
/* Staggered hero entrance */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-bg-img   { animation: kenBurns 20s ease-out forwards; }
.hero-enter    { opacity: 0; animation: fadeUp 0.9s ease-out forwards; }
.hero-enter-1  { animation-delay: 0.2s; }
.hero-enter-2  { animation-delay: 0.5s; }
.hero-enter-3  { animation-delay: 0.8s; }
.hero-enter-4  { animation-delay: 1.1s; }
.hero-enter-5  { opacity: 0; animation: fadeIn 1s ease-out 1.8s forwards; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.25, 0, 0.25, 1),
                transform 0.7s cubic-bezier(0.25, 0, 0.25, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle dot-grid texture for light sections */
.dot-texture {
    background-image: radial-gradient(circle, rgba(15,45,82,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Scalloped arch divider */
.arch-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 10;
    line-height: 0;
}

/* Offset anchored sections so they aren't hidden under the fixed navbar */
html { scroll-padding-top: 5.5rem; }

/* Nav transition */
#nav { transition: background 0.4s, padding 0.4s, box-shadow 0.4s; }

/* Skip-to-content link (visible on keyboard focus) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #0F2D52;
    color: #fff;
    padding: 0.6rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Active nav link stays gold */
.nav-link.nav-active { color: #D4B257 !important; }

/* Mobile menu transitions */
#mobileMenu { transition: opacity 0.3s, visibility 0.3s; }
#mobileMenu.open {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Experience dialogs (native <dialog>) ─────────────────────── */
dialog[data-exp] { border: none; }
dialog[data-exp]::backdrop {
    background: rgba(9, 29, 55, 0.72);
    backdrop-filter: blur(3px);
}
dialog[data-exp][open] .exp-card {
    animation: dlgIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes dlgIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Accessibility ───────────────────────────────────────────── */
/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2B82D4;
    outline-offset: 2px;
    border-radius: 3px;
}
.menu-line { /* hamburger lines never steal the focus ring */ }

/* Respect reduced-motion: no Ken Burns, no entrance/reveal animation */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-bg-img { animation: none; transform: none; }
    .hero-enter, .hero-enter-5 { opacity: 1; animation: none; }
    .reveal { opacity: 1; transform: none; }
}