/* ========================================
   Madrinha Country House — Styles
   ======================================== */

/* Base */
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; overflow-x: hidden; }

/* Hero Slideshow */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; animation: heroFade 24s infinite;
}
.hero-slide:nth-child(1) { opacity: 1; animation: heroFadeFirst 24s infinite; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }

@keyframes heroFade {
  0%, 4% { opacity: 0; }
  8%, 29% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes heroFadeFirst {
  0%, 29% { opacity: 1; }
  33%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.marquee-wrapper { display: flex; overflow: hidden; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
.marquee-track { display: flex; flex-shrink: 0; animation: marquee 50s linear infinite; }

/* Scroll Reveal Animations */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Rooms Accordion */
.accordion-strip {
  flex: 1; min-width: 60px;
  transition: flex .7s cubic-bezier(.16,1,.3,1);
  cursor: pointer; position: relative; overflow: hidden;
}
.accordion-strip:hover,
.accordion-strip.active { flex: 4; }

.accordion-strip .strip-content {
  opacity: 0; transition: opacity .5s ease .2s;
}
.accordion-strip:hover .strip-content,
.accordion-strip.active .strip-content { opacity: 1; }

.accordion-strip .strip-label {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  white-space: nowrap; transition: opacity .3s;
}
.accordion-strip:hover .strip-label,
.accordion-strip.active .strip-label { opacity: 0; }

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Gallery Grid */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px; gap: 3px;
}
.gallery-span-2 { grid-column: span 2; }
.gallery-span-row { grid-row: span 2; }

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-span-2 { grid-column: span 1; }
  .gallery-span-row { grid-row: span 1; }
}

/* Parallax Image Break */
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
@media (max-width: 1024px) {
  .parallax-img { background-attachment: scroll; }
}

/* Nav Links */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: currentColor;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after { width: 100%; }

/* Reviews Carousel */
#reviews-container { min-height: 220px; }

/* Stagger Animation Delays */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }

/* Form Success/Error States */
.form-status {
  display: none; text-align: center;
  padding: 1rem; border-radius: 0.75rem; margin-top: 1rem;
}
.form-status.success {
  display: block; background: #E8EDE3; color: #4A5D3E;
}
.form-status.error {
  display: block; background: #F5EDED; color: #A36B64;
}