/* ═══ ANNOTATION · css/decor.css ═══
   WHAT:   Decoration only: crack sites on the frame's outer edges, magic circles, motes,
           and the theme change. Nothing here is needed to use the site.
   RULES:  • Every decor element is aria-hidden and pointer-events: none.
           • Decor stays on the frame's outer edges; it never overlaps the reading surface.
           • Anything that grows out of a box starts BEHIND it: the frame sits at z-index 2,
             back decor (tentacle roots, halos) at 1, front decor (moss, smear, ooze) at 3.
           • Heavy art is an image file (assets/decor/organism/*.svg), never inline SVG.
             Animations only move or fade (transform/opacity), so the compositor runs them.
           • Reduced motion (OS setting or the rail toggle) stops every animation.
   THEME:  Both decor sets are in the page; the theme removes the other one entirely:
             .only-w  smoke, moss, magic circles  → Watchtower
             .only-a  tentacles, ooze, smears    → Abyssal
           Cracks are shared: they glow cyan in Watchtower and pink in Abyssal.
   ADD:    New crack site? Generate the markup with tools/lithic/ (see README) or copy a
           site block in index.html and change its left/top.
*/

/* ── Layering inside the stage ───────────────────────────────────────────── */
.stage > .frame { position: relative; z-index: 2; }
.decor { position: absolute; pointer-events: none; z-index: 3; overflow: visible; }
.decor.tent--back { z-index: 1; }
[data-theme="watchtower"] .only-a,
[data-theme="abyssal"] .only-w { display: none; }

/* ── Cracks: tapered splits, wide where the stone broke, hairline at the end ── */
.crack-glow { opacity: .7; animation: crack-pulse 5s ease-in-out infinite; }
.crack-glow path { fill: var(--crack-glow); stroke: var(--crack-glow); stroke-width: 3.5; stroke-linejoin: round; filter: url(#crack-blur); }
.crack .c-lip  { fill: var(--bevel-hi); opacity: .5; transform: translate(.8px, 1.2px); }
.crack .c-core { fill: var(--edge); }
.crack .c-hot  { fill: none; stroke: var(--mana-text); stroke-width: .8; stroke-opacity: .75; stroke-linecap: round; }
@keyframes crack-pulse { 50% { opacity: .4; } }

/* ── Aura smoke (Watchtower): baked wisps, moved and faded by the compositor ── */
.smoke { translate: -50% -100%; }
.smoke.side-site { translate: -30% -90%; }
.smoke .wisp {
  position: absolute; inset: 0;
  background-size: 100% 100%; background-repeat: no-repeat;
  transform-origin: 50% 100%; opacity: 0;
  animation: wisp var(--dur) linear var(--delay) infinite;
}
@keyframes wisp {
  0%   { transform: translate(0, 22%) scale(.55, .6); opacity: 0; }
  18%  { opacity: .85; }
  70%  { opacity: .35; }
  100% { transform: translate(var(--dx), -30%) scale(1.25, 1.3); opacity: 0; }
}

/* ── Moss (Watchtower): cushions on ledges, strands hanging off bottom edges ── */
.moss { background-size: 100% 100%; background-repeat: no-repeat; translate: -50% calc(-100% + 8px); }
.moss.hang { translate: -50% -8px; }

/* ── Ooze (Abyssal): a pool on the lip, drips that stretch, drops that fall ── */
.ooze { height: 80px; }
.ooze > i { position: absolute; top: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.ooze .pool { left: 0; top: -1px; height: 8px; }
.ooze .drip { top: -1px; transform-origin: 50% 0; animation: drip var(--dur) ease-in-out var(--delay) infinite; }
.ooze .drop { background: radial-gradient(circle at 35% 35%, #ffc2e4, #ff5aac 45%, #c0106a 100%); clip-path: circle(50%); opacity: 0; animation: drop var(--dur) ease-in var(--delay) infinite; }
@keyframes drip { 0%, 100% { transform: scaleY(.82); } 55% { transform: scaleY(1.1); } }
@keyframes drop { 0%, 55% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }

/* ── Tentacles (Abyssal): rooted behind the frame; slide out on theme change, then sway ── */
.tent .tglow { position: absolute; background: radial-gradient(closest-side, rgb(255 61 158 / .85), rgb(255 30 142 / .3) 50%, transparent); }
.tent .emerge, .tent .sway { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tent .tbody { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.tent .tbody.flip { transform: scaleX(-1); }
.tent .sway { animation: tsway var(--sway, 8s) ease-in-out var(--sd, 0s) infinite; }
[data-theme="abyssal"] .tent .emerge { animation: emerge 2.2s cubic-bezier(.35,.6,.2,1) both; animation-delay: var(--ed, .2s); }
@keyframes emerge { from { transform: translate(var(--ix), var(--iy)) scale(.45) rotate(-14deg); opacity: 0; } 35% { opacity: 1; } }
@keyframes tsway { 50% { transform: rotate(var(--amp, 3deg)); } }

/* ── Magic circles (Watchtower): fading, disintegrating, behind everything ── */
.circles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.circle {
  position: absolute; aspect-ratio: 1;
  background: var(--img) center / contain no-repeat;
  -webkit-mask-image: url("../assets/decor/tex-mask.webp"), radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: url("../assets/decor/tex-mask.webp"), radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-size: 520px 520px, 100% 100%; mask-size: 520px 520px, 100% 100%;
}
.circle--low  { --img: url("../assets/decor/circle-full.webp"); width: 720px; left: -170px; bottom: -260px; opacity: .42; animation: circle-turn 300s linear infinite; }
.circle--high { --img: url("../assets/decor/circle-q1.webp"); width: 520px; right: -150px; top: -140px; opacity: .5; -webkit-mask-image: url("../assets/decor/tex-mask.webp"); mask-image: url("../assets/decor/tex-mask.webp"); }
@keyframes circle-turn { to { rotate: 360deg; } }

/* ── Motes: aether dust (Watchtower) / pink spores (Abyssal) ─────────────── */
.motes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.motes span {
  position: absolute; bottom: -10px; width: 4px; height: 4px;
  background: var(--mana); box-shadow: 0 0 8px var(--mana);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0; animation: mote 16s linear infinite;
}
[data-theme="abyssal"] .motes span { clip-path: none; border-radius: 50%; }
@keyframes mote {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .75; }
  90%  { opacity: .45; }
  100% { transform: translate(40px, -105vh); opacity: 0; }
}
.app { position: relative; z-index: 1; }

/* ── Theme change ─────────────────────────────────────────────────────────────
   js/theme.js wraps the switch in a view transition: the new theme spreads from the
   control you pressed as an expanding octagon (cut stone, not a circle). While it flips,
   nothing transitions, so the whole page restyles once. New 18+ entries rise into place. */
:root.switching *, :root.switching *::before, :root.switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.rise { animation: rise 500ms 500ms both var(--ease-stone); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Motion off: decoration is still there, just still ─────────────────────── */
html[data-motion="reduced"] .motes, html[data-motion="reduced"] .smoke { display: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .motes, html:not([data-motion="full"]) .smoke { display: none; } }

/* ── Smaller screens: only decor that cannot crowd the content ─────────────── */
@media (max-width: 1099px) {
  .side-site { display: none !important; }
  .circle--low { width: 520px; }
}
@media (max-width: 719px) {
  .top-site, .circle--high { display: none !important; }
  .bottom-site.moss, .bottom-site.ooze { scale: .85; }
}

/* ── Decor images (generated) ──────────────────────────────────────────────── */
.i-moss-h1 { background-image: url("../assets/decor/organism/moss-h1.svg"); }
.i-moss-h2 { background-image: url("../assets/decor/organism/moss-h2.svg"); }
.i-moss-m1 { background-image: url("../assets/decor/organism/moss-m1.svg"); }
.i-moss-m4 { background-image: url("../assets/decor/organism/moss-m4.svg"); }
.i-ooze-d1-0 { background-image: url("../assets/decor/organism/ooze-d1-0.svg"); }
.i-ooze-d1-1 { background-image: url("../assets/decor/organism/ooze-d1-1.svg"); }
.i-ooze-d1-2 { background-image: url("../assets/decor/organism/ooze-d1-2.svg"); }
.i-ooze-d1-pool { background-image: url("../assets/decor/organism/ooze-d1-pool.svg"); }
.i-ooze-d3-0 { background-image: url("../assets/decor/organism/ooze-d3-0.svg"); }
.i-ooze-d3-1 { background-image: url("../assets/decor/organism/ooze-d3-1.svg"); }
.i-ooze-d3-2 { background-image: url("../assets/decor/organism/ooze-d3-2.svg"); }
.i-ooze-d3-3 { background-image: url("../assets/decor/organism/ooze-d3-3.svg"); }
.i-ooze-d3-pool { background-image: url("../assets/decor/organism/ooze-d3-pool.svg"); }
.i-tentacle-b { background-image: url("../assets/decor/organism/tentacle-b.svg"); }
.i-tentacle-d { background-image: url("../assets/decor/organism/tentacle-d.svg"); }
.i-wisp-1 { background-image: url("../assets/decor/organism/wisp-1.svg"); }
.i-wisp-2 { background-image: url("../assets/decor/organism/wisp-2.svg"); }
.i-wisp-3 { background-image: url("../assets/decor/organism/wisp-3.svg"); }