/* THB performance smoothing: retain the site's cinematic accents without continuous repainting. */

/* Shared animated angle used by the galaxy edge on the homepage and catalog. */
@property --thb-home-galaxy-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes thb-home-galaxy-orbit {
  from { --thb-home-galaxy-angle: 0deg; }
  to { --thb-home-galaxy-angle: 360deg; }
}

/* Product cards: the galaxy border is static at rest and animates only while a mouse/pointer hovers it. */
#thb-new .n-card::before {
  animation: none !important;
  opacity: .42;
}
#thb-new .n-card {
  transition: transform .22s ease, box-shadow .24s ease, border-color .22s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  #thb-new .n-card:hover::before {
    animation: thb-home-galaxy-orbit 6s linear infinite !important;
    opacity: 1;
  }
}

/* Match the subtle galaxy edge on catalog cards; it remains still on touch devices. */
#catalog-grid > .catalog-card {
  isolation: isolate;
}
#catalog-grid > .catalog-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--thb-home-galaxy-angle, 0deg), rgba(44,137,86,.08), rgba(118,154,255,.44), rgba(183,128,231,.32), rgba(75,207,171,.42), rgba(44,137,86,.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation: none;
}
#catalog-grid > .catalog-card > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  #catalog-grid > .catalog-card:hover::before {
    opacity: 1;
    animation: thb-home-galaxy-orbit 6s linear infinite;
  }
}

/* Ad-image shimmer is intentionally preserved, including on mobile/touch screens.
   The existing .is-loaded state stops it once the real image has loaded. */

/* Reduce expensive blur while preserving a translucent sticky header. */
#thb-new .n-head {
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  background: rgba(255,255,255,.96) !important;
}

/* Respect an explicit reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  #thb-new .n-card,
  #thb-new .n-card::before,
  #catalog-grid > .catalog-card,
  #catalog-grid > .catalog-card::before,
  #thb-new .n-home-ad-slide,
  #thb-new .n-home-ad-slide .n-home-ad-media img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* Touch devices have no hover state: keep the galaxy edge visibly animated there too.
   A slightly slower orbit preserves the visual effect while limiting repaint frequency. */
@media (hover: none), (pointer: coarse) {
  #thb-new .n-card::before {
    animation: thb-home-galaxy-orbit 10s linear infinite !important;
    opacity: .82;
  }
  #catalog-grid > .catalog-card::before {
    animation: thb-home-galaxy-orbit 10s linear infinite !important;
    opacity: .82;
  }
}

/* An operating-system reduced-motion preference takes precedence on every device. */
@media (prefers-reduced-motion: reduce) {
  #thb-new .n-card::before,
  #catalog-grid > .catalog-card::before {
    animation: none !important;
  }
}