/* ===== Innani Digital — motion / interaction layer =====
   Progressive enhancement on top of main.css. No !important, no
   overrides of layout — only transform/shadow/opacity additions. */

/* ----- Tilt targets (.card, [data-tilt]) ----- */
.card,
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.card.is-tilting,
[data-tilt].is-tilting {
  transition: transform .06s linear, box-shadow .2s ease;
  box-shadow: 0 22px 40px rgba(0,0,0,.18);
}

/* ----- Buttons: lift, press, glow, ripple ----- */
.btn {
  position: relative;
  overflow: hidden;
  transform: translateY(0) translateZ(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s cubic-bezier(.22,1,.36,1),
              background .2s ease, border-color .2s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(227,30,36,.28);
}
.btn--outline:hover,
.btn--outline-white:hover {
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition-duration: .08s;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  animation: btn-ripple-expand .6s ease-out forwards;
}
.btn--outline .btn-ripple,
.btn--outline-white .btn-ripple {
  background: rgba(0,0,0,.12);
}
@keyframes btn-ripple-expand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* ----- Scroll reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .3s; }
.reveal:nth-child(n+7) { transition-delay: .36s; }

/* ----- Reduced motion: flatten everything ----- */
@media (prefers-reduced-motion: reduce) {
  .card,
  [data-tilt],
  .btn {
    transition: none;
    transform: none;
  }
  .btn-ripple {
    display: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}