/* =========================================================
   --- INTRO SCREEN --- 
   ========================================================= */
#intro {
   position: fixed;
   inset: 0;
   background: var(--bg-deep);
   z-index: 9000;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1);
   overflow: hidden;
}

.bubbles-container {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}

.bubble {
   position: absolute;
   border-radius: 50%;
   animation: float 200s infinite alternate ease-in-out;
   opacity: 0.5;
}

.b1 {
   width: 40vw;
   height: 40vw;
   background: radial-gradient(circle, rgba(145, 17, 81, 0.436) 0%, transparent 60%);
   top: -15%;
   left: -10%;
   filter: blur(30px);
}

.b2 {
   width: 20rem;
   height: 20rem;
   border: 1px solid rgba(0, 255, 255, 0.4);
   top: 5%;
   right: 2%;
   animation-duration: 20s;
   animation-delay: -2s;
   opacity: 0.5;
}

.b3 {
   width: 35vw;
   height: 35vw;
   background: radial-gradient(circle, rgba(255, 10, 239, 0.25) 0%, transparent 65%);
   bottom: -30%;
   right: -20%;
   filter: blur(40px);
   animation-duration: 60s;
   animation-delay: -5s;
}

.b4 {
   width: 30rem;
   height: 30rem;
   border: 3px solid rgba(154, 255, 3, 0.3);
   bottom: 5%;
   left: 5%;
   animation-duration: 22s;
   animation-delay: -7s;
   opacity: 0.3;
}

.b5 {
   width: 15rem;
   height: 15rem;
   border: 1px solid rgba(255, 0, 255, 0.6);
   top: 40%;
   right: 10%;
   animation-duration: 16s;
   animation-delay: -4s;
   opacity: 0.6;
   filter: blur(2px);
}

@keyframes float {
   0% {
      transform: translateY(0) translateX(0) rotate(0deg);
   }

   100% {
      transform: translateY(-2rem) translateX(2rem) rotate(15deg);
   }
}

.intro-content {
   position: relative;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.intro-title {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-family: var(--font-display);
   font-weight: 800;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: -2px;
   margin-bottom: 5vh;
}

.title-main {
   font-size: clamp(4rem, 15vw, 15vw);
   line-height: 1;
   color: transparent;
   -webkit-text-stroke: 3px var(--text-light);
   transition: color 0.3s, transform 0.3s;
   display: block;
}

.title-sub {
   font-size: clamp(2rem, 7.5vw, 7.5vw);
   line-height: 1;
   margin-top: -1vw;
   color: transparent;
   -webkit-text-stroke: 2px var(--text-light);
   transition: color 0.3s, transform 0.3s;
   display: block;
}

.title-main:hover {
   color: var(--c-art);
   -webkit-text-stroke: 0px;
   transform: scale(1.03) rotate(-1deg);
}

.title-sub:hover {
   color: var(--c-tools);
   -webkit-text-stroke: 0px;
   transform: scale(1.03) rotate(1deg);
}

.intro-meta {
   font-family: var(--font-mono);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-light);
   text-transform: uppercase;
   letter-spacing: 5px;
   text-align: center;
   margin-bottom: 7vh;
}

/* =========================================================
   --- HUB ATMOSPHERIC GLOWS & ANIMATIONS --- 
   ========================================================= */
.hub-bubble {
   position: absolute;
   animation: floatHub 22s infinite alternate ease-in-out;
}

.glow-purple-top-left {
   width: 90vw;
   height: 90vw;
   background: radial-gradient(circle, rgba(110, 10, 255, 0.07) 0%, transparent 70%);
   top: -25%;
   left: -20%;
   filter: blur(120px);
   animation-duration: 35s;
}

.glow-red-bottom-right {
   width: 25vw;
   height: 25vw;
   background: radial-gradient(circle, rgba(220, 20, 60, 0.12) 0%, transparent 65%);
   bottom: -5%;
   right: -5%;
   filter: blur(50px);
   animation-duration: 28s;
   animation-delay: -12s;
}

.glow-top-left {
   width: 60vw;
   height: 60vw;
   background: radial-gradient(circle, rgba(120, 0, 255, 0.05) 0%, transparent 70%);
   top: -15%;
   left: -10%;
   filter: blur(100px);
}

.glow-bottom-right {
   width: 50vw;
   height: 50vw;
   background: radial-gradient(circle, rgba(255, 0, 127, 0.12) 0%, transparent 70%);
   bottom: 15%;
   right: 15%;
   filter: blur(90px);
   animation-duration: 30s;
}

.glow-accent-pink {
   width: 30vw;
   height: 30vw;
   background: radial-gradient(circle, rgba(255, 0, 255, 0.08) 0%, transparent 60%);
   bottom: 30%;
   right: 25%;
   filter: blur(60px);
   animation-delay: -5s;
}

.circle-1,
.circle-2,
.circle-3,
.circle-4 {
   border: 1px solid rgba(255, 0, 127, 0.2);
   border-radius: 50%;
   filter: blur(1px);
}

.circle-1 {
   width: 300px;
   height: 300px;
   top: 10%;
   left: 15%;
   animation-duration: 25s;
}

.circle-2 {
   width: 150px;
   height: 150px;
   bottom: 25%;
   right: 35%;
   border-color: rgba(255, 0, 255, 0.15);
}

.circle-3 {
   width: 450px;
   height: 450px;
   top: 40%;
   left: -5%;
   opacity: 0.5;
}

.circle-4 {
   width: 80px;
   height: 80px;
   bottom: 10%;
   right: 10%;
   border-width: 2px;
}

.square-1,
.square-2 {
   border: 1px solid rgba(255, 255, 255, 0.05);
   filter: blur(1.5px);
}

.square-1 {
   width: 40vw;
   height: 40vw;
   top: 20%;
   left: 30%;
   transform: rotate(15deg);
   animation-duration: 40s;
}

.square-2 {
   width: 250px;
   height: 250px;
   bottom: 15%;
   right: 20%;
   border-color: rgba(255, 0, 127, 0.1);
   transform: rotate(-10deg);
   animation-delay: -10s;
}

@keyframes floatHub {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
   }

   100% {
      transform: translate(2vw, 3vh) rotate(3deg) scale(1.02);
   }
}

/* =========================================================
   --- GHOST / SIDE TEXT & DRIFTING BUBBLES --- 
   ========================================================= */
.system-ghost-text {
   position: absolute;
   left: -1vw;
   top: 0;
   bottom: 0;
   writing-mode: sideways-lr;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 15vh;
   font-weight: 800;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
   text-transform: lowercase;
   letter-spacing: 0vh;
   pointer-events: none;
   z-index: 0;
   user-select: none;
}

.bg-outline-bubble {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
   animation: slowDrift 60s infinite alternate ease-in-out;
}

.ob1 {
   width: 35vw;
   height: 35vw;
   top: -5%;
   left: 15%;
   animation-delay: 0s;
}

.ob2 {
   width: 50vw;
   height: 50vw;
   bottom: -15%;
   right: -5%;
   animation-delay: -3s;
}

.ob3 {
   width: 18vw;
   height: 18vw;
   top: 35%;
   right: 25%;
   animation-delay: -7s;
}

.ob4 {
   width: 10vw;
   height: 10vw;
   top: 70%;
   right: 2%;
   animation-delay: -10s;
}

@keyframes slowDrift {
   0% {
      transform: translate(0, 0) rotate(0deg);
   }

   100% {
      transform: translate(20vw, -15vh) rotate(15deg);
   }
}