/* ==========================================================================
   SHINY LOGO — a diagonal light sweep across the Tarama logo, masked to the
   logo's own silhouette. The logo is an <img> (not text), so the classic
   background-clip:text shine trick becomes mask-image: url(logo.svg) on an
   overlay instead: the browser uses the SVG's alpha channel as a stencil,
   so the moving gradient only ever shows through the letterforms.
   ========================================================================== */

.shiny-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
  isolation: isolate; /* contain the sweep's screen blend to this logo's own
                          layers, not whatever sits behind it on the page */
}

.shiny-logo__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen; /* additive light, so it reads as a glint even
                              against the logo's own near-white cream */
  -webkit-mask-image: var(--shine-mask, url("../img/tarama-logo-cream.svg"));
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-image: var(--shine-mask, url("../img/tarama-logo-cream.svg"));
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    rgba(255, 255, 255, 0.55) 45%,
    #fff 50%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 75%
  );
  background-size: 260% 100%;
  background-position: 160% center;
  animation: shine-sweep var(--shine-speed, 5.5s) ease-in-out infinite;
  animation-delay: var(--shine-delay, 1s);
}

@keyframes shine-sweep {
  0%   { background-position: 160% center; }
  70%  { background-position: -60% center; }
  100% { background-position: -60% center; }
}

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