/*
 * index.css — Homepage-specific styles
 * Samora Ceylon · 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 (v2: circular logo)
   A clean daylight screen with only the round Samora Ceylon logo.
   A metallic gold arc sweeps around it and a soft emerald glow
   breathes behind it. On load the logo lifts slightly as the screen
   fades. The logo, ring and glow share one grid cell, so they stay
   perfectly centred at any size.
═══════════════════════════════════════════════════════════════ */

#loading-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg-primary);
    z-index: 9999;
    transition: opacity 0.7s ease, visibility 0.7s ease;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    isolation: isolate;
}

#loading-overlay > *,
#loading-overlay::before,
#loading-overlay::after { grid-area: 1 / 1; }

/* Soft emerald and gold glow behind the logo */
#loading-overlay::before {
    content: "";
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--er-gold-bright-rgb), 0.30) 0%,
        rgba(var(--er-gold-bright-rgb), 0.10) 45%,
        transparent 70%);
    animation: loaderGlow 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* Metallic gold arc sweeping around the logo */
#loading-overlay::after {
    content: "";
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(var(--er-gold-bright-rgb), 0) 40deg,
        var(--er-gold-antique) 150deg,
        var(--er-gold-soft) 215deg,
        var(--er-gold-bright) 250deg,
        transparent 300deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: loaderSweep 1.6s cubic-bezier(.5, .1, .5, .9) infinite;
    pointer-events: none;
}

.loading-logo {
    position: relative;
    z-index: 1;
    width: 184px;
    height: 184px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 12px 22px rgba(var(--er-scrim-rgb), 0.18));
    animation:
        loaderIn 0.9s cubic-bezier(.16, 1, .3, 1) both,
        loaderBreathe 2.4s ease-in-out 0.9s infinite;
    will-change: transform;
    transition: transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

@keyframes loaderIn {
    from { opacity: 0; transform: scale(0.86); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes loaderBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@keyframes loaderGlow {
    0%, 100% { transform: scale(0.92); opacity: 0.75; }
    50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes loaderSweep {
    to { transform: rotate(360deg); }
}

/* Hide overlay when loading is complete: the logo lifts as it fades */
#loading-overlay.loading-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#loading-overlay.loading-complete .loading-logo {
    animation: none;
    transform: scale(1.08);
}

@media (max-width: 576px) {
    .loading-logo { width: 150px; height: 150px; }
    #loading-overlay::after { width: 164px; height: 164px; }
    #loading-overlay::before { width: 240px; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-logo,
    #loading-overlay::before,
    #loading-overlay::after { animation: 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);
    color: var(--text-on-accent);
    padding: 12px 0;
    text-align: center;
    z-index: 10000;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(var(--color-navy-rgb),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(var(--color-white-rgb),0.2);
    border: 1px solid rgba(var(--color-white-rgb),0.3);
    color: var(--text-on-accent);
    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(var(--color-white-rgb),0.32);
}


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

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 10px;
    background: var(--color-gold);
    color: var(--text-on-accent);
    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);
    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);
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid var(--border-secondary);
}

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

.template-fallback {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-gold);
    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);
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.template-fallback button {
    background: var(--gradient-gold);
    color: var(--text-on-accent);
    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: var(--color-navy-abyss);
        border: 2px solid var(--color-gold);
    }

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

    #error-message {
        border: 2px solid var(--color-white);
    }

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

    .skip-to-content {
        border: 2px solid var(--color-navy-abyss);
    }
}


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

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

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