/* HeavenlyCollections — animations.css v4  Nature-Luxury Fusion */

/* ============================================================
   HERO — Ken Burns + gradient drift
   ============================================================ */
.hc-hero__slide.active {
  animation: kenBurns 14s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0,0) }
  100% { transform: scale(1.12) translate(-0.8%,-0.4%) }
}
.hc-hero__slide::before {
  animation: mistDrift 16s ease-in-out infinite alternate;
}
@keyframes mistDrift {
  0%   { opacity:.10 }
  50%  { opacity:.22 }
  100% { opacity:.10 }
}

/* ============================================================
   SECTION HEADING UNDERLINE REVEAL
   ============================================================ */
.section-heading h2::after {
  transition: transform .65s cubic-bezier(.16,1,.3,1) .1s;
}

/* ============================================================
   PROPERTY CARD — 3D + specular
   ============================================================ */
.property-card {
  transform-style: preserve-3d;
  transition: box-shadow .28s ease, transform .62s cubic-bezier(.16,1,.3,1);
}
.property-card__body {
  transition: transform .62s cubic-bezier(.16,1,.3,1);
}
.property-card:hover .property-card__body {
  transform: translateZ(8px);
}

/* ============================================================
   VIBE CARDS
   ============================================================ */
.vibe-card {
  transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease;
}

/* ============================================================
   FEATURE SECTION CLIP REVEAL
   ============================================================ */
.feature-img-wrap {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.16,1,.3,1) .2s;
}
.feature-img-wrap.visible {
  clip-path: inset(0 0% 0 0);
}

/* ============================================================
   GLASS FEATURE ICONS — float + pulse ring
   ============================================================ */
@keyframes floatSoft {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-10px) }
}
@keyframes pulseRing {
  0%   { transform:scale(.88); opacity:.55 }
  70%  { transform:scale(1.22); opacity:0 }
  100% { opacity:0 }
}
.feature-icon-wrap {
  animation: floatSoft 4.5s ease-in-out infinite;
  position: relative;
}
.feature-icon-wrap::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--sage, #7FA87F); opacity:0;
  animation: pulseRing 3s ease-out infinite;
}
.glass-card:hover .feature-icon-wrap { animation:none }

/* ============================================================
   NAVBAR LOGO LEAF
   ============================================================ */
@keyframes leafSway {
  0%,100% { transform: rotate(0deg)  }
  30%      { transform: rotate(8deg)  }
  70%      { transform: rotate(-4deg) }
}
.hc-navbar__logo-icon,
.hc-navbar__logo svg {
  animation: leafSway 6s ease-in-out infinite;
  display: inline-block;
  transform-origin: bottom center;
}

/* ============================================================
   WEATHER ICON FLOAT
   ============================================================ */
.weather-icon-main {
  animation: floatSoft 4s ease-in-out infinite;
}

/* ============================================================
   PARTICLE CANVAS OPACITY
   ============================================================ */
#hc-particle-canvas { opacity:.80 }

/* ============================================================
   BOOKING WIDGET — price shimmer (subtle)
   ============================================================ */
@keyframes priceShimmer {
  0%   { background-position: -200% }
  100% { background-position:  200% }
}
.booking-form-widget__price {
  background: linear-gradient(90deg,
    var(--charcoal, #2C3830),
    var(--sage, #7FA87F),
    var(--charcoal, #2C3830)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: priceShimmer 5s linear infinite;
}
.booking-form-widget__price .currency,
.booking-form-widget__price span {
  -webkit-text-fill-color: var(--charcoal-soft, #6A7A6A);
  background: none;
}

/* ============================================================
   STAT COUNTER STRIP
   ============================================================ */
.stats-strip__num {
  background: linear-gradient(90deg,#fff,rgba(255,255,255,.72),#fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: priceShimmer 4s linear infinite;
}

/* ============================================================
   MODAL ENTRANCE
   ============================================================ */
.hc-modal-overlay.open .hc-modal {
  animation: modalIn .45s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes modalIn {
  from { transform: translateY(36px) scale(.94); opacity:.6 }
  to   { transform: translateY(0) scale(1);    opacity:1 }
}

/* ============================================================
   NOTICE ANIMATE IN
   ============================================================ */
.hc-notice { animation: noticeIn .3s cubic-bezier(.16,1,.3,1) }
@keyframes noticeIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   MOBILE FAB BAR SLIDE UP
   ============================================================ */
.hc-fab-bar { animation: fabSlideUp .45s cubic-bezier(.16,1,.3,1) .4s both }
@keyframes fabSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ============================================================
   WAVE PATH ANIMATION
   ============================================================ */
.wave-path-1 { animation: wave1 7s ease-in-out infinite }
.wave-path-2 { animation: wave2 9s ease-in-out infinite .8s }
@keyframes wave1 {
  0%,100% { d: path("M0,40 C270,72 540,8 810,40 C945,56 1012,24 1080,40 L1080,72 L0,72Z") }
  50%      { d: path("M0,50 C220,18 450,68 700,48 C860,34 980,62 1080,50 L1080,72 L0,72Z") }
}
@keyframes wave2 {
  0%,100% { d: path("M0,52 C180,28 420,68 660,52 C840,36 990,60 1080,52 L1080,72 L0,72Z") }
  50%      { d: path("M0,42 C240,70 500,22 750,42 C900,56 1020,30 1080,42 L1080,72 L0,72Z") }
}

/* ============================================================
   DASHBOARD NAV ACTIVE INDICATOR
   ============================================================ */
.dashboard-nav-btn { position: relative }
.dashboard-nav-btn.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:60%; min-height:18px;
  background:var(--sage, #7FA87F); border-radius:0 2px 2px 0;
}

/* ============================================================
   RANGE SLIDER FILL
   ============================================================ */
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--sage, #7FA87F) 0%,
    var(--sage, #7FA87F) var(--pct, 50%),
    rgba(127,168,127,.2) var(--pct, 50%),
    rgba(127,168,127,.2) 100%
  );
  height: 4px; border-radius: 4px;
}

/* ============================================================
   ARTICLE CARD HOVER
   ============================================================ */
.article-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease }
.article-card:hover { transform: translateY(-6px) rotateX(1deg) }

/* ============================================================
   FOOTER SOCIAL RIPPLE
   ============================================================ */
.hc-footer__social { overflow: hidden; position: relative }
.hc-footer__social::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);
  transform:scale(0); opacity:0;
  transition:transform .42s ease,opacity .42s ease;
}
.hc-footer__social:hover::before { transform:scale(2); opacity:1 }

/* ============================================================
   SCROLL-TO-TOP
   ============================================================ */
#scroll-to-top {
  position:fixed; bottom:5.2rem; right:1.4rem;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(145deg,var(--sage-light, #B4D4B4),var(--sage-dark, #4A7A4A));
  color:#fff; border:none; cursor:pointer;
  box-shadow:var(--sh-sage, 0 0 24px rgba(127,168,127,.36)),0 4px 12px rgba(0,0,0,.12);
  display:none; align-items:center; justify-content:center;
  font-size:.9rem; z-index:500;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
#scroll-to-top:hover { transform:translateY(-4px) scale(1.08) }
#scroll-to-top svg { width:18px; height:18px }

/* ============================================================
   BADGE HOP
   ============================================================ */
.badge-hc { transition: transform .22s cubic-bezier(.34,1.56,.64,1) }
.badge-hc:hover { transform: translateY(-2px) }

/* ============================================================
   REDUCE MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hc-hero__slide.active,
  .feature-icon-wrap,
  .weather-icon-main,
  .hc-navbar__logo-icon,
  .hc-navbar__logo svg { animation: none !important }

  .booking-form-widget__price {
    animation: none !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--charcoal, #2C3830) !important;
  }
  .stats-strip__num {
    animation: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
  }
  .property-card { transform: none !important }
  .article-card:hover { transform: translateY(-4px) }
  .feature-img-wrap { clip-path: none !important; transition: none !important }
  .btn-heavenly::after { display: none }
}