/* INTRO SCREEN */
body.intro-active { overflow: hidden; height: 100vh; }

.intro-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: #06070c;
  overflow: hidden;
  opacity: 1; visibility: visible;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.intro-overlay.intro-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-glow {
  position: absolute; width: 50vmax; height: 50vmax; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 9%),
    radial-gradient(circle, rgba(26,86,219,0.46) 0%, rgba(26,86,219,0.16) 35%, transparent 70%);
  filter: blur(6px);
  pointer-events: none; will-change: left, top; z-index: 0;
}

.intro-canvas {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; display: block;
}

.intro-logo {
  position: absolute; top: 2rem; left: 2rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1px;
  color: rgba(255,255,255,0.88); text-decoration: none;
  animation: introFadeDown .8s cubic-bezier(.16,1,.3,1) both;
}
.intro-logo img { height: 22px; width: auto; display: block; }

.intro-center {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.6rem; padding: 2rem; text-align: center;
}

.intro-ai {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 7rem);
  line-height: 0.94; letter-spacing: -1px;
  animation: introAiIn 1.1s cubic-bezier(.16,1,.3,1) both, introAiPulse 4.5s ease-in-out 1.1s infinite;
}
.intro-ai-letter {
  display: inline-block;
  background: linear-gradient(135deg, #ffffff 10%, #9db8f0 45%, #1a56db 92%);
  background-size: 700% 100%;
  background-position-x: calc(var(--i) * (100% / 6));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform;
}

.intro-enter {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 40px; border: none; border-radius: 999px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: #06070c; background: #dfe7f5;
  box-shadow: 0 0 0 rgba(26,86,219,0);
  transition: box-shadow .25s ease, background .25s ease;
  animation: introFadeUp .9s .35s cubic-bezier(.16,1,.3,1) both;
}
.intro-enter::before {
  content: ''; position: absolute; top: -60%; bottom: -60%;
  left: calc(var(--mx, 50%) - 42px); width: 56px;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.95) 42%,
    #ffffff 50%,
    rgba(255,255,255,0.95) 58%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: var(--shine, 0);
  pointer-events: none;
  transition: width .2s ease;
  mix-blend-mode: screen;
}
.intro-enter::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    #ffffff 0%, rgba(255,255,255,0.98) 9%, rgba(200,220,255,0.75) 26%, rgba(157,184,240,0.4) 45%, transparent 65%);
  opacity: var(--shine, 0);
  pointer-events: none;
  mix-blend-mode: screen;
}
.intro-enter.is-hovering::before { width: 140px; }
.intro-enter.is-hovering {
  box-shadow: 0 0 0 1.5px #ffffff inset, 0 0 50px 12px rgba(255,255,255,.95), 0 14px 40px rgba(26,86,219,.65);
}
.intro-enter:hover { box-shadow: 0 10px 30px rgba(26,86,219,.5); }
.intro-enter svg { position: relative; z-index: 1; width: 13px; height: 13px; transition: transform .25s ease; }
.intro-enter span { position: relative; z-index: 1; }
.intro-enter:hover svg { transform: translateX(4px); }

@keyframes introFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introAiIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes introAiPulse {
  0%, 100% { filter: drop-shadow(0 0 40px rgba(26,86,219,.4)); }
  50%      { filter: drop-shadow(0 0 72px rgba(26,86,219,.65)); }
}
@media (max-width: 640px) {
  .intro-logo { top: 1.4rem; left: 1.4rem; font-size: 12px; }
  .intro-logo img { height: 18px; }
  .intro-center { gap: 2rem; }
}