/* ════════════════════════════════════════════════════════════
   The Rite of Passage - immersive full-screen onboarding
   Inherits tokens (--accent, --font-title, …) from style.css
   ════════════════════════════════════════════════════════════ */

.rite-overlay {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 20%, #1b1338 0%, #0a0718 55%, #050410 100%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.rite-overlay.show { opacity: 1; }

/* in-wizard lightning canvas (behind the content, above the decor) */
.rite-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ambient decor */
.rite-bg {
  position: absolute; top: 48%; left: 50%; width: min(150vh, 170vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); color: var(--accent-soft); opacity: 0.05; pointer-events: none;
  animation: riteSpin 90s linear infinite;
}
.rite-bg svg { width: 100%; height: 100%; }
.rite-aura {
  position: absolute; top: 24%; left: 50%; width: 72vmax; height: 72vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 60%); filter: blur(55px); opacity: 0.4;
  pointer-events: none; animation: riteAura 7s ease-in-out infinite;
}
@keyframes riteAura { 0%,100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes riteSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* layout */
.rite-stage {
  position: relative; z-index: 2; width: min(720px, 100%); height: 100%;
  display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) clamp(18px, 5vw, 40px) max(16px, env(safe-area-inset-bottom));
}
.rite-top { display: flex; align-items: center; gap: 12px; padding: clamp(10px, 2vh, 18px) 0; }
.rite-logo { flex: 0 0 auto; height: 30px; width: auto; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.rite-back { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline-strong); background: rgba(255,255,255,0.03); color: var(--muted); cursor: pointer; transition: 0.2s; }
.rite-back:hover { color: var(--text); border-color: var(--accent); }
.rite-back svg { width: 16px; height: 16px; }
.rite-back[hidden] { display: none; }
.rite-brand { font-family: var(--font-title); letter-spacing: 0.18em; text-transform: uppercase; font-size: clamp(0.66rem, 2vw, 0.8rem); color: var(--accent-soft); white-space: nowrap; }
.rite-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rite-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft)); box-shadow: 0 0 12px var(--accent-glow); transition: width 0.5s var(--ease); }
.rite-x { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline-strong); background: rgba(255,255,255,0.03); color: var(--muted); cursor: pointer; transition: 0.2s; }
.rite-x:hover { color: var(--text); border-color: var(--accent); }
.rite-x svg { width: 16px; height: 16px; }

.rite-scene {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  gap: clamp(12px, 2.2vh, 18px); padding: clamp(26px, 6vh, 56px) 4px clamp(20px, 3vh, 28px);
}
.rite-scene::-webkit-scrollbar { width: 0; }
.rite-scene.in { animation: riteScene 0.5s var(--ease); }
.rite-scene.in .rite-orb { animation: riteOrbIn 0.7s var(--ease); }
@keyframes riteScene { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes riteOrbIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* glyph orb */
.rite-orb { position: relative; width: clamp(82px, 15vh, 112px); aspect-ratio: 1; display: grid; place-items: center; }
.rite-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline-strong); }
.rite-orb-ring::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed var(--hairline); animation: riteSpin2 24s linear infinite; }
@keyframes riteSpin2 { to { transform: rotate(360deg); } }
.rite-orb::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 65%); opacity: 0.5; animation: riteAura 5s ease-in-out infinite; z-index: -1; }
.rite-glyph2 { width: 46%; color: var(--accent-soft); filter: drop-shadow(0 0 14px var(--accent-glow)); }
.rite-glyph2 svg { width: 100%; height: 100%; }

.rite-chapter { font-family: var(--font-title); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--faint); margin-top: 2px; line-height: 1.5; }
.rite-title-2 { font-family: var(--font-title); font-size: clamp(1.4rem, 5vw, 2.1rem); font-weight: 600; line-height: 1.14; max-width: 18ch; margin-top: 2px; }
.rite-narrative { color: var(--muted); max-width: 48ch; font-size: clamp(0.95rem, 2vw, 1.05rem); line-height: 1.62; margin-top: 2px; }
.rite-narrative p { margin-bottom: 0.55em; }
.rite-narrative strong { color: var(--text); }
.rite-narrative a { color: var(--accent-soft); }

/* lead paragraph */
.rite-lead { color: var(--muted); max-width: 46ch; margin: 0 auto; }

/* step counter inside the chapter eyebrow */
.rite-step-count { color: var(--accent-soft); }
.rite-dot { margin: 0 0.5em; opacity: 0.5; }

/* numbered step panels */
.rite-steps { list-style: none; display: grid; gap: 8px; max-width: 44ch; margin: clamp(14px, 2.6vh, 20px) auto 0; text-align: left; }
.rite-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--hairline); }
.rite-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; color: var(--accent-soft); background: rgba(155,108,255,0.14); border: 1px solid var(--hairline-strong); }
.rite-step-t { color: var(--muted); font-size: 0.92rem; line-height: 1.5; padding-top: 2px; }
.rite-step-t a { color: var(--accent-soft); }

/* note callout — magical glass with a glowing rune */
.rite-note {
  position: relative; overflow: hidden;
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  max-width: 44ch; margin: clamp(18px, 3.4vh, 28px) auto 0; padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(155,108,255,0.17), rgba(91,52,201,0.05));
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 0.88rem; color: var(--muted);
}
.rite-note::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(130% 90% at 0% 0%, rgba(191,163,255,0.16), transparent 60%); }
.rite-note svg { position: relative; width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-soft); filter: drop-shadow(0 0 5px var(--accent-glow)); margin-top: 1px; animation: noteGlow 3.4s ease-in-out infinite; }
.rite-note span { position: relative; }
.rite-note strong { color: var(--text); }
@keyframes noteGlow { 0%,100% { filter: drop-shadow(0 0 4px var(--accent-glow)); } 50% { filter: drop-shadow(0 0 11px var(--accent-glow)); } }

/* link cards (retailers / platforms) */
.rite-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; margin: clamp(14px, 2.6vh, 20px) auto 0; }
.rite-card { position: relative; text-align: left; padding: 14px 40px 14px 15px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); min-width: 160px; flex: 1 1 160px; max-width: 220px; transition: 0.2s; }
.rite-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.rite-card.rec { border-color: var(--accent); background: rgba(155,108,255,0.1); }
.rite-card-badge { display: block; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 5px; }
.rite-card-name { display: block; font-family: var(--font-title); font-weight: 600; }
.rite-card-desc { display: block; font-size: 0.8rem; color: var(--faint); margin-top: 2px; }
.rite-card-go { position: absolute; top: 14px; right: 13px; color: var(--faint); transition: 0.2s; }
.rite-card-go svg { width: 16px; height: 16px; }
.rite-card:hover .rite-card-go { color: var(--accent-soft); }

/* term chips */
.rite-chips { display: flex; flex-direction: column; gap: 7px; max-width: 46ch; margin: clamp(14px, 2.6vh, 20px) auto 0; }
.rite-chip { display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--hairline); }
.rite-chip b { flex: 0 0 auto; min-width: 84px; white-space: nowrap; font-family: var(--font-mono); font-weight: 700; color: var(--accent-soft); font-size: 0.82rem; }
.rite-chip span { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }

/* connect options */
.rite-connect-alt { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.rite-connect-alt > div { text-align: left; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--muted); min-width: 160px; }
.rite-connect-alt strong { color: var(--text); }
.rite-narrative code, .rite-connect-alt code, .rite-steps code { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-soft); background: rgba(0,0,0,0.4); border: 1px solid var(--hairline); border-radius: 6px; padding: 2px 7px; }
.rite-welcome { font-family: var(--font-title); font-style: italic; color: var(--accent-soft); font-size: 1.05rem; margin-top: clamp(14px, 2.6vh, 20px); }

/* actions */
.rite-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: clamp(6px, 1.5vh, 12px); }
.rite-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; transition: 0.22s var(--ease); text-align: center; }
.rite-btn svg { width: 18px; height: 18px; }
.rite-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; box-shadow: 0 8px 28px var(--accent-glow); }
.rite-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px var(--accent-glow); }
.rite-btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--hairline-strong); }
.rite-btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.rite-btn-discord { background: #5865F2; color: #fff; box-shadow: 0 8px 28px rgba(88,101,242,0.4); }
.rite-btn-discord:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(88,101,242,0.5); }
.rite-btn-lg { padding: 15px 32px; font-size: 1.02rem; }

/* footer */
.rite-foot { display: flex; justify-content: center; gap: 20px; padding: clamp(8px, 2vh, 16px) 0; }
.rite-foot button { background: none; border: 0; color: var(--faint); font-family: var(--font-body); font-size: 0.82rem; cursor: pointer; transition: 0.2s; }
.rite-foot button:hover { color: var(--text); }

/* mobile */
@media (max-width: 560px) {
  .rite-stage { padding-left: 16px; padding-right: 16px; }
  .rite-brand { display: none; }
  .rite-actions { flex-direction: column; align-items: stretch; }
  .rite-btn { width: 100%; padding: 15px 22px; }
  .rite-card { max-width: none; }
  .rite-title-2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rite-bg, .rite-aura, .rite-orb-ring::before, .rite-orb::after, .rite-note svg { animation: none !important; }
  .rite-scene.in, .rite-scene.in .rite-orb { animation: none !important; }
  .rite-overlay { transition: none; }
  .rite-fx { display: none; }
}