/* ------------------------------------------------------------------
   Feathers Salon – additions for the static site.
   Home hero slider (replaces Slider Revolution, same look and timing).
   ------------------------------------------------------------------ */
.fs-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #000001;
}
.fs-hero-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  z-index: 1;
}
.fs-hero-slide.is-leaving { visibility: visible; z-index: 2; }
.fs-hero-slide.is-active  { visibility: visible; z-index: 3; }

.fs-hero .fs-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
/* the incoming background slides down over the previous one */
.fs-hero-slide.is-active .fs-hero-bg { animation: fs-hero-slide-down 1000ms cubic-bezier(.645, .045, .355, 1) both; }

.fs-hero-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33.333%;
  /* sizes follow the original slider: full size on screens 900px tall or more, scaled down below that */
  padding: min(66px, 7.333vh) 0 min(65px, 7.222vh) 110px;
  background: #000;
}
.fs-hero-mask { overflow: hidden; }
.fs-hero-mask > * {
  transform: translateY(105%);
}
.fs-hero-slide.is-active .fs-hero-mask > * { animation: fs-hero-rise 800ms cubic-bezier(.075, .82, .165, 1) both; }
.fs-hero-slide.is-active .fs-hero-mask:nth-child(1) > * { animation-delay: 500ms; }
.fs-hero-slide.is-active .fs-hero-mask:nth-child(2) > * { animation-delay: 650ms; }
.fs-hero-slide.is-active .fs-hero-mask:nth-child(3) > * { animation-delay: 800ms; }

.fs-hero .fs-hero-tagline {
  margin: 0 0 min(30px, 3.333vh);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: min(24px, 2.667vh);
  line-height: min(30px, 3.333vh);
  letter-spacing: -1px;
  color: #d1b096;
}
.fs-hero .fs-hero-title {
  width: min(547px, 60.78vh);
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: min(55px, 6.111vh);
  line-height: min(70px, 7.778vh);
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}
.fs-hero-mask:has(.fs-hero-title) { overflow: visible; clip-path: inset(0 -100vw 0 0); }
.fs-hero .fs-hero-button {
  display: inline-block;
  margin-top: min(30px, 3.333vh);
  padding: min(22px, 2.444vh) min(40px, 4.444vh);
  white-space: nowrap;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: min(16px, 1.778vh);
  line-height: min(16px, 1.778vh);
  letter-spacing: min(2px, .222vh);
  text-transform: uppercase;
  color: #000;
  background: #d1b096;
  transition: background-color .3s, color .3s;
}
.fs-hero .fs-hero-button:hover, .fs-hero .fs-hero-button:focus { color: #000; background: #fff; }

.fs-hero-bullets {
  position: absolute;
  left: 40px;
  bottom: min(130px, 14.44vh);
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.fs-hero-bullet {
  position: relative;
  width: 2px;
  height: min(60px, 6.667vh);
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
}
.fs-hero-bullet::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.fs-hero-bullet.is-active, .fs-hero-bullet:hover { background: #d1b096; }

@keyframes fs-hero-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes fs-hero-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }

@media (max-width: 777px) {
  .fs-hero-panel { width: 100%; padding: 40px 30px 30px; }
  .fs-hero .fs-hero-tagline { font-size: 22px; letter-spacing: -.5px; margin-bottom: 20px; }
  .fs-hero .fs-hero-title { width: auto; font-size: 45px; line-height: 60px; }
  .fs-hero-bullets { display: none; }
}
/* phones: the original slider scaled its 480px mobile layout down to the screen width */
@media (max-width: 479px) {
  .fs-hero-panel { padding: 8.75vw 7.7vw 8vw; }
  .fs-hero .fs-hero-tagline { font-size: 4.583vw; line-height: 6.25vw; letter-spacing: -.104vw; margin-bottom: 4.167vw; }
  .fs-hero .fs-hero-title { width: 58vw; font-size: 9.375vw; line-height: 12.5vw; }
  .fs-hero .fs-hero-button { margin-top: 6.25vw; padding: 4.583vw 9.375vw; font-size: 3.333vw; line-height: 3.333vw; letter-spacing: .417vw; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-hero-slide.is-active .fs-hero-bg,
  .fs-hero-slide.is-active .fs-hero-mask > * { animation: none; transform: none; }
}