/* Glass Anatomy — standalone WP page template inside the HighendWP-child shell.
 * Palette + type match /density-selector/ and the Resources tab bar so the
 * three tools read as one family. All custom classes are namespaced `ga-` and
 * the page background is scoped to the template body class so nothing leaks
 * into the parent theme's header/footer. Ported from glass-anatomy-mockup.html.
 */

:root{
  --ga-bg:#0a0a0c; --ga-bg-2:#16161a; --ga-bg-3:#1d1d22; --ga-bord:#25252a;
  --ga-text:#e8e8ea; --ga-mute:#9b9ba2; --ga-faint:#6a6a72; --ga-gold:#c8a96a;
  --ga-gold-soft:rgba(200,169,106,.22);
}

/* Reset HighendWP wrapper chrome so the page reads full-bleed + dark. */
body.page-template-page-glass-anatomy{background:var(--ga-bg); color:var(--ga-text)}
body.page-template-page-glass-anatomy #main,
body.page-template-page-glass-anatomy .site-content,
body.page-template-page-glass-anatomy .content-area{background:var(--ga-bg)}

.ga-main{
  font-family:"proxima-nova","Proxima Nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400; color:var(--ga-text); background:var(--ga-bg);
  max-width:1400px; margin:0 auto; padding:0 24px 80px;
}
.ga-main a{color:inherit}

/* ---------- hero ---------- */
.ga-hero{text-align:center; max-width:820px; margin:0 auto; padding:60px 24px 18px}
.ga-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ga-gold); font-weight:600; margin:0 0 14px}
.ga-h1{font-size:46px; line-height:1.05; font-weight:300; letter-spacing:-.01em; color:#fff; margin:0 0 18px}
.ga-lead{font-size:17px; line-height:1.6; color:var(--ga-mute); margin:0}
.ga-lead strong{color:var(--ga-text); font-weight:600}
.ga-kicker{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ga-mute); font-weight:600; margin:0 0 18px; text-align:center}

/* ---------- interactive exploded diagram ---------- */
.ga-stage{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding:30px 0 10px}
@media(max-width:880px){.ga-stage{grid-template-columns:1fr; gap:8px}}

.ga-scene{perspective:1500px; height:430px; display:flex; align-items:center; justify-content:center}
.ga-stack{position:relative; width:300px; height:300px; transform-style:preserve-3d; transform:rotateX(56deg) rotateZ(-44deg)}
.ga-pane{position:absolute; inset:0; border-radius:8px; border:1px solid rgba(255,255,255,.18); transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s, opacity .3s; cursor:pointer; backface-visibility:hidden}
.ga-pane::after{content:attr(data-tag); position:absolute; top:8px; left:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fff; font-weight:600; transform:rotateZ(44deg) rotateX(-56deg); transform-origin:left top; opacity:0; transition:opacity .3s; text-shadow:0 1px 6px rgba(0,0,0,.8); pointer-events:none}
.ga-scene:hover .ga-pane::after, .ga-pane.is-sel::after{opacity:.92}

.ga-pane--glass{background:linear-gradient(135deg, rgba(150,200,220,.30), rgba(120,160,180,.12)); box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 18px 40px -18px rgba(0,0,0,.7)}
.ga-pane--inter{background:
    repeating-linear-gradient(48deg, rgba(120,80,30,.16) 0 7px, rgba(200,150,80,.10) 7px 14px),
    linear-gradient(135deg,#d9b277,#b07e3b 60%,#caa766);
  box-shadow:0 0 0 1px var(--ga-gold-soft), 0 0 34px var(--ga-gold-soft), 0 18px 44px -16px rgba(0,0,0,.8)}

.ga-pane--first{transform:translateZ(78px)}
.ga-pane--core{transform:translateZ(0)}
.ga-pane--second{transform:translateZ(-78px)}
.ga-pane--first.is-sel{transform:translateZ(108px)}
.ga-pane--second.is-sel{transform:translateZ(-108px)}
.ga-pane--core.is-sel{box-shadow:0 0 0 2px var(--ga-gold), 0 0 48px var(--ga-gold-soft), 0 18px 44px -16px rgba(0,0,0,.8)}
.ga-pane.is-dim{opacity:.34}

/* legend / layer selector */
.ga-legend{display:flex; flex-direction:column; gap:12px}
.ga-lyr{display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%; background:var(--ga-bg-2); border:1px solid var(--ga-bord); border-left:3px solid transparent; border-radius:8px; padding:16px 18px; color:inherit; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; font-family:inherit}
.ga-lyr:hover{transform:translateX(2px); background:var(--ga-bg-3)}
.ga-lyr.is-sel{border-color:var(--ga-bord); border-left-color:var(--ga-gold); background:var(--ga-bg-3)}
.ga-lyr__n{font-size:11px; color:var(--ga-faint); font-weight:600; letter-spacing:.1em; min-width:18px; padding-top:2px}
.ga-lyr__t{display:block; font-size:17px; color:#fff; font-weight:400; margin:0 0 3px}
.ga-lyr__s{display:block; font-size:13px; color:var(--ga-mute); line-height:1.5; margin:0}
.ga-lyr.is-sel .ga-lyr__t{color:var(--ga-gold)}

/* ---------- detail panels ---------- */
.ga-detail{display:none; animation:ga-fade .35s ease}
.ga-detail.is-show{display:block}
@keyframes ga-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ga-panel{background:var(--ga-bg-2); border:1px solid var(--ga-bord); border-radius:12px; padding:30px 30px 26px; margin:26px 0 0}
.ga-panel__head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 6px}
.ga-panel__ey{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ga-gold); font-weight:600}
.ga-panel__h{font-size:26px; font-weight:300; color:#fff; margin:0}
.ga-panel__say{font-size:16px; line-height:1.6; color:var(--ga-text); max-width:760px; margin:10px 0 22px; border-left:2px solid var(--ga-gold); padding-left:16px; font-style:italic}

.ga-rows{display:flex; flex-direction:column; gap:0}
.ga-row{display:grid; grid-template-columns:230px 1fr; gap:22px; padding:16px 0; border-top:1px solid var(--ga-bord)}
.ga-row:first-child{border-top:0}
@media(max-width:760px){.ga-row{grid-template-columns:1fr; gap:8px}}
.ga-row__opt{font-size:15px; color:#fff; font-weight:500}
.ga-row__opt small{display:block; color:var(--ga-mute); font-weight:400; font-size:12.5px; margin-top:4px; letter-spacing:.02em}
.ga-row__say{font-size:14px; line-height:1.55; color:var(--ga-mute)}
.ga-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; align-items:center}
.ga-chip{font-size:11.5px; letter-spacing:.02em; padding:4px 10px; border-radius:999px; text-decoration:none; transition:background .15s,color .15s,border-color .15s}
.ga-chip--prod{background:var(--ga-gold-soft); color:var(--ga-gold); border:1px solid rgba(200,169,106,.4)}
.ga-chip--prod:hover{background:var(--ga-gold); color:var(--ga-bg)}
.ga-chip--proj{background:transparent; color:var(--ga-mute); border:1px solid var(--ga-bord)}
.ga-chip--proj:hover{color:var(--ga-text); border-color:var(--ga-faint)}
.ga-chip--lbl{color:var(--ga-faint); border:0; padding-left:0; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:600}

.ga-row--live{background:linear-gradient(90deg, var(--ga-gold-soft), transparent); border-radius:8px; margin:4px -10px; padding:16px 10px}
.ga-livecta{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ga-gold); font-weight:600; text-decoration:none; margin-top:8px}
.ga-livecta:hover{text-decoration:underline}

/* ---------- closing ---------- */
.ga-close{text-align:center; max-width:760px; margin:60px auto 0; padding:0 24px}
.ga-h2{font-size:30px; font-weight:300; color:#fff; margin:0 0 14px}
.ga-close p{font-size:15px; line-height:1.65; color:var(--ga-mute); margin:0 0 26px}
.ga-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.ga-btn{display:inline-block; padding:14px 26px; border-radius:6px; font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none; border:1px solid var(--ga-bord); color:var(--ga-text); transition:.15s}
.ga-btn:hover{border-color:var(--ga-faint)}
.ga-btn--primary{background:var(--ga-gold); color:var(--ga-bg); border-color:var(--ga-gold)}
.ga-btn--primary:hover{background:#d8bd86}

@media(prefers-reduced-motion:reduce){
  .ga-pane,.ga-lyr,.ga-detail{transition:none; animation:none}
}