/* ==========================================================================
   NETFLIX-STYLE CINEMATIC INTRO ANIMATION FOR PRISMLINE
   ========================================================================== */

/* Complete viewport lock when intro is active */
html.intro-active,
body.intro-active {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

#netflix-intro-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: -webkit-fill-available;
  background: #000000 !important;
  z-index: 99999999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s ease;
  perspective: 1000px;
  cursor: pointer;
}

#netflix-ribbon-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.intro-brand-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.7s ease;
}

/* Emitting Center Glow */
.intro-back-glow {
  /* Keep the intro crisp: no glare behind the emblem or wordmark. */
  display: none;
}

@keyframes introGlowPulse {
  0% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 0.85; filter: blur(50px); }
  100% { transform: scale(1); opacity: 0.6; }
}

/* SVG Emblem Animation */
.intro-svg-emblem {
  width: clamp(210px, 26vw, 340px);
  height: auto;
  filter: none;
  z-index: 2;
}

/* Stroke Dash Draw Animation */
.intro-wing-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawWings 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-wing-fill {
  opacity: 0;
  animation: fillWings 0.6s 0.1s ease forwards;
}

.intro-facet {
  opacity: 0;
  transform-origin: 250px 130px;
  animation: facetPop 0.6s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes drawWings {
  0% { stroke-dashoffset: 800; opacity: 0; }
  10% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes fillWings {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes facetPop {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Typography Reveal */
.intro-title {
  margin-top: -0.4rem;
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.35em;
  color: #FFFFFF;
  text-shadow: none;
  opacity: 0;
  transform: translateY(15px) scale(0.96);
  animation: titleUnveil 0.7s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
  text-align: center;
}

.intro-title .intro-m {
  color: #FF5722;
  text-shadow: none;
  display: inline-block;
  animation: sparkM 2s 0.8s infinite alternate;
}

@keyframes sparkM {
  0% { filter: brightness(1) drop-shadow(0 0 10px #FF5722); }
  100% { filter: brightness(1.4) drop-shadow(0 0 30px #FF9100); }
}

@keyframes titleUnveil {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    letter-spacing: 0.5em;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.28em;
    filter: blur(0px);
  }
}

.intro-subtitle {
  display: none !important;
}

/* Netflix Camera Fly-Through Zoom into Site */
#netflix-intro-overlay.intro-complete .intro-brand-container {
  transform: scale(4.2) translateZ(450px);
  opacity: 0;
  filter: blur(10px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, filter 0.8s ease;
}

#netflix-intro-overlay.intro-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Control Buttons (Skip & Sound) - Removed per user preference */
.intro-controls {
  display: none !important;
}

.intro-btn {
  background: rgba(14, 18, 28, 0.75);
  border: 1px solid rgba(255, 87, 34, 0.4);
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.2rem;
  border-radius: 9999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.intro-btn:hover {
  background: rgba(255, 87, 34, 0.25);
  border-color: #FF5722;
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .intro-controls {
    bottom: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
    justify-content: space-between;
  }
}