/**
 * Deep Perfume — homepage hero slider (§5.1).
 * Depends on tokens.css. RTL-first, logical properties. Full-bleed dark hero
 * that the transparent header sits over.
 */

.deep-hero{
  position:relative;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  background:var(--c-plum-deep);   /* fallback ground before/behind images */
  color:var(--c-cream);
  isolation:isolate;
}

/* ---- slides (cross-fade stack) ---- */
.deep-hero__track{ position:absolute; inset:0; }
.deep-hero__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.deep-hero__slide.is-active{ opacity:1; visibility:visible; }

.deep-hero__pic,
.deep-hero__pic img{ position:absolute; inset:0; width:100%; height:100%; }
.deep-hero__pic img{ object-fit:cover; object-position:center; display:block; }

/* Gradient scrim — a directional wash, not a flat black cover, so text clears
   contrast while the imagery stays visible (§5.1). */
.deep-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgb(38 9 58 / .78) 0%, rgb(38 9 58 / .28) 45%, rgb(38 9 58 / .12) 100%),
    linear-gradient(to bottom, rgb(38 9 58 / .35) 0%, rgb(38 9 58 / 0) 40%);
}

/* ---- slide content ---- */
.deep-hero__content{
  position:relative; z-index:2;
  max-width:var(--container); margin-inline:auto; height:100%;
  padding-inline:var(--gutter);
  padding-block:var(--deep-header-h) var(--s-9);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  gap:var(--s-4);
  text-align:start;
}
.deep-hero__headline{
  font-family:var(--f-ar); font-weight:700;
  font-size:var(--fs-hero); line-height:var(--lh-ar-head);
  margin:0; max-width:18ch; text-wrap:balance;
  color:var(--c-cream);
  text-shadow:0 2px 24px rgb(38 9 58 / .45);
}
.deep-hero__desc{
  font-family:var(--f-ar); font-size:clamp(1rem,.95rem+.4vw,1.25rem);
  line-height:var(--lh-ar-body); margin:0; max-width:52ch; color:#EFE7DC;
}
.deep-hero__btn{ margin-block-start:var(--s-2); }

/* ---- arrows ---- */
.deep-hero__arrow{
  position:absolute; inset-block-start:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgb(247 243 236 / .12); color:var(--c-cream);
  border:1px solid rgb(247 243 236 / .4); cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background var(--dur-fast);
}
.deep-hero__arrow:hover{ background:rgb(247 243 236 / .24); }
/* Logical placement: prev sits at inline-start, next at inline-end. In RTL the
   browser mirrors inline-start/end, and the chevron glyphs are chosen to match. */
.deep-hero__arrow--prev{ inset-inline-start:var(--s-5); }
.deep-hero__arrow--next{ inset-inline-end:var(--s-5); }

/* ---- dots ---- */
.deep-hero__dots{
  position:absolute; inset-block-end:var(--s-5); inset-inline:0; z-index:3;
  display:flex; gap:var(--s-2); justify-content:center;
}
.deep-hero__dot{
  width:10px; height:10px; padding:0; border-radius:var(--r-pill);
  background:rgb(247 243 236 / .4); border:0; cursor:pointer;
  transition:background var(--dur-fast), width var(--dur-fast);
}
.deep-hero__dot.is-active{ background:var(--c-brass); width:26px; }

/* ---- responsive ---- */
@media (max-width:768px){
  .deep-hero{ min-height:480px; }
  .deep-hero__content{ padding-block-end:var(--s-8); }
  .deep-hero__arrow{ width:40px; height:40px; }
  .deep-hero__arrow--prev{ inset-inline-start:var(--s-3); }
  .deep-hero__arrow--next{ inset-inline-end:var(--s-3); }
}

/* Reduced motion: no cross-fade animation; slides simply show/hide. */
@media (prefers-reduced-motion:reduce){
  .deep-hero__slide{ transition:none; }
}