/* ══ SENRA · base ══════════════════════════════════════════ */

:root{
  /* ground */
  --ink:        #07070c;
  --ink-2:      #0a0a12;
  --veil:       #10101b;
  --panel:      rgba(18,18,30,.58);
  --panel-2:    rgba(24,24,40,.72);

  /* metals */
  --silver:     #e2e5f2;
  --silver-2:   #b9bfd4;
  --silver-3:   #7d859e;
  --silver-4:   #4e556c;

  /* the blue-violet */
  --violet:     #8e7dd0;
  --violet-2:   #6d5ea8;
  --violet-3:   #3d3660;
  --blue:       #7f95c8;
  --glow:       #b7a9ff;

  /* lines */
  --hair:       rgba(226,229,242,.10);
  --hair-2:     rgba(226,229,242,.18);
  --hair-3:     rgba(226,229,242,.30);
  --hair-v:     rgba(142,125,208,.28);

  --rad:        2px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --slow:       .9s;

  --serif:      'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --sans:       'Inter', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif;

  --topbar-h:   66px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--silver-2);
  font-family:var(--sans);
  font-weight:300;
  font-size:14px;
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* astrological glyphs stay typographic, never colour emoji */
body{ font-variant-emoji:text; }

/* hidden means hidden, even when a class hands out a display value */
[hidden]{ display:none !important; }

/* ── ground layers ─────────────────────────────────────────────── */
#starfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
}
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 50% -12%, rgba(120,102,190,.20), transparent 62%),
    radial-gradient(760px 620px at 92% 108%, rgba(78,96,160,.14), transparent 60%),
    radial-gradient(620px 520px at 4% 84%,  rgba(120,102,190,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,7,12,.24) 0%, rgba(7,7,12,.62) 68%, rgba(7,7,12,.9) 100%);
}
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.4;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body[data-motion="calm"] .grain{ opacity:.22; }

/* ── svg stroke helpers ────────────────────────────────────────── */
.s-thin{ fill:none; stroke:var(--silver-2); stroke-width:1; vector-effect:non-scaling-stroke; }
.s-hair{ fill:none; stroke:var(--silver-4); stroke-width:.8; vector-effect:non-scaling-stroke; }
.s-fill{ fill:var(--violet); stroke:none; }
.s-glow{ filter:drop-shadow(0 0 7px rgba(183,169,255,.45)); }

/* ── type ──────────────────────────────────────────────────────── */
.eyebrow{
  margin:0 0 14px; font-size:10px; font-weight:400;
  /* one step up from --silver-4: at .36em tracking the widely-spaced caps need
   * the extra weight of colour to stay readable, quiet as they should look */
  letter-spacing:.36em; text-transform:uppercase; color:var(--silver-3);
}
.display{
  margin:0 0 22px; font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,6.4vw,78px); line-height:1.02; color:var(--silver);
  letter-spacing:-.012em;
}
.display .d-line{ display:block; }
.display .d-italic{
  font-style:italic; color:transparent;
  background:linear-gradient(96deg,#e6e8f4 6%,#a99ce6 44%,#8fa4d4 72%,#e6e8f4 100%);
  -webkit-background-clip:text; background-clip:text;
}
.lede{
  max-width:47ch; margin:0 auto 46px; color:var(--silver-3);
  font-size:14px; line-height:1.85;
}
.sec-head{ text-align:center; margin:0 auto 40px; max-width:62ch; }
.sec-title{
  margin:0 0 12px; font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.4vw,40px); line-height:1.12; color:var(--silver);
  letter-spacing:-.008em;
}
.sec-title-lg{ font-size:clamp(32px,5vw,58px); }
.sec-title b{ font-weight:400; color:var(--glow); font-style:italic; }
.sec-note{ margin:0; color:var(--silver-3); font-size:13px; line-height:1.8; }

/* ── topbar ────────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  z-index:60; display:flex; align-items:center; gap:20px;
  padding:0 clamp(16px,3.4vw,40px);
  background:linear-gradient(180deg, rgba(7,7,12,.92), rgba(7,7,12,.42) 62%, transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-sigil{ display:block; opacity:.9; transition:transform 1.4s var(--ease-out), opacity .4s; }
.brand:hover .brand-sigil{ transform:rotate(180deg); opacity:1; }
.brand-word{ display:flex; flex-direction:column; line-height:1.1; }
.brand-main{
  font-family:var(--serif); font-size:15px; letter-spacing:.24em;
  color:var(--silver); font-weight:400;
}
.brand-sub{
  font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--silver-4);
  margin-top:3px;
}

.topnav{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.tnav{
  position:relative; text-decoration:none; color:var(--silver-3);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:5px 2px; transition:color .3s;
}
.tnav::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--violet),var(--blue));
  transition:right .5s var(--ease-out);
}
.tnav:hover{ color:var(--silver); }
.tnav:hover::after,.tnav.is-on::after{ right:0; }
.tnav.is-on{ color:var(--silver); }
.tnav-sep{ color:var(--silver-4); font-size:10px; }

.topbar-actions{ display:flex; align-items:center; gap:6px; margin-left:14px; }

.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; min-width:34px; padding:0 8px;
  background:transparent; border:1px solid transparent; border-radius:var(--rad);
  color:var(--silver-3); cursor:pointer;
  transition:color .3s, border-color .4s, background .4s;
}
.icon-btn:hover{ color:var(--silver); border-color:var(--hair-2); background:rgba(226,229,242,.03); }
.icon-btn svg .s-thin{ stroke:currentColor; }
.icon-btn svg .s-hair{ stroke:currentColor; opacity:.5; }
.icon-btn[data-tip-i18n]::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  color:var(--silver-4); background:rgba(10,10,18,.92); border:1px solid var(--hair);
  padding:4px 8px; opacity:0; transform:translateY(-3px); pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.icon-btn[data-tip-i18n]:hover::after{ opacity:1; transform:translateY(0); }
/* Touch screens have no hover to leave with, so a tapped tooltip can stay lit
 * under the next thing you tap. Keep the labels for pointers that can hover. */
@media (hover:none), (pointer:coarse){
  .icon-btn[data-tip-i18n]::after{ content:none; display:none; }
}
.lang-code{ font-size:10px; letter-spacing:.16em; }

.sound-glyph{
  position:relative; display:inline-flex; align-items:flex-end; gap:2px; height:14px;
}
.sound-glyph i{
  display:block; width:2px; background:currentColor; border-radius:1px; height:4px;
  animation:eq 1.4s var(--ease) infinite;
}
.sound-glyph i:nth-child(2){ animation-delay:.18s; }
.sound-glyph i:nth-child(3){ animation-delay:.36s; }
.sound-glyph i:nth-child(4){ animation-delay:.54s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:13px; } }
body[data-audio="off"] .sound-glyph i{ animation:none; height:3px; opacity:.5; }
body[data-audio="off"] .sound-glyph::after{
  content:''; position:absolute; left:-2px; right:-2px; top:50%;
  height:1px; background:currentColor; transform:rotate(-24deg);
}

/* ── language menu ─────────────────────────────────────────────── */
.lang{ position:relative; }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:212px;
  background:rgba(10,10,18,.94); border:1px solid var(--hair-2);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985);
  transform-origin:top right; transition:opacity .34s var(--ease), transform .34s var(--ease-out), visibility .34s;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(142,125,208,.07);
  max-height:min(72vh,460px); overflow-y:auto;
}
.lang.is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.lang-item{
  display:flex; align-items:baseline; gap:10px; width:100%;
  background:none; border:0; padding:8px 10px; cursor:pointer; text-align:left;
  color:var(--silver-3); transition:background .25s, color .25s;
  border-left:1px solid transparent;
}
.lang-item:hover{ background:rgba(226,229,242,.045); color:var(--silver); }
.lang-item.is-on{ color:var(--silver); border-left-color:var(--violet); background:rgba(142,125,208,.07); }
.li-native{ font-size:13px; }
.li-en{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-4); margin-left:auto; }

/* ── buttons ───────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 26px; border-radius:var(--rad); cursor:pointer;
  font-family:var(--sans); font-size:10.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  transition:color .34s, background .34s, border-color .34s, transform .34s var(--ease-out), box-shadow .4s;
  overflow:hidden; white-space:nowrap;
}
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 12%,rgba(226,229,242,.16) 48%,transparent 84%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out);
}
.btn:hover::before{ transform:translateX(120%); }
.btn-ghost{ background:transparent; border:1px solid transparent; color:var(--silver-4); }
.btn-ghost:hover{ color:var(--silver-2); }
.btn-line{ background:rgba(226,229,242,.02); border:1px solid var(--hair-2); color:var(--silver-2); }
.btn-line:hover{ border-color:var(--hair-3); color:var(--silver); }
.btn-solid{
  background:linear-gradient(150deg, rgba(142,125,208,.24), rgba(127,149,200,.14));
  border:1px solid var(--hair-v); color:var(--silver);
  box-shadow:inset 0 1px 0 rgba(226,229,242,.09);
}
.btn-solid:hover{
  border-color:rgba(142,125,208,.5);
  box-shadow:inset 0 1px 0 rgba(226,229,242,.14), 0 0 34px -8px rgba(142,125,208,.5);
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.32; pointer-events:none; }

.mini-btn{
  background:none; border:1px solid var(--hair); border-radius:var(--rad);
  color:var(--silver-4); padding:5px 11px; cursor:pointer;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; font-family:var(--sans);
  transition:color .3s, border-color .3s, background .3s;
}
.mini-btn:hover{ color:var(--silver-2); border-color:var(--hair-2); background:rgba(226,229,242,.03); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{
  background:transparent; border:1px solid var(--hair); border-radius:var(--rad);
  color:var(--silver-3); padding:8px 15px; cursor:pointer; font-family:var(--sans);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:color .3s, border-color .3s, background .3s, box-shadow .4s;
}
.chip:hover{ color:var(--silver-2); border-color:var(--hair-2); }
.chip.is-on{
  color:var(--silver); border-color:var(--hair-v);
  background:rgba(142,125,208,.1);
  box-shadow:0 0 24px -10px rgba(142,125,208,.6);
}

/* ── views ─────────────────────────────────────────────────────── */
#stage{ position:relative; z-index:10; }
.view{
  display:none; min-height:100vh; min-height:100dvh;
  padding:calc(var(--topbar-h) + clamp(30px,5vh,64px)) clamp(18px,4vw,52px) clamp(56px,8vh,96px);
}
.view.is-live{ display:block; animation:viewIn .95s var(--ease-out) both; }
@keyframes viewIn{
  from{ opacity:0; transform:translateY(14px); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
body[data-motion="calm"] .view.is-live{ animation:fadeOnly .5s ease both; }
@keyframes fadeOnly{ from{opacity:0} to{opacity:1} }

/* ── home ──────────────────────────────────────────────────────── */
.view-home{ display:none; }
.view-home.is-live{ display:flex; align-items:center; justify-content:center; }
.home-inner{ width:100%; max-width:1020px; margin:0 auto; text-align:center; }

.portals{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  /* equal rows: stacked on a phone, one description wraps to two lines and the
   * other doesn't, which left the pair visibly mismatched */
  grid-auto-rows:1fr;
  gap:1px; background:var(--hair); border:1px solid var(--hair);
  margin-bottom:52px;
}
/* four rites: a quiet 2×2 block, never an orphan card on the last row */
.portals-4{ grid-template-columns:repeat(2,1fr); }
@media (max-width:760px){ .portals-4{ grid-template-columns:1fr; } }
.portal{
  position:relative; display:flex; align-items:center; gap:20px;
  padding:30px 26px; text-decoration:none;
  background:rgba(12,12,20,.5); overflow:hidden;
  transition:background .6s var(--ease);
}
.portal::after{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(420px 220px at 22% 50%, rgba(142,125,208,.15), transparent 70%);
  transition:opacity .7s var(--ease);
}
.portal:hover{ background:rgba(20,20,34,.66); }
.portal:hover::after{ opacity:1; }
.portal-art{ position:relative; flex:0 0 76px; width:76px; height:76px; }
.portal-art svg{ width:100%; height:100%; overflow:visible; }
.portal-art .pa-cards,.portal-art .pa-wheel{ transform-origin:60px 66px; transition:transform 1.1s var(--ease-out); }
.portal-art .pa-wheel{ transform-origin:60px 60px; }
.portal-art .pa-yantra,.portal-art .pa-gua{ transform-origin:60px 60px; transition:transform 1.2s var(--ease-out); }
.portal:hover .pa-cards{ transform:scale(1.05) rotate(-3deg); }
.portal:hover .pa-wheel{ transform:rotate(28deg); }
.portal:hover .pa-yantra{ transform:rotate(45deg) scale(.94); }
.portal:hover .pa-gua{ transform:rotate(-160deg); }
.portal-txt{ display:flex; flex-direction:column; text-align:left; gap:3px; position:relative; }
.portal-index{
  font-family:var(--serif); font-size:10px; letter-spacing:.3em; color:var(--violet);
}
.portal-name{
  font-family:var(--serif); font-size:26px; font-weight:300; color:var(--silver); line-height:1.2;
  letter-spacing:.04em;
}
.portal-kicker{
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--violet);
  opacity:.9;
}
.portal-desc{ font-size:11px; color:var(--silver-3); letter-spacing:.05em; }
.portal-arrow{
  margin-left:auto; color:var(--silver-4); font-size:16px; position:relative;
  transition:transform .6s var(--ease-out), color .4s;
}
.portal:hover .portal-arrow{ transform:translateX(7px); color:var(--glow); }

/* the four rites of 太微, reachable straight from the front page */
.subrites{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 20px; margin:-34px 0 46px; padding:0 4px;
}
.subrites .sr-k{
  font-size:8.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-4);
}
.subrites a{
  position:relative; text-decoration:none; color:var(--silver-3);
  font-family:var(--serif); font-size:14px; letter-spacing:.14em;
  transition:color .4s;
}
.subrites a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--hair-v); transition:right .5s var(--ease-out);
}
.subrites a:hover{ color:var(--silver); }
.subrites a:hover::after{ right:0; }

.home-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background:var(--hair); border-top:1px solid var(--hair);
}
.hs-cell{
  background:rgba(9,9,16,.4); padding:16px 14px;
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.hs-k{ font-size:8.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-3); }
.hs-v{ font-family:var(--serif); font-size:15px; color:var(--silver-2); font-variant-numeric:tabular-nums; }

/* ── toast ─────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,18px);
  z-index:120; padding:11px 22px; pointer-events:none;
  background:rgba(10,10,18,.94); border:1px solid var(--hair-v);
  color:var(--silver); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transition:opacity .45s, transform .45s var(--ease-out);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

.sound-nudge{
  position:fixed; right:clamp(16px,3.4vw,40px); top:calc(var(--topbar-h) + 8px);
  z-index:70; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver-2); background:rgba(10,10,18,.92);
  border:1px solid var(--hair-2); padding:6px 11px;
  animation:pulseSoft 3.4s ease-in-out infinite;
}
@keyframes pulseSoft{ 0%,100%{opacity:.82} 50%{opacity:1} }

/* ── scrollbar ─────────────────────────────────────────────────── */
::selection{ background:rgba(142,125,208,.34); color:#fff; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(226,229,242,.12); border-radius:4px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(226,229,242,.22); }

@media (max-width:860px){
  :root{ --topbar-h:60px; }
  .topbar{ gap:12px; }
  .brand-sub{ display:none; }
  .topnav{ gap:9px; }
  .tnav{ font-size:10px; letter-spacing:.16em; }
  .topbar-actions{ margin-left:10px; gap:2px; }
  .icon-btn{ padding:0 6px; }
  .lede{ margin-bottom:36px; }
  .portal{ padding:22px 18px; gap:15px; }
  .portal-art{ flex-basis:58px; width:58px; height:58px; }
  .portal-name{ font-size:21px; }
}
/* on a phone the mark alone carries the brand, so both modules stay reachable */
@media (max-width:560px){
  .brand-word{ display:none; }
  /* four rites will not sit across a phone next to the language, the
     offering and the sound — the mark at the top left opens the same list */
  #topnavNoir{ display:none; }
  .tnav{ font-size:9.5px; letter-spacing:.13em; }
  .tnav-sep{ display:none; }
  .topnav{ gap:12px; }
  /* a phone is too narrow for this to hang under the topbar without landing on
   * the first line of the page, so it becomes a slim bar along the bottom */
  .sound-nudge{
    right:auto; left:50%; top:auto; bottom:14px; transform:translateX(-50%);
    font-size:9px; letter-spacing:.16em; white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}