/* Chemistry Lab v1.4: elegance layer. Loaded last. Works with every colour theme through the shared variables. */

@font-face{font-family:"Lab Display";src:url("assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lab Display";src:url("assets/fonts/fraunces-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lab Display";src:url("assets/fonts/fraunces-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lab Display";src:url("assets/fonts/fraunces-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("assets/fonts/nunito-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("assets/fonts/nunito-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("assets/fonts/nunito-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{--font-sans:"Lab Sans",ui-rounded,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--font-display:"Lab Display",Georgia,"Times New Roman",serif;--ease-out:cubic-bezier(.2,.8,.2,1);--glow:color-mix(in srgb,var(--teal) 26%,transparent);font-family:var(--font-sans)}
body{font-family:var(--font-sans);text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}

/* ---------- Type ---------- */
h1,h2,.word-card h3,.exhibit-bottom strong,.how-row li>span,.concept-symbol,.tour-stops button>span,.round-summary h2,dialog h2,.planned-page h1,.card-symbol,.scene-explanation-symbol{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
h1{letter-spacing:-.03em;line-height:1.06}
h1 em,h2 em{font-style:italic;font-weight:400}
h3,.module-card h3,.upcoming-card strong,.question-title h3,#practice-card .question-title h3{font-family:var(--font-sans);font-weight:800;letter-spacing:-.01em}
.eyebrow{font-weight:800;letter-spacing:.16em}
.intro-text,.card-copy,.learn-card p,.word-card p,.scene-explanation-body{line-height:1.7}
.site-header nav a,.lesson-tabs>a,.button,.scene-views button,.scene-toolbar button,.scene-parts button,.word-filter button,.focus-filter button{font-weight:700}
.scene-explanation h2{font-family:var(--font-display)}

/* ---------- Ambient backdrop (dark themes): far stars and two soft light pools ---------- */
:root[data-theme=dark] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:radial-gradient(1.3px 1.3px at 12% 18%,#ffffffc0 50%,transparent 52%),radial-gradient(1px 1px at 72% 9%,#ffffff90 50%,transparent 52%),radial-gradient(1.2px 1.2px at 38% 64%,#ffffffa0 50%,transparent 52%),radial-gradient(1px 1px at 88% 52%,#ffffff80 50%,transparent 52%),radial-gradient(1.5px 1.5px at 56% 33%,color-mix(in srgb,var(--teal) 80%,#fff) 50%,transparent 52%),radial-gradient(1px 1px at 22% 86%,#ffffff70 50%,transparent 52%),radial-gradient(1.1px 1.1px at 94% 88%,#ffffff90 50%,transparent 52%);
 background-size:620px 540px}
:root[data-theme=dark] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(640px 420px at 88% -6%,color-mix(in srgb,var(--teal) 13%,transparent),transparent 70%),radial-gradient(560px 520px at -8% 46%,color-mix(in srgb,var(--blue) 70%,transparent),transparent 72%)}
:root[data-theme=light] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px 460px at 90% -8%,#dff1ea,transparent 70%)}

/* ---------- Header ---------- */
.header-shell{box-shadow:0 1px 0 var(--line)}
:root[data-theme=dark] .header-shell{box-shadow:0 1px 0 var(--line),0 12px 32px #0000003d}
.site-header nav a[aria-current]{background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 22%,var(--surface)),var(--mint));color:var(--teal);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 28%,transparent)}
.find-button,.theme-button{transition:border-color .2s,background .2s,transform .2s var(--ease-out)}
.find-button:hover,.theme-button:hover{transform:translateY(-1px)}

/* ---------- Buttons ---------- */
.button{border-radius:14px;letter-spacing:.005em;transition:transform .2s var(--ease-out),box-shadow .2s,filter .2s,background .2s}
.button:not(.secondary){background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 86%,#fff),var(--teal));border-color:transparent;box-shadow:inset 0 1px 0 #ffffff40,0 10px 26px var(--glow)}
.button:not(.secondary):hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff40,0 14px 32px var(--glow)}
.button:active:not(:disabled){transform:translateY(1px) scale(.985)}
.button.secondary{background:color-mix(in srgb,var(--surface) 86%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
.button.secondary:hover{background:var(--mint)}

/* ---------- Cards ---------- */
.ready-grid .module-card,.upcoming-card,.word-card,.learn-card,.question,.scene-lab,.guided-tour-details,.round-summary,.practice-filter,.resume-card{border-radius:24px}
:root[data-theme=dark] :is(.module-card,.upcoming-card,.word-card,.learn-card,.question,.scene-lab,.guided-tour-details,.round-summary,.practice-filter,.resume-card){background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,#fff 6%),var(--surface) 46%);border-color:color-mix(in srgb,var(--line) 85%,#fff 15%);box-shadow:inset 0 1px 0 #ffffff12,0 14px 36px #00000052}
:root[data-theme=light] :is(.module-card,.upcoming-card,.word-card,.learn-card,.question,.scene-lab){box-shadow:0 1px 0 #fff inset,0 12px 32px #163f330f}
.ready-grid .module-card,.upcoming-card,.word-card,.learn-card{transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.ready-grid .module-card:hover,.upcoming-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--teal) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 22%,transparent),0 24px 48px #0000003d,0 0 46px color-mix(in srgb,var(--teal) 16%,transparent)}
.card-art,.upcoming-art .art{transition:transform .45s var(--ease-out)}
.ready-grid .module-card:hover .card-art{transform:translateY(-4px) scale(1.04)}
.upcoming-card:hover .upcoming-art .art{transform:scale(1.05)}
.module-card .card-bottom strong span,.resume-action span{transition:transform .25s var(--ease-out)}
.module-card:hover .card-bottom strong span,.resume-card:hover .resume-action span{transform:translateX(4px)}
:root[data-theme=dark] .upcoming-art{box-shadow:inset 0 0 0 1px #ffffff0f}
.mission{border:1px solid color-mix(in srgb,var(--teal) 24%,transparent)}
:root[data-theme=dark] .mission{background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 16%,var(--surface)),var(--surface))}

/* ---------- Home hero ---------- */
.hero-exhibit{transition:transform .35s var(--ease-out),box-shadow .35s}
.hero-exhibit:hover{transform:translateY(-3px)}
.hero-3d{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.hero-3d .cl-atom-scene{min-height:0}
.hero-3d.live{visibility:visible}
.hero-3d.live~.exhibit-bottom,.hero-exhibit .exhibit-top{position:relative;z-index:1}
.hero-exhibit:has(.hero-3d.live) .atom-art{visibility:hidden}
:root[data-theme=dark] .hero-exhibit{box-shadow:inset 0 1px 0 #ffffff14,0 22px 60px #00000066,0 0 60px color-mix(in srgb,var(--teal) 10%,transparent)}

/* ---------- Progress and stars ---------- */
progress,.practice-progress progress{height:8px;border-radius:8px;background:color-mix(in srgb,var(--line) 80%,transparent)}
progress::-webkit-progress-bar{background:color-mix(in srgb,var(--line) 80%,transparent);border-radius:8px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#fff));border-radius:8px}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#fff));border-radius:8px}
.stars .earned{text-shadow:0 0 12px #ffc94a88}

/* ---------- Lesson scene chrome ---------- */
.scene-lab{overflow:hidden}
.scene-toolbar>button,.scene-zoom button{border-radius:12px;transition:background .2s,border-color .2s,transform .2s var(--ease-out)}
.scene-toolbar>button:active,.scene-zoom button:active,.scene-parts button:active{transform:scale(.97)}
.scene-parts button{transition:background .2s,border-color .2s,color .2s}
.scene-views{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.scene-explanation{transition:background .3s}
.answers button{transition:background .2s,border-color .2s,transform .15s var(--ease-out),box-shadow .2s}
.answers button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 18px #0000001f}
.answers button.correct{box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 40%,transparent),0 0 24px color-mix(in srgb,var(--teal) 18%,transparent)}
.term{transition:background .2s;border-radius:4px}
.term:hover{background:var(--mint)}

/* ---------- Focus ---------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:10px}

/* ---------- Star celebration ---------- */
.star-toast{position:fixed;left:50%;top:calc(var(--header-height) + 14px);z-index:70;display:flex;align-items:center;gap:12px;padding:10px 20px 10px 12px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,#FFC94A 55%,var(--line));box-shadow:0 18px 44px #00000059,0 0 34px #ffc94a33;opacity:0;transform:translate(-50%,-10px) scale(.96);pointer-events:none;transition:opacity .25s,transform .4s var(--ease-out);max-width:calc(100% - 24px)}
.star-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.star-toast .burst{position:relative;flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;font-size:24px;color:#FFC94A;border-radius:50%;background:radial-gradient(circle,#ffc94a33,transparent 70%)}
.star-toast.show .burst{animation:star-pop .6s var(--ease-out)}
.star-toast .burst i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#FFC94A;opacity:0}
.star-toast.show .burst i{animation:spark .8s ease-out forwards}
.star-toast strong{display:block;font-size:16px}
.star-toast small{display:block;font-size:13.5px;color:var(--muted)}
@keyframes star-pop{0%{transform:scale(.4) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes spark{0%{transform:translate(0,0) scale(1.2);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}

/* ---------- Page transitions ---------- */
.header-shell{view-transition-name:lab-header}
.mobile-nav{view-transition-name:lab-nav}
::view-transition-old(root){animation:vt-out .16s ease-in both}
::view-transition-new(root){animation:vt-in .32s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

@media(prefers-reduced-motion:reduce){
 .ready-grid .module-card:hover,.upcoming-card:hover,.hero-exhibit:hover,.button:hover,.answers button:hover{transform:none}
 .star-toast,.star-toast.show .burst,.star-toast.show .burst i{animation:none;transition:opacity .2s}
}
@media(max-width:680px){
 .star-toast{top:calc(var(--header-height) + 10px)}
 h1{line-height:1.08}
}