/* =========================================================
   VEDAZ — journey homepage (built on style.css tokens)
   ========================================================= */

/* sky canvas sits behind everything; sections let it through */
body.journey{background:var(--canvas)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body.journey section{background:transparent}
body.journey #how,body.journey #faq{background:rgba(13,27,62,.55)}

select{width:100%;font:400 1rem/1.5 var(--font-sans);color:var(--moonlight-white);background:var(--canvas);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);min-height:48px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8D0DC' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select:hover{border-color:var(--silver-mist)}
select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
select option{background:var(--midnight-indigo)}
.field > .opt{display:block;margin-top:2px}

/* ---------- I · Arrive ---------- */
.arrive{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:center;padding:var(--space-12) 0 var(--space-16)}
.arrive-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.arrive .label{margin-bottom:var(--space-4)}
.arrive .hero-title{margin-bottom:var(--space-8)}
.breath{position:relative;width:min(240px,56vw);aspect-ratio:1;margin:var(--space-6) 0 var(--space-8);display:grid;place-items:center}
.breath picture,.breath img{width:100%;height:100%;border-radius:var(--radius-full);object-fit:cover}
.breath picture{position:relative;z-index:1;box-shadow:0 0 0 1px rgba(201,168,76,.5),0 0 48px rgba(201,168,76,.15);border-radius:var(--radius-full);overflow:hidden;transition:transform 4s cubic-bezier(.45,0,.55,1),box-shadow 4s ease-in-out}
.b-ring{position:absolute;inset:0;border-radius:var(--radius-full);border:1px solid var(--ink-heading);opacity:.2;transition:transform 4s cubic-bezier(.45,0,.55,1),opacity 4s ease-in-out}
.b-ring.r1{inset:-14%}
.b-ring.r2{inset:-30%;opacity:.14}
.b-ring.r3{inset:-48%;opacity:.08}
.breath:not(.active) .b-ring{animation:ringPulse 10s ease-in-out infinite}
.breath:not(.active) .r2{animation-delay:-3s}
.breath:not(.active) .r3{animation-delay:-6s}
@keyframes ringPulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.03)}}
/* the breath itself: JS sets the phase class and duration */
.breath.inhale picture{transform:scale(1.12);box-shadow:0 0 0 1px rgba(201,168,76,.8),0 0 80px rgba(201,168,76,.32)}
.breath.inhale .b-ring{transform:scale(1.18);opacity:.42}
.breath.hold picture{transform:scale(1.12);box-shadow:0 0 0 1px rgba(201,168,76,.8),0 0 80px rgba(201,168,76,.32)}
.breath.hold .b-ring{transform:scale(1.18);opacity:.42}
.breath.exhale picture,.breath.exhale .b-ring{transition-duration:6s}
.breath.exhale picture{transform:scale(1)}
.breath.exhale .b-ring{transform:scale(1);opacity:.16}
.breath-cue{font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1.42;color:var(--ink);max-width:28em;min-height:2.9em;transition:opacity 600ms ease-in-out}
.breath-cue.fade{opacity:0}
.arrive-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-6);transition:opacity 600ms ease-in-out}
.arrive-actions.away{opacity:0;pointer-events:none}
.scroll-cue{position:absolute;left:50%;bottom:var(--space-6);transform:translateX(-50%);width:28px;height:44px;border:1px solid var(--hairline);border-radius:var(--radius-full)}
.scroll-cue span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ink-heading);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-height:700px){.scroll-cue{display:none}}

/* ---------- II · Star mansions ---------- */
.mansions{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-12);align-items:center}
@media(max-width:900px){.mansions{grid-template-columns:1fr;gap:var(--space-8)}}
.ring-wrap{position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1}
.ring{width:100%;height:100%;overflow:visible}
.ring .orbit{fill:none;stroke:var(--hairline)}
.ring .orbit.dash{stroke-dasharray:2 7}
.ring .tick{stroke:var(--hairline)}
.ring .trail{fill:none;stroke:var(--ink-heading);stroke-opacity:.55;stroke-width:1.2;stroke-linejoin:round;transition:all 600ms ease-in-out}
.ring .m{cursor:pointer;outline:none}
.ring .m .hit{fill:transparent}
.ring .m .dot{fill:var(--canvas);stroke:var(--silver-mist);stroke-width:1.5;transition:fill var(--breath),stroke var(--breath),r var(--breath)}
.ring .m .glow{fill:var(--soft-gold);opacity:0;transition:opacity var(--breath)}
.ring .m .lbl{font:500 11px var(--font-mono);fill:var(--ink-muted);text-anchor:middle;dominant-baseline:central;transition:fill var(--breath)}
.ring .m.abhijit .dot{stroke-dasharray:2 2}
.ring .m:hover .dot{stroke:var(--soft-gold)}
.ring .m.seen .dot{fill:var(--soft-gold);stroke:var(--soft-gold)}
.ring .m.seen .lbl{fill:var(--ink)}
.ring .m.active .dot{r:9;fill:var(--soft-gold);stroke:var(--moonlight-white)}
.ring .m.active .glow{opacity:.22}
.ring .m.active .lbl{fill:var(--ink-heading)}
.ring .m:focus-visible .dot{stroke:var(--moonlight-white);stroke-width:2.5}
.ring .m .moonmark{fill:var(--signal);opacity:0;transition:opacity var(--breath)}
.ring .m.moon .moonmark{opacity:1}
.ring-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-1);pointer-events:none}
.ring-centre #ring-num{font-family:var(--font-display);font-size:3.25rem;line-height:1;font-weight:500;color:var(--ink-heading)}
.mansion-panel{min-height:380px;display:flex;flex-direction:column;justify-content:center}
.mp-count{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.mp-name{font-size:clamp(2.25rem,4.5vw,3rem);line-height:1.05;margin-bottom:var(--space-1)}
.mp-en{font-family:var(--font-display);font-style:italic;font-size:1.375rem;color:var(--ink);margin-bottom:var(--space-6)}
.mp-facts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-6);padding:var(--space-4) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:var(--space-4);font-size:.9375rem}
.mp-facts dt{font:500 .75rem/2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.mp-theme{font-size:1.0625rem}
.claim{display:inline-block;margin-top:var(--space-2);font-size:.75rem;font-style:italic;color:var(--ink-muted)}
.mp-nav{display:flex;gap:var(--space-2);margin-top:var(--space-6)}
.mp-nav .btn{flex:1}
.mp-panel-in{animation:panelIn 500ms cubic-bezier(.45,0,.55,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- III · Your Moon ---------- */
.moon-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:start}
@media(max-width:900px){.moon-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.moon-form .btn{width:100%}
.moon-result{position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.moon-placeholder{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.moon-phase{position:relative;width:120px;height:120px;border-radius:var(--radius-full);background:radial-gradient(circle at 40% 38%,#F4F6FB,#C8D0DC 60%,#8D97A8);box-shadow:0 0 60px rgba(200,208,220,.25);overflow:hidden}
.moon-phase span{position:absolute;inset:0;border-radius:var(--radius-full);background:var(--canvas);transform:translateX(38%);animation:phase 12s ease-in-out infinite alternate}
@keyframes phase{to{transform:translateX(92%)}}
.mr{overflow:hidden}
.mr .label{display:block}
.mr-name{font-family:var(--font-display);font-weight:500;color:var(--ink-heading);font-size:clamp(3.5rem,9vw,6.5rem);line-height:1;white-space:nowrap;margin:var(--space-3) calc(-1 * var(--space-6)) var(--space-2) 0;animation:nameIn 1200ms cubic-bezier(.2,.6,.2,1)}
@keyframes nameIn{from{opacity:0;letter-spacing:.06em;filter:blur(6px)}to{opacity:1;letter-spacing:0;filter:none}}
.mr-en{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--ink);margin-bottom:var(--space-6)}
.mr-alt{margin:var(--space-2) 0 var(--space-6);font-size:.9375rem}
.mr-alt strong{color:var(--ink-heading);font-weight:500}
.mr-data{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-muted);margin-bottom:var(--space-4)}
.mr-body{margin:var(--space-6) 0;padding:var(--space-6);border-radius:var(--radius-md);background:var(--surface-warm);color:var(--ink-on-warm)}
.mr-body .label{color:var(--ink-on-warm);opacity:.8}
.mr-body p{font-family:var(--font-display);font-size:1.375rem;line-height:1.3;font-weight:500;margin-top:var(--space-2)}
.mr-agency{border-left:2px solid var(--action);padding-left:var(--space-4);font-size:1rem}
.mr-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* ---------- IV · Finder ---------- */
.finder-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-12);align-items:center}
@media(max-width:900px){.finder-grid{grid-template-columns:1fr}.finder-figure{display:none}}
.finder-figure img{aspect-ratio:4/5;object-position:50% 40%}
.finder{min-height:420px}
.f-steps{display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}
.f-steps span{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-full);border:1px solid var(--hairline);font-family:var(--font-display);font-weight:600;color:var(--ink-muted);transition:all var(--breath)}
.f-steps span.on{border-color:var(--action);color:var(--ink-heading)}
.f-steps span.done{background:var(--action);border-color:var(--action);color:var(--on-action)}
.f-q{font-size:clamp(1.65rem,3.4vw,1.875rem);line-height:1.2;margin-bottom:var(--space-6)}
.f-opts{display:grid;gap:var(--space-2)}
.f-opt{display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;font:400 1rem/1.5 var(--font-sans);color:var(--ink);background:rgba(13,27,62,.35);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-4);cursor:pointer;transition:border-color var(--breath),background-color var(--breath),color var(--breath)}
.f-opt:hover{border-color:var(--border-control)}
.f-opt:hover .f-glyph,.f-opt:focus-visible .f-glyph{color:var(--ink-heading)}
.f-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.f-glyph{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-full);border:1px solid var(--hairline);color:var(--ink-muted);font-size:.9rem;transition:color var(--breath)}
.f-back{margin-top:var(--space-6);background:none;border:0;color:var(--ink-muted);font:500 .75rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:var(--space-2) 0}
.f-back:hover{color:var(--ink)}
.f-result .s-name{font-family:var(--font-display);font-weight:500;color:var(--ink-heading);font-size:clamp(2rem,4vw,2.5rem);line-height:1.1;margin:var(--space-2) 0}
.f-result .price{font-family:var(--font-display);font-size:1.75rem;color:var(--ink-heading)}
.f-result .why{margin:var(--space-4) 0 var(--space-6)}
.f-result .actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ---------- the path ---------- */
.path{position:fixed;left:var(--space-6);bottom:var(--space-6);z-index:30;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:rgba(13,27,62,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--hairline);border-radius:var(--radius-md);opacity:0;transform:translateY(8px);transition:opacity 600ms ease-in-out,transform 600ms ease-in-out;pointer-events:none}
.path.show{opacity:1;transform:none;pointer-events:auto}
.path-title{font-size:.625rem}
.path ol{list-style:none;display:flex;align-items:center;gap:0}
.path li{display:flex;align-items:center}
.path li+li::before{content:"";width:18px;height:1px;background:var(--hairline);transition:background var(--breath)}
.path li.lit+li.lit::before{background:var(--soft-gold)}
.path a{position:relative;display:grid;place-items:center;width:26px;height:26px;text-decoration:none;border-radius:var(--radius-full)}
.path a .pt{width:9px;height:9px;border-radius:var(--radius-full);border:1.5px solid var(--silver-mist);opacity:.6;transition:all var(--breath)}
.path li.here a .pt{opacity:1;box-shadow:0 0 0 4px rgba(200,208,220,.14)}
.path li.lit a .pt{background:var(--soft-gold);border-color:var(--soft-gold);opacity:1;box-shadow:0 0 10px rgba(201,168,76,.6)}
.path a .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--lapis-deep);color:var(--ink);font:500 .6875rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity 300ms ease-in-out}
.path a:hover .tip,.path a:focus-visible .tip{opacity:1}
.path.complete{border-color:rgba(201,168,76,.5)}
.path-done{font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--ink-heading);display:none}
.path.complete .path-done{display:block}
@media(max-width:1320px){
  .path{left:50%;bottom:var(--space-3);transform:translate(-50%,8px);flex-direction:row;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3)}
  .path.show{transform:translateX(-50%)}
  .path-title,.path.complete .path-done{display:none}
}
@media(max-width:700px){footer{padding-bottom:calc(var(--space-16) + var(--space-8))}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .breath picture,.b-ring{transition:none!important}
  .breath:not(.active) .b-ring,.scroll-cue span,.moon-phase span,.mr-name,.mp-panel-in{animation:none!important}
}

/* mobile containment */
.arrive{overflow:hidden}
@media(max-width:480px){.filter button{padding:var(--space-3) var(--space-2);letter-spacing:.1em}}

/* nakṣatra definition: nav note + section line */
.nav a.has-def{position:relative}
.nav .def{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,4px);width:240px;padding:var(--space-3) var(--space-4);background:var(--lapis-deep);border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:var(--lift);font:400 .875rem/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink);opacity:0;pointer-events:none;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;z-index:40}
.nav a.has-def:hover .def,.nav a.has-def:focus-visible .def{opacity:1;transform:translate(-50%,0)}
.def-line{font-family:var(--font-display);font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--ink);margin-bottom:var(--space-4);padding-left:var(--space-4);border-left:2px solid var(--action);max-width:36em}
.def-line strong{font-style:normal;font-weight:600;color:var(--ink-heading)}

/* place of birth search */
.place-field{position:relative}
.place-list{position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:20;list-style:none;margin:0;padding:var(--space-1);background:var(--midnight-indigo);border:1px solid var(--border-control);border-radius:var(--radius-sm);box-shadow:var(--lift);max-height:320px;overflow-y:auto}
.place-list li{padding:var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-size:.9375rem;line-height:1.4}
.place-list li[aria-selected="true"],.place-list li:hover{background:var(--accent);color:var(--on-accent)}
.place-list li[aria-selected="true"] .muted,.place-list li:hover .muted{color:rgba(244,246,251,.85)}
.place-list li.none{cursor:default;color:var(--ink-muted)}
.place-list li.none:hover{background:none;color:var(--ink-muted)}
.tz-fallback{margin:calc(-1 * var(--space-2)) 0 var(--space-6)}
.tz-fallback summary{cursor:pointer;font-size:.875rem;color:var(--ink-heading);list-style:none;display:inline-block}
.tz-fallback summary::-webkit-details-marker{display:none}
.tz-fallback summary::before{content:"+ ";color:var(--ink-muted)}
.tz-fallback[open] summary::before{content:"– "}
.tz-fallback .opt{display:block;margin:var(--space-2) 0;font-size:.8125rem;color:var(--ink-muted)}

/* Goddess Mark in the breath circle; Devi shield in the approach */
.breath{width:min(300px,62vw)}
.breath img{object-position:50% 40%}
.figure img.devi-shield{object-position:52% 55%}