.oracle-descent {
  position: fixed;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), visibility 720ms;
}

body[data-cathedral-state="sending"] .oracle-descent,
body[data-cathedral-state="waiting"] .oracle-descent,
body[data-cathedral-state="thinking"] .oracle-descent,
body[data-cathedral-state="streaming"] .oracle-descent {
  visibility: visible;
}

body[data-cathedral-state="sending"] .oracle-descent { opacity: 0.38; }
body[data-cathedral-state="waiting"] .oracle-descent { opacity: 0.56; }
body[data-cathedral-state="thinking"] .oracle-descent { opacity: 0.72; }
body[data-cathedral-state="streaming"] .oracle-descent { opacity: 1; }
body[data-cathedral-state="complete"] .oracle-descent { opacity: 0; }

.oracle-descent-column {
  position: absolute;
  top: -7vh;
  bottom: 5vh;
  left: 50%;
  width: clamp(11rem, 20vw, 22rem);
  opacity: 0.82;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(85, 220, 210, 0.08) 18%, rgba(196, 255, 244, 0.34) 48% 52%, rgba(85, 220, 210, 0.08) 82%, transparent 92%),
    radial-gradient(ellipse at 50% 8%, rgba(214, 255, 247, 0.78), rgba(95, 224, 211, 0.18) 28%, transparent 66%);
  filter: blur(0.12rem) drop-shadow(0 0 1.5rem rgba(94, 226, 213, 0.38));
  mask-image: linear-gradient(180deg, transparent, #000 7% 78%, transparent 100%);
  transform: translateX(-50%);
  animation: oracle-column-breathe 4.8s ease-in-out infinite;
}

.oracle-descent-column::before,
.oracle-descent-column::after {
  content: "";
  position: absolute;
  inset: 0 14%;
}

.oracle-descent-column::before {
  opacity: 0.62;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2.3rem,
    rgba(198, 255, 246, 0.2) 2.36rem 2.4rem,
    transparent 2.46rem 4.8rem
  );
  background-size: 100% 4.8rem;
  animation: oracle-script-drift 2.8s linear infinite;
}

.oracle-descent-column::after {
  inset: 0 46%;
  background: linear-gradient(180deg, transparent, rgba(231, 255, 250, 0.82) 24%, rgba(106, 237, 224, 0.24) 82%, transparent);
  filter: blur(0.24rem);
  animation: oracle-core-current 2.4s ease-in-out infinite;
}

.oracle-descent-aperture {
  position: absolute;
  top: 5.8vh;
  left: 50%;
  width: clamp(12rem, 22vw, 24rem);
  height: clamp(2.2rem, 4vw, 4.2rem);
  border: 1px solid rgba(191, 255, 247, 0.7);
  border-top-color: rgba(239, 255, 251, 0.98);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(180, 255, 245, 0.22), rgba(65, 184, 175, 0.04) 52%, transparent 70%);
  box-shadow: 0 0 1.6rem rgba(94, 230, 216, 0.34), inset 0 0 1.1rem rgba(211, 255, 248, 0.22);
  transform: translateX(-50%);
  animation: oracle-aperture-pulse 3.6s ease-in-out infinite;
}

.oracle-descent-ring {
  position: absolute;
  top: 9vh;
  left: 50%;
  width: clamp(9rem, 17vw, 18rem);
  height: clamp(1.7rem, 3.1vw, 3rem);
  opacity: 0;
  border: 1px solid rgba(153, 247, 236, 0.56);
  border-right-color: rgba(198, 72, 80, 0.58);
  border-radius: 50%;
  box-shadow: 0 0 0.9rem rgba(90, 224, 211, 0.18);
  transform: translate(-50%, 0) scale(0.52);
  animation: oracle-ring-descend 4.2s cubic-bezier(0.22, 0.72, 0.2, 1) infinite;
}

.oracle-descent-ring.ring-b { animation-delay: -1.4s; }
.oracle-descent-ring.ring-c { animation-delay: -2.8s; }

.oracle-descent-glyphs {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 0;
}

.oracle-descent-glyphs > i {
  position: absolute;
  top: 7vh;
  left: var(--x);
  min-width: 1.2rem;
  padding: 0.2rem 0.14rem 0.34rem;
  opacity: 0;
  border-top: 1px solid rgba(203, 255, 248, 0.48);
  border-bottom: 1px solid rgba(176, 72, 80, 0.26);
  color: rgba(212, 255, 249, 0.82);
  font: 500 0.62rem/1 var(--oracle-font-display, "Yu Mincho", serif);
  font-style: normal;
  text-align: center;
  text-shadow: 0 0 0.48rem rgba(111, 235, 223, 0.72);
  writing-mode: vertical-rl;
  animation: oracle-glyph-fall var(--duration) linear var(--delay) infinite;
}

.oracle-descent-floor {
  position: absolute;
  bottom: clamp(2.4rem, 5vh, 5.5rem);
  left: 50%;
  width: clamp(12rem, 24vw, 26rem);
  height: clamp(2rem, 4vw, 4.2rem);
  border: 1px solid rgba(118, 229, 218, 0.38);
  border-right-color: rgba(190, 69, 78, 0.42);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(164, 255, 244, 0.2), rgba(54, 167, 157, 0.06) 48%, transparent 72%);
  box-shadow: 0 0 2.2rem rgba(93, 230, 216, 0.24), inset 0 0 1.2rem rgba(189, 255, 247, 0.16);
  transform: translateX(-50%);
  animation: oracle-floor-accept 3.2s ease-in-out infinite;
}

.oracle-descent-caption {
  position: absolute;
  top: 18vh;
  left: calc(50% + clamp(7.5rem, 12vw, 13rem));
  display: grid;
  gap: 0.36rem;
  justify-items: center;
  opacity: 0.68;
  color: rgba(199, 255, 247, 0.82);
  writing-mode: vertical-rl;
  text-shadow: 0 0 0.6rem rgba(91, 223, 210, 0.42);
}

.oracle-descent-caption b {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(195, 255, 247, 0.6);
  font: 600 0.74rem/1.4 var(--oracle-font-display, "Yu Mincho", serif);
  letter-spacing: 0.18em;
}

.oracle-descent-caption small {
  color: rgba(129, 216, 207, 0.56);
  font: 700 0.34rem/1 var(--oracle-font-code, "Cascadia Code", monospace);
  letter-spacing: 0.08em;
}

@keyframes oracle-column-breathe {
  0%, 100% { opacity: 0.66; filter: blur(0.16rem) drop-shadow(0 0 1.1rem rgba(94, 226, 213, 0.25)); }
  50% { opacity: 0.94; filter: blur(0.08rem) drop-shadow(0 0 2rem rgba(127, 246, 232, 0.46)); }
}

@keyframes oracle-script-drift {
  from { background-position: 0 -4.8rem; }
  to { background-position: 0 0; }
}

@keyframes oracle-core-current {
  0%, 100% { opacity: 0.32; transform: scaleX(0.55); }
  50% { opacity: 0.88; transform: scaleX(1.35); }
}

@keyframes oracle-aperture-pulse {
  0%, 100% { opacity: 0.54; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 0.92; transform: translateX(-50%) scale(1.04); }
}

@keyframes oracle-ring-descend {
  0% { opacity: 0; transform: translate(-50%, -2vh) scale(0.48); }
  14% { opacity: 0.72; }
  72% { opacity: 0.34; }
  100% { opacity: 0; transform: translate(-50%, 66vh) scale(1.34); }
}

@keyframes oracle-glyph-fall {
  0% { opacity: 0; transform: translateY(-8vh); filter: blur(0.35rem); }
  16% { opacity: 0.74; filter: blur(0); }
  76% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(70vh); filter: blur(0.2rem); }
}

@keyframes oracle-floor-accept {
  0%, 100% { opacity: 0.42; transform: translateX(-50%) scale(0.9); }
  50% { opacity: 0.92; transform: translateX(-50%) scale(1.05); }
}

@media (max-width: 780px) {
  .oracle-descent-column { width: 12rem; }
  .oracle-descent-aperture { width: 13rem; }
  .oracle-descent-ring { width: 10rem; }
  .oracle-descent-caption { top: 24vh; left: calc(50% + 6.6rem); }
  .oracle-descent-glyphs > i:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-descent,
  .oracle-descent-column,
  .oracle-descent-column::before,
  .oracle-descent-column::after,
  .oracle-descent-aperture,
  .oracle-descent-ring,
  .oracle-descent-glyphs > i,
  .oracle-descent-floor {
    animation: none !important;
    transition: none !important;
  }

  .oracle-descent-ring,
  .oracle-descent-glyphs > i { display: none; }
}