/* =====================================================================
   3D EFFECTS MODULE — shared across all Miryalan Dynasty sites
   Adds: hover tilt/depth on cards & panels, perspective on hero
   sections, and a subtle 3D press effect on buttons.
   Respects prefers-reduced-motion.
===================================================================== */

/* ---- Responsive media/graphics safety net -----------------------------
   Ensures every image, SVG, video, and iframe scales down to fit its
   container instead of overflowing on smaller screens. */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
table { max-width: 100%; }
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

.card, .icon-card, .leader-card, .logo-card, .news-card, .photo-card,
.division-tile, .chairman-card, .people-tile, .panel, .thumb, .tile,
.product-card, .team-card, .stat-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.card:hover, .icon-card:hover, .leader-card:hover, .logo-card:hover,
.news-card:hover, .photo-card:hover, .division-tile:hover,
.chairman-card:hover, .people-tile:hover, .panel:hover, .thumb:hover,
.tile:hover, .product-card:hover, .team-card:hover, .stat-card:hover {
  box-shadow: 0 22px 45px -18px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.25);
}

/* Hero sections get a perspective stage so their inner layers can tilt/parallax */
.hero, .page-hero {
  perspective: 1200px;
}
.hero-inner, .hero-visual, .hero-graphic {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Parallax-tagged elements (moved via JS on scroll) */
[data-parallax] {
  will-change: transform;
}

/* 3D press effect on buttons */
.btn {
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.btn:active { transform: translateY(1px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .card, .icon-card, .leader-card, .logo-card, .news-card, .photo-card,
  .division-tile, .chairman-card, .people-tile, .panel, .thumb, .tile,
  .product-card, .team-card, .stat-card,
  .hero-inner, .hero-visual, .hero-graphic, .btn, [data-parallax] {
    transition: none !important;
    transform: none !important;
  }
}