/* =========================================================
   Sparkle stars + button gloss  ✦  "kirkkaat kuin pesty ikkuna"
   ========================================================= */

/* bigger, bolder stars */
.stars { color: var(--star); display: inline-block; line-height: 1; letter-spacing: 2px; font-size: 17px; }
.hero__rating .stars { font-size: 20px; }
.rev-bar__l .stars { font-size: 23px; }
.rev .stars { font-size: 18px; }

/* shine sweep across the gold stars (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .stars {
    background-image: linear-gradient(105deg,
      var(--star) 0%, var(--star) 40%,
      #fff7d6 47%, #ffffff 50%, #fff7d6 53%,
      var(--star) 60%, var(--star) 100%);
    background-size: 280% 100%;
    background-position: 175% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: starSheen 2.4s ease-in-out infinite;
    filter: drop-shadow(0 1px 1px rgba(170,120,0,.18));
  }
  /* slight stagger so the page doesn't blink all at once */
  .rev-bar__l .stars { animation-delay: .3s; }
  .rev:nth-child(odd) .stars { animation-delay: .5s; }
  .rev:nth-child(even) .stars { animation-delay: .9s; }
}
@keyframes starSheen {
  0%   { background-position: 175% 0; }
  42%  { background-position: -75% 0; }
  100% { background-position: -75% 0; }
}

/* ---- button gloss: white shine line sweeps every couple seconds ---- */
.btn--primary, .btn--white { position: relative; overflow: hidden; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary::after,
  .btn--white::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -75%;
    width: 45%;
    height: 180%;
    background: linear-gradient(100deg,
      transparent 0%, rgba(255,255,255,.15) 30%,
      rgba(255,255,255,.65) 50%,
      rgba(255,255,255,.15) 70%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: btnSheen 3.4s ease-in-out infinite;
  }
  /* white buttons sit on dark bands — tint the sweep blue so it reads */
  .btn--white::after {
    background: linear-gradient(100deg,
      transparent 0%, color-mix(in oklab, var(--brand) 22%, transparent) 50%, transparent 100%);
  }
}
@keyframes btnSheen {
  0%   { left: -75%; }
  55%  { left: 135%; }
  100% { left: 135%; }
}

/* ---- subtle floating hero image + counter-bobbing badge ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: heroFloat 6.5s ease-in-out infinite; will-change: transform; }
  .hero__float { animation: heroFloat 6.5s ease-in-out infinite; animation-delay: -3.25s; will-change: transform; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}