/* ========== GLOBAL ========== */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body{background:#000;color:#fff;overflow-x:hidden}

/* ========== HERO ========== */
.traffic-hero{
  position:relative;
  height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}

/* center title */
.hero-center{position:relative;z-index:60;text-align:center;pointer-events:none}
.hero-title{font-size:clamp(40px,7vw,90px);font-weight:800;opacity:0;animation:heroTextIn 1.6s ease forwards}
.hero-sub{font-size:18px;color:#ccc;margin-top:10px;opacity:0;animation:heroSubIn 2s ease forwards .35s}
@keyframes heroTextIn{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroSubIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}

/* ========== MOVING CONTAINER (movement only) ========== */
.t-img{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  will-change:transform;
  z-index:30;
  opacity:0.95;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,0.6));
}

/* inner wrapper — rotation + tilt applied here (separate transform) */
.t-img-inner{
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  will-change:transform, filter;
  transition:transform .12s linear; /* smooth small adjustments */
  animation:zoomPulse 4s infinite ease-in-out; /* brightness pulse, safe */
}

/* zoom pulse using filter (no transform) */
@keyframes zoomPulse{0%{filter:brightness(1)}50%{filter:brightness(1.18)}100%{filter:brightness(1)}}

.t-img-inner img{
  display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.85)
}

/* ========== SAFE SIZES ========== */
.t-img.small  { width:150px;height:110px; }
.t-img.medium { width:190px;height:130px; }
.t-img.wide   { width:250px;height:160px; }
.t-img.tall   { width:160px;height:230px; }
.t-img.large  { width:230px;height:170px; }

/* ensure inner fills parent (important after different sizes) */
.t-img .t-img-inner{display:block;width:100%;height:100%}

/* MOBILE SAFE */
@media(max-width:768px){
  .t-img{opacity:.9}
  .t-img{transition:none}
  .t-img.small,.t-img.medium,.t-img.wide,.t-img.tall,.t-img.large{
    width:140px !important;height:100px !important;
  }
}