/* ═══════════════════════════════════════════════════════
   GERMAN LABS — WebGL Experience Overlay
   Void-Black Hero · Bio-Metal · Cinematográfico
   Solo se carga en la homepage (functions.php condicional).
   ═══════════════════════════════════════════════════════ */

/* ── Tokens oscuros del hero WebGL ───────────────────── */
:root {
  --void-black:        #050807;
  --deep-forest:       #0A160D;
  --bio-green-dark:    #163D1B;
  --metal-green:       #4F8A2B;
  --metal-green-mid:   #679F37;
  --metal-green-lt:    #91C95A;
  --metal-chrome:      #E3E8E5;
  --metal-silver:      #89938E;
  --graphite:          #111614;
  --wgl-fM: 'Space Mono', 'Courier New', monospace;
  --wgl-fB: 'Inter', system-ui, sans-serif;
}

/* ── Body en homepage ─────────────────────────────────── */
body.home,
body.home.gl-body { background: var(--void-black); }

/* ── Canvas WebGL (fijo, fullscreen, z-index base) ────── */
#webgl {
  position: fixed;
  top: 0; left: 0;
  width:  100vw !important;
  height: 100vh !important;
  height: 100dvh !important;  /* evita el address-bar en móvil */
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ── Espacio de scroll (600 vh) ───────────────────────── */
#gl-exp-scroll {
  position: relative;
  height: 600vh;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  background: transparent;
}

/* ── Overlay HTML (textos de escena sobre el canvas) ──── */
#gl-exp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* ── Textos de escena ─────────────────────────────────── */
.scene-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 28px));
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 48px;
  opacity: 0;
  transition: opacity 0.90s cubic-bezier(0.16,1,0.3,1),
              transform 0.90s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.scene-text.visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Texto CLARO sobre fondo oscuro */
.gl-exp-eyebrow {
  display: block;
  font-family: var(--wgl-fM);
  font-size: clamp(0.52rem, 0.9vw, 0.68rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--metal-green-lt);
  margin-bottom: 22px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.88), 0 0 20px rgba(0,0,0,0.80);
}

.gl-exp-headline {
  font-family: var(--wgl-fB);
  font-size: clamp(2.4rem, 5.8vw, 5.6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--metal-chrome);
  text-transform: uppercase;
  text-shadow:
    0 1px 0   rgba(0,0,0,0.95),
    0 2px 12px rgba(0,0,0,0.90),
    0 4px 32px rgba(0,0,0,0.82),
    0 0  24px  rgba(0,0,0,0.78);
}
.gl-exp-headline--sm    { font-size: clamp(2.0rem, 4.8vw, 4.6rem); }
.gl-exp-headline--final { font-size: clamp(2.6rem, 6.8vw, 6.5rem); }
.gl-exp-headline--final span { color: var(--metal-green-mid); }

.gl-exp-sub {
  display: block;
  margin-top: 28px;
  font-family: var(--wgl-fM);
  font-size: clamp(0.62rem, 1.2vw, 0.80rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(199,208,203,0.70);
  text-shadow: 0 1px 8px rgba(0,0,0,0.88), 0 0 20px rgba(0,0,0,0.80);
}

/* ── Logo PNG reveal ──────────────────────────────────── */
#gl-logo-reveal {
  position: absolute;
  left: 50%; top: 44%;      /* slightly above center — logo sits above headline */
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
#gl-logo-reveal img {
  width: 64px; height: 64px;
  object-fit: contain;
  filter: invert(1) brightness(0.42) saturate(0.75)
          drop-shadow(0 0 4px rgba(79,138,43,0.12));
  opacity: 0.38;
}

/* ── Barra de progreso ────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  background: linear-gradient(to right, var(--metal-green), rgba(145,201,90,0.25));
  width: 0%;
  z-index: 100;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── Hint de scroll ───────────────────────────────────── */
#scroll-hint {
  position: fixed;
  bottom: 60px; left: 50%;
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity 0.6s ease;
  pointer-events: none;
  animation: glScrollBounce 2.8s ease-in-out infinite;
}
#scroll-hint.hidden { opacity: 0; }
.hint-label {
  font-family: var(--wgl-fM);
  font-size: 0.50rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(199,208,203,0.52);
}
.hint-line {
  width: 2px; height: 64px;
  background: linear-gradient(to bottom, rgba(79,138,43,0.88) 0%, rgba(79,138,43,0.28) 75%, transparent 100%);
  transform-origin: top center;
  animation: gl-hintPulse 2.4s cubic-bezier(0.16,1,0.3,1) infinite;
  box-shadow: 0 0 10px rgba(79,138,43,0.45), 0 0 24px rgba(79,138,43,0.18);
}
.hint-chevron { margin-top: -4px; }
@keyframes gl-hintPulse {
  0%   { transform: scaleY(0.04); opacity: 0; }
  28%  { transform: scaleY(1);    opacity: 1; }
  65%  { transform: scaleY(1);    opacity: 0.88; }
  100% { transform: scaleY(0.04); opacity: 0; }
}
@keyframes glScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ═══ OVERRIDES WORDPRESS ═══════════════════════════════ */

/* Navegación: oculta mientras dura la experiencia */
body.home #gl-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

/* Hero original: hidden (WebGL lo reemplaza) */
body.home .gl-hero { display: none !important; }

/* Canvas 2D de fondo global: hidden (WebGL > calidad) */
body.home #gl-bg-canvas { display: none !important; }

/* Contenido WP debajo de la experiencia: fondo sólido oscuro */
body.home .gl-strip,
body.home .gl-catalog,
body.home .gl-upcoming,
body.home .gl-verify,
body.home .gl-distributor,
body.home .gl-corporate,
body.home .gl-footer {
  position: relative;
  z-index: 15;
  background-color: var(--void-black);
}

/* ═══ DESPUÉS DE COMPLETAR LA EXPERIENCIA ══════════════ */
body.gl-exp-done #gl-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.gl-exp-done #gl-exp-overlay,
body.gl-exp-done #scroll-hint,
body.gl-exp-done #progress-bar {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* ═══ FALLBACK: SIN WEBGL ═══════════════════════════════ */
body.no-webgl #webgl,
body.no-webgl #gl-exp-scroll,
body.no-webgl #gl-exp-overlay,
body.no-webgl #progress-bar,
body.no-webgl #scroll-hint { display: none !important; }

body.no-webgl #gl-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
body.no-webgl .gl-hero      { display: flex !important; }
body.no-webgl #gl-bg-canvas { display: block !important; }

/* ══ FALLBACK HERO — cubre el canvas hasta el 1er frame ═══════
   Se activa cuando el safety cap dispara antes que WebGL esté
   listo. Reutiliza .gl-hero (logo + título + botones + ADN 2D).
   Transición suave a WebGL cuando body.gl-webgl-alive se añade.
   ════════════════════════════════════════════════════════════ */
body.gl-hero-fallback .gl-hero {
  display:    flex !important;
  position:   fixed !important;
  inset:      0 !important;
  z-index:    2 !important;
  opacity:    1;
  transition: opacity 0.80s ease;
}
body.gl-hero-fallback .gl-hero .gl-hero-seal { display: none; }

/* WebGL listo → fallback hero se desvanece */
body.gl-hero-fallback.gl-webgl-alive .gl-hero {
  opacity:        0 !important;
  pointer-events: none;
}

/* ══ PRELOADER CINEMATOGRÁFICO ══════════════════════════
   ADN 2D crece 0→100% ligado a eventos de carga real.
   Solo se descarta cuando pct=100 (primer frame WebGL listo).
   Safety cap activa calidad reducida, NO descarta el preloader.
   ════════════════════════════════════════════════════════ */
#gl-preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--void-black);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* safe areas: iPhone notch / Android gesture bar */
  padding-top:    env(safe-area-inset-top,    0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left,   0px);
  padding-right:  env(safe-area-inset-right,  0px);
}
#gl-preloader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gl-pre-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  animation: glPreIn 0.85s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes glPreIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gl-pre-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-bottom: 32px;
}
.gl-pre-logo {
  width: 58px; height: 58px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: invert(1) brightness(0.84) saturate(1.15)
          drop-shadow(0 0 14px rgba(79,138,43,0.50));
  animation: glPreLogoGlow 2.6s ease-in-out infinite;
}
@keyframes glPreLogoGlow {
  0%,100% { filter: invert(1) brightness(0.80) saturate(1.1)  drop-shadow(0 0 10px rgba(79,138,43,0.42)); }
  50%      { filter: invert(1) brightness(0.92) saturate(1.35) drop-shadow(0 0 26px rgba(145,201,90,0.68)); }
}
.gl-pre-brand {
  font-family: var(--wgl-fM);
  font-size: 0.54rem;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(199,208,203,0.44);
}
.gl-pre-title {
  font-family: var(--wgl-fB);
  font-size: clamp(0.70rem, 2vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(199,208,203,0.76);
  margin: 0 0 11px;
}
.gl-pre-status {
  font-family: var(--wgl-fM);
  font-size: 0.46rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(103,159,55,0.70);
  transition: opacity 0.18s ease;
  min-height: 1.2em;
}
.gl-pre-status.gl-pre-fade { opacity: 0; }
.gl-pre-pct {
  display: block;
  font-family: var(--wgl-fM);
  font-size: 0.42rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(199,208,203,0.32);
  margin-top: 11px;
  min-height: 1em;
  transition: color 0.40s ease;
}
/* Highlight pct when near 100 */
.gl-pre-pct.gl-pre-pct--ready {
  color: rgba(145,201,90,0.55);
}

/* ══════════════════════════════════════════════════════════
   HERO RESPONSIVE — WebGL Canvas + Overlay Content

   Core strategy: CSS scale down the WebGL canvas on mobile
   so the DNA behaves as a background hologram rather than the
   primary visual protagonist. Overlay scene text remains at
   full-viewport coverage for maximum readability.
   Body background (#050807 void-black) fills the edge space.

   canvas scale targets (= reduction from 100%):
   ─ ≥ 1025px  : 100%  — full cinematic desktop (no change)
   ─   1024px  :  78%  — tablet (~22% smaller)
   ─    768px  :  62%  — mobile  (~38% smaller)
   ─    430px  :  55%  — large phone (iPhone 14/15 Pro Max)
   ─    390px  :  52%  — iPhone 14/15 Pro
   ─    375px  :  50%  — iPhone SE / compact Android
   ─    320px  :  45%  — very small screens
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ──────────────────────────────── */
@media (max-width: 1024px) {
  #webgl { filter: brightness(1.05) contrast(1.05); }
}

/* ── Mobile (≤ 768px) ───────────────────────────────── */
@media (max-width: 768px) {
  #webgl { filter: brightness(1.05) contrast(1.05); }

  #gl-exp-overlay { background: none; }

  /* Content: raised 10vh — premium upper-third composition */
  .scene-text {
    max-width: 85vw;
    padding: 0 16px;
    transform: translate(-50%, calc(-50% - 10vh + 28px));
  }
  .scene-text.visible { transform: translate(-50%, calc(-50% - 10vh)); }

  /* Spacing hierarchy */
  .gl-exp-eyebrow { letter-spacing: 0.26em; margin-bottom: 28px; }
  .gl-exp-headline {
    font-size: clamp(1.9rem, 11vw, 4.0rem);
    text-shadow:
      0 1px 0   rgba(0,0,0,0.99),
      0 2px 14px rgba(0,0,0,0.97),
      0 5px 36px rgba(0,0,0,0.94),
      0 0  60px  rgba(0,0,0,0.90);
  }
  .gl-exp-headline--sm    { font-size: clamp(1.7rem,  9.5vw, 3.6rem); }
  .gl-exp-headline--final { font-size: clamp(1.7rem, 10vw,  4.0rem); }
  .gl-exp-sub {
    margin-top: 36px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.99), 0 0 32px rgba(0,0,0,0.95);
  }

  /* Scroll hint */
  #scroll-hint { bottom: max(52px, calc(env(safe-area-inset-bottom, 0px) + 40px)); }
  .hint-label { color: rgba(199,208,203,0.98); text-shadow: 0 0 12px rgba(145,201,90,0.28); }
  .hint-line {
    animation: gl-hintPulse 2.4s cubic-bezier(0.16,1,0.3,1) infinite,
               glHintGlow   3.2s ease-in-out infinite;
  }
  @keyframes glHintGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(79,138,43,0.52), 0 0 28px rgba(79,138,43,0.22); }
    50%       { box-shadow: 0 0 22px rgba(79,138,43,0.95), 0 0 52px rgba(79,138,43,0.48), 0 0 80px rgba(79,138,43,0.18); }
  }

  #corner-brand, #hud { display: none; }
  #gl-logo-reveal     { top: 42%; }
  #gl-logo-reveal img { width: 54px; height: 54px; }
}

/* ── Large phone (≤ 430px) — iPhone 14/15 Pro Max ── */
@media (max-width: 430px) {
  .gl-exp-headline        { font-size: clamp(1.8rem, 10.5vw, 3.6rem); }
  .gl-exp-headline--sm    { font-size: clamp(1.6rem, 10vw,   3.2rem); }
  .gl-exp-headline--final { font-size: clamp(1.6rem, 10vw,   3.6rem); }
}

/* ── iPhone 14/15 Pro, Pixel 7 (≤ 390px) ───────── */
@media (max-width: 390px) {
  .gl-exp-headline--final { font-size: clamp(1.5rem, 10vw, 3.4rem); }
}

/* ── iPhone SE / compact Android (≤ 375px) ──────── */
@media (max-width: 375px) {
  .gl-exp-headline        { font-size: clamp(1.6rem, 10vw, 3.2rem); }
  .gl-exp-headline--final { font-size: clamp(1.5rem, 10vw, 3.2rem); }
}

/* ── Very small (≤ 320px) ───────────────────────── */
@media (max-width: 320px) {
  .gl-exp-headline        { font-size: clamp(1.4rem, 10vw, 2.8rem); }
  .gl-exp-headline--final { font-size: clamp(1.4rem, 10vw, 2.8rem); }
}

/* ── Mobile landscape (height ≤ 500px) ──────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .scene-text {
    padding: 0 max(24px, calc(env(safe-area-inset-left, 0px) + 56px));
    transform: translate(-50%, -50%);
    max-width: 90vw;
  }
  .scene-text.visible { transform: translate(-50%, -50%); }
  .gl-exp-eyebrow          { margin-bottom: 10px; }
  .gl-exp-headline         { font-size: clamp(1.2rem, 7vw,   2.4rem); }
  .gl-exp-headline--sm     { font-size: clamp(1.1rem, 6vw,   2.0rem); }
  .gl-exp-headline--final  { font-size: clamp(1.2rem, 7.5vw, 2.6rem); }
  .gl-exp-sub              { margin-top: 12px; }
  #scroll-hint { bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
}