/* Industries strip: spacing + 3D tilt effect
   File: assets/css/industries-3d.css */

section.strip.ind3d {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  padding: 40px clamp(16px, 3vw, 44px);
  background: #07070a;
  contain: paint layout;
}

section.strip.ind3d .tile {
  position: relative;
  min-height: 340px;
  border-radius: 18px;
  overflow: hidden;
  cursor: default;
  user-select: none;
  background-color: #14161f;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--sc, 1));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .25s ease;
  will-change: transform;
}

section.strip.ind3d .tile:hover {
  --ty: -10px;
  --sc: 1.035;
  box-shadow: 0 34px 60px -22px rgba(225, 29, 46, .5), 0 0 0 1px rgba(255, 255, 255, .14);
}

section.strip.ind3d .tile.tilting {
  transition: transform .08s linear, box-shadow .35s ease;
}

section.strip.ind3d .tile h2,
section.strip.ind3d .tile p {
  position: relative;
  z-index: 2;
  transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 7px));
  transition: transform .25s ease;
}

.tile-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%);
}
section.strip.ind3d .tile:hover .tile-glare { opacity: 1; }

/* Entrance without artificial blackouts: cards remain visible while settling */
section.strip.js-3d .tile:not(.in) {
  opacity: 0.85;
  --ry: -15deg;
  --ty: 18px;
}
section.strip.js-3d .tile {
  transition-property: transform, box-shadow, opacity;
}
section.strip.js-3d .tile:not(.ready) {
  transition-duration: .35s;
  transition-delay: calc(var(--i, 0) * 45ms);
}

@media (max-width: 1100px) {
  section.strip.ind3d { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  section.strip.ind3d { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  section.strip.ind3d .tile { min-height: 260px; }
}
@media (max-width: 480px) {
  section.strip.ind3d { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  section.strip.ind3d .tile, section.strip.ind3d .tile h2, section.strip.ind3d .tile p { transition: none; transform: none; }
  section.strip.js-3d .tile:not(.in) { opacity: 1; }
}
/* Industry photos load only when the strip is about to scroll into view (JS adds .img-on) */
section.strip.js-3d:not(.img-on) .tile { background-image: none !important; }