/* ZEIM section themes. One quiet art band per section, above the page header, never under controls.
   Art is pre-rendered (static/zt/, original artwork). Only transform/opacity animate; nothing animates under reduced motion.
   CAD mist lives on #viewCad (home / empty / success landing only) — never on static/cad.html work canvas. */
.zt-band{position:relative;height:150px;margin:0 0 var(--s4,16px);border-radius:var(--r-lg,14px);overflow:hidden;contain:strict;background:var(--zt-ground,#F4F1EA);pointer-events:none;user-select:none}
.layout>.zt-band{grid-column:1/-1;margin:0}
.zt-art{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;aspect-ratio:1000/320;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
[data-zt=torchc0] .zt-art{left:0;width:100%;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
.zt-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--zt-a,#0066FF);opacity:.55}
[data-zt=showcase]{--zt-ground:#F5EDE9;--zt-a:#C24D6B}
[data-zt=slicer]{--zt-ground:#EFEADE;--zt-a:#0066FF}
[data-zt=torchc0]{--zt-ground:#1A0606;--zt-a:#E2582C}
[data-zt=cad]{--zt-ground:linear-gradient(#C9CED4,#9AA3AD);--zt-a:#B8792E}
[data-zt=lithophane]{--zt-ground:#1C140E;--zt-a:#E2B66C;height:168px}
[data-zt=smartfix]{--zt-ground:#F1ECE2;--zt-a:#8A5A2B;background-image:url(/static/zt/kumiko.svg);background-size:40px 40px;background-position:right top}
[data-zt=smartfix]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F1ECE2 0,#F1ECE2 30%,rgba(241,236,226,.55) 100%)}
[data-zt=learn]{--zt-ground:#F5F2ED;--zt-a:#3B3A4A}
[data-zt=account]{--zt-ground:#F4F0EA;--zt-a:#A3241C}
/* Workspace stays clean: the wave band shows only before a model is open */
#viewEdit:has(#editStart[hidden])>.zt-band{display:none}
/* Lithophane: Tango as a square, backlit lithophane in a thin wooden frame + soft glow pulse */
.zt-litho{position:absolute;right:28px;top:14px;width:140px;height:140px;padding:5px;border-radius:4px;background:linear-gradient(135deg,#6B4A2E,#3E2A1A);box-shadow:0 0 0 1px #2A1C10,0 0 38px 6px rgba(255,190,110,.28)}
.zt-litho img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.zt-glow{position:absolute;inset:-10px;border-radius:8px;background:radial-gradient(circle at 50% 50%,rgba(255,210,140,.55),rgba(255,180,90,.12) 55%,transparent 72%);opacity:.4;will-change:transform,opacity;animation:zt-glow 5.5s ease-in-out infinite}
@keyframes zt-glow{0%,100%{opacity:.28;transform:scale(.96)}50%{opacity:.72;transform:scale(1.05)}}
.zt-cap{position:absolute;right:186px;bottom:14px;max-width:44%;margin:0;color:#E8D2A6;font-size:var(--fs-sm,13px);text-align:right}
/* TorchC0: rain, distant lightning, and quiet fire-red embers (no violence) */
.zt-rain{position:absolute;inset:-40px 0 0 34%;background:repeating-linear-gradient(104deg,transparent 0 22px,rgba(255,220,200,.22) 22px 23px,transparent 23px 47px);background-size:47px 60px;will-change:transform;animation:zt-rain 1.6s linear infinite}
.zt-rain.far{opacity:.5;background-size:31px 40px;animation-duration:2.4s}
@keyframes zt-rain{to{transform:translate3d(-10px,40px,0)}}
.zt-bolt{position:absolute;right:16%;top:0;width:60px;height:110px;opacity:0;animation:zt-bolt 9s ease-out infinite}
.zt-bolt path{fill:none;stroke:#FFE7C9;stroke-width:2;stroke-linejoin:round}
@keyframes zt-bolt{0%,86%,100%{opacity:0}87%{opacity:.9}88%{opacity:.15}89.5%{opacity:.7}93%{opacity:0}}
.zt-ember{position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;background:#FF8A4A;opacity:0;will-change:transform,opacity;animation:zt-ember 12s linear infinite}
.zt-ember:nth-child(5){left:14%;animation-delay:0s}.zt-ember:nth-child(6){left:28%;animation-delay:-3s;animation-duration:14s;width:2px;height:2px}
.zt-ember:nth-child(7){left:46%;animation-delay:-6s;animation-duration:11s}.zt-ember:nth-child(8){left:62%;animation-delay:-9s;animation-duration:15s;width:2px;height:2px}
.zt-ember:nth-child(9){left:78%;animation-delay:-2s;animation-duration:13s}
@keyframes zt-ember{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.8}70%{opacity:.55}100%{transform:translate3d(18px,-130px,0) scale(1.1);opacity:0}}
/* Showcase: a few petals drift slowly */
.zt-petal{position:absolute;top:-12px;width:9px;height:7px;border-radius:70% 0 70% 0;background:#F2B8C6;opacity:0;will-change:transform,opacity;animation:zt-fall 14s linear infinite}
.zt-petal:nth-child(2){left:52%;animation-delay:0s}.zt-petal:nth-child(3){left:64%;animation-delay:-4s;animation-duration:17s}
.zt-petal:nth-child(4){left:76%;animation-delay:-8s}.zt-petal:nth-child(5){left:86%;animation-delay:-11s;animation-duration:19s}
.zt-petal:nth-child(6){left:93%;animation-delay:-2s;animation-duration:16s}
@keyframes zt-fall{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:.85}90%{opacity:.7}100%{transform:translate3d(-60px,150px,0) rotate(240deg);opacity:0}}
/* FDM Slicer: soft blue/white wave mood (band hidden once a model is open) */
.zt-wave{position:absolute;left:-8%;right:-8%;bottom:-18%;height:78%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.42) 38%,rgba(0,102,255,.16));opacity:.55;will-change:transform,opacity;animation:zt-wave 9s ease-in-out infinite}
.zt-wave.far{opacity:.32;height:92%;bottom:-28%;animation-duration:13s;animation-direction:reverse;background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(180,210,255,.35) 45%,rgba(0,102,255,.1))}
@keyframes zt-wave{0%,100%{transform:translate3d(0,8px,0) scaleX(1);opacity:.4}50%{transform:translate3d(-14px,-6px,0) scaleX(1.04);opacity:.7}}
/* Account: quiet calligraphy ink blooms */
.zt-ink{position:absolute;width:48px;height:48px;border-radius:62% 38% 58% 42%;background:radial-gradient(circle at 42% 40%,rgba(163,36,28,.38),rgba(163,36,28,.08) 62%,transparent 74%);opacity:0;will-change:transform,opacity;animation:zt-ink 15s ease-in-out infinite}
.zt-ink:nth-child(2){left:58%;top:18%;animation-delay:0s}.zt-ink:nth-child(3){left:72%;top:42%;width:34px;height:34px;animation-delay:-5s;animation-duration:18s}
.zt-ink:nth-child(4){left:86%;top:12%;width:28px;height:40px;animation-delay:-9s;animation-duration:16s}
@keyframes zt-ink{0%{transform:translate3d(0,0,0) scale(.75);opacity:0}18%{opacity:.55}78%{opacity:.35}100%{transform:translate3d(-36px,18px,0) scale(1.2);opacity:0}}
/* CAD landing (#viewCad only): steel-grey ronin mist — never on cad.html work canvas */
.zt-mist{position:absolute;inset:-25% -12%;background:radial-gradient(ellipse 55% 50% at 28% 62%,rgba(255,255,255,.42),transparent 60%),radial-gradient(ellipse 50% 45% at 72% 38%,rgba(150,160,172,.4),transparent 58%);opacity:.45;will-change:transform,opacity;animation:zt-mist 16s ease-in-out infinite}
.zt-mist.far{opacity:.28;animation-duration:22s;animation-direction:reverse;background:radial-gradient(ellipse 60% 48% at 60% 70%,rgba(210,216,222,.38),transparent 62%),radial-gradient(ellipse 40% 40% at 20% 30%,rgba(120,128,138,.28),transparent 55%)}
@keyframes zt-mist{0%,100%{transform:translate3d(0,0,0);opacity:.3}50%{transform:translate3d(16px,-10px,0);opacity:.58}}
/* Gentle arrival when a section opens */
main:not([hidden])>.zt-band .zt-art,main:not([hidden])>.zt-band .zt-litho{animation:zt-in .32s cubic-bezier(.22,.61,.36,1) .04s both}
@keyframes zt-in{from{opacity:0;transform:translate3d(16px,0,0)}}
.pagehead h1::after,#viewCreate #h1::after{content:"";display:block;width:36px;height:2px;margin-top:6px;border-radius:2px;background:var(--zt-a,#0066FF)}
#viewShowcase{--zt-a:#C24D6B}#viewTorch{--zt-a:#C8321E}#viewCad{--zt-a:#B8792E}
#viewFix{--zt-a:#8A5A2B}#viewLearn{--zt-a:#3B3A4A}#viewAccount{--zt-a:#A3241C}
#viewCreate{--zt-a:#B8862E}
html[data-theme=dark] .zt-band{opacity:.88}
html[data-theme=dark] #viewLearn{--zt-a:#9C98C0}
@media (max-width:640px){.zt-band{height:96px;border-radius:var(--r,12px)}
 [data-zt=lithophane]{height:128px}.zt-litho{width:106px;height:106px;right:14px;top:11px}.zt-cap{right:132px;max-width:52%;font-size:12px}
 .zt-rain{left:18%}.zt-wave{height:88%}.zt-mist{opacity:.35}}
@media (prefers-reduced-motion:reduce){.zt-band *,.zt-band::before,.zt-band::after{animation:none!important;transition:none!important}.zt-petal,.zt-ember,.zt-wave,.zt-mist,.zt-ink,.zt-rain,.zt-glow{display:none}.zt-bolt{opacity:0}}
/* 2D→3D: an ensō brush circle and a quiet line figure on washi, indigo (aizome) accent */
[data-zt=ai3d]{--zt-ground:#F2EFE8;--zt-a:#3E5C76}
.zt-ai3d{position:absolute;inset:0;width:100%;height:100%}
.zt-ai3d .enso{fill:none;stroke:#3E5C76;stroke-width:7;stroke-linecap:round;opacity:.28}
.zt-ai3d .wire{fill:none;stroke:#3E5C76;stroke-width:1.4;stroke-linejoin:round;opacity:.45}
.zt-ai3d .hill{fill:#3E5C76;opacity:.06}
#viewAi3d{--zt-a:#3E5C76}
html[data-theme=dark] [data-zt=ai3d]{--zt-ground:#1B2026}
html[data-theme=dark] #viewAi3d{--zt-a:#8FB0CC}
html[data-theme=dark] .zt-ai3d .enso,html[data-theme=dark] .zt-ai3d .wire{stroke:#8FB0CC}