/* Opening Cinematic Sequence */

.opening-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

.opening-overlay.opening-fade-out {
  opacity: 0;
  pointer-events: none;
}

.opening-logo {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 200;
  color: #fff;
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  user-select: none;
}

.opening-logo .logo-m {
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.opening-logo .logo-m.visible {
  opacity: 1;
}

.opening-logo .logo-ai {
  opacity: 0;
  background: linear-gradient(135deg, #a78bfa, #67e8f9, #a78bfa);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.5s ease-in;
}

.opening-logo .logo-ai.visible {
  opacity: 1;
  animation: opening-glow-shift 2s ease infinite;
}

@keyframes opening-glow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.opening-tagline-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 1rem;
}

.opening-tagline {
  margin-top: 1.2rem;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.opening-tagline.typing {
  animation: opening-type 1.8s steps(44, end) forwards,
             opening-blink 0.6s step-end infinite;
}

.opening-tagline.done {
  border-right-color: transparent;
}

@keyframes opening-type {
  from { max-width: 0; }
  to { max-width: 50ch; }
}

@keyframes opening-blink {
  50% { border-right-color: transparent; }
}

/* Prevent scroll while overlay is active */
body.opening-active {
  overflow: hidden;
}