.forecast-motion-word {
  --motion-font-size: clamp(21px, 1.75vw, 34px);
  --motion-fill: linear-gradient(#fff, #bfe8ff);
  --motion-stroke: #12385b;
  position: absolute;
  left: 50%;
  width: 99%;
  overflow: hidden;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .35));
}

.hourly .forecast-motion-word {
  top: 7%;
  height: 13%;
}

.ten-day .forecast-motion-word {
  top: 11.5%;
  height: 13.5%;
}

.motion-word-copy,
.motion-word-effect {
  position: absolute;
  inset: 0;
}

.motion-word-copy {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: var(--motion-font-size);
  font-weight: 900;
  line-height: .86;
  letter-spacing: .015em;
  text-align: center;
  -webkit-text-stroke: 1.4px var(--motion-stroke);
  paint-order: stroke fill;
}

.motion-word-line {
  display: block;
  white-space: nowrap;
  filter: drop-shadow(0 2px 1px rgba(1, 8, 18, .8));
}

.motion-letter {
  position: relative;
  display: inline-block;
  background: var(--motion-fill);
  background-clip: text;
  -webkit-background-clip: text;
  color: #fff;
  -webkit-text-fill-color: transparent;
}

.motion-space {
  width: .22em;
}

.motion-word-effect {
  z-index: 3;
}

.motion-particle {
  position: absolute;
  display: block;
  left: var(--particle-x);
  top: var(--particle-y);
  animation-delay: var(--particle-delay) !important;
}

.forecast-motion-word:is(
  [data-motion="freezing-rain"],
  [data-motion="hot-and-humid"],
  [data-motion="severe-storms"]
) {
  --motion-font-size: clamp(18px, 1.45vw, 28px);
}

.forecast-motion-word:is(
  [data-motion="blizzard"],
  [data-motion="flurries"],
  [data-motion="blustery"]
) {
  --motion-font-size: clamp(20px, 1.58vw, 30px);
}

.forecast-motion-word:is(
  [data-motion="snow"],
  [data-motion="icy"],
  [data-motion="cold"],
  [data-motion="cool"],
  [data-motion="fog"],
  [data-motion="hazy"],
  [data-motion="hot"],
  [data-motion="mild"],
  [data-motion="warm"],
  [data-motion="rain"]
) {
  --motion-font-size: clamp(28px, 2.3vw, 44px);
}

/* Snow and blizzard: the animated speckle is clipped into the letter faces. */
.forecast-motion-word[data-family="snow"] {
  --motion-fill:
    radial-gradient(circle, #fff 0 18%, transparent 21%) 0 0 / 9px 11px,
    radial-gradient(circle, #d9f5ff 0 16%, transparent 20%) 5px 5px / 11px 13px,
    linear-gradient(180deg, #fafdff 0%, #7ed2ff 64%, #eaf9ff 100%);
  --motion-stroke: #326a93;
}

[data-family="snow"] .motion-letter {
  animation: snowInside 1.9s linear infinite;
}

[data-family="snow"] .motion-particle {
  top: -12%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #bcecff, 5px 0 0 -2px #fff, -5px 0 0 -2px #fff;
  animation: snowFall var(--particle-duration) linear infinite;
}

[data-motion="flurries"] .motion-particle {
  animation-duration: calc(var(--particle-duration) * 1.8);
}

[data-motion="blizzard"] .motion-word-copy {
  animation: blizzardWord .58s ease-in-out infinite alternate;
}

[data-motion="blizzard"] .motion-particle {
  left: -12%;
  top: var(--particle-y);
  animation-name: blizzardSnow;
  animation-duration: calc(var(--particle-duration) * .58);
}

/* Ice faces, small icicle points, and frozen precipitation. */
.forecast-motion-word[data-family="ice"],
.forecast-motion-word[data-family="ice-rain"] {
  --motion-fill: linear-gradient(165deg, #ffffff 0 18%, #9eeaff 32%, #2e9fd1 66%, #eaffff 84%);
  --motion-stroke: #246388;
}

[data-family="ice"] .motion-letter,
[data-family="ice-rain"] .motion-letter {
  animation: iceShine 2.4s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -.13s);
}

[data-family="ice"] .motion-particle {
  top: 64%;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 17px solid rgba(205, 247, 255, .95);
  filter: drop-shadow(0 1px 1px #24779d);
  animation: icicleGleam 1.8s ease-in-out infinite;
}

[data-family="ice-rain"] .motion-particle {
  top: -18%;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(#e8fbff, #69c8f0);
  box-shadow: 0 11px 0 1px #b9efff;
  transform: rotate(-8deg);
  animation: freezingDrop var(--particle-duration) linear infinite;
}

/* Wind words use hand-drawn-style streaks with increasing speed. */
.forecast-motion-word[data-family="wind"],
.forecast-motion-word[data-family="winter-wind"] {
  --motion-fill: linear-gradient(180deg, #fff 8%, #d7f5ff 46%, #7ac4e7 100%);
  --motion-stroke: #2d628e;
}

[data-family="wind"] .motion-word-copy,
[data-family="winter-wind"] .motion-word-copy {
  animation: breezeWord 1.7s ease-in-out infinite alternate;
}

[data-motion="windy"] .motion-word-copy {
  animation-duration: .72s;
}

[data-motion="blustery"] .motion-word-copy {
  animation: none;
}

[data-motion="blustery"] .motion-letter {
  animation: coldBounce 1.35s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -.11s);
}

[data-family="wind"] .motion-particle,
[data-family="winter-wind"] .motion-particle {
  left: -35%;
  width: 35%;
  height: 3px;
  border-radius: 100%;
  background: linear-gradient(90deg, transparent, rgba(235, 252, 255, .95));
  box-shadow: 10px 4px 0 -1px rgba(188, 232, 255, .7);
  animation: windStreak 1.8s ease-in infinite;
}

[data-motion="windy"] .motion-particle {
  animation-duration: calc(var(--particle-duration) * .62);
}

[data-family="winter-wind"] .motion-particle:nth-child(even) {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #bcecff;
}

/* Cold family: blue letter faces with progressively calmer motion. */
.forecast-motion-word[data-family="cold"] {
  --motion-fill: linear-gradient(180deg, #ecfbff 0%, #69cfff 40%, #1683c7 76%, #bdefff 100%);
  --motion-stroke: #075484;
}

[data-family="cold"] .motion-letter {
  animation: coldBounce 1.35s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -.11s);
}

[data-motion="cool"] .motion-letter {
  animation-name: coolFloat;
  animation-duration: 2.4s;
}

.forecast-motion-word:is(
  [data-motion="cooler"],
  [data-motion="colder"]
) .motion-letter {
  animation-name: colderShiver;
  animation-duration: .72s;
}

[data-family="cold"] .motion-particle {
  width: 4px;
  height: 4px;
  border: 1px solid #dffaff;
  transform: rotate(45deg);
  box-shadow: 0 0 5px #9eeaff;
  animation: coldSparkle var(--particle-duration) ease-in-out infinite;
}

/* Fog, smoke, and haze pass translucent layers in front of the word. */
.forecast-motion-word:is([data-family="fog"], [data-family="smoke"], [data-family="haze"]) {
  --motion-fill: linear-gradient(180deg, #f5f8f9, #9baeb8 70%, #eef4f5);
  --motion-stroke: #4a5961;
}

[data-family="smoke"] {
  --motion-fill: linear-gradient(180deg, #d9dadd, #71747a 68%, #bbbcc0);
  --motion-stroke: #34363b;
}

[data-family="haze"] {
  --motion-fill: linear-gradient(180deg, #fff4d7, #c9b99c 70%, #f2e5c7);
  --motion-stroke: #71674f;
}

.forecast-motion-word:is([data-family="fog"], [data-family="smoke"], [data-family="haze"]) .motion-particle {
  left: calc(var(--particle-x) - 27%);
  width: 55%;
  height: 13%;
  border-radius: 50%;
  background: rgba(236, 246, 249, .67);
  filter: blur(3px);
  animation: obscuredSway calc(var(--particle-duration) * 2.8) ease-in-out infinite alternate;
}

[data-family="smoke"] .motion-particle {
  background: rgba(73, 77, 83, .68);
  filter: blur(5px);
  animation-name: smokeSway;
  animation-duration: calc(var(--particle-duration) * 3.4);
}

[data-family="haze"] .motion-particle {
  height: 22%;
  background: rgba(238, 214, 167, .48);
  filter: blur(7px);
  animation-duration: calc(var(--particle-duration) * 4.5);
}

/* Heat, humidity, and their combined treatment. */
.forecast-motion-word[data-family="heat"],
.forecast-motion-word[data-family="heat-humid"] {
  --motion-fill: linear-gradient(180deg, #fff19b 0%, #ff7b22 34%, #ed2015 72%, #ffb23f 100%);
  --motion-stroke: #821409;
}

[data-family="heat"] .motion-letter,
[data-family="heat-humid"] .motion-letter {
  animation: heatShimmer 1.05s ease-in-out infinite alternate;
  animation-delay: calc(var(--letter-index) * -.08s);
}

[data-family="heat"] .motion-particle,
[data-family="heat-humid"] .motion-particle:nth-child(odd) {
  top: 70%;
  width: 3px;
  height: 28%;
  border-left: 2px solid rgba(255, 194, 72, .75);
  border-radius: 50%;
  animation: heatRise var(--particle-duration) ease-in-out infinite;
}

.forecast-motion-word[data-family="humid"] {
  --motion-fill: linear-gradient(180deg, #e4ffff 0%, #58d6df 46%, #0b87a9 82%);
  --motion-stroke: #07566f;
}

[data-family="humid"] .motion-letter {
  animation: humidSag 1.8s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -.12s);
}

[data-family="humid"] .motion-particle,
[data-family="heat-humid"] .motion-particle:nth-child(even) {
  top: 38%;
  width: 5px;
  height: 8px;
  border-radius: 55% 55% 65% 65%;
  background: #8df5ff;
  box-shadow: 0 0 4px rgba(176, 251, 255, .8);
  animation: humidDrop var(--particle-duration) ease-in infinite;
}

/* Mild, warm, and warmer share a sunny amber glow. */
.forecast-motion-word[data-family="warmth"] {
  --motion-fill: linear-gradient(180deg, #fff7b8 0%, #ffc43d 42%, #f47c20 83%);
  --motion-stroke: #9b480d;
}

[data-family="warmth"] .motion-word-copy {
  animation: warmGlow 2.2s ease-in-out infinite;
}

[data-motion="mild"] .motion-word-copy {
  animation-duration: 3.2s;
}

[data-motion="warmer"] .motion-word-copy {
  animation-duration: 1.35s;
}

[data-family="warmth"] .motion-particle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 223, 105, .72);
  box-shadow: 0 0 10px #ffc343;
  animation: warmMote var(--particle-duration) ease-in-out infinite;
}

/* Rain uses green broadcast lettering with different drop densities. */
.forecast-motion-word[data-family="rain"] {
  --motion-fill:
    repeating-linear-gradient(105deg, transparent 0 5px, rgba(211, 255, 232, .85) 6px 8px, transparent 9px 15px),
    linear-gradient(180deg, #d7ffe1 0%, #36d47a 44%, #087948 88%);
  --motion-stroke: #075735;
}

[data-family="rain"] .motion-letter {
  animation: rainInside 1.15s linear infinite;
}

[data-family="rain"] .motion-particle {
  top: -20%;
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: #a8f5da;
  transform: rotate(8deg);
  animation: rainDrop var(--particle-duration) linear infinite;
}

[data-motion="showers"] .motion-particle {
  animation-duration: calc(var(--particle-duration) * 1.35);
}

[data-motion="drizzle"] .motion-particle {
  width: 1px;
  height: 8px;
  opacity: .72;
  animation-duration: calc(var(--particle-duration) * 1.7);
}

/* Storm words: red severe lettering plus a black-cloud STORMS treatment. */
.forecast-motion-word[data-family="storm"] {
  --motion-fill: linear-gradient(180deg, #ffd6c8 0%, #ff3a24 35%, #a90808 76%, #ff6b38 100%);
  --motion-stroke: #5d0505;
}

.forecast-motion-word[data-motion="t-storms"] {
  --motion-fill: linear-gradient(180deg, #fffbd0 0%, #ffd83d 42%, #f08b16 82%, #fff06c 100%);
  --motion-stroke: #4b3003;
}

[data-motion="t-storms"] .motion-word-copy {
  box-sizing: border-box;
  z-index: 5;
  justify-content: center;
  padding: 0;
}

[data-motion="t-storms"] .motion-word-effect::before,
[data-motion="t-storms"] .motion-word-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 2;
  background: linear-gradient(180deg, #252b35 0%, #11151c 52%, #05070b 100%);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .78));
  animation: stormCloudBrood 3.2s ease-in-out infinite alternate;
}

[data-motion="t-storms"] .motion-word-effect::before {
  top: 35%;
  width: 86%;
  height: 28%;
  border-radius: 48% 48% 38% 38% / 72% 72% 42% 42%;
  transform: translateX(-50%);
}

[data-motion="t-storms"] .motion-word-effect::after {
  top: 3%;
  width: 30%;
  height: 58%;
  border-radius: 52% 52% 43% 43%;
  transform: translateX(-50%);
  box-shadow:
    -48px 10px 0 -8px #161b23,
    48px 11px 0 -9px #090c11;
}

[data-family="storm"] .motion-word-copy {
  animation: stormPulse .82s steps(2, end) infinite;
}

[data-family="storm"] .motion-particle {
  top: 5%;
  width: 8px;
  height: 72%;
  background: linear-gradient(180deg, #fffbd0, #ffd522);
  clip-path: polygon(58% 0, 100% 0, 70% 39%, 100% 39%, 28% 100%, 45% 56%, 12% 56%);
  filter: drop-shadow(0 0 5px #fff589);
  opacity: 0;
  animation: lightningFlash 1.6s steps(1, end) infinite;
}

[data-motion="t-storms"] .motion-particle {
  z-index: 4;
  top: 22%;
  width: 9px;
  height: 72%;
  background: linear-gradient(180deg, #ffffff 0%, #fff36a 46%, #ffd522 100%);
  filter: drop-shadow(0 0 7px #ffffff);
  animation-name: stormLightningFlash;
  animation-duration: 1.9s;
}

[data-motion="t-storms"] .motion-particle:nth-child(1) { left: 12%; }
[data-motion="t-storms"] .motion-particle:nth-child(2) { left: 27%; height: 75%; }
[data-motion="t-storms"] .motion-particle:nth-child(3) { left: 42%; }
[data-motion="t-storms"] .motion-particle:nth-child(4) { left: 58%; height: 75%; }
[data-motion="t-storms"] .motion-particle:nth-child(5) { left: 73%; }
[data-motion="t-storms"] .motion-particle:nth-child(6) { left: 86%; height: 78%; }

@keyframes snowInside {
  to { background-position: 0 22px, 5px 31px, 0 0; }
}

@keyframes snowFall {
  from { transform: translate3d(0, -8px, 0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translate3d(9px, 110px, 0) rotate(240deg); opacity: .2; }
}

@keyframes blizzardSnow {
  from { transform: translate3d(-20px, -12px, 0); opacity: 0; }
  15% { opacity: 1; }
  to { transform: translate3d(330px, 24px, 0); opacity: .15; }
}

@keyframes blizzardWord {
  from { transform: translateX(-3px) skewX(-2deg); }
  to { transform: translateX(3px) skewX(2deg); }
}

@keyframes iceShine {
  0%, 100% { filter: brightness(.95); transform: translateY(0); }
  50% { filter: brightness(1.4); transform: translateY(-1px); }
}

@keyframes icicleGleam {
  0%, 100% { opacity: .42; transform: scaleY(.85); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes freezingDrop {
  from { translate: 0 -12px; opacity: 0; }
  12% { opacity: 1; }
  to { translate: -7px 112px; opacity: .18; }
}

@keyframes breezeWord {
  from { transform: translateX(-2px) skewX(-1deg); }
  to { transform: translateX(3px) skewX(2deg); }
}

@keyframes windStreak {
  from { transform: translateX(0) scaleX(.65); opacity: 0; }
  18% { opacity: .95; }
  to { transform: translateX(390%) scaleX(1.2); opacity: 0; }
}

@keyframes coldBounce {
  0%, 100% { transform: translateY(1px); }
  45% { transform: translateY(-5px); }
  65% { transform: translateY(0); }
}

@keyframes coolFloat {
  0%, 100% { transform: translateY(1px); }
  50% { transform: translateY(-2px); }
}

@keyframes colderShiver {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
}

@keyframes coldSparkle {
  0%, 100% { opacity: .18; transform: rotate(45deg) scale(.55); }
  50% { opacity: 1; transform: rotate(135deg) scale(1.1); }
}

@keyframes obscuredSway {
  from { transform: translateX(-20%) scaleX(.9); opacity: .28; }
  50% { opacity: .82; }
  to { transform: translateX(20%) scaleX(1.08); opacity: .35; }
}

@keyframes smokeSway {
  from { transform: translate(-14%, 6px) scale(.86); opacity: .2; }
  50% { opacity: .76; }
  to { transform: translate(14%, -5px) scale(1.08); opacity: .25; }
}

@keyframes heatShimmer {
  from { transform: translateY(1px) skewX(-1deg); filter: saturate(1); }
  to { transform: translateY(-2px) skewX(2deg); filter: saturate(1.35) brightness(1.14); }
}

@keyframes heatRise {
  from { transform: translateY(12px) skewX(-8deg); opacity: 0; }
  35% { opacity: .9; }
  to { transform: translateY(-70px) skewX(10deg); opacity: 0; }
}

@keyframes humidSag {
  0%, 100% { transform: translateY(-1px); }
  55% { transform: translateY(3px) scaleY(1.04); }
}

@keyframes humidDrop {
  from { transform: translateY(0) scale(.7); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateY(55px) scale(1); opacity: 0; }
}

@keyframes warmGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 193, 54, .35)); transform: scale(.98); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 206, 85, .85)); transform: scale(1.02); }
}

@keyframes warmMote {
  0%, 100% { transform: translateY(7px) scale(.55); opacity: .15; }
  50% { transform: translateY(-7px) scale(1); opacity: .8; }
}

@keyframes rainInside {
  to { background-position: 7px 24px, 0 0; }
}

@keyframes rainDrop {
  from { translate: 0 -14px; opacity: 0; }
  12% { opacity: .9; }
  to { translate: 5px 112px; opacity: .05; }
}

@keyframes stormPulse {
  0%, 72%, 100% { filter: brightness(1); transform: translateX(0); }
  74% { filter: brightness(1.8); transform: translateX(-2px); }
  80% { filter: brightness(1.12); transform: translateX(2px); }
}

@keyframes stormCloudBrood {
  from { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .78)) brightness(.86); }
  to { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .9)) brightness(1.12); }
}

@keyframes lightningFlash {
  0%, 67%, 75%, 100% { opacity: 0; }
  68%, 72% { opacity: 1; }
}

@keyframes stormLightningFlash {
  0%, 30%, 39%, 65%, 73%, 100% { opacity: .22; }
  31%, 36%, 66%, 70% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .forecast-motion-word *,
  .forecast-motion-word *::before,
  .forecast-motion-word *::after {
    animation-play-state: paused !important;
  }
}