/* Blue Queen: touch-only hero reveal enhancement (v0.8).
 * This stylesheet is loaded only on the homepage. All original hero markup,
 * styles and JavaScript remain untouched. Desktop mouse spotlight stays intact.
 */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  /* On touch devices there is no hover point to reveal the photo: guide the
     visitor's eye with a short drifting spotlight, then reveal the full photo. */
  .hero .hero-image-lit {
    animation: bq-touch-photo-reveal 3.65s cubic-bezier(.32, .02, .18, 1) .55s both;
    transition: none;
  }

  /* A brief, restrained glow accompanies the spotlight before fading away. */
  .hero .hero-reveal-halo,
  .hero:hover .hero-reveal-halo {
    background: radial-gradient(circle 135px at 67% 36%,
      rgba(255,255,255,.085), rgba(255,255,255,0) 76%);
    animation: bq-touch-spotlight-glow 3.0s ease .7s both;
  }

  @keyframes bq-touch-photo-reveal {
    0%   { clip-path: circle(0px at 77% 29%); }
    24%  { clip-path: circle(76px at 77% 29%); }
    50%  { clip-path: circle(112px at 64% 39%); }
    65%  { clip-path: circle(125px at 58% 42%); }
    100% { clip-path: circle(150vmax at 50% 50%); }
  }

  @keyframes bq-touch-spotlight-glow {
    0%, 8%   { opacity: 0; }
    27%      { opacity: .85; }
    58%      { opacity: .45; }
    100%     { opacity: 0; }
  }
}

/* Respect visitors who prefer less animation. Show the full hero photograph
   immediately instead of leaving the hidden pointer-dependent circle. */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .hero .hero-image-lit {
    animation: none !important;
    clip-path: circle(150vmax at 50% 50%);
    transition: none !important;
  }
  .hero .hero-reveal-halo,
  .hero:hover .hero-reveal-halo {
    animation: none !important;
    opacity: 0 !important;
  }
}