/* ---------- the journey: a phone that lives through the six steps of Birth Code as you scroll ---------- */
.jr { padding: 0; position: relative; }
.jr-intro { padding: clamp(90px, 12vw, 150px) clamp(20px, 6vw, 72px) 20px; text-align: center; }
.jr-intro .lede { margin-left: auto; margin-right: auto; }
.jr-track { position: relative; height: 640vh; }
.jr-sticky { position: sticky; top: 0; padding-top: 64px !important; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 5vw, 80px); padding: 0 clamp(20px, 7vw, 110px); }
.jr-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jr-bignum { position: absolute; left: clamp(10px, 4vw, 60px); top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: clamp(180px, 28vw, 420px); line-height: 1; color: rgba(216, 182, 124, 0.05); pointer-events: none; transition: opacity .6s ease; }
.jr-text { position: relative; height: 340px; z-index: 2; }
.jr-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.jr-step.on { opacity: 1; transform: none; }
.jr-step .n { font-family: var(--display); font-size: 22px; color: var(--gold); letter-spacing: .2em; }
.jr-step h3 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; margin-top: 12px; }
.jr-step h3 em { color: var(--gold-light); }
.jr-step p { font-size: 18px; color: var(--ivory-soft); margin-top: 18px; max-width: 460px; }
.jr-rail { position: absolute; left: 0; bottom: -40px; display: flex; gap: 10px; }
.jr-rail i { width: 26px; height: 2px; border-radius: 2px; background: rgba(216, 182, 124, 0.18); transition: background .5s, width .5s; }
.jr-rail i.on { background: var(--gold); width: 46px; }
.jr-phone { justify-self: center; position: relative; z-index: 2; width: 300px; height: 620px; border-radius: 48px; padding: 12px; background: linear-gradient(160deg, #2A3257, #0B1024 60%); box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(216, 182, 124, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); transform: perspective(1400px) scale(var(--s, 1)) rotateY(calc(var(--ty, 0) * 1deg)) rotateX(calc(var(--tx, 0) * 1deg)); transition: transform .3s ease-out; }
.jr-phone::after { content: ''; position: absolute; inset: -30%; background: radial-gradient(circle at 50% 50%, rgba(216, 182, 124, .16), transparent 60%); z-index: -1; filter: blur(10px); }
.jr-island { position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #05070F; z-index: 5; }
.jr-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: radial-gradient(ellipse 120% 70% at 70% 0%, #1B2450, #0A0F20 60%); }
.scr { position: absolute; inset: 0; padding: 58px 22px 22px; opacity: 0; transform: scale(.96) translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.scr.on { opacity: 1; transform: none; }
.scr .t { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--ivory); }
.scr .e { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); }
.scr .s { font-family: var(--display); font-style: italic; font-size: 14px; color: var(--ivory-soft); margin-top: 6px; }
/* 1 · birth details */
.fld { margin-top: 12px; border: 1px solid rgba(216, 182, 124, .22); border-radius: 14px; padding: 9px 13px; }
.fld small { display: block; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-faint); }
.fld span { font-family: var(--display); font-size: 19px; color: var(--ivory); min-height: 24px; display: inline-block; }
.fld span::after { content: ''; display: inline-block; width: 1px; height: 17px; margin-left: 2px; background: var(--gold); vertical-align: -2px; opacity: 0; }
.fld.typing span::after { opacity: 1; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.goldbtn { margin-top: 18px; text-align: center; padding: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #1A1508; font-weight: 700; font-size: 13px; opacity: .35; transition: opacity .5s, box-shadow .5s; }
.goldbtn.ready { opacity: 1; box-shadow: 0 0 30px rgba(216, 182, 124, .45); }
/* 2 · chart */
.wheel { margin: 26px auto 0; width: 240px; height: 240px; position: relative; }
.wheel svg { width: 100%; height: 100%; transform: rotate(-30deg); transition: transform 2.4s cubic-bezier(.2,.8,.2,1); }
.scr.on .wheel svg { transform: rotate(0deg); }
.wheel .art path, .wheel .art circle:not(.dot) { stroke-dashoffset: 1; }
.scr.on .wheel .art path, .scr.on .wheel .art circle:not(.dot) { animation: draw 2.2s ease forwards; }
.scr.on .wheel .art .dot { animation: dotin .8s ease 1.4s forwards; }
.wheel-legend { display: flex; justify-content: space-between; margin-top: 16px; font-family: var(--display); font-size: 15px; color: var(--ivory-soft); }
.wheel-legend b { display: block; color: var(--gold-light); font-weight: 500; font-size: 20px; }
/* 3 · codes */
.row3 { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 10px; border: 1px solid rgba(216, 182, 124, .2); border-radius: 16px; background: rgba(17, 25, 52, .8); opacity: 0; transform: translateX(26px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.scr.on .row3 { opacity: 1; transform: none; }
.row3 .num { font-family: var(--display); font-size: 12px; color: var(--gold); width: 16px; }
.row3 .ic { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(216, 182, 124, .5); display: grid; place-items: center; color: var(--gold-light); font-size: 13px; }
.row3 .nm { font-family: var(--display); font-size: 16px; flex: 1; }
.row3 .go { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(216, 182, 124, .45); display: grid; place-items: center; color: var(--gold-light); font-size: 11px; }
/* 4 · today */
.today-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mini-moon { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #F4E6C8, #D9C29A 60%, #9E8762); box-shadow: 0 0 40px rgba(235, 211, 164, .35), inset -16px -6px 0 rgba(11, 16, 34, .85); position: relative; }
.mini-moon::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(216, 182, 124, .25); border-top-color: var(--gold); border-right-color: var(--gold); transform: rotate(20deg); }
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.glance div { border: 1px solid rgba(216, 182, 124, .2); border-radius: 12px; padding: 8px 2px; text-align: center; font-family: var(--display); font-size: 11px; color: var(--ivory-soft); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.scr.on .glance div { opacity: 1; transform: none; }
.glance b { display: block; font-size: 20px; color: var(--gold-light); font-weight: 500; }
.energy { margin-top: 12px; border: 1px solid rgba(216, 182, 124, .2); border-radius: 18px; padding: 12px; background: linear-gradient(110deg, rgba(17, 25, 52, .95) 55%, rgba(107, 30, 46, .6)); }
.energy .big { font-family: var(--display); font-size: 26px; margin-top: 4px; }
.energy p { font-family: var(--display); font-size: 13.5px; color: var(--ivory-soft); line-height: 1.35; margin-top: 4px; }
/* 5 · the cards */
.card5 { width: 150px; height: 230px; margin: 26px auto 0; perspective: 900px; }
.card5 .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .4s; transform: rotateY(180deg); }
.scr.on .card5 .in { transform: rotateY(0deg); }
.card5 .f, .card5 .b { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; border: 1px solid rgba(216, 182, 124, .5); display: grid; place-items: center; }
.card5 .f { background: radial-gradient(circle at 50% 30%, #1E2754, #0B1024); }
.card5 .b { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(216,182,124,.08) 0 2px, transparent 2px 10px), #10183A; }
.card5 .f .art { width: 80%; height: 80%; }
.answer { text-align: center; margin-top: 16px; font-family: var(--display); font-size: 30px; color: var(--gold-light); opacity: 0; transition: opacity .6s 1.4s; }
.scr.on .answer { opacity: 1; }
.answer small { display: block; font-size: 13px; color: var(--ivory-soft); font-style: italic; }
/* 6 · the conclusion */
.prof .name { font-family: var(--display); font-size: 40px; line-height: 1; margin-top: 6px; }
.prof .hl { font-family: var(--display); font-size: 21px; line-height: 1.15; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(216, 182, 124, .2); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.keys div { font-family: var(--display); font-size: 12.5px; color: var(--ivory); opacity: 0; transition: opacity .6s; }
.scr.on .keys div { opacity: 1; }
.keys span { display: block; font-family: var(--body); font-size: 9.5px; color: var(--ivory-faint); margin-top: 2px; }
.words3 { margin-top: 16px; padding: 14px; border-radius: 16px; border: 1px solid rgba(216, 182, 124, .3); background: linear-gradient(135deg, #141C3A, #252B5C); font-family: var(--display); font-size: 20px; color: var(--gold-light); text-align: center; }
.words3 small { display: block; font-family: var(--body); font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivory-faint); margin-bottom: 6px; }
@media (max-width: 900px) {
  .jr-sticky { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding-top: 70px; }
  .jr-phone { width: 250px; height: 516px; border-radius: 40px; order: -1; }
  .jr-phone .scr { transform-origin: top center; }
  .jr-screen { border-radius: 32px; }
  .jr-text { height: 190px; text-align: center; }
  .jr-step { align-items: center; justify-content: flex-start; }
  .jr-step h3 { font-size: 30px; margin-top: 6px; }
  .jr-step p { font-size: 15px; margin-top: 8px; }
  .jr-rail { left: 50%; transform: translateX(-50%); bottom: -14px; }
  .jr-bignum { display: none; }
  .scr { padding: 50px 18px 18px; zoom: .84; }
}
@media (prefers-reduced-motion: reduce) { .scr, .jr-step, .row3, .glance div { transition: none; } }
/* ---------- the hero dust: a living constellation that moves away from the hand ---------- */
#dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero > *:not(#dust):not(.ring):not(.scroll-hint) { position: relative; z-index: 1; }