/* Equicustom — consolidated custom styles (superset of all page <style> blocks
   from the original static HTML). Tailwind utility classes are loaded via the
   Tailwind CDN script enqueued in functions.php; this file only carries the
   bespoke rules Tailwind can't express. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: #FDFBF7; color: #241C16; }

#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #C05F33, #7F3A1C);
  z-index: 200; transition: width .1s linear;
}

.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(10px);
  transition: opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1), filter .8s cubic-bezier(.2,.65,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

.reveal-left {
  opacity: 0; transform: translateX(-32px); filter: blur(10px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}
.reveal-left.in { opacity: 1; transform: translateX(0); filter: blur(0); }

.reveal-right {
  opacity: 0; transform: translateX(32px); filter: blur(10px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}
.reveal-right.in { opacity: 1; transform: translateX(0); filter: blur(0); }

.reveal-scale {
  opacity: 0; transform: scale(.92); filter: blur(10px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}
.reveal-scale.in { opacity: 1; transform: scale(1); filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: #C05F33; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: #A24A24; }
.nav-link.is-active::after { transform: scaleX(1); }

.strap-preview {
  position: relative; height: 88px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.15), inset 0 -4px 8px rgba(0,0,0,.35), 0 18px 30px -12px rgba(0,0,0,.4);
  transition: background .35s;
}
.strap-preview::before, .strap-preview::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 0; border-top: 2px dashed rgba(255,255,255,.35);
}
.strap-preview::before { top: 10px; }
.strap-preview::after { bottom: 10px; }

.badge-chip {
  background: linear-gradient(165deg, #FBF6EC, #EEE3CE); border-radius: 10px; padding: 12px 28px;
  min-width: 200px; max-width: 88%; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.12); position: relative;
}
.badge-chip::after {
  content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(74,53,39,.3); border-radius: 7px; pointer-events: none;
}

.glass { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.gallery-item img { transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.08); }

.insta-item .overlay { opacity: 0; transition: opacity .3s ease; }
.insta-item:hover .overlay { opacity: 1; }
.insta-item img { transition: transform .5s ease; }
.insta-item:hover img { transform: scale(1.06); }

#lightbox { transition: opacity .3s ease; }
#lightbox.hidden-lb { opacity: 0; pointer-events: none; }
#lightboxImg { transition: transform .3s ease, opacity .3s ease; }

:focus-visible { outline: 2px solid #C05F33; outline-offset: 3px; border-radius: 4px; }

/* Contact form feedback states (new — not in the original static site,
   needed now that the form submits via AJAX instead of a mailto: link). */
.form-status { display: none; border-radius: .75rem; padding: .9rem 1.1rem; font-size: .875rem; margin-top: .5rem; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: #EEF3E7; color: #3A4A2A; border: 1px solid rgba(107,118,84,.35); }
.form-status.is-error { background: #FBEEE7; color: #7F3A1C; border: 1px solid rgba(192,95,51,.35); }
.form-field-error { border-color: #C05F33 !important; }
#enquiryForm button[type="submit"][disabled] { opacity: .6; cursor: not-allowed; }
/* honeypot field — hidden from real visitors, left in the tab order trap for bots */
.eq-hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; width: 0; overflow: hidden; }