/* Product cycle: two grid cells, each on its own loop (js/product-cycle.js).
   Left, the product names build into a list from top to bottom; the
   newest is full strength, the earlier ones dim back. Once all are in,
   the list clears and starts over. Right, the bottles slide through
   sideways one at a time, leaning into the move and springing upright,
   while the next product's color sweeps in behind them. Sizes scale with
   the cell (cqw/cqh = % of the cell's width/height). */

/* Founders Grotesk Light, the TruBenefits product name typeface */
@font-face {
  font-family: "Founders Grotesk";
  src: url("../font/founders-grotesk-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---- Names ---- */
.name-cycle {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* quick start, long soft landing */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 8.02%; /* 58px on the 727px Figma cell (% of the cell's width) */
  overflow: hidden;
  background-color: #fff;
}

/* Sizes from Figma's 727px cell: 112.87px type, Auto line height (100.23px
   per line), 136px in from the left */
.name-cycle > span {
  display: block;
  padding-left: 18.71cqw;
  white-space: nowrap;
  font-family: "Founders Grotesk", Geist, sans-serif;
  font-weight: 300;
  font-size: 15.53cqw;
  line-height: 0.888;
  /* The tight line height leaves the letters taller than their box, and
     the blur would clip them to it. Extra room above and below, cancelled
     by the margins, so the spacing stays the same. */
  padding-block: 0.2em;
  margin-block: -0.2em;
  letter-spacing: -0.04em;
  color: var(--c);
  /* waiting below its spot, hidden */
  opacity: 0;
  translate: 0 45%;
  filter: blur(0.08em);
  transition:
    opacity 0.6s var(--ease-out),
    translate 0.6s var(--ease-out),
    filter 0.6s var(--ease-out);
}

/* In the list: earlier names dim back, the newest is full strength */
.name-cycle > span.is-shown {
  opacity: 0.3;
  translate: 0 0;
  filter: blur(0);
}

.name-cycle > span.is-shown.is-current {
  opacity: 1;
}

/* The list is full: names lift away top to bottom, a beat apart (--n is
   each name's place, set by the script) */
.name-cycle.is-clearing > span {
  opacity: 0;
  translate: 0 -35%;
  filter: blur(0.06em);
  transition-duration: 0.35s;
  transition-timing-function: var(--ease-in);
  transition-delay: calc(var(--n, 0) * 25ms);
}

/* Resetting the list unseen before it builds again */
.name-cycle.no-transition > span {
  transition: none;
}

/* ---- Bottles ---- */
.bottle-cycle {
  --slide: 0.9s cubic-bezier(0.65, 0, 0.35, 1); /* eases in and out of every step */
  --spring: 0.9s cubic-bezier(0.34, 1.5, 0.64, 1); /* overshoots a little, then settles */
  container-type: size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg, #fff); /* the current product's color (set by the script) */
}

/* The next product's color, sweeping in as a circle from the right edge,
   where the next bottle comes from (.is-washing, set by the script). A
   round shape that scales up from the middle of the right edge, as big as
   the clip-path circle(130%) it replaced in this 3:4 cell, so the browser
   can run it off the main thread (a growing clip-path is repainted every
   frame). */
.bottle-cycle_wash {
  position: absolute;
  top: 50%;
  right: -153cqw;
  width: 306cqw;
  height: 306cqw;
  margin-top: -153cqw;
  border-radius: 50%;
  background-color: var(--next, transparent);
  scale: 0;
}

.bottle-cycle_wash.is-washing {
  scale: 1;
  transition: scale var(--slide);
}

/* A soft light behind the bottle and a gentle shade at the bottom, so the
   flat color has some depth. Above the color, under the bottles. */
.bottle-cycle::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 48%, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 70%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.14));
  pointer-events: none;
}

.bottle-cycle_track {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  /* shows bottle --i (set by js/product-cycle.js) */
  translate: calc(var(--i, 0) * -100cqw) 0;
  transition: translate var(--slide);
}

/* One bottle per slide, each the full cell, exactly as in Figma */
.bottle-cycle_track > * {
  flex: none;
  width: 100cqw;
  height: 100%;
}

/* Bottles on the move lean into it (tops first, toward the left) and sit
   a little smaller; the one arriving springs upright to full size, rocking
   just past straight before it settles */
.bottle-cycle_track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 80%; /* pivots low, like it's being carried */
  rotate: -9deg;
  scale: 0.86;
  transition:
    rotate var(--slide),
    scale var(--slide);
}

.bottle-cycle_track > .is-active img {
  rotate: 0deg;
  scale: 1;
  transition:
    rotate var(--spring),
    scale var(--spring);
}

/* The instant jump back to the start of the loop */
.bottle-cycle_track.no-transition,
.bottle-cycle_track.no-transition img {
  transition: none;
}

.product-cycle-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .name-cycle > span,
  .bottle-cycle_track,
  .bottle-cycle_track img,
  .bottle-cycle_track > .is-active img {
    transition: none;
  }
}