/* Bilalify hero motion layer — vanilla CSS only, homepage hero only.
   Layers inside .hero (bottom → top):
   .hero::before (studio grid) → #terrain-canvas (z 0) → .hero::after (orb, z 1)
   → .hero-inner (content, z 2) → .motion-grain (z 3) */

/* ---------- Effect 1: lime wireframe terrain canvas ---------- */
.terrain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Effect 3a: slow orb morph (keeps lime color) ---------- */
.hero::after {
  z-index: 1;
  animation: orb-morph 10s ease-in-out infinite;
}
@keyframes orb-morph {
  0%, 100% { border-radius: 48% 52% 63% 37%; }
  25%      { border-radius: 60% 40% 45% 55%; }
  50%      { border-radius: 42% 58% 55% 45%; }
  75%      { border-radius: 55% 45% 38% 62%; }
}

/* ---------- Effect 3b: film grain overlay ---------- */
.motion-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-shift 1s steps(5) infinite;
}
@keyframes grain-shift {
  0%   { background-position: 0 0; }
  20%  { background-position: -40px 30px; }
  40%  { background-position: 30px -50px; }
  60%  { background-position: -30px -20px; }
  80%  { background-position: 40px 40px; }
  100% { background-position: 0 0; }
}

/* ---------- Effect 2: tilt stage (class added by JS on fine pointers only) ---------- */
.hero.tilt-stage {
  perspective: 1000px;
}
.hero.tilt-stage [data-tilt] {
  will-change: transform;
}

/* ---------- Reduced motion: static, calm ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .motion-grain { animation: none; }
}