/* warranty-ten-winters: ten winters pass along a ruler of numerals; the lamp above never changes. */
.feat-warranty-ten-winters { container-type: inline-size; background: var(--bg); }

/* snow light: a cool wash from the top of the frame, faded in and out by script once per winter */
.feat-warranty-ten-winters .winter {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to bottom, rgba(168,178,198,.16) 0%, rgba(168,178,198,.07) 45%, rgba(168,178,198,0) 85%);
  will-change: opacity;
}

/* the lamp: one warm, steady light */
.feat-warranty-ten-winters .lamp {
  position: absolute; left: 50%; top: 40%; width: 70cqw; height: 40cqw;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255,205,140,.55) 0%, rgba(240,165,90,.30) 18%, rgba(201,138,75,.12) 40%, rgba(201,138,75,0) 66%);
}
.feat-warranty-ten-winters .core {
  position: absolute; left: 50%; top: 50%; width: 2.6cqw; height: 2.6cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff4e2 0%, #ffd9a6 45%, rgba(255,210,160,0) 100%);
}

/* the ruler of years */
.feat-warranty-ten-winters .years {
  position: absolute; left: 10cqw; right: 10cqw; top: 66%;
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 340; font-variation-settings: "opsz" 96;
  font-size: 4.6cqw; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
}
.feat-warranty-ten-winters .y {
  position: relative; width: 6cqw; text-align: center;
  color: var(--fg); opacity: .28;
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity;
}
.feat-warranty-ten-winters .y::before {
  content: ""; position: absolute; left: 50%; top: -2.4cqw; width: 1px; height: 1.4cqw;
  background: var(--fg); opacity: .5;
}
.feat-warranty-ten-winters .y.on { opacity: 1; }
.feat-warranty-ten-winters .caption {
  position: absolute; left: 0; right: 0; top: 66%; margin-top: 7.2cqw;
  text-align: center;
  font-family: var(--font-ui); font-size: clamp(9px, 1.2cqw, 13px); letter-spacing: .24em; text-indent: .24em;
  text-transform: uppercase; color: var(--fg-dim);
}