/*
 * index.css — Homepage-specific styles
 * Finwin Travels · Premium Sri Lanka Tours
 *
 * SCOPE RULES (strict):
 *   ✔  #loading-overlay and its children
 *   ✔  #error-message
 *   ✔  #main-content (opacity/transition on page load only)
 *   ✔  .skip-to-content  .sr-only  (accessibility helpers)
 *   ✔  .fade-in .slide-in-* .scale-in .rotate-in (generic IO helpers)
 *   ✔  .content-loading .template-loading .template-fallback (placeholder states)
 *   ✔  WBU IntersectionObserver compat fix
 *
 *   ✘  body / html — governed by main.css
 *   ✘  Template section backgrounds — governed by each template CSS
 *   ✘  WhatsApp / translate / language — governed by template-header.css
 *   ✘  Any .tt-* .ac-hero* .ac-why* .asl-* .sv-* classes
 */


/* ═══════════════════════════════════════════════════════════════
   LOADING OVERLAY
   Jet Black splash screen — the whole site is this theme now, so the
   overlay simply matches the page it reveals rather than contrasting
   with it. Built from the current main.css Jet Black tokens so it
   stays in sync with the brand automatically.
═══════════════════════════════════════════════════════════════ */

#loading-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    /* Flat Jet Black — matches --color-navy-abyss/-deep/(base) */
    background: var(--color-navy-abyss, #000000);
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    isolation: isolate; /* contain internal stacking contexts — prevents pseudo-element
                           filter/transform from affecting sibling fixed elements */
}

/* Subtle ambient shimmer — gold tint on dark, fitting brand palette */
#loading-overlay::before,
#loading-overlay::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(40% 30% at 20% 15%, rgba(var(--color-gold-rgb), 0.08) 0%, transparent 70%),
        radial-gradient(30% 25% at 80% 70%, rgba(var(--color-gold-rgb), 0.06) 0%, transparent 70%);
    filter: blur(20px);
    animation: overlayFloat 14s ease-in-out infinite alternate;
    pointer-events: none;
}
#loading-overlay::after {
    animation-delay: -7s;
    transform: rotate(15deg);
}

@keyframes overlayFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.9; }
    100% { transform: translate3d(2%, -2%, 0) scale(1.03);  opacity: 1;   }
}

/* Logo pulse animation */
.loading-logo {
    width: 104px;
    height: 104px;
    border-radius: 18px;
    /* Subtle gold glow on dark — visible without a bright background */
    box-shadow: 0 8px 30px rgba(var(--color-gold-rgb), 0.15), 0 0 0 1px rgba(var(--color-gold-rgb), 0.10);
    animation: logoPulse 2.2s ease-in-out infinite;
    will-change: transform, opacity;
    position: relative;
    z-index: 1;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.06); opacity: 0.88; }
}

/* Hide overlay when loading is complete */
#loading-overlay.loading-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT — fade-in on page ready
   No contain property — it breaks position:sticky headers and
   IntersectionObserver measurements on mobile viewports.
   No background, no padding, no z-index — all governed by templates.
═══════════════════════════════════════════════════════════════ */

#main-content {
    visibility: hidden;
    min-height: 100vh;
}
#main-content.ready {
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   ERROR MESSAGE
═══════════════════════════════════════════════════════════════ */

#error-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-error, #e84040);
    color: var(--color-white, #fff);
    padding: 12px 0;
    text-align: center;
    z-index: 10000;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    font-family: var(--font-primary);
}

#error-message.show {
    display: block;
    animation: slideDown 0.3s ease;
}

#error-message.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

#error-message p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
}

#error-message button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white, #fff);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: inherit;
    font-size: 13px;
    /* Do not inherit width:100% from main.css mobile rule —
       this is a small inline action button, not a CTA */
    width: auto;
}

#error-message button:hover {
    background: rgba(255, 255, 255, 0.32);
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY HELPERS
═══════════════════════════════════════════════════════════════ */

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 10px;
    background: var(--color-gold, #D9B54A);
    color: var(--color-navy-deep, #050505);
    padding: 10px 15px;
    border-radius: 5px;
    z-index: 10001;
    transition: top 0.3s ease;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 14px;
}

.skip-to-content:focus {
    top: 10px;
    box-shadow: 0 0 0 3px rgba(var(--color-gold-rgb), 0.5);
    outline: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ═══════════════════════════════════════════════════════════════
   INTERSECTION OBSERVER ANIMATION HELPERS
   Generic utility classes used by index.js observer
═══════════════════════════════════════════════════════════════ */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

.rotate-in {
    opacity: 0;
    transform: rotate(10deg) scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.rotate-in.visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}


/* ═══════════════════════════════════════════════════════════════
   LOADING PLACEHOLDER SKELETONS
   Used while template sections are being fetched.
   Dark palette skeletons — match the dark site theme.
═══════════════════════════════════════════════════════════════ */

.content-loading {
    background: var(--color-navy, #0A0A0A);
    background-size: 200% 100%;
    animation: loadingShimmer 2s infinite;
    border-radius: 8px;
    height: 20px;
    margin-bottom: 12px;
}

.content-loading.title { height: 32px; width: 60%; margin-bottom: 16px; }
.content-loading.text  { height: 16px; width: 80%; margin-bottom: 8px;  }
.content-loading.text:last-child { width: 40%; }

@keyframes loadingShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.template-loading {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #101010);
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid var(--border-secondary, #1E1E1E);
}

.template-loading::after {
    content: 'Loading...';
    color: var(--text-muted, #9A9DA3);
    font-style: italic;
    font-family: var(--font-primary);
    font-size: 14px;
}

.template-fallback {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-secondary, #101010);
    border: 2px dashed var(--border-gold, rgba(217, 181, 74, 0.35));
    border-radius: 12px;
    margin: 20px;
    font-family: var(--font-primary);
}

.template-fallback h2 {
    color: var(--color-gold);
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
}

.template-fallback p {
    color: var(--text-muted, #9A9DA3);
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.template-fallback button {
    background: var(--gradient-gold);
    color: var(--color-navy-deep, #050505);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.3s ease;
    /* Override main.css mobile btn width — this is not a page CTA */
    width: auto;
}

.template-fallback button:hover {
    background: var(--gradient-gold-hover);
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   WBU SECTION — IntersectionObserver compat fix
   Ensures slide-right / slide-left animations are not clipped
   by any parent stacking context on mobile.
═══════════════════════════════════════════════════════════════ */

#why-book-with-us-container [data-wbu-animate="slide-right"],
#why-book-with-us-container [data-wbu-animate="slide-left"] {
    contain: none;
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    #loading-overlay::before,
    #loading-overlay::after,
    .loading-logo,
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .rotate-in {
        animation: none !important;
        transition: none !important;
    }

    #main-content {
        visibility: visible;
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   HIGH CONTRAST
═══════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
    #loading-overlay {
        background: #000000;
        border: 2px solid var(--color-gold, #D9B54A);
    }

    .loading-logo {
        animation: none !important;
        box-shadow: 0 0 0 2px var(--color-gold, #D9B54A);
    }

    #error-message {
        border: 2px solid #ffffff;
    }

    .template-fallback {
        border-color: var(--color-gold, #D9B54A);
        border-width: 2px;
    }

    .skip-to-content {
        border: 2px solid #000;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════ */

@media print {
    #loading-overlay,
    #error-message {
        display: none !important;
    }

    #main-content {
        visibility: visible !important;
    }
}