/* ─── Scroll-reveal ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-x-neg] {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal-x-neg].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-x-pos] {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal-x-pos].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-scale] {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal-scale].is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Page-load animations ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-load-1 { animation: fadeUp 0.8s ease 0.0s both; }
.anim-load-2 { animation: fadeUp 0.8s ease 0.1s both; }
.anim-load-3 { animation: fadeUp 0.8s ease 0.2s both; }
.anim-load-4 { animation: fadeUp 0.8s ease 0.3s both; }
.anim-load-5 { animation: fadeUp 0.8s ease 0.4s both; }
.anim-scale-load { animation: fadeIn 0.5s ease 0.2s both; }

/* ─── Ken Burns (hero bg) — scale 1.15→1, 7s easeOut (matches source) ─── */
@keyframes kenBurns {
  from { transform: scale(1.15); }
  to   { transform: scale(1); }
}
.ken-burns {
  animation: kenBurns 7s ease-out forwards;
}

/* ─── Slide content animations ─── */
@keyframes contentIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes contentOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* ─── Hero slideshow transitions ─── */
.slide-bg {
  position: absolute; inset: 0;
  transition: opacity 1.4s ease;
  opacity: 0;
}
.slide-bg.active {
  opacity: 1;
}
.slide-content {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.slide-content.active {
  animation: contentIn 0.8s ease-out forwards;
  pointer-events: auto;
}
.slide-content.exiting {
  animation: contentOut 0.4s ease-out forwards;
  pointer-events: none;
}

/* ─── Dot progress bar ─── */
.slide-dot-fill {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}
.slide-dot.active .slide-dot-fill {
  transform: scaleX(1);
}
.slide-dot:not(.active):hover .slide-dot-fill {
  transform: scaleX(0.5);
}

/* ─── FAQ accordion ─── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
}

/* ─── Gallery lightbox ─── */
#lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,10,14,0.95);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#lightbox.open {
  display: flex;
}

/* ─── Gallery filter hide ─── */
.gallery-item { transition: opacity 0.35s ease, transform 0.35s ease; }
.gallery-item.hidden { display: none; }

/* ─── Custom color utilities (CDN safety fallback) ─── */
/* The CDN needs to load BEFORE tailwind.config is set. These rules guarantee
   correct rendering even if the CDN config handoff has any timing edge case. */

/* solid colors */
.text-gold        { color: #D9B872; }
.text-gold-light  { color: #E8C77E; }
.text-dark        { color: #0B0A0E; }
.text-purple-light { color: #C49BFF; }
.bg-gold          { background-color: #D9B872; }
.bg-gold-light    { background-color: #E8C77E; }
.bg-dark          { background-color: #0B0A0E; }
.bg-dark-lighter  { background-color: #131017; }
.bg-dark-card     { background-color: #1A1620; }
.bg-purple-light  { background-color: #C49BFF; }
.border-gold      { border-color: #D9B872; }
.border-gold-light { border-color: #E8C77E; }

/* opacity modifier variants */
.bg-dark\/20  { background-color: rgba(11,10,14,0.2); }
.bg-dark\/30  { background-color: rgba(11,10,14,0.3); }
.bg-dark\/60  { background-color: rgba(11,10,14,0.6); }
.bg-dark\/70  { background-color: rgba(11,10,14,0.7); }
.bg-gold\/5   { background-color: rgba(217,184,114,0.05); }
.bg-gold\/10  { background-color: rgba(217,184,114,0.1); }
.bg-purple-accent\/5 { background-color: rgba(123,63,168,0.05); }
.border-gold\/30     { border-color: rgba(217,184,114,0.3); }
.border-gold\/50     { border-color: rgba(217,184,114,0.5); }
.border-purple-accent\/30 { border-color: rgba(123,63,168,0.3); }

/* hover states */
.hover\:text-gold:hover        { color: #D9B872; }
.hover\:bg-gold:hover          { background-color: #D9B872; }
.hover\:bg-gold-light:hover    { background-color: #E8C77E; }
.hover\:bg-gold\/10:hover      { background-color: rgba(217,184,114,0.1); }
.hover\:border-gold:hover      { border-color: #D9B872; }
.hover\:border-gold-light:hover { border-color: #E8C77E; }
.hover\:border-gold\/60:hover  { border-color: rgba(217,184,114,0.6); }

/* focus states */
.focus\:border-gold:focus { border-color: #D9B872; }

/* group-hover states (need group on parent) */
.group:hover .group-hover\:text-gold { color: #D9B872; }

/* ─── Misc ─── */
html { scroll-behavior: smooth; }
body {
  background-color: #0B0A0E;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Base heading styles (mirrors source @layer base) ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.025em;
  color: #ffffff;
}

/* ─── Text selection ─── */
::selection {
  background-color: #D9B872;
  color: #0B0A0E;
}

/* ─── text-balance utility ─── */
.text-balance { text-wrap: balance; }

/* ─── Form fields ─── */
input,
textarea,
select {
  background-color: #131017;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #D9B872;
}
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
/* Override browser autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #131017 inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.4);
}
select option { background-color: #131017; color: #ffffff; }

/* ─── Contact Form 7 ─── */
.wpcf7-form p { margin: 0 0 1.5rem; }
.wpcf7-form p:last-child { margin-bottom: 0; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  background-color: #131017;
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  padding: 12px 16px;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  border-radius: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus { border-color: #D9B872; }
.wpcf7-form textarea { resize: vertical; min-height: 120px; }
.wpcf7-form .wpcf7-submit {
  width: 100%;
  background-color: #D9B872;
  color: #0B0A0E;
  border: 1px solid #D9B872;
  padding: 12px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.wpcf7-form .wpcf7-submit:hover { background-color: #E8C77E; border-color: #E8C77E; }
.wpcf7-form .wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.wpcf7-not-valid-tip { color: #ff6b6b; font-size: 0.75rem; margin-top: 4px; display: block; }
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid { border-color: #ff6b6b; }
.wpcf7-response-output {
  padding: 12px 16px;
  margin-top: 16px !important;
  font-size: 0.875rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.wpcf7-response-output.wpcf7-mail-sent-ok {
  border-color: #D9B872 !important;
  background-color: rgba(217,184,114,0.1);
  color: #D9B872;
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-spam-blocked {
  border-color: #ff6b6b !important;
  background-color: rgba(255,107,107,0.1);
  color: #ff6b6b;
}
.wpcf7 .wpcf7-spinner { display: none !important; }

/* ─── Gallery Lightbox Extensions ─── */
.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 10;
}
.lightbox-arrow:hover {
  background: rgba(217, 184, 114, 0.2);
  color: #D9B872 !important;
}

/* Spinner Loader CSS */
.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: #D9B872;
  animation: spinLightbox 1s ease-in-out infinite;
  z-index: 20;
}

@keyframes spinLightbox {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px) {
  .lightbox-arrow {
    background: rgba(0, 0, 0, 0.5);
    padding: 4px;
  }
  .lightbox-arrow svg {
    width: 30px;
    height: 30px;
  }
}