/* intro.css — Video intro gate overlay. FULL SCREEN. 4D reactive. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #06060f;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
/* Full-screen cover — the video IS the screen. No letterbox square. */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform, filter;
}
/* Fallback breathing when WebGL is unavailable (CSS-only reactive layer) */
.intro-video.css-reactive {
  animation: intro-breathe 4s ease-in-out infinite,
             intro-glow 5.2s linear;
}
@keyframes intro-breathe {
  0%   { transform: scale(1.02); filter: brightness(1); }
  50%  { transform: scale(1.09); filter: brightness(1.12); }
  100% { transform: scale(1.02); filter: brightness(1); }
}
@keyframes intro-glow {
  0%   { filter: brightness(0.85); }
  80%  { filter: brightness(1.05); }
  96%  { filter: brightness(1.5) saturate(1.3); }
  100% { filter: brightness(1.8) saturate(1.4); }
}
/* WebGL reactive layer — sits ABOVE the video, distorts/glints it */
.intro-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* Completion burst flash — gold pulse as the intro hands off to the site */
.intro-burst {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(245, 215, 122, 0.55) 0%,
    rgba(212, 168, 67, 0.28) 35%,
    rgba(6, 6, 15, 0) 70%);
}
.intro-burst.fire {
  animation: intro-burst-fire 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes intro-burst-fire {
  0%   { opacity: 0;    transform: scale(0.4); }
  35%  { opacity: 1;    transform: scale(1.1); }
  100% { opacity: 0;    transform: scale(2.4); }
}
.intro-skip {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 4;
  background: rgba(6, 6, 15, 0.5);
  border: 1px solid rgba(212, 168, 67, 0.3);
  color: rgba(212, 168, 67, 0.6);
  padding: 8px 20px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s, border-color 0.3s, color 0.3s;
}
.intro-skip.visible {
  opacity: 1;
}
.intro-skip:hover {
  border-color: rgba(212, 168, 67, 0.6);
  color: rgba(212, 168, 67, 0.9);
}
.intro-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, #d4a843, #f5d77a);
  transition: width 0.1s linear;
}
/* Hide everything behind the overlay */
body.intro-active {
  overflow: hidden;
}
body.intro-active > *:not(.intro-overlay) {
  visibility: hidden;
}