/* =====================================================
   WAVESENSE - Intro Animation
   ii.inc-inspired: dark starfield  teal waveform
   cream wipe  wordmark  page reveal
   ===================================================== */

/* ── Overlay ── */
#ms-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #060E18;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  /* Slide up on exit */
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

#ms-intro.ms-intro--exit {
  transform: translateY(-100%);
  pointer-events: none;
}

/* ── Star canvas (fills dark bg) ── */
#intro-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Breathing waveform SVG ── */
#intro-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 72vw);
  height: 56px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

#intro-wave-path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  /* transition driven by JS timing */
}

#intro-wave.wave-fade {
  opacity: 0 !important;
  transition: opacity 0.45s ease !important;
}

/* Subtle repeat pulse on the waveform once drawn */
@keyframes waveGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(20,184,166,0.4)); }
  50%       { filter: drop-shadow(0 0 8px rgba(20,184,166,0.8)); }
}
#intro-wave.wave-drawn {
  animation: waveGlow 1.8s ease-in-out infinite;
}

/* ── Cream wipe panel ──
   Reveal sequence:
   1) Invisible (clip to a point at centre)
   2) .ms-intro__cream--line  → vertical line grows from centre upward + downward
   3) .ms-intro__cream--full  → sweeps horizontally left + right to fill viewport
── */
#intro-cream {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #F6F2EC;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Start invisible — clipped to a point at centre */
  clip-path: inset(50% 50% 50% 50%);
  /* Phase 1 → 2 transition: vertical grow from centre */
  transition: clip-path 0.68s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Phase 2: vertical line (~2 px wide, full viewport height) */
#intro-cream.ms-intro__cream--line {
  clip-path: inset(0% 49.9% 0% 49.9%);
}

/* Phase 3: sweep left + right to fill screen */
#intro-cream.ms-intro__cream--full {
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── Brand mark inside cream ── */
#intro-brand {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  white-space: nowrap;
  padding: 0 2rem;
}

.intro-brand__symbol {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 2.6rem;
  color: #0D9488;
  line-height: 1;
  margin-bottom: 0.45rem;
  display: block;
}

.intro-brand__name {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 0.55rem;
}

.intro-brand__name span {
  color: #0D9488;
}

.intro-brand__tagline {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #4A5568;
  letter-spacing: 0.01em;
}

/* ── Skip hint ── */
.intro-skip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: rgba(200, 230, 228, 0.38);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  user-select: none;
}