/* BrandNewHomes.in - CSS Motion Primitives (Zero-Bloat, Zero-CLS) */
/* Hardware-accelerated, Compositor-only, 60/120 FPS, No External Libraries */

/* -------------------------------------------------------------------------- */
/* 1. Compositor-Only Card Elevation                                          */
/* -------------------------------------------------------------------------- */
.bnp-listing-card,
.home-card,
.property-card,
.bnh-elevated-card {
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
  contain: content;
}

.bnp-listing-card:hover,
.home-card:hover,
.property-card:hover,
.bnh-elevated-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

.bnp-listing-card:active,
.home-card:active,
.property-card:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.12);
  transition-duration: 80ms;
}

/* -------------------------------------------------------------------------- */
/* 2. Scroll-Docked Glassmorphism Filter Bar                                  */
/* -------------------------------------------------------------------------- */
.refinement-bar-sticky,
.sticky-refinement-dock,
.search-refinement-bar.is-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}

.refinement-bar-sticky.is-scrolled,
.sticky-refinement-dock.is-scrolled,
.search-refinement-bar.is-sticky {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
}

/* Dark mode refinement docking */
[data-theme="dark"] .refinement-bar-sticky.is-scrolled,
[data-theme="dark"] .sticky-refinement-dock.is-scrolled {
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------------------------------- */
/* 3. Zero-CLS Shimmer Skeleton                                               */
/* -------------------------------------------------------------------------- */
.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
  overflow: hidden;
}

.skeleton-shimmer[data-aspect="16/9"],
.skeleton-shimmer-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.skeleton-shimmer[data-aspect="4/3"],
.skeleton-shimmer-4-3 {
  aspect-ratio: 4 / 3;
}

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

/* -------------------------------------------------------------------------- */
/* 4. Zero-CLS Tabular Metric Counter Numbers                                 */
/* -------------------------------------------------------------------------- */
[data-counter],
.price-counter-val,
.stat-counter-number,
.mstat-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: inline-block;
  transition: color 200ms ease;
  contain: layout style;
}

/* -------------------------------------------------------------------------- */
/* 5. Zero-CLS Responsive Video Containers & Scrims                           */
/* -------------------------------------------------------------------------- */
.bnh-video-card-wrapper,
.bnh-video-container,
.responsive-video-container,
.video-tour-container,
.bnp-video-card-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #0b1120; /* Dark slate placeholder to prevent layout shifts */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  contain: layout paint;
}

.bnh-video-card-wrapper[data-aspect="4/3"],
.bnh-video-container[data-aspect="4/3"],
.responsive-video-container[data-aspect="4/3"],
.bnp-video-card-container[data-aspect="4/3"] {
  aspect-ratio: 4 / 3;
}

.bnh-video-card-wrapper[data-aspect="16/9"],
.bnh-video-container[data-aspect="16/9"],
.responsive-video-container[data-aspect="16/9"],
.bnp-video-card-container[data-aspect="16/9"] {
  aspect-ratio: 16 / 9;
}

/* Fluid Media Fill */
.bnh-video-card-wrapper video,
.bnh-video-card-wrapper img,
.bnh-video-container video,
.bnh-video-container img,
.responsive-video-container video,
.responsive-video-container img,
.bnp-video-card-container video,
.bnp-video-card-container img.bnp-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms ease;
}

.bnh-video-card-wrapper video,
.bnh-video-container video,
.responsive-video-container video,
.bnp-video-card-container video {
  opacity: 0;
}

.bnh-video-card-wrapper video.is-active,
.bnh-video-card-wrapper video.is-playing,
.bnh-video-container video.is-active,
.bnp-video-card-container video.is-playing,
.bnp-video-card-container video.is-active {
  opacity: 1;
}

.bnh-video-card-wrapper .bnh-video-poster,
.bnh-video-container .bnh-video-poster {
  z-index: 1;
  pointer-events: none;
}

.bnh-video-card-wrapper .bnh-video-reel,
.bnh-video-container .bnh-video-reel {
  z-index: 2;
  pointer-events: none;
}

.bnh-video-card-wrapper:hover .bnh-video-poster,
.bnh-video-container:hover .bnh-video-poster,
.bnp-video-card-container:hover img.bnp-video-poster {
  transform: scale(1.03);
}

/* Glassmorphism Badge Overlays */
.bnp-tour-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.bnp-tour-badge-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

/* Bottom Title Scrim */
.bnp-tour-scrim {
  position: absolute;
  left: 0;
  right: 0;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.9) 100%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.bnp-tour-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0;
}

.bnp-tour-tagline {
  color: #cbd5e1;
  font-size: 0.825rem;
  margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------- */
/* 6. Native View Transitions API (Cross-Document Page Morphing)              */
/* -------------------------------------------------------------------------- */

/* Enable Native Cross-Document Navigation Transitions (Chrome 126+) */
@view-transition {
  navigation: auto;
}

/* Base Root Transition Tuning */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual Shared Element Transitions (Card to Detail View) */
::view-transition-old(property-hero),
::view-transition-new(property-hero) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: normal;
}

::view-transition-old(property-title),
::view-transition-new(property-title) {
  animation-duration: 250ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: normal;
}

/* Shared Element Morphing Identifiers on Destination Page */
#heroMainImg,
.gallery-image-main {
  view-transition-name: property-hero;
}

#propertyMainTitle {
  view-transition-name: property-title;
}

/* -------------------------------------------------------------------------- */
/* 7. Reduced Motion Compliance                                               */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bnp-listing-card:hover,
  .home-card:hover,
  .property-card:hover,
  .bnh-elevated-card:hover,
  .bnh-video-card-wrapper:hover .bnh-video-poster,
  .bnh-video-container:hover .bnh-video-poster,
  .bnp-video-card-container:hover img.bnp-video-poster {
    transform: none !important;
  }

  .skeleton-shimmer {
    animation: none !important;
    background: #e2e8f0 !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}