/* =====================================================================
   Emerald Farm — motion & polish enhancements
   Loaded after each page's inline <style> so these rules win on ties.
   Everything degrades gracefully and respects prefers-reduced-motion.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. Scroll reveals — extends the existing .reveal / .reveal.visible
      system (toggled by each page's IntersectionObserver).
      Add a direction class alongside .reveal in the markup:
        class="reveal reveal-left"   slides in from the left
        class="reveal reveal-right"  slides in from the right
        class="reveal reveal-up"     rises up (default-ish, larger)
        class="reveal reveal-scale"  eases up in scale
   --------------------------------------------------------------------- */
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1),
                      transform .8s cubic-bezier(.2,.7,.2,1); }

.reveal-left  { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.reveal-up    { transform: translateY(42px); }
.reveal-scale { transform: scale(.93); }

.reveal.visible.reveal-left,
.reveal.visible.reveal-right,
.reveal.visible.reveal-up,
.reveal.visible.reveal-scale { transform: none; }

/* Stagger helpers — add d1..d5 next to .reveal for cascading entrances */
.reveal.d1 { transition-delay: .10s; }
.reveal.d2 { transition-delay: .20s; }
.reveal.d3 { transition-delay: .30s; }
.reveal.d4 { transition-delay: .40s; }
.reveal.d5 { transition-delay: .50s; }

/* ---------------------------------------------------------------------
   2. Hero (index) — slow, cinematic Ken Burns pan over the photo.
   --------------------------------------------------------------------- */
.hero {
  background-size: cover;
  background-position: center;
  animation: ef-pan 34s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes ef-pan {
  from { background-position: 50% 40%; }
  to   { background-position: 50% 62%; }
}

/* ---------------------------------------------------------------------
   3. Sub-page headers (.page-header) — gentle text entrance + a slowly
      drifting decorative pattern in the ::before layer.
   --------------------------------------------------------------------- */
.page-header h1 { animation: ef-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.page-header p  { animation: ef-rise .9s .12s cubic-bezier(.2,.7,.2,1) both; }
.page-header::before { animation: ef-drift 48s linear infinite; }

@keyframes ef-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ef-drift {
  from { background-position: 0 0; }
  to   { background-position: 240px 240px; }
}

/* ---------------------------------------------------------------------
   4. Cards — soft lift on hover.
   --------------------------------------------------------------------- */
.price-card { transition: transform .35s cubic-bezier(.2,.7,.2,1),
                          box-shadow .35s ease; }
.price-card:hover { transform: translateY(-8px);
                    box-shadow: 0 20px 44px rgba(26,74,46,.16); }

/* ---------------------------------------------------------------------
   5. Image grids — zoom the photo (not the frame) on hover.
      rooms.html uses .gallery-item; gallery.html uses .gal-item.
   --------------------------------------------------------------------- */
.gallery-item { transition: box-shadow .35s ease; }
.gallery-item img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover { transform: none; box-shadow: 0 16px 38px rgba(26,74,46,.18); }
.gallery-item:hover img { transform: scale(1.07); }

.gal-item img { transition: transform .6s cubic-bezier(.2,.7,.2,1) !important; }
.gal-item:hover img { transform: scale(1.08); }

/* ---------------------------------------------------------------------
   6. Buttons — subtle lift micro-interaction across all variants.
   --------------------------------------------------------------------- */
.btn { transition: transform .25s ease, box-shadow .25s ease,
                   background .25s ease, color .25s ease; }
.btn:hover { transform: translateY(-2px); }

/* WhatsApp floating button — grow slightly on hover (keeps its pulse) */
.wa-float:hover { transform: scale(1.08); }

/* ---------------------------------------------------------------------
   7. Nav links — animated gold underline on hover (skips the WA button).
   --------------------------------------------------------------------- */
.nav-links a:not(.nav-wa) { position: relative; }
.nav-links a:not(.nav-wa)::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 0; background: #c9a84c; transition: width .3s ease;
}
.nav-links a:not(.nav-wa):hover::after { width: 100%; }

/* ---------------------------------------------------------------------
   8. Responsive — the index "Ways to Stay" package grid.
   --------------------------------------------------------------------- */
@media (max-width: 880px) {
  .pkg-grid { grid-template-columns: 1fr !important; max-width: 420px !important; }
}

/* ---------------------------------------------------------------------
   9. Call-to-book number — home hero pill + footer pill.
   --------------------------------------------------------------------- */
.hero-call {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  padding: 9px 24px 9px 11px; border-radius: 50px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(201,168,76,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #faf8f3; transition: all .3s ease;
}
.hero-call:hover { background: rgba(201,168,76,.16); border-color: #c9a84c; transform: translateY(-2px); }
.hero-call .call-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #c9a84c; color: #1a4a2e;
  display: flex; align-items: center; justify-content: center;
  animation: call-ring 2.4s ease-in-out infinite;
}
.hero-call .call-lbl { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,248,243,.6); }
.hero-call b { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.5rem; color: #ffd98a; letter-spacing: .02em; }
@keyframes call-ring {
  0%, 60%, 100% { transform: rotate(0); }
  8% { transform: rotate(-13deg); } 16% { transform: rotate(13deg); }
  24% { transform: rotate(-10deg); } 32% { transform: rotate(10deg); }
  40% { transform: rotate(-5deg); } 48% { transform: rotate(5deg); }
}

.footer-call {
  display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 15px;
  padding: 11px 22px; border-radius: 50px; background: #c9a84c; color: #1a4a2e;
  font-weight: 600; font-size: 1rem; letter-spacing: .02em; transition: all .25s ease;
  white-space: nowrap; max-width: 100%;
}
.footer-call svg { flex: none; }
.footer-call:hover { background: #e8d5a0; color: #143d24; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201,168,76,.4); }

/* Note: animations intentionally play for all visitors regardless of the
   OS "reduce motion" setting (per site owner's preference). */