/* ============================================================
   Astra Origins — Prologue (cosmos-introduction)
   Single full-screen cosmic introduction · new-design right pane.
   Ported from newdesign_reference/css/cosmos-introduction.css and
   adapted to the master's `.t-right > .t-scroll` shell (which is
   padded + light by default — reset to full-bleed dark here).
   ============================================================ */

/* Full-bleed dark reading surface: cancel the pane's default padding + light
   background whenever the introduction is what's rendered inside it. */
.t-right .t-scroll:has(> .intro-page) {
  padding: 0;
  background: #05060d;
  overflow-y: auto;
}

.intro {
  --ink-0: oklch(0.98 0.01 250);
  --ink-1: oklch(0.88 0.02 250);
  --ink-2: oklch(0.68 0.03 255);
  --gold:  oklch(0.86 0.11 85);
  --violet: oklch(0.72 0.16 285);
  color: var(--ink-1);
}

/* the page fills the pane and centers its content */
.intro-page {
  position: relative;
  min-height: 100%;
  background: #05060d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 36px) clamp(20px, 5vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
/* center vignette to lift text off the busy sky */
.intro-page::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 60% at 50% 50%, rgba(5,6,13,0.62), rgba(5,6,13,0.15) 62%, transparent 80%);
}

/* ══════════════════ BACK BUTTON ══════════════════ */
.intro-back {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: oklch(0.98 0.01 250 / 0.08);
  border: 1px solid oklch(0.98 0.01 250 / 0.18);
  color: var(--ink-1); cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  backdrop-filter: blur(6px);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.intro-back:hover { background: oklch(0.98 0.01 250 / 0.16); color: var(--ink-0); transform: translateX(-2px); }
.intro-back i { font-size: 12px; }

/* ══════════════════ FULL-PAGE SKY ══════════════════ */
.intro-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* --- galactic web: faint filament mesh + nodes --- */
.intro-web {
  position: absolute; inset: -12%;
  background-image:
    linear-gradient(34deg,  transparent 48.6%, oklch(0.7 0.08 275 / 0.10) 49.6%, transparent 50.6%),
    linear-gradient(-22deg, transparent 48.6%, oklch(0.7 0.08 250 / 0.08) 49.6%, transparent 50.6%),
    linear-gradient(82deg,  transparent 48.8%, oklch(0.7 0.08 300 / 0.07) 49.6%, transparent 50.4%),
    linear-gradient(-64deg, transparent 48.8%, oklch(0.7 0.07 230 / 0.06) 49.6%, transparent 50.4%),
    radial-gradient(2px 2px at 20% 30%, oklch(0.8 0.06 280 / 0.5), transparent),
    radial-gradient(2px 2px at 68% 22%, oklch(0.8 0.06 260 / 0.45), transparent),
    radial-gradient(2px 2px at 44% 66%, oklch(0.8 0.06 300 / 0.4), transparent),
    radial-gradient(2px 2px at 82% 74%, oklch(0.8 0.06 250 / 0.4), transparent);
  background-size: 300px 300px, 380px 380px, 340px 340px, 420px 420px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.55;
  animation: intro-web-drift 40s ease-in-out infinite alternate;
}
@keyframes intro-web-drift {
  from { transform: translate3d(-1%, -0.5%, 0) scale(1.01); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.05); }
}

/* --- nebula wash --- */
.intro-neb {
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(52% 42% at 20% 20%, oklch(0.42 0.16 285 / 0.5), transparent 70%),
    radial-gradient(50% 38% at 84% 28%, oklch(0.44 0.13 235 / 0.45), transparent 72%),
    radial-gradient(66% 52% at 50% 98%, oklch(0.46 0.12 25 / 0.38), transparent 70%);
  filter: blur(8px);
  animation: intro-neb-drift 26s ease-in-out infinite alternate;
}
@keyframes intro-neb-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.03); opacity: 0.82; }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.09); opacity: 1; }
}

/* --- supernova remnant --- */
.intro-remnant {
  position: absolute; top: 7%; right: 5%;
  width: clamp(200px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 30%, oklch(0.72 0.17 20 / 0.28) 43%, transparent 60%),
    radial-gradient(circle at 52% 48%, transparent 38%, oklch(0.7 0.15 300 / 0.24) 54%, transparent 70%),
    radial-gradient(circle at 47% 53%, oklch(0.88 0.12 90 / 0.2) 12%, transparent 42%),
    radial-gradient(circle at 50% 50%, oklch(0.75 0.14 255 / 0.16) 46%, transparent 64%);
  filter: blur(3px);
  opacity: 0.9;
  animation: intro-remnant 13s ease-in-out infinite;
}
@keyframes intro-remnant {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.78; }
  50%      { transform: scale(1.08) rotate(8deg); opacity: 1; }
}

/* --- celestial bodies: the Sun, Earth, the Moon, Mars --- */
.intro-sun {
  position: absolute; top: -70px; left: -70px;
  width: clamp(160px, 20vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff6d8 0%, #ffd66b 34%, #ff9d3c 62%, oklch(0.68 0.2 45 / 0.5) 82%, transparent 100%);
  box-shadow: 0 0 120px 30px oklch(0.82 0.16 65 / 0.45), 0 0 220px 60px oklch(0.75 0.15 50 / 0.25);
  animation: intro-sun 8s ease-in-out infinite;
}
@keyframes intro-sun { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.08); } }

.intro-earth {
  position: absolute; left: -60px; bottom: -80px;
  width: clamp(190px, 23vw, 280px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, oklch(0.7 0.09 200 / 0.55), transparent 42%),
    radial-gradient(ellipse at 40% 44%, oklch(0.62 0.14 145) 0 18%, transparent 40%),
    radial-gradient(ellipse at 70% 66%, oklch(0.6 0.13 150) 0 14%, transparent 38%),
    radial-gradient(ellipse at 30% 74%, oklch(0.6 0.13 150) 0 12%, transparent 34%),
    radial-gradient(circle at 38% 34%, oklch(0.55 0.13 245), oklch(0.36 0.12 255) 60%, oklch(0.16 0.07 260) 100%);
  box-shadow: inset -30px -22px 62px rgba(0,0,0,0.6),
              0 0 4px 2px oklch(0.8 0.08 220 / 0.5),
              0 0 44px 6px oklch(0.7 0.12 230 / 0.35);
  opacity: 0.96;
  animation: intro-body-float 16s ease-in-out infinite;
}
.intro-moon {
  position: absolute; left: clamp(180px, 22vw, 270px); bottom: 30%;
  width: clamp(34px, 4vw, 50px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, oklch(0.87 0.01 90), oklch(0.58 0.01 90) 66%, oklch(0.3 0.01 90));
  box-shadow: inset -7px -5px 13px rgba(0,0,0,0.55), 0 0 18px oklch(0.8 0.02 90 / 0.25);
  opacity: 0.9;
  animation: intro-body-float 16s ease-in-out infinite 1s;
}
.intro-mars {
  position: absolute; right: 8%; bottom: 16%;
  width: clamp(80px, 10vw, 130px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(ellipse at 60% 30%, oklch(0.7 0.12 45 / 0.5), transparent 40%),
    radial-gradient(ellipse at 38% 62%, oklch(0.5 0.13 35) 0 16%, transparent 40%),
    radial-gradient(circle at 40% 36%, oklch(0.68 0.16 40), oklch(0.5 0.15 32) 58%, oklch(0.3 0.1 30) 100%);
  box-shadow: inset -16px -12px 34px rgba(0,0,0,0.55), 0 0 30px oklch(0.6 0.14 40 / 0.3);
  opacity: 0.94;
  animation: intro-body-float 20s ease-in-out infinite 0.5s;
}
@keyframes intro-body-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- other bright / distant stars --- */
.intro-brightstars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(3px 3px at 24% 18%, #fff, transparent 60%),
    radial-gradient(2.4px 2.4px at 66% 12%, oklch(0.92 0.05 230), transparent 60%),
    radial-gradient(2.8px 2.8px at 88% 40%, oklch(0.95 0.04 60), transparent 60%),
    radial-gradient(2.2px 2.2px at 52% 60%, #fff, transparent 60%),
    radial-gradient(2.6px 2.6px at 14% 54%, oklch(0.9 0.06 285), transparent 60%);
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
  opacity: 0.9;
  animation: intro-twinkle 5s ease-in-out infinite 0.6s;
}

/* --- spaceships traveling to distant stars --- */
.intro-ship {
  position: absolute; color: #fff; font-size: 13px;
  filter: drop-shadow(0 0 6px oklch(0.85 0.08 220 / 0.8));
}
.intro-ship i { display: block; transform: rotate(28deg); }
.intro-ship-trail {
  position: absolute; right: 8px; top: 50%;
  width: clamp(60px, 12vw, 140px); height: 1.5px;
  background: linear-gradient(90deg, transparent, oklch(0.9 0.06 220 / 0.85));
  border-radius: 2px; transform: translateY(-50%) rotate(28deg); transform-origin: right center;
  filter: blur(0.4px);
}
.intro-ship.s1 { animation: intro-cruise-1 15s linear infinite; }
.intro-ship.s2 { font-size: 10px; animation: intro-cruise-2 21s linear infinite 4s; }
@keyframes intro-cruise-1 {
  0%   { transform: translate3d(-12vw, 82vh, 0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(78vw, 6vh, 0); opacity: 0; }
}
@keyframes intro-cruise-2 {
  0%   { transform: translate3d(105vw, 70vh, 0) scaleX(-1); opacity: 0; }
  12%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { transform: translate3d(10vw, 14vh, 0) scaleX(-1); opacity: 0; }
}

/* --- horizon glow --- */
.intro-horizon {
  position: absolute; left: -10%; right: -10%; bottom: -60px; height: 240px;
  background: radial-gradient(120% 100% at 50% 100%, oklch(0.6 0.14 255 / 0.45), transparent 70%);
  filter: blur(6px);
}

/* --- twinkling star layers --- */
.intro-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 64%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 44% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 58% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 30%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 86% 62%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 16% 82%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 64% 84%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 92% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 38% 92%, #fff, transparent);
  opacity: 0.9;
  animation: intro-twinkle 4.2s ease-in-out infinite;
}
.intro-stars-b {
  background-image:
    radial-gradient(1px 1px at 20% 40%, oklch(0.9 0.05 250), transparent),
    radial-gradient(1px 1px at 50% 20%, oklch(0.9 0.05 250), transparent),
    radial-gradient(1px 1px at 76% 52%, oklch(0.9 0.05 250), transparent),
    radial-gradient(1px 1px at 34% 70%, oklch(0.9 0.05 250), transparent),
    radial-gradient(1px 1px at 88% 78%, oklch(0.9 0.05 250), transparent),
    radial-gradient(1px 1px at 8% 56%, oklch(0.9 0.05 250), transparent);
  opacity: 0.5;
  animation: intro-twinkle 6s ease-in-out infinite reverse;
}
@keyframes intro-twinkle { 0%,100% { opacity: 0.85; } 50% { opacity: 0.35; } }

/* --- shooting stars --- */
.intro-shoot {
  position: absolute; top: 16%; left: -10%;
  width: 120px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff);
  border-radius: 2px; opacity: 0; transform: rotate(18deg);
  animation: intro-shoot 7s ease-in 2.5s infinite;
}
.intro-shoot-2 { top: 40%; left: 26%; width: 90px; animation-delay: 6s; animation-duration: 9s; }
@keyframes intro-shoot {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(18deg); }
  6% { opacity: 0.9; }
  16% { opacity: 0; transform: translate3d(60vw, 20vh, 0) rotate(18deg); }
  100% { opacity: 0; }
}

/* --- subtle celestial-navigation rings behind the title --- */
.intro-compass {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(300px, 46vw, 520px); aspect-ratio: 1;
  display: grid; place-items: center; opacity: 0.22; pointer-events: none;
}
.intro-compass-ring { position: absolute; border-radius: 50%; border: 1px solid oklch(0.8 0.06 260 / 0.4); }
.intro-compass-ring:nth-child(1) { width: 42%; height: 42%; }
.intro-compass-ring.r2 { width: 70%; height: 70%; border-style: dashed; border-color: oklch(0.8 0.09 285 / 0.4); animation: intro-spin 70s linear infinite; }
.intro-compass-ring.r3 { width: 100%; height: 100%; border-color: oklch(0.8 0.06 235 / 0.3); animation: intro-spin 130s linear infinite reverse; }
@keyframes intro-spin { to { transform: rotate(360deg); } }

/* --- launching rocket --- */
.intro-rocket {
  position: absolute; left: 74%; bottom: 10%;
  font-size: 26px; color: #fff;
  filter: drop-shadow(0 0 10px oklch(0.8 0.1 40 / 0.7));
  animation: intro-launch 10s ease-in-out infinite;
}
.intro-rocket i { display: block; transform: rotate(-20deg); }
.intro-rocket-trail {
  position: absolute; left: 3px; bottom: -6px;
  width: 3px; height: 84px;
  background: linear-gradient(to top, transparent, oklch(0.8 0.12 40 / 0.7), oklch(0.9 0.08 60 / 0.4));
  border-radius: 3px; transform: rotate(20deg); transform-origin: top center; filter: blur(1px);
}
@keyframes intro-launch {
  0%   { transform: translate3d(0, 40px, 0); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translate3d(-80px, -200px, 0); opacity: 1; }
  100% { transform: translate3d(-130px, -320px, 0); opacity: 0; }
}

/* ══════════════════ CENTERED CONTENT ══════════════════ */
.intro-center {
  position: relative; z-index: 1;
  max-width: 660px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.intro-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  margin: 0 0 12px;
  text-wrap: balance;
  text-shadow: 0 2px 40px oklch(0.6 0.16 275 / 0.55);
  animation: intro-rise 1s ease both;
}
.intro-title-l1 {
  display: block;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.12;
  margin-bottom: 6px;
}
.intro-title-l2 {
  display: block;
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 22px);
  line-height: 1.25;
  color: var(--ink-1);
}
.intro-coord {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.22em; color: var(--ink-2);
  animation: intro-rise 1.1s ease 0.12s both;
}
.intro-coord i { color: var(--violet); }

@keyframes intro-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.intro-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: clamp(12px, 2vh, 22px) auto; max-width: 220px; width: 60%;
  color: var(--gold);
}
.intro-rule::before, .intro-rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, oklch(0.85 0.11 85 / 0.6), transparent);
}
.intro-rule-star { font-size: 11px; filter: drop-shadow(0 0 8px oklch(0.85 0.12 85 / 0.6)); }

/* letter — compact so the whole page fits one screen */
.intro-letter { animation: intro-rise 1.1s ease 0.24s both; }
.intro-salut {
  font-size: clamp(14px, 1.8vw, 17px); font-weight: 500;
  color: var(--ink-0); margin: 0 0 10px;
}
.intro-lede {
  font-size: clamp(14px, 1.9vw, 18px); font-weight: 300; line-height: 1.48;
  color: var(--ink-0); letter-spacing: -0.005em; text-wrap: pretty; margin: 0 0 12px;
}
.intro-para {
  font-size: clamp(12.5px, 1.5vw, 15px); font-weight: 300; line-height: 1.6;
  color: var(--ink-1); text-wrap: pretty; margin: 0 0 11px;
}
.intro-para em, .intro-await em { font-style: italic; color: var(--gold); font-weight: 400; }
.intro-await {
  font-size: clamp(14px, 1.8vw, 17px); line-height: 1.42; margin: 14px 0 0; letter-spacing: 0.01em;
}

/* signature */
.intro-sign { margin-top: clamp(14px, 2.6vh, 26px); animation: intro-rise 1.1s ease 0.36s both; }
.intro-sign-team {
  font-size: 11px; letter-spacing: 0.3em; color: var(--ink-1);
  text-transform: uppercase; margin-bottom: 11px;
}
.intro-quote {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(17px, 2.4vw, 24px); line-height: 1.28; letter-spacing: -0.01em;
  color: var(--ink-0); margin: 0;
  text-shadow: 0 2px 34px oklch(0.6 0.16 275 / 0.4);
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (min-width: 1100px) {
  .intro-title-l2 { white-space: nowrap; }
}
@media (max-width: 767px) {
  .intro-earth { left: -90px; bottom: -100px; }
  .intro-rocket { left: 82%; }
  .intro-center { padding-top: 40px; }
}

/* ══════════════════ REDUCED MOTION ══════════════════ */
@media (prefers-reduced-motion: reduce) {
  .intro-web, .intro-neb, .intro-remnant, .intro-stars, .intro-stars-b, .intro-brightstars,
  .intro-shoot, .intro-compass-ring, .intro-rocket, .intro-sun, .intro-earth, .intro-moon,
  .intro-mars, .intro-ship,
  .intro-title, .intro-coord, .intro-letter, .intro-sign { animation: none !important; }
  .intro-title, .intro-coord, .intro-letter, .intro-sign { opacity: 1; transform: none; }
  .intro-rocket, .intro-ship { opacity: 0.9; }
  .intro-ship.s2 { transform: scaleX(-1); }
}