/* Omega Mega — word effects. Each one plays on a layer of copies over the page that exists only while it plays, so
   nothing here styles the page's own words: they never move, and readers, selection and copy only ever see them. */

/* ---------- "broken." breaks like glass (js/shatter.js) ---------- */
.shatter{position:fixed;inset:0;z-index:49;pointer-events:none;overflow:hidden;contain:strict;user-select:none;-webkit-user-select:none}
.shatter .sh-g{position:absolute;inset:0}
.shatter .sh-pane,.shatter .sh-p,.shatter .sh-t,.shatter .sh-e,.shatter .sh-s,.shatter .sh-l,.shatter .sh-f,.shatter .sh-k,.shatter canvas{position:absolute;display:block}
.shatter .sh-p{left:0;top:0;overflow:hidden;will-change:transform,opacity}
.shatter .sh-t{white-space:pre;margin:0;padding:0}
.shatter .sh-t::before{content:attr(data-t);content:attr(data-t) / ""}
.shatter .sh-e{left:0;top:0;overflow:visible;opacity:0}
.shatter .sh-s{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5) 45%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0));opacity:0}
.shatter .sh-l{inset:0;background:#fff;opacity:0}
.shatter .sh-f{border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.75) 22%,rgba(255,255,255,0) 68%);opacity:0}
.shatter .sh-k{left:0;top:0;transform-origin:0 50%;transform:scaleX(0);border-radius:1px}
/* reduced motion: no break, the word only dips while js/shatter.js holds .sh-dip on its section (400 ms) */
@keyframes sh-dip{0%,100%{opacity:1}40%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sh-dip #h-p02 em{animation:sh-dip .4s ease-in-out}}

/* ---------- "scalable?" goes to the moon (js/upchart.js) ---------- */
.upchart{text-decoration:underline dotted #8fc21b;text-decoration-thickness:2px;text-underline-offset:.2em}
.upc{position:fixed;inset:0;z-index:56;pointer-events:none;overflow:hidden;contain:strict;user-select:none;-webkit-user-select:none}
.upc .upc-c{position:absolute;will-change:transform,opacity}
.upc .upc-b,.upc svg{display:block;width:100%;height:100%}
.upc svg{overflow:visible;transform:rotate(-3deg)}
.upc .k{fill:none;stroke:#0b0b0c;stroke-linecap:round;stroke-linejoin:round}
.upc .face{fill:#fffdf6}
.upc .shd{fill:var(--shadow,#0b0b0c)}
.upc .grid{fill:none;stroke:rgba(11,11,12,.09);stroke-width:1}
.upc .lime{fill:var(--lime,#d2f783)} .upc .lime-s{stroke:var(--lime,#d2f783)}
.upc .pink{fill:var(--pink,#ffaeb4)} .upc .cyan{fill:var(--cyan,#a3e7f4)} .upc .moon{fill:var(--yellow,#f6f08a)}
.upc .upc-t{font-family:"Archivo",system-ui,sans-serif;font-weight:900;font-stretch:75%;fill:#0b0b0c}
.upc .pink-t{fill:var(--pink,#ffaeb4);stroke:#0b0b0c;stroke-width:1.8;stroke-linejoin:round;paint-order:stroke}
.upc .gone{opacity:0}
.upc.still .sp{display:none}
.upc.still .upc-c{animation:upc-in .18s ease-out both}
.upc.still.out .upc-c{animation:upc-out .2s cubic-bezier(.5,0,.8,.4) both}
@keyframes upc-in{from{opacity:0}to{opacity:1}}
@keyframes upc-out{from{opacity:1}to{opacity:0}}