{"version":3,"file":"weatherIcon.module.mjs","names":[],"sources":["../../../../package/common/weatherIcon/weatherIcon.module.pcss"],"sourcesContent":["/* Line art in `currentColor`, like every other icon: it takes the text colour it sits in. */\n.weatherIcon {\n  display: inline-block;\n  flex-shrink: 0;\n  fill: none;\n  stroke: currentcolor;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  &-behind {\n    transform-origin: 50px 50px;\n    transform: translate(14px, -16px) scale(0.62);\n  }\n\n  &-cloudBehind {\n    transform-origin: 50px 50px;\n    transform: translate(16px, -14px) scale(0.8);\n    opacity: 0.55;\n  }\n\n  /* Wandering and breathing share one keyframe: a running animation replaces the whole\n     `transform`, so two of them on one element would clobber each other. */\n  &-cloud {\n    stroke-width: 3;\n    transform-box: fill-box;\n    transform-origin: center;\n    animation: weatherIconCloudDrift 20s ease-in-out infinite;\n  }\n\n  /* Negative, so the second cloud starts partway through its cycle instead of easing in. */\n  &-cloudDelayed {\n    animation-delay: -9s;\n  }\n\n  &-sunRays {\n    transform-box: fill-box;\n    transform-origin: center;\n    animation: weatherIconRotate 150s linear infinite;\n  }\n\n  /* Anchored at the ray's inner end (y1 in parts.tsx), so it grows outwards whichever way it points. */\n  &-sunRay {\n    stroke-width: 3;\n    transform-origin: 50px 23px;\n    animation: weatherIconRayPulse 5s ease-in-out infinite;\n  }\n\n  &-sunRays > g:nth-child(3n + 2) &-sunRay {\n    animation-delay: 0.8s;\n  }\n\n  &-sunRays > g:nth-child(3n) &-sunRay {\n    animation-delay: 1.6s;\n  }\n\n  &-sunCore,\n  &-moonCore {\n    stroke-width: 3;\n    transform-box: fill-box;\n    transform-origin: center;\n    animation: weatherIconGlow 4s ease-in-out infinite;\n  }\n\n  &-star {\n    stroke-width: 1.4;\n    transform-box: fill-box;\n    transform-origin: center;\n    animation-name: weatherIconTwinkle;\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n  }\n\n  &-rain {\n    stroke-width: 2;\n  }\n\n  /* A dash of 6 slides along a path of 24.12 with a gap of exactly that length: it grows out of\n     the cloud, falls, and shrinks into the ground. With any other gap the loop does not close.\n     `backwards` keeps it hidden through its delay instead of showing the unanimated frame. */\n  &-drop {\n    stroke-dasharray: 6 24.12;\n    animation-name: weatherIconFall;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n    animation-fill-mode: backwards;\n  }\n\n  /* The drop's leading edge reaches the ground 24.12 into a cycle of 30.12, at 80%. The drop\n     fades out as it hits and the splash is at its fullest by 82%: on a slow lane, a splash that\n     peaked later came a visible moment after its drop. Left to sink into the ground, the drop's\n     tail also arrived after the splash and ended as a round-capped dot. */\n  &-splash {\n    stroke-width: 1;\n    opacity: 0;\n    transform-box: fill-box;\n    transform-origin: center;\n    animation-name: weatherIconRing;\n    animation-timing-function: ease-out;\n    animation-iteration-count: infinite;\n  }\n\n  &-snow {\n    stroke-width: 1.3;\n  }\n\n  /* Linear: easing would stop the flake in mid-air at every sway waypoint. */\n  &-flake {\n    animation-name: weatherIconSnowFall;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n    animation-fill-mode: backwards;\n  }\n\n  &-stone {\n    fill: currentcolor;\n    stroke: none;\n    animation-name: weatherIconHailFall;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n    animation-fill-mode: backwards;\n  }\n\n  &-impact {\n    stroke-width: 1;\n    opacity: 0;\n    transform-box: fill-box;\n    transform-origin: center;\n    animation-name: weatherIconRing;\n    animation-timing-function: ease-out;\n    animation-iteration-count: infinite;\n  }\n\n  /* Straight bars of different lengths: a wavy fog reads as an odd shape, not as fog. */\n  &-fog {\n    stroke-width: 4;\n\n    & line:nth-child(1) {\n      opacity: 0.55;\n      animation: weatherIconSway 6.5s ease-in-out infinite;\n    }\n\n    & line:nth-child(2) {\n      opacity: 0.85;\n      animation: weatherIconSway 8s ease-in-out -1.2s infinite reverse;\n    }\n\n    & line:nth-child(3) {\n      opacity: 0.7;\n      animation: weatherIconSway 7s ease-in-out -0.6s infinite;\n    }\n\n    & line:nth-child(4) {\n      opacity: 0.5;\n      animation: weatherIconSway 9s ease-in-out -2s infinite reverse;\n    }\n  }\n\n  /* Two quick flashes and a long dark stretch, well under the three flashes a second that\n     WCAG 2.3.1 sets as the limit. */\n  &-bolt {\n    stroke-width: 2.5;\n    animation: weatherIconFlash 4s linear infinite;\n  }\n}\n\n@keyframes weatherIconCloudDrift {\n  0%,\n  100% {\n    transform: translate(0, 0) scale(1);\n  }\n\n  22% {\n    transform: translate(1.2px, -1.6px) scale(1.015);\n  }\n\n  48% {\n    transform: translate(-0.9px, 1.4px) scale(1.03);\n  }\n\n  74% {\n    transform: translate(0.8px, -1.2px) scale(1.015);\n  }\n\n  90% {\n    transform: translate(-1.1px, 1px) scale(1.005);\n  }\n}\n\n@keyframes weatherIconRotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes weatherIconRayPulse {\n  50% {\n    transform: scaleY(1.3);\n  }\n}\n\n@keyframes weatherIconGlow {\n  0%,\n  100% {\n    opacity: 0.92;\n    transform: scale(1);\n  }\n\n  50% {\n    opacity: 1;\n    transform: scale(1.04);\n  }\n}\n\n@keyframes weatherIconTwinkle {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.7);\n  }\n\n  50% {\n    opacity: 1;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes weatherIconFall {\n  0% {\n    stroke-dashoffset: 6;\n    opacity: 1;\n  }\n\n  80% {\n    opacity: 1;\n  }\n\n  84% {\n    opacity: 0;\n  }\n\n  100% {\n    stroke-dashoffset: -24.12;\n    opacity: 0;\n  }\n}\n\n@keyframes weatherIconRing {\n  0%,\n  80% {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n\n  82% {\n    opacity: 0.85;\n    transform: scale(1);\n  }\n\n  100% {\n    opacity: 0;\n    transform: scale(1.4);\n  }\n}\n\n@keyframes weatherIconSnowFall {\n  0% {\n    transform: translate(0, 0);\n    opacity: 0;\n  }\n\n  6% {\n    opacity: 1;\n  }\n\n  25% {\n    transform: translate(3px, 8px);\n  }\n\n  50% {\n    transform: translate(-3px, 16px);\n  }\n\n  75% {\n    transform: translate(2px, 24px);\n  }\n\n  92% {\n    transform: translate(-1px, 29px);\n    opacity: 1;\n  }\n\n  100% {\n    transform: translate(0, 30px);\n    opacity: 0;\n  }\n}\n\n/* Lands at 80%, then bounces on along the way it was already drifting (sideways as well as up),\n   which reads as a bounce rather than a pop. Each stone sets its own landing spot. */\n@keyframes weatherIconHailFall {\n  0% {\n    transform: translate(0, 0);\n    opacity: 0;\n  }\n\n  10% {\n    opacity: 1;\n  }\n\n  80% {\n    transform: translate(calc(var(--weather-icon-dx) * 1px), calc(var(--weather-icon-dy) * 1px));\n    opacity: 1;\n    animation-timing-function: ease-out;\n  }\n\n  88% {\n    transform: translate(calc(var(--weather-icon-dx) * 2px), calc((var(--weather-icon-dy) - 2.5) * 1px));\n    opacity: 1;\n    animation-timing-function: ease-in;\n  }\n\n  100% {\n    transform: translate(calc(var(--weather-icon-dx) * 2.6px), calc(var(--weather-icon-dy) * 1px));\n    opacity: 0;\n  }\n}\n\n@keyframes weatherIconSway {\n  50% {\n    transform: translateX(3px);\n  }\n}\n\n@keyframes weatherIconFlash {\n  0%,\n  8%,\n  14%,\n  100% {\n    opacity: 0.35;\n  }\n\n  4%,\n  11% {\n    opacity: 1;\n  }\n}\n\n/* Falling parts pause rather than stop: parts.tsx gives each a negative delay that freezes it\n   partway down. The rest stop, and an impact frozen mid-pulse would be a stray mark, so it hides. */\n.weatherIcon-still {\n  & .weatherIcon-drop,\n  & .weatherIcon-flake,\n  & .weatherIcon-stone {\n    animation-play-state: paused;\n  }\n\n  & .weatherIcon-cloud,\n  & .weatherIcon-sunRays,\n  & .weatherIcon-sunRay,\n  & .weatherIcon-sunCore,\n  & .weatherIcon-moonCore,\n  & .weatherIcon-star,\n  & .weatherIcon-fog line,\n  & .weatherIcon-bolt {\n    animation: none;\n  }\n\n  & .weatherIcon-splash,\n  & .weatherIcon-impact {\n    animation: none;\n    opacity: 0;\n  }\n\n  & .weatherIcon-bolt {\n    opacity: 1;\n  }\n}\n\n/* The component switches to its still frame by itself; this covers where it cannot read the\n   setting, such as a server render. */\n@media (prefers-reduced-motion: reduce) {\n  .weatherIcon * {\n    animation-play-state: paused;\n  }\n}\n"],"mappings":""}