/* =========================================================================
   effects.css - premium interaction layer (loads AFTER home.css).
   Newest-CSS "wow" that GSAP is not already doing. Everything is gated on
   prefers-reduced-motion + a fine pointer, so touch/reduced-motion users
   get the clean static site. Nothing here is load-bearing.
   ========================================================================= */

/* ---- 1. :has() card-grid SPOTLIGHT ------------------------------------ *
 * Parent selector: when any card in a grid is hovered, the OTHERS recede.
 * Focuses the eye on one card with zero JS. (Chrome 105+, Safari 15.4+.)  */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .feature-grid .feature-card, .fx-grid .fx-card,
  .team-grid .team-card, .blog-grid-q .blog-card-blk {
    transition: opacity .35s var(--ease), filter .35s var(--ease),
                transform var(--t-base), box-shadow var(--t-base),
                border-color var(--t-base), background var(--t-base);
  }
  .feature-grid:has(.feature-card:hover) .feature-card:not(:hover),
  .fx-grid:has(.fx-card:hover) .fx-card:not(:hover),
  .team-grid:has(.team-card:hover) .team-card:not(:hover),
  .blog-grid-q:has(.blog-card-blk:hover) .blog-card-blk:not(:hover) {
    opacity: .5;
    filter: saturate(.75);
  }
}

/* ---- 2. Cursor-tracked GLOW on the dark glass service cards ----------- *
 * A soft brand light that follows the pointer inside each card. JS sets
 * --mx/--my (effects.js); colour built with color-mix() in OKLCH for a
 * cleaner, more luminous blend than rgba. ::before is free on these cards
 * (their gradient border uses the padding-box/border-box trick, not ::before). */
.section-dark .feature-card { position: relative; overflow: hidden; }
.section-dark .feature-card > * { position: relative; z-index: 1; }
.section-dark .feature-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklch, var(--brand-light) 48%, transparent), transparent 62%);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .section-dark .feature-card:hover::before { opacity: 1; }
}

/* ---- 3. Fine GRAIN on dark texture sections -------------------------- *
 * A whisper of film grain blended into the existing dark overlay adds depth
 * so flat dark panels do not read as plastic. Sits in ::before, behind the
 * content (.texture-dark > .container is already z-index:1), so it is safe. */
.texture-dark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  background-blend-mode: overlay;
}

/* ---- 4. Slow "breathing" glow on dark sections (animated gradient depth) ------
 * Animates the opacity of the existing corner-glow layers on the dark home services
 * band and the CTA banner, so flat dark panels feel alive. Motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .glow-corners::after, .cta-section::after { animation: sagGlow 14s ease-in-out infinite; }
  @keyframes sagGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
}