.hero-slider .hero-media { background: var(--navy); }
.hero-slide {
  position: absolute;
  inset: -3%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.15s ease, transform 7s cubic-bezier(.2,.65,.25,1);
  will-change: opacity, transform;
}
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,rgba(5,16,24,.12),rgba(5,16,24,.38)); }
.hero-slide.is-active { opacity: 1; transform: scale(1.105); }
.hero-slide-room { background-image: url('../assets/hotel-entrance.png'); background-position: center 46%; }
.hero-slide-lobby { background-image: url('https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=1900&q=88'); }
.hero-slide-suite { background-image: url('https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1900&q=88'); }

.hero-copy-ready > .eyebrow,
.hero-copy-ready > h1,
.hero-copy-ready > p,
.hero-copy-ready > .hero-actions {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(7px);
}
.hero-copy-ready.is-revealing > .eyebrow { animation: heroCopyReveal .58s cubic-bezier(.2,.75,.25,1) both; }
.hero-copy-ready.is-revealing > h1 { animation: heroCopyReveal .78s cubic-bezier(.16,.8,.25,1) .1s both; }
.hero-copy-ready.is-revealing > p { animation: heroCopyReveal .68s cubic-bezier(.2,.75,.25,1) .28s both; }
.hero-copy-ready.is-revealing > .hero-actions { animation: heroCopyReveal .62s cubic-bezier(.2,.75,.25,1) .42s both; }

.hero-slider-controls {
  position: absolute;
  z-index: 4;
  left: max(24px,calc((100vw - 1180px)/2));
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-slider-arrow {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8,22,32,.34);
  color: #fff;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: border-color .22s ease,background .22s ease,transform .22s ease;
}
.hero-slider-arrow svg { width: 20px; height: 20px; }
.hero-slider-arrow:hover { border-color: var(--gold-light); background: rgba(199,168,107,.88); color: var(--navy); transform: scale(1.06); }
.hero-slider-arrow:focus-visible,.hero-slider-dots button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.hero-slider-dots { display: flex; align-items: center; gap: 5px; margin: 0 6px; }
.hero-slider-dots button { width: 34px; height: 44px; padding: 0; border: 0; display: grid; place-items: center; background: transparent; cursor: pointer; }
.hero-slider-dots button span { width: 22px; height: 2px; display: block; overflow: hidden; position: relative; background: rgba(255,255,255,.34); }
.hero-slider-dots button span::after { content: ''; position: absolute; inset: 0; background: var(--gold-light); transform: scaleX(0); transform-origin: left; }
.hero-slider-dots button.is-active span::after { animation: heroProgress 5.5s linear forwards; }
.hero-slider-count { min-width: 66px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.52); font-size: 9px; font-style: normal; }
.hero-slider-count strong { color: #fff; font-size: 11px; }
.hero-slider-count i { width: 18px; height: 1px; background: rgba(255,255,255,.35); }

@keyframes heroProgress { to { transform: scaleX(1); } }
@keyframes heroCopyReveal {
  0% { opacity: 0; transform: translateY(28px); filter: blur(7px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media(max-width:760px) {
  .hero-slider-controls { left: 15px; bottom: 24px; gap: 6px; }
  .hero-slider-arrow { width: 44px; height: 44px; }
  .hero-slider-count { display: none; }
  .hero-side-note { display: none; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-slide { transition: opacity .2s ease; transform: none; }
  .hero-slide.is-active { transform: none; }
  .hero-slider-dots button.is-active span::after { animation: none; transform: scaleX(1); }
  .hero-copy-ready > .eyebrow,
  .hero-copy-ready > h1,
  .hero-copy-ready > p,
  .hero-copy-ready > .hero-actions { opacity: 1; transform: none; filter: none; animation: none; }
}