/* Reference pass: the first eight effects are intentionally different motion grammars. */

.stage-canvas,
.effect-preview {
  isolation: isolate;
  perspective: 900px;
}

.stage-word,
.preview-word {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.085em;
}

.effect-preview .preview-word span,
.stage-canvas .stage-word span {
  backface-visibility: hidden;
  transform-origin: center;
}

/* 01 — the reference uses a hard lime/white flash, then a brief impact hold. */
.effect--lightning {
  color: #efffc8;
  background:
    radial-gradient(circle at 51% 49%, rgba(197,255,61,.42), transparent 11%),
    radial-gradient(circle at 50% 52%, rgba(197,255,61,.14), transparent 42%),
    #080c0a;
}

.effect--lightning:before {
  inset: 0;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.88), rgba(197,255,61,.2) 9%, transparent 25%);
  opacity: 0;
  animation: ref-lightning-flash 3.2s infinite;
}

.effect--lightning:after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -22% 43% -22% 47%;
  width: 13%;
  height: 145%;
  background: #efffc8;
  clip-path: polygon(43% 0, 69% 0, 57% 34%, 90% 34%, 39% 70%, 53% 70%, 0 100%, 22% 58%, 0 58%);
  filter: drop-shadow(0 0 12px var(--lime));
  opacity: 0;
  transform: translate(-42px, -34px) rotate(11deg) scale(.5);
  animation: ref-lightning-bolt 3.2s infinite cubic-bezier(.2,.85,.25,1);
}

.effect--lightning .preview-word span,
.effect--lightning .stage-word span {
  opacity: 0;
  filter: blur(15px) brightness(2.3);
  animation: ref-lightning-text 3.2s infinite cubic-bezier(.2,.85,.25,1);
  animation-delay: calc(var(--i) * 42ms);
}

.effect--lightning .preview-flash {
  z-index: 3;
  width: 120%;
  height: 1px;
  left: -10%;
  top: 51%;
  background: #fff;
  box-shadow: 0 0 19px 5px var(--lime);
  transform: rotate(-18deg) scaleX(0);
  animation: ref-lightning-line 3.2s infinite;
}

/* 02 — a narrow red beam reveals the type and leaves an unmistakable split. */
.effect--laser {
  color: #fff4ef;
  background: linear-gradient(180deg, #080a0a 0 48%, #230d0d 49% 51%, #080a0a 52%);
}

.effect--laser:before {
  inset: 49.5% -10% auto;
  height: 1px;
  border: 0;
  background: rgba(255,98,89,.55);
  box-shadow: 0 0 18px 4px rgba(255,98,89,.35);
  opacity: 0;
  animation: ref-laser-slice 3.2s infinite;
}

.effect--laser:after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -35%;
  top: 49%;
  width: 34%;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 8px 2px #fff, 0 0 24px 7px var(--red);
  transform: rotate(-8deg);
  animation: ref-laser-beam 3.2s infinite cubic-bezier(.3,.7,.2,1);
}

.effect--laser .preview-word,
.effect--laser .stage-word {
  filter: drop-shadow(0 1px 0 rgba(255,98,89,.95));
}

.effect--laser .preview-word span,
.effect--laser .stage-word span {
  opacity: 0;
  transform: translateX(-18px) scaleX(.05) skewX(-9deg);
  transform-origin: left center;
  animation: ref-laser-letter 3.2s infinite cubic-bezier(.2,.8,.2,1);
  animation-delay: calc(var(--i) * 58ms);
}

.effect--laser .preview-laser {
  z-index: 4;
  left: -35%;
  top: 49%;
  width: 34%;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 8px 2px #fff, 0 0 24px 7px var(--red);
  transform: rotate(-8deg);
  animation: ref-laser-beam 3.2s infinite cubic-bezier(.3,.7,.2,1);
}

/* 03 — cream field, dark type, green extrusion and a coin-like horizontal turn. */
.effect--coin {
  color: #11170f;
  background: #f2eee2;
}

.effect--coin:before {
  inset: 50% auto auto 50%;
  width: 72%;
  height: 72%;
  border: 1px solid rgba(71,96,51,.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  box-shadow: 0 0 0 10px rgba(197,255,61,.08), 0 0 0 22px rgba(71,96,51,.05);
}

.effect--coin .preview-word span,
.effect--coin .stage-word span {
  opacity: 0;
  color: #1a2414;
  text-shadow: 7px 0 0 rgba(197,255,61,.92), 12px 0 0 rgba(84,118,48,.55);
  transform: rotateY(-92deg) translateY(-20px) scale(.82);
  animation: ref-coin-turn 3.2s infinite cubic-bezier(.18,.82,.2,1);
  animation-delay: calc(var(--i) * 74ms);
}

.effect--coin .preview-shadow {
  width: 48%;
  bottom: 25px;
  background: rgba(34,52,22,.36);
  animation: ref-coin-shadow 3.2s infinite;
}

/* 04 — the word holds for a beat, then its letters are thrown to four corners. */
.effect--explode {
  color: #f0ede1;
  background:
    radial-gradient(circle at 50% 50%, rgba(197,255,61,.2), transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(137,110,214,.13), transparent 33%),
    #0b0b10;
}

.effect--explode:before {
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 22px 8px rgba(197,255,61,.75);
  transform: translate(-50%, -50%) scale(.1);
  animation: ref-burst-core 3.2s infinite;
}

.effect--explode:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 8%;
  aspect-ratio: 1;
  border: 1px solid rgba(240,237,225,.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ref-burst-ring 3.2s infinite;
}

.effect--explode .preview-word span,
.effect--explode .stage-word span {
  opacity: 0;
  transform: translate(0, 0) rotate(0) scale(.72);
  animation: ref-explode-letter 3.2s infinite cubic-bezier(.15,.8,.25,1);
  animation-delay: calc(var(--i) * 28ms);
}

.effect--explode .preview-burst {
  z-index: 2;
  width: 4px;
  height: 4px;
  background: var(--lime);
  box-shadow: 22px -33px 0 #f0ede1, -36px 17px 0 var(--lime), 48px 21px 0 #a886ff, -24px -28px 0 #f0c7ff;
  animation: ref-burst-particles 3.2s infinite;
}

/* 05 — cream/green fragments lose opacity, blur and weight instead of simply fading. */
.effect--disintegrate {
  color: #eeeadd;
  background:
    radial-gradient(circle at 55% 42%, rgba(197,255,61,.13), transparent 26%),
    #0b1211;
}

.effect--disintegrate .preview-word span:nth-child(odd),
.effect--disintegrate .stage-word span:nth-child(odd) {
  color: var(--lime);
}

.effect--disintegrate:before {
  inset: 0;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(197,255,61,.18), transparent 30%);
  opacity: 0;
  animation: ref-dust-cloud 3.2s infinite;
}

.effect--disintegrate .preview-word span,
.effect--disintegrate .stage-word span {
  animation: ref-disintegrate-letter 3.2s infinite cubic-bezier(.25,.75,.4,1);
  animation-delay: calc(var(--i) * 62ms);
}

.effect--disintegrate .preview-particles {
  z-index: 2;
  width: 3px;
  height: 3px;
  background: var(--lime);
  box-shadow: 19px -40px 0 #ebeadc, -26px -26px 0 var(--lime), 43px 13px 0 #a8d876, -45px 26px 0 #e6ebd0, 34px 37px 0 #74a6d4;
  animation: ref-particle-drift 3.2s infinite;
}

/* 06 — the original card is an acid-lime field with black type and a visible ripple. */
.effect--heartbeat {
  color: #0b0e0d;
  background: var(--lime);
}

.effect--heartbeat:before {
  inset: 50% auto auto 50%;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(11,14,13,.23);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.65);
  animation: ref-heart-ring 1.8s infinite ease-out;
}

.effect--heartbeat:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 26%;
  aspect-ratio: 1;
  border: 1px solid rgba(11,14,13,.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.5);
  animation: ref-heart-ring 1.8s infinite .16s ease-out;
}

.effect--heartbeat .preview-word,
.effect--heartbeat .stage-word {
  z-index: 2;
  text-shadow: 3px 4px 0 rgba(11,14,13,.18);
}

.effect--heartbeat .preview-word span,
.effect--heartbeat .stage-word span {
  animation: ref-heart-text 1.8s infinite ease-in-out;
  animation-delay: calc(var(--i) * 20ms);
}

.effect--heartbeat .preview-heart {
  z-index: 1;
  width: 72%;
  height: 72%;
  border-color: rgba(11,14,13,.32);
  animation: ref-heart-ring 1.8s infinite ease-out;
}

.effect--heartbeat .stage-scanline {
  opacity: .08;
  mix-blend-mode: multiply;
}

/* 07 — cream field, rotating black/green type fragments and a central kaleidoscope frame. */
.effect--kaleido {
  color: #11170f;
  background: #f3efe3;
}

.effect--kaleido:before {
  inset: 50% auto auto 50%;
  width: 49%;
  aspect-ratio: 1;
  border: 1px solid rgba(20,31,17,.55);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: ref-kaleido-frame 4s infinite linear;
}

.effect--kaleido:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 19%;
  height: 1px;
  border: 0;
  background: var(--lime);
  box-shadow: -50px 0 0 rgba(17,23,15,.72), 50px 0 0 rgba(17,23,15,.72);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: ref-kaleido-cross 4s infinite linear;
}

.effect--kaleido .preview-word span,
.effect--kaleido .stage-word span {
  text-shadow: 20px 12px 0 rgba(197,255,61,.9), -20px -12px 0 rgba(17,23,15,.75);
  animation: ref-kaleido-text 4s infinite cubic-bezier(.45,.05,.55,.95);
  animation-delay: calc(var(--i) * 66ms);
}

.effect--kaleido .preview-kaleido {
  z-index: 1;
  width: 54%;
  height: 54%;
  border-color: rgba(17,23,15,.7);
  border-radius: 0;
  transform: rotate(45deg);
  animation: ref-kaleido-frame 4s infinite linear;
}

/* 08 — a single countdown glyph falls from above, compresses, then releases a shockwave. */
.effect--slam {
  color: #f2eee2;
  background: #0a0b0b;
}

.effect--slam:before {
  inset: 50% auto auto 50%;
  width: 12%;
  aspect-ratio: 1;
  border: 1px solid rgba(197,255,61,.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.15);
  opacity: 0;
  animation: ref-slam-ring 3.2s infinite;
}

.effect--slam:after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 19%;
  width: 64%;
  height: 1px;
  background: var(--lime);
  box-shadow: 0 0 18px 2px rgba(197,255,61,.5);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  animation: ref-slam-impact 3.2s infinite;
}

.effect--slam .preview-word,
.effect--slam .stage-word {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 0 rgba(197,255,61,.22);
}

.effect--slam .preview-word span,
.effect--slam .stage-word span {
  opacity: 0;
  transform: translateY(-180px) scale(1.45, 1.1);
  animation: ref-slam-letter 3.2s infinite cubic-bezier(.18,.9,.2,1);
  animation-delay: calc(var(--i) * 72ms);
}

.effect--slam .preview-impact {
  z-index: 2;
  bottom: 19%;
  width: 64%;
  height: 1px;
  background: var(--lime);
  box-shadow: 0 0 18px 2px rgba(197,255,61,.5);
  animation: ref-slam-impact 3.2s infinite;
}

/* Timing for the reference-style pass. */
@keyframes ref-lightning-text {
  0%, 6% { opacity: 0; filter: blur(15px) brightness(2.3); transform: translateY(-26px) scale(1.16); }
  9% { opacity: 1; filter: blur(0) brightness(1.8); transform: translateY(4px) scale(.98); }
  12% { opacity: .42; filter: blur(2px) brightness(1); transform: translateY(0) scale(1.02); }
  16%, 76% { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0) scale(1); }
  100% { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(.98); }
}

@keyframes ref-lightning-flash { 0%, 7% { opacity: 0; } 9% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes ref-lightning-bolt { 0%, 7% { opacity: 0; transform: translate(-42px, -34px) rotate(11deg) scale(.5); } 9% { opacity: 1; transform: translate(0, 0) rotate(11deg) scale(1); } 13%, 100% { opacity: 0; transform: translate(22px, 30px) rotate(11deg) scale(.9); } }
@keyframes ref-lightning-line { 0%, 7% { opacity: 0; transform: rotate(-18deg) scaleX(0); } 9% { opacity: 1; transform: rotate(-18deg) scaleX(1); } 13%, 100% { opacity: 0; transform: rotate(-18deg) scaleX(.25); } }

@keyframes ref-laser-letter { 0%, 12% { opacity: 0; transform: translateX(-18px) scaleX(.05) skewX(-9deg); } 22% { opacity: 1; transform: translateX(3px) scaleX(1.04) skewX(-2deg); } 27%, 66% { opacity: 1; transform: translateX(0) scaleX(1) skewX(0); } 72% { opacity: .72; transform: translateX(2px) scaleX(1.01) skewX(-4deg); } 100% { opacity: 0; transform: translateX(14px) scaleX(.96); } }
@keyframes ref-laser-beam { 0%, 10% { left: -35%; opacity: 0; } 15% { left: -22%; opacity: 1; } 31% { left: 88%; opacity: 1; } 35%, 100% { left: 108%; opacity: 0; } }
@keyframes ref-laser-slice { 0%, 14% { opacity: 0; } 18% { opacity: 1; } 34%, 100% { opacity: 0; } }

@keyframes ref-coin-turn { 0%, 8% { opacity: 0; transform: rotateY(-92deg) translateY(-20px) scale(.82); } 22% { opacity: 1; transform: rotateY(20deg) translateY(5px) scale(1.04); } 30%, 64% { opacity: 1; transform: rotateY(0) translateY(0) scale(1); } 74% { opacity: .85; transform: rotateY(82deg) translateY(-3px) scale(.98); } 100% { opacity: 0; transform: rotateY(96deg) translateY(14px) scale(.84); } }
@keyframes ref-coin-shadow { 0%, 12% { opacity: .1; transform: scaleX(.25); } 30%, 57% { opacity: .65; transform: scaleX(1); } 75%, 100% { opacity: 0; transform: scaleX(.4); } }

@keyframes ref-burst-core { 0%, 28% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 34% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
@keyframes ref-burst-ring { 0%, 29% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 35% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 67%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(6); } }
@keyframes ref-explode-letter { 0%, 20% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.72); } 30%, 42% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 70% { opacity: .78; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.8); } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.35), calc(var(--y) * 1.35)) rotate(calc(var(--r) * 1.6)) scale(.35); } }
@keyframes ref-burst-particles { 0%, 25% { opacity: 0; transform: scale(.2); } 34% { opacity: 1; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(2.6); } }

@keyframes ref-dust-cloud { 0%, 21% { opacity: 0; transform: scale(.55); } 45% { opacity: .65; transform: scale(1.05); } 77%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes ref-disintegrate-letter { 0%, 20% { opacity: 1; filter: blur(0); transform: translate(0, 0) rotate(0); } 48% { opacity: .82; filter: blur(.5px); transform: translate(calc(var(--x) * .25), calc(var(--y) * .25)) rotate(8deg); } 76% { opacity: .35; filter: blur(2px); transform: translate(var(--x), calc(var(--y) * 1.6)) rotate(28deg); } 100% { opacity: 0; filter: blur(7px); transform: translate(calc(var(--x) * 1.45), calc(var(--y) * 2.5)) rotate(52deg); } }
@keyframes ref-particle-drift { 0%, 18% { opacity: 0; transform: translate(0, 0) scale(.2); } 42% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(44px, -50px) scale(.2); } }

@keyframes ref-heart-text { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 26% { transform: scale(.98); } 42% { transform: scale(1.06); } 58% { transform: scale(1); } }
@keyframes ref-heart-ring { 0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.52); } 18% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }

@keyframes ref-kaleido-text { 0%, 100% { transform: rotate(0) translate(0, 0); } 28% { transform: rotate(90deg) translate(13px, -11px); } 56% { transform: rotate(180deg) translate(-11px, 13px); } 82% { transform: rotate(270deg) translate(10px, 8px); } }
@keyframes ref-kaleido-frame { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(.72); opacity: .25; } 50% { transform: translate(-50%, -50%) rotate(225deg) scale(1); opacity: .9; } 100% { transform: translate(-50%, -50%) rotate(405deg) scale(.72); opacity: .25; } }
@keyframes ref-kaleido-cross { 0% { transform: translate(-50%, -50%) rotate(45deg) scaleX(.5); } 50% { transform: translate(-50%, -50%) rotate(225deg) scaleX(1); } 100% { transform: translate(-50%, -50%) rotate(405deg) scaleX(.5); } }

@keyframes ref-slam-letter { 0%, 9% { opacity: 0; transform: translateY(-180px) scale(1.45, 1.1); } 23% { opacity: 1; transform: translateY(12px) scale(.88, 1.18); } 28% { opacity: 1; transform: translateY(-4px) scale(1.06, .94); } 34%, 72% { opacity: 1; transform: translateY(0) scale(1); } 78%, 100% { opacity: 0; transform: translateY(13px) scale(.98); } }
@keyframes ref-slam-ring { 0%, 26% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 30% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 58%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(5); } }
@keyframes ref-slam-impact { 0%, 24% { opacity: 0; transform: translateX(-50%) scaleX(0); } 29% { opacity: 1; transform: translateX(-50%) scaleX(1.15); } 48%, 100% { opacity: 0; transform: translateX(-50%) scaleX(.25); } }

@media (prefers-reduced-motion: reduce) {
  .effect--lightning:before,
  .effect--lightning:after,
  .effect--laser:before,
  .effect--laser:after,
  .effect--coin:before,
  .effect--explode:before,
  .effect--explode:after,
  .effect--disintegrate:before,
  .effect--heartbeat:before,
  .effect--heartbeat:after,
  .effect--kaleido:before,
  .effect--kaleido:after,
  .effect--slam:before,
  .effect--slam:after {
    animation: none !important;
  }
}

/* Machine-readable affordances stay visible without competing with the playground. */
.playground {
  padding-top: 72px;
}

.agent-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: .04em;
}

.agent-tools span {
  flex: 1 0 100%;
  color: var(--lime);
}

.agent-tools a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.agent-tools a:hover,
.text-button-download:hover {
  color: var(--lime);
}

.text-button-download {
  color: var(--ink);
}

.card-tools {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.card-tools .card-link {
  margin-top: 0;
}

/* Keep effect-card actions on one compact line beneath each description. */
.card-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  white-space: nowrap;
}

.card-tools .card-link {
  margin-top: 0;
}

@media (max-width: 620px) {
  .card-tools {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* Put the compact actions beside the effect name, with the description below. */
.card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
}

.card-copy h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.card-copy p {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
}

.card-copy .card-tools {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
}

@media (max-width: 620px) {
  .card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .card-copy .card-tools {
    margin-top: 0;
  }
}

.card-prompt {
  color: var(--muted);
}

.card-prompt:hover,
.card-prompt.is-copied {
  color: var(--lime);
}

.text-button.is-copied {
  color: var(--lime);
}

/* Effects 09–40: compact CSS primitives derived from the source reference. */
.effect--waveletters{background:linear-gradient(180deg,#101513,#17191b);color:#ff6259}.effect--waveletters .preview-word span,.effect--waveletters .stage-word span{animation:ref-waveletters 2.8s infinite ease-in-out;animation-delay:calc(var(--i) * 70ms)}
.effect--stopmotion{background:#ff6d55;color:#111}.effect--stopmotion .preview-word span,.effect--stopmotion .stage-word span{animation:ref-stopmotion 1.8s infinite steps(5,end);animation-delay:calc(var(--i) * 46ms)}
.effect--letterrain{background:linear-gradient(180deg,#f3f0e6,#ccd0c8);color:#171b17}.effect--letterrain .preview-word span,.effect--letterrain .stage-word span{animation:ref-letterrain 3.4s infinite cubic-bezier(.2,.75,.3,1);animation-delay:calc(var(--i) * 120ms)}
.effect--magnifier{background:#101513;color:#f1ede2}.effect--magnifier .preview-word span,.effect--magnifier .stage-word span{animation:ref-magnifier 3.2s infinite ease-in-out;animation-delay:calc(var(--i) * 30ms)}.effect--magnifier .preview-effect-detail,.effect--magnifier .stage-effect-detail{width:84px;height:84px;border:2px solid #ff6259;border-radius:50%;box-shadow:0 0 0 999px rgba(7,10,9,.15),0 0 18px rgba(255,98,89,.75);animation:ref-lens 3.2s infinite ease-in-out}
.effect--scramble{background:#101315;color:#ff7565}.effect--scramble .preview-word span,.effect--scramble .stage-word span{animation:ref-scramble 2.8s infinite steps(6,end);animation-delay:calc(var(--i) * 80ms)}
.effect--domino{background:#ff6d55;color:#171313}.effect--domino .preview-word span,.effect--domino .stage-word span{transform-origin:50% 100%;animation:ref-domino 3s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 90ms)}
.effect--gradient{background:linear-gradient(110deg,#f1ede2,#151817);color:#ff8c72}.effect--gradient .stage-word,.effect--gradient .preview-word{background:linear-gradient(100deg,#ff6259,#f1ede2,#ffba4b,#ff6259);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ref-gradient 3.6s infinite linear}.effect--gradient .preview-word span,.effect--gradient .stage-word span{animation:ref-gradient-letter 3.6s infinite ease-in-out;animation-delay:calc(var(--i) * 55ms)}
.effect--circletext{background:#151417;color:#ff8069}.effect--circletext .preview-word span,.effect--circletext .stage-word span{animation:ref-circletext 4s infinite ease-in-out;animation-delay:calc(var(--i) * 55ms)}.effect--circletext .preview-effect-detail,.effect--circletext .stage-effect-detail{width:105px;height:105px;border:1px dashed currentColor;border-radius:50%;animation:ref-ring-spin 4s infinite linear}
.effect--water{background:linear-gradient(#101513 0 55%,#1d2021 55%);color:#f1ede2}.effect--water .preview-word span,.effect--water .stage-word span{animation:ref-water 3.6s infinite ease-in-out;animation-delay:calc(var(--i) * 45ms)}.effect--water .preview-effect-detail,.effect--water .stage-effect-detail{left:15%;right:15%;top:55%;height:1px;background:rgba(244,240,230,.5);box-shadow:0 7px 0 rgba(244,240,230,.15);animation:ref-water-line 3.6s infinite ease-in-out}
.effect--bounce{background:#9a7af4;color:#111}.effect--bounce .preview-word span,.effect--bounce .stage-word span{animation:ref-bounce 2.4s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 85ms)}
.effect--flag{background:#f1ede2;color:#161918}.effect--flag .preview-word span,.effect--flag .stage-word span{animation:ref-flag 3s infinite ease-in-out;animation-delay:calc(var(--i) * 65ms);transform-origin:left center}
.effect--gravity{background:#171719;color:#f1ede2}.effect--gravity .preview-word span,.effect--gravity .stage-word span{animation:ref-gravity 3s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 80ms)}
.effect--magnet{background:#101315;color:#9b7cff}.effect--magnet .preview-word span,.effect--magnet .stage-word span{animation:ref-magnet 3s infinite cubic-bezier(.15,.8,.25,1);animation-delay:calc(var(--i) * 55ms)}
.effect--pulsegrid{background-color:#9b7cff;background-image:linear-gradient(rgba(10,14,13,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(10,14,13,.35) 1px,transparent 1px);background-size:22px 22px;color:#171719}.effect--pulsegrid .preview-word span,.effect--pulsegrid .stage-word span{animation:ref-gridpulse 2.2s infinite ease-in-out;animation-delay:calc((var(--i) + 1) * 80ms)}
.effect--weight{background:#f1ede2;color:#171719}.effect--weight .preview-word span,.effect--weight .stage-word span{animation:ref-weight 3.2s infinite ease-in-out;animation-delay:calc(var(--i) * 52ms)}
.effect--fan{background:#171719;color:#f1ede2}.effect--fan .preview-word span,.effect--fan .stage-word span{animation:ref-fan 3.6s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 70ms)}
.effect--karaoke{background:#101315;color:#8adcf8}.effect--karaoke .preview-word span,.effect--karaoke .stage-word span{animation:ref-karaoke 3.2s infinite linear;animation-delay:calc(var(--i) * 60ms)}.effect--karaoke .preview-effect-detail,.effect--karaoke .stage-effect-detail{width:12px;height:12px;border-radius:50%;background:#2dd4c7;box-shadow:0 0 18px #2dd4c7;animation:ref-karaoke-ball 3.2s infinite linear}
.effect--swing{background:#2dd4c7;color:#101315}.effect--swing .preview-word span,.effect--swing .stage-word span{animation:ref-swing 2.8s infinite ease-in-out;animation-delay:calc(var(--i) * 85ms);transform-origin:50% -120%}
.effect--pixel{background:#f1ede2;color:#171719}.effect--pixel .preview-word span,.effect--pixel .stage-word span{animation:ref-pixel 3.2s infinite steps(5,end);animation-delay:calc(var(--i) * 60ms)}
.effect--rotating{background:#101315;color:#2dd4c7}.effect--rotating .preview-word span,.effect--rotating .stage-word span{animation:ref-rotating 4s infinite linear;animation-delay:calc(var(--i) * 80ms)}
.effect--blurtrail{background:#101315;color:#2dd4c7}.effect--blurtrail .preview-word span,.effect--blurtrail .stage-word span{animation:ref-blurtrail 2.8s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 42ms)}
.effect--checker{background-color:#2dd4c7;background-image:linear-gradient(45deg,rgba(10,14,13,.22) 25%,transparent 25%,transparent 75%,rgba(10,14,13,.22) 75%),linear-gradient(45deg,rgba(10,14,13,.22) 25%,transparent 25%,transparent 75%,rgba(10,14,13,.22) 75%);background-position:0 0,11px 11px;background-size:22px 22px;color:#111}.effect--checker .preview-word span,.effect--checker .stage-word span{animation:ref-checker 2.8s infinite steps(2,end);animation-delay:calc(var(--i) * 100ms)}
.effect--roller{background:#f1ede2;color:#247d78}.effect--roller .preview-word span,.effect--roller .stage-word span{animation:ref-roller 3.6s infinite ease-in-out;animation-delay:calc(var(--i) * 45ms)}
.effect--shuffle{background:#101315;color:#2dd4c7}.effect--shuffle .preview-word span,.effect--shuffle .stage-word span{animation:ref-shuffle 3s infinite steps(5,end);animation-delay:calc(var(--i) * 45ms)}
.effect--spiral{background:#101315;color:#f6b936}.effect--spiral .preview-word span,.effect--spiral .stage-word span{animation:ref-spiral 4.2s infinite cubic-bezier(.2,.8,.25,1);animation-delay:calc(var(--i) * 65ms)}
.effect--jitter{background:#f7be35;color:#161718}.effect--jitter .preview-word span,.effect--jitter .stage-word span{animation:ref-jitter 2.4s infinite ease-in-out;animation-delay:calc(var(--i) * 35ms)}
.effect--stretch{background:#f1ede2;color:#171719}.effect--stretch .preview-word span,.effect--stretch .stage-word span{animation:ref-stretch 3.2s infinite cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i) * 60ms)}
.effect--ink{background:#101315;color:#f1ede2}.effect--ink .preview-word span,.effect--ink .stage-word span{animation:ref-ink 3.5s infinite ease-out;animation-delay:calc(var(--i) * 65ms)}
.effect--assemble{background:#101315;color:#f6b936}.effect--assemble .preview-word span,.effect--assemble .stage-word span{animation:ref-assemble 3.6s infinite cubic-bezier(.15,.8,.25,1);animation-delay:calc(var(--i) * 55ms)}
.effect--mosaic{background:#f7be35;color:#272018}.effect--mosaic .preview-word span,.effect--mosaic .stage-word span{animation:ref-mosaic 3.2s infinite steps(4,end);animation-delay:calc(var(--i) * 45ms)}
.effect--crumble{background:#f1ede2;color:#171719}.effect--crumble .preview-word span,.effect--crumble .stage-word span{animation:ref-crumble 3.2s infinite cubic-bezier(.2,.7,.3,1);animation-delay:calc(var(--i) * 70ms)}
.effect--float{background:#101315;color:#f1ede2}.effect--float .preview-word span,.effect--float .stage-word span{animation:ref-float 3.8s infinite ease-in-out;animation-delay:calc(var(--i) * 60ms)}
.card-orange .card-topline b,.card-orange h3{color:#f6b936}.effect-preview .preview-effect-detail,#stage-canvas .stage-effect-detail{position:absolute;z-index:0}
@keyframes ref-waveletters{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-18px) rotate(-5deg)}50%{transform:translateY(8px) rotate(4deg)}75%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes ref-stopmotion{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-3px) rotate(2deg)}50%{transform:translate(-3px,2px) rotate(-1deg)}75%{transform:translate(2px,1px) rotate(1deg)}}
@keyframes ref-letterrain{0%,12%{opacity:0;transform:translateY(-150px) rotate(8deg)}25%,72%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:.2;transform:translateY(30px)}}
@keyframes ref-magnifier{0%,35%,100%{transform:scale(1)}52%,68%{transform:scale(1.25)}}@keyframes ref-lens{0%,100%{transform:translateX(-80px)}48%{transform:translateX(80px)}}
@keyframes ref-scramble{0%,18%{opacity:.25;filter:blur(2px)}35%,70%{opacity:1;filter:blur(0)}82%,100%{opacity:.65;filter:blur(1px)}}@keyframes ref-domino{0%,15%{opacity:0;transform:rotateX(-90deg) translateY(-30px)}30%,70%{opacity:1;transform:rotateX(0) translateY(0)}100%{opacity:.2;transform:rotateX(70deg) translateY(18px)}}
@keyframes ref-gradient{to{background-position:260% 0}}@keyframes ref-gradient-letter{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ref-circletext{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-12px)}}@keyframes ref-ring-spin{to{transform:rotate(360deg)}}
@keyframes ref-water{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(.96)}}@keyframes ref-water-line{50%{transform:scaleX(.7);opacity:.35}}
@keyframes ref-bounce{0%,100%{transform:translateY(0)}38%{transform:translateY(-38px)}58%{transform:translateY(8px)}72%{transform:translateY(-8px)}}@keyframes ref-flag{0%,100%{transform:skewY(0) rotate(0)}50%{transform:skewY(-9deg) rotate(-2deg)}}@keyframes ref-gravity{0%,18%{transform:rotateX(90deg) translateY(80px);opacity:0}42%,75%{transform:rotateX(0) translateY(0);opacity:1}100%{transform:rotateX(-90deg) translateY(-80px);opacity:0}}
@keyframes ref-magnet{0%,12%{transform:translate(var(--x),var(--y)) scale(.7);opacity:0}42%,76%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(calc(var(--x) * -1),calc(var(--y) * -1));opacity:0}}
@keyframes ref-gridpulse{0%,100%{transform:scale(.8);opacity:.5}45%,65%{transform:scale(1.12);opacity:1}}@keyframes ref-weight{0%,100%{font-weight:300;transform:scaleX(.9)}52%{font-weight:900;transform:scaleX(1.05)}}@keyframes ref-fan{0%,100%{transform:rotate(0) translateX(0)}48%{transform:rotate(calc((var(--i) - 2) * 14deg)) translateX(calc((var(--i) - 2) * 18px))}}
@keyframes ref-karaoke{0%,100%{opacity:.55}45%,70%{opacity:1;color:#f1ede2}}@keyframes ref-karaoke-ball{0%{transform:translateX(-130px)}100%{transform:translateX(130px)}}@keyframes ref-swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes ref-pixel{0%,20%{filter:blur(4px);opacity:.2;transform:scale(.7)}42%,72%{filter:blur(0);opacity:1;transform:scale(1)}100%{filter:blur(4px);opacity:.2;transform:scale(.8)}}
@keyframes ref-rotating{0%{transform:rotate(0) translateX(18px)}50%{transform:rotate(180deg) translateX(18px)}100%{transform:rotate(360deg) translateX(18px)}}@keyframes ref-blurtrail{0%,100%{transform:translateX(-28px);filter:blur(5px);opacity:.3}45%,68%{transform:translateX(28px);filter:blur(0);opacity:1}}
@keyframes ref-checker{0%,100%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(.65)}}@keyframes ref-roller{0%,100%{transform:translateX(-75px) rotate(-18deg)}50%{transform:translateX(75px) rotate(18deg)}}@keyframes ref-shuffle{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(var(--x),var(--y)) rotate(22deg)}42%{transform:translate(calc(var(--x) * -1),calc(var(--y) * -.5)) rotate(-18deg)}68%{transform:translate(0,0) rotate(0)}}
@keyframes ref-spiral{0%,18%{opacity:0;transform:translate(var(--x),var(--y)) rotate(160deg) scale(.3)}48%,78%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc(var(--x) * -1),calc(var(--y) * -1)) rotate(-160deg) scale(.5)}}@keyframes ref-jitter{0%,12%,100%{transform:translate(0,0)}20%{transform:translate(4px,-3px)}28%{transform:translate(-4px,3px)}36%{transform:translate(2px,-2px)}56%,78%{transform:translate(0,0)}}
@keyframes ref-stretch{0%,100%{transform:scaleX(.78)}45%,62%{transform:scaleX(1.35)}75%{transform:scaleX(.95)}}@keyframes ref-ink{0%,18%{opacity:0;filter:blur(12px);transform:scale(1.3)}42%,70%{opacity:1;filter:blur(0);transform:scale(1)}100%{opacity:0;filter:blur(8px);transform:scale(1.15)}}@keyframes ref-assemble{0%,18%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3)}48%,78%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc(var(--x) * -1),calc(var(--y) * -1)) rotate(calc(var(--r) * -1)) scale(.7)}}
@keyframes ref-mosaic{0%,18%{opacity:0;transform:scale(.2) rotate(10deg)}42%,72%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:.35;transform:scale(.7) rotate(-8deg)}}@keyframes ref-crumble{0%,24%{opacity:1;transform:translateY(0) rotate(0)}58%{opacity:.8;transform:translateY(25px) rotate(8deg)}100%{opacity:0;transform:translateY(130px) rotate(35deg)}}@keyframes ref-float{0%,100%{transform:translateY(10px) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
#stage-canvas.effect--waveletters .stage-word span,#stage-canvas.effect--stopmotion .stage-word span,#stage-canvas.effect--letterrain .stage-word span,#stage-canvas.effect--magnifier .stage-word span,#stage-canvas.effect--scramble .stage-word span,#stage-canvas.effect--domino .stage-word span,#stage-canvas.effect--gradient .stage-word span,#stage-canvas.effect--circletext .stage-word span,#stage-canvas.effect--water .stage-word span,#stage-canvas.effect--bounce .stage-word span,#stage-canvas.effect--flag .stage-word span,#stage-canvas.effect--gravity .stage-word span,#stage-canvas.effect--magnet .stage-word span,#stage-canvas.effect--pulsegrid .stage-word span,#stage-canvas.effect--weight .stage-word span,#stage-canvas.effect--fan .stage-word span,#stage-canvas.effect--karaoke .stage-word span,#stage-canvas.effect--swing .stage-word span,#stage-canvas.effect--pixel .stage-word span,#stage-canvas.effect--rotating .stage-word span,#stage-canvas.effect--blurtrail .stage-word span,#stage-canvas.effect--checker .stage-word span,#stage-canvas.effect--roller .stage-word span,#stage-canvas.effect--shuffle .stage-word span,#stage-canvas.effect--spiral .stage-word span,#stage-canvas.effect--jitter .stage-word span,#stage-canvas.effect--stretch .stage-word span,#stage-canvas.effect--ink .stage-word span,#stage-canvas.effect--assemble .stage-word span,#stage-canvas.effect--mosaic .stage-word span,#stage-canvas.effect--crumble .stage-word span,#stage-canvas.effect--float .stage-word span{animation-duration:var(--motion-duration,3.2s)}