/* Land & Home Connect — PHP port additions on top of the compiled Tailwind bundle. */

/* The compiled bundle references /contour-texture.svg at the site root;
   assets live in /assets/ in this build. */
.texture-contour {
  background-image: url('../assets/contour-texture.svg');
}

/* The `hidden` attribute must win over Tailwind display classes (e.g. `flex`). */
[hidden] {
  display: none !important;
}

/* ---- Scroll reveal (replaces GSAP Reveal/ScrollTrigger fades) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  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);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Mobile menu (full-screen pine-900 overlay) ---- */
.mobile-menu {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-menu.open {
  opacity: 1;
}
.mobile-menu-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.mobile-menu.open .mobile-menu-item {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Accordion content ---- */
[data-accordion-content][hidden] {
  display: none;
}

/* ---- Consent checkbox check draw ---- */
.consent-check svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
  transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
input.peer:checked + .consent-check svg path {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* ---- Form error shake ---- */
@keyframes lhc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.shake {
  animation: lhc-shake 0.3s ease;
}

/* ---- Testimonial carousel track ---- */
.carousel-track {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Hero / step visuals initial states are set by JS ---- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobile-menu,
  .mobile-menu-item,
  .carousel-track,
  .consent-check svg path {
    transition: none;
  }
  .shake {
    animation: none;
  }
}