/* DUNEUS · Hero
 * Dedicated homepage hero. Single or multi-slide, image or video, with
 * per-breakpoint media, overlay controls, button variants and entry animation.
 * Self-contained — does not override any Soft Theme hero.
 * ------------------------------------------------------------------------ */

.dn-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--duneus-bg-secondary, #0C0C0C);
  color: #fff;
}

/* ===========================================================================
 * 1 · HEIGHT
 * Presets plus a custom value and an adaptive mode that lets the image set
 * the height (used when the artwork itself carries the composition).
 * ======================================================================== */
.dn-hero__viewport { position: relative; width: 100%; height: 100%; }

.dn-hero--h-small    { height: 42vh; min-height: 280px; }
.dn-hero--h-medium   { height: 62vh; min-height: 380px; }
.dn-hero--h-large    { height: 82vh; min-height: 460px; }
.dn-hero--h-full     { height: 100vh; height: 100svh; }
.dn-hero--h-custom   { height: var(--dn-hero-custom-m, 520px); }

/* Adaptive: the media dictates height, so the slide is not absolutely sized. */
.dn-hero--h-adaptive { height: auto; }
.dn-hero--h-adaptive .dn-hero__slide { position: relative; }
.dn-hero--h-adaptive .dn-hero__media { position: relative; height: auto; }
.dn-hero--h-adaptive .dn-hero__img,
.dn-hero--h-adaptive .dn-hero__video { position: relative; height: auto; }
.dn-hero--h-adaptive .dn-hero__content { position: absolute; inset: 0; }

@media (min-width: 768px) {
  .dn-hero--h-custom { height: var(--dn-hero-custom-d, 720px); }
}

/* ===========================================================================
 * 2 · TRACK + SLIDES
 * Fade is the default (no layout thrash). Slide mode translates the track.
 * ======================================================================== */
.dn-hero__track { position: relative; width: 100%; height: 100%; }

.dn-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

/* Single hero: the one slide is simply in flow. */
.dn-hero--single .dn-hero__slide { position: relative; }

/* --- Fade transition --- */
.dn-hero--transition-fade .dn-hero__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dn-hero-slide-ms, 600ms) ease,
              visibility 0s linear var(--dn-hero-slide-ms, 600ms);
  z-index: 1;
}
.dn-hero--transition-fade .dn-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  z-index: 2;
}
.dn-hero--single .dn-hero__slide { opacity: 1; visibility: visible; }

/* --- Slide transition --- */
.dn-hero--transition-slide .dn-hero__track {
  display: flex;
  transition: transform var(--dn-hero-slide-ms, 600ms) cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.dn-hero--transition-slide .dn-hero__slide {
  position: relative;
  flex: 0 0 100%;
  opacity: 1;
  visibility: visible;
}

/* Vertical alignment of the content block */
.dn-hero--v-start .dn-hero__content { align-items: flex-start; }
.dn-hero--v-center .dn-hero__content { align-items: center; }
.dn-hero--v-end .dn-hero__content { align-items: flex-end; }

/* ===========================================================================
 * 3 · MEDIA
 * ======================================================================== */
.dn-hero__media { position: absolute; inset: 0; overflow: hidden; }
.dn-hero__picture { display: block; width: 100%; height: 100%; }

.dn-hero__img,
.dn-hero__video {
  width: 100%;
  height: 100%;
  display: block;
}
.dn-hero--fit-cover .dn-hero__img,
.dn-hero--fit-cover .dn-hero__video { object-fit: cover; }
.dn-hero--fit-contain .dn-hero__img,
.dn-hero--fit-contain .dn-hero__video { object-fit: contain; background: #000; }

/* Device-appropriate media: each breakpoint shows its OWN slot (video or image)
   independently — a mobile-only video never appears on desktop and vice versa. */
.dn-hero__video--desktop, .dn-hero__media--d { display: none; }
.dn-hero__video--mobile, .dn-hero__media--m { display: block; }
@media (min-width: 768px) {
  .dn-hero__video--desktop, .dn-hero__media--d { display: block; }
  .dn-hero__video--mobile, .dn-hero__media--m { display: none; }
}

/* ===========================================================================
 * 4 · OVERLAY
 * Flat tint, optional directional gradient, optional media blur, dark mode.
 * ======================================================================== */
.dn-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--ov-color, #000);
  opacity: var(--ov-opacity, 0.35);
}

/* Blur applies to the media behind, not the tint itself. */
.dn-hero__overlay { backdrop-filter: blur(var(--ov-blur, 0px)); -webkit-backdrop-filter: blur(var(--ov-blur, 0px)); }

.dn-hero__overlay--gradient { opacity: 1; background-color: transparent; }
.dn-hero__overlay--gradient.dn-hero__overlay--grad-to-top {
  background-image: linear-gradient(0deg,
    color-mix(in srgb, var(--ov-color, #000) calc(var(--ov-opacity, 0.35) * 160%), transparent), transparent 62%);
}
.dn-hero__overlay--gradient.dn-hero__overlay--grad-to-bottom {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--ov-color, #000) calc(var(--ov-opacity, 0.35) * 160%), transparent), transparent 62%);
}
.dn-hero__overlay--gradient.dn-hero__overlay--grad-to-left {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--ov-color, #000) calc(var(--ov-opacity, 0.35) * 160%), transparent), transparent 62%);
}
.dn-hero__overlay--gradient.dn-hero__overlay--grad-to-right {
  background-image: linear-gradient(270deg,
    color-mix(in srgb, var(--ov-color, #000) calc(var(--ov-opacity, 0.35) * 160%), transparent), transparent 62%);
}

/* Fallback for browsers without color-mix: a plain tint still applies. */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .dn-hero__overlay--gradient {
    background-color: var(--ov-color, #000);
    opacity: var(--ov-opacity, 0.35);
    background-image: none;
  }
}

/* Dark mode deepens the media so light type always holds up. */
.dn-hero--dark .dn-hero__img,
.dn-hero--dark .dn-hero__video { filter: brightness(0.72) saturate(0.92); }

/* ===========================================================================
 * 5 · CONTENT
 * ======================================================================== */
.dn-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  /* padding comes from the per-section <style> block */
}

.dn-hero__inner {
  width: 100%;
  max-width: var(--dn-hero-maxw, 620px);
}

/* Horizontal alignment — mobile first, desktop overrides at 768px.
   The alignment class lives on the SLIDE; it drives justify-content on the
   flex .dn-hero__content (which positions the whole inner block) AND
   text-align on the inner (which positions the text/eyebrow/buttons inside
   it). margin-inline:auto alone did nothing because inner is width:100%. */
.dn-hero__slide--hm-start  .dn-hero__content { justify-content: flex-start; }
.dn-hero__slide--hm-center .dn-hero__content { justify-content: center; }
.dn-hero__slide--hm-end    .dn-hero__content { justify-content: flex-end; }
.dn-hero__slide--hm-start  .dn-hero__inner { text-align: start; align-items: flex-start; }
.dn-hero__slide--hm-center .dn-hero__inner { text-align: center; align-items: center; }
.dn-hero__slide--hm-end    .dn-hero__inner { text-align: end; align-items: flex-end; }

@media (min-width: 768px) {
  .dn-hero__slide--h-start  .dn-hero__content { justify-content: flex-start; }
  .dn-hero__slide--h-center .dn-hero__content { justify-content: center; }
  .dn-hero__slide--h-end    .dn-hero__content { justify-content: flex-end; }
  .dn-hero__slide--h-start  .dn-hero__inner { text-align: start; align-items: flex-start; }
  .dn-hero__slide--h-center .dn-hero__inner { text-align: center; align-items: center; }
  .dn-hero__slide--h-end    .dn-hero__inner { text-align: end; align-items: flex-end; }
}
/* Inner becomes a column flex so align-items positions the buttons row too. */
.dn-hero__inner { display: flex; flex-direction: column; }

.dn-hero__eyebrow {
  display: block;
  margin-block-end: 0.85rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dn-hero-eyebrow, #FF5100);
}
[dir='rtl'] .dn-hero__eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }

.dn-hero__heading {
  margin: 0;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  line-height: var(--dn-hero-leading, 1);
  letter-spacing: var(--dn-hero-tracking, -0.02em);
  color: var(--dn-hero-heading, #fff);
  /* Keep mixed number+word order exactly as typed (e.g. "NEW DROP 001"):
     plaintext makes each run follow its own natural direction instead of the
     browser flipping the digits to the front in an RTL context. */
  unicode-bidi: plaintext;
}
[dir='rtl'] .dn-hero__heading { letter-spacing: 0; text-transform: none !important; }

.dn-hero__desc {
  margin: 1rem 0 0;
  max-width: 46ch;
  line-height: 1.65;
  color: var(--dn-hero-body, #D9D9D9);
}
.dn-hero__slide--hm-center .dn-hero__desc { margin-inline: auto; }
@media (min-width: 768px) {
  .dn-hero__slide--h-center .dn-hero__desc { margin-inline: auto; }
  .dn-hero__slide--h-end .dn-hero__desc { margin-inline: auto 0; }
}

/* ===========================================================================
 * 6 · BUTTONS
 * ======================================================================== */
.dn-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
}
.dn-hero__slide--hm-center .dn-hero__ctas { justify-content: center; }
.dn-hero__slide--hm-end .dn-hero__ctas { justify-content: flex-end; }
@media (min-width: 768px) {
  .dn-hero__slide--h-center .dn-hero__ctas { justify-content: center; }
  .dn-hero__slide--h-end .dn-hero__ctas { justify-content: flex-end; }
}

.dn-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--dn-btn-radius, 2px);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, transform 0.16s ease;
}
[dir='rtl'] .dn-hero__btn { letter-spacing: 0; text-transform: none; }

.dn-hero__btn--sm { min-height: 42px; padding: 0.65rem 1.35rem; font-size: 0.6875rem; }
.dn-hero__btn--md { min-height: 50px; padding: 0.85rem 1.9rem; font-size: 0.75rem; }
.dn-hero__btn--lg { min-height: 58px; padding: 1.05rem 2.6rem; font-size: 0.8125rem; }

.dn-hero__btn--primary { background: var(--duneus-accent, #FF5100); border-color: var(--duneus-accent, #FF5100); color: #fff; }
.dn-hero__btn--primary:hover { background: #fff; border-color: #fff; color: #000; }

.dn-hero__btn--secondary { background: #fff; border-color: #fff; color: #000; }
.dn-hero__btn--secondary:hover { background: var(--duneus-accent, #FF5100); border-color: var(--duneus-accent, #FF5100); color: #fff; }

.dn-hero__btn--outline { background: transparent; border-color: rgba(255,255,255,0.7); color: #fff; }
.dn-hero__btn--outline:hover { background: #fff; border-color: #fff; color: #000; }

.dn-hero__btn--ghost { background: transparent; border-color: transparent; color: #fff; padding-inline: 0.35rem; }
.dn-hero__btn--ghost:hover { color: var(--duneus-accent, #FF5100); }
.dn-hero__btn--ghost .dn-hero__btn-icon { transition: transform 0.22s ease; }
.dn-hero__btn--ghost:hover .dn-hero__btn-icon { transform: translateX(3px); }
[dir='rtl'] .dn-hero__btn--ghost:hover .dn-hero__btn-icon { transform: translateX(-3px); }

.dn-hero__btn:hover { transform: translateY(-2px); }
.dn-hero__btn:active { transform: translateY(0); }

.dn-hero__btn-icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
[dir='rtl'] .dn-hero__btn-icon { transform: scaleX(-1); }

@media (max-width: 767.98px) {
  .dn-hero__ctas--full { flex-direction: column; align-items: stretch; }
  .dn-hero__ctas--full .dn-hero__btn { width: 100%; }
}

/* ===========================================================================
 * 7 · SLIDER CONTROLS
 * ======================================================================== */
.dn-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dn-hero__arrow:hover { background: rgba(0, 0, 0, 0.55); border-color: #fff; }
.dn-hero__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dn-hero__arrow--prev { inset-inline-start: 16px; }
.dn-hero__arrow--next { inset-inline-end: 16px; }
[dir='rtl'] .dn-hero__arrow svg { transform: scaleX(-1); }

@media (min-width: 768px) {
  .dn-hero--slider .dn-hero__arrow { display: inline-flex; }
}

.dn-hero__dots {
  position: absolute;
  inset-inline: 0;
  bottom: 18px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.dn-hero__dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.24s ease, width 0.24s ease;
}
.dn-hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.dn-hero__dot.is-active { background: var(--duneus-accent, #FF5100); width: 44px; }

/* ===========================================================================
 * 8 · ENTRY ANIMATION
 * Applied to the active slide's content. Driven by the .is-animated class the
 * hero script adds, so slides animate on activation rather than on load only.
 * ======================================================================== */
.dn-hero__inner[data-anim]:not([data-anim='none']) {
  opacity: 0;
  transition: opacity var(--dn-hero-anim-ms, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1),
              transform var(--dn-hero-anim-ms, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1),
              clip-path var(--dn-hero-anim-ms, 700ms) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dn-hero__inner[data-anim='fade-up']    { transform: translateY(26px); }
.dn-hero__inner[data-anim='fade-left']  { transform: translateX(-32px); }
.dn-hero__inner[data-anim='fade-right'] { transform: translateX(32px); }
.dn-hero__inner[data-anim='scale']      { transform: scale(0.94); }
.dn-hero__inner[data-anim='reveal']     { clip-path: inset(0 0 100% 0); opacity: 1; }

.dn-hero__slide.is-active .dn-hero__inner.is-animated {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* ===========================================================================
 * 9 · REDUCED MOTION
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dn-hero__inner[data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .dn-hero__track,
  .dn-hero__slide,
  .dn-hero__btn,
  .dn-hero__dot { transition: none !important; }
  .dn-hero__video { display: none; }
}

/* ===========================================================================
 * FULL-BLEED GUARANTEE
 * Zid wraps each section in its own container. Without these the hero inherits
 * the page container width and the media sits in flow at its natural size —
 * which is what produces a part-width image with the copy stacked underneath.
 * ======================================================================== */

/* Escape any inherited container padding/width. */
.dn-hero {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Media always fills the slide, never sits in flow. */
.dn-hero:not(.dn-hero--h-adaptive) .dn-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dn-hero:not(.dn-hero--h-adaptive) .dn-hero__picture,
.dn-hero:not(.dn-hero--h-adaptive) .dn-hero__img,
.dn-hero:not(.dn-hero--h-adaptive) .dn-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dn-hero--fit-contain .dn-hero__img,
.dn-hero--fit-contain .dn-hero__video { object-fit: contain; }

/* Content always overlays the media. */
.dn-hero__content { position: relative; z-index: 2; }
.dn-hero__overlay { position: absolute; inset: 0; z-index: 1; }

/* The slide must have a height for the absolute media to resolve against. */
.dn-hero__viewport,
.dn-hero__track { min-height: inherit; }
.dn-hero--single .dn-hero__slide { min-height: inherit; height: 100%; }

/* Sections directly under a transparent header start at the very top. */
body.dn-transparent .dn-hero { margin-top: 0; }