/* ============================================================
   index.css — Homepage Shell + Loading Overlay
   Primali Travels | www.primalitravels.com
   Version: 11.0

   SCOPE RULES — READ BEFORE EDITING:
   ─────────────────────────────────────────────────────────────
   ✔  This file owns: loading overlay, #main-content shell,
      container slots, error banner, scroll helpers, mobile
      nav glue, accessibility, print.

   ✗  This file must NEVER style anything inside a template
      container. Every template-* section is fully owned by
      its own template-*.css file. Any selector that descends
      into template markup must be removed.

   ✗  No body/html rules that duplicate main.css.
      main.css already sets: body font/color/bg/overflow-x,
      html font-size/scroll-behavior. Only scroll-padding-top
      is added here (page-specific offset).

   ✗  No position, z-index, overflow, or background on
      template containers — only min-height is permitted
      (layout placeholder while template loads).

   All colour/font/spacing values via main.css variables ONLY.
   No hardcoded hex values. No inline CSS. No company data.
   ============================================================ */


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 1 — LOADING OVERLAY                           │
   │                                                         │
   │  HTML structure expected in index.html:                 │
   │    #loading-overlay                                     │
   │      └── .overlay-wrap                                  │
   │            └── .logo-wrap                               │
   │                  ├── .logo-ring   (spinning arc)        │
   │                  └── img.loading-logo  (pulsing logo)   │
   │                                                         │
   │  Design intent:                                         │
   │    - Full-screen dark backdrop with ambient gold glow   │
   │    - Frosted glass card centres the logo assembly       │
   │    - Spinning conic-gradient arc = progress metaphor    │
   │    - Logo breathes gently inside the ring               │
   │    - NO progress bar, NO loading text, NO stages        │
   │                                                         │
   │  TO MODIFY THIS OVERLAY — edit only between:            │
   │    ── BEGIN OVERLAY CUSTOMISATION                       │
   │    ── END OVERLAY CUSTOMISATION                         │
   │  Everything is self-contained and clearly labelled.     │
   └─────────────────────────────────────────────────────────┘ */

/* ── BEGIN OVERLAY CUSTOMISATION ─────────────────────────── */

/* Fullscreen backdrop */
#loading-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;

  /* Deep dark radial backdrop matching site dark theme */
  background:
    radial-gradient(ellipse 140% 100% at 50% -10%,
      rgba(201, 168, 76, 0.07)  0%,
      transparent               55%),
    radial-gradient(ellipse 80% 80% at 80% 110%,
      rgba(26, 26, 40, 0.60)    0%,
      transparent               60%),
    var(--bg-primary);

  z-index: var(--z-index-maximum);
  overflow: hidden;

  opacity: 1;
  visibility: visible;
  transition:
    opacity     0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility  0s  linear 0s;
}

/* Dismiss — added by index.js hideLoadingOverlay() */
#loading-overlay.loading-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity     0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility  0s  linear 0.7s;
}

/* Slow-drifting ambient glow blobs — depth without distraction */
#loading-overlay::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40% 35% at 25% 20%,
      var(--color-gold-glow)          0%, transparent 70%),
    radial-gradient(30% 28% at 75% 75%,
      rgba(26, 26, 40, 0.50)          0%, transparent 70%);
  filter: blur(32px);
  animation: olAmbientDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
#loading-overlay::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(35% 30% at 70% 15%,
      rgba(201, 168, 76, 0.05) 0%, transparent 65%);
  filter: blur(40px);
  animation: olAmbientDrift 24s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

@keyframes olAmbientDrift {
  0%   { transform: translate3d(0,    0,    0) scale(1);    opacity: 0.80; }
  100% { transform: translate3d(2.5%, -2%,  0) scale(1.05); opacity: 1;    }
}

/* Frosted glass card — wraps the logo assembly */
.overlay-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--spacing-10) var(--spacing-12);
  background: rgba(255, 255, 255, 0.030);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-white-08);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 168, 76, 0.06);
}

/* Logo + ring assembly container */
.logo-wrap {
  position: relative;
  width: 152px;
  height: 152px;
  display: grid;
  place-items: center;
}

/*
   SPINNING RING — circular motion progress
   ─────────────────────────────────────────
   A conic-gradient arc masked to a thin ring via CSS mask.
   The arc is asymmetric (bright leading edge, fade-out tail)
   to read as directional motion rather than a static border.

   Tuneable values:
   • Ring thickness  → change the 72% mask threshold
   • Spin speed      → change 2.0s in olRingSpin
   • Arc length      → change the degree stops in conic-gradient
*/
.logo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    transparent             0deg,
    transparent             195deg,
    var(--color-gold-dark)  238deg,
    var(--color-gold)       282deg,
    var(--color-gold-light) 324deg,
    var(--color-gold-pale)  352deg,
    transparent             360deg
  );

  /* Mask to thin ring — increase 72% to make thinner */
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
          mask: radial-gradient(farthest-side, transparent 72%, #000 73%);

  filter: blur(0.3px);
  box-shadow: 0 0 28px rgba(201, 168, 76, 0.20);
  animation: olRingSpin 2.0s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
  will-change: transform;
}

/* Second counter-ring — fainter, slower, opposite direction */
.logo-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent               0deg,
    transparent               255deg,
    rgba(201, 168, 76, 0.16)  298deg,
    rgba(201, 168, 76, 0.05)  340deg,
    transparent               360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 77%);
          mask: radial-gradient(farthest-side, transparent 76%, #000 77%);
  animation: olRingSpin 3.4s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite reverse;
}

@keyframes olRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Logo image — gentle breathing animation */
.loading-logo {
  position: relative;
  z-index: 2;            /* sits above both ring layers */
  width: 110px;
  height: 110px;
  border-radius: var(--radius-xl);
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
  animation: olLogoBreathe 3.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes olLogoBreathe {
  0%,  100% { transform: scale(1.00); opacity: 1.00; }
  50%        { transform: scale(1.04); opacity: 0.88; }
}

/* Reduced motion — stop animations, keep visual */
@media (prefers-reduced-motion: reduce) {
  #loading-overlay::before,
  #loading-overlay::after,
  .logo-ring,
  .logo-ring::after,
  .loading-logo {
    animation: none !important;
  }
  .loading-logo { opacity: 1 !important; transform: none !important; }
  .logo-ring    { opacity: 0.55; }
}

/* Overlay responsive sizing */
@media (max-width: 480px) {
  .overlay-wrap  { padding: var(--spacing-8) var(--spacing-9); }
  .logo-wrap     { width: 122px; height: 122px; }
  .loading-logo  { width:  88px; height:  88px; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .overlay-wrap  { padding: var(--spacing-6) var(--spacing-10); }
  .logo-wrap     { width: 104px; height: 104px; }
  .loading-logo  { width:  74px; height:  74px; }
}

/* GPU compositing — overlay elements only */
.logo-ring,
.loading-logo,
.overlay-wrap {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── END OVERLAY CUSTOMISATION ────────────────────────────── */


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 2 — ERROR BANNER                              │
   │  Shown by index.js via addClass('show') only.          │
   │  No display manipulation in HTML.                      │
   └─────────────────────────────────────────────────────────┘ */

#error-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-error);
  color: var(--text-white);
  padding: var(--spacing-3) var(--spacing-4);
  text-align: center;
  z-index: calc(var(--z-index-maximum) - 1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
}

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

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

#error-message button {
  background: var(--color-white-20);
  border: 1px solid var(--color-white-30);
  color: var(--text-white);
  padding: var(--spacing-1-5) var(--spacing-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: var(--spacing-3);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: var(--transition-fast);
}

#error-message button:hover {
  background: var(--color-white-30);
  transform: translateY(-1px);
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 3 — SCROLL PADDING                            │
   │  scroll-behavior is already set in main.css.           │
   │  Only the page-specific offset is declared here.       │
   └─────────────────────────────────────────────────────────┘ */

html { scroll-padding-top: 120px; }

@media (max-width: 767.98px) { html { scroll-padding-top: 80px; } }
@media (max-width: 575.98px) { html { scroll-padding-top: 70px; } }


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 4 — #main-content SHELL                       │
   │                                                         │
   │  Controls visibility reveal only.                       │
   │  contain:style — safe for fixed/sticky children.        │
   │  contain:layout REMOVED — breaks IntersectionObserver,  │
   │  sticky positioning, and grid layouts inside templates.  │
   └─────────────────────────────────────────────────────────┘ */

#main-content {
  opacity: 0;
  transition: opacity 0.3s ease;
  min-height: 100vh;
  contain: style;
}

#main-content.ready {
  opacity: 1;
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 5 — TEMPLATE CONTAINER SLOTS                  │
   │                                                         │
   │  Empty placeholder divs while templates load.          │
   │  ONLY min-height is set — nothing else.                 │
   │                                                         │
   │  ✗ NO overflow:hidden  → clips hero absolute elements  │
   │  ✗ NO z-index          → templates own their stacking  │
   │  ✗ NO background       → templates own their own bg    │
   │  ✗ NO position rules                                    │
   │                                                         │
   │  content-visibility + contain-intrinsic-size are       │
   │  performance hints only — not visual constraints.       │
   └─────────────────────────────────────────────────────────┘ */

#hero-slider-container {
  min-height: 600px;
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

#why-book-with-us-container {
  min-height: 300px;
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

#about-srilanka-container {
  min-height: 400px;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

#featured-packages-container {
  min-height: 700px;
  content-visibility: auto;
  contain-intrinsic-size: 0 700px;
}

#destinations-container  { min-height: 600px; }
#testimonials-container  { min-height: 500px; }

/* Container slot responsive */
@media (max-width: 991.98px) {
  #hero-slider-container       { min-height: 500px; contain-intrinsic-size: 0 500px; }
  #featured-packages-container { min-height: 600px; contain-intrinsic-size: 0 600px; }
}

@media (max-width: 767.98px) {
  #hero-slider-container       { min-height: 400px; contain-intrinsic-size: 0 400px; }
  #featured-packages-container { min-height: 500px; contain-intrinsic-size: 0 500px; }
  #destinations-container      { min-height: 450px; }
}

@media (max-width: 575.98px) {
  #hero-slider-container       { min-height: 350px; contain-intrinsic-size: 0 350px; }
  #featured-packages-container { min-height: 400px; contain-intrinsic-size: 0 400px; }
  #destinations-container      { min-height: 350px; }
  #testimonials-container      { min-height: 300px; }
}

@media (min-width: 1400px) {
  #hero-slider-container       { min-height: 700px; contain-intrinsic-size: 0 700px; }
  #featured-packages-container { min-height: 800px; contain-intrinsic-size: 0 800px; }
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 6 — TEMPLATE FALLBACK / SKELETON STATES       │
   │  Shown inside containers while templates are fetching. │
   └─────────────────────────────────────────────────────────┘ */

.template-loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  margin: var(--spacing-5) 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: var(--text-sm);
}

.template-fallback {
  padding: var(--spacing-10) var(--spacing-5);
  text-align: center;
  border: 2px dashed var(--border-primary);
  border-radius: var(--radius-xl);
  margin: var(--spacing-5);
  font-family: var(--font-primary);
}

.template-fallback h2 {
  color: var(--color-gold);
  margin-bottom: var(--spacing-4);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
}

.template-fallback p {
  color: var(--text-muted);
  margin-bottom: var(--spacing-5);
  line-height: var(--leading-relaxed);
}

.template-fallback button {
  background: var(--gradient-gold);
  color: var(--text-white);
  border: none;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: var(--transition-elegant);
}

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

/* Skeleton shimmer — dark-theme tuned */
.content-loading {
  background: linear-gradient(90deg,
    var(--color-gray-50)  25%,
    var(--color-gray-100) 50%,
    var(--color-gray-50)  75%);
  background-size: 200% 100%;
  animation: clShimmer 2s infinite;
  border-radius: var(--radius-sm);
  height: 20px;
  margin-bottom: var(--spacing-3);
}

.content-loading.title { height: 32px; width: 60%; margin-bottom: var(--spacing-4); }
.content-loading.text  { height: 16px; width: 80%; }
.content-loading.text:last-child { width: 40%; }

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

@media (max-width: 767.98px) {
  .template-fallback { padding: var(--spacing-8) var(--spacing-4); margin: var(--spacing-4); }
  .template-fallback h2 { font-size: var(--text-xl); }
}

@media (max-width: 575.98px) {
  .template-fallback { padding: var(--spacing-6) var(--spacing-3); margin: var(--spacing-3); }
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 7 — SCROLL ANIMATION UTILITY CLASSES          │
   │  Applied by IntersectionObserver in index.js on         │
   │  generic elements. NOT applied to template roots.       │
   └─────────────────────────────────────────────────────────┘ */

.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.85);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.visible       { opacity: 1; transform: scale(1); }


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 8 — ACCESSIBILITY                             │
   └─────────────────────────────────────────────────────────┘ */

.skip-to-content {
  position: absolute;
  top: -52px;
  left: var(--spacing-3);
  background: var(--gradient-gold);
  color: var(--text-white);
  padding: var(--spacing-2-5) var(--spacing-4);
  border-radius: var(--radius-md);
  z-index: var(--z-index-maximum);
  transition: top 0.3s ease;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
}
.skip-to-content:focus  { top: var(--spacing-3); outline: none; box-shadow: var(--shadow-gold); }
.skip-to-content:hover  { color: var(--text-white); text-decoration: 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;
}

#main-content:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 9 — MOBILE NAVIGATION GLUE                    │
   │  State classes toggled by index.js — zero inline        │
   │  styles. Selectors use generic class names that do      │
   │  NOT conflict with template-header.css (.pt-* prefix). │
   └─────────────────────────────────────────────────────────┘ */

/* Prevent body scroll when mobile nav drawer is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* WhatsApp floating widget — positioned here, not inline */
.whatsapp-container {
  position: fixed;
  bottom: var(--spacing-5);
  right: var(--spacing-5);
  z-index: var(--z-index-sticky);
  pointer-events: auto;
}

/* Minimum touch target on interactive mobile elements */
.mobile-menu-toggle,
#whatsapp-float-btn,
.whatsapp-float-btn-modern,
.quick-reply-btn-modern,
.auto-chat-btn,
.nav-cta {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

@media (max-width: 767.98px) {
  .whatsapp-container { bottom: var(--spacing-4); right: var(--spacing-4); }
}


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 10 — PERFORMANCE UTILITY CLASSES              │
   └─────────────────────────────────────────────────────────┘ */

.will-change-transform { will-change: transform; }
.will-change-opacity   { will-change: opacity;   }


/* ┌─────────────────────────────────────────────────────────┐
   │  SECTION 11 — PRINT                                    │
   └─────────────────────────────────────────────────────────┘ */

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

  #main-content { opacity: 1 !important; }

  #hero-slider-container,
  #why-book-with-us-container,
  #about-srilanka-container,
  #featured-packages-container,
  #destinations-container,
  #testimonials-container {
    min-height: 0 !important;
    content-visibility: visible !important;
  }
}


/* ============================================================
   END — index.css v11.0 | Primali Travels
   ─────────────────────────────────────────────────────────
   Section  1  Loading Overlay  (BEGIN/END markers inside)
   Section  2  Error Banner
   Section  3  Scroll Padding
   Section  4  #main-content Shell
   Section  5  Template Container Slots
   Section  6  Template Fallback / Skeleton States
   Section  7  Scroll Animation Utility Classes
   Section  8  Accessibility
   Section  9  Mobile Navigation Glue
   Section 10  Performance Utility Classes
   Section 11  Print
   ============================================================ */