/* ============================================================
   VRITTI SPACE — Lightweight wow-effects layer
   ⓐ Custom cursor (dot + ring follower)
   ⓑ Card spotlight (cursor-tracked radial glow inside cards)
   ⓒ Image clip-path reveal on scroll
   All effects are CSS-variable driven so the JS stays tiny.
   ============================================================ */

/* Custom cursor removed — default OS cursor used throughout. */

/* ── ⓑ Card spotlight — cursor-tracked radial glow inside cards ── */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}
[data-spotlight]::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(138, 170, 124, 0.18),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

/* ── ⓒ Image clip-path reveal — wipes in from below ─────────── */
/* Default: fully visible (no clip). The IntersectionObserver was failing
   for some hosts and leaving images permanently invisible. Keep images
   visible by default; the reveal animation is a progressive enhancement. */
[data-clip-reveal] {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 1.2s cubic-bezier(0.22,1,0.36,1), transform 1.4s cubic-bezier(0.22,1,0.36,1);
}
[data-clip-reveal].is-revealed {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-clip-reveal] { clip-path: none; transform: none; transition: none; }
}

/* ── ⓓ Button shimmer — light sweep on hover ─────────────────── */
.hero-btn-glass,
.hero-btn-light,
.cats-cta-pill,
.six-ctas .btn-solid,
.footer-btn,
.btn-primary,
.path-card-cta {
  position: relative; overflow: hidden; isolation: isolate;
}
.hero-btn-glass::after,
.hero-btn-light::after,
.cats-cta-pill::after,
.six-ctas .btn-solid::after,
.footer-btn::after,
.btn-primary::after,
.path-card-cta::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: -1;
}
.hero-btn-glass:hover::after,
.hero-btn-light:hover::after,
.cats-cta-pill:hover::after,
.six-ctas .btn-solid:hover::after,
.footer-btn:hover::after,
.btn-primary:hover::after,
.path-card-cta:hover::after {
  left: 160%;
  transition: left 0.6s cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-btn-glass::after, .hero-btn-light::after, .cats-cta-pill::after,
  .six-ctas .btn-solid::after, .footer-btn::after, .btn-primary::after, .path-card-cta::after { display: none; }
}

/* ── ⓔ Pinned hero — hero stays put, next sections slide over (3D feel) ──
   The hero gets position:sticky at top:0, so as the user scrolls the next
   section literally slides UP over it. Subsequent sections need a solid
   background so they fully obscure the pinned hero underneath.            */
@media (min-width: 769px) {
  body.has-hero #hero {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Subtle "pushed back" depth as the next section approaches */
    animation: heroPinSettle linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
    will-change: transform, opacity, filter;
  }
  @keyframes heroPinSettle {
    to {
      transform: scale(0.94) translateY(-3%);
      opacity: 0.92;
    }
  }
  /* Everything after the hero rides above it */
  body.has-hero main > section:not(#hero),
  body.has-hero main > div:not(#hero),
  body.has-hero main > p:not(#hero) {
    position: relative;
    z-index: 2;
  }
  /* The section directly after the hero gets a soft top edge so the entrance feels intentional */
  body.has-hero #hero + * {
    border-top-left-radius: clamp(24px, 3vw, 48px);
    border-top-right-radius: clamp(24px, 3vw, 48px);
    box-shadow: 0 -24px 60px rgba(0,0,0,0.18);
    overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.has-hero #hero { position: relative; animation: none; }
}