/* ============================================================
   KEVO — FX layer (futuristic-light enhancements).
   Fully self-contained & optional: remove the fx.css + fx.js
   <link>/<script> lines from a page to roll back completely.
   All motion is gated behind prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero aurora (soft champagne light drift) ---- */
  html.fx .hero { position: relative; }
  .fx-aurora {
    position: absolute; inset: -25% -12% auto -12%; height: 135%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(38% 48% at 28% 32%, rgba(233,213,161,.55), transparent 60%),
      radial-gradient(34% 44% at 74% 38%, rgba(214,225,240,.42), transparent 62%),
      radial-gradient(30% 40% at 56% 74%, rgba(246,224,190,.45), transparent 60%);
    filter: blur(34px); opacity: .8;
    animation: fxAurora 18s ease-in-out infinite alternate;
  }
  @keyframes fxAurora {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(3%,2%) scale(1.08); }
    100% { transform: translate(-2%,-1%) scale(1.04); }
  }
  html.fx .hero-grid, html.fx .scroll-hint { position: relative; z-index: 1; }

  /* ---- Twinkling diamond sparkles ---- */
  .fx-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .fx-sparkles span {
    position: absolute; width: var(--sz,3px); height: var(--sz,3px); border-radius: 50%;
    background: #fff; box-shadow: 0 0 6px 2px rgba(233,213,161,.9);
    opacity: 0; animation: fxTwinkle var(--d,3s) ease-in-out var(--dl,0s) infinite;
  }
  @keyframes fxTwinkle {
    0%, 100% { opacity: 0; transform: scale(.35); }
    50%      { opacity: .9; transform: scale(1); }
  }

  /* ---- Light sweep across gold buttons ----
     The sweep used to be an ::after clipped by overflow:hidden. Clipping a
     continuously-animating child against a 100px radius leaves an anti-aliased
     seam, and the seam is widest where the curve is tightest — so both pill caps
     showed a white crescent. Painting the sweep as an extra BACKGROUND layer
     needs no clipping at all: background layers are painted inside the element's
     own rounded border-box, so the caps stay solid gold. */
  html.fx .btn-gold {
    background-image:
      linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%),
      var(--grad-gold);
    background-size: 60% 100%, 100% 100%;
    background-repeat: no-repeat;
    /* .btn-gold carries a 1px TRANSPARENT border for size parity with .btn-line.
       background-origin defaults to padding-box, so a layer sized 100% stops at
       the padding edge and leaves that 1px ring uncovered — a pale outline all
       the way round the pill. (The plain shorthand hid this because an unset
       background-repeat tiles the gradient over the border too.) Painting from
       the border box fills the ring. */
    background-origin: border-box;
    background-clip: border-box;
    animation: fxSheen 5s ease-in-out infinite;
  }
  /* background-position % resolves to  P x (boxWidth - layerWidth).  The layer is
     NARROWER than the button here, so the maths stays intuitive and, more
     importantly, both resting values park the sweep completely OFF the button.
     (With a layer wider than the box the sign flips — that parked the highlight
     on the right cap and made the edge look unclean.) */
  @keyframes fxSheen {
    0%, 100% { background-position: -200% 0, 0 0; }
    32%      { background-position:  400% 0, 0 0; }
  }

  /* ---- Mouse-parallax easing on the hero piece ---- */
  html.fx .hero-img { transition: transform .35s ease-out; }

  /* ---- Gold headline shimmer ---- */
  html.fx .display em {
    background: linear-gradient(100deg, #a97e34, #e9d5a1, #c6a15b, #a97e34);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: fxShimmer 6.5s linear infinite;
  }
  @keyframes fxShimmer { to { background-position: 200% center; } }

  /* ---- Cinematic image reveals (piggyback the .in class) ---- */
  html.fx .piece-img img, html.fx .celeb-img img {
    clip-path: inset(0 0 10% 0); opacity: .001;
    transition: clip-path 1s var(--ease), opacity .8s var(--ease), transform 1s var(--ease);
  }
  html.fx .reveal.in .piece-img img, html.fx .reveal.in .celeb-img img {
    clip-path: inset(0 0 0 0); opacity: 1;
  }
  html.fx .col-media { transition: transform 1.3s var(--ease), opacity 1s var(--ease); }
  html.fx .col-card.reveal .col-media { opacity: 0; transform: scale(1.12); }
  html.fx .col-card.reveal.in .col-media { opacity: 1; transform: scale(1); }

  /* ---- Story image gentle reveal ---- */
  html.fx .story-media img { transition: transform 1.4s var(--ease), opacity 1s var(--ease); }
  html.fx .story-media.reveal img { opacity: 0; transform: scale(1.08); }
  html.fx .story-media.reveal.in img { opacity: 1; transform: scale(1); }
}