/* CouchWand background textures. Pure CSS (data: SVG used as mask only; CSP allows img-src data:).
   Theme: follows the site (html[data-theme]) or prefers-color-scheme; force a section with .theme-light / .theme-dark. */
:root, .theme-light {
  --tex-base: #f6f1fd;
  --tex-mark: #4b2596;
  --tex-alpha: .17;
  --tex-glow1: rgba(220, 188, 244, .38);
  --tex-glow2: rgba(220, 188, 244, .85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tex-base: #3a1468; --tex-mark: #dcbcf4; --tex-alpha: .15;
    --tex-glow1: rgba(75, 37, 150, .55); --tex-glow2: rgba(42, 15, 77, .95);
  }
}
:root[data-theme="dark"], .theme-dark {
  --tex-base: #3a1468; --tex-mark: #dcbcf4; --tex-alpha: .15;
  --tex-glow1: rgba(75, 37, 150, .55); --tex-glow2: rgba(42, 15, 77, .95);
}
/* Section backgrounds: content sits above the texture marks. */
.sec-tex { position: relative; }
.sec-tex > * { position: relative; z-index: 1; }
.page-tex { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.tex-01, .tex-02, .tex-03, .tex-04, .tex-05, .tex-06, .tex-07, .tex-08, .tex-09, .tex-10, .tex-11, .tex-12 {
  background-color: var(--tex-base);
  background-image:
    radial-gradient(ellipse 85% 65% at var(--g1, 12% 0%), var(--tex-glow1), transparent 70%),
    radial-gradient(ellipse 75% 65% at var(--g2, 92% 100%), var(--tex-glow2), transparent 70%);
  overflow: hidden;
  isolation: isolate;
}
.tex-01::before, .tex-02::before, .tex-03::before, .tex-04::before, .tex-05::before,
.tex-05::after, .tex-06::before, .tex-07::before, .tex-08::before, .tex-09::before,
.tex-10::before, .tex-11::before, .tex-12::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tex-mark);
  opacity: calc(var(--tex-alpha) * var(--k, 1));
}

/* 01 Beacon Rings: radiating signal rings from two corners (repeating radial gradients) */
.tex-01 { --g1: 100% 0%; --g2: 0% 100%; }
.tex-01::before {
  --k: 1.25;
  background:
    repeating-radial-gradient(circle at 96% -6%, var(--tex-mark) 0 1px, transparent 1px 30px),
    repeating-radial-gradient(circle at 4% 106%, var(--tex-mark) 0 1px, transparent 1px 42px);
  -webkit-mask-image:
    radial-gradient(circle 48vmax at 96% -6%, #000, transparent),
    radial-gradient(circle 48vmax at 4% 106%, #000, transparent);
  mask-image:
    radial-gradient(circle 48vmax at 96% -6%, #000, transparent),
    radial-gradient(circle 48vmax at 4% 106%, #000, transparent);
}

/* 02 Bitstream: scattered hand-drawn 0 and 1 glyphs in runs */
.tex-02 { --g1: 80% 0%; --g2: 10% 100%; }
.tex-02::before {
  --k: 1.5;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cellipse id='o' rx='2.4' ry='3.8' fill='none' stroke='black' stroke-width='.9'/%3E%3Cpath id='i' d='M-1.8 -2.2 L.6 -4 V4' fill='none' stroke='black' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23i' x='79' y='14'/%3E%3Cuse href='%23i' x='89' y='14'/%3E%3Cuse href='%23o' x='99' y='14'/%3E%3Cuse href='%23o' x='109' y='14'/%3E%3Cuse href='%23i' x='119' y='14'/%3E%3Cuse href='%23o' x='26' y='38'/%3E%3Cuse href='%23o' x='36' y='38'/%3E%3Cuse href='%23i' x='46' y='38'/%3E%3Cuse href='%23i' x='56' y='38'/%3E%3Cuse href='%23o' x='17' y='62'/%3E%3Cuse href='%23o' x='27' y='62'/%3E%3Cuse href='%23o' x='83' y='86'/%3E%3Cuse href='%23o' x='93' y='86'/%3E%3Cuse href='%23i' x='103' y='86'/%3E%3Cuse href='%23i' x='113' y='86'/%3E%3Cuse href='%23o' x='123' y='86'/%3E%3Cuse href='%23o' x='78' y='110'/%3E%3Cuse href='%23i' x='88' y='110'/%3E%3Cuse href='%23i' x='98' y='110'/%3E%3Cuse href='%23o' x='108' y='110'/%3E%3Cuse href='%23i' x='118' y='110'/%3E%3Cuse href='%23i' x='21' y='134'/%3E%3Cuse href='%23i' x='31' y='134'/%3E%3Cuse href='%23o' x='41' y='134'/%3E%3Cuse href='%23o' x='51' y='134'/%3E%3Cuse href='%23o' x='61' y='134'/%3E%3Cuse href='%23i' x='56' y='158'/%3E%3Cuse href='%23i' x='66' y='158'/%3E%3Cuse href='%23o' x='76' y='158'/%3E%3Cuse href='%23o' x='86' y='158'/%3E%3Cuse href='%23i' x='96' y='158'/%3E%3Cuse href='%23i' x='9' y='182'/%3E%3Cuse href='%23o' x='19' y='182'/%3E%3Cuse href='%23o' x='29' y='182'/%3E%3Cuse href='%23o' x='39' y='182'/%3E%3C/g%3E%3Cg opacity='.4'%3E%3Cuse href='%23o' x='129' y='14'/%3E%3Cuse href='%23o' x='139' y='14'/%3E%3Cuse href='%23i' x='149' y='14'/%3E%3Cuse href='%23o' x='66' y='38'/%3E%3Cuse href='%23o' x='76' y='38'/%3E%3Cuse href='%23o' x='86' y='38'/%3E%3Cuse href='%23o' x='37' y='62'/%3E%3Cuse href='%23i' x='47' y='62'/%3E%3Cuse href='%23i' x='57' y='62'/%3E%3Cuse href='%23o' x='133' y='86'/%3E%3Cuse href='%23i' x='143' y='86'/%3E%3Cuse href='%23i' x='153' y='86'/%3E%3Cuse href='%23o' x='128' y='110'/%3E%3Cuse href='%23o' x='138' y='110'/%3E%3Cuse href='%23o' x='148' y='110'/%3E%3Cuse href='%23o' x='71' y='134'/%3E%3Cuse href='%23o' x='81' y='134'/%3E%3Cuse href='%23o' x='91' y='134'/%3E%3Cuse href='%23i' x='106' y='158'/%3E%3Cuse href='%23o' x='116' y='158'/%3E%3Cuse href='%23i' x='126' y='158'/%3E%3Cuse href='%23o' x='49' y='182'/%3E%3Cuse href='%23o' x='59' y='182'/%3E%3Cuse href='%23o' x='69' y='182'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cellipse id='o' rx='2.4' ry='3.8' fill='none' stroke='black' stroke-width='.9'/%3E%3Cpath id='i' d='M-1.8 -2.2 L.6 -4 V4' fill='none' stroke='black' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23i' x='79' y='14'/%3E%3Cuse href='%23i' x='89' y='14'/%3E%3Cuse href='%23o' x='99' y='14'/%3E%3Cuse href='%23o' x='109' y='14'/%3E%3Cuse href='%23i' x='119' y='14'/%3E%3Cuse href='%23o' x='26' y='38'/%3E%3Cuse href='%23o' x='36' y='38'/%3E%3Cuse href='%23i' x='46' y='38'/%3E%3Cuse href='%23i' x='56' y='38'/%3E%3Cuse href='%23o' x='17' y='62'/%3E%3Cuse href='%23o' x='27' y='62'/%3E%3Cuse href='%23o' x='83' y='86'/%3E%3Cuse href='%23o' x='93' y='86'/%3E%3Cuse href='%23i' x='103' y='86'/%3E%3Cuse href='%23i' x='113' y='86'/%3E%3Cuse href='%23o' x='123' y='86'/%3E%3Cuse href='%23o' x='78' y='110'/%3E%3Cuse href='%23i' x='88' y='110'/%3E%3Cuse href='%23i' x='98' y='110'/%3E%3Cuse href='%23o' x='108' y='110'/%3E%3Cuse href='%23i' x='118' y='110'/%3E%3Cuse href='%23i' x='21' y='134'/%3E%3Cuse href='%23i' x='31' y='134'/%3E%3Cuse href='%23o' x='41' y='134'/%3E%3Cuse href='%23o' x='51' y='134'/%3E%3Cuse href='%23o' x='61' y='134'/%3E%3Cuse href='%23i' x='56' y='158'/%3E%3Cuse href='%23i' x='66' y='158'/%3E%3Cuse href='%23o' x='76' y='158'/%3E%3Cuse href='%23o' x='86' y='158'/%3E%3Cuse href='%23i' x='96' y='158'/%3E%3Cuse href='%23i' x='9' y='182'/%3E%3Cuse href='%23o' x='19' y='182'/%3E%3Cuse href='%23o' x='29' y='182'/%3E%3Cuse href='%23o' x='39' y='182'/%3E%3C/g%3E%3Cg opacity='.4'%3E%3Cuse href='%23o' x='129' y='14'/%3E%3Cuse href='%23o' x='139' y='14'/%3E%3Cuse href='%23i' x='149' y='14'/%3E%3Cuse href='%23o' x='66' y='38'/%3E%3Cuse href='%23o' x='76' y='38'/%3E%3Cuse href='%23o' x='86' y='38'/%3E%3Cuse href='%23o' x='37' y='62'/%3E%3Cuse href='%23i' x='47' y='62'/%3E%3Cuse href='%23i' x='57' y='62'/%3E%3Cuse href='%23o' x='133' y='86'/%3E%3Cuse href='%23i' x='143' y='86'/%3E%3Cuse href='%23i' x='153' y='86'/%3E%3Cuse href='%23o' x='128' y='110'/%3E%3Cuse href='%23o' x='138' y='110'/%3E%3Cuse href='%23o' x='148' y='110'/%3E%3Cuse href='%23o' x='71' y='134'/%3E%3Cuse href='%23o' x='81' y='134'/%3E%3Cuse href='%23o' x='91' y='134'/%3E%3Cuse href='%23i' x='106' y='158'/%3E%3Cuse href='%23o' x='116' y='158'/%3E%3Cuse href='%23i' x='126' y='158'/%3E%3Cuse href='%23o' x='49' y='182'/%3E%3Cuse href='%23o' x='59' y='182'/%3E%3Cuse href='%23o' x='69' y='182'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
}

/* 03 Trace Board: PCB traces with 45 degree bends, vias and a chip footprint */
.tex-03::before {
  --k: 1.3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cg fill='none' stroke='black' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 30H50L66 46H120L136 30H200'/%3E%3Cpath d='M0 100H70L90 80H160L180 100H200'/%3E%3Cpath d='M0 160H40L60 140H100L120 160H200'/%3E%3Cpath d='M120 46V80'/%3E%3Cpath d='M190 100V160'/%3E%3Cpath d='M20 58V72 M26 58V72 M32 58V72'/%3E%3Cpath d='M136 118H172V136H136Z'/%3E%3Cpath d='M142 112V118M150 112V118M158 112V118M166 112V118M142 136V142M150 136V142M158 136V142M166 136V142'/%3E%3C/g%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='120' cy='46' r='2.6'/%3E%3Ccircle cx='120' cy='80' r='2.6'/%3E%3Ccircle cx='190' cy='100' r='2.6'/%3E%3Ccircle cx='190' cy='160' r='2.6'/%3E%3Ccircle cx='50' cy='30' r='2.6'/%3E%3Ccircle cx='100' cy='140' r='2.6'/%3E%3C/g%3E%3Ccircle cx='90' cy='80' r='1.4'/%3E%3Ccircle cx='154' cy='127' r='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cg fill='none' stroke='black' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 30H50L66 46H120L136 30H200'/%3E%3Cpath d='M0 100H70L90 80H160L180 100H200'/%3E%3Cpath d='M0 160H40L60 140H100L120 160H200'/%3E%3Cpath d='M120 46V80'/%3E%3Cpath d='M190 100V160'/%3E%3Cpath d='M20 58V72 M26 58V72 M32 58V72'/%3E%3Cpath d='M136 118H172V136H136Z'/%3E%3Cpath d='M142 112V118M150 112V118M158 112V118M166 112V118M142 136V142M150 136V142M158 136V142M166 136V142'/%3E%3C/g%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='120' cy='46' r='2.6'/%3E%3Ccircle cx='120' cy='80' r='2.6'/%3E%3Ccircle cx='190' cy='100' r='2.6'/%3E%3Ccircle cx='190' cy='160' r='2.6'/%3E%3Ccircle cx='50' cy='30' r='2.6'/%3E%3Ccircle cx='100' cy='140' r='2.6'/%3E%3C/g%3E%3Ccircle cx='90' cy='80' r='1.4'/%3E%3Ccircle cx='154' cy='127' r='1.6'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
}

/* 04 Sigil Lattice: flower-of-life overlapping circles (arcane geometry) */
.tex-04 { --g1: 50% 0%; --g2: 50% 100%; }
.tex-04::before {
  --k: 1.4;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 69' width='40' height='69'%3E%3Cg fill='none' stroke='black' stroke-width='.7'%3E%3Ccircle cx='-20' cy='-34.5' r='40'/%3E%3Ccircle cx='20' cy='-34.5' r='40'/%3E%3Ccircle cx='60' cy='-34.5' r='40'/%3E%3Ccircle cx='-40' cy='0.0' r='40'/%3E%3Ccircle cx='0' cy='0.0' r='40'/%3E%3Ccircle cx='40' cy='0.0' r='40'/%3E%3Ccircle cx='80' cy='0.0' r='40'/%3E%3Ccircle cx='-20' cy='34.5' r='40'/%3E%3Ccircle cx='20' cy='34.5' r='40'/%3E%3Ccircle cx='60' cy='34.5' r='40'/%3E%3Ccircle cx='-40' cy='69.0' r='40'/%3E%3Ccircle cx='0' cy='69.0' r='40'/%3E%3Ccircle cx='40' cy='69.0' r='40'/%3E%3Ccircle cx='80' cy='69.0' r='40'/%3E%3Ccircle cx='-20' cy='103.5' r='40'/%3E%3Ccircle cx='20' cy='103.5' r='40'/%3E%3Ccircle cx='60' cy='103.5' r='40'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 69' width='40' height='69'%3E%3Cg fill='none' stroke='black' stroke-width='.7'%3E%3Ccircle cx='-20' cy='-34.5' r='40'/%3E%3Ccircle cx='20' cy='-34.5' r='40'/%3E%3Ccircle cx='60' cy='-34.5' r='40'/%3E%3Ccircle cx='-40' cy='0.0' r='40'/%3E%3Ccircle cx='0' cy='0.0' r='40'/%3E%3Ccircle cx='40' cy='0.0' r='40'/%3E%3Ccircle cx='80' cy='0.0' r='40'/%3E%3Ccircle cx='-20' cy='34.5' r='40'/%3E%3Ccircle cx='20' cy='34.5' r='40'/%3E%3Ccircle cx='60' cy='34.5' r='40'/%3E%3Ccircle cx='-40' cy='69.0' r='40'/%3E%3Ccircle cx='0' cy='69.0' r='40'/%3E%3Ccircle cx='40' cy='69.0' r='40'/%3E%3Ccircle cx='80' cy='69.0' r='40'/%3E%3Ccircle cx='-20' cy='103.5' r='40'/%3E%3Ccircle cx='20' cy='103.5' r='40'/%3E%3Ccircle cx='60' cy='103.5' r='40'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 40px 69px;
  mask-size: 40px 69px;
}

/* 05 Stardust: four-point sparkles at two scales plus fine dust */
.tex-05 { --g1: 90% 10%; --g2: 10% 90%; }
.tex-05::before {
  --k: 1.7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cdefs%3E%3Cpath id='s' d='M0 -10Q1.2 -1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2 -10 0Q-1.2 -1.2 0 -10Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(243 285) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(34 188) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(155 330) scale(1)'/%3E%3Cuse href='%23s' transform='translate(281 168) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(347 294) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(292 49) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(366 26) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(129 151) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(353 117) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(130 236) scale(0.35)'/%3E%3Cuse href='%23s' transform='translate(30 301) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(40 88) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(368 361) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(74 369) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(124 52) scale(1)'/%3E%3Cg opacity='.6'%3E%3Ccircle cx='73' cy='309' r='1.3'/%3E%3Ccircle cx='206' cy='369' r='1'/%3E%3Ccircle cx='17' cy='68' r='1'/%3E%3Ccircle cx='248' cy='76' r='1.3'/%3E%3Ccircle cx='76' cy='285' r='1'/%3E%3Ccircle cx='386' cy='70' r='0.7'/%3E%3Ccircle cx='193' cy='219' r='1'/%3E%3Ccircle cx='187' cy='154' r='1.3'/%3E%3Ccircle cx='142' cy='375' r='1'/%3E%3Ccircle cx='218' cy='380' r='1.3'/%3E%3Ccircle cx='244' cy='43' r='1.3'/%3E%3Ccircle cx='205' cy='375' r='1'/%3E%3Ccircle cx='378' cy='324' r='1'/%3E%3Ccircle cx='165' cy='225' r='1.3'/%3E%3Ccircle cx='237' cy='225' r='0.7'/%3E%3Ccircle cx='382' cy='242' r='1'/%3E%3Ccircle cx='325' cy='263' r='1'/%3E%3Ccircle cx='48' cy='226' r='1.3'/%3E%3Ccircle cx='215' cy='132' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cdefs%3E%3Cpath id='s' d='M0 -10Q1.2 -1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2 -10 0Q-1.2 -1.2 0 -10Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(243 285) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(34 188) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(155 330) scale(1)'/%3E%3Cuse href='%23s' transform='translate(281 168) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(347 294) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(292 49) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(366 26) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(129 151) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(353 117) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(130 236) scale(0.35)'/%3E%3Cuse href='%23s' transform='translate(30 301) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(40 88) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(368 361) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(74 369) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(124 52) scale(1)'/%3E%3Cg opacity='.6'%3E%3Ccircle cx='73' cy='309' r='1.3'/%3E%3Ccircle cx='206' cy='369' r='1'/%3E%3Ccircle cx='17' cy='68' r='1'/%3E%3Ccircle cx='248' cy='76' r='1.3'/%3E%3Ccircle cx='76' cy='285' r='1'/%3E%3Ccircle cx='386' cy='70' r='0.7'/%3E%3Ccircle cx='193' cy='219' r='1'/%3E%3Ccircle cx='187' cy='154' r='1.3'/%3E%3Ccircle cx='142' cy='375' r='1'/%3E%3Ccircle cx='218' cy='380' r='1.3'/%3E%3Ccircle cx='244' cy='43' r='1.3'/%3E%3Ccircle cx='205' cy='375' r='1'/%3E%3Ccircle cx='378' cy='324' r='1'/%3E%3Ccircle cx='165' cy='225' r='1.3'/%3E%3Ccircle cx='237' cy='225' r='0.7'/%3E%3Ccircle cx='382' cy='242' r='1'/%3E%3Ccircle cx='325' cy='263' r='1'/%3E%3Ccircle cx='48' cy='226' r='1.3'/%3E%3Ccircle cx='215' cy='132' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 400px 400px;
  mask-size: 400px 400px;
}
.tex-05::after {
  --k: 1.3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cdefs%3E%3Cpath id='s' d='M0 -10Q1.2 -1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2 -10 0Q-1.2 -1.2 0 -10Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(243 285) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(34 188) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(155 330) scale(1)'/%3E%3Cuse href='%23s' transform='translate(281 168) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(347 294) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(292 49) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(366 26) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(129 151) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(353 117) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(130 236) scale(0.35)'/%3E%3Cuse href='%23s' transform='translate(30 301) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(40 88) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(368 361) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(74 369) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(124 52) scale(1)'/%3E%3Cg opacity='.6'%3E%3Ccircle cx='73' cy='309' r='1.3'/%3E%3Ccircle cx='206' cy='369' r='1'/%3E%3Ccircle cx='17' cy='68' r='1'/%3E%3Ccircle cx='248' cy='76' r='1.3'/%3E%3Ccircle cx='76' cy='285' r='1'/%3E%3Ccircle cx='386' cy='70' r='0.7'/%3E%3Ccircle cx='193' cy='219' r='1'/%3E%3Ccircle cx='187' cy='154' r='1.3'/%3E%3Ccircle cx='142' cy='375' r='1'/%3E%3Ccircle cx='218' cy='380' r='1.3'/%3E%3Ccircle cx='244' cy='43' r='1.3'/%3E%3Ccircle cx='205' cy='375' r='1'/%3E%3Ccircle cx='378' cy='324' r='1'/%3E%3Ccircle cx='165' cy='225' r='1.3'/%3E%3Ccircle cx='237' cy='225' r='0.7'/%3E%3Ccircle cx='382' cy='242' r='1'/%3E%3Ccircle cx='325' cy='263' r='1'/%3E%3Ccircle cx='48' cy='226' r='1.3'/%3E%3Ccircle cx='215' cy='132' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cdefs%3E%3Cpath id='s' d='M0 -10Q1.2 -1.2 10 0Q1.2 1.2 0 10Q-1.2 1.2 -10 0Q-1.2 -1.2 0 -10Z'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(243 285) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(34 188) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(155 330) scale(1)'/%3E%3Cuse href='%23s' transform='translate(281 168) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(347 294) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(292 49) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(366 26) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(129 151) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(353 117) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(130 236) scale(0.35)'/%3E%3Cuse href='%23s' transform='translate(30 301) scale(0.7)'/%3E%3Cuse href='%23s' transform='translate(40 88) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(368 361) scale(1.5)'/%3E%3Cuse href='%23s' transform='translate(74 369) scale(0.5)'/%3E%3Cuse href='%23s' transform='translate(124 52) scale(1)'/%3E%3Cg opacity='.6'%3E%3Ccircle cx='73' cy='309' r='1.3'/%3E%3Ccircle cx='206' cy='369' r='1'/%3E%3Ccircle cx='17' cy='68' r='1'/%3E%3Ccircle cx='248' cy='76' r='1.3'/%3E%3Ccircle cx='76' cy='285' r='1'/%3E%3Ccircle cx='386' cy='70' r='0.7'/%3E%3Ccircle cx='193' cy='219' r='1'/%3E%3Ccircle cx='187' cy='154' r='1.3'/%3E%3Ccircle cx='142' cy='375' r='1'/%3E%3Ccircle cx='218' cy='380' r='1.3'/%3E%3Ccircle cx='244' cy='43' r='1.3'/%3E%3Ccircle cx='205' cy='375' r='1'/%3E%3Ccircle cx='378' cy='324' r='1'/%3E%3Ccircle cx='165' cy='225' r='1.3'/%3E%3Ccircle cx='237' cy='225' r='0.7'/%3E%3Ccircle cx='382' cy='242' r='1'/%3E%3Ccircle cx='325' cy='263' r='1'/%3E%3Ccircle cx='48' cy='226' r='1.3'/%3E%3Ccircle cx='215' cy='132' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 260px 260px;
  mask-size: 260px 260px;
  -webkit-mask-position: 90px 130px;
  mask-position: 90px 130px;
}

/* 06 Spell Trails: tilted wand-stroke waves, dotted and dashed, with stars */
.tex-06 { --g1: 0% 50%; --g2: 100% 50%; }
.tex-06::before {
  --k: 1.5;
  inset: -35%;
  transform: rotate(-14deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' width='400' height='240'%3E%3Cdefs%3E%3Cpath id='w' d='M0 60C100 0 100 120 200 60S300 120 400 60' pathLength='420' fill='none'/%3E%3Cpath id='s' d='M0 -9Q1 -1 9 0Q1 1 0 9Q-1 1 -9 0Q-1 -1 0 -9Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='black' stroke-linecap='round'%3E%3Cuse href='%23w' y='10' stroke-width='.9'/%3E%3Cuse href='%23w' y='95' stroke-width='2.2' stroke-dasharray='0 6'/%3E%3Cuse href='%23w' y='170' stroke-width='1.3' stroke-dasharray='18 6 1 6'/%3E%3Cuse href='%23w' y='45' stroke-width='1.2' stroke-dasharray='0 10' opacity='.7'/%3E%3C/g%3E%3Cuse href='%23s' transform='translate(300 110) scale(.9)'/%3E%3Cuse href='%23s' transform='translate(105 40) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(30 150) scale(.45)'/%3E%3Cuse href='%23s' transform='translate(250 235) scale(.55)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' width='400' height='240'%3E%3Cdefs%3E%3Cpath id='w' d='M0 60C100 0 100 120 200 60S300 120 400 60' pathLength='420' fill='none'/%3E%3Cpath id='s' d='M0 -9Q1 -1 9 0Q1 1 0 9Q-1 1 -9 0Q-1 -1 0 -9Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='black' stroke-linecap='round'%3E%3Cuse href='%23w' y='10' stroke-width='.9'/%3E%3Cuse href='%23w' y='95' stroke-width='2.2' stroke-dasharray='0 6'/%3E%3Cuse href='%23w' y='170' stroke-width='1.3' stroke-dasharray='18 6 1 6'/%3E%3Cuse href='%23w' y='45' stroke-width='1.2' stroke-dasharray='0 10' opacity='.7'/%3E%3C/g%3E%3Cuse href='%23s' transform='translate(300 110) scale(.9)'/%3E%3Cuse href='%23s' transform='translate(105 40) scale(.6)'/%3E%3Cuse href='%23s' transform='translate(30 150) scale(.45)'/%3E%3Cuse href='%23s' transform='translate(250 235) scale(.55)'/%3E%3C/svg%3E");
  -webkit-mask-size: 400px 240px;
  mask-size: 400px 240px;
}

/* 07 Pointer Field: cursors, click ripples, d-pads and button clusters */
.tex-07::before {
  --k: 1.4;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='300' height='300'%3E%3Cdefs%3E%3Cpath id='c' d='M0 0V17L4.5 13L7.5 20L10 19L7 12H13Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath id='d' d='M-3 -9H3V-3H9V3H3V9H-3V3H-9V-3H-3Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cg id='r' fill='none' stroke='black' stroke-width='.9'%3E%3Ccircle r='4'/%3E%3Ccircle r='10' opacity='.6'/%3E%3Ccircle r='18' opacity='.3'/%3E%3C/g%3E%3Cg id='b' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cy='-8' r='3.2'/%3E%3Ccircle cy='8' r='3.2'/%3E%3Ccircle cx='-8' r='3.2'/%3E%3Ccircle cx='8' r='3.2'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c' transform='translate(30 40) rotate(-10) scale(1)'/%3E%3Cuse href='%23c' transform='translate(140 30) rotate(12) scale(0.8)'/%3E%3Cuse href='%23c' transform='translate(230 90) rotate(-25) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(70 150) rotate(8) scale(0.9)'/%3E%3Cuse href='%23r' transform='translate(190 170) rotate(0) scale(1)'/%3E%3Cuse href='%23d' transform='translate(270 250) rotate(0) scale(1)'/%3E%3Cuse href='%23c' transform='translate(120 240) rotate(18) scale(1)'/%3E%3Cuse href='%23b' transform='translate(40 260) rotate(0) scale(1)'/%3E%3Cuse href='%23c' transform='translate(250 190) rotate(-5) scale(0.7)'/%3E%3Cuse href='%23r' transform='translate(60 95) rotate(0) scale(0.6)'/%3E%3Cuse href='%23d' transform='translate(210 25) rotate(0) scale(0.7)'/%3E%3Cuse href='%23c' transform='translate(285 20) rotate(25) scale(0.6)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='300' height='300'%3E%3Cdefs%3E%3Cpath id='c' d='M0 0V17L4.5 13L7.5 20L10 19L7 12H13Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath id='d' d='M-3 -9H3V-3H9V3H3V9H-3V3H-9V-3H-3Z' fill='none' stroke='black' stroke-width='1' stroke-linejoin='round'/%3E%3Cg id='r' fill='none' stroke='black' stroke-width='.9'%3E%3Ccircle r='4'/%3E%3Ccircle r='10' opacity='.6'/%3E%3Ccircle r='18' opacity='.3'/%3E%3C/g%3E%3Cg id='b' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cy='-8' r='3.2'/%3E%3Ccircle cy='8' r='3.2'/%3E%3Ccircle cx='-8' r='3.2'/%3E%3Ccircle cx='8' r='3.2'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c' transform='translate(30 40) rotate(-10) scale(1)'/%3E%3Cuse href='%23c' transform='translate(140 30) rotate(12) scale(0.8)'/%3E%3Cuse href='%23c' transform='translate(230 90) rotate(-25) scale(1.15)'/%3E%3Cuse href='%23c' transform='translate(70 150) rotate(8) scale(0.9)'/%3E%3Cuse href='%23r' transform='translate(190 170) rotate(0) scale(1)'/%3E%3Cuse href='%23d' transform='translate(270 250) rotate(0) scale(1)'/%3E%3Cuse href='%23c' transform='translate(120 240) rotate(18) scale(1)'/%3E%3Cuse href='%23b' transform='translate(40 260) rotate(0) scale(1)'/%3E%3Cuse href='%23c' transform='translate(250 190) rotate(-5) scale(0.7)'/%3E%3Cuse href='%23r' transform='translate(60 95) rotate(0) scale(0.6)'/%3E%3Cuse href='%23d' transform='translate(210 25) rotate(0) scale(0.7)'/%3E%3Cuse href='%23c' transform='translate(285 20) rotate(25) scale(0.6)'/%3E%3C/svg%3E");
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
}

/* 08 Keycap Rows: staggered keyboard rows, two keys lit */
.tex-08 { --g1: 50% 0%; --g2: 50% 100%; }
.tex-08::before {
  --k: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' width='240' height='120'%3E%3Cg fill='none' stroke='black' stroke-width='.9'%3E%3Crect x='1' y='2' width='18' height='16' rx='3'/%3E%3Crect x='21' y='2' width='18' height='16' rx='3'/%3E%3Crect x='41' y='2' width='18' height='16' rx='3'/%3E%3Crect x='61' y='2' width='18' height='16' rx='3'/%3E%3Crect x='81' y='2' width='18' height='16' rx='3'/%3E%3Crect x='101' y='2' width='18' height='16' rx='3'/%3E%3Crect x='121' y='2' width='18' height='16' rx='3'/%3E%3Crect x='141' y='2' width='18' height='16' rx='3'/%3E%3Crect x='161' y='2' width='18' height='16' rx='3'/%3E%3Crect x='181' y='2' width='18' height='16' rx='3'/%3E%3Crect x='201' y='2' width='18' height='16' rx='3'/%3E%3Crect x='221' y='2' width='18' height='16' rx='3'/%3E%3Crect x='11' y='22' width='18' height='16' rx='3'/%3E%3Crect x='31' y='22' width='18' height='16' rx='3'/%3E%3Crect x='51' y='22' width='18' height='16' rx='3'/%3E%3Crect x='71' y='22' width='18' height='16' rx='3'/%3E%3Crect x='91' y='22' width='18' height='16' rx='3'/%3E%3Crect x='111' y='22' width='18' height='16' rx='3'/%3E%3Crect x='131' y='22' width='18' height='16' rx='3'/%3E%3Crect x='151' y='22' width='18' height='16' rx='3'/%3E%3Crect x='171' y='22' width='18' height='16' rx='3'/%3E%3Crect x='191' y='22' width='18' height='16' rx='3'/%3E%3Crect x='211' y='22' width='18' height='16' rx='3'/%3E%3Crect x='231' y='22' width='18' height='16' rx='3'/%3E%3Crect x='-9' y='22' width='18' height='16' rx='3'/%3E%3Crect x='1' y='42' width='58' height='16' rx='3'/%3E%3Crect x='61' y='42' width='18' height='16' rx='3'/%3E%3Crect x='81' y='42' width='18' height='16' rx='3'/%3E%3Crect x='101' y='42' width='18' height='16' rx='3'/%3E%3Crect x='121' y='42' width='18' height='16' rx='3'/%3E%3Crect x='141' y='42' width='18' height='16' rx='3'/%3E%3Crect x='161' y='42' width='18' height='16' rx='3'/%3E%3Crect x='181' y='42' width='18' height='16' rx='3'/%3E%3Crect x='201' y='42' width='18' height='16' rx='3'/%3E%3Crect x='221' y='42' width='18' height='16' rx='3'/%3E%3Crect x='1' y='62' width='18' height='16' rx='3'/%3E%3Crect x='21' y='62' width='18' height='16' rx='3'/%3E%3Crect x='41' y='62' width='18' height='16' rx='3'/%3E%3Crect x='61' y='62' width='118' height='16' rx='3'/%3E%3Crect x='181' y='62' width='18' height='16' rx='3'/%3E%3Crect x='201' y='62' width='18' height='16' rx='3'/%3E%3Crect x='221' y='62' width='18' height='16' rx='3'/%3E%3Crect x='11' y='82' width='18' height='16' rx='3'/%3E%3Crect x='31' y='82' width='18' height='16' rx='3'/%3E%3Crect x='51' y='82' width='18' height='16' rx='3'/%3E%3Crect x='71' y='82' width='18' height='16' rx='3'/%3E%3Crect x='91' y='82' width='18' height='16' rx='3'/%3E%3Crect x='111' y='82' width='18' height='16' rx='3'/%3E%3Crect x='131' y='82' width='18' height='16' rx='3'/%3E%3Crect x='151' y='82' width='18' height='16' rx='3'/%3E%3Crect x='171' y='82' width='18' height='16' rx='3'/%3E%3Crect x='191' y='82' width='18' height='16' rx='3'/%3E%3Crect x='211' y='82' width='18' height='16' rx='3'/%3E%3Crect x='231' y='82' width='18' height='16' rx='3'/%3E%3Crect x='-9' y='82' width='18' height='16' rx='3'/%3E%3Crect x='1' y='102' width='38' height='16' rx='3'/%3E%3Crect x='41' y='102' width='18' height='16' rx='3'/%3E%3Crect x='61' y='102' width='18' height='16' rx='3'/%3E%3Crect x='81' y='102' width='18' height='16' rx='3'/%3E%3Crect x='101' y='102' width='18' height='16' rx='3'/%3E%3Crect x='121' y='102' width='18' height='16' rx='3'/%3E%3Crect x='141' y='102' width='18' height='16' rx='3'/%3E%3Crect x='161' y='102' width='18' height='16' rx='3'/%3E%3Crect x='181' y='102' width='18' height='16' rx='3'/%3E%3Crect x='201' y='102' width='18' height='16' rx='3'/%3E%3Crect x='221' y='102' width='18' height='16' rx='3'/%3E%3C/g%3E%3Crect x='51' y='42' width='18' height='16' rx='3' opacity='.5'/%3E%3Crect x='171' y='102' width='18' height='16' rx='3' opacity='.5'/%3E%3Cpath d='M120 30V36M117 33H123' stroke='black' stroke-width='.9' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' width='240' height='120'%3E%3Cg fill='none' stroke='black' stroke-width='.9'%3E%3Crect x='1' y='2' width='18' height='16' rx='3'/%3E%3Crect x='21' y='2' width='18' height='16' rx='3'/%3E%3Crect x='41' y='2' width='18' height='16' rx='3'/%3E%3Crect x='61' y='2' width='18' height='16' rx='3'/%3E%3Crect x='81' y='2' width='18' height='16' rx='3'/%3E%3Crect x='101' y='2' width='18' height='16' rx='3'/%3E%3Crect x='121' y='2' width='18' height='16' rx='3'/%3E%3Crect x='141' y='2' width='18' height='16' rx='3'/%3E%3Crect x='161' y='2' width='18' height='16' rx='3'/%3E%3Crect x='181' y='2' width='18' height='16' rx='3'/%3E%3Crect x='201' y='2' width='18' height='16' rx='3'/%3E%3Crect x='221' y='2' width='18' height='16' rx='3'/%3E%3Crect x='11' y='22' width='18' height='16' rx='3'/%3E%3Crect x='31' y='22' width='18' height='16' rx='3'/%3E%3Crect x='51' y='22' width='18' height='16' rx='3'/%3E%3Crect x='71' y='22' width='18' height='16' rx='3'/%3E%3Crect x='91' y='22' width='18' height='16' rx='3'/%3E%3Crect x='111' y='22' width='18' height='16' rx='3'/%3E%3Crect x='131' y='22' width='18' height='16' rx='3'/%3E%3Crect x='151' y='22' width='18' height='16' rx='3'/%3E%3Crect x='171' y='22' width='18' height='16' rx='3'/%3E%3Crect x='191' y='22' width='18' height='16' rx='3'/%3E%3Crect x='211' y='22' width='18' height='16' rx='3'/%3E%3Crect x='231' y='22' width='18' height='16' rx='3'/%3E%3Crect x='-9' y='22' width='18' height='16' rx='3'/%3E%3Crect x='1' y='42' width='58' height='16' rx='3'/%3E%3Crect x='61' y='42' width='18' height='16' rx='3'/%3E%3Crect x='81' y='42' width='18' height='16' rx='3'/%3E%3Crect x='101' y='42' width='18' height='16' rx='3'/%3E%3Crect x='121' y='42' width='18' height='16' rx='3'/%3E%3Crect x='141' y='42' width='18' height='16' rx='3'/%3E%3Crect x='161' y='42' width='18' height='16' rx='3'/%3E%3Crect x='181' y='42' width='18' height='16' rx='3'/%3E%3Crect x='201' y='42' width='18' height='16' rx='3'/%3E%3Crect x='221' y='42' width='18' height='16' rx='3'/%3E%3Crect x='1' y='62' width='18' height='16' rx='3'/%3E%3Crect x='21' y='62' width='18' height='16' rx='3'/%3E%3Crect x='41' y='62' width='18' height='16' rx='3'/%3E%3Crect x='61' y='62' width='118' height='16' rx='3'/%3E%3Crect x='181' y='62' width='18' height='16' rx='3'/%3E%3Crect x='201' y='62' width='18' height='16' rx='3'/%3E%3Crect x='221' y='62' width='18' height='16' rx='3'/%3E%3Crect x='11' y='82' width='18' height='16' rx='3'/%3E%3Crect x='31' y='82' width='18' height='16' rx='3'/%3E%3Crect x='51' y='82' width='18' height='16' rx='3'/%3E%3Crect x='71' y='82' width='18' height='16' rx='3'/%3E%3Crect x='91' y='82' width='18' height='16' rx='3'/%3E%3Crect x='111' y='82' width='18' height='16' rx='3'/%3E%3Crect x='131' y='82' width='18' height='16' rx='3'/%3E%3Crect x='151' y='82' width='18' height='16' rx='3'/%3E%3Crect x='171' y='82' width='18' height='16' rx='3'/%3E%3Crect x='191' y='82' width='18' height='16' rx='3'/%3E%3Crect x='211' y='82' width='18' height='16' rx='3'/%3E%3Crect x='231' y='82' width='18' height='16' rx='3'/%3E%3Crect x='-9' y='82' width='18' height='16' rx='3'/%3E%3Crect x='1' y='102' width='38' height='16' rx='3'/%3E%3Crect x='41' y='102' width='18' height='16' rx='3'/%3E%3Crect x='61' y='102' width='18' height='16' rx='3'/%3E%3Crect x='81' y='102' width='18' height='16' rx='3'/%3E%3Crect x='101' y='102' width='18' height='16' rx='3'/%3E%3Crect x='121' y='102' width='18' height='16' rx='3'/%3E%3Crect x='141' y='102' width='18' height='16' rx='3'/%3E%3Crect x='161' y='102' width='18' height='16' rx='3'/%3E%3Crect x='181' y='102' width='18' height='16' rx='3'/%3E%3Crect x='201' y='102' width='18' height='16' rx='3'/%3E%3Crect x='221' y='102' width='18' height='16' rx='3'/%3E%3C/g%3E%3Crect x='51' y='42' width='18' height='16' rx='3' opacity='.5'/%3E%3Crect x='171' y='102' width='18' height='16' rx='3' opacity='.5'/%3E%3Cpath d='M120 30V36M117 33H123' stroke='black' stroke-width='.9' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 300px 150px;
  mask-size: 300px 150px;
}

/* 09 Packet Rain: vertical dashed data lines that slowly fall */
.tex-09 { --g1: 50% 0%; --g2: 50% 100%; }
.tex-09::before {
  --k: 1.3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' width='240' height='240'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M14 0V240' stroke-width='1.2' stroke-dasharray='40 20 6 14' stroke-dashoffset='0'/%3E%3Cpath d='M34 0V240' stroke-width='1.6' stroke-dasharray='2 6' stroke-dashoffset='0'/%3E%3Cpath d='M52 0V240' stroke-width='1.0' stroke-dasharray='10 50' stroke-dashoffset='20'/%3E%3Cpath d='M77 0V240' stroke-width='1.4' stroke-dasharray='100 20' stroke-dashoffset='30'/%3E%3Cpath d='M98 0V240' stroke-width='1.2' stroke-dasharray='3 9 3 9 24 12' stroke-dashoffset='0'/%3E%3Cpath d='M121 0V240' stroke-width='1.0' stroke-dasharray='18 30' stroke-dashoffset='10'/%3E%3Cpath d='M140 0V240' stroke-width='1.8' stroke-dasharray='1 11' stroke-dashoffset='0'/%3E%3Cpath d='M163 0V240' stroke-width='1.0' stroke-dasharray='40 20 6 14' stroke-dashoffset='45'/%3E%3Cpath d='M184 0V240' stroke-width='1.6' stroke-dasharray='10 50' stroke-dashoffset='0'/%3E%3Cpath d='M206 0V240' stroke-width='1.0' stroke-dasharray='100 20' stroke-dashoffset='70'/%3E%3Cpath d='M224 0V240' stroke-width='1.4' stroke-dasharray='18 30' stroke-dashoffset='30'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' width='240' height='240'%3E%3Cg fill='none' stroke='black'%3E%3Cpath d='M14 0V240' stroke-width='1.2' stroke-dasharray='40 20 6 14' stroke-dashoffset='0'/%3E%3Cpath d='M34 0V240' stroke-width='1.6' stroke-dasharray='2 6' stroke-dashoffset='0'/%3E%3Cpath d='M52 0V240' stroke-width='1.0' stroke-dasharray='10 50' stroke-dashoffset='20'/%3E%3Cpath d='M77 0V240' stroke-width='1.4' stroke-dasharray='100 20' stroke-dashoffset='30'/%3E%3Cpath d='M98 0V240' stroke-width='1.2' stroke-dasharray='3 9 3 9 24 12' stroke-dashoffset='0'/%3E%3Cpath d='M121 0V240' stroke-width='1.0' stroke-dasharray='18 30' stroke-dashoffset='10'/%3E%3Cpath d='M140 0V240' stroke-width='1.8' stroke-dasharray='1 11' stroke-dashoffset='0'/%3E%3Cpath d='M163 0V240' stroke-width='1.0' stroke-dasharray='40 20 6 14' stroke-dashoffset='45'/%3E%3Cpath d='M184 0V240' stroke-width='1.6' stroke-dasharray='10 50' stroke-dashoffset='0'/%3E%3Cpath d='M206 0V240' stroke-width='1.0' stroke-dasharray='100 20' stroke-dashoffset='70'/%3E%3Cpath d='M224 0V240' stroke-width='1.4' stroke-dasharray='18 30' stroke-dashoffset='30'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 240px 240px;
  mask-size: 240px 240px;
}

/* 10 Arcane Haze: fractal-noise mist plus fine stardust grain (feTurbulence masks) */
.tex-10 { --g1: 30% 20%; --g2: 75% 85%; }
.tex-10::before {
  --k: .8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .006' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.5 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  9 0 0 0 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .006' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.5 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  9 0 0 0 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 512px 512px, 160px 160px;
  mask-size: 512px 512px, 160px 160px;
}

/* Motion: only 01, 05 and 09, and only when the user has no reduced-motion preference */
/* 11 Swipe Paths: faint gesture diagrams (one-finger arc, two-finger slide, pinch), for the trackpad section */
.tex-11 { --g1: 10% 0%; --g2: 90% 100%; }
.tex-11::before {
  --k: 0.9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 380' width='560' height='380'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M40 300C110 250 150 170 250 160'/%3E%3Ccircle cx='40' cy='300' r='8'/%3E%3Cpath d='M330 70c40 30 110 34 170 6' stroke-dasharray='2 7'/%3E%3Ccircle cx='330' cy='70' r='8'/%3E%3Cpath d='M360 250c30-40 30-90 0-130'/%3E%3Cpath d='M384 250c30-40 30-90 0-130'/%3E%3Ccircle cx='360' cy='250' r='7'/%3E%3Ccircle cx='384' cy='250' r='7'/%3E%3Cpath d='M120 60l-34 34M150 90l34-34' /%3E%3Ccircle cx='135' cy='75' r='26' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='250' cy='160' r='5'/%3E%3Ccircle cx='500' cy='76' r='5'/%3E%3Ccircle cx='360' cy='120' r='4.5'/%3E%3Ccircle cx='384' cy='120' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 380' width='560' height='380'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M40 300C110 250 150 170 250 160'/%3E%3Ccircle cx='40' cy='300' r='8'/%3E%3Cpath d='M330 70c40 30 110 34 170 6' stroke-dasharray='2 7'/%3E%3Ccircle cx='330' cy='70' r='8'/%3E%3Cpath d='M360 250c30-40 30-90 0-130'/%3E%3Cpath d='M384 250c30-40 30-90 0-130'/%3E%3Ccircle cx='360' cy='250' r='7'/%3E%3Ccircle cx='384' cy='250' r='7'/%3E%3Cpath d='M120 60l-34 34M150 90l34-34' /%3E%3Ccircle cx='135' cy='75' r='26' stroke-dasharray='3 6'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='250' cy='160' r='5'/%3E%3Ccircle cx='500' cy='76' r='5'/%3E%3Ccircle cx='360' cy='120' r='4.5'/%3E%3Ccircle cx='384' cy='120' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 560px 380px;
  mask-size: 560px 380px;
}

/* 12 Studio Light: a soft overhead spotlight on a fine dot grid that fades out, like a product-photo backdrop */
.tex-12 { --g1: 50% -10%; --g2: 50% 120%; }
.tex-12::before {
  --k: 1.6;
  background: radial-gradient(circle, var(--tex-mark) 0 1px, transparent 1.3px) 0 0 / 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

@media (prefers-reduced-motion: no-preference) {
  .tex-01::before { animation: tex-breathe 48s ease-in-out infinite alternate; }
  .tex-05::before { animation: tex-twinkle 9s ease-in-out infinite alternate; }
  .tex-05::after  { animation: tex-twinkle 13s ease-in-out -5s infinite alternate; }
  .tex-09::before { animation: tex-fall 70s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .tex-01::before, .tex-05::before, .tex-05::after, .tex-09::before { animation: none; }
}
@keyframes tex-breathe { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes tex-twinkle { from { opacity: calc(var(--tex-alpha) * var(--k, 1) * .35); } to { opacity: calc(var(--tex-alpha) * var(--k, 1)); } }
@keyframes tex-fall {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 0 240px; mask-position: 0 240px; }
}