:root {
  --intro-bg-base: #0a0400;
  --intro-gold-accent: #ffb700;
  --intro-fire-glow: #ff3300;
  --intro-text-light: #fff0e6;
}

.sol-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 100%, #1a0800 0%, #050200 80%);
  opacity: 1;
  visibility: visible;
  transition: opacity 1.15s ease, visibility 1.15s ease;
}

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

.sol-intro-overlay canvas,
.sol-intro-stage,
.sol-intro-post-stage,
.sol-intro-void-stage {
  position: absolute;
  inset: 0;
}

.sol-intro-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
  animation: solIntroMasterCameraPush 18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sol-intro-stage canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#sol-intro-ember-layer { z-index: 10; opacity: 0.82; }
#sol-intro-flare-layer { z-index: 5; mix-blend-mode: screen; }
#sol-intro-smoke-layer { z-index: 45; opacity: 0.42; filter: blur(4px); mix-blend-mode: overlay; }

.sol-intro-fog {
  position: absolute;
  width: 200vw;
  height: 150vh;
  top: -25vh;
  left: -50vw;
  background: radial-gradient(ellipse at center, rgba(255, 50, 0, 0.15) 0%, transparent 60%);
  z-index: 8;
  filter: blur(80px);
  opacity: 0.6;
  pointer-events: none;
  animation: solIntroSmokeDrift 25s ease-in-out infinite alternate;
}

.sol-intro-fog.secondary {
  background: radial-gradient(ellipse at center, rgba(255, 150, 0, 0.1) 0%, transparent 50%);
  z-index: 9;
  animation: solIntroSmokeDrift 35s ease-in-out infinite alternate-reverse;
}

.sol-intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, #000000 120%);
  z-index: 40;
  pointer-events: none;
}

.sol-intro-branding,
.sol-intro-post-stage,
.sol-intro-void-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sol-intro-branding {
  position: relative;
  z-index: 30;
  width: 100%;
  padding: 0 24px;
}

.sol-intro-subtitle,
.sol-intro-tagline,
.sol-intro-potential-text,
.sol-intro-void-text {
  font-family: "Inter", "Montserrat", sans-serif;
}

.sol-intro-subtitle {
  font-size: clamp(10px, 0.8vw, 14px);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--intro-gold-accent);
  text-shadow: 0 0 20px rgba(255, 183, 0, 0.6);
  opacity: 0;
  transform: translateY(15px);
}

.sol-intro-main-title,
.sol-intro-architect-text {
  font-family: "Orbitron", "Didot", serif;
}

.sol-intro-main-title {
  position: relative;
  font-size: clamp(40px, 6vw, 100px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 20px 0 0;
  opacity: 0;
  color: #ffffff;
  text-shadow:
    0 0 25px rgba(255, 200, 100, 0.6),
    0 8px 40px rgba(255, 50, 0, 0.5);
  transform: scale(0.95) translateZ(-50px);
}

#sol-intro-company-logo {
  width: 30vw;
  max-width: 480px;
  min-width: 250px;
  height: auto;
  margin-top: 5vh;
  opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 150, 50, 0.22));
  transform: translateY(20px);
}

.sol-intro-tagline {
  font-size: clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.7em;
  text-transform: uppercase;
  color: #ffebd6;
  text-shadow: 0 0 20px var(--intro-fire-glow);
  opacity: 0;
  margin-top: 6vh;
  transform: translateY(10px);
}

.sol-intro-post-stage {
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, #110500 0%, #000000 100%);
  transition: opacity 1.3s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 24px;
}

.sol-intro-post-stage.active {
  opacity: 1;
  pointer-events: all;
}

.sol-intro-architect-text {
  font-size: clamp(30px, 4.5vw, 80px);
  color: #ffffff;
  text-shadow: 0 0 30px rgba(255, 100, 0, 0.6);
  opacity: 0;
  transform: translateY(20px);
  margin: 0 0 2vh;
  font-weight: 700;
}

.sol-intro-potential-text {
  font-size: clamp(14px, 1.8vw, 28px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--intro-gold-accent);
  text-shadow: 0 0 20px rgba(255, 183, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
}

#sol-intro-kaixu-logo {
  width: 50vw;
  max-width: 900px;
  min-width: 320px;
  height: auto;
  margin-top: 8vh;
  opacity: 0;
  transform: scale(0.95);
}

.sol-intro-void-stage {
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background-color: #000000;
  transition: opacity 0.9s ease;
}

.sol-intro-void-stage.active {
  opacity: 1;
  pointer-events: all;
}

.sol-intro-void-text {
  color: #ffaa00;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.5;
}

.sol-intro-skip-btn {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 150, 0, 0.26);
  color: #cfa77f;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  backdrop-filter: blur(8px);
}

.sol-intro-skip-btn:hover {
  color: #fff;
  border-color: rgba(255, 180, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 100, 0, 0.4);
}

.sol-intro-reveal-subtitle { animation: solIntroFadeBlurIn 2.4s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-hide-subtitle { animation: solIntroFadeOutUp 1.4s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-reveal-title { animation: solIntroExplosiveReveal 3.2s cubic-bezier(0.1, 1, 0.2, 1) forwards; }
.sol-intro-reveal-logo { animation: solIntroFloatReveal 3s 0.35s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-reveal-tagline { animation: solIntroFadeBlurIn 2.4s 1s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-reveal-architect { animation: solIntroFadeBlurIn 2.2s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-reveal-potential { animation: solIntroFadeBlurIn 2.2s 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-reveal-kaixu { animation: solIntroIntenseGlowReveal 3.2s 1.4s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.sol-intro-ascension-effect { animation: solIntroCinematicAscend 1.2s cubic-bezier(0.7, 0, 0.2, 1) forwards; }

@keyframes solIntroMasterCameraPush {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes solIntroSmokeDrift {
  0% { transform: translateX(-5%) translateY(5%) scale(1); }
  100% { transform: translateX(5%) translateY(-5%) scale(1.1); }
}

@keyframes solIntroFadeBlurIn {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes solIntroFadeOutUp {
  0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-20px); filter: blur(8px); }
}

@keyframes solIntroExplosiveReveal {
  0% { opacity: 0; transform: scale(0.85) translateZ(-100px); filter: blur(25px) brightness(4); letter-spacing: 0.05em; }
  25% { opacity: 1; filter: blur(0) brightness(1.3); }
  100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0) brightness(1); letter-spacing: 0.1em; }
}

@keyframes solIntroFloatReveal {
  0% { opacity: 0; transform: translateY(30px); filter: blur(15px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes solIntroIntenseGlowReveal {
  0% { opacity: 0; transform: scale(0.9); filter: blur(20px) drop-shadow(0 0 0 rgba(255,183,0,0)); }
  50% { filter: blur(0) drop-shadow(0 0 50px rgba(255,100,0,0.5)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 25px rgba(255,150,0,0.8)); }
}

@keyframes solIntroCinematicAscend {
  0% { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
  40% { transform: scale(1.1); filter: blur(2px) brightness(1.5); opacity: 1; }
  100% { transform: scale(3); filter: blur(40px) brightness(6); opacity: 0; }
}

@media (max-width: 900px) {
  #sol-intro-company-logo { width: 54vw; min-width: 220px; }
  #sol-intro-kaixu-logo { width: 72vw; min-width: 240px; }
  .sol-intro-tagline,
  .sol-intro-potential-text,
  .sol-intro-void-text,
  .sol-intro-subtitle { letter-spacing: 0.28em; }
  .sol-intro-skip-btn { bottom: 18px; right: 18px; }
}