/*
 * HomeShine Hero Slider — lightweight replacement for RevolutionSlider 5.x
 * Full-width Ken Burns crossfade slider. Hidden on ≤900px (mobile hero takes over).
 * Grid basis: 1920×1020 — all % positions derived from these reference dimensions.
 */

/* ─── Ken Burns keyframes ──────────────────────────────────────────────── */
@keyframes hs-kb-zoom-in {
  from { transform: scale(1.00); }
  to   { transform: scale(1.15); }
}
@keyframes hs-kb-zoom-out {
  from { transform: scale(1.15); }
  to   { transform: scale(1.00); }
}
@keyframes hs-kb-zoom-slight {
  from { transform: scale(1.08); }
  to   { transform: scale(1.18); }
}
@keyframes hs-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Slider container ─────────────────────────────────────────────────── */
.hs-slider {
  position: relative;
  width: 100%;
  /* Maintain 1920:1020 aspect ratio */
  aspect-ratio: 1920 / 1020;
  overflow: hidden;
  background: #111;
}

/* ─── Slide layers ─────────────────────────────────────────────────────── */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}
.hs-slide--active {
  opacity: 1;
  z-index: 2;
}

/* ─── Slide background (Ken Burns wrapper) ─────────────────────────────── */
.hs-slide-bg {
  position: absolute;
  inset: -8%; /* extra room so edges don't show during zoom */
  background-size: cover;
  will-change: transform;
  transform-origin: center center;
}
.hs-slide-bg[data-kb="in"]     { animation: hs-kb-zoom-in     7s linear forwards; }
.hs-slide-bg[data-kb="out"]    { animation: hs-kb-zoom-out    7s linear forwards; }
.hs-slide-bg[data-kb="slight"] { animation: hs-kb-zoom-slight 7s linear forwards; }

/* ─── Static overlay (always on top) ──────────────────────────────────── */
.hs-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* let clicks fall through to the slider bg */
}

/* ─── Decorative top icon (clean-slider-icon2.png) ────────────────────── */
.hs-overlay-icon {
  position: absolute;
  /* x=420/1920=21.875%, y=219/1020=21.47% */
  left: 21.875%;
  top: 21.47%;
  width: 6.25%; /* 120/1920 */
  height: auto;
  pointer-events: none;
}

/* ─── Top-right decorative icon (clean-slider-icon.png) ───────────────── */
.hs-overlay-icon2 {
  position: absolute;
  /* x=811/1920=42.24%, y=26/1020=2.55% */
  left: 42.24%;
  top: 2.55%;
  width: 5.99%; /* 115/1920 */
  height: auto;
  pointer-events: none;
}

/* ─── Main content block (headline + subtitle + buttons) ───────────────── */
.hs-content {
  position: absolute;
  /* RevSlider centres text layers: layer center is at 25.16%, so we use
     translateX(-50%) to place our block's centre at the same point. */
  left: 25.16%;
  top: 32.65%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: all;
}

.hs-headline {
  margin: 0 0 0.6em;
  font-family: 'Glacial Indifference', 'Open Sans', sans-serif;
  /* 60px in 1920 grid = 3.125vw */
  font-size: clamp(22px, 3.125vw, 60px);
  line-height: 1.14;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow: none;
  animation: hs-fade-in-up 0.5s ease 0.1s both;
}

/* ─── Subtitle ─────────────────────────────────────────────────────────── */
.hs-subtitle {
  /* Subtitle: centre at x=480/1920=25%, y=586/1020=57.45% */
  position: absolute;
  left: 25%;
  top: 57.45%;
  width: 34.9%; /* 670/1920 */
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  /* 20px in 1920 grid = 1.042vw */
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0,0,0,0.75);
  pointer-events: none;
}

/* ─── CTA buttons ──────────────────────────────────────────────────────── */
.hs-cta {
  /* Buttons at x=298/1920=15.52%, y=717/1020=70.29% */
  position: absolute;
  left: 15.52%;
  top: 70.29%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.04vw, 20px);
  pointer-events: all;
}
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Padding: 15px v / 45px h in 1920 grid */
  padding: clamp(8px, 0.78vw, 15px) clamp(18px, 2.34vw, 45px);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(11px, 0.9375vw, 18px);
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.hs-btn--primary {
  background: var(--hs-blue);
  color: #000;
}
.hs-btn--primary:hover {
  background: var(--hs-blue);
  color: #000;
  opacity: .9;
}
.hs-btn--secondary {
  background: var(--hs-mist);
  color: #000;
}
.hs-btn--secondary:hover {
  background: var(--hs-mist);
  color: #000;
  opacity: .9;
}

/* ─── Eco badge (right-center of slider) ──────────────────────────────── */
.hs-eco-badge {
  position: absolute;
  left: 51%;
  top: 43%;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.4vw, 8px);
  pointer-events: none;
}
.hs-eco-badge img {
  width: clamp(18px, 1.875vw, 36px); /* 36/1920 */
  height: auto;
}
.hs-eco-title {
  font-family: 'Glacial Indifference', 'Open Sans', sans-serif;
  font-size: clamp(13px, 1.302vw, 25px); /* 25/1920 */
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  line-height: 1;
}
.hs-eco-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(11px, 0.9375vw, 18px); /* 18/1920 */
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,0.9);
  max-width: clamp(120px, 13.23vw, 254px); /* 254/1920 */
  margin: 0;
}
.hs-eco-badge-icon {
  width: clamp(20px, 2.083vw, 40px); /* 40/1920 */
  height: auto;
  cursor: pointer;
  pointer-events: all;
}

/* ─── Leaf decoration (bottom center-left) ────────────────────────────── */
.hs-leaf-deco {
  position: absolute;
  /* x=center-66=894/1920=46.56%, y=bottom */
  left: 46.56%;
  bottom: 0;
  width: 7.03%; /* 135/1920 */
  height: auto;
  pointer-events: none;
  z-index: 11;
}

/* ─── Green shape — had no explicit size in RevSlider, not visible in original ── */
.hs-green-shape {
  display: none;
}

/* ─── Bullet navigation (hermes style, vertical, right-center) ─────────── */
.hs-bullets {
  position: absolute;
  right: 1.04%; /* ~20px in 1920 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 20;
  pointer-events: all;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-bullet {
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hs-bullet--active,
.hs-bullet:hover {
  background: #fff;
  border-color: #fff;
}

/* ─── Hide on mobile (≤900px — mobile hero takes over) ────────────────── */
@media (max-width: 900px) {
  .hs-slider { display: none !important; }
}