:root {

  --sylo-blue: #0066FF;

  --sylo-indigo: #6366F1;

  --sylo-violet: #7C3AED;

  --sylo-cyan: #22D3EE;

  --intro-bg: #070b14;

}



* { box-sizing: border-box; margin: 0; padding: 0; }



html, body {

  width: 100%;

  height: 100%;

  overflow: hidden;

  background: var(--intro-bg);

  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

  color: #f8fafc;

}



#introCanvas {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

}



.intro-vignette {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 0%, rgba(7, 11, 20, 0.35) 55%, rgba(7, 11, 20, 0.92) 100%);

}



.intro-ui {

  position: fixed;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 24px;

  text-align: center;

}



.intro-ring {

  position: absolute;

  width: min(72vw, 420px);

  height: min(72vw, 420px);

  border-radius: 50%;

  border: 1px solid rgba(34, 211, 238, 0.15);

  opacity: 0;

  transform: scale(0.6);

  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.intro-ring::before,

.intro-ring::after {

  content: '';

  position: absolute;

  inset: -18px;

  border-radius: 50%;

  border: 1px solid rgba(99, 102, 241, 0.12);

}



.intro-ring::after {

  inset: 18px;

  border-color: rgba(0, 102, 255, 0.18);

}



.intro-ui.phase-ring .intro-ring {

  opacity: 1;

  transform: scale(1);

  animation: ringPulse 3s ease-in-out infinite;

}



@keyframes ringPulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.15); }

  50% { box-shadow: 0 0 60px 12px rgba(99, 102, 241, 0.12); }

}



.intro-logo-wrap {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

  opacity: 0;

  transform: translateY(28px) scale(0.92);

  filter: blur(8px);

  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.intro-ui.phase-logo .intro-logo-wrap {

  opacity: 1;

  transform: translateY(0) scale(1);

  filter: blur(0);

}



.intro-brand {

  font-family: 'Space Grotesk', sans-serif;

  font-size: clamp(3rem, 12vw, 5.5rem);

  font-weight: 700;

  letter-spacing: -0.06em;

  line-height: 1;

  background: linear-gradient(120deg, #fff 0%, #cbd5e1 40%, #93c5fd 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.intro-tagline {

  margin-top: 10px;

  max-width: 520px;

  font-size: clamp(0.95rem, 2.8vw, 1.15rem);

  line-height: 1.55;

  color: #94a3b8;

  opacity: 0;

  transform: translateY(16px);

  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;

}



.intro-ui.phase-tagline .intro-tagline {

  opacity: 1;

  transform: translateY(0);

}



.intro-words {

  margin-top: 28px;

  height: 28px;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.35em;

  text-transform: uppercase;

  color: var(--sylo-cyan);

  opacity: 0;

  transition: opacity 0.8s ease;

}



.intro-ui.phase-words .intro-words {

  opacity: 1;

}



.intro-words span {

  display: inline-block;

  animation: wordFade 2.4s ease-in-out infinite;

}



@keyframes wordFade {

  0%, 100% { opacity: 0.35; transform: translateY(0); }

  50% { opacity: 1; transform: translateY(-2px); }

}



.intro-progress {

  position: fixed;

  left: 50%;

  bottom: 88px;

  transform: translateX(-50%);

  width: min(280px, 70vw);

  height: 3px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

  opacity: 0;

  transition: opacity 0.6s ease;

}



.intro-ui.phase-progress .intro-progress {

  opacity: 1;

}



.intro-progress-bar {

  width: 40%;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--sylo-cyan), var(--sylo-blue), var(--sylo-violet));

  box-shadow: 0 0 16px rgba(0, 102, 255, 0.55);

  animation: introBarPulse 2.4s ease-in-out infinite;

}



@keyframes introBarPulse {

  0%, 100% { width: 28%; opacity: 0.55; margin-left: 0; }

  50% { width: 52%; opacity: 1; margin-left: 24%; }

}



.intro-sound-btn {

  position: fixed;

  left: 24px;

  bottom: 24px;

  z-index: 4;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(12px);

  color: #94a3b8;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.25s ease;

  animation: soundPulse 2.4s ease-in-out infinite;

}



.intro-sound-btn svg {

  width: 20px;

  height: 20px;

}



.intro-sound-btn:hover,

.intro-sound-btn.is-on {

  color: #e2e8f0;

  border-color: rgba(34, 211, 238, 0.45);

  background: rgba(0, 102, 255, 0.15);

}



.intro-sound-btn.is-on {

  animation: none;

  box-shadow: 0 0 20px rgba(0, 102, 255, 0.25);

}



@keyframes soundPulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }

  50% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.12); }

}



.intro-sound-hint {

  position: fixed;

  left: 78px;

  bottom: 36px;

  z-index: 4;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(148, 163, 184, 0.85);

  pointer-events: none;

  transition: opacity 0.4s ease;

}



.intro-sound-hint.is-hidden {

  opacity: 0;

}



.intro-sound-hint.is-blocked {

  color: #fbbf24;

}



.intro-skip {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 3;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(12px);

  color: #cbd5e1;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 12px 18px;

  border-radius: 999px;

  cursor: pointer;

  transition: all 0.25s ease;

}



.intro-skip:hover {

  color: #fff;

  border-color: rgba(34, 211, 238, 0.45);

  background: rgba(0, 102, 255, 0.12);

  transform: translateY(-1px);

}



.intro-exit {

  position: fixed;

  inset: 0;

  z-index: 10;

  background: #F4F7FF;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);

}



.intro-exit.active {

  opacity: 1;

  pointer-events: auto;

}



.intro-badge {

  position: fixed;

  top: 24px;

  left: 24px;

  z-index: 3;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: rgba(148, 163, 184, 0.7);

}



@media (max-width: 640px) {

  .intro-sound-btn {
    bottom: 78px;
  }

  .intro-sound-hint {
    left: 24px;
    bottom: 132px;
    max-width: calc(100% - 48px);
  }

  .intro-skip {

    left: 50%;

    right: auto;

    transform: translateX(-50%);

    bottom: 20px;

    width: calc(100% - 48px);

    max-width: 280px;

  }



  .intro-progress {

    bottom: 76px;

  }

}



@media (prefers-reduced-motion: reduce) {

  .intro-sound-btn {
    animation: none !important;
  }

  .intro-ring,

  .intro-words span {

    animation: none !important;

  }

}