/* ============================================================
   NammaCare — 3D depth layer (LOCAL EXPERIMENT, v2 "louder")
   Strong cursor-tilt cards + glare, deep layer separation,
   floating 3D shapes in heroes, magnetic buttons, ambient field.
   Motion disabled for reduced-motion users / touch (JS gates).
   ============================================================ */

/* ---------- Ambient page depth: visible drifting gradient field ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 15% 20%, rgba(18, 165, 148, 0.13), transparent 70%),
    radial-gradient(40% 34% at 85% 10%, rgba(99, 214, 203, 0.11), transparent 70%),
    radial-gradient(44% 40% at 72% 90%, rgba(11, 84, 77, 0.10), transparent 70%),
    radial-gradient(30% 26% at 35% 65%, rgba(47, 191, 178, 0.08), transparent 70%);
  animation: nc-ambient 16s ease-in-out infinite alternate;
}
@keyframes nc-ambient {
  from { transform: translate3d(-3%, -2%, 0) scale(1) rotate(-1.5deg); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.12) rotate(1.5deg); }
}

/* ---------- Tiltable elements (JS drives transform) ---------- */
.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-out);
}
.tilt-3d.is-tilting { transition: box-shadow 0.45s var(--ease-out); }
.tilt-3d:hover {
  box-shadow:
    0 40px 90px rgba(11, 84, 77, 0.28),
    0 14px 34px rgba(12, 20, 19, 0.14),
    0 0 0 1px rgba(18, 165, 148, 0.22);
  z-index: 5;
}

/* Cursor-following glare sheen — bold */
.tilt-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.07) 38%, transparent 52%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  mix-blend-mode: soft-light;
}
.tilt-3d:hover::after { opacity: 1; }
.bg-ink .tilt-3d::after {
  background: radial-gradient(480px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(99, 214, 203, 0.4), transparent 50%);
  mix-blend-mode: screen;
}

/* Children float far forward on the tilted plane — real depth separation */
.tilt-3d .icon-tile,
.tilt-3d .step-num { transform: translateZ(70px); }
.tilt-3d h3 { transform: translateZ(46px); }
.tilt-3d h4 { transform: translateZ(40px); }
.tilt-3d p, .tilt-3d .price-feats { transform: translateZ(24px); }
.tilt-3d .price-amount { transform: translateZ(64px); }
.tilt-3d .price-card__flag { transform: translateX(-50%) translateZ(80px); }
.tilt-3d .chip { transform: translateZ(52px); }
.tilt-3d .btn { transform: translateZ(56px); }
.tilt-3d .btn:active { transform: translateZ(56px) scale(0.96); }
.tilt-3d .post-card__meta { transform: translateZ(18px); }
.tilt-3d .doc-meta-pill { transform: translateZ(30px); }

.post-card.tilt-3d .post-card__img { transform: translateZ(0); }

/* ---------- Hero: heavy parallax orbs + leaning content ---------- */
.hero-dark::before {
  transform: translate3d(calc(var(--px, 0) * 130px), calc(var(--py, 0) * 90px), 0) scale(calc(1 + var(--px, 0) * 0.12));
  transition: transform 0.5s var(--ease-out);
}
.hero-dark::after {
  transform: translate3d(calc(var(--px, 0) * -100px), calc(var(--py, 0) * -70px), 0);
  transition: transform 0.5s var(--ease-out);
}
.doc-hero::before {
  transform: translate3d(calc(var(--px, 0) * 110px), calc(var(--py, 0) * 80px), 0);
  transition: transform 0.5s var(--ease-out);
}

/* Hero text block drifts opposite the cursor for counter-parallax */
.hero-grid > div:first-child {
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0);
  transition: transform 0.5s var(--ease-out);
}

/* The phone leans hard with the cursor */
.nc-phone-wrap { perspective: 900px; }
.phone {
  transform: rotateX(calc(var(--py, 0) * -22deg)) rotateY(calc(var(--px, 0) * 30deg));
  transition: transform 0.35s var(--ease-out);
  transform-style: preserve-3d;
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.6);
}
.phone__screen { transform: translateZ(30px); }
.phone__notch { transform: translateZ(34px); }

.hero-dark .h-hero {
  text-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 26px 60px rgba(0,0,0,0.6);
}

/* ---------- Floating 3D shapes (injected by depth.js) ---------- */
.float-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transform-style: preserve-3d;
  animation: nc-float-shape var(--fs-dur, 11s) ease-in-out var(--fs-delay, 0s) infinite alternate;
}
.float-shape--ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 4px solid rgba(99, 214, 203, 0.55);
}
.float-shape--pill {
  width: 64px; height: 28px; border-radius: 999px;
  background: linear-gradient(120deg, rgba(18,165,148,0.55), rgba(99,214,203,0.25));
}
.float-shape--cross {
  width: 44px; height: 44px;
  background:
    linear-gradient(rgba(99,214,203,0.5), rgba(99,214,203,0.5)) center/100% 12px no-repeat,
    linear-gradient(rgba(99,214,203,0.5), rgba(99,214,203,0.5)) center/12px 100% no-repeat;
}
.float-shape--dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(47, 191, 178, 0.7);
  box-shadow: 0 0 24px rgba(47, 191, 178, 0.8);
}
@keyframes nc-float-shape {
  from { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotate(0deg); }
  to   { transform: translate3d(var(--fs-x, 30px), var(--fs-y, -46px), 60px) rotateX(50deg) rotateY(60deg) rotate(14deg); }
}

/* ---------- Section entrances: dramatic depth swing ---------- */
[data-reveal] {
  opacity: 0;
  transform: perspective(900px) translateY(64px) rotateX(12deg) scale(0.94);
  transform-origin: 50% 100%;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-spring);
}
[data-reveal].nc-revealed { opacity: 1; transform: perspective(900px) none; }

/* ---------- CTA band: pulsing orbital glow ---------- */
.cta-band { box-shadow: 0 40px 100px rgba(14, 135, 122, 0.45); }
.cta-band::before { animation: nc-orbit 10s ease-in-out infinite alternate; }
.cta-band::after { animation: nc-orbit 13s ease-in-out infinite alternate-reverse; }
@keyframes nc-orbit {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.08; }
  to   { transform: translate3d(-90px, 60px, 0) scale(1.5); opacity: 0.16; }
}

/* ---------- Buttons: gently raised, magnetic (JS), tactile press ---------- */
.btn--primary {
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 rgba(10, 66, 61, 0.5);
}
.btn--primary:hover { transform: translateY(-1.5px); box-shadow: 0 12px 30px rgba(18,165,148,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn--primary:active { transform: translateY(0) scale(0.98); }
.btn--white:hover, .btn--secondary:hover { transform: translateY(-1.5px); }

/* ---------- Store badges: subtle lift ---------- */
.store-badge:hover { transform: translateY(-2px); filter: brightness(1.1) drop-shadow(0 10px 20px rgba(0,0,0,0.25)); }

/* ---------- Footer brand mark glow ---------- */
.site-footer .brand__mark { filter: drop-shadow(0 8px 20px rgba(18, 165, 148, 0.55)); }

/* ---------- Safety: no motion for users who asked for none ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .cta-band::before, .cta-band::after, .float-shape { animation: none; }
  .float-shape { display: none; }
  .tilt-3d, .phone, .hero-dark::before, .hero-dark::after, .doc-hero::before,
  .hero-grid > div:first-child { transition: none; transform: none; }
  [data-reveal], [data-reveal].nc-revealed { transform: none; transition: opacity 0.4s ease; }
}