/* ============================================================
   METABLIS — IMMERSIVE 3D DEPTH & INTERACTION LAYER
   Real scroll-linked parallax depth, cursor-driven 3D tilt on
   cards, magnetic buttons, a custom cursor, and 3D-ified scroll
   reveals layered on top of the existing AOS scroll-reveal
   attributes already used throughout the page.
   Loaded last so it can safely override earlier declarations.
   ============================================================ */

/* Note: this file deliberately avoids the @property CSS at-rule. It gives
   smoother interpolation for custom properties used inside @keyframes, but
   several widely-used browsers (older Firefox releases in particular) do not
   support it. Everything below works with plain CSS custom properties + the
   `transform` property's own native transition/interpolation, which every
   modern browser has supported for well over a decade — the safer choice
   for "compatible with all devices and browsers". Orb/floating-card motion
   (which needs a continuously looping idle animation blended with a
   scroll-linked offset) is computed and applied directly by JavaScript every
   frame instead of via CSS keyframes, for identical, guaranteed-smooth
   behaviour everywhere. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Site-wide 3D depth reveal (overrides AOS's flat fade) ---------- */
  [data-aos] {
    transform: perspective(1400px) translateY(56px) rotateX(9deg) !important;
  }
  [data-aos].aos-animate {
    transform: perspective(1400px) translateY(0) rotateX(0deg) !important;
  }
  [data-aos="zoom-in"] {
    transform: perspective(1400px) scale(.86) rotateY(10deg) !important;
  }
  [data-aos="zoom-in"].aos-animate {
    transform: perspective(1400px) scale(1) rotateY(0deg) !important;
  }
  [data-aos="fade-left"] {
    transform: perspective(1400px) translateX(70px) rotateY(-14deg) !important;
  }
  [data-aos="fade-left"].aos-animate {
    transform: perspective(1400px) translateX(0) rotateY(0deg) !important;
  }
  [data-aos] { transition-duration: .9s !important; transition-timing-function: cubic-bezier(.16,.84,.32,1) !important; }

  /* ---------- Hero background orbs & floating stat cards ----------
     Idle float + scroll parallax are both computed in JS (depth-effects.js)
     and written to this element's transform directly, so no CSS animation
     is declared here at all — avoids any risk of the browser's CSS engine
     fighting with JS-driven inline styles. */
  .hero-orb1, .hero-orb2, .floating-card {
    will-change: transform;
  }

  /* ---------- Cursor-driven 3D tilt cards ---------- */
  .tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
    transition: transform .5s cubic-bezier(.16,.84,.32,1);
  }
  .tilt-card.tilting { transition: transform .05s linear; }
  .tilt-card > * { transform: translateZ(18px); }

  /* Ebook cover gets a bit more depth range and a light sheen that tracks the tilt */
  .ebook-cover.tilt-card { transform-origin: center; }
  .ebook-cover.tilt-card::after {
    content:'';
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(circle at calc(50% + var(--tilt-y, 0deg) * 3) calc(50% - var(--tilt-x, 0deg) * 3), rgba(255,255,255,.22), transparent 55%);
    opacity: var(--sheen-opacity, 0);
    transition: opacity .4s ease;
    mix-blend-mode: overlay;
  }
  .ebook-cover.tilt-card.tilting::after { opacity: 1; }

  /* ---------- Magnetic buttons ---------- */
  .magnetic-btn {
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
    transition: transform .35s cubic-bezier(.16,.84,.32,1);
    will-change: transform;
  }
  .magnetic-btn.magnetizing { transition: transform .08s linear; }

  /* ---------- Custom cursor (desktop / fine-pointer only) ---------- */
  .depth-cursor-dot, .depth-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    /* Must always sit above every overlay (entrance popup, chat widget, exit-
       intent modal) — the native cursor is turned off globally below, so if
       anything renders above this layer the cursor effectively disappears
       while that overlay is open. Highest z-index on the page, deliberately. */
    z-index: 10200;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  .depth-cursor-dot {
    width: 8px; height: 8px;
    background: var(--primary, #1aa872);
    transition: opacity .2s ease, width .25s ease, height .25s ease;
  }
  .depth-cursor-ring {
    width: 38px; height: 38px;
    border: 1.5px solid rgba(26,168,114,.55);
    transition: opacity .2s ease, width .25s ease, height .25s ease, border-color .25s ease;
  }
  .depth-cursor-ring.hovering {
    width: 60px; height: 60px;
    border-color: rgba(26,168,114,.9);
    background: rgba(26,168,114,.08);
  }
  .depth-cursor-dot.hovering { width: 5px; height: 5px; }
  body.depth-cursor-active, body.depth-cursor-active a, body.depth-cursor-active button {
    cursor: none;
  }

  /* ---------- Hero perspective stage for extra depth on the visual/carousel ---------- */
  .hero-visual { transform-style: preserve-3d; }
}

/* Disable everything above for touch devices / reduced-motion regardless of JS state */
@media (hover: none), (pointer: coarse) {
  .depth-cursor-dot, .depth-cursor-ring { display: none !important; }
  body.depth-cursor-active, body.depth-cursor-active a, body.depth-cursor-active button { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb1, .hero-orb2, .floating-card { animation: none !important; transform: none !important; }
  .tilt-card, .magnetic-btn { transform: none !important; transition: none !important; }
}

/* ---------- Safari-specific compatibility ----------
   Safari (including iOS) needs the -webkit- prefix for backdrop-filter on
   some versions still in real-world use; harmless no-op elsewhere. */
.priya-chat-shell, .mobile-nav, .floating-card {
  -webkit-backdrop-filter: blur(15px);
}