/* =====================================================================
   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;
  }
}

/* =====================================================================
   3D SPIN / SHOWCASE / REVEAL — "planes spinning" product presentation
   Applied via data attributes so any page can opt individual images in:
     data-spin3d          continuous slow 3D Y-axis rotation
     data-spin3d="hover"  only spins while hovered
     data-float3d         gentle up/down hover-in-space float
     data-reveal3d        rises + fades in with a 3D tilt once scrolled
                           into view (JS adds .in-view)
===================================================================== */
[data-spin3d] {
  perspective: 900px;
}
[data-spin3d] > img, [data-spin3d] > svg {
  animation: spin3d 14s linear infinite;
  transform-style: preserve-3d;
}
[data-spin3d="hover"] > img, [data-spin3d="hover"] > svg {
  animation-play-state: paused;
}
[data-spin3d="hover"]:hover > img, [data-spin3d="hover"]:hover > svg {
  animation-play-state: running;
}
@keyframes spin3d {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

[data-float3d] {
  animation: float3d 5.5s ease-in-out infinite;
}
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-14px) rotateZ(1.2deg); }
}

[data-reveal3d] {
  opacity: 0;
  transform: perspective(900px) rotateX(14deg) translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal3d].in-view {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0);
}

/* Animated counters (JS drives the number; this just gives the digits
   a subtle 3D pop as they land on the final value) */
[data-counter].done {
  animation: counterPop .4s ease;
}
@keyframes counterPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-spin3d] > img, [data-spin3d] > svg, [data-float3d] { animation: none !important; }
  [data-reveal3d] { opacity: 1 !important; transform: none !important; }
  [data-counter].done { animation: none !important; }
}