/* ==========================================================================
   EMZ hero carousel
   Full-bleed photography graded into the black panel, five slides that each
   carry their own copy and their own camera move.
   ========================================================================== */

.emz-hero.emz-carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--hair);
}

/* ---- the photography bed, behind everything ---------------------------- */
.emz-hero-bed { position: absolute; inset: 0; z-index: 0; }

.emz-slide {
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.emz-slide.on { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.emz-slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 50%; }

/* the grade: image on the right, solid ink under the copy, no hard seam */
.emz-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 20%,
      rgba(9, 9, 9, .92) 32%,
      rgba(9, 9, 9, .70) 44%,
      rgba(9, 9, 9, .34) 60%,
      rgba(9, 9, 9, .18) 78%,
      rgba(9, 9, 9, .46) 100%),
    linear-gradient(0deg, rgba(9, 9, 9, .82) 0%, transparent 26%, transparent 74%, rgba(9, 9, 9, .55) 100%);
}
/* a whisper of grain so the gradient never bands on a big screen */
.emz-hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) .5px, transparent .5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ---- per-slide camera moves -------------------------------------------- */
.emz-slide.on img { animation-duration: 9.5s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.emz-slide.fx-push.on  img { animation-name: emzPush; }
.emz-slide.fx-pan.on   img { animation-name: emzPan; }
.emz-slide.fx-rise.on  img { animation-name: emzRise; }
.emz-slide.fx-pull.on  img { animation-name: emzPull; }
.emz-slide.fx-sweep.on img { animation-name: emzSweep; }

@keyframes emzPush  { from { transform: scale(1.04); }             to { transform: scale(1.15); } }
@keyframes emzPan   { from { transform: scale(1.12) translateX(2.5%); } to { transform: scale(1.12) translateX(-2.5%); } }
@keyframes emzRise  { from { transform: scale(1.12) translateY(3%); }   to { transform: scale(1.12) translateY(-2%); } }
@keyframes emzPull  { from { transform: scale(1.20); }             to { transform: scale(1.04); } }
@keyframes emzSweep { from { transform: scale(1.14) translate(1.8%, 1.2%) rotate(.6deg); }
                      to   { transform: scale(1.06) translate(-1%, -.6%) rotate(0deg); } }

/* the sweep slide also gets a slow band of light crossing it */
.emz-slide.fx-sweep::after {
  content: ''; position: absolute; inset: -20% -40%;
  background: linear-gradient(74deg, transparent 42%, rgba(216, 188, 133, .16) 50%, transparent 58%);
  transform: translateX(-60%);
}
.emz-slide.fx-sweep.on::after { animation: emzLight 5.5s ease-in-out 1s forwards; }
@keyframes emzLight { to { transform: translateX(60%); } }

/* ---- copy over the image ------------------------------------------------ */
.emz-hero-in { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; }

.emz-hero-copy {
  flex: 1; display: grid; align-content: center;
  padding: 64px 0 28px; position: relative; max-width: 620px;
}
/* stack the copy blocks so the box never jumps height between slides */
.emz-hcopy {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.emz-hcopy.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s ease .22s, transform .6s ease .22s, visibility 0s;
}
.emz-hcopy .emz-h1 span { display: block; }
.emz-hcopy .emz-h1 span.gold { color: var(--gold); }
.emz-hcopy .emz-lede { margin: 22px 0 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.emz-hcopy .emz-h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }

/* each headline line lifts in, one after the next */
.emz-hcopy.on .emz-h1 span { animation: emzLine .6s ease backwards; }
.emz-hcopy.on .emz-h1 span:nth-child(1) { animation-delay: .26s; }
.emz-hcopy.on .emz-h1 span:nth-child(2) { animation-delay: .34s; }
.emz-hcopy.on .emz-h1 span:nth-child(3) { animation-delay: .42s; }
.emz-hcopy.on .emz-h1 span:nth-child(4) { animation-delay: .50s; }
@keyframes emzLine { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.emz-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 1; }

/* ---- logo in the banner -------------------------------------------------- */
.emz-hero-logo {
  position: absolute; z-index: 4; right: 0; top: 30px;
  width: 200px; height: auto;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .7));
  pointer-events: none;
}

/* ---- per-slide caption --------------------------------------------------- */
.emz-hero-cap {
  position: absolute; right: 0; bottom: 118px; z-index: 4;
  padding: 7px 14px;
  background: rgba(9, 9, 9, .66);
  border: 1px solid var(--hair-g);
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-lt); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateX(10px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.emz-hero-cap.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .4s, transform .5s ease .4s, visibility 0s; }

/* ---- controls ------------------------------------------------------------ */
.emz-carousel-ui {
  position: absolute; right: 0; bottom: 64px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
}
.emz-cnav {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--hair-g); background: rgba(9, 9, 9, .6);
  color: var(--ivory); cursor: pointer; padding: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.emz-cnav:hover { background: var(--gold); border-color: var(--gold); color: #17130B; }
.emz-cnav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.emz-cdots { display: flex; gap: 6px; }
.emz-cdots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.emz-cdots i { display: block; width: 16px; height: 2px; background: rgba(244, 242, 237, .34); transition: background .2s, width .2s; }
.emz-cdots button[aria-selected="true"] i { background: var(--gold); width: 22px; }
.emz-cdots button:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }

.emz-cbar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(244, 242, 237, .09); }
.emz-cbar i { display: block; height: 100%; width: 0; background: var(--gold); }
.emz-carousel.running .emz-cbar i { animation: emzBar var(--dwell, 7s) linear forwards; }
@keyframes emzBar { from { width: 0; } to { width: 100%; } }

/* ---- the material index keeps its place at the foot ---------------------- */
.emz-hero.emz-carousel .emz-hero-foot { border-top: 1px solid var(--hair-g); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .emz-hero.emz-carousel { min-height: 520px; }
  .emz-hero-veil {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(9,9,9,.86) 38%, rgba(9,9,9,.5) 70%, rgba(9,9,9,.6) 100%),
      linear-gradient(0deg, rgba(9,9,9,.88) 0%, transparent 34%, transparent 70%, rgba(9,9,9,.6) 100%);
  }
  .emz-hero-logo { width: 150px; top: 22px; }
  .emz-hero-cap { bottom: 112px; }
}
@media (max-width: 720px) {
  .emz-hero.emz-carousel { min-height: 0; }
  .emz-hero-copy { padding: 40px 0 22px; max-width: none; }
  .emz-hero-veil {
    background: linear-gradient(0deg, rgba(9,9,9,.94) 0%, rgba(9,9,9,.7) 42%, rgba(9,9,9,.62) 100%);
  }
  .emz-hero-logo { width: 104px; top: 16px; }
  .emz-hero-cap { display: none; }
  .emz-carousel-ui { bottom: 76px; left: 0; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .emz-slide.on img { animation: none; transform: scale(1.03); }
  .emz-slide.fx-sweep.on::after { animation: none; opacity: 0; }
  .emz-hcopy.on .emz-h1 span { animation: none; }
  .emz-carousel.running .emz-cbar i { animation: none; width: 100%; }
}