/* Opening film: darkness, a point of light, the logo arriving in 3D, then the page. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
  animation: intro-exit .9s ease-in 5.6s forwards;
}
#intro.skip { animation: intro-exit .35s ease-in forwards; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
/* Only the logo lives in 3D; the layers behind it stay flat so no planes cut through it. */
.intro-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; perspective: 1100px; transform-style: preserve-3d; }
html:has(#intro) { overflow: hidden; }

.intro-dot {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px #c4b5fd, 0 0 40px 14px rgba(139, 92, 246, .55);
  opacity: 0;
  animation: intro-dot 1.5s ease-in .3s forwards;
}
@keyframes intro-dot {
  0% { opacity: 0; transform: scale(.2); }
  30% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(5); }
}

.intro-giant {
  position: absolute;
  left: 0;
  top: 0;
  width: min(150vmin, 1500px);
  aspect-ratio: 160 / 141;
  translate: -50% -50%;
  opacity: 0;
  filter: blur(3px) saturate(1.3);
  animation: intro-giant 3.1s ease-out 2.9s forwards;
}
.intro-giant img { display: block; width: 100%; height: 100%; }
@keyframes intro-giant {
  0% { opacity: 0; transform: scale(.72); }
  30% { opacity: .2; }
  100% { opacity: .13; transform: scale(1.12); }
}

.intro-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 60vmin;
  height: 60vmin;
  translate: -50% -50%;
  border: 2px solid rgba(196, 181, 253, .9);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(139, 92, 246, .8), inset 0 0 40px rgba(56, 189, 248, .4);
  opacity: 0;
  animation: intro-ring 1.5s cubic-bezier(.15, .7, .3, 1) 3.2s forwards;
}
@keyframes intro-ring {
  0% { opacity: .95; transform: scale(.25); }
  100% { opacity: 0; transform: scale(3.2); }
}

.intro-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 130vmin;
  height: 130vmin;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .55), rgba(56, 189, 248, .16) 48%, transparent 72%);
  opacity: 0;
  animation: intro-glow 3.4s ease-out 1.9s forwards;
}
@keyframes intro-glow {
  0% { opacity: 0; transform: scale(.25); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: .55; transform: scale(1.15); }
}

/* The logo is a stack of copies in depth, which gives it real thickness as it turns. */
.intro-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: min(62vmin, 460px);
  aspect-ratio: 160 / 141;
  translate: -50% -50%;
  transform-style: preserve-3d;
  opacity: 0;
  animation: intro-arrive 3.5s cubic-bezier(.16, .75, .18, 1) .9s forwards, intro-hover 3s ease-in-out 4.4s infinite;
}
.intro-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; backface-visibility: visible; }
.intro-logo img.depth { filter: brightness(.34) saturate(1.5); }
@keyframes intro-arrive {
  0% { opacity: 0; transform: translateZ(-3600px) rotateY(-150deg) rotateX(24deg) scale(.5); filter: blur(10px) brightness(3); }
  18% { opacity: 1; }
  70% { filter: blur(0) brightness(1.5); }
  100% { opacity: 1; transform: translateZ(0) rotateY(0deg) rotateX(0deg) scale(1); filter: blur(0) brightness(1); }
}
@keyframes intro-hover {
  0%, 100% { rotate: y 0deg; }
  50% { rotate: y 10deg; }
}

.intro-logo img.front { animation: intro-flash 1.4s ease-in-out 3.5s; }
@keyframes intro-flash {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.35) drop-shadow(0 0 22px rgba(196, 181, 253, .9)); }
}

#intro-skip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(167, 139, 250, .4);
  border-radius: 12px;
  background: rgba(9, 8, 15, .6);
  color: #a7a2cf;
  font: 600 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: intro-skip-in .5s ease-out 1s forwards;
}
@keyframes intro-skip-in { to { opacity: 1; } }
@keyframes intro-exit { to { opacity: 0; visibility: hidden; } }

/* The page logo keeps turning, as on Neura AI. */
.spin3d { perspective: 700px; }
.spin3d img {
  display: block;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, .6));
  animation: logo-turn 7s linear infinite;
}
@keyframes logo-turn {
  0% { transform: rotateY(0deg) translateY(0); }
  25% { transform: rotateY(90deg) translateY(-3px); }
  50% { transform: rotateY(180deg) translateY(0); }
  75% { transform: rotateY(270deg) translateY(-3px); }
  100% { transform: rotateY(360deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .spin3d img { animation: none; }
}