/* Motion stays within the existing six-card rules section. */
body.home #visit-rules { scroll-margin-top: 120px; }
body.home #visit-rules .first-item {
  z-index: 0;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(.2,.75,.25,1);
}
body.home #visit-rules .first-item-bg {
  pointer-events: none;
  transition: filter 480ms ease;
}
body.home #visit-rules .first-item-bg::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 24px, 100% 100%, 34px 100%, 0 calc(100% - 27px));
  background: linear-gradient(130deg, rgb(0 200 255 / .1), rgb(20 12 42 / .52) 55%, rgb(255 125 4 / .08));
  opacity: 0;
  transition: opacity 480ms ease;
}
body.home #visit-rules .first-item-img > img {
  transform: translateY(0) rotate(0deg) scale(1);
  transition: transform 580ms cubic-bezier(.2,.75,.25,1), filter 480ms ease;
}
body.home #visit-rules .first-item-text strong {
  transition: color 320ms ease, text-shadow 480ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body.home #visit-rules .first-item:hover {
    z-index: 3;
    transform: translateY(-6px) scale(1.035);
  }
  body.home #visit-rules .first-item:hover .first-item-bg {
    filter: brightness(1.1) drop-shadow(0 5px 18px rgb(255 125 4 / .2));
  }
  body.home #visit-rules .first-item:hover .first-item-bg::after { opacity: 1; }
  body.home #visit-rules .first-item:hover .first-item-img > img {
    transform: translateY(-5px) rotate(-4deg) scale(1.045);
    filter: drop-shadow(0 0 12px rgb(0 200 255 / .24));
  }
  body.home #visit-rules .first-item:hover .first-item-text strong {
    color: #b9f3ff;
    text-shadow: 0 0 18px rgb(0 200 255 / .22);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.home #visit-rules .first-item,
  body.home #visit-rules .first-item-bg,
  body.home #visit-rules .first-item-bg::after,
  body.home #visit-rules .first-item-img > img,
  body.home #visit-rules .first-item-text strong { transition: none; }
  body.home #visit-rules .first-item:hover,
  body.home #visit-rules .first-item:hover .first-item-img > img { transform: none; }
}

/* Let the grid size each row from its text instead of the legacy JS heights. */
@media (max-width: 1100px) {
  body.home #visit-rules .first-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 36px; }
}
@media (max-width: 599px) {
  body.home #visit-rules .first-items { grid-template-columns: minmax(0, 1fr); row-gap: 46px; }
}