/* Scent structure (js/scent-structure.js): the Drydown top / heart / base
   cell, drawn as one SVG at the Figma frame's 1470x980 size. One column at
   a time turns black and its ring builds in, petal by petal going round,
   while the ring itself swings into place. Columns already shown stay put
   but fade back to the gray. Everything is gray and empty to start. */

.scent-structure {
  --on: #000;
  --dim: #bfbfbf; /* black at 25% on white, as in Figma */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* lands with an overshoot */
  --stagger: 70ms; /* between each petal */
  display: block;
  width: 100%;
  height: 100%;
}

/* Each ring sits in its own tight SVG box. The global svg:not(:root)
   { overflow: hidden } (css/styles.css) would cut off petals as they
   overshoot and turn past it. */
.scent-structure > .scent-col > svg {
  overflow: visible;
}

.scent-col {
  color: var(--dim);
  transition: color 0.6s ease;
}

.scent-col.is-on {
  color: var(--on);
}

.scent-text {
  fill: currentColor;
  font-family: "Public Sans", sans-serif;
  font-size: 19.834px;
  letter-spacing: -0.02em;
  text-anchor: middle;
  dominant-baseline: central;
}

.scent-ring {
  fill: currentColor;
  rotate: -50deg;
  transition: rotate 0.4s ease;
}

.scent-col.is-built .scent-ring {
  rotate: 0deg;
  transition: rotate 1.6s var(--ease-out);
}

/* Each petal waits small, turned, and pulled in toward the ring's center
   (--x / --y is its offset from the center). Leaving is a quick fade. */
.scent-petal {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  scale: 0.2;
  rotate: -90deg;
  translate: calc(var(--x) * -0.6px) calc(var(--y) * -0.6px);
  transition:
    opacity 0.4s ease,
    scale 0.4s ease,
    rotate 0.4s ease,
    translate 0.4s ease;
}

.scent-col.is-built .scent-petal {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  translate: 0 0;
  transition:
    opacity 0.3s ease-out,
    scale 0.9s var(--ease-back),
    rotate 0.9s var(--ease-out),
    translate 0.9s var(--ease-back);
  transition-delay: calc(var(--i) * var(--stagger));
}

/* Reduced motion: all three rings shown, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .scent-col,
  .scent-ring,
  .scent-petal {
    transition: none !important;
  }
  .scent-col {
    color: var(--on);
  }
  .scent-ring,
  .scent-petal {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
  }
}

/* Scent cards: the Tonka / Rose / Bergamot photos (an image) with their
   white rings drawn over them, each ring turning slowly the whole time. */
.scent-cards {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
  pointer-events: none;
}

/* Same as above: let the rings turn past their tight SVG boxes */
.scent-cards > svg {
  overflow: visible;
}

.scent-spin {
  animation: scent-spin 40s linear infinite;
}

@keyframes scent-spin {
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scent-spin {
    animation: none;
  }
}