/*
 * DIVAMAZE — Custom Styles
 *
 * Base custom styles that complement TailwindCSS.
 * Brand: Cormorant SC (headings) + Cormorant Garamond (body)
 * Palette: #18181E / #D0B5AD / #C7A86A
 */

/* ─── Typography — serif font renders better slightly larger ─── */
html {
  scroll-behavior: smooth;
  font-size: 17px;           /* bump base for Cormorant Garamond legibility */
}

body {
  letter-spacing: 0.01em;    /* subtle tracking for elegance */
  -webkit-font-smoothing: antialiased;
}

/* Headings get extra letter-spacing for the small-caps Cormorant SC */
h1, h2, h3, h4, h5, h6,
.font-heading {
  letter-spacing: 0.04em;
}

/* ─── Custom selection color ─── */
::selection {
  background-color: #C7A86A;
  color: #18181E;
}

/* ─── Gold divider utility ─── */
.divider-gold {
  height: 1px;
  background: linear-gradient(to right, transparent, #C7A86A, transparent);
}

/* ─── Warm rose divider ─── */
.divider-rose {
  height: 1px;
  background: linear-gradient(to right, transparent, #D0B5AD, transparent);
}

/* ─── Luxury button hover animation ─── */
.btn-luxury {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.btn-luxury::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #C7A86A;
  transition: width 0.25s ease;
}

.btn-luxury:hover::after {
  width: 100%;
}

/* ─── Image hover zoom for gallery ─── */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.5s ease;
}

.img-zoom:hover img {
  transform: scale(1.05);
}

/* ─── Fade-in animation ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}