:root {
  --intro-bg-deep: #03132d;
  --intro-accent-gold: #ffc40e;
  --intro-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --intro-line-width: 200px;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--intro-bg-deep);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.5s var(--intro-ease),
    visibility 1.5s var(--intro-ease);
}

.intro-overlay[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

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

.intro-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  will-change: opacity;
}

.intro-bg-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    circle,
    rgba(255, 196, 14, 0.04) 0%,
    transparent 70%
  );
}

.intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 55rem);
  padding: 0 2rem;
  box-sizing: border-box;
  text-align: center;
  will-change: opacity;
}

.intro-title {
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.1em, 0.75vw, 0.18em);
  font-size: clamp(1.28rem, 3.5vw, 2rem);
  font-weight: 250;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: normal;
  color: #fff;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  animation: intro-fade-up 1.05s var(--intro-ease) 0.12s forwards;
}

.intro-title-line {
  display: block;
  line-height: 1;
}

.intro-line {
  width: var(--intro-line-width);
  height: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--intro-accent-gold),
    transparent
  );
  opacity: 0;
  animation: intro-fade 0.8s var(--intro-ease) 0.6s forwards;
}

.intro-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--intro-accent-gold);
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  animation: intro-fade-up 0.95s var(--intro-ease) 0.9s forwards;
}

body.no-scroll {
  overflow: hidden;
}

@keyframes intro-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes intro-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 760px) {
  :root {
    --intro-line-width: min(150px, 48vw);
  }

  .intro-bg-glow {
    display: none;
  }

  .intro-content {
    width: 100%;
    padding: 0 1.25rem;
  }

  .intro-title {
    font-size: clamp(1.08rem, 5.8vw, 1.55rem);
    letter-spacing: 0.01em;
    animation-duration: 0.9s;
    animation-delay: 0.08s;
  }

  .intro-line {
    margin: 1.4rem 0;
    animation-duration: 0.72s;
    animation-delay: 0.38s;
  }

  .intro-subtitle {
    font-size: clamp(0.6rem, 2.9vw, 0.8rem);
    animation-duration: 0.82s;
    animation-delay: 0.64s;
  }
}

@media (max-width: 480px) {
  .intro-content {
    width: 100%;
    padding: 0 1rem;
  }

  .intro-title {
    font-size: clamp(1.02rem, 7vw, 1.42rem);
  }

  .intro-line {
    margin: 1.2rem 0;
  }

  .intro-subtitle {
    font-size: clamp(0.58rem, 3.2vw, 0.72rem);
  }
}

@media (min-width: 761px) and (max-width: 1366px) {
  .intro-title {
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    gap: clamp(0.12em, 0.5vw, 0.2em);
    animation-duration: 1.2s;
  }

  .intro-subtitle {
    font-size: clamp(0.82rem, 1.15vw, 0.98rem);
    animation-duration: 1.08s;
  }

  .intro-line {
    animation-duration: 0.95s;
  }
}

@media (min-width: 1367px) {
  .intro-title {
    font-size: clamp(1.9rem, 2.45vw, 2.85rem);
    gap: clamp(0.13em, 0.38vw, 0.22em);
    animation-duration: 1.24s;
  }

  .intro-subtitle {
    font-size: clamp(0.9rem, 1vw, 1.04rem);
    animation-duration: 1.12s;
  }

  .intro-line {
    animation-duration: 1s;
  }
}