/* Cielo Malinche — Motion Layer (minimal, safe) */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #D4B070, #C8A060);
  transition: transform 0.1s linear;
}

/* Kill cursor markers if present */
.cursor-dot, .cursor-ring { display: none !important; }

/* Kill any ambient orb / mist / ember leftovers */
.ambient-orb, .hero-mist, .ember-canvas { display: none !important; }

/* Marquee brand band — small, editorial */
.marquee-band {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  background: #2A3322;
  color: #FAF8F3;
  border-top: 1px solid rgba(250, 248, 243, 0.08);
  border-bottom: 1px solid rgba(250, 248, 243, 0.08);
}
.marquee-band::before,
.marquee-band::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.marquee-band::before { left: 0;  background: linear-gradient(to right, #2A3322, transparent); }
.marquee-band::after  { right: 0; background: linear-gradient(to left,  #2A3322, transparent); }
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 32px;
  align-items: center;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.85;
}
.marquee-track .dot { color: #C8A060; font-size: 0.6em; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .scroll-progress { display: none !important; }
}


/* ============================================
   Section-to-section scroll motion
   ============================================ */

/* Deeper reveal: more travel, slight blur, longer ease */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Slide in from side */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }

/* Scale-up reveal for images / media */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Stagger: children of .stagger reveal with incremental delay */
.stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.55s; }
.stagger.in > *:nth-child(7) { transition-delay: 0.65s; }
.stagger.in > *:nth-child(8) { transition-delay: 0.75s; }
.stagger.in > *:nth-child(9) { transition-delay: 0.85s; }

/* Smooth scroll behavior */
html { scroll-behavior: smooth; }

/* Section-level: soft enter fade for every section */
.section {
  opacity: 1;
  transition: opacity 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  html { scroll-behavior: auto; }
}


/* ============================================
   MOBILE POLISH
   ============================================ */

/* Small phones */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }

  /* Hero: smaller, lighter, breathable */
  .hero { min-height: 92vh; }
  .hero-content { padding: 0 20px; }
  .hero-eyebrow {
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.28em;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .hero-eyebrow .rule { width: 28px; }
  .hero-title {
    font-size: clamp(44px, 13vw, 72px) !important;
    gap: 0.08em;
    margin-bottom: 28px;
    line-height: 1;
  }
  .hero-sub {
    font-size: 16px !important;
    line-height: 1.5;
    margin-bottom: 32px;
    padding: 0 12px;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-ctas .btn {
    width: 100%;
    padding: 16px 24px !important;
    font-size: 13px;
  }
  .hero-scroll { display: none; }
}


@media (max-width: 640px) {
  /* Nav */
  .nav-inner { padding: 14px 20px !important; }
  .nav-brand .nav-tent { width: 28px; height: 28px; }
  .wm-name { font-size: 14px !important; }
  .wm-sub { font-size: 9px !important; }

  /* Mobile menu */
  .mobile-menu nav a { font-size: 26px !important; }
  .mobile-menu { gap: 28px !important; padding: 24px !important; }

  /* Section heads */
  .section-head { margin-bottom: 40px; }
  .display { font-size: clamp(28px, 8vw, 42px) !important; max-width: 100%; }
  .eyebrow { font-size: 11px; margin-bottom: 16px; }

  /* Intro grid */
  .intro-grid { gap: 32px !important; }
  .intro-meta { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .intro-meta .num { font-size: 36px !important; }
  .intro-meta .lbl { font-size: 11px !important; }

  /* Pillars */
  .pillars { gap: 20px !important; }
  .pillar { padding: 28px 20px !important; }
  .pillar .p-num { font-size: 22px !important; }
  .pillar h3 { font-size: 18px !important; }
  .pillar p { font-size: 13px !important; }
}


@media (max-width: 640px) {
  /* Suites / Rooms */
  .rooms { gap: 32px !important; }
  .room-card { padding-bottom: 16px; }
  .room-title { font-size: 26px !important; }

  /* Cabaña gallery */
  .cabana-gallery {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
    gap: 12px !important;
  }
  .c-shot, .c-shot.wide, .c-shot.tall { grid-column: span 1 !important; grid-row: span 1 !important; }
  .cabana-feats { grid-template-columns: repeat(2, 1fr) !important; }
  .cabana-feats > div { padding: 18px 12px !important; font-size: 11px !important; }
  .cabana-feats strong { font-size: 20px !important; }

  /* Experiences */
  .xp-grid { gap: 28px !important; }
  .xp-img { aspect-ratio: 4/3; }
  .xp-card h3 { font-size: 22px !important; }
  .xp-card p { font-size: 14px !important; }

  /* Venues (dark band) */
  .venues { gap: 20px !important; }
  .venue { padding: 24px !important; }
  .venue h3 { font-size: 22px !important; }
  .venue p { font-size: 13px !important; }

  /* Restaurant split */
  .split { gap: 32px !important; }
  .split-media img { aspect-ratio: 4/3; }
  .restaurant-copy { padding: 0 !important; }
}


@media (max-width: 640px) {
  /* Gallery */
  .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 140px !important;
    gap: 10px !important;
  }
  .g-item { --span: 1 !important; }

  /* Contact */
  .contact-grid { gap: 36px !important; }
  .contact-form { padding: 24px 20px !important; }
  .contact-form .row { grid-template-columns: 1fr !important; gap: 14px; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  .contact-details a, .contact-details p { font-size: 15px !important; }

  /* Marquee band: quieter on mobile */
  .marquee-band { padding: 10px 0 !important; }
  .marquee-track span { font-size: 12px !important; letter-spacing: 0.2em !important; }

  /* Floating WhatsApp button: smaller, safer anchor */
  .wa-btn {
    width: 52px !important;
    height: 52px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  /* Footer */
  .footer { padding: 48px 0 32px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Scroll progress bar: tiny bit taller for visibility on touch */
  .scroll-progress { height: 3px; }

  /* Prevent layout jumps from long words */
  body { overflow-x: hidden; }
}


/* Tablet */
@media (min-width: 641px) and (max-width: 900px) {
  .container { padding: 0 28px; }
  .hero-title { font-size: clamp(56px, 10vw, 96px) !important; }
  .display { font-size: clamp(32px, 5.8vw, 52px) !important; }
  .intro-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .pillars { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: 40px !important; }
  .hero-sub { font-size: 15px !important; }
  .display { font-size: 26px !important; }
  .intro-meta { grid-template-columns: 1fr; }
  .nav-wordmark .wm-sub { display: none !important; }
}