/* Thermal Group — Premium Motion Trial v2.0.27
   Motion inspired by the uploaded Apple Design guide, adapted to the existing TG branding.
   Homepage-only. Never change primary brand colors, font, layout or carousel transforms.
   All enhancements require the tg-premium-v227 JS class; without JS site is unchanged.
*/
html.tg-premium-v227 body { -webkit-tap-highlight-color: transparent; }

/* Instant, restrained physical feedback. Original color/shine remains the owner. */
html.tg-premium-v227 .hero-actions .btn,
html.tg-premium-v227 .cta-inner .btn,
html.tg-premium-v227 .about-section .btn,
html.tg-premium-v227 .section .btn {
  transition: transform .26s cubic-bezier(.18,.86,.2,1),
              box-shadow .26s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease;
}
html.tg-premium-v227 .btn.tg-premium-pressed {
  transform: translate3d(0,1px,0) scale(.977) !important;
  transition-duration: .095s !important;
  transition-timing-function: ease-out !important;
}
html.tg-premium-v227 .btn:focus-visible,
html.tg-premium-v227 .category-card:focus-visible,
html.tg-premium-v227 .product-card:focus-visible {
  outline: 3px solid var(--red, #F11626);
  outline-offset: 4px;
}

/* Clearer depth; keep card sizes, proportions and existing feature-carousel transforms. */
@media (hover:hover) and (pointer:fine) {
  html.tg-premium-v227 .category-card,
  html.tg-premium-v227 .service-card {
    transition: transform .36s cubic-bezier(.16,1,.3,1),
                box-shadow .36s cubic-bezier(.16,1,.3,1),
                border-color .24s ease;
  }
  html.tg-premium-v227 .category-card:hover,
  html.tg-premium-v227 .service-card:hover {
    transform: translate3d(0,-5px,0);
    box-shadow: 0 15px 35px rgba(15,57,105,.135), 0 3px 10px rgba(15,57,105,.055);
    border-color: rgba(15,57,105,.30);
  }
  /* Product cards rotate/translate under the existing carousel scripts.
     Only add a shadow: NEVER touch their positioning/transform/transition. */
  html.tg-premium-v227 .featured-section .product-card:hover {
    box-shadow: 0 12px 34px rgba(15,57,105,.14);
  }
  html.tg-premium-v227 .category-card .round-arrow {
    transition: transform .33s cubic-bezier(.16,1,.3,1),
                box-shadow .3s ease, background-color .22s ease;
  }
}
/* Reveal only when an element actually comes on screen, not before.
   There is no hidden pre-state, so slow/no JS never conceals the content. */
html.tg-premium-v227 .tg-premium-appeared {
  animation: tg-premium-arrive .48s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tg-premium-arrive {
  from {opacity:.38; transform:translate3d(0,11px,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
/* Clear press feedback on keyboard use without changing links or default form behavior. */
html.tg-premium-v227 .btn:focus-visible { box-shadow: 0 0 0 5px rgba(241,22,38,.1); }

@media (prefers-reduced-motion:reduce) {
  html.tg-premium-v227 .tg-premium-appeared { animation:none !important; }
  html.tg-premium-v227 .btn.tg-premium-pressed { transform:none !important; }
  html.tg-premium-v227 .category-card,
  html.tg-premium-v227 .service-card,
  html.tg-premium-v227 .btn,
  html.tg-premium-v227 .round-arrow { transition:none !important; }
  html.tg-premium-v227 .category-card:hover,
  html.tg-premium-v227 .service-card:hover { transform:none !important; }
}