/* =====================================================
   ENIGMA — ENHANCEMENTS & FIXES
   css/enhancements.css

   Contains:
   1. Header alignment fix
   2. PNG logo system
   3. Favicon meta (CSS reference only)
   4. Floating PNG hero icons
   5. Quest page parallax layers
   6. Footer partner PNG logos (4 items)
   7. Neon glow intensity controls
   8. Performance optimizations
===================================================== */

/* =====================================================
   1. HEADER ALIGNMENT FIX
   Fixes vertical misalignment of nav items vs other elements
===================================================== */

/* Root header height token */
:root {
  --header-height: 90px;
  --header-height-scrolled: 72px;
  /* Neon glow intensity controls — edit these to adjust all glows */
  --glow-intensity-blue:  0.4;   /* 0.0 = off, 1.0 = maximum */
  --glow-intensity-red:   0.4;
  --glow-intensity-yellow: 0.35;
  --glow-blur-sm:  15px;
  --glow-blur-md:  30px;
  --glow-blur-lg:  50px;
}

/* ── Header outer: fixed height for perfectly consistent alignment ── */
.site-header {
  padding: 0 !important;           /* remove padding — use height instead */
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.site-header.scrolled {
  height: var(--header-height-scrolled);
  transition: height .35s ease, background .4s ease, box-shadow .4s ease;
}

/* ── Inner wrapper: strict flexbox centering ── */
.header-inner {
  display: flex;
  align-items: center;             /* ✅ vertically centers EVERYTHING */
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  width: 100%;
}

/* ── Logo: explicit height match ── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  flex-shrink: 0;
  padding: 10px 0;
}

/* ── PNG Logo wrapper (replaces icon+text) ── */
.logo-png-wrap {
  height: 74px;
  display: flex;
  align-items: center;
}
/*
  TO USE PNG LOGO:
  1. Upload your logo file to: images/logo.png
  2. The .logo-png img will display it automatically
  3. The text fallback .logo-text-fallback will be hidden
*/
/* Header PNG logo — transparent background, neon glow */
.logo-png-wrap img.logo-png {
  height: 74px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 8px rgba(255, 200, 0, 0.55))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transition: filter .3s ease, transform .3s ease;
}
.logo-png-wrap img.logo-png:hover {
  filter:
    drop-shadow(0 0 16px rgba(255, 200, 0, 0.85))
    drop-shadow(0 0 32px rgba(0, 200, 255, 0.45))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  transform: scale(1.05);
}
/* Show PNG if src is valid, else show text */
.logo-png-wrap img.logo-png[src="images/logo.png"] {
  /* will be visible when file exists */
}

/* ── Navigation: force vertical center alignment ── */
.main-nav {
  display: flex;
  align-items: center;   /* ✅ nav itself centered in header */
  height: 100%;
}
.main-nav ul {
  display: flex;
  align-items: center;   /* ✅ all <li> items centered */
  gap: 2px;
  height: 100%;
  margin: 0;
  padding: 0;
}
.main-nav ul li {
  display: flex;
  align-items: center;
  height: 100%;
}
.main-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  line-height: 1;         /* ✅ prevents text from shifting up */
}
/* Remove any vertical displacement from pseudo-element */
.main-nav a::after {
  bottom: 10px;
}

/* ── Header-right: all items centered ── */
.header-right {
  display: flex;
  align-items: center;   /* ✅ all right-side elements aligned */
  gap: 12px;
  height: 100%;
}

/* ── Lang buttons: force consistent height ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  line-height: 1;
}

/* ── Social icons: explicit size & center ── */
.social-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  line-height: 1;
}

/* ── Phone CTA: explicit flex alignment ── */
.header-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  line-height: 1;
}

/* ── Burger: centered vertically ── */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-direction: column;
  gap: 5px;
}

/* =====================================================
   2. PNG LOGO SYSTEM — Header & Quest Pages
===================================================== */

/*
  Usage:
  <a href="index.html" class="logo">
    <span class="logo-png-wrap">
      <img src="images/logo.png" alt="Enigma" class="logo-png" />
    </span>
    <!-- Fallback if no PNG uploaded: -->
    <span class="logo-text-fallback">
      <span class="logo-icon"><i class="fas fa-door-open"></i></span>
      <span class="logo-text">ESCAPE ROOM<span class="logo-accent">.</span></span>
    </span>
  </a>

  When logo.png exists → PNG shows, fallback hidden
  When logo.png 404s  → fallback icon+text shows
*/

.logo-text-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =====================================================
   3. QUEST PAGE PARALLAX SYSTEM
===================================================== */

/* Quest hero BG: smooth parallax transform */
.quest-hero-bg {
  will-change: transform;
  transform-origin: center center;
}

/* Parallax depth layers in quest hero */
.quest-parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform .08s linear;
}
/* Layer 1 — slowest (background) */
.quest-parallax-layer-1 { z-index: 1; }
/* Layer 2 — medium (neon shapes) */
.quest-parallax-layer-2 { z-index: 2; }
/* Layer 3 — fastest (floating icons) */
.quest-parallax-layer-3 { z-index: 3; }

/* Neon shape extras for quest pages */
.quest-hero-shapes .neon-shape {
  will-change: transform;
  transition: transform .12s ease;
}

/* =====================================================
   5. FOOTER — 4 PNG PARTNER LOGOS
===================================================== */

.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Each partner logo item
   NOTE: border-radius + overflow:hidden removed — these clip the PNG alpha
   channel and prevent drop-shadow from following the real logo silhouette.
   Shadow is now applied directly to the <img> via filter: drop-shadow(). */
.partner-logo-item {
  position: relative;
  opacity: 0.6;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
  /* border-radius / overflow:hidden ← intentionally absent; see note above */
}
.partner-logo-item:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.04);
}

/*
  PNG LOGO IMAGE
  Upload: images/partner1.png … partner4.png
  Size: recommended 160×60px (2:1 ratio)
  Background: transparent (PNG)
*/
/* ── Partner logo <img> — shape-aware shadow via filter: drop-shadow()
   The shadow follows the actual logo silhouette (respects PNG transparency).
   No box-shadow, no overflow:hidden on parent.

   Default (rest):  desaturated + subtle depth shadow along real shape
   Hover:           full colour + neon glow + stronger depth shadow
── */
.partner-logo-img {
  width: 140px;
  height: 52px;
  object-fit: contain;
  display: block;
  /* Base state: dimmed with a subtle shape-following depth shadow */
  filter:
    brightness(0.70)
    grayscale(0.25)
    drop-shadow(0 4px 10px rgba(0,0,0,0.45));  /* depth — follows PNG shape */
  transition: filter .35s ease;
}
.partner-logo-item:hover .partner-logo-img {
  /* Hover: full brightness + neon glow contour + deeper shadow */
  filter:
    brightness(1)
    grayscale(0)
    drop-shadow(0 0 10px rgba(0,170,255,0.65))   /* neon rim — follows shape */
    drop-shadow(0 0 22px rgba(0,170,255,0.30))   /* wide halo — follows shape */
    drop-shadow(0 6px 14px rgba(0,0,0,0.60));    /* depth — follows shape */
}

/* Fallback placeholder (shown when PNG not uploaded) */
.partner-logo-placeholder {
  width: 140px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  background: rgba(255,255,255,0.03);
  transition: all .3s ease;
}
.partner-logo-placeholder i {
  color: var(--blue-2);
  font-size: 1rem;
}
/* box-shadow here is safe: .partner-logo-placeholder is a fallback <div>
   shown ONLY when the PNG <img> fails to load (mutually exclusive via
   onerror). It is never applied to a <img> element, so no rectangular
   shadow artifact on transparent PNG alpha channels. */
.partner-logo-item:hover .partner-logo-placeholder {
  border-color: rgba(0,170,255,0.35);
  background: rgba(0,170,255,0.06);
  box-shadow: 0 0 20px rgba(0,170,255,0.12);
}

/* =====================================================
   6. NEON GLOW INTENSITY SYSTEM
   Control all glow effects from these variables in :root
   Already defined above — reference only here
===================================================== */
/*
  To reduce glow everywhere:    --glow-intensity-blue: 0.2;
  To increase glow everywhere:  --glow-intensity-blue: 0.8;
  To turn off all glow:         --glow-intensity-blue: 0;
*/

/* =====================================================
   7. PERFORMANCE OPTIMIZATIONS
===================================================== */

/* GPU-accelerate animated elements */
.hero-float-icon,
.floating-object,
.neon-shape,
.hero-bg,
.quest-hero-bg {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-float-icon,
  .floating-object,
  .neon-shape,
  .particle,
  .scroll-wheel,
  .badge-dot {
    animation: none !important;
  }
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =====================================================
   8. RESPONSIVE ADJUSTMENTS
===================================================== */
@media (max-width: 768px) {
  /* Keep header height consistent on mobile */
  .site-header { height: 70px; }
  .site-header.scrolled { height: 62px; }

  /* Logo smaller on mobile */
  .logo-png-wrap { height: 50px; }
  .logo-png-wrap img.logo-png {
    height: 50px;
    max-width: 170px;
  }

  /* Header elements need smaller gaps on mobile */
  .header-right { gap: 8px; }

  /* Partner logos compact on mobile */
  .partner-logo-img { width: 110px; height: 42px; }
  .partner-logo-placeholder { width: 110px; height: 42px; font-size: 0.72rem; }
}