/* ============================================================
   VMS Property Solutions — custom styles layered on Tailwind v4
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Sticky header state ---------- */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

#site-header.is-scrolled {
  background-color: rgba(11, 27, 46, 0.93);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Scroll reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Keep the closing headline on one line within the hero column. */
.hero-headline-line {
  white-space: nowrap;
  font-size: clamp(1rem, 5.5vw, 3.25rem);
}

/* ---------- Hero image slow zoom ---------- */
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero-img {
  animation: heroZoom 9s ease-out forwards;
}

/* ---------- FAQ accordion ---------- */
details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary {
  list-style: none;
  cursor: pointer;
}

details.faq-item summary:focus-visible {
  outline: 2px solid #c7a24a;
  outline-offset: 2px;
  border-radius: 8px;
}

details.faq-item .faq-chevron {
  transition: transform 0.25s ease;
}

details.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

/* ---------- Form controls ---------- */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #c7a24a;
  box-shadow: 0 0 0 3px rgba(199, 162, 74, 0.25);
}

/* ---------- Misc ---------- */
::selection {
  background: #c7a24a;
  color: #0b1b2e;
}

#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, pointer-events 0.3s;
}

#back-to-top.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-img { animation: none; }

  #back-to-top,
  details.faq-item .faq-chevron {
    transition: none;
  }
}