/* ============================================================================
   LUXE-STATIC.CSS  ·  the luxury light layer for the static pages
   Self-contained (hardcoded Warm Studio light values) so it renders identically
   across pet / topic / tool / guide / long-tail templates regardless of which
   tokens each defines. Purely additive: only new pseudo-elements and classes,
   never overriding existing component properties. Grain is an inline data-uri
   (CSP-safe). All animation is gated behind reduced-motion; drift + spotlight +
   sheen are desktop / fine-pointer only so phones stay fast.
   ========================================================================== */

/* 1 · AMBIENT AURORA - fixed wash of warm light behind the page */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  mix-blend-mode: multiply; will-change: transform;
  background:
    radial-gradient(34vmax 34vmax at 12% 6%, rgba(255, 231, 215, .85), transparent 64%),
    radial-gradient(30vmax 30vmax at 92% 14%, rgba(226, 240, 235, .7), transparent 62%),
    radial-gradient(28vmax 28vmax at 62% 108%, rgba(251, 239, 214, .6), transparent 66%);
}
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  body::before { animation: luxe-s-drift 40s ease-in-out infinite alternate; }
}
@keyframes luxe-s-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2vmax, -2vmax, 0) scale(1.06); }
}

/* 2 · FILM GRAIN - fixed, on top, ultra subtle */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply; background-size: 150px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3 · CURSOR SPOTLIGHT - div injected + driven by reveal.js (fine pointer only) */
.luxe-spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .5s ease; mix-blend-mode: soft-light;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 10%),
    rgba(255, 196, 148, .15), rgba(255, 196, 148, .04) 38%, transparent 64%);
}
@media (hover: hover) and (pointer: fine) { .luxe-spot.on { opacity: 1; } }

/* 4 · SPECULAR SHEEN - light sweep across the primary action on hover */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::after {
  content: ""; position: absolute; top: -10%; left: -75%; width: 45%; height: 120%;
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta:hover::after { animation: luxe-s-sheen .85s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes luxe-s-sheen { 0% { left: -75%; opacity: 0; } 12% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

/* 5 · GILDED HAIRLINE - a whisper of reflected light along surface edges */
.card, .panel, .hero, .cardlink, .related a {
  position: relative;
}
.card::before, .panel::before, .cardlink::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(135deg, rgba(255, 233, 210, .95) 0%, transparent 30%,
    transparent 70%, rgba(251, 106, 44, .4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before, .panel:hover::before, .cardlink:hover::before { opacity: .8; }

/* a faint top hairline of light, always on */
.card, .panel { box-shadow: 0 1px 2px rgba(72, 44, 18, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* 6 · HERO HEADLINE - a soft entrance sheen on the verdict / hero title */
.hero h1 { text-wrap: balance; }

/* REDUCED MOTION - hard stop */
@media (prefers-reduced-motion: reduce) {
  body::before, .cta::after { animation: none !important; }
  .luxe-spot { display: none !important; }
}