/* Mendra · Hero motion (breathing + pointer tilt)
   Scope: .hero .fan .phone (3 phones) and .brand img (logo).
   No transform conflicts:
     - existing tilt of each phone stays on `transform: rotate(...)` (unchanged)
     - breathing uses the independent `scale` property
     - per-phone parallax uses the independent `translate` property
     - pointer tilt is applied to the .fan wrapper (not the phones)
   Activated only when JS adds `.hero-motion` to <html>. */

@keyframes mendra-breathe{0%,100%{scale:1}50%{scale:1.02}}

.hero-motion .fan{
  transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
}
.hero-motion .fan .phone{
  animation:mendra-breathe 4.5s ease-in-out infinite;
  translate:var(--px,0px) var(--py,0px);
  transition:translate 1.2s cubic-bezier(.22,1,.36,1);
  will-change:scale,translate;
}
.hero-motion .fan .p1{animation-delay:-.2s}
.hero-motion .fan .p3{animation-delay:-.4s}
.hero-motion .brand img{animation:mendra-breathe 4.5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .hero-motion .fan,
  .hero-motion .fan .phone,
  .hero-motion .brand img{animation:none!important;transition:none!important;translate:none!important}
  .hero-motion .fan{transform:none!important}
}