/* ==================== ANIMATIONS & PERFORMANCE ==================== */

/* Self-hosted Material Symbols icon font — used instead of the Google Fonts
   CDN link so icons still render (as glyphs, not literal words like "eco")
   even when fonts.gstatic.com is slow, blocked, or unreachable. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Protect Material Icons from browser auto-translation */
.material-symbols-outlined,
.material-icons {
  font-family: 'Material Symbols Outlined', 'Material Icons' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  direction: ltr !important;
  unicode-bidi: isolate;
}

/* GSAP Base States */
.gsap-reveal, .gsap-fade-up, .gsap-stagger-item, .gsap-scale-up {
  will-change: opacity, transform;
}

/* Footer elements */
.footer-reveal {
}

/* 
  Cursor Effects - Hover Ring for Cards & Images 
  Luxury feeling without heavy JS
*/
.hover-ring {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-ring::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 1px solid rgba(201, 162, 39, 0.4); /* Accent gold */
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 10;
}

.hover-ring:hover {
  transform: translateY(-4px);
}

.hover-ring:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Button Premium Hover */
.premium-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(18, 58, 46, 0.4);
}

/* Icons Animation */
.icon-float {
  transition: transform 0.3s ease;
}
.icon-float:hover {
  transform: translateY(-4px) scale(1.1);
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .page-transition-wrap,
  .gsap-reveal, .gsap-fade-up, .gsap-stagger-item, .gsap-scale-up,
  .footer-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hover-ring:hover, .hover-ring:hover::after,
  .premium-btn:hover, .icon-float:hover {
    transform: none !important;
  }
}