/* =============================================================================
   LAWELIYA — GLOBAL CINEMATIC LAYER SYSTEM
   File: assets/css/cinematic-layer.css
   
   ADDITIVE ONLY — extends existing CSS, overwrites nothing.
   Applies to all pages via .lcl-* namespace.
   ============================================================================= */


/* =============================================================================
   LAYER ARCHITECTURE — z-index map
   
   0    body background
   1    .lcl-bg-layer    ← fullscreen video/image
   2    .lcl-grain       ← film grain overlay
   3    .lcl-vignette    ← edge darkening
   4    .lcl-gradient    ← directional gradient
   5    existing page content (untouched)
   100  site-header (preserved)
   ============================================================================= */


/* =============================================================================
   1. BACKGROUND VIDEO LAYER
   ============================================================================= */

.lcl-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* GPU layer promotion */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.lcl-bg-video {
  position: absolute;
  inset: -5%; /* slight oversize hides parallax edges */
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
  transition: transform 0.1s linear;
  backface-visibility: hidden;
  /* Fade in gracefully */
  opacity: 0;
  animation: lclVideoFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes lclVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Static fallback when video not loaded/mobile */
.lcl-bg-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}


/* =============================================================================
   2. FILM GRAIN OVERLAY
   ============================================================================= */

.lcl-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  animation: lclGrainShift 0.12s steps(1) infinite;
}

@keyframes lclGrainShift {
  0%  { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: -5% 25%; }
  50% { background-position: -15% 10%; }
  60% { background-position: 15% 0%; }
  70% { background-position: 0 15%; }
  80% { background-position: 3% 35%; }
  90% { background-position: -10% 10%; }
}


/* =============================================================================
   3. VIGNETTE
   ============================================================================= */

.lcl-vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 90% at 50% 50%,
    transparent 35%,
    rgba(5, 5, 4, 0.45) 70%,
    rgba(5, 5, 4, 0.82) 100%
  );
}


/* =============================================================================
   4. PAGE-SPECIFIC DIRECTIONAL GRADIENTS
   ============================================================================= */

.lcl-gradient {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Home — bottom-heavy dark, sides clear for content */
body.page-template-front-page .lcl-gradient,
body.home .lcl-gradient {
  background:
    linear-gradient(180deg,
      rgba(5,5,4,0.55) 0%,
      rgba(5,5,4,0.2)  35%,
      rgba(5,5,4,0.2)  65%,
      rgba(5,5,4,0.75) 100%
    ),
    linear-gradient(90deg,
      rgba(5,5,4,0.6) 0%,
      transparent     40%,
      transparent     60%,
      rgba(5,5,4,0.4) 100%
    );
}

/* Safaris — dark left edge for filter panel */
body.page-template-page-safaris .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.7) 0%,
    rgba(5,5,4,0.4) 25%,
    rgba(5,5,4,0.35) 75%,
    rgba(5,5,4,0.8) 100%
  );
}

/* Destinations — dark top, lighter mid for content rows */
body.page-template-page-destinations .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.75) 0%,
    rgba(5,5,4,0.45) 30%,
    rgba(5,5,4,0.45) 70%,
    rgba(5,5,4,0.85) 100%
  );
}

/* Lodges — strong center overlay, card content pops */
body.page-template-page-lodges .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.7) 0%,
    rgba(5,5,4,0.3) 30%,
    rgba(5,5,4,0.3) 70%,
    rgba(5,5,4,0.7) 100%
  );
}

/* Gallery — subtle, images should dominate */
body.page-template-page-gallery .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.65) 0%,
    rgba(5,5,4,0.15) 20%,
    rgba(5,5,4,0.15) 80%,
    rgba(5,5,4,0.65) 100%
  );
}

/* Booking — strong overlay, form must be readable */
body.page-template-page-bookings .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.8) 0%,
    rgba(5,5,4,0.55) 100%
  );
}

/* About */
body.page-template-page-about .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.65) 0%,
    rgba(5,5,4,0.35) 35%,
    rgba(5,5,4,0.35) 65%,
    rgba(5,5,4,0.75) 100%
  );
}

/* Contact */
body.page-template-page-contact .lcl-gradient {
  background: linear-gradient(180deg,
    rgba(5,5,4,0.6) 0%,
    rgba(5,5,4,0.3) 30%,
    rgba(5,5,4,0.3) 70%,
    rgba(5,5,4,0.7) 100%
  );
}


/* =============================================================================
   5. FOREGROUND CONTENT LIFT
   Ensures all existing page content sits above the cinematic layers.
   Applied without changing any structural CSS.
   ============================================================================= */

/* Lift <main> above layers */
#primary,
.site-main,
main,
.main-content,
.page-content {
  position: relative;
  z-index: 5;
}

/* Header always on top */
.site-header,
#site-header {
  position: fixed;
  z-index: 100;
}

/* Footer above layers but below header */
.site-footer,
#site-footer {
  position: relative;
  z-index: 10;
}


/* =============================================================================
   6. SECTION GLASSMORPHISM ENHANCEMENT
   Adds subtle glass depth to existing sections without changing their layout.
   ============================================================================= */

/* Sections that benefit from glass backdrop */
.hp-hero,
.hero-section,
.booking-hero,
.about-hero,
.contact-hero,
.safaris-hero,
.destinations-hero,
.act-hero,
.gal-hero {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

/* Content cards — subtle glass enhancement on hover */
.destination-card,
.safari-card,
.lodge-card,
.safari-card-luxury,
.lodge-card-luxury,
.hp-tour-card,
.hp-review-card,
.hp-glass-card,
.act-category {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}


/* =============================================================================
   7. CINEMATIC SCROLL REVEAL CLASSES
   Add class="lcl-reveal" to any element for automatic entrance animation.
   ============================================================================= */

.lcl-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.lcl-reveal.lcl-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.lcl-reveal-left {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.lcl-reveal-left.lcl-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.lcl-reveal-right {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.lcl-reveal-right.lcl-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger children */
.lcl-stagger > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.lcl-stagger.lcl-visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(2)  { transition-delay: 0.12s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(3)  { transition-delay: 0.19s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(4)  { transition-delay: 0.26s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(5)  { transition-delay: 0.33s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(6)  { transition-delay: 0.40s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(7)  { transition-delay: 0.47s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(8)  { transition-delay: 0.54s; opacity: 1; transform: translate3d(0,0,0); }
.lcl-stagger.lcl-visible > *:nth-child(n+9){ transition-delay: 0.60s; opacity: 1; transform: translate3d(0,0,0); }


/* =============================================================================
   8. CINEMATIC PAGE TRANSITION OVERLAY
   ============================================================================= */

.lcl-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--ink, #080806);
  transform-origin: bottom;
  transform: scaleY(0);
}

.lcl-page-transition.lcl-entering {
  animation: lclTransitionIn 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.lcl-page-transition.lcl-leaving {
  transform-origin: top;
  animation: lclTransitionOut 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes lclTransitionIn {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes lclTransitionOut {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}


/* =============================================================================
   9. BOOKING PAGE — GLASSMORPHISM PANEL ENHANCEMENT
   Adds glass depth to existing booking panels without restructuring them.
   ============================================================================= */

body.page-template-page-bookings .booking-wrapper,
body.page-template-page-bookings .booking-container,
body.page-template-page-bookings .booking-panel,
body.page-template-page-bookings .booking-step,
body.page-template-page-bookings form {
  background: rgba(8, 8, 6, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(200, 164, 110, 0.16) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 164, 110, 0.06) !important;
}

body.page-template-page-bookings input,
body.page-template-page-bookings select,
body.page-template-page-bookings textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(200, 164, 110, 0.2) !important;
  color: var(--text-bright, #ede8de) !important;
  backdrop-filter: blur(8px);
}

body.page-template-page-bookings input:focus,
body.page-template-page-bookings select:focus,
body.page-template-page-bookings textarea:focus {
  border-color: rgba(200, 164, 110, 0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200, 164, 110, 0.08) !important;
}


/* =============================================================================
   10. PARALLAX SCROLL — video follows scroll at 0.3x rate
   Handled by JS; this ensures no layout shift from the transform.
   ============================================================================= */

.lcl-parallax-active .lcl-bg-video,
.lcl-parallax-active .lcl-bg-fallback {
  will-change: transform;
  transform: translate3d(0, var(--lcl-parallax-y, 0px), 0) scale(1.1);
}


/* =============================================================================
   11. CINEMATIC CURSOR GLOW (desktop only)
   ============================================================================= */

.lcl-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(200, 164, 110, 0.06) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.3s;
  will-change: transform;
}


/* =============================================================================
   12. VIDEO TRANSITION — cross-fade between page video changes
   ============================================================================= */

.lcl-bg-video.lcl-fading {
  animation: lclVideoFadeOut 0.6s ease forwards;
}
.lcl-bg-video.lcl-fading-in {
  animation: lclVideoFadeIn 1s ease forwards;
}

@keyframes lclVideoFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* =============================================================================
   13. MOBILE OPTIMISATIONS
   On mobile: disable video (too heavy), reduce effects, keep grain
   ============================================================================= */

@media (max-width: 768px) {
  .lcl-bg-video {
    display: none; /* rely on fallback gradient/image */
  }
  .lcl-bg-fallback {
    /* Ensure fallback is visible on mobile */
    opacity: 1 !important;
  }
  .lcl-grain {
    opacity: 0.018; /* slightly less grain on mobile */
  }
  .lcl-cursor-glow {
    display: none;
  }
  .lcl-page-transition {
    display: none; /* skip page transition on slow devices */
  }
}

@media (prefers-reduced-motion: reduce) {
  .lcl-bg-video,
  .lcl-grain,
  .lcl-reveal,
  .lcl-reveal-left,
  .lcl-reveal-right,
  .lcl-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Print — remove all cinematic layers */
@media print {
  .lcl-bg-layer,
  .lcl-grain,
  .lcl-vignette,
  .lcl-gradient,
  .lcl-cursor-glow,
  .lcl-page-transition { display: none !important; }
}