/* The weather in a word: five days of weather on a black page, in Roboto Flex (a variable sans with the axes of width,
   weight, slant and optical size). The word of the weather is the picture; the script moves every letter on its own
   springs, writing the axes and the transforms every frame. */
:root {
  --page: #000000;                    /* the page */
  --ink: #f3f1ea;                     /* the word, the figures, the day chosen */
  --grey: #85827a;                    /* the place, the note, the other days */
  --soft: rgba(243, 241, 234, 0.18);  /* the two hairline rules */
  --accent: #5f8bff;                  /* the tick over the day chosen and the drops of rain */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the widget stands in the middle of the page */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

p {
  margin: 0;
}

/* ---------------------------------------------------------------- the widget */
.forecast {
  position: relative;
  width: min(380px, 100%);
  padding: 24px 0 0;
  user-select: none;
  -webkit-user-select: none;
}

.rule {
  display: block;
  height: 1px;
  background: var(--soft);
  transform-origin: 0 50%;
  pointer-events: none;
}

.rule--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* a word or a figure that changes: the old one leaves, the new one comes in */
.swap {
  display: inline-block;
  white-space: nowrap;
}

.swap > span {
  display: inline-block;
}

/* ---------------------------------------------------------------- the place and the day */
.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.2;
  font-variation-settings: 'wdth' 100, 'wght' 460;
}

.head__place {
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 620;
}

.head__day {
  color: var(--grey);
}

/* ---------------------------------------------------------------- the temperature */
.temp {
  display: flex;
  align-items: flex-start;
  height: 74px;
  margin-top: 26px;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 190, 'opsz' 144;
  clip-path: inset(-4px -40px 0 -40px);
}

.temp__slot {
  position: relative;
  display: block;
  white-space: nowrap;
}

.temp__group {
  display: inline-block;
  white-space: nowrap;
}

.temp__group.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
}

.temp__group > span {
  display: inline-block;
}

.temp__deg {
  display: block;
  color: var(--grey);
  font-variation-settings: 'wdth' 100, 'wght' 160, 'opsz' 144;
}

/* ---------------------------------------------------------------- the word: the picture of the weather */
/* the box keeps room above the word (the snow comes down into it) and under it (the rain drips into it), and clips
   both: nothing that falls ever crosses the figures or the note */
.word {
  --size: 92px;                     /* the script sets it, so that Clear, the widest, fills the line */
  position: relative;
  height: calc(var(--size) * 1.5);
  margin-top: 6px;
  font-size: var(--size);
  line-height: 1;
  clip-path: inset(0 -40px 0 -40px);
  cursor: default;
}

.row {
  position: absolute;
  left: 0;
  top: calc(var(--size) * 0.24);
  display: flex;
  white-space: nowrap;
}

/* a letter: the script moves the letter; inside it, the whole glyph, or (while it drips) three slices of it */
.l {
  --cut: 0.66em;                    /* where the letter is cut to drip, from the top of its box */
  --s: 1;                           /* how many times the slice under the cut is stretched */
  --drop: 0px;                      /* how far the bottom of the letter has gone down */
  position: relative;
  display: block;
  transform-origin: 50% 82%;
  will-change: transform;
}

.l__whole {
  display: block;
}

.l__cut {
  position: absolute;
  inset: 0;
  display: none;
}

.l.is-dripping .l__whole {
  visibility: hidden;
}

.l.is-dripping .l__cut {
  display: block;
}

.l__cut--top {
  clip-path: inset(-0.4em -0.4em calc(100% - var(--cut) - 0.6px) -0.4em);
}

.l__cut--band {
  clip-path: inset(var(--cut) -0.4em calc(100% - var(--cut) - 1.5px) -0.4em);
  transform-origin: 50% var(--cut);
  transform: scaleY(var(--s));
}

.l__cut--bottom {
  clip-path: inset(calc(var(--cut) + 0.9px) -0.4em -0.4em -0.4em);
  transform: translateY(var(--drop));
}

/* a drop of rain that leaves a letter */
.drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the note under the word */
.note {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.3;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

.note__low {
  font-variant-numeric: tabular-nums;
}

.rule--mid {
  margin-top: 24px;
}

/* ---------------------------------------------------------------- the days */
.days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* the tick hangs from the rule over the day chosen */
.days__tick {
  position: absolute;
  top: -1px;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--accent);
  transform-origin: 0 50%;
  pointer-events: none;
}

.day {
  display: grid;
  justify-self: start;
  justify-items: start;
  gap: 3px;
  margin: 0;
  padding: 16px 0 8px;
  border: 0;
  background: none;
  color: var(--grey);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.day:focus {
  outline: none;
}

.day__name {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  transition: color 0.3s ease, font-variation-settings 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.day__temp {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  transition: color 0.3s ease;
}

.day[aria-checked='true'] .day__name {
  color: var(--ink);
  font-variation-settings: 'wdth' 118, 'wght' 680;   /* the script measures the tick in this same pose */
}

.day[aria-checked='true'] .day__temp {
  color: var(--ink);
}

@media (hover: hover) {
  .day:hover .day__name {
    color: var(--ink);
  }
}

.day.is-pressed .day__name {
  font-variation-settings: 'wdth' 84, 'wght' 560;
}

/* the keys: a thin frame round the day */
.day:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* On a real page the widget sits wherever the layout puts it (a sidebar, the top of a resort's page): take away the
   .stage grid and give .forecast the width of its column. */

/* moving less: the days change colour only */
@media (prefers-reduced-motion: reduce) {
  .day__name {
    transition: color 0.2s ease;
  }
}