/* ==========================================================================
   Dunvale Court Limited — Animations
   All @keyframes plus the transition-driven micro-interactions
   (hover states, reveal-on-scroll, nav/back-to-top/cookie-banner motion).
   Loaded after style.css.
   ========================================================================== */

@keyframes roofline-drift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(2px); }
}

/* Hero background "Ken Burns" zoom — starts slightly zoomed in and
   gently settles to full size over the slide's dwell time. */
@keyframes heroZoomOut{
  0%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}
.hero-slide.is-active .hero-bg img{
  animation:heroZoomOut 7s ease-out forwards;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes pulseGlow{
  0%{ text-shadow:0 0 0 rgba(250,216,182,0); }
  45%{ text-shadow:0 0 18px rgba(250,216,182,.65); }
  100%{ text-shadow:0 0 0 rgba(250,216,182,0); }
}

@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

@keyframes popIn{
  0%{ transform:scale(0); opacity:0; }
  70%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}

/* ==========================================================================
   Premium polish pass — micro-interactions, glass nav, back-to-top,
   cookie banner, scroll progress, breadcrumbs, spinners, tooltips.
   ========================================================================== */

/* -- glass nav on scroll (class toggled by JS) -- */
.site-header.is-scrolled{
  background:rgba(250,246,239,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* -- gradient text, used sparingly (homepage hero headline only, on a dark bg) -- */
.text-gradient{
  background:linear-gradient(90deg, #ffffff 15%, var(--gold-300) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* -- button shadow lift, layered onto existing hover transform -- */
.btn:hover{ box-shadow:0 10px 24px -12px rgba(36,26,16,.35); }

/* -- tier / category card gold accent line, animates in from the left -- */
.tier-card, .cat-card{ position:relative; }
.tier-card::before, .cat-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:3px; height:0;
  background:var(--gold-500);
  transition:height .3s ease;
}
.tier-card:hover::before, .cat-card:hover::before{ height:100%; }

/* -- property card image zoom on hover -- */
.property-media{ position:relative; }
.property-media img{ transition:transform .5s ease, opacity .3s ease; }
.property-card:hover .property-media img.is-active{ transform:scale(1.05); }

/* -- same hover-zoom effect on Insights article images -- */
.blog-card:hover .blog-media img,
.blog-feature:hover .blog-media img{ transform:scale(1.05); }

/* -- roofline: a very slow, subtle drift so it doesn't sit dead-still -- */
.roofline svg{ animation:roofline-drift 7s ease-in-out infinite; }


/* -- hero staggered entrance (homepage hero only) -- */
.hero .hero-tag,
.hero-inner h1,
.hero-inner .sub,
.hero-ctas,
.hero-sub-label{
  animation:fadeInUp .7s ease both;
}
.hero .hero-tag{ animation-delay:.1s; }
.hero-inner h1{ animation-delay:.25s; }
.hero-inner .sub{ animation-delay:.4s; }
.hero-ctas{ animation-delay:.55s; }
.hero-sub-label{ animation-delay:.7s; }


/* -- counter pulse glow once a stat finishes counting up -- */
.stat-num.count-complete{ animation:pulseGlow 1.1s ease-out; }


/* -- simple brand-coloured spinner, used for form/filter loading states -- */
.spinner{
  width:18px; height:18px;
  border:2px solid rgba(250,216,182,.35);
  border-top-color:var(--gold-300);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
.btn .spinner{ border-color:rgba(34,26,16,.25); border-top-color:currentColor; }


/* -- results skeleton, shown briefly while the demo "search" runs -- */
.skeleton-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.skeleton-card .sk-media{ aspect-ratio:4/3; background:linear-gradient(100deg, var(--gold-050) 30%, var(--gold-100) 50%, var(--gold-050) 70%); background-size:200% 100%; animation:shimmer 1.3s ease-in-out infinite; }
.skeleton-card .sk-line{ height:12px; margin:22px 22px 0; border-radius:2px; background:linear-gradient(100deg, var(--line) 30%, #f2e8d8 50%, var(--line) 70%); background-size:200% 100%; animation:shimmer 1.3s ease-in-out infinite; }
.skeleton-card .sk-line.short{ width:40%; }
.skeleton-card .sk-line:last-child{ margin-bottom:22px; }


/* -- tooltip, e.g. on a "Featured" badge -- */
.tooltip{ position:relative; cursor:help; }
.tooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--brown-900);
  color:var(--gold-050);
  font-size:.75rem;
  font-weight:500;
  padding:6px 10px;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:20;
}
.tooltip:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* -- gallery arrows, dots, and render-image badge -- */
.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(20,15,8,.45);
  color:var(--white);
  font-size:1.3rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s ease, background .2s ease;
}
.property-card:hover .gallery-arrow{ opacity:1; }
.gallery-arrow:hover{ background:rgba(20,15,8,.7); }
.gallery-prev{ left:10px; }
.gallery-next{ right:10px; }

.gallery-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  gap:6px;
}
.gallery-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:background .2s ease, transform .2s ease;
}
.gallery-dot.is-active{ background:var(--white); transform:scale(1.3); }

.render-badge{
  position:absolute;
  bottom:14px;
  left:16px;
  z-index:2;
  background:rgba(20,15,8,.72);
  color:var(--gold-100);
  font-size:.68rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}

/* -- featured badge on property cards -- */
.featured-badge{
  position:absolute;
  top:16px; right:16px;
  z-index:1;
  background:var(--gold-300);
  color:var(--brown-900);
  font-size:.72rem;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
}

/* -- property spec row (bed / bath / sqft) -- */
.property-specs{
  display:flex;
  gap:14px;
  margin-top:10px;
  font-size:.82rem;
  color:var(--brown-500);
}
.property-specs span{ display:inline-flex; align-items:center; gap:5px; }
.property-specs svg{ flex-shrink:0; }

/* -- back to top button -- */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--brown-900);
  color:var(--gold-300);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
  z-index:80;
  box-shadow:0 10px 26px -10px rgba(36,26,16,.5);
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ background:var(--brown-700); }

/* -- scroll progress bar -- */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:var(--gold-300);
  z-index:200;
  transition:width .1s linear;
}

/* -- cookie consent banner -- */
.cookie-banner{
  position:fixed;
  left:20px; right:20px; bottom:20px;
  max-width:640px;
  margin:0 auto;
  background:var(--brown-900);
  color:var(--gold-050);
  border-radius:8px;
  padding:20px 22px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  z-index:150;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
  transform:translateY(140%);
  transition:transform .4s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner p{ font-size:.88rem; line-height:1.55; color:rgba(253,236,217,.85); flex:1 1 260px; }
.cookie-banner .btn{ flex-shrink:0; }

/* -- breadcrumbs -- */
.breadcrumbs{
  font-size:.82rem;
  color:rgba(253,236,217,.65);
  margin-bottom:18px;
}
.breadcrumbs a{ color:rgba(253,236,217,.85); }
.breadcrumbs a:hover{ color:var(--gold-300); }
.breadcrumbs .sep{ margin:0 8px; opacity:.5; }

/* -- newsletter / form success state -- */
.form-success{
  display:none;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--brown-900);
}
.form-success.is-visible{ display:inline-flex; }
.form-success .checkmark{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--gold-300);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  animation:popIn .35s ease;
}

.form-error{
  display:none;
  font-weight:600;
  color:#b3261e;
  margin-top:14px;
}
.form-error.is-visible{ display:block; }

/* honeypot spam trap — invisible to real visitors, but present in the
   DOM so simple bots that auto-fill every field still get caught */
.form-field-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* -- inline field validation -- */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:#b3492f;
}
.field-error{
  display:none;
  font-size:.78rem;
  color:#b3492f;
  margin-top:6px;
}
.form-field.has-error .field-error{ display:block; }

/* -- custom scrollbar, brand colours -- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--brown-500); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brown-700); }
html{ scrollbar-color:var(--brown-500) var(--cream); scrollbar-width:thin; }

@keyframes testimonialFade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}