/* Treatments share the type, layout and movement; the 3D O keeps its pearl / offset ink surface. */
.type-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* Each glyph has its own grid cell: negative tracking only shortened its paint box,
   clipping the ink on V when background-clip:text was used. Keep full glyph width. */
.type-face{position:relative;isolation:isolate;letter-spacing:0;flex-shrink:0;padding-right:.035em}
.type-face:before,.type-face:after{position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;white-space:pre}

/* Three white / pale-lilac ink plates, with different dot pitches and registration. */
[data-letter-style="halftone"] .kinetic-word .type-face{
 color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,#fff 0 1.7px,transparent 1.85px) 0 0/4px 4px;
 background-clip:text;-webkit-background-clip:text;
}
[data-letter-style="halftone"] .type-face:before{
 content:attr(data-letter);z-index:-1;transform:translate(-.012em,.009em);
 background:radial-gradient(circle,rgba(216,198,231,.85) 0 1.1px,transparent 1.3px) 1px 1px/4px 4px;
 background-clip:text;-webkit-background-clip:text;
}
[data-letter-style="halftone"] .type-face:after{
 content:attr(data-letter);transform:translate(.011em,-.007em);
 background:radial-gradient(circle,rgba(255,255,255,.6) 0 .7px,transparent 1px) 1px 0/3.7px 3.7px;
 background-clip:text;-webkit-background-clip:text;
}

/* A pearl-white surface with broad lavender reflections, without a dark outline. */
[data-letter-style="gloss"] .kinetic-word .type-face{
 color:transparent;-webkit-text-fill-color:transparent;
 background:linear-gradient(157deg,#fff 2%,#f4eef9 17%,#b5a2c8 32%,#fff 43%,#fff 47%,#d6c3e5 61%,#ad95c3 73%,#f5eefb 88%,#fff 100%);
 background-clip:text;-webkit-background-clip:text;
 filter:drop-shadow(0 2px 5px rgba(220,187,244,.22));
}
[data-letter-style="gloss"] .type-face:after{
 content:attr(data-letter);
 background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.06) 42%,#fff 47%,rgba(255,255,255,.95) 49%,rgba(255,255,255,.15) 56%,transparent 68%) 180% 50%/280% 100%;
 background-clip:text;-webkit-background-clip:text;
 animation:pearl-light 5.5s ease-in-out infinite;
}
[data-letter-style="gloss"] .letter-v .type-face:after{animation-delay:-.3s}
[data-letter-style="gloss"] .letter-e .type-face:after{animation-delay:-.6s}
@keyframes pearl-light{0%,12%{background-position:180% 50%}75%,100%{background-position:-80% 50%}}

/* SVG filter softens the letter first, then gives that soft edge a fine grain. */
[data-letter-style="grain"] .kinetic-word .type-face{color:#fff;filter:url('#type-soft-grain')}
[data-letter-style="pastel"] .kinetic-word .type-face{color:#fff;filter:url('#type-rough-pastel')}

/* Printed ink with full-amplitude, rapid signal bursts. The O is never included. */
[data-letter-style="glitch"] .kinetic-word :is(.type-face,.glitch-dot){
 --glitch-ink:#fff;--glitch-light:rgba(216,198,231,.85);--glitch-highlight:rgba(255,255,255,.6);
 color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,var(--glitch-ink) 0 1.7px,transparent 1.85px) 0 0/4px 4px;
 background-clip:text;-webkit-background-clip:text;
 filter:url('#type-glitch');animation:signal-jolt 1.35s steps(1,end) infinite;
}
[data-letter-style="glitch"] .kinetic-word .glitch-dot{
 position:relative;isolation:isolate;letter-spacing:0;flex-shrink:0;padding-right:.035em;
 --glitch-ink:#b58acb;--glitch-light:rgba(145,98,168,.85);--glitch-highlight:rgba(223,198,239,.7);
 animation-delay:-.61s;
}
[data-letter-style="glitch"] .glitch-dot:before,[data-letter-style="glitch"] .glitch-dot:after{
 position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;white-space:pre;
}
[data-letter-style="glitch"] :is(.type-face,.glitch-dot):before{
 content:attr(data-letter);color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,var(--glitch-light) 0 1.1px,transparent 1.3px) 1px 1px/4px 4px;
 background-clip:text;-webkit-background-clip:text;
 clip-path:polygon(0 20%,100% 20%,100% 28%,0 28%,0 52%,100% 52%,100% 57%,0 57%);
 transform:translate(-.018em,.003em);animation:signal-burst 1.35s steps(1,end) infinite;
}
[data-letter-style="glitch"] :is(.type-face,.glitch-dot):after{
 content:attr(data-letter);color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,var(--glitch-highlight) 0 .7px,transparent 1px) 1px 0/3.7px 3.7px;
 background-clip:text;-webkit-background-clip:text;
 clip-path:polygon(0 35%,100% 35%,100% 39%,0 39%,0 69%,100% 69%,100% 75%,0 75%);
 transform:translate(.02em,-.003em);animation:signal-burst 1.1s steps(1,end) -.29s infinite reverse;
}
[data-letter-style="glitch"] .letter-v .type-face,[data-letter-style="glitch"] .letter-v .type-face:before{animation-delay:-.17s}
[data-letter-style="glitch"] .letter-e .type-face,[data-letter-style="glitch"] .letter-e .type-face:before{animation-delay:-.39s}
[data-letter-style="glitch"] .letter-v .type-face:after{animation-delay:-.57s}
[data-letter-style="glitch"] .letter-e .type-face:after{animation-delay:-.82s}
[data-letter-style="glitch"] .glitch-dot:before{animation-delay:-.61s}
[data-letter-style="glitch"] .glitch-dot:after{animation-delay:-.94s}
@keyframes signal-jolt{
 0%,13%,42%,74%,100%{translate:0 0}
 5%,36%{translate:.007em 0}
 9%,39%,69%{translate:-.006em 0}
 71%{translate:.004em 0}
}
@keyframes signal-burst{
 0%,12%,28%,42%,62%,70%,88%,100%{translate:0 0;clip-path:polygon(0 20%,100% 20%,100% 28%,0 28%,0 52%,100% 52%,100% 57%,0 57%)}
 16%,50%,80%{translate:.055em 0;clip-path:polygon(0 12%,100% 12%,100% 18%,0 18%,0 60%,100% 60%,100% 69%,0 69%)}
 20%,54%,76%{translate:-.045em 0;clip-path:polygon(0 31%,100% 31%,100% 40%,0 40%,0 77%,100% 77%,100% 82%,0 82%)}
 24%,58%,84%{translate:.025em 0;clip-path:polygon(0 42%,100% 42%,100% 47%,0 47%,0 67%,100% 67%,100% 72%,0 72%)}
}

@media(max-width:800px){
 [data-letter-style="halftone"] .kinetic-word .type-face{background-size:3px 3px;background-image:radial-gradient(circle,#fff 0 1.15px,transparent 1.3px)}
 [data-letter-style="halftone"] .type-face:before{background-size:3px 3px}
 [data-letter-style="halftone"] .type-face:after{background-size:2.7px 2.7px}
}
@media(prefers-reduced-motion:reduce){[data-letter-style="gloss"] .type-face:after{animation:none;background-position:50% 50%}}

@media(max-width:800px){
 [data-letter-style="glitch"] .kinetic-word :is(.type-face,.glitch-dot){background-size:3px 3px;background-image:radial-gradient(circle,var(--glitch-ink) 0 1.15px,transparent 1.3px)}
 [data-letter-style="glitch"] :is(.type-face,.glitch-dot):before{background-size:3px 3px}
 [data-letter-style="glitch"] :is(.type-face,.glitch-dot):after{background-size:2.7px 2.7px}
}

/* The arrival is printed in place; its horizontal registration resolves into the chosen finish. */
.kinetic-word.is-arriving :is(.type-face,.glitch-dot){
 --arrival-ink:#fff;color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,var(--arrival-ink) 0 1.7px,transparent 1.85px) 0 0/var(--arrival-pitch,4px) var(--arrival-pitch,4px);
 background-clip:text;-webkit-background-clip:text;
 filter:url('#type-glitch');animation:signal-jolt .28s steps(1,end) infinite;
}
.kinetic-word.is-arriving .glitch-dot{--arrival-ink:#b58acb;position:relative;letter-spacing:0;flex-shrink:0;padding-right:.035em}
.kinetic-word.is-arriving :is(.type-face,.glitch-dot):before,
.kinetic-word.is-arriving :is(.type-face,.glitch-dot):after{
 content:attr(data-letter);position:absolute;inset:0;font:inherit;letter-spacing:inherit;white-space:pre;pointer-events:none;
 color:transparent;-webkit-text-fill-color:transparent;
 background:radial-gradient(circle,#c9a2dd 0 1px,transparent 1.3px) 0 0/4px 4px;
 background-clip:text;-webkit-background-clip:text;
 transform:translate(-.022em,0);animation:signal-burst .24s steps(1,end) infinite;
}
.kinetic-word.is-arriving :is(.type-face,.glitch-dot):after{
 background-image:radial-gradient(circle,#fff 0 .8px,transparent 1px);
 transform:translate(.025em,0);animation-duration:.29s;animation-direction:reverse;
}
@media(max-width:800px){.kinetic-word.is-arriving :is(.type-face,.glitch-dot){background-image:radial-gradient(circle,var(--arrival-ink) 0 1.15px,transparent 1.3px)}}
@media(prefers-reduced-motion:reduce){.kinetic-word.is-arriving .letter{mask-image:none!important;translate:none!important}}

/* Brand-color registration plates on M / V / E only. White ink remains the core. */
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:before,
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:after{
 background-clip:text;-webkit-background-clip:text;
 mask-image:radial-gradient(circle,#000 0 1.45px,transparent 1.7px);
 mask-size:4px 4px;mask-repeat:repeat;
 -webkit-mask-image:radial-gradient(circle,#000 0 1.45px,transparent 1.7px);
 -webkit-mask-size:4px 4px;-webkit-mask-repeat:repeat;
 clip-path:inset(0);opacity:.88;
}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:before{
 background-image:linear-gradient(180deg,#9162a8 0 24%,#2c1e46 24% 32%,#b58acb 32% 64%,#9162a8 64% 82%,#2c1e46 82% 100%);
 background-size:100% 100%;background-position:0 0;
 transform:translate(-.022em,.007em);
 animation:brand-ink-burst 1.35s steps(1,end) infinite;
}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:after{
 background-image:linear-gradient(180deg,#dfc6ef 0 32%,#b58acb 32% 54%,#9162a8 54% 72%,#dfc6ef 72% 100%);
 background-size:100% 100%;background-position:0 0;
 mask-position:1.5px 1px;-webkit-mask-position:1.5px 1px;
 transform:translate(.024em,-.007em);
 animation:brand-ink-burst 1.1s steps(1,end) -.29s infinite reverse;
}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .letter-v .type-face:before{animation-delay:-.17s}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .letter-e .type-face:before{animation-delay:-.39s}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .letter-v .type-face:after{animation-delay:-.57s}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .letter-e .type-face:after{animation-delay:-.82s}
@keyframes brand-ink-burst{
 0%,12%,28%,42%,62%,70%,88%,100%{translate:0 0;clip-path:inset(0);opacity:.9}
 16%,50%,80%{translate:.055em 0;clip-path:polygon(0 10%,100% 10%,100% 24%,0 24%,0 55%,100% 55%,100% 68%,0 68%);opacity:1}
 20%,54%,76%{translate:-.045em 0;clip-path:polygon(0 28%,100% 28%,100% 39%,0 39%,0 73%,100% 73%,100% 85%,0 85%);opacity:1}
 24%,58%,84%{translate:.025em 0;clip-path:polygon(0 40%,100% 40%,100% 46%,0 46%,0 64%,100% 64%,100% 78%,0 78%);opacity:.96}
}
/* Keep the faster arrival cadence while using the same colored ink plates. */
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word.is-arriving .type-face:before{animation-duration:.24s}
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word.is-arriving .type-face:after{animation-duration:.29s}
@media(max-width:800px){
 [data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:before,
 [data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face:after{
  mask-image:radial-gradient(circle,#000 0 1.05px,transparent 1.25px);mask-size:3px 3px;
  -webkit-mask-image:radial-gradient(circle,#000 0 1.05px,transparent 1.25px);-webkit-mask-size:3px 3px;
 }
}

/* Print the white plate last, so the offset colors read as registration, not a tint. */
[data-letter-style="glitch"][data-ink="brand"] .kinetic-word .type-face>.type-core{
 position:relative;z-index:1;display:block;pointer-events:none;
 background:inherit;background-clip:text;-webkit-background-clip:text;
}