/* ═══ Heading charge — the shared looks (pkg-fx-charge.js) ═══
   Comic lightning for any [data-sf-charge] heading: the login art column and the
   section pages' icon headings (partials/charge-head). Multicolor two-angle bolts
   with hard black outlines, starbursts where they land, shard sparks, a lock-on
   reticle, electricity crawling over the letters and the level-4 focus lines. The
   levels off the host's data-charge="1…4" / .is-strike / .is-discharge are styled
   by the login (pkg-auth.css) and the section-heading kit (pkg-fx-heads.css), which
   use the keyframes below. */
[data-sf-charge-host] { --p5-red: #e5191c; --p5-ink: #0a0a0a; }
main:has([data-sf-charge]) { overflow-x: clip; } /* the bolts / focus lines never cause a sideways scrollbar */
[data-sf-charge] { position: relative; }
[data-sf-charge-target] { cursor: crosshair; }

@keyframes sf-p5-jitter { 50% { translate: -2px 1px; } }
@keyframes sf-p5-shake { 0% { translate: -3px 2px; } 50% { translate: 3px -2px; } 100% { translate: -1px -1px; } }
@keyframes sf-p5-flash { 0% { opacity: .55; } 50% { opacity: .25; } 100% { opacity: 0; } }
@keyframes sf-p5-slash { 0% { opacity: 1; transform: skewY(-9deg) translateX(-140%); } 100% { opacity: 1; transform: skewY(-9deg) translateX(260%); } }
@keyframes sf-p5-quake { 0% { translate: 6px -4px; } 25% { translate: -5px 3px; } 50% { translate: 4px 2px; } 75% { translate: -2px -2px; } 100% { translate: 0 0; } }

/* Two-angle cartoon bolts: per-strike color, black ink and a white facet. */
.sf-charge-bolts { position: absolute; left: -60px; top: -90px; width: calc(100% + 120px); height: calc(100% + 150px); overflow: visible; pointer-events: none; z-index: 4; }
.p5-bolt .ink { fill: var(--p5-ink); stroke: var(--p5-ink); stroke-width: 5px; stroke-linejoin: miter; stroke-miterlimit: 3; }
.p5-bolt .body { fill: var(--bolt-color, var(--p5-red)); }
.p5-bolt .core { fill: #fff; }
/* the JS drives each bolt's life cycle (shoot → hot flash → hold → retract) */
.p5-bolt { animation: none; transform-box: fill-box; }
.p5-bolt.is-hot .body { fill: #fff; }
.p5-bolt.is-hot .core { fill: var(--bolt-color, var(--p5-red)); }
.p5-bolt.is-hot .ink { stroke-width: 8px; }
/* starburst where a bolt lands */
.p5-burst { transform-box: fill-box; transform-origin: center; animation: sf-p5-burst .28s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.p5-burst .ink { fill: var(--p5-ink); }
.p5-burst .body { fill: var(--bolt-color, var(--p5-red)); }
.p5-burst .core { fill: #fff; }
@keyframes sf-p5-burst { 0% { scale: .2; rotate: -30deg; opacity: 1; } 55% { scale: 1.12; rotate: 8deg; opacity: 1; } 100% { scale: .9; rotate: 18deg; opacity: 0; } }
/* shard sparks */
.p5-shard { position: absolute; z-index: 5; width: 8px; height: 11px; background: var(--c); outline: 0; clip-path: polygon(50% 0, 100% 100%, 0 72%); pointer-events: none; filter: drop-shadow(2px 2px 0 #0a0a0a); animation: sf-p5-shard .32s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes sf-p5-shard { from { translate: 0 0; rotate: 0deg; opacity: 1; } to { translate: var(--dx) var(--dy); rotate: var(--rot); opacity: 0; scale: .4; } }
/* lock-on reticle before a big strike */
.p5-reticle .spin { animation: sf-p5-reticle .19s cubic-bezier(.2, .9, .3, 1) forwards; transform-box: fill-box; transform-origin: center; }
.p5-reticle { filter: drop-shadow(3px 3px 0 #0a0a0a); }
.p5-reticle polygon { fill: #0a0a0a88; stroke: var(--bolt-color, #fff); stroke-width: 4px; }
.p5-reticle path { fill: none; stroke: var(--bolt-color, #fff); stroke-width: 4px; stroke-linecap: square; }
@keyframes sf-p5-reticle { from { scale: 2.4; rotate: -90deg; opacity: 0; } 60% { opacity: 1; } to { scale: 1; rotate: 45deg; opacity: 1; } }
/* electricity crawling over the letters */
.p5-crackle polyline { fill: none; stroke-linejoin: miter; stroke-linecap: square; }
.p5-crackle .ink { stroke: var(--p5-ink); stroke-width: 5px; }
.p5-crackle .core { stroke: var(--bolt-color, #fff); stroke-width: 2px; }

/* focus lines around the heading at level 4 — a canvas pkg-fx-charge.js redraws every ~90 ms
   (flicker in place, never spin; the old white conic stripes turned, owner: "ไม่สวย").
   They punch in with a short zoom and drop out fast when the pointer leaves. */
.sf-charge-speed { position: absolute; z-index: -1; pointer-events: none; translate: -50% -50%; opacity: 0; scale: 1.18; transition: opacity .12s ease-in, scale .12s ease-in; }
[data-sf-charge-host][data-charge="4"] .sf-charge-speed { opacity: 1; scale: 1; transition: opacity .16s ease-out, scale .26s cubic-bezier(.2, .9, .3, 1); }

@media (prefers-reduced-motion: reduce) { .sf-charge-bolts, .p5-shard, .sf-charge-speed { display: none; } }
.effects-off .sf-charge-bolts, .effects-off .p5-shard, .effects-off .sf-charge-speed { display: none; }