/* ==========================================================================
   H2M PROPERTY GROUP — DYNAMIC HOMEPAGE (hero before/after + compare slider)
   Additive stylesheet: loads AFTER styles.css, only adds new classes and the
   .hero--dynamic modifier. Nothing in styles.css is changed or overridden
   for any other page.
   ========================================================================== */

/* ---------- Hero: photo scene behind the existing content ---------- */
.hero--dynamic {
  --wipe: 2.2s;
  --ease: cubic-bezier(.65, 0, .35, 1);
  isolation: isolate;
  padding: 100px 0 120px;
  min-height: 600px;
}
.hero--dynamic .skyline-motif { z-index: 1; }

.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.hero-layer { position: absolute; inset: 0; }
.hero-layer img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  /* Source photos have the house in the middle; zoom anchored left pushes it
     right so the headline sits over the plain gable wall, not the house. */
  transform-origin: 0 50%; transform: scale(1.25);
}
.hero-layer--after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--wipe) var(--ease);
}
.hero--dynamic[data-state="after"] .hero-layer--after { clip-path: inset(0 0 0 0); }

.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.80) 36%, rgba(0,0,0,.44) 68%, rgba(0,0,0,.18) 100%);
}
.hero-edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -3px;
  background: var(--gold);
  box-shadow: 0 0 18px 2px rgba(212,175,55,.6);
  opacity: 0;
  transition: left var(--wipe) var(--ease), opacity .3s ease;
}
.hero--dynamic[data-state="after"] .hero-edge { left: 100%; }
.hero--dynamic.is-wiping .hero-edge { opacity: 1; }

/* Caption + controls sit above the text layer, aligned to the page gutter */
.hero-caption,
.hero-controls { position: absolute; z-index: 3; bottom: 24px; pointer-events: auto; }
.hero-caption {
  left: max(24px, calc(50% - 570px + 24px));
  margin: 0; padding: 6px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #D9D9D9; background: rgba(0,0,0,.6); border-left: 2px solid var(--gold);
}
.hero-controls {
  right: max(24px, calc(50% - 570px + 24px));
  display: flex; gap: 8px; align-items: center;
}
.hero-chip, .hero-play {
  font-family: inherit; cursor: pointer;
  background: rgba(0,0,0,.6); color: var(--white);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hero-chip { padding: 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero-chip:hover, .hero-play:hover { border-color: var(--gold); }
.hero-chip.is-on { background: var(--gold); color: var(--black); border-color: var(--gold); }
.hero-play { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.hero-play svg { width: 14px; height: 14px; fill: currentColor; }
.hero-play .i-play { display: none; }
.hero-play[data-paused="true"] .i-play { display: block; }
.hero-play[data-paused="true"] .i-pause { display: none; }
.hero-chip:focus-visible, .hero-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Between phone and desktop widths the hero is less wide than the photo,
   so zoom less to keep the house fully in view. */
@media (max-width: 1100px) and (min-width: 781px) {
  .hero-layer img { transform: scale(1.12); }
}

/* Phone: photo on top, text below on black, so the house is actually visible */
@media (max-width: 780px) {
  .hero--dynamic { padding: 0 0 56px; min-height: 0; }
  .hero-media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .hero-layer img { transform: none; object-position: 58% 50%; }
  .hero-shade { background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, #000 100%); }
  .hero--dynamic .wrap { padding-top: 28px; }
  .hero-caption { left: 16px; right: 16px; top: 12px; bottom: auto; font-size: 9.5px; width: fit-content; max-width: calc(100% - 32px); }
  .hero-controls { right: 16px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-layer--after, .hero-edge { transition: none; }
}

/* ---------- Before / after compare slider ---------- */
.ba-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 18px; }
.ba-tab {
  font-family: inherit; cursor: pointer;
  padding: 9px 22px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; border: 1.5px solid var(--black); background: transparent; color: var(--black);
  transition: background-color .18s ease, color .18s ease;
}
.ba-tab:hover { background: var(--charcoal); color: var(--white); }
.ba-tab[aria-selected="true"] { background: var(--gold); border-color: var(--black); color: var(--black); }
.ba-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ba {
  --pos: 50%;
  position: relative; overflow: hidden; background: var(--charcoal);
  aspect-ratio: 16 / 9; border: 3px solid var(--gold);
  user-select: none; -webkit-user-select: none;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; display: block; object-fit: cover; transform-origin: 0 50%; }
/* The kitchen "after" render carries a small generator mark in its bottom-right
   corner. Both kitchen images are framed identically (zoomed from the left) so
   they stay aligned and that corner falls outside the frame. */
.ba[data-scene="kitchen"] .ba-layer img { transform: scale(1.15); }
.ba-layer--after { clip-path: inset(0 0 0 var(--pos)); }

.ba-label {
  position: absolute; top: 14px; z-index: 3;
  padding: 6px 14px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ba-label--before { left: 14px; background: var(--black); color: var(--white); }
.ba-label--after { right: 14px; background: var(--gold); color: var(--black); }

.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--gold); z-index: 4; pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--black); border: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.ba-knob svg { width: 20px; height: 20px; }

/* Native range laid over the whole image: drag, tap and arrow keys all work.
   styles.css gives every input padding/border/background, so reset them here. */
.ba .ba-range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none;
}
.ba .ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100vh; }
.ba .ba-range::-moz-range-thumb { width: 46px; height: 100vh; border: 0; }
.ba:focus-within .ba-knob { outline: 2px solid var(--white); outline-offset: 3px; }

.ba-note { max-width: 680px; }

@media (max-width: 780px) {
  .ba { aspect-ratio: 4 / 3; }
  .ba-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .ba-label { top: 10px; font-size: 11px; padding: 5px 11px; }
  .ba-label--before { left: 10px; } .ba-label--after { right: 10px; }
}