/* Scoped visual experiment: no rules affect other sections. */
#resonance{--charge:0;--res-light:156,176,255;background:radial-gradient(ellipse at 30% 45%,#22213b55,transparent 65%),#090f1c}
#resonance .wrap{max-width:1200px}
#resonance .res-overline{display:block;font:600 10px var(--lat);letter-spacing:.2em;color:#b9b4dc}
#resonance .res-panel{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid #b6b2d333;background:#101421;overflow:hidden}
#resonance .res-left{min-width:0;position:relative;background:#090c15;display:flex;flex-direction:column}
#resonance .res-device{display:block;position:relative;flex:1 0 auto;width:100%;aspect-ratio:1654 / 1123;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;background:radial-gradient(ellipse,#24253a,#090c15)}
#resonance .res-device:focus-visible{outline:2px solid #cbd3ff;outline-offset:-5px}
#resonance .res-device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:filter .35s}
#resonance .res-aura{position:absolute;inset:19% 35% 47% 36%;background:radial-gradient(ellipse at center,rgba(232,244,255,.95),rgba(var(--res-light),.75) 22%,rgba(var(--res-light),.24) 48%,transparent 73%);mix-blend-mode:screen;opacity:calc(.08 + var(--charge)*.8);filter:blur(8px);pointer-events:none;transition:opacity .25s}
#resonance .res-particles{position:absolute;inset:14% 33% 38%;font-size:25px;line-height:2.4;letter-spacing:20px;color:#d8d4ff;opacity:0;text-shadow:0 0 12px #bfcfff;pointer-events:none}
#resonance .res-touch-label{position:absolute;bottom:7%;left:10%;right:10%;font:13px var(--read);color:#eee6ff;text-shadow:0 2px 8px #000;pointer-events:none}
#resonance .res-phase{flex:none;min-height:3em;margin:0;padding:18px 24px;text-align:center;font-size:12px;letter-spacing:.04em;color:#c7cae8;border-top:1px solid #b6b2d322}
#resonance .res-right{padding:clamp(24px,4vw,48px);align-self:center;min-width:0}
#resonance h3{font:600 clamp(25px,3vw,36px)/1.5 var(--disp);color:#eee9ff;margin:16px 0}
#resonance .res-copy{font:15px/1.9 var(--read);color:#cdcadd}
#resonance .res-help{font-size:12px;line-height:1.8;color:#969cb5}
#resonance .res-result{border-top:1px solid #bcb8df44;border-bottom:1px solid #bcb8df22;padding:24px 0;margin:28px 0;min-height:190px}
#resonance .res-result>span{font-size:10px;letter-spacing:.2em;color:#a7a4bf}
#resonance h4{font:600 20px var(--disp);color:#dedfff;margin:13px 0}
#resonance .res-result p{font:14px/1.9 var(--read);color:#babcd0}
#resonance .res-result small{color:#b4acd8;line-height:1.7}
#resonance blockquote{margin:20px 0;font:600 24px var(--disp);color:#f1c6ca}
#resonance .res-archive-link{font-size:12px;color:#c2badc;border-bottom:1px solid #c2badc55;padding-bottom:5px}
#resonance .res-disclaimer{font-size:11px;color:#9395aa;text-align:center;line-height:1.8;margin-top:20px}
#resonance[data-state=charging] .res-device img{filter:brightness(calc(1 + var(--charge)*.35));animation:resTension .18s infinite alternate}
#resonance[data-state=charging] .res-particles{opacity:calc(.15 + var(--charge)*.65);animation:resDrift 3s infinite alternate ease-in-out}
#resonance[data-state=success] .res-aura{opacity:.65;animation:resBloom 1.3s ease-out}
#resonance[data-state=unstable]{--res-light:185,114,255}
#resonance[data-state=unstable] .res-aura{opacity:.8;animation:resFlicker 1.4s ease-out}
#resonance[data-state=burst],#resonance[data-state=nox]{--res-light:236,44,78}
#resonance[data-state=burst] .res-aura,#resonance[data-state=nox] .res-aura{opacity:.7;animation:resFlicker .9s ease-out}
#resonance .res-cracks{position:absolute;inset:10% 42% 38% 43%;pointer-events:none;opacity:0;background:#ff729a;filter:drop-shadow(0 0 7px crimson);clip-path:polygon(47% 0,52% 30%,41% 42%,57% 58%,49% 100%,53% 61%,36% 43%,47% 28%)}
#resonance[data-state=burst] .res-cracks,#resonance[data-state=nox] .res-cracks{opacity:.9}
#resonance[data-state=nox] .res-left::after{content:'';position:fixed;z-index:100;inset:0;opacity:0;background:#610b24;pointer-events:none;animation:resFlash .8s both}
#resonance[data-state=nox] h4,#resonance[data-state=burst] h4{color:#efafb9}
@keyframes resTension{from{transform:translateX(-.6px)}to{transform:translateX(.6px)}}
@keyframes resDrift{to{transform:translateY(-22px) rotate(7deg)}}
@keyframes resBloom{from{transform:scale(.8);opacity:1}to{transform:scale(1);opacity:.65}}
@keyframes resFlicker{0%,60%{opacity:1}30%,100%{opacity:.4}}
@keyframes resFlash{0%{opacity:.8}30%{opacity:.08}65%{opacity:.5}100%{opacity:0}}
@media(max-width:760px){#resonance .res-panel{grid-template-columns:1fr}#resonance .res-device{aspect-ratio:1654 / 1123}#resonance .res-result{min-height:0}}
@media(prefers-reduced-motion:reduce){#resonance *,#resonance *::after{animation:none!important;transition:none!important}}

/* Nox hidden event variants — visual state only; rare-event probability unchanged. */
#resonance .nox-quote{position:relative;margin:22px 0 17px;font:600 clamp(21px,2.25vw,29px)/1.65 var(--disp);letter-spacing:.012em;text-shadow:0 0 19px currentColor}
#resonance .nox-quote.nox-dismiss{color:#C7C4D5;text-shadow:0 0 12px rgba(171,168,199,.30)}
#resonance .nox-quote.nox-curious{color:#CDA5F3;text-shadow:0 0 17px rgba(177,107,237,.42)}
#resonance .nox-quote.nox-heir{color:#F6819B;text-shadow:0 0 17px rgba(226,52,91,.46)}
#resonance .nox-quote cite{display:block;margin-top:9px;font:600 11px var(--lat);letter-spacing:.18em;color:#BFB4C6;font-style:normal;text-shadow:none}
#resonance .nox-redacted{display:inline-block;position:relative;color:#FF9BAF;letter-spacing:.11em;text-shadow:-2px 0 #A955E7,2px 0 #DD314E;animation:noxFragment .22s steps(2,end) 12}
#resonance .nox-redacted:after{content:"";position:absolute;left:0;right:0;top:40%;height:21%;background:repeating-linear-gradient(90deg,rgba(12,10,23,.9) 0 8px,rgba(226,64,102,.62) 8px 12px);opacity:.8;pointer-events:none;animation:noxRedaction 1.6s steps(3,end) 2}
@keyframes noxFragment{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}50%{transform:translate(2px,-1px)}75%{transform:translate(0,1px)}}
@keyframes noxRedaction{0%,100%{opacity:.82}45%{opacity:.24}70%{opacity:1}}
@media(prefers-reduced-motion:reduce){#resonance .nox-redacted,#resonance .nox-redacted:after{animation:none!important}}

/* Aptitude observations retain the original Nox damage and noise effects. */
#resonance .res-profile{margin:18px 0;border:1px solid #bcb8df33;padding:6px 16px}
#resonance .res-profile div{display:flex;justify-content:space-between;gap:16px;padding:10px 0}
#resonance .res-profile dt{font-size:12px;color:#9da3be}
#resonance .res-profile dd{margin:0;text-align:right;font-size:14px;color:rgb(var(--res-light))}
#resonance .res-system-warning{border-left:2px solid #e95b7e;padding:10px 14px;background:#7a183322;color:#eda3b6;font-size:11px}
#resonance[data-state=quiet] .res-aura{opacity:.12}
#resonance[data-state=faint] .res-aura{opacity:.35}
#resonance[data-state=high] .res-aura{opacity:1;animation:resBloom 1.3s ease-out}
#resonance .res-attribute-note{color:rgb(var(--res-light))}

/* Strength affects light shape and rhythm, independently of elemental hue. */
#resonance[data-state=faint] .res-aura{opacity:.24;transform:scale(.72);filter:blur(5px);animation:resFaintBreath 4.8s ease-in-out infinite}
#resonance[data-state=high] .res-aura{opacity:.95;transform:scale(1.35);filter:blur(11px);animation:resHighRadiance 2.6s ease-in-out infinite}
#resonance[data-state=high] .res-particles{opacity:.7;color:rgb(var(--res-light));text-shadow:0 0 14px rgb(var(--res-light));animation:resDrift 3s ease-in-out infinite alternate}
#resonance[data-state=unstable] .res-aura{opacity:.65;transform:scale(1.05);animation:resUnstableLight 2.9s ease-in-out infinite}
#resonance[data-state=unstable] .res-particles{opacity:.4;color:rgb(var(--res-light));animation:resUnstableDust 3.7s ease-in-out infinite}
@keyframes resFaintBreath{0%,100%{opacity:.18;transform:scale(.68)}50%{opacity:.32;transform:scale(.8)}}
@keyframes resHighRadiance{0%,100%{opacity:.85;transform:scale(1.25)}50%{opacity:1;transform:scale(1.48)}}
@keyframes resUnstableLight{0%,100%{opacity:.4;transform:translate(-3px,1px) scale(.92)}19%{opacity:.8;transform:translate(2px,-2px) scale(1.14)}43%{opacity:.3;transform:translate(-1px,3px) scale(.85)}72%{opacity:.7;transform:translate(3px,-1px) scale(1.08)}}
@keyframes resUnstableDust{0%,100%{opacity:.2;transform:translate(-2px,0)}35%{opacity:.5;transform:translate(4px,-10px)}68%{opacity:.15;transform:translate(-4px,-4px)}}

/* The source artwork has a lit crystal: suppress both added and painted light on no response. */
#resonance[data-state=quiet] .res-aura,#resonance[data-state=quiet] .res-particles{opacity:0;animation:none}
#resonance[data-state=quiet] .res-device img{filter:brightness(.65) saturate(.45)}
#resonance[data-state=quiet] .res-device::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 18% 30% at 50.5% 36%,rgba(4,8,17,.88),rgba(4,8,17,.5) 50%,transparent 100%)}

/* The mask uses the artwork's coordinates and the same cover positioning as the image. */
#resonance .res-crystal-tint,#resonance .res-element-shimmer{position:absolute;inset:0;pointer-events:none;mask:url('img/resonance-crystal-mask.svg') center/cover no-repeat;-webkit-mask:url('img/resonance-crystal-mask.svg') center/cover no-repeat;opacity:0}
#resonance[data-element] .res-crystal-tint{background:rgb(var(--res-light));mix-blend-mode:color;opacity:1}
#resonance[data-element] .res-element-shimmer{background:linear-gradient(135deg,transparent 20%,rgba(var(--res-light),.5) 50%,transparent 75%);background-size:200% 200%;mix-blend-mode:screen;opacity:.4}
#resonance[data-state=quiet] .res-crystal-tint,#resonance[data-state=quiet] .res-element-shimmer{opacity:0;animation:none}
#resonance[data-state=faint] .res-element-shimmer{opacity:.16}
#resonance[data-state=high] .res-element-shimmer{opacity:.7}
#resonance[data-element=fire] .res-element-shimmer{animation:resFireFlow 3.2s ease-in-out infinite}
#resonance[data-element=water] .res-element-shimmer{animation:resWaterFlow 4s ease-in-out infinite alternate}
#resonance[data-element=wind] .res-element-shimmer{animation:resWindFlow 2.8s linear infinite}
#resonance[data-element=earth] .res-element-shimmer{animation:resEarthGlow 5s ease-in-out infinite}
#resonance[data-element=lightning] .res-element-shimmer{animation:resLightning 3.4s ease-in-out infinite}
#resonance[data-element=ice] .res-element-shimmer{background:radial-gradient(circle at 50.5% 29%,#e8ffff 0 1%,transparent 3%),radial-gradient(circle at 48% 43%,#cffaff 0 1%,transparent 3%),linear-gradient(135deg,transparent,rgba(var(--res-light),.45),transparent);animation:resIceGlint 4.5s ease-in-out infinite}
#resonance[data-element=light] .res-element-shimmer{animation:resEarthGlow 3.8s ease-in-out infinite}
#resonance[data-element=shadow] .res-crystal-tint{mix-blend-mode:multiply;background:#765498;animation:resShadowVeil 5s ease-in-out infinite}
#resonance[data-element=shadow] .res-element-shimmer{opacity:.1}
#resonance[data-element=nox] .res-element-shimmer{background:rgba(210,30,60,.45)}
@keyframes resFireFlow{0%,100%{background-position:50% 100%}40%{background-position:40% 35%}75%{background-position:60% 0%}}
@keyframes resWaterFlow{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes resWindFlow{from{background-position:100% 100%}to{background-position:0% 0%}}
@keyframes resEarthGlow{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.3)}}
@keyframes resLightning{0%,100%,35%,65%{filter:brightness(.5)}40%,59%{filter:brightness(2)}}
@keyframes resIceGlint{0%,100%{filter:brightness(.7)}50%{filter:brightness(1.5)}}
@keyframes resShadowVeil{0%,100%{filter:brightness(.65)}50%{filter:brightness(.95)}}