/* ============================================================
   MUSE OPTIPAK — Custom Styles
   ============================================================ */

/* Base refinements */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
  background-color: #B9934F;
  color: #FFFFFF;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid #B9934F;
  outline-offset: 2px;
}

/* ============================================================
   HEADER
   ============================================================ */
#header.scrolled {
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
.btn-secondary {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.96);
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.testimonial-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.logo-track {
  animation: marquee 25s linear infinite;
  width: max-content;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.form-input {
  border-radius: 0;
}

.form-input::placeholder {
  color: rgba(122, 122, 117, 0.45);
}

select.form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237A7A75' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}

/* ============================================================
   ANIMATION INITIAL STATES (revealed by GSAP)
   ============================================================ */
.hero-content,
.hero-image,
.usp-item,
.product-card,
.testimonial-card,
#sustainability > div > div > div:first-child,
#customization .grid > div:nth-child(2),
#customization .grid > div:nth-child(3) {
  visibility: visible;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .logo-track {
    animation: none;
  }

  .product-card:hover,
  .testimonial-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .btn-primary:active,
  .btn-secondary:active {
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}