/* Text effects & type demos. Every rule is scoped under a .tx-* root. */

.tx-cap { font: 500 11px var(--f-mono); opacity: 0.7; }

/* gradient text */
.tx-grad { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 0 9%; }
.tx-grad-h {
  margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(34px, 15cqi, 72px); line-height: 0.88; letter-spacing: -0.045em;
  background: linear-gradient(100deg, var(--d-pink), var(--d-violet) 25%, var(--d-blue) 45%, var(--d-cyan) 62%, var(--d-lime) 80%, var(--d-pink));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tx-grad 7s linear infinite;
  padding-bottom: 0.04em;
}
@keyframes tx-grad { to { background-position: 200% 0; } }

/* knockout text */
.tx-ko { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 0 9%; }
.tx-ko-word {
  margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(40px, 19cqi, 92px); line-height: 0.82; letter-spacing: -0.035em;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.85) 0 2px, transparent 3px) 0 0 / 38px 46px,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px) 17px 23px / 38px 46px,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.2) 0 10px, transparent 14px 34px, rgb(255 255 255 / 0.12) 38px 42px, transparent 46px 52px),
    linear-gradient(#7af0ff, #2a8be8 40%, #1838a6 75%, #0b1550);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tx-ko 6s linear infinite;
}
@keyframes tx-ko { to { background-position: 0 -92px, 17px -115px, 104px 0, 0 0; } }

/* typewriter */
.tx-tw { width: 100%; padding: 0 7%; }
.tx-tw-box {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--stage-card);
  border: 1px solid var(--stage-line); box-shadow: 0 10px 28px -12px rgb(20 24 60 / 0.35);
}
.tx-tw-k { font: 600 11px var(--f-mono); color: var(--d-violet); }
.tx-tw-line { margin: 0; min-height: 3em; font: 500 clamp(14px, 4.6cqi, 19px)/1.5 var(--f-mono); letter-spacing: -0.01em; }
.tx-tw-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -0.2em;
  background: var(--d-violet); animation: tx-blink 1s steps(1) infinite;
}
@keyframes tx-blink { 50% { opacity: 0; } }

/* text scramble */
.tx-scr { display: grid; gap: 12px; justify-items: start; width: 100%; padding: 0 9%; }
.tx-scr-line {
  margin: 0; min-height: 1.2em; font: 700 clamp(18px, 7.2cqi, 34px)/1.2 var(--f-mono); letter-spacing: 0.02em;
  color: #e9fff4; white-space: pre;
}
.tx-scr-g { color: #5cf0a4; opacity: 0.85; }

/* word rotator */
.tx-wr { width: 100%; padding: 0 9%; }
.tx-wr-h { margin: 0; font-weight: 850; font-stretch: 112%; font-size: clamp(20px, 7.2cqi, 38px); line-height: 1.08; letter-spacing: -0.03em; }
.tx-wr-slot { display: block; height: 1.12em; overflow: hidden; }
.tx-wr-list { display: flex; flex-direction: column; animation: tx-wr 9s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.tx-wr-list span { display: block; height: 1.12em; line-height: 1.12em; }
.tx-wr-list span:nth-child(4n + 1) { color: var(--d-violet); }
.tx-wr-list span:nth-child(4n + 2) { color: var(--d-pink); }
.tx-wr-list span:nth-child(4n + 3) { color: var(--d-blue); }
.tx-wr-list span:nth-child(4n + 4) { color: var(--d-coral); }
@keyframes tx-wr {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-1.12em); }
  50%, 70% { transform: translateY(-2.24em); }
  75%, 95% { transform: translateY(-3.36em); }
  100% { transform: translateY(-4.48em); }
}

/* split-text reveal */
.tx-sp { width: 100%; padding: 0 9%; display: grid; justify-items: start; }
.tx-sp-l { margin: 0; font-weight: 900; font-stretch: 112%; font-size: clamp(28px, 11.5cqi, 56px); line-height: 0.98; letter-spacing: -0.035em; }
.tx-sp-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.tx-sp-m > span { display: inline-block; animation: tx-sp 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; animation-delay: calc(var(--i) * 70ms - 1.6s); }
.tx-sp .tx-cap { margin-top: 12px; }
@keyframes tx-sp {
  0% { transform: translateY(105%); }
  13%, 84% { transform: none; }
  94%, 100% { transform: translateY(-105%); }
}

/* scroll text reveal */
.tx-sr { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tx-sr-track { height: 320%; }
.tx-sr-sticky { position: sticky; top: 0; height: 31.25%; display: grid; place-items: center; padding: 0 8%; }
.tx-sr-p { margin: 0; font-weight: 750; font-stretch: 104%; font-size: clamp(16px, 5.4cqi, 26px); line-height: 1.22; letter-spacing: -0.015em; }
.tx-sr-w { opacity: 0.15; transition: opacity 0.12s linear; }

/* shiny text */
.tx-sh { display: grid; justify-items: center; gap: 18px; padding: 0 6%; text-align: center; }
.tx-sh-pill { padding: 7px 15px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.05); font-size: 13px; font-weight: 600; }
.tx-sh-big { margin: 0; font-weight: 850; font-stretch: 110%; font-size: clamp(26px, 10cqi, 48px); line-height: 1; letter-spacing: -0.03em; }
.tx-sh-t {
  color: rgb(176 182 214 / 0.62);
  background: linear-gradient(110deg, transparent 30%, #ffffff 50%, transparent 70%) no-repeat;
  background-size: 50% 100%; background-position: -150% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: tx-sh 3.4s ease-in-out infinite;
}
.tx-sh-big.tx-sh-t { animation-delay: 0.25s; }
@keyframes tx-sh { 0% { background-position: -150% 0; } 65%, 100% { background-position: 250% 0; } }

/* glitch text */
.tx-gl { display: grid; gap: 14px; justify-items: start; width: 100%; padding: 0 9%; }
.tx-gl-t {
  position: relative; margin: 0; color: #f3f4ff; font-weight: 900; font-stretch: 118%;
  font-size: clamp(30px, 13cqi, 62px); line-height: 1; letter-spacing: -0.02em;
  animation: tx-gl-base 3.2s steps(1) infinite;
}
.tx-gl-t::before, .tx-gl-t::after { content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen; }
.tx-gl-t::before { color: #ff2e63; animation: tx-gl-a 3.2s steps(1) infinite; }
.tx-gl-t::after { color: #08d9f0; animation: tx-gl-b 3.2s steps(1) infinite; }
@keyframes tx-gl-base { 0% { transform: none; } 62% { transform: skewX(-8deg); } 64% { transform: translateX(3px); } 67% { transform: none; } 89% { transform: skewX(6deg); } 91% { transform: none; } }
@keyframes tx-gl-a {
  0% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  60% { transform: translate(-7px, -1px); clip-path: inset(8% 0 64% 0); }
  63% { transform: translate(6px, 0); clip-path: inset(46% 0 30% 0); }
  66% { transform: translate(-9px, 1px); clip-path: inset(74% 0 4% 0); }
  69% { transform: translate(4px, 0); clip-path: inset(22% 0 52% 0); }
  72% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  88% { transform: translate(-8px, 0); clip-path: inset(36% 0 40% 0); }
  90% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
}
@keyframes tx-gl-b {
  0% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  60% { transform: translate(8px, 1px); clip-path: inset(58% 0 18% 0); }
  63% { transform: translate(-5px, 0); clip-path: inset(12% 0 70% 0); }
  66% { transform: translate(7px, -1px); clip-path: inset(30% 0 44% 0); }
  69% { transform: translate(-4px, 0); clip-path: inset(80% 0 2% 0); }
  72% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  88% { transform: translate(9px, 0); clip-path: inset(60% 0 12% 0); }
  90% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
}

/* outline text */
.tx-ol { display: grid; width: 100%; padding: 0 9%; }
.tx-ol-l { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(34px, 14.5cqi, 70px); line-height: 0.86; letter-spacing: -0.02em; }
.tx-ol-h {
  color: transparent; -webkit-text-stroke: 1.5px var(--stage-ink);
  background: linear-gradient(var(--d-violet), var(--d-violet)) no-repeat 0 0 / 0% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: tx-ol 5.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: var(--d, 0s);
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tx-ol-h:hover { animation: none; background-size: 100% 100%; }
@keyframes tx-ol { 0%, 12% { background-size: 0% 100%; } 38%, 66% { background-size: 100% 100%; } 90%, 100% { background-size: 0% 100%; background-position: 100% 0; } }

/* marker highlight */
.tx-hl { width: 100%; padding: 0 8%; }
.tx-hl p { margin: 0; font: 400 clamp(16px, 5.4cqi, 24px)/1.5 var(--f-body); color: #1f2440; text-wrap: pretty; }
.tx-hl-m {
  color: inherit; padding: 0 0.08em; background-color: transparent;
  background-image: linear-gradient(102deg, rgb(255 210 50 / 0) 0.6%, rgb(255 210 50 / 0.9) 2%, rgb(255 210 50 / 0.7) 48%, rgb(255 210 50 / 0.9) 97%, rgb(255 210 50 / 0) 99.4%);
  background-repeat: no-repeat; background-size: 0% 100%;
  animation: tx-hl 6s cubic-bezier(0.45, 0, 0.2, 1) infinite; animation-delay: var(--d, 0s);
}
.tx-hl-u { background-image: linear-gradient(transparent 60%, rgb(255 79 154 / 0.55) 60%, rgb(255 79 154 / 0.55) 90%, transparent 90%); }
@keyframes tx-hl { 0%, 10% { background-size: 0% 100%; } 32%, 86% { background-size: 100% 100%; } 96%, 100% { background-size: 0% 100%; } }

/* number ticker */
.tx-nt { display: grid; gap: 14px; width: 100%; padding: 0 9%; }
.tx-nt-stat { display: grid; gap: 2px; }
.tx-nt-k { font: 500 11px var(--f-mono); opacity: 0.7; }
.tx-nt-od { margin: 0; display: flex; align-items: flex-start; font-weight: 850; font-stretch: 108%; font-size: clamp(34px, 14cqi, 66px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tx-nt-d { display: inline-block; height: 1em; overflow: hidden; }
.tx-nt-col { display: flex; flex-direction: column; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tx-nt-col span { display: block; height: 1em; line-height: 1; }
.tx-nt-c { line-height: 1; }
.tx-nt-cu { font-weight: 750; font-size: clamp(18px, 6cqi, 28px); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--d-violet); }

/* animated underline */
.tx-ul { display: grid; gap: 12px; justify-items: start; width: 100%; padding: 0 10%; }
.tx-ul-a {
  font-weight: 750; font-size: clamp(17px, 6.4cqi, 30px); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--stage-ink); text-decoration: none; padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  transition: background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s;
}
.tx-ul-slide { background-size: 0% 3px; background-position: 100% 100%; }
.tx-ul-slide:hover, .tx-ul-slide:focus-visible, .tx-ul-slide.is-on { background-size: 100% 3px; background-position: 0 100%; }
.tx-ul-center { background-size: 0% 3px; background-position: 50% 100%; }
.tx-ul-center:hover, .tx-ul-center:focus-visible, .tx-ul-center.is-on { background-size: 100% 3px; }
.tx-ul-fill { padding-inline: 0.12em; margin-inline: -0.12em; background-image: linear-gradient(var(--d-violet), var(--d-violet)); background-size: 100% 3px; background-position: 0 100%; }
.tx-ul-fill:hover, .tx-ul-fill:focus-visible, .tx-ul-fill.is-on { background-size: 100% 100%; color: #ffffff; }

/* variable font animation */
.tx-vf { display: grid; justify-items: center; gap: 12px; width: 100%; }
.tx-vf-w { margin: 0; font-size: clamp(36px, 15cqi, 72px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.tx-vf-w span { font-weight: 200; font-stretch: 75%; animation: tx-vf 1.2s ease-in-out infinite alternate both; animation-delay: calc(var(--i) * 0.09s - 1.2s); }
.tx-vf-axes { margin: 0; display: flex; gap: 8px; }
.tx-vf-axes code { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--stage-card); border: 1px solid var(--stage-line); }
@keyframes tx-vf { from { font-weight: 200; font-stretch: 75%; } to { font-weight: 900; font-stretch: 125%; } }

/* balanced text */
.tx-tb { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; width: 100%; padding: 0 7%; }
.tx-tb-col { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.tx-tb-col figcaption { font: 500 10.5px var(--f-mono); opacity: 0.75; }
.tx-tb-h {
  margin: 0; font-weight: 780; font-stretch: 104%; font-size: clamp(15px, 5.6cqi, 26px); line-height: 1.12; letter-spacing: -0.015em;
  outline: 1px dashed var(--stage-line); outline-offset: 5px; text-wrap: wrap;
}
.tx-tb-bal .tx-tb-h { text-wrap: balance; }

/* fluid typography */
.tx-fl { position: absolute; inset: 0; display: flex; align-items: center; padding: 14px 16px; }
.tx-fl-box {
  position: relative; container-type: inline-size; width: 70%; max-width: calc(100% - 16px);
  padding: 14px 22px 14px 16px; border: 1px dashed var(--stage-line); border-radius: 10px; background: var(--stage-card);
  animation: tx-fl 6s ease-in-out infinite alternate;
}
.tx-fl.is-manual .tx-fl-box { animation: none; }
@keyframes tx-fl { from { width: 40%; } to { width: calc(100% - 16px); } }
.tx-fl-h { margin: 0; font-weight: 800; font-stretch: 108%; font-size: clamp(14px, 9cqi, 40px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.tx-fl-read { display: block; margin-top: 8px; font-size: 10.5px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-fl-read b { font-weight: 600; color: var(--d-violet); font-variant-numeric: tabular-nums; }
.tx-fl-handle {
  position: absolute; right: -8px; top: 50%; translate: 0 -50%; width: 14px; height: 44px; border-radius: 7px;
  background: var(--d-violet); box-shadow: 0 0 0 3px var(--stage); cursor: ew-resize; touch-action: none;
}