/* ---------- /welcome/ — first-visit chart-reading quiz (loaded after theme.css) ---------- */
.welcome-page{ min-height:100svh; }

/* top bar */
.welcome-top{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 28px;
}
.welcome-top-actions{ display:flex; align-items:center; gap:10px; }
.skip-link{
  color:var(--muted); font-size:13px; text-decoration:none;
  padding:9px 16px; border-radius:999px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  transition:color .2s ease, border-color .2s ease;
}
.skip-link:hover{ color:var(--text); border-color:rgba(var(--text-rgb),0.3); }

/* stage + card */
.welcome-stage{
  position:relative; z-index:5; min-height:100svh;
  display:grid; place-items:center; padding:92px 16px 48px;
  background:transparent; /* theme.css paints <main> solid for the storefront */
}
.wz{
  --glow:#5eead4;
  position:relative; overflow:hidden; isolation:isolate;
  width:min(580px, 100%); padding:42px 42px 38px; text-align:center;
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.wz::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%);
  transition:background 1s ease;
}
.wz[data-step="result"]{ width:min(1060px, 100%); text-align:left; padding:44px 48px; }
.wz[data-step="result"]::before{
  background:radial-gradient(55% 80% at 22% 50%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 70%);
}

.wz-progress{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.wz[data-step="intro"] .wz-progress,
.wz[data-step="reading"] .wz-progress,
.wz[data-step="result"] .wz-progress{ display:none; }
.wz-progress-track{ flex:1; height:4px; border-radius:4px; background:rgba(var(--text-rgb),0.1); overflow:hidden; }
.wz-progress-fill{
  height:100%; width:20%; border-radius:4px;
  background:linear-gradient(90deg, var(--teal), var(--purple));
  box-shadow:0 0 12px rgba(94,234,212,0.6);
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.wz-count{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

.wz-step{ display:none; flex-direction:column; align-items:center; gap:16px; }
.wz-step.is-active{ display:flex; animation:stepIn .55s cubic-bezier(.2,.7,.2,1); }
.wz-step.is-active.from-left{ animation-name:stepInLeft; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(30px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes stepInLeft{ from{ opacity:0; transform:translateX(-30px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }

.wz-q-num{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em; color:var(--teal); }
.wz-title{ font-family:'Space Grotesk', sans-serif; font-weight:300; font-size:clamp(26px, 4vw, 36px); line-height:1.15; letter-spacing:-0.01em; }
.wz-step[data-step="intro"] .wz-title{ font-size:clamp(30px, 5vw, 44px); }
.wz-sub{ color:var(--muted); font-size:14.5px; line-height:1.65; max-width:420px; margin-top:-4px; }
.wz-optional{
  font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--glass-border); border-radius:20px; padding:3px 10px; margin-top:-8px;
}

.wz-input{
  width:100%; margin-top:6px;
  font-family:'Inter', sans-serif; font-size:16px; color:var(--text); text-align:center;
  padding:16px 22px; border-radius:16px;
  background:rgba(var(--text-rgb),0.05); border:1px solid var(--glass-border);
  transition:border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
  -webkit-appearance:none; appearance:none;
}
.wz-input::placeholder{ color:rgba(var(--text-rgb),0.38); }
.wz-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(94,234,212,0.16), 0 0 30px -8px rgba(94,234,212,0.5); }
.wz-input:disabled{ opacity:0.4; }
.wz-check{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; cursor:pointer; }
.wz-check input{ width:16px; height:16px; accent-color:var(--teal); }

.wz-actions{ display:flex; gap:12px; width:100%; justify-content:center; margin-top:10px; }
.wz-actions .hero-btn{ flex:1; max-width:220px; }
.wz-big{ padding:16px 34px; font-size:15px; }
.wz-actions .wz-big{ max-width:none; flex:0 0 auto; }

/* date-of-birth picker */
.dob-text{ letter-spacing:0.08em; font-family:'JetBrains Mono', monospace; font-size:17px; }
.dob-picker{
  width:100%; padding:12px; border-radius:20px;
  background:rgba(var(--text-rgb),0.035); border:1px solid var(--glass-border);
}
.dob-crumbs{ display:flex; align-items:stretch; gap:6px; margin-bottom:8px; }
.dob-crumb{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px; border-radius:12px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--muted);
  font-family:'Inter', sans-serif; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.dob-crumb span{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; }
.dob-crumb strong{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:15px; color:rgba(var(--text-rgb),0.35); }
.dob-crumb.is-done strong{ color:var(--text); }
.dob-crumb.is-active{ background:rgba(94,234,212,0.1); border-color:rgba(94,234,212,0.45); color:var(--teal); }
.dob-crumb:disabled{ cursor:default; opacity:0.5; }
.dob-crumb:not(:disabled):not(.is-active):hover{ background:rgba(var(--text-rgb),0.05); }
.dob-crumb-sep{ align-self:center; color:rgba(var(--text-rgb),0.25); }

.dob-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.dob-title{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:15px; }
.dob-nav{
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
  background:rgba(var(--text-rgb),0.05); border:1px solid var(--glass-border); color:var(--text);
  transition:background .2s ease, border-color .2s ease;
}
.dob-nav:hover:not(:disabled){ border-color:rgba(var(--text-rgb),0.3); }
.dob-nav:disabled{ opacity:0.25; cursor:default; }

.dob-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; animation:fadeUp .3s ease; }
.dob-picker[data-view="day"] .dob-grid{ grid-template-columns:repeat(7, 1fr); gap:4px; }
.dob-cell{
  height:44px; border-radius:12px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:14px; color:var(--text);
  background:transparent; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.dob-picker[data-view="day"] .dob-cell{ height:34px; font-size:13.5px; }
.dob-cell:hover:not(:disabled){ background:rgba(var(--text-rgb),0.07); border-color:var(--glass-border); }
.dob-cell:active:not(:disabled){ transform:scale(0.94); }
.dob-cell:disabled{ color:rgba(var(--text-rgb),0.22); cursor:default; }
.dob-cell.is-selected, .dob-cell.is-selected:hover:not(:disabled){
  color:var(--btn-text); font-weight:600; border-color:transparent;
  background:linear-gradient(135deg, var(--teal), var(--purple));
  box-shadow:0 6px 18px -8px rgba(167,139,250,0.9);
}
.dob-weekday{
  display:grid; place-items:center; height:20px;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.08em; color:var(--muted);
}
.dob-error{ min-height:1em; margin-top:-6px; font-size:12.5px; color:#ff8a9a; }
:root[data-theme="light"] .dob-error{ color:#c0263f; }
.dob-error:empty{ display:none; }

.zodiac-preview{
  display:inline-flex; align-items:center; gap:12px; padding:9px 18px 9px 10px; border-radius:999px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  min-height:48px;
}
.zodiac-preview:not(.is-shown){ display:none; } /* no reserved gap until there's a sign to show */
.zodiac-preview.is-shown{ animation:fadeUp .4s ease; }
.zp-sign{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  color:var(--btn-text); background:linear-gradient(135deg, var(--teal), var(--purple));
}
.zp-text{ font-size:13.5px; color:var(--muted); }
.zp-text strong{ color:var(--text); font-weight:500; }

.purpose-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; width:100%; margin-top:6px; }
.purpose-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 6px 16px; border-radius:16px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:12.5px; color:var(--text);
  background:rgba(var(--text-rgb),0.04); border:1px solid var(--glass-border);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.purpose-card svg{ width:24px; height:24px; color:var(--teal); transition:transform .3s ease; }
.purpose-card:hover{ border-color:rgba(var(--text-rgb),0.3); transform:translateY(-2px); }
.purpose-card.is-selected{
  border-color:var(--teal); background:rgba(94,234,212,0.1);
  box-shadow:0 0 0 1px var(--teal), 0 10px 30px -10px rgba(94,234,212,0.6);
}
.purpose-card.is-selected svg{ transform:scale(1.15); }
:root[data-theme="light"] .purpose-card.is-selected{ background:rgba(14,143,128,0.08); box-shadow:0 0 0 1px var(--teal), 0 10px 30px -12px rgba(14,143,128,0.45); }

/* intro orrery */
.intro-orb{ position:relative; width:150px; height:150px; margin-bottom:6px; }
.intro-orb-core{
  position:absolute; inset:58px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3d6, #f2c65c 55%, #b07a20);
  box-shadow:0 0 30px 6px rgba(242,198,92,0.45);
}
.intro-orbit{ position:absolute; border-radius:50%; border:1px solid rgba(var(--text-rgb),0.14); animation:spin 9s linear infinite; }
.intro-orbit i{ position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; }
.intro-orbit--1{ inset:40px; animation-duration:6s; }
.intro-orbit--1 i{ background:#7fe3ac; box-shadow:0 0 10px #7fe3ac; width:6px; height:6px; top:-3px; }
.intro-orbit--2{ inset:18px; animation-duration:11s; animation-direction:reverse; }
.intro-orbit--2 i{ background:#e0435a; box-shadow:0 0 10px #e0435a; }
.intro-orbit--3{ inset:0; animation-duration:18s; }
.intro-orbit--3 i{ background:#6a8fe8; box-shadow:0 0 12px #6a8fe8; width:10px; height:10px; top:-5px; }
.intro-points{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:10px; color:var(--muted); font-size:12.5px; }
.intro-points span{ color:var(--teal); margin-right:4px; }

/* "reading your chart" interlude */
.wz-step[data-step="reading"]{ padding:30px 0 20px; gap:28px; }
.reading-orbit{ position:relative; width:190px; height:190px; }
.reading-ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(94,234,212,0.5); animation:spin 6s linear infinite; }
.reading-ring--2{ inset:28px; border:1px solid rgba(167,139,250,0.4); animation-duration:4s; animation-direction:reverse; }
.reading-dot{ position:absolute; inset:0; animation:spin 2.4s linear infinite; }
.reading-dot::after{ content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--teal); box-shadow:0 0 14px var(--teal); }
.reading-dot--2{ inset:28px; animation-duration:1.8s; animation-direction:reverse; }
.reading-dot--2::after{ background:var(--purple); box-shadow:0 0 14px var(--purple); }
.reading-dot--3{ inset:14px; animation-duration:3.2s; }
.reading-dot--3::after{ background:#f2c65c; box-shadow:0 0 14px #f2c65c; width:6px; height:6px; }
.reading-core{
  position:absolute; inset:58px; border-radius:50%; display:grid; place-items:center;
  font-size:34px; color:var(--text);
  background:radial-gradient(circle, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%);
  animation:corePulse 1.8s ease-in-out infinite;
}
@keyframes corePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.reading-text{ font-family:'Space Grotesk', sans-serif; font-weight:300; font-size:19px; min-height:1.4em; }
.reading-text.is-in{ animation:fadeUp .45s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* result */
.wz-step[data-step="result"]{ align-items:stretch; }
.result-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; }
.result-visual{ position:relative; display:grid; place-items:center; min-height:380px; }
.result-visual .gem-orb{ animation:orbReveal 1.1s cubic-bezier(.2,.7,.2,1) both, orbFloat 7s ease-in-out 1.1s infinite; }
@keyframes orbReveal{ from{ opacity:0; transform:scale(0.6) rotate(-20deg); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }
.result-sign{
  position:absolute; right:12%; bottom:8%; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:26px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.5);
}
.result-info > *{ animation:fadeUp .6s ease both; }
.result-info > *:nth-child(1){ animation-delay:.25s; }
.result-info > *:nth-child(2){ animation-delay:.35s; }
.result-info > *:nth-child(3){ animation-delay:.45s; }
.result-info > *:nth-child(4){ animation-delay:.55s; }
.result-info > *:nth-child(5){ animation-delay:.65s; }
.result-info > *:nth-child(6){ animation-delay:.72s; }
.result-info > *:nth-child(7){ animation-delay:.8s; }
.result-info > *:nth-child(8){ animation-delay:.88s; }
.result-info > *:nth-child(9){ animation-delay:.96s; }
.result-info .eyebrow{ margin-bottom:10px; }
.result-name{ font-family:'Space Grotesk', sans-serif; font-weight:300; font-size:clamp(44px, 6vw, 72px); line-height:1; letter-spacing:-0.02em; margin-bottom:16px; }
.result-info .wear-grid{ margin-bottom:20px; }
.result-actions{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.result-actions .gem-add-btn{ margin-top:0; padding:14px 30px; font-size:13.5px; }
.result-info .match-alt{ margin-top:18px; }
.result-enter{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); }
.result-retake{ background:none; border:none; cursor:pointer; color:var(--muted); font-family:'Inter', sans-serif; font-size:13px; }
.result-retake:hover{ color:var(--text); }

@media (max-width:860px){
  .wz[data-step="result"]{ padding:30px 22px; }
  .result-grid{ grid-template-columns:1fr; gap:8px; }
  .result-visual{ min-height:270px; }
  .result-visual .gem-orb--xl{ width:210px; }
}
@media (max-width:600px){
  .welcome-top{ padding:14px 16px; }
  .welcome-stage{ padding:80px 12px 32px; }
  .wz{ padding:32px 22px 28px; }
  .purpose-grid{ grid-template-columns:repeat(2, 1fr); }
  .wz-actions{ flex-direction:column-reverse; }
  .wz-actions .hero-btn{ max-width:none; }
  .result-enter .wz-big{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .intro-orbit, .reading-ring, .reading-dot, .reading-core{ animation:none !important; }
  .wz-step.is-active, .result-info > *, .result-visual .gem-orb{ animation:none !important; }
}

/* phones: the top bar scrolls away with the page instead of floating over a tall card */
@media (max-width:600px){
  .welcome-top{ position:absolute; }
  .wz-title br{ display:none; }
}