/* ===================================================================
   فارم أكاونت — Premium 3D Layer  (Warm cinematic depth)
   Site-wide warm-premium 3D: tilt · parallax · layered depth ·
   glassmorphism · warm mesh · scroll-reveal · float.
   Plain CSS only (no Tailwind rebuild). Honors reduced-motion.
   Palette: olive #3A4A2B · gold #D4A017/#B8862F · cream #FAF6EC
   =================================================================== */

:root {
  --p3-olive: #3A4A2B;
  --p3-olive-dark: #2A3621;
  --p3-gold: #D4A017;
  --p3-gold-deep: #B8862F;
  --p3-cream: #FAF6EC;
  --p3-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* warm multi-layer depth shadow */
  --p3-shadow-1: 0 1px 1px rgba(42,54,33,.04), 0 3px 6px rgba(42,54,33,.06),
                 0 10px 20px rgba(42,54,33,.07);
  --p3-shadow-2: 0 2px 4px rgba(42,54,33,.06), 0 12px 24px rgba(42,54,33,.12),
                 0 28px 56px rgba(58,74,43,.16);
  --p3-shadow-gold: 0 12px 30px rgba(184,134,47,.28);
}

/* ===== 1. Warm animated mesh background ============================ */
/* Apply .mesh-warm to a full-bleed positioned element behind content. */
.mesh-warm {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mesh-warm::before,
.mesh-warm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.mesh-warm::before {
  width: 46vw; height: 46vw; top: -12%; right: -8%;
  background: radial-gradient(circle at 30% 30%, rgba(212,160,23,.55), transparent 65%);
  animation: p3-drift1 22s var(--p3-ease) infinite alternate;
}
.mesh-warm::after {
  width: 40vw; height: 40vw; bottom: -14%; left: -6%;
  background: radial-gradient(circle at 60% 40%, rgba(58,74,43,.5), transparent 65%);
  animation: p3-drift2 26s var(--p3-ease) infinite alternate;
}
@keyframes p3-drift1 { to { transform: translate3d(-6%, 8%, 0) scale(1.15); } }
@keyframes p3-drift2 { to { transform: translate3d(8%, -6%, 0) scale(1.1); } }

/* soft grain/vignette helper for premium depth */
.depth-vignette { position: relative; }
.depth-vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(42,54,33,.10) 100%);
}

/* ===== 2. 3D Tilt cards =========================================== */
/* JS adds .tilt-on and sets --rx/--ry/--mx/--my. Base styles here. */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .4s var(--p3-ease), box-shadow .4s var(--p3-ease);
  will-change: transform;
}
.tilt-3d.tilt-on {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  box-shadow: var(--p3-shadow-2);
}
/* gold sheen that follows the cursor on tilt cards */
.tilt-3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255,248,231,.35), transparent 60%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 2;
}
.tilt-3d.tilt-on::after { opacity: 1; }
/* lift inner content for parallax depth inside the card */
.tilt-3d [data-depth] { transform: translateZ(40px); transition: transform .4s var(--p3-ease); }

/* Auto-enrich existing component cards with layered depth */
.pillar-card, .case-card, .testimonial-card { box-shadow: var(--p3-shadow-1); }

/* ===== 3. Glass 3D ================================================ */
.glass-3d {
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--p3-shadow-2), inset 0 1px 0 rgba(255,255,255,.7);
}
.glass-3d-dark {
  background: linear-gradient(135deg, rgba(42,54,33,.72), rgba(42,54,33,.5));
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(212,160,23,.25);
  box-shadow: var(--p3-shadow-2);
  color: var(--p3-cream);
}

/* ===== 4. Gold glow + float ======================================= */
.glow-gold { box-shadow: var(--p3-shadow-gold); }
.float-3d { animation: p3-float 6s ease-in-out infinite; will-change: transform; }
.float-3d.delay-1 { animation-delay: -2s; }
.float-3d.delay-2 { animation-delay: -4s; }
@keyframes p3-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(.6deg); }
}

/* hero 3D render glow plate */
.hero-3d-plate { position: relative; }
.hero-3d-plate::before {
  content: ""; position: absolute; inset: -8% -6% -2% -6%; z-index: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(212,160,23,.28), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.hero-3d-plate > * { position: relative; z-index: 1; }

/* ===== 5. Scroll reveal =========================================== */
/* Hidden state only applies once JS marks <html class="js-reveal">,
   so content stays visible if JS fails (SEO/no-JS safe). */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(34px) rotateX(6deg);
  transform-origin: 50% 100%;
  transition: opacity .7s var(--p3-ease), transform .7s var(--p3-ease);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].revealed {
  opacity: 1; transform: none;
}
.js-reveal [data-reveal][data-reveal="left"]  { transform: translateX(-40px); }
.js-reveal [data-reveal][data-reveal="right"] { transform: translateX(40px); }
.js-reveal [data-reveal].revealed { transform: none; }
/* stagger children */
.js-reveal [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--p3-ease), transform .6s var(--p3-ease);
}
.js-reveal [data-reveal-stagger].revealed > * { opacity: 1; transform: none; }

/* ===== 6. Scroll progress + section depth ========================= */
.p3-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform: scaleX(var(--p3-scroll, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--p3-gold), var(--p3-gold-deep));
  box-shadow: 0 1px 6px rgba(184,134,47,.5);
  pointer-events: none;
}

/* ===== 7. Reduced motion / mobile safety ========================= */
@media (prefers-reduced-motion: reduce) {
  .mesh-warm::before, .mesh-warm::after,
  .float-3d { animation: none !important; }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .tilt-3d { transition: none !important; }
}
/* tilt is desktop-pointer only; disable transform jitter on touch */
@media (hover: none), (max-width: 1023px) {
  .tilt-3d.tilt-on { transform: none; }
  .tilt-3d::after { display: none; }
}