/* Homepage category illustrations: calm motion, real taxonomy destinations. */
.ng-home .ng-category-grid--art {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1160px;
  gap: 16px;
  margin-top: 12px;
}
.ng-home .ng-category-grid--art .ng-category {
  height: auto;
  min-width: 0;
  border: 1px solid #dce2d4;
  border-radius: 20px;
  background: #f4f5ec;
  color: #15332b;
  isolation: isolate;
}
.ng-category-visual {
  display: grid;
  place-items: center;
  height: 212px;
  background: radial-gradient(ellipse at 50% 65%, #e6ebd8 0, #f4f5ec 70%);
  pointer-events: none;
}
.ng-category-scene {
  display: block;
  position: relative;
  width: 210px;
  max-width: 100%;
  aspect-ratio: 1;
  transform-origin: 50% 70%;
}
.ng-category-scene > img,
.ng-category-effects {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ng-category-effects { position: absolute; inset: 0; overflow: visible; }
.ng-home .ng-category-grid--art .ng-category > b {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62px;
  background: transparent;
  border-radius: 0;
  padding: 6px 28px 14px;
  font-size: 15px;
  line-height: 1.55;
  white-space: normal;
}
.ng-home .ng-category-grid--art .ng-category > b small {
  color: #52634f;
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}
.ng-category-arrow {
  position: absolute;
  left: 14px;
  bottom: 20px;
  font-size: 18px;
  line-height: 1;
}
.ng-home .ng-category-grid--art a.ng-category:hover,
.ng-home .ng-category-grid--art a.ng-category:focus-visible { border-color: #8fa75d; }
.ng-art-headlights { fill: none; stroke: #fff9cf; stroke-width: 22; stroke-linecap: round; opacity: 0; }
.ng-art-headlight-halo { fill: none; stroke: #efffc0; stroke-width: 58; stroke-linecap: round; filter: blur(14px); opacity: 0; }
.ng-art-light-beam { fill: #f6ffd0; filter: blur(14px); opacity: 0; }
.ng-art-led { fill: #f2ffd3; opacity: 0; }
.ng-art-led-halo { fill: #c3ec32; filter: blur(12px); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ng-art-orbit { fill: #e4ff9e; filter: blur(18px); opacity: 0; }
.ng-art-spark { fill: #fffcef; filter: drop-shadow(0 0 20px #fff9cf); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ng-art-motion[data-category-art="auto"] .ng-art-headlights { animation: ng-category-headlights 2.2s ease-in-out 2; }
.ng-art-motion[data-category-art="auto"] .ng-art-headlight-halo { animation: ng-category-headlight-halo 2.2s ease-in-out 2; }
.ng-art-motion[data-category-art="auto"] .ng-art-light-beam { animation: ng-category-light-beam 2.2s ease-in-out 2; }
.ng-art-motion[data-category-art="it"] .ng-art-led { animation: ng-category-led 2.2s ease-in-out 2; }
.ng-art-motion[data-category-art="it"] .ng-art-led-halo { animation: ng-category-led-halo 2.2s ease-in-out 2; }
.ng-art-motion[data-category-art="it"] .ng-art-led--two > * { animation-delay: .16s; }
.ng-art-motion[data-category-art="it"] .ng-art-led--three > * { animation-delay: .32s; }
.ng-art-motion[data-category-art="tech"] .ng-category-scene { animation: ng-category-float 4.4s ease-in-out 1; }
.ng-art-motion[data-category-art="tech"] .ng-art-orbit { animation: ng-category-glow 4.4s ease-in-out 1; }
.ng-art-motion[data-category-art="accessories"] .ng-category-scene { animation: ng-category-tilt 4.4s ease-in-out 1; }
.ng-art-motion[data-category-art="accessories"] .ng-art-spark { animation: ng-category-spark 4.4s ease-in-out 1; }
.ng-art-paused .ng-category-scene,
.ng-art-paused .ng-category-effects * { animation-play-state: paused !important; }
@keyframes ng-category-headlights { 0%,12%,80% {opacity:1;stroke:#345846} 30%,58% {opacity:1;stroke:#fffdeb} 100% {opacity:0;stroke:#fff9cf} }
@keyframes ng-category-headlight-halo { 0%,12%,80%,100% {opacity:0} 30%,58% {opacity:.95} }
@keyframes ng-category-light-beam { 0%,12%,80%,100% {opacity:0} 30%,58% {opacity:.62} }
@keyframes ng-category-led { 0%,12%,80% {opacity:1;fill:#274f35} 30%,58% {opacity:1;fill:#fbfff1} 100% {opacity:0;fill:#c3ec32} }
@keyframes ng-category-led-halo { 0%,12%,80%,100% {opacity:0;transform:scale(.7)} 30%,58% {opacity:.9;transform:scale(1.2)} }
@keyframes ng-category-float { 0%,100% {transform:translateY(0)} 40% {transform:translateY(-7px)} 70% {transform:translateY(-2px)} }
@keyframes ng-category-glow { 0%,100% {opacity:0} 40%,60% {opacity:.9} }
@keyframes ng-category-tilt { 0%,100% {transform:rotate(0)} 35% {transform:rotate(-4deg)} 65% {transform:rotate(2deg)} }
@keyframes ng-category-spark { 0%,15%,72%,100% {opacity:0;transform:scale(.6)} 32%,50% {opacity:1;transform:scale(1.45)} }
@media (max-width: 700px) {
  .ng-home .ng-category-grid--art { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .ng-category-visual { height: 144px; }
  .ng-category-scene { width: 140px; }
  .ng-home .ng-category-grid--art .ng-category { border-radius: 16px; }
  .ng-home .ng-category-grid--art .ng-category > b { min-height: 60px; padding: 5px 22px 12px; font-size: 12px; }
  .ng-home .ng-category-grid--art .ng-category > b small { font-size: 10px; }
  .ng-category-arrow { left: 8px; bottom: 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-home .ng-category-grid--art .ng-category .ng-category-scene,
  .ng-home .ng-category-grid--art .ng-category .ng-category-effects * { animation: none !important; transform: none !important; }
}