/* Inline presentation only. The original word remains selectable and in flow. */
[data-text-effect] {
    --fx-color: #ffb16f;
    --fx-power: 1;
    --fx-duration: var(--shedletsky-animation-duration-factor, 1);
    --fx-glyph-visibility: hidden;
    --fx-letter-fill: currentColor;
    --fx-chaos-orbit: none;
    --fx-chaos-reach: none;
    --fx-chaos-ink: none;
    position: relative;
    display: inline-block;
    isolation: isolate;
    white-space: nowrap;
    color: var(--fx-color);
    touch-action: auto;
}
[data-text-effect].text-effect-interactive {
    text-decoration: underline dotted color-mix(in srgb, var(--fx-color) 45%, transparent);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
div[data-text-effect] { display: block; white-space: normal; }
[data-text-effect="electric"] { --fx-color: #82e5ff; }
[data-text-effect="haunted"] { --fx-color: #c3aeff; }
[data-text-effect="sparkle"] { --fx-color: #f4d790; }
.text-effect-interactive:focus-visible { outline: 2px solid var(--fx-color); outline-offset: 5px; border-radius: 2px; }
.text-effect-label { position: relative; z-index: 2; }
.text-effect-particles { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 1; opacity: 0; }
.text-effect-particle { position: absolute; left: var(--fx-x); bottom: .08em; pointer-events: none; animation-play-state: paused !important; }
.text-effect-active > .text-effect-particles { opacity: 1; }
.text-effect-active > .text-effect-particles > .text-effect-particle { animation-play-state: running !important; }
[data-text-effect="fire"] > .text-effect-particles::before {
    content: "";
    position: absolute;
    inset: auto -.22em .07em;
    height: 1em;
    background: radial-gradient(ellipse, #ffad385e 0%, #ff580e48 44%, transparent 76%);
    filter: blur(.14em);
}
[data-text-effect="fire"] > .text-effect-particles > .text-effect-particle {
    --fx-flame-height: min(calc(1.65em * var(--fx-lick) * var(--fx-power)), 19vh);
    width: calc(.45em * var(--fx-power));
    height: var(--fx-flame-height);
    background: linear-gradient(0deg, #ffeb90 0%, #ffc238 28%, #ff781a 48%, #f93612 74%, #f72f0a00 100%);
    clip-path: polygon(4% 100%, 0 78%, 16% 62%, 43% 49%, 58% 32%, 51% 12%, 63% 0, 81% 23%, 78% 43%, 92% 56%, 100% 74%, 92% 100%);
    transform-origin: 50% 100%;
    animation: text-effect-flame calc(var(--fx-period) * .85 * var(--fx-duration)) calc(var(--fx-delay) * var(--fx-duration)) infinite ease-in-out;
}
[data-text-effect="fire"] > .text-effect-particles > .text-effect-ember {
    bottom: .35em;
    width: calc(.095em * var(--fx-lick));
    height: calc(.15em * var(--fx-lick));
    background: #fff3a0;
    clip-path: none;
    border-radius: 50%;
    box-shadow: 0 0 .17em .035em #ff6e10;
    animation: text-effect-ember calc(1.6 * var(--fx-period) * var(--fx-duration)) calc(var(--fx-delay) * var(--fx-duration)) infinite ease-out;
}
[data-text-effect="fire"].text-effect-active > .text-effect-label {
    color: #fff3c3;
    text-shadow: 0 0 .08em #fff6c5, 0 -.11em .22em #ff991f, 0 -.24em .45em #ff4b15, 0 -.5em .75em #ee3617a6;
}
@keyframes text-effect-flame {
    0% { opacity: .22; transform: translate(0, .05em) skewX(-8deg) scale(.9, .25); }
    24% { opacity: 1; transform: translateX(calc(var(--fx-drift) * .65)) skewX(12deg) scale(1.15, .92); }
    55% { opacity: .92; transform: translate(calc(var(--fx-drift) * 1.25), -.22em) skewX(-12deg) scale(.78, 1.12); }
    100% { opacity: 0; transform: translate(calc(var(--fx-drift) * 2.6), calc(-.8 * var(--fx-flame-height))) skewX(8deg) scale(.17, .38); }
}
@keyframes text-effect-ember {
    0% { opacity: 0; transform: translate(0, -.1em) scale(.6); }
    22% { opacity: 1; }
    55% { opacity: .86; transform: translate(calc(-2.8 * var(--fx-drift)), calc(-.85 * var(--fx-flame-height))) scale(.9); }
    100% { opacity: 0; transform: translate(calc(4.4 * var(--fx-drift)), calc(-1.8 * var(--fx-flame-height))) scale(.2); }
}
[data-text-effect="electric"] > .text-effect-particles > .text-effect-particle {
    width: .45em; height: .6em; bottom: .1em;
    background: #bdf7ff;
    clip-path: polygon(66% 0, 15% 49%, 51% 48%, 30% 100%, 95% 36%, 60% 40%);
    animation: text-effect-current calc(var(--fx-period) * 1.7 * var(--fx-duration)) calc(var(--fx-delay) * var(--fx-duration)) infinite ease-in-out;
}
[data-text-effect="electric"].text-effect-active > .text-effect-label {
    color: #e1fcff;
    text-shadow: 0 0 .12em #87f8ff, 0 0 .36em #21dbff, 0 0 .6em #366cff;
}
[data-text-effect="electric"] > .text-effect-particles { z-index: 3; }
.text-effect-bolt {
    position: absolute;
    top: 50%;
    inset-inline-start: -.22em;
    width: calc(100% + .44em);
    height: calc(.97em * var(--fx-power));
    transform: translateY(-50%);
    fill: none;
    stroke: #faffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 .11em #7cf7ff) drop-shadow(0 0 .22em #47b7ff);
    opacity: 0;
}
.text-effect-bolt-spine { stroke-width: 1.7; }
.text-effect-bolt-forks { stroke-width: .8; stroke: #c6fbff; }
.text-effect-active > .text-effect-particles > .text-effect-bolt {
    animation: text-effect-bolt-race calc(1.55s * var(--fx-duration)) infinite;
}
@keyframes text-effect-bolt-race {
    0%, 5% { opacity: 0; clip-path: inset(-60% 100% -60% 0); }
    13% { opacity: .95; clip-path: inset(-60% 55% -60% 0); }
    23% { opacity: 1; clip-path: inset(-60% 0 -60% 20%); }
    35% { opacity: .5; clip-path: inset(-60% 0 -60% 75%); }
    48%, 100% { opacity: 0; clip-path: inset(-60% 0 -60% 100%); }
}
@keyframes text-effect-current {
    0%, 100% { opacity: 0; transform: translateY(.1em) scale(.25); }
    30% { opacity: calc(.7 * var(--fx-power)); transform: translateY(calc(-.55em * var(--fx-power))) scale(.8); }
    65% { opacity: 0; transform: translateY(calc(-1.1em * var(--fx-power))) scale(.4) rotate(18deg); }
}
[data-text-effect="haunted"] > .text-effect-particles > .text-effect-particle {
    width: .95em; height: .52em;
    background: radial-gradient(ellipse, #dbbcffbd 0%, #864deb6e 36%, #9675ff00 72%);
    filter: blur(.075em);
    animation: text-effect-wisp calc(var(--fx-period) * 3 * var(--fx-duration)) calc(var(--fx-delay) * var(--fx-duration)) infinite ease-in-out;
}
[data-text-effect="haunted"].text-effect-active > .text-effect-label {
    color: #ece0ff;
    animation: text-effect-haunt calc(2.8s * var(--fx-duration)) infinite ease-in-out;
}
@keyframes text-effect-haunt {
    0%, 100% { text-shadow: 0 0 .16em #ac80ffbb, -.05em 0 .04em #a884ff99, .05em 0 .06em #87e3f077; }
    29% { text-shadow: 0 0 .34em #b88dffcc, -.26em -.32em .055em #b483ffb0, .36em .16em .12em #7bf4e080; }
    62% { text-shadow: 0 0 .24em #ac80ff99, .34em -.65em .09em #b483ff25, -.29em -.24em .06em #8bdfef90; }
}
@keyframes text-effect-wisp {
    0%, 100% { opacity: 0; transform: translate(-.1em, 0) scale(.5); }
    40% { opacity: .8; }
    85% { opacity: 0; transform: translate(calc(var(--fx-drift) * 4), calc(-1.38em * var(--fx-power))) scale(1.9); }
}
[data-text-effect="sparkle"] > .text-effect-particles > .text-effect-particle {
    width: calc(.37em * var(--fx-power)); height: calc(.37em * var(--fx-power)); bottom: .35em;
    background: linear-gradient(135deg, #fff 12%, #ffd66e 58%, #fe8fdd);
    clip-path: polygon(50% 0, 60% 35%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: text-effect-star calc(var(--fx-period) * 1.8 * var(--fx-duration)) calc(var(--fx-delay) * var(--fx-duration)) infinite ease-in-out;
}
[data-text-effect="sparkle"].text-effect-active > .text-effect-label {
    background-image: linear-gradient(102deg, #ffd266 4%, #ff8edb 22%, #c0a0ff 36%, #fff8cf 45%, white 50%, #92f9ff 57%, #ffcc68 74%, #fb90d4 89%, #ffd882 100%);
    background-size: 275% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 .24em #f2bb6477);
    animation: text-effect-foil calc(2.5s * var(--fx-duration)) infinite linear;
}
[data-text-effect="sparkle"] > .text-effect-particles { z-index: 3; }
[data-text-effect="sparkle"].text-effect-active > .text-effect-particles::after {
    content: "";
    position: absolute;
    top: 41%;
    width: calc(1.05em * var(--fx-power));
    height: calc(1.05em * var(--fx-power));
    background: radial-gradient(circle, white 0 18%, #fff1b7 44%, #f5aee7 100%);
    clip-path: polygon(50% 0, 57% 39%, 75% 25%, 61% 43%, 100% 50%, 61% 57%, 75% 75%, 57% 61%, 50% 100%, 43% 61%, 25% 75%, 39% 57%, 0 50%, 39% 43%, 25% 25%, 43% 39%);
    animation: text-effect-shine-sweep calc(2.5s * var(--fx-duration)) infinite;
}
@keyframes text-effect-foil {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}
@keyframes text-effect-shine-sweep {
    0%, 12% { left: 0; opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
    27% { left: 19%; opacity: .86; transform: translate(-50%, -55%) scale(.68) rotate(16deg); }
    48% { left: 52%; opacity: 1; transform: translate(-50%, -60%) scale(1.2) rotate(37deg); }
    72% { left: 96%; opacity: .66; transform: translate(-50%, -50%) scale(.67) rotate(60deg); }
    82%, 100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(72deg); }
}
@keyframes text-effect-star {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0) rotate(0); }
    40% { opacity: 1; transform: translateY(calc(-.65em * var(--fx-power))) scale(1) rotate(45deg); }
    80% { opacity: 0; transform: translateY(calc(-1em * var(--fx-power))) scale(.15) rotate(100deg); }
}
/* The original letters remain the layout, reading and selection surface.
   Only the decorative layer changes case, color and position. */
[data-text-effect="crazy"], [data-text-effect="chaos"] {
    --fx-color: currentColor;
    color: inherit;
    white-space: normal;
}
span[data-text-effect="crazy"], span[data-text-effect="chaos"] { display: inline; }
.text-effect-letter { position: relative; -webkit-text-fill-color: var(--fx-letter-fill); }
.text-effect-glyph {
    position: absolute;
    inset: 0 auto auto 0;
    visibility: var(--fx-glyph-visibility);
    pointer-events: none;
    user-select: none;
    white-space: pre;
    line-height: normal;
    text-decoration: none;
    -webkit-text-fill-color: currentColor;
    animation: var(--fx-chaos-orbit);
}
.text-effect-glyph[data-glyph]::before, .text-effect-flight::before { content: attr(data-glyph); }
.text-effect-active:is([data-text-effect="crazy"], [data-text-effect="chaos"]) {
    --fx-glyph-visibility: visible;
    --fx-letter-fill: transparent;
}
.text-effect-flight {
    display: block;
    --fx-swirl-radius: min(calc(var(--fx-orbit) * var(--fx-power)), 9vw, 5.25rem);
    animation: var(--fx-chaos-reach);
}
.text-effect-flight::before { display: block; animation: var(--fx-chaos-ink); }
/* Keep angular travel on one easing curve. Changing color or scale must not
   reset the velocity of the orbit or the spin. */
.text-effect-active[data-text-effect="chaos"] {
    --fx-chaos-orbit: text-effect-chaos-orbit calc(7s * var(--fx-duration)) infinite cubic-bezier(.42, 0, .54, 1);
    --fx-chaos-reach: text-effect-chaos-reach calc(7s * var(--fx-duration)) infinite ease-in-out;
    --fx-chaos-ink: text-effect-chaos-tumble calc(7s * var(--fx-duration)) infinite cubic-bezier(.42, 0, .54, 1),
        text-effect-chaos-surge calc(7s * var(--fx-duration)) infinite ease-in-out,
        text-effect-chaos-color calc(7s * var(--fx-duration)) infinite linear;
}
@keyframes text-effect-chaos-orbit {
    0% { transform: rotate(var(--fx-launch-angle)); }
    37%, 100% { transform: rotate(calc(var(--fx-launch-angle) + 1.4turn * var(--fx-spin))); }
}
@keyframes text-effect-chaos-reach {
    0%, 37%, 100% { transform: translateX(0); }
    17% { transform: translateX(var(--fx-swirl-radius)); }
}
@keyframes text-effect-chaos-tumble {
    0% { transform: rotate(calc(-1 * var(--fx-launch-angle))); }
    37%, 100% { transform: rotate(calc(.6turn * var(--fx-spin) - var(--fx-launch-angle))); }
}
@keyframes text-effect-chaos-surge {
    0%, 37%, 100% { scale: 1; }
    10% { scale: var(--fx-surge); }
    19% { scale: calc(2.58 - var(--fx-surge)); }
    27% { scale: calc(.42 + .56 * var(--fx-surge)); }
}
@keyframes text-effect-chaos-color {
    0%, 37%, 100% { color: inherit; text-shadow: none; }
    9% { color: hsl(var(--fx-hue) 100% 68%); text-shadow: 0 0 .14em currentColor; }
    17% { color: hsl(calc(var(--fx-hue) + 128) 100% 65%); text-shadow: 0 0 .2em currentColor; }
    25% { color: hsl(calc(var(--fx-hue) + 249) 100% 73%); text-shadow: 0 0 .1em currentColor; }
}
[data-text-effect].text-effect-disabled { color: inherit; cursor: text; text-decoration: none; white-space: normal; }
span[data-text-effect].text-effect-disabled { display: inline; }
.text-effect-disabled > .text-effect-particles { display: none; }
[data-fx-intensity="low"] [data-text-effect] { --fx-power: .6; }
[data-fx-intensity="high"] [data-text-effect] { --fx-power: 1.55; }
/* Hidden effects must never keep a CSS animation running. */
[data-text-effect]:not(.text-effect-active) > .text-effect-label { animation: none; }