/* Hero animation — Option D: logo shine + paint glint
   Linked after styles.css on the home page only.
   A gleam sweeps the header mark and the PR wordmark, then a soft
   highlight glides across the cars, on a 7-second cycle.
   Honors prefers-reduced-motion. Does not change layout. */

/* --- Header logo --- */
.logo{
  position:relative;
  isolation:isolate;
}
.logo .header-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:url("img/header-shine-mask.png");
          mask-image:url("img/header-shine-mask.png");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  mask-mode:alpha;
  -webkit-mask-source-type:alpha;
}
.logo .header-shine::after{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:0;
  width:40%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.15) 35%,
    rgba(255,255,255,.95) 50%,
    rgba(255,210,160,.55) 62%,
    transparent 80%);
  transform:translateX(-180%) skewX(-20deg);
  mix-blend-mode:plus-lighter;
  opacity:.8;
  pointer-events:none;
}
html.anim-ready .logo .header-shine::after{
  animation:pr-shine-sweep 7s ease-in-out infinite;
}

/* --- Banner: move the existing left/right edge fade from the <img>
   to the .bimg wrapper so the shine and glint fade with the graphic. */
.bannerhero .bimg{
  overflow:hidden;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.bannerhero .bimg img{
  -webkit-mask-image:none;
          mask-image:none;
}

.hero-shine,
.hero-glint{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  mask-mode:alpha;
  -webkit-mask-source-type:alpha;
}
.hero-shine{
  -webkit-mask-image:url("img/hero-shine-mask.png");
          mask-image:url("img/hero-shine-mask.png");
}
.hero-glint{
  -webkit-mask-image:url("img/hero-paint-mask.png");
          mask-image:url("img/hero-paint-mask.png");
}

.hero-shine::after{
  content:"";
  position:absolute;
  top:-8%;
  height:70%;
  left:0;
  width:22%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 30%,
    rgba(255,255,255,.85) 48%,
    rgba(255,255,255,1) 50%,
    rgba(255,200,140,.6) 56%,
    rgba(255,255,255,.1) 70%,
    transparent 100%);
  filter:blur(3px);
  transform:translateX(-200%) skewX(-22deg);
  mix-blend-mode:plus-lighter;
  opacity:.7;
  pointer-events:none;
}
html.anim-ready .hero-shine::after{
  animation:pr-shine-sweep 7s ease-in-out infinite;
}

.hero-glint::after{
  content:"";
  position:absolute;
  top:58%;
  bottom:-6%;
  left:0;
  width:22%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.0) 22%,
    rgba(255,255,255,.35) 40%,
    rgba(255,255,255,.9) 50%,
    rgba(255,220,190,.45) 58%,
    rgba(255,255,255,.15) 70%,
    transparent 90%);
  filter:blur(6px);
  transform:translateX(-200%) skewX(-18deg);
  mix-blend-mode:plus-lighter;
  opacity:.58;
  pointer-events:none;
}
html.anim-ready .hero-glint::after{
  animation:pr-paint-glint 7s ease-in-out infinite;
}

@keyframes pr-shine-sweep{
  0%, 6%{ transform:translateX(-200%) skewX(-22deg); }
  24%{ transform:translateX(520%) skewX(-22deg); }
  25%, 100%{ transform:translateX(520%) skewX(-22deg); }
}
@keyframes pr-paint-glint{
  0%, 30%{ transform:translateX(-200%) skewX(-18deg); }
  58%{ transform:translateX(460%) skewX(-18deg); }
  59%, 100%{ transform:translateX(460%) skewX(-18deg); }
}

@media (prefers-reduced-motion:reduce){
  .logo .header-shine::after,
  .hero-shine::after,
  .hero-glint::after{
    animation:none !important;
    transform:translateX(-200%) !important;
    filter:none !important;
  }
}