.rizen-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #030106;
  isolation: isolate;
}

.rizen-cosmos,
.rizen-cosmos::before,
.rizen-cosmos::after,
.rizen-cosmos-core,
.rizen-cosmos-wave,
.rizen-cosmos-rays,
.rizen-cosmos-orbits {
  position: absolute;
  inset: 0;
}

.rizen-cosmos::before {
  content: "";
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 220, 255, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(177, 43, 255, .22), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(51, 10, 86, .34), transparent 58%);
  opacity: 0;
  transform: scale(.18);
  animation: rizen-space-bloom 1.72s cubic-bezier(.16, 1, .3, 1) both;
}

.rizen-cosmos::after {
  content: "";
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 17%, rgba(203,109,255,.46) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 70%, rgba(255,255,255,.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 77%, rgba(153,61,255,.5) 0 1px, transparent 1.5px);
  background-size: 190px 170px, 230px 210px, 270px 240px, 310px 280px;
  opacity: 0;
  transform: scale(.5);
  animation: rizen-starfield 1.55s .18s ease-out both;
}

.rizen-cosmos-core {
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 24px #e3a3ff,
    0 0 70px 24px rgba(183, 50, 255, .82),
    0 0 150px 60px rgba(91, 20, 164, .48);
  transform: translate(-50%, -50%) scale(0);
  animation: rizen-core-burst 1.26s cubic-bezier(.16, 1, .3, 1) both;
}

.rizen-cosmos-wave {
  inset: 50% auto auto 50%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(224, 166, 255, .74);
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(197, 74, 255, .18), 0 0 32px rgba(156, 46, 255, .34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.02);
}

.rizen-cosmos-wave--one { animation: rizen-wave 1.18s .22s cubic-bezier(.16, 1, .3, 1) both; }
.rizen-cosmos-wave--two { animation: rizen-wave 1.08s .4s cubic-bezier(.16, 1, .3, 1) both; }

.rizen-cosmos-rays { left: 50%; top: 50%; width: 0; height: 0; }

.rizen-cosmos-rays span {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(110px, 22vw, 360px);
  height: 1px;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--ray) * 30deg)) scaleX(0);
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(196,78,255,.48) 35%, transparent 100%);
  box-shadow: 0 0 9px rgba(201, 96, 255, .7);
  opacity: 0;
  animation: rizen-ray 1.08s calc(.2s + var(--ray) * 12ms) cubic-bezier(.16, 1, .3, 1) both;
}

.rizen-cosmos-orbits { left: 50%; top: 50%; width: 0; height: 0; }

.rizen-cosmos-spark {
  position: absolute;
  left: -18px;
  top: -18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #f3dcff;
  border: 1px solid rgba(225, 166, 255, .62);
  border-radius: 50%;
  background: rgba(30, 8, 49, .76);
  box-shadow: 0 0 26px rgba(184, 52, 255, .7);
  opacity: 0;
  transform: rotate(var(--angle)) translateX(0) rotate(var(--counter-angle)) scale(.2);
  animation: rizen-orbit-spark 1.02s .34s cubic-bezier(.16, 1, .3, 1) both;
}

.rizen-cosmos-spark svg { width: 17px; height: 17px; stroke-width: 1.8; }

.rizen-intro-lockup {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, calc(100vw - 44px));
  text-align: center;
  opacity: 0;
  transform: scale(.72);
  filter: blur(12px);
  animation: rizen-logo-resolve 1.16s .36s cubic-bezier(.16, 1, .3, 1) both;
}

.rizen-intro-lockup img {
  width: clamp(150px, 18vw, 230px);
  filter: drop-shadow(0 0 32px rgba(185, 62, 255, .6));
}

.rizen-intro-lockup p {
  margin: 0;
  color: #e2d5e9;
  font: 700 clamp(9px, 1vw, 12px)/1.35 "Manrope", sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

html.rizen-intro-active { overflow: hidden; }
html.rizen-intro-active .rizen-intro {
  display: grid;
  pointer-events: auto;
  animation: rizen-intro-shell 1.86s both;
}

html.rizen-intro-active .site-header { animation: rizen-page-drop .72s 1.08s cubic-bezier(.16, 1, .3, 1) both; }
html.rizen-intro-active .hub-copy { animation: rizen-page-rise .76s 1.04s cubic-bezier(.16, 1, .3, 1) both; }
html.rizen-intro-active .hero-mosaic { animation: rizen-hero-emerge .9s 1s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes rizen-core-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(.45); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(3.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(10); }
}
@keyframes rizen-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
@keyframes rizen-ray {
  0% { opacity: 0; transform: rotate(calc(var(--ray) * 30deg)) scaleX(0); }
  22% { opacity: .92; }
  100% { opacity: 0; transform: rotate(calc(var(--ray) * 30deg)) scaleX(1.45); }
}
@keyframes rizen-orbit-spark {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) rotate(var(--counter-angle)) scale(.2); }
  32%, 70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(clamp(120px, 20vw, 310px)) rotate(var(--counter-angle)) scale(.9); }
}
@keyframes rizen-space-bloom {
  0% { opacity: 0; transform: scale(.18); }
  32% { opacity: 1; }
  100% { opacity: .1; transform: scale(1.2); }
}
@keyframes rizen-starfield {
  0% { opacity: 0; transform: scale(.5); }
  40% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes rizen-logo-resolve {
  0%, 24% { opacity: 0; transform: scale(.72); filter: blur(12px); }
  52%, 78% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.055); filter: blur(4px); }
}
@keyframes rizen-intro-shell {
  0%, 76% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes rizen-page-drop { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes rizen-page-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rizen-hero-emerge { from { opacity: 0; transform: scale(1.06); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 640px) {
  .rizen-intro-lockup { gap: 12px; }
  .rizen-intro-lockup p { max-width: 280px; letter-spacing: .2em; line-height: 1.5; }
  .rizen-cosmos-rays span { width: 42vw; }
  .rizen-cosmos-spark { width: 32px; height: 32px; left: -16px; top: -16px; }
  @keyframes rizen-orbit-spark {
    0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) rotate(var(--counter-angle)) scale(.2); }
    32%, 70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateX(min(34vw, 150px)) rotate(var(--counter-angle)) scale(.82); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rizen-intro { display: none !important; }
  html.rizen-intro-active { overflow: auto; }
  html.rizen-intro-active .site-header,
  html.rizen-intro-active .hub-copy,
  html.rizen-intro-active .hero-mosaic { animation: none; }
}