/* ==========================================================
   GEKOS — HERO POLISH (NON-CRITICAL)
   Authority layering • Subliminal bias • Deterministic
   Loaded AFTER first paint
   Status: FINAL / SEALED
========================================================== */

/* ==========================================================
   HERO BASE (NON-LAYOUT)
========================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    120% 80% at 50% 20%,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.92) 60%
  );
}

/* ==========================================================
   PRIMARY HERO VIDEO — VISUAL POLISH ONLY
   (Authority remains in critical.css)
========================================================== */

.hero-video {
  /* geometry inherited from critical.css */

  z-index: 0;
  pointer-events: none;

  /* SAFE POLISH */
  filter: brightness(0.94) contrast(1.04) saturate(0.96);
  backface-visibility: hidden;

  /* VISIBILITY GUARANTEE */
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   EYE-PATH REINFORCEMENT (SUBCONSCIOUS)
   Controlled to avoid luminance crush
========================================================== */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      60% 45% at 42% 28%,
      rgba(255,255,255,0.035),
      rgba(0,0,0,0) 65%
    ),
    linear-gradient(
      135deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.0) 42%,
      rgba(0,0,0,0.26) 100%
    );

  /* SAFER BLEND */
  mix-blend-mode: normal;
  opacity: 0.85;
}

/* ==========================================================
   SECONDARY / PERIPHERAL GEKO
========================================================== */

.geko-video {
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  bottom: clamp(20px, 5vh, 56px);

  width: min(28vw, 260px);
  height: auto;

  z-index: 2;
  pointer-events: none;

  opacity: 0;
  transform: translateY(12px) scale(0.96);

  transition:
    opacity 0.6s ease-out,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  filter: brightness(0.9) contrast(1.05);
  backface-visibility: hidden;
}

.geko-visible {
  opacity: 0.42;
  transform: translateY(0) scale(1);
}

/* ==========================================================
   OVERLAY + COPY DISCIPLINE
========================================================== */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.32),
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.72)
  );
}

.hero-core {
  position: relative;
  z-index: 3;
  text-align: center;
  isolation: isolate;

  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}

/* ==========================================================
   HERO TYPE — CINEMATIC SCALE
========================================================== */

.hero-copy {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.hero-title {
  font-size: clamp(2.4rem, 4.5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;

  animation: hero-settle 0.6s ease-out both;

  text-shadow:
    0 4px 36px rgba(0,0,0,0.75),
    0 1px 2px rgba(0,0,0,0.35);
}

.hero-title span {
  display: block;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hero-subtitle {
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.hero-scroll-line,
.hero-exit-line {
  font-size: 0.9rem;
  opacity: 0.6;
}

/* ==========================================================
   HERO TITLE — MICRO SETTLE
========================================================== */

@keyframes hero-settle {
  from {
    letter-spacing: 0.12em;
    opacity: 0.85;
  }
  to {
    letter-spacing: 0.02em;
    opacity: 1;
  }
}

/* ==========================================================
   SAFE OPACITY GATES (NON-DESTRUCTIVE)
========================================================== */

.hero-video {
  opacity: var(--hero-media-opacity, 1);
}

.hero-core {
  opacity: var(--hero-copy-opacity, 1);
}

/* ==========================================================
   MOBILE BIAS
========================================================== */

@media (max-width: 768px) {
  .hero-video {
    object-position: 50% 35%;
  }

  .geko-video {
    width: min(42vw, 200px);
    opacity: 0.28;
  }
}

/* ==========================================================
   AWARDS MODE — STATIC / ZERO MOTION
========================================================== */

html[data-awards="true"] .hero-video,
html[data-awards="true"] .geko-video {
  opacity: 0.9 !important;
  transform: none !important;
  filter: brightness(0.9) contrast(1.02) saturate(0.9);
}

html[data-awards="true"] .hero-core {
  transform: none !important;
  opacity: 1 !important;
}

html[data-awards="true"] .hero::after {
  opacity: 0.45;
}

/* ==========================================================
   REDUCED MOTION — WCAG COMPLIANT
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-video,
  .geko-video {
    transition: none !important;
    transform: none !important;
  }

  .hero-title {
    animation: none !important;
  }
}