/* =========================================================
   La Plage — hero carousel (assets/css/hero-carousel.css)
   Modern crossfade hero carousel with a subtle Ken Burns
   zoom on each slide, arrow + dot navigation and an autoplay
   progress bar. Depends on the design tokens (--forest,
   --gold, etc.) already defined in styles.css, so load this
   AFTER styles.css.
   ========================================================= */

.hero-carousel{
  position:relative;
  min-height:680px;
  overflow:hidden;
  background:var(--forest-deep);
}

.hc-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease;
  display:flex;
  align-items:flex-end;
}
.hc-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

.hc-slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
}
.hc-slide.active img{
  animation:hcKenBurns 9s ease-out forwards;
}
@keyframes hcKenBurns{
  from{ transform:scale(1); }
  to{ transform:scale(1.12); }
}

.hc-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(20,24,14,.74) 0%, rgba(20,24,14,.22) 46%, rgba(20,24,14,.4) 100%);
}

.hc-content{
  position:relative;
  max-width:1220px;margin:0 auto;
  padding:120px 32px 100px;
  width:100%;
  color:var(--white);
}
.hc-slide .eyebrow{color:var(--gold-soft);margin-bottom:22px;opacity:0;transform:translateY(14px);transition:opacity .7s ease .35s, transform .7s ease .35s;}
.hc-slide .eyebrow::before{background:var(--gold-soft);}
.hc-slide.active .eyebrow{opacity:1;transform:translateY(0);}

.hc-slide h1{
  font-size:clamp(38px,5.6vw,64px);
  line-height:1.08;
  max-width:660px;
  font-weight:400;
  color:var(--white);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease .45s, transform .7s ease .45s;
}
.hc-slide.active h1{opacity:1;transform:translateY(0);}
.hc-slide h1 .accent{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--gold-soft);
  display:block;
  font-size:1.05em;
}

.hc-slide p.lede{
  max-width:480px;margin:24px 0 32px;
  font-size:15.5px;line-height:1.75;color:#e9e6da;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease .55s, transform .7s ease .55s;
}
.hc-slide.active p.lede{opacity:1;transform:translateY(0);}

.hc-slide .btn{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease .65s, transform .7s ease .65s;
}
.hc-slide.active .btn{opacity:1;transform:translateY(0);}

/* ---------- Rating chip ---------- */
.hero-carousel .rating-chip{
  position:absolute;right:32px;top:110px;z-index:5;
  background:rgba(27,35,20,.72);
  border:1px solid rgba(255,255,255,.25);
  padding:18px 26px;text-align:center;
}
.hero-carousel .rating-chip .stars{color:var(--gold-soft);letter-spacing:4px;font-size:13px;margin-bottom:6px;}
.hero-carousel .rating-chip .label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#d9d4c3;margin-top:6px;}

/* ---------- Arrows ---------- */
.hc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(20,24,14,.4);
  border:1px solid rgba(255,255,255,.3);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;
  z-index:6;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.hc-arrow:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--forest-deep);}
.hc-prev{left:28px;}
.hc-next{right:28px;}

/* ---------- Dots ---------- */
.hc-dots{
  position:absolute;left:0;right:0;bottom:34px;
  display:flex;justify-content:center;gap:10px;
  z-index:6;
}
.hc-dot{
  width:34px;height:4px;border:none;background:rgba(255,255,255,.35);
  cursor:pointer;padding:0;position:relative;overflow:hidden;
  transition:background .25s ease;
}
.hc-dot:hover{background:rgba(255,255,255,.6);}
.hc-dot.active{background:rgba(255,255,255,.35);}
.hc-dot.active::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0%;
  background:var(--gold-soft);
  animation:hcProgress var(--hc-duration, 6s) linear forwards;
}
.hero-carousel.paused .hc-dot.active::after{animation-play-state:paused;}
@keyframes hcProgress{
  from{width:0%;}
  to{width:100%;}
}

/* ---------- Slide counter ---------- */
.hc-counter{
  position:absolute;left:32px;bottom:38px;z-index:6;
  color:#d9d4c3;font-family:'Marcellus',serif;font-size:13px;letter-spacing:.08em;
  display:flex;align-items:center;gap:8px;
}
.hc-counter .current{color:var(--white);font-size:16px;}
.hc-counter .divider{width:18px;height:1px;background:rgba(255,255,255,.4);}

@media(max-width:1080px){
  .hero-carousel{min-height:600px;}
  .hc-content{padding:100px 32px 90px;}
}
@media(max-width:760px){
  .hero-carousel{min-height:560px;}
  .hero-carousel .rating-chip{position:static;margin:20px 32px 0;display:inline-block;}
  .hc-arrow{width:40px;height:40px;font-size:13px;}
  .hc-prev{left:14px;}
  .hc-next{right:14px;}
  .hc-counter{display:none;}
  .hc-dots{bottom:20px;}
}