/* ===== 靈氣 Reiki 2026 Design System ===== */
:root{
  --bg0:#0a0614; --bg1:#130b26; --bg2:#1d1235;
  --gold:#e8c46a; --gold2:#f5dfa8;
  --lav:#b79ce8; --lav2:#d8c9f5;
  --ink:#efeaf8; --dim:#a99cc4;
  --glass:rgba(180,150,255,.06);
  --edge:rgba(200,170,255,.16);
  --c-root:#e0473e; --c-sacral:#ef8a3c; --c-solar:#f2c94c; --c-heart:#4cc98a;
  --c-throat:#3ba7e8; --c-third:#6a6ae0; --c-crown:#a45ce8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg0); color:var(--ink);
  font-family:"Noto Sans TC","PingFang HK","Microsoft JhengHei",sans-serif;
  line-height:1.85; overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(120,70,200,.28),transparent 60%),
                   radial-gradient(ellipse 60% 40% at 85% 110%,rgba(232,196,106,.08),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,.serif{font-family:"Noto Serif TC","Noto Serif JP","Noto Serif CJK TC",serif}
a{color:var(--gold2);text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* NAV */
.topnav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,6,20,.72);border-bottom:1px solid var(--edge)}
.topnav .wrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 20px}
.brand{font-family:"Noto Serif JP","Noto Serif TC",serif;font-size:1.15rem;color:var(--gold2);
  letter-spacing:.12em;margin-right:14px;white-space:nowrap}
.brand em{font-style:normal;color:var(--lav);margin-right:4px}
.topnav a.nav-i{padding:7px 13px;border-radius:99px;font-size:.9rem;color:var(--dim);
  transition:.25s;white-space:nowrap}
.topnav a.nav-i:hover{color:var(--gold2);background:rgba(232,196,106,.08)}
.topnav a.nav-i.active{color:#1a1030;background:linear-gradient(120deg,var(--gold),var(--lav));font-weight:700}

/* HERO */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;text-align:center;padding:40px 20px;pointer-events:none}
.hero-kanji{font-family:"Noto Serif JP","Noto Serif TC",serif;font-size:clamp(80px,18vw,190px);line-height:1;
  background:linear-gradient(160deg,#fff 0%,var(--gold2) 35%,var(--lav) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(180,130,255,.45));animation:breathe 5s ease-in-out infinite}
.hero h1{font-size:clamp(1.6rem,4.5vw,2.8rem);letter-spacing:.28em;margin:.4em 0 .2em;
  text-shadow:0 0 30px rgba(0,0,0,.6)}
.hero .tag{color:var(--lav2);font-size:clamp(.95rem,2.2vw,1.2rem);letter-spacing:.2em}
.hero .sub{margin-top:1.2em;color:var(--dim);font-size:.95rem;max-width:620px;margin-left:auto;margin-right:auto}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.035);opacity:1}}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--gold);font-size:1.6rem;animation:bob 1.8s ease-in-out infinite;opacity:.75}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* PAGE HEAD (non-hero pages) */
.pagehead{padding:64px 0 18px;text-align:center;position:relative}
.pagehead .kanji-bg{font-family:"Noto Serif JP","Noto Serif TC",serif;position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-size:clamp(140px,26vw,260px);color:rgba(164,92,232,.07);pointer-events:none;line-height:1;
  font-family:"Noto Serif TC",serif}
.pagehead h1{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:.18em;
  background:linear-gradient(120deg,var(--gold2),var(--lav2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pagehead .lede{color:var(--dim);max-width:680px;margin:.8em auto 0}

/* CARDS */
.grid{display:grid;gap:18px;margin:28px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:24px;
  position:relative;overflow:hidden;transition:.35s;backdrop-filter:blur(6px)}
.card:hover{transform:translateY(-5px);border-color:rgba(232,196,106,.45);
  box-shadow:0 18px 44px rgba(120,70,200,.22)}
.card .icon{font-size:2rem;margin-bottom:.3em}
.card h3{color:var(--gold2);margin-bottom:.4em;letter-spacing:.06em}
.card p{color:var(--dim);font-size:.94rem}
.card .more{display:inline-block;margin-top:.8em;color:var(--lav);font-size:.88rem}
.card::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.05),transparent);
  transform:skewX(-20deg);transition:.6s;pointer-events:none}
.card:hover::after{left:120%}
a.card{display:block;color:inherit}

/* QUOTE */
.quote{margin:40px auto;max-width:760px;padding:36px 30px;text-align:center;position:relative;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.quote::before{content:"❝";position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  background:var(--bg0);padding:0 16px;color:var(--gold);font-size:2.2rem}
.quote .ja{font-family:"Noto Serif TC",serif;font-size:clamp(1.25rem,3.4vw,1.7rem);color:var(--gold2);letter-spacing:.14em;line-height:2.2}
.quote .zh{color:var(--lav2);margin-top:.6em;letter-spacing:.1em}
.quote .who{color:var(--dim);font-size:.85rem;margin-top:1em}

/* SECTIONS */
section{padding:34px 0}
.sec-title{display:flex;align-items:center;gap:14px;margin:1.4em 0 .8em}
.sec-title::before,.sec-title::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--edge))}
.sec-title::after{background:linear-gradient(90deg,var(--edge),transparent)}
.sec-title h2{font-size:1.3rem;color:var(--gold2);letter-spacing:.2em;white-space:nowrap}
.prose p{margin:.9em 0;color:#d5cde8}
.prose strong{color:var(--gold2)}
.note{background:rgba(232,196,106,.06);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:20px 0;font-size:.93rem;color:var(--dim)}
.warn{background:rgba(224,71,62,.08);border-left:3px solid var(--c-root)}

/* TIMELINE */
.timeline{position:relative;margin:30px 0;padding-left:34px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold),var(--lav),transparent)}
.tl-item{position:relative;margin-bottom:26px;padding:18px 22px;background:var(--glass);
  border:1px solid var(--edge);border-radius:14px;transition:.3s}
.tl-item:hover{border-color:var(--gold);transform:translateX(6px)}
.tl-item::before{content:"";position:absolute;left:-30px;top:24px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 14px var(--gold)}
.tl-item .yr{color:var(--gold);font-weight:700;letter-spacing:.1em;font-size:.95rem}
.tl-item h3{font-size:1.05rem;margin:.15em 0 .3em;color:var(--ink)}
.tl-item p{color:var(--dim);font-size:.92rem}

/* CHAKRA */
.chakra-page{display:grid;grid-template-columns:180px 1fr;gap:30px;margin-top:26px}
@media(max-width:760px){.chakra-page{grid-template-columns:1fr}}
.chakra-column{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;min-height:560px;padding:10px 0}
.chakra-column .body-line{position:absolute;top:0;bottom:0;left:50%;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--c-crown),var(--c-third),var(--c-throat),var(--c-heart),var(--c-solar),var(--c-sacral),var(--c-root));
  opacity:.5;transform:translateX(-50%)}
.chakra-orb{width:64px;height:64px;border-radius:50%;cursor:pointer;border:none;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;
  transition:.3s;font-family:"Noto Serif TC",serif}
.chakra-orb:hover,.chakra-orb.sel{transform:scale(1.28);filter:brightness(1.25)}
.chakra-detail{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:28px;min-height:320px}
.chakra-detail h3{font-size:1.4rem;margin-bottom:.2em}
.chakra-detail .meta{display:flex;flex-wrap:wrap;gap:10px;margin:.6em 0}
.chakra-detail .chip{padding:4px 12px;border-radius:99px;font-size:.8rem;border:1px solid var(--edge);color:var(--lav2)}
.chakra-detail p{color:#d5cde8;font-size:.95rem;margin-top:.6em}
.freq-btn{background:rgba(232,196,106,.12);border:1px solid var(--gold);color:var(--gold2);
  border-radius:99px;padding:8px 18px;cursor:pointer;font-size:.9rem;margin-top:14px;transition:.25s}
.freq-btn:hover{background:var(--gold);color:#1a1030}
.freq-btn.playing{background:var(--c-root);border-color:var(--c-root);color:#fff}

/* SYMBOLS */
.sym-card{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center}
@media(max-width:640px){.sym-card{grid-template-columns:1fr;text-align:center}}
.sym-svg{width:140px;height:140px;margin:0 auto}
.sym-svg path,.sym-svg line,.sym-svg circle,.sym-svg polyline{stroke:var(--gold);stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;
  filter:drop-shadow(0 0 6px rgba(232,196,106,.6));animation:draw 2.8s ease forwards}
.card:hover .sym-svg path,.card:hover .sym-svg line,.card:hover .sym-svg circle,.card:hover .sym-svg polyline{animation:draw .05s forwards,glowpulse 2s ease-in-out .3s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes glowpulse{0%,100%{filter:drop-shadow(0 0 4px rgba(232,196,106,.5))}50%{filter:drop-shadow(0 0 16px rgba(232,196,106,.95))}}
.sym-num{font-size:.8rem;color:var(--lav);letter-spacing:.3em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:.8em}
.tags span{font-size:.78rem;padding:3px 12px;border-radius:99px;border:1px solid var(--edge);color:var(--gold2)}

/* HANDS page */
.hands-stage{display:grid;grid-template-columns:300px 1fr;gap:26px;margin-top:24px}
@media(max-width:760px){.hands-stage{grid-template-columns:1fr}}
.body-svg-wrap{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:18px;text-align:center}
.body-svg-wrap svg{width:100%;max-width:250px}
.hp-dot{fill:var(--gold);cursor:pointer;transition:.25s;animation:pulse2 2.4s ease-in-out infinite}
.hp-dot:hover,.hp-dot.sel{fill:#fff;filter:drop-shadow(0 0 10px var(--gold))}
@keyframes pulse2{0%,100%{opacity:.85}50%{opacity:.45}}
.hp-info{background:var(--glass);border:1px solid var(--edge);border-radius:18px;padding:26px}
.hp-info h3{color:var(--gold2);margin-bottom:.3em}
.hp-info p{color:var(--dim)}

/* FAQ */
details{background:var(--glass);border:1px solid var(--edge);border-radius:14px;margin-bottom:12px;overflow:hidden}
details summary{padding:18px 22px;cursor:pointer;font-weight:700;color:var(--lav2);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary::after{content:"＋";color:var(--gold);font-size:1.2rem;transition:.3s}
details[open] summary::after{transform:rotate(45deg)}
details[open] summary{border-bottom:1px solid var(--edge)}
details .a{padding:16px 22px;color:var(--dim);font-size:.94rem}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:36px 0;text-align:center}
.stat{padding:22px 10px;background:var(--glass);border:1px solid var(--edge);border-radius:16px}
.stat .n{font-size:1.9rem;font-weight:700;color:var(--gold);font-family:"Noto Serif TC",serif}
.stat .l{color:var(--dim);font-size:.82rem;letter-spacing:.08em}

footer{margin-top:60px;padding:36px 20px;border-top:1px solid var(--edge);text-align:center;color:var(--dim);font-size:.85rem}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}