/* DUNEUS · Button hover presets
 * ---------------------------------------------------------------------------
 * One preset is active at a time, chosen in Theme Editor -> Button Styles ->
 * Hover effect. The preset name lands on <body data-btn-hover="…">, so every
 * button in the theme switches together and no section needs its own rule.
 *
 * Tuning tokens (also from settings):
 *   --btn-hv-ms      duration
 *   --btn-hv-ease    easing curve
 *   --btn-hv-color   fill colour
 *   --btn-hv-text    text colour while hovered
 *   --btn-hv-radius  corner radius for the "soften" preset
 *
 * Buttons covered: .dn-btn (sections), .dn-hero__btn (hero), .duneus-cta,
 * and Soft Theme's .btn so platform buttons match.
 * ------------------------------------------------------------------------ */

.dn-btn,
.dn-hero__btn,
.duneus-cta,
body .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              background-color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              border-color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              border-radius var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              letter-spacing var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

/* The wipe layer. Sits behind the label, never intercepts clicks. */
.dn-btn::before,
.dn-hero__btn::before,
.duneus-cta::before,
body .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hv-color, #FF5100);
  pointer-events: none;
  transform: translate3d(-101%, 0, 0);
  transition: transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              opacity var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              clip-path var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

/* Presets that do not use the wipe keep it out of the way. */
body[data-btn-hover='none'] .dn-btn::before,
body[data-btn-hover='none'] .dn-hero__btn::before,
body[data-btn-hover='none'] .duneus-cta::before,
body[data-btn-hover='none'] .btn::before,
body[data-btn-hover='soften'] .dn-btn::before,
body[data-btn-hover='soften'] .dn-hero__btn::before,
body[data-btn-hover='soften'] .duneus-cta::before,
body[data-btn-hover='soften'] .btn::before,
body[data-btn-hover='lift'] .dn-btn::before,
body[data-btn-hover='lift'] .dn-hero__btn::before,
body[data-btn-hover='lift'] .duneus-cta::before,
body[data-btn-hover='lift'] .btn::before,
body[data-btn-hover='underline'] .dn-btn::before,
body[data-btn-hover='underline'] .dn-hero__btn::before,
body[data-btn-hover='underline'] .duneus-cta::before,
body[data-btn-hover='underline'] .btn::before { display: none; }

/* ===========================================================================
 * 1 · SLIDE FILL — colour wipes in from the leading edge
 * ======================================================================== */
body[data-btn-hover='fill-slide'] .dn-btn:hover::before,
body[data-btn-hover='fill-slide'] .dn-hero__btn:hover::before,
body[data-btn-hover='fill-slide'] .duneus-cta:hover::before,
body[data-btn-hover='fill-slide'] .btn:hover::before { transform: translate3d(0, 0, 0); }

[dir='rtl'] body[data-btn-hover='fill-slide'] .dn-btn::before,
[dir='rtl'] body[data-btn-hover='fill-slide'] .dn-hero__btn::before,
[dir='rtl'] body[data-btn-hover='fill-slide'] .btn::before { transform: translate3d(101%, 0, 0); }

/* ===========================================================================
 * 2 · CENTER FILL — colour expands outward from the middle
 * ======================================================================== */
body[data-btn-hover='fill-center'] .dn-btn::before,
body[data-btn-hover='fill-center'] .dn-hero__btn::before,
body[data-btn-hover='fill-center'] .duneus-cta::before,
body[data-btn-hover='fill-center'] .btn::before {
  transform: none;
  clip-path: inset(0 50% 0 50%);
}
body[data-btn-hover='fill-center'] .dn-btn:hover::before,
body[data-btn-hover='fill-center'] .dn-hero__btn:hover::before,
body[data-btn-hover='fill-center'] .duneus-cta:hover::before,
body[data-btn-hover='fill-center'] .btn:hover::before { clip-path: inset(0 0 0 0); }

/* ===========================================================================
 * 3 · SWOOSH — wipe with a curved leading edge, echoing the DUNEUS mark
 * The curve is drawn with an ellipse clip-path that opens as it travels, so
 * the fill arrives as a sweep rather than a flat bar.
 * ======================================================================== */
body[data-btn-hover='swoosh'] .dn-btn::before,
body[data-btn-hover='swoosh'] .dn-hero__btn::before,
body[data-btn-hover='swoosh'] .duneus-cta::before,
body[data-btn-hover='swoosh'] .btn::before {
  transform: none;
  clip-path: ellipse(0% 140% at -10% 50%);
}
body[data-btn-hover='swoosh'] .dn-btn:hover::before,
body[data-btn-hover='swoosh'] .dn-hero__btn:hover::before,
body[data-btn-hover='swoosh'] .duneus-cta:hover::before,
body[data-btn-hover='swoosh'] .btn:hover::before { clip-path: ellipse(150% 140% at -10% 50%); }

[dir='rtl'] body[data-btn-hover='swoosh'] .dn-btn::before,
[dir='rtl'] body[data-btn-hover='swoosh'] .dn-hero__btn::before,
[dir='rtl'] body[data-btn-hover='swoosh'] .btn::before { clip-path: ellipse(0% 140% at 110% 50%); }
[dir='rtl'] body[data-btn-hover='swoosh'] .dn-btn:hover::before,
[dir='rtl'] body[data-btn-hover='swoosh'] .dn-hero__btn:hover::before,
[dir='rtl'] body[data-btn-hover='swoosh'] .btn:hover::before { clip-path: ellipse(150% 140% at 110% 50%); }

/* ===========================================================================
 * 4 · LIGHT SWEEP — a narrow highlight crosses the face, colour unchanged
 * ======================================================================== */
body[data-btn-hover='sweep'] .dn-btn::before,
body[data-btn-hover='sweep'] .dn-hero__btn::before,
body[data-btn-hover='sweep'] .duneus-cta::before,
body[data-btn-hover='sweep'] .btn::before {
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translate3d(-100%, 0, 0);
}
body[data-btn-hover='sweep'] .dn-btn:hover::before,
body[data-btn-hover='sweep'] .dn-hero__btn:hover::before,
body[data-btn-hover='sweep'] .duneus-cta:hover::before,
body[data-btn-hover='sweep'] .btn:hover::before { transform: translate3d(100%, 0, 0); }

/* ===========================================================================
 * 5 · SOFTEN — corners round out and the label tightens
 * ======================================================================== */
body[data-btn-hover='soften'] .dn-btn:hover,
body[data-btn-hover='soften'] .dn-hero__btn:hover,
body[data-btn-hover='soften'] .duneus-cta:hover,
body[data-btn-hover='soften'] .btn:hover {
  border-radius: var(--btn-hv-radius, 3px) !important;
  letter-spacing: 0.02em;
  background-color: var(--btn-hv-color, #FF5100);
  border-color: var(--btn-hv-color, #FF5100);
  color: var(--btn-hv-text, #fff);
}

/* ===========================================================================
 * 6 · LIFT — raises with a soft shadow, colour unchanged
 * ======================================================================== */
body[data-btn-hover='lift'] .dn-btn:hover,
body[data-btn-hover='lift'] .dn-hero__btn:hover,
body[data-btn-hover='lift'] .duneus-cta:hover,
body[data-btn-hover='lift'] .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .85);
}

/* ===========================================================================
 * 7 · TEXT SWAP — the label slides up and a copy rises into its place
 * Uses the button's own text via a data attribute set by duneus-buttons.js.
 * ======================================================================== */
body[data-btn-hover='text-swap'] .dn-btn > span,
body[data-btn-hover='text-swap'] .dn-hero__btn > span,
body[data-btn-hover='text-swap'] .duneus-cta > span,
body[data-btn-hover='text-swap'] .dn-btn__label {
  display: inline-block;
  transition: transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}
body[data-btn-hover='text-swap'] .dn-btn:hover > span,
body[data-btn-hover='text-swap'] .dn-hero__btn:hover > span,
body[data-btn-hover='text-swap'] .duneus-cta:hover > span,
body[data-btn-hover='text-swap'] .dn-btn:hover .dn-btn__label,
body[data-btn-hover='text-swap'] .dn-hero__btn:hover .dn-btn__label { transform: translateY(-140%); }

body[data-btn-hover='text-swap'] .dn-btn[data-label]::after,
body[data-btn-hover='text-swap'] .dn-hero__btn[data-label]::after,
body[data-btn-hover='text-swap'] .duneus-cta[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(60%);
  opacity: 0;
  transition: transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              opacity var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
  pointer-events: none;
}
body[data-btn-hover='text-swap'] .dn-btn:hover::after,
body[data-btn-hover='text-swap'] .dn-hero__btn:hover::after,
body[data-btn-hover='text-swap'] .duneus-cta:hover::after {
  transform: translateY(-50%);
  opacity: 1;
}

/* ===========================================================================
 * 8 · ANIMATED UNDERLINE — for quieter, link-like buttons
 * ======================================================================== */
body[data-btn-hover='underline'] .dn-btn,
body[data-btn-hover='underline'] .dn-hero__btn,
body[data-btn-hover='underline'] .duneus-cta,
body[data-btn-hover='underline'] .btn { overflow: visible; }

body[data-btn-hover='underline'] .dn-btn::after,
body[data-btn-hover='underline'] .dn-hero__btn::after,
body[data-btn-hover='underline'] .duneus-cta::after,
body[data-btn-hover='underline'] .btn::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  bottom: 8px;
  height: 2px;
  background: var(--btn-hv-color, #FF5100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}
[dir='rtl'] body[data-btn-hover='underline'] .dn-btn::after,
[dir='rtl'] body[data-btn-hover='underline'] .btn::after { transform-origin: right center; }

body[data-btn-hover='underline'] .dn-btn:hover::after,
body[data-btn-hover='underline'] .dn-hero__btn:hover::after,
body[data-btn-hover='underline'] .duneus-cta:hover::after,
body[data-btn-hover='underline'] .btn:hover::after { transform: scaleX(1); }

/* ---- Hover colour applies ONLY to presets that paint a fill over the whole
   button. Presets that merely decorate (sweep, lift, underline, and every
   mark preset that flies a glyph in) leave each variant's own hover intact —
   forcing a colour there is what turned the outline button white-on-white. */
body[data-btn-hover='fill-slide'] .dn-btn:hover,
body[data-btn-hover='fill-slide'] .dn-hero__btn:hover,
body[data-btn-hover='fill-slide'] .duneus-cta:hover,
body[data-btn-hover='fill-slide'] .btn:hover,
body[data-btn-hover='fill-center'] .dn-btn:hover,
body[data-btn-hover='fill-center'] .dn-hero__btn:hover,
body[data-btn-hover='fill-center'] .duneus-cta:hover,
body[data-btn-hover='fill-center'] .btn:hover,
body[data-btn-hover='swoosh'] .dn-btn:hover,
body[data-btn-hover='swoosh'] .dn-hero__btn:hover,
body[data-btn-hover='swoosh'] .duneus-cta:hover,
body[data-btn-hover='swoosh'] .btn:hover,
body[data-btn-hover='logo-grow'] .dn-btn:hover,
body[data-btn-hover='logo-grow'] .dn-hero__btn:hover,
body[data-btn-hover='logo-grow'] .duneus-cta:hover,
body[data-btn-hover='logo-grow'] .btn:hover,
body[data-btn-hover='logo-trail'] .dn-btn:hover,
body[data-btn-hover='logo-trail'] .dn-hero__btn:hover,
body[data-btn-hover='logo-trail'] .duneus-cta:hover,
body[data-btn-hover='logo-trail'] .btn:hover { color: var(--btn-hv-text, #fff); }

/* FAULT 2: those same variants also paint their own hover background, which
   sat ON TOP of the wipe (the wipe is behind at z-index:-1) and hid it. While
   a fill preset is active the preset owns the hover surface, so the variant
   background steps aside. */
body[data-btn-hover='fill-slide'] .dn-btn:hover,
body[data-btn-hover='fill-slide'] .dn-hero__btn:hover,
body[data-btn-hover='fill-center'] .dn-btn:hover,
body[data-btn-hover='fill-center'] .dn-hero__btn:hover,
body[data-btn-hover='swoosh'] .dn-btn:hover,
body[data-btn-hover='swoosh'] .dn-hero__btn:hover,
body[data-btn-hover='logo-grow'] .dn-btn:hover,
body[data-btn-hover='logo-grow'] .dn-hero__btn:hover,
body[data-btn-hover='logo-trail'] .dn-btn:hover,
body[data-btn-hover='logo-trail'] .dn-hero__btn:hover {
  background-color: transparent;
  border-color: var(--btn-hv-color, #FF5100);
}

.dn-btn > span,
.dn-hero__btn > span { position: relative; z-index: 1; }

/* ---- Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .dn-btn, .dn-hero__btn, .duneus-cta, body .btn,
  .dn-btn::before, .dn-hero__btn::before, .duneus-cta::before, body .btn::before,
  .dn-btn::after, .dn-hero__btn::after, body .btn::after { transition: none !important; }
  body[data-btn-hover='lift'] .dn-btn:hover,
  body[data-btn-hover='lift'] .btn:hover { transform: none; }
}


/* ===========================================================================
 * DUNEUS MARK PRESETS
 * These use the real logo geometry, not an approximation: the brand mark is
 * inlined below as an SVG mask, so the fill is cut to the exact silhouette.
 * Mask source: logo.svg (viewBox 0 0 1080 487.09, two paths, 2.22:1).
 * ======================================================================== */
:root {
  --dn-logo-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201080%20487.09%22%3E%3Cpath%20d%3D%22M391.06%2C182.73c19.64%2C3.64%2C39.47%2C9.48%2C55.09%2C21.99%2C19.4%2C15.57%2C30.27%2C41.34%2C28.12%2C66.1-2.3%2C26.25-18.54%2C48.33-36.84%2C66.25-2.54%2C2.49-37.41%2C31.52-53.55%2C41.58%2C115.39-40.43%2C270.07-108.88%2C274.38-175.89%2C4.5-70.08-62.99-96.33-134.6-97.62-5.6%2C0-11.21%2C0-16.86.1-34.73.53-69.31%2C3.26-103.85%2C8.81-27.73%2C4.45-86.03%2C18.92-87.95%2C19.45-45.22%2C12.79-91.54%2C29.22-127.94%2C58.2l3.83-1.05c9.01-1.82%2C18.11-3.4%2C27.16-4.89%2C56.57-9.05%2C116.35-13.46%2C173.02-2.97%22%2F%3E%3Cpath%20d%3D%22M862.12%2C182.4c-12.69-10.06-43.21-25.63-67.83-34.58l-8.67-3.16c-53.27-19.45-111.32-29.56-168.71-34.82.24.1.53.19.77.29%2C30.32%2C12.21%2C70.61%2C24.91%2C79.95%2C59.06%2C6.61%2C24.24-1.72%2C50.68-16.77%2C70.8-14.99%2C20.17-36.07%2C34.87-57.48%2C48-37.36%2C22.94-76.93%2C42.11-117.84%2C57.82-21.99%2C8.48-71.61%2C22.75-119.85%2C36.17%2C117.55-3.16%2C232.94-4.22%2C352.65-41.29%2C2.25-.72%2C4.5-1.39%2C6.71-2.11%2C42.11-13.36%2C84.79-30.51%2C121.72-60.59%2C7.52-6.13%2C14.95-13.03%2C19.83-21.8%2C17.92-32.14-5.8-58.92-24.53-73.72%22%2F%3E%3C%2Fsvg%3E");
}

/* Shared mark layer used by the logo presets. */
body[data-btn-hover^='logo'] .dn-btn::before,
body[data-btn-hover^='logo'] .dn-hero__btn::before,
body[data-btn-hover^='logo'] .duneus-cta::before,
body[data-btn-hover^='logo'] .btn::before {
  transform: none;
  clip-path: none;
  background: var(--btn-hv-color, #FF5100);
  -webkit-mask-image: var(--dn-logo-mask);
          mask-image: var(--dn-logo-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: -webkit-mask-size var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              mask-size var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              -webkit-mask-position var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              mask-position var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              opacity var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

/* ---- 9 · MARK GROW — the fill emerges from the mark and opens outward ---- */
body[data-btn-hover='logo-grow'] .dn-btn::before,
body[data-btn-hover='logo-grow'] .dn-hero__btn::before,
body[data-btn-hover='logo-grow'] .duneus-cta::before,
body[data-btn-hover='logo-grow'] .btn::before {
  -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
}
body[data-btn-hover='logo-grow'] .dn-btn:hover::before,
body[data-btn-hover='logo-grow'] .dn-hero__btn:hover::before,
body[data-btn-hover='logo-grow'] .duneus-cta:hover::before,
body[data-btn-hover='logo-grow'] .btn:hover::before {
  -webkit-mask-size: 420% 420%;
          mask-size: 420% 420%;
}

/* ---- 10 · MARK SWEEP — the mark travels across as a highlight ---- */
body[data-btn-hover='logo-sweep'] .dn-btn::before,
body[data-btn-hover='logo-sweep'] .dn-hero__btn::before,
body[data-btn-hover='logo-sweep'] .duneus-cta::before,
body[data-btn-hover='logo-sweep'] .btn::before {
  background: rgba(255, 255, 255, .35);
  -webkit-mask-size: auto 78%;
          mask-size: auto 78%;
  -webkit-mask-position: -60% center;
          mask-position: -60% center;
  opacity: 0;
}
body[data-btn-hover='logo-sweep'] .dn-btn:hover::before,
body[data-btn-hover='logo-sweep'] .dn-hero__btn:hover::before,
body[data-btn-hover='logo-sweep'] .duneus-cta:hover::before,
body[data-btn-hover='logo-sweep'] .btn:hover::before {
  -webkit-mask-position: 160% center;
          mask-position: 160% center;
  opacity: 1;
}

/* ---- 11 · MARK TRAIL — repeated marks slide across the face ---- */
body[data-btn-hover='logo-trail'] .dn-btn::before,
body[data-btn-hover='logo-trail'] .dn-hero__btn::before,
body[data-btn-hover='logo-trail'] .duneus-cta::before,
body[data-btn-hover='logo-trail'] .btn::before {
  background: var(--btn-hv-color, #FF5100);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: auto 55%;
          mask-size: auto 55%;
  -webkit-mask-position: 0 center;
          mask-position: 0 center;
  opacity: 0;
}
body[data-btn-hover='logo-trail'] .dn-btn:hover::before,
body[data-btn-hover='logo-trail'] .dn-hero__btn:hover::before,
body[data-btn-hover='logo-trail'] .duneus-cta:hover::before,
body[data-btn-hover='logo-trail'] .btn:hover::before {
  -webkit-mask-position: 200% center;
          mask-position: 200% center;
  opacity: 1;
}

/* ---- 12 · MARK STAMP — the mark fades in as a corner watermark ---- */
body[data-btn-hover='logo-stamp'] .dn-btn::before,
body[data-btn-hover='logo-stamp'] .dn-hero__btn::before,
body[data-btn-hover='logo-stamp'] .duneus-cta::before,
body[data-btn-hover='logo-stamp'] .btn::before {
  background: var(--btn-hv-color, #FF5100);
  -webkit-mask-size: auto 150%;
          mask-size: auto 150%;
  -webkit-mask-position: 115% center;
          mask-position: 115% center;
  opacity: 0;
}
body[data-btn-hover='logo-stamp'] .dn-btn:hover::before,
body[data-btn-hover='logo-stamp'] .dn-hero__btn:hover::before,
body[data-btn-hover='logo-stamp'] .duneus-cta:hover::before,
body[data-btn-hover='logo-stamp'] .btn:hover::before {
  -webkit-mask-position: 88% center;
          mask-position: 88% center;
  opacity: .28;
}

/* RTL: the travelling presets run the other way. */
[dir='rtl'] body[data-btn-hover='logo-sweep'] .dn-btn::before,
[dir='rtl'] body[data-btn-hover='logo-sweep'] .btn::before { -webkit-mask-position: 160% center; mask-position: 160% center; }
[dir='rtl'] body[data-btn-hover='logo-sweep'] .dn-btn:hover::before,
[dir='rtl'] body[data-btn-hover='logo-sweep'] .btn:hover::before { -webkit-mask-position: -60% center; mask-position: -60% center; }
[dir='rtl'] body[data-btn-hover='logo-trail'] .dn-btn:hover::before,
[dir='rtl'] body[data-btn-hover='logo-trail'] .btn:hover::before { -webkit-mask-position: -200% center; mask-position: -200% center; }
[dir='rtl'] body[data-btn-hover='logo-stamp'] .dn-btn::before,
[dir='rtl'] body[data-btn-hover='logo-stamp'] .btn::before { -webkit-mask-position: -15% center; mask-position: -15% center; }
[dir='rtl'] body[data-btn-hover='logo-stamp'] .dn-btn:hover::before,
[dir='rtl'] body[data-btn-hover='logo-stamp'] .btn:hover::before { -webkit-mask-position: 12% center; mask-position: 12% center; }


/* Browsers without mask support simply get no wipe rather than a solid block. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  body[data-btn-hover^='logo'] .dn-btn::before,
  body[data-btn-hover^='logo'] .dn-hero__btn::before,
  body[data-btn-hover^='logo'] .btn::before { display: none; }
}

/* ===========================================================================
 * 13 · MARK ARROW — the wing flies in and pushes the label along
 * The mark is an IN-FLOW flex item, not an absolutely positioned one: only a
 * flow element can displace its siblings. It grows from zero width, so the
 * label is genuinely pushed rather than overlapped.
 * Sizes are in `em`, so the mark scales with each button's own font size.
 * ======================================================================== */

.dn-btn__label {
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

body[data-btn-hover='logo-arrow'] .dn-btn,
body[data-btn-hover='logo-arrow'] .dn-hero__btn,
body[data-btn-hover='logo-arrow'] .duneus-cta,
body[data-btn-hover='logo-arrow'] .btn {
  overflow: hidden;
  transition: color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              background-color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              border-color var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

/* The mark: a flex item whose width animates open, masked to the real logo. */
body[data-btn-hover='logo-arrow'] .dn-btn::before,
body[data-btn-hover='logo-arrow'] .dn-hero__btn::before,
body[data-btn-hover='logo-arrow'] .duneus-cta::before,
body[data-btn-hover='logo-arrow'] .btn::before {
  position: static;          /* in flow — this is what makes it push */
  inset: auto;
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  width: 0;
  height: 1em;
  margin: 0;
  opacity: 0;
  transform: translateX(-0.6em);
  background: currentColor;
  clip-path: none;
  -webkit-mask-image: var(--dn-logo-mask);
          mask-image: var(--dn-logo-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: width var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              margin-inline-end var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              transform var(--btn-hv-ms, 320ms) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1)),
              opacity calc(var(--btn-hv-ms, 320ms) * .6) var(--btn-hv-ease, cubic-bezier(.2,.7,.2,1));
}

body[data-btn-hover='logo-arrow'] .dn-btn:hover::before,
body[data-btn-hover='logo-arrow'] .dn-hero__btn:hover::before,
body[data-btn-hover='logo-arrow'] .duneus-cta:hover::before,
body[data-btn-hover='logo-arrow'] .btn:hover::before {
  width: var(--btn-mark-size, 2.2em);
  margin-inline-end: var(--btn-mark-gap, 0.55em);
  transform: translateX(0);
  opacity: 1;
}

/* RTL: the wing enters from the trailing edge and is mirrored so it still
   points toward the word. */
[dir='rtl'] body[data-btn-hover='logo-arrow'] .dn-btn::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .dn-hero__btn::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .duneus-cta::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .btn::before {
  transform: translateX(0.6em) scaleX(-1);
}
[dir='rtl'] body[data-btn-hover='logo-arrow'] .dn-btn:hover::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .dn-hero__btn:hover::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .duneus-cta:hover::before,
[dir='rtl'] body[data-btn-hover='logo-arrow'] .btn:hover::before {
  transform: translateX(0) scaleX(-1);
}

/* Some buttons are not flex containers; make sure the mark still lines up. */
body[data-btn-hover='logo-arrow'] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .dn-btn__label { transition: none; }
  body[data-btn-hover='logo-arrow'] .dn-btn::before,
  body[data-btn-hover='logo-arrow'] .dn-hero__btn::before,
  body[data-btn-hover='logo-arrow'] .btn::before { transition: none; }
}




/* ===========================================================================
 * 14 · HEATMAP  ·  15 · SPOTLIGHT — thermal imaging, pointer-tracked
 * ---------------------------------------------------------------------------
 * A real thermal camera does not tint a surface one colour: the hue changes
 * with DISTANCE from the heat source. So the ramp lives in the gradient stops
 * — white-hot core, through red / orange / yellow / green / cyan, to deep blue
 * at the cold edge — and --btn-intensity drives how far that signature spreads
 * and how strongly it reads.
 *
 * The thermal ramp is opaque and replaces the button face while hovered, which
 * is what makes it look like a thermal image rather than a coloured glow.
 * Blend-based ramps (duo, rainbow) stay additive instead.
 * ======================================================================== */

body[data-btn-hover='heatmap'] .dn-btn,
body[data-btn-hover='heatmap'] .dn-hero__btn,
body[data-btn-hover='heatmap'] .duneus-cta,
body[data-btn-hover='heatmap'] .btn,
body[data-btn-hover='spotlight'] .dn-btn,
body[data-btn-hover='spotlight'] .dn-hero__btn,
body[data-btn-hover='spotlight'] .duneus-cta,
body[data-btn-hover='spotlight'] .btn {
  position: relative;
  overflow: hidden;
  --btn-mx: 50%;
  --btn-my: 50%;
  --btn-intensity: 0;
  --heat-hue: calc((1 - var(--btn-intensity)) * 240);
  --heat-r: calc(var(--heat-cool-r, 0) + ((var(--heat-hot-r, 255) - var(--heat-cool-r, 0)) * var(--btn-intensity)));
  --heat-g: calc(var(--heat-cool-g, 68) + ((var(--heat-hot-g, 81) - var(--heat-cool-g, 68)) * var(--btn-intensity)));
  --heat-b: calc(var(--heat-cool-b, 255) + ((var(--heat-hot-b, 0) - var(--heat-cool-b, 255)) * var(--btn-intensity)));
  --heat-a: calc(var(--btn-intensity) * var(--btn-intensity) * var(--btn-intensity));
}

body[data-btn-hover='heatmap'] .dn-btn::before,
body[data-btn-hover='heatmap'] .dn-hero__btn::before,
body[data-btn-hover='heatmap'] .duneus-cta::before,
body[data-btn-hover='heatmap'] .btn::before,
body[data-btn-hover='spotlight'] .dn-btn::before,
body[data-btn-hover='spotlight'] .dn-hero__btn::before,
body[data-btn-hover='spotlight'] .duneus-cta::before,
body[data-btn-hover='spotlight'] .btn::before { display: none; }

body[data-btn-hover='heatmap'] .dn-btn::after,
body[data-btn-hover='heatmap'] .dn-hero__btn::after,
body[data-btn-hover='heatmap'] .duneus-cta::after,
body[data-btn-hover='heatmap'] .btn::after,
body[data-btn-hover='spotlight'] .dn-btn::after,
body[data-btn-hover='spotlight'] .dn-hero__btn::after,
body[data-btn-hover='spotlight'] .duneus-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  transition: none;
  will-change: background, opacity;
}

/* ---- Ramp: THERMAL (default) — organic signature, not a clean circle ----
   Three offset lobes break the radial symmetry, then feDisplacementMap warps
   the whole field with fractal noise so the edges read irregular, the way a
   real thermal blob does. Offsets are per-button, seeded in JS. */
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-hero__btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .duneus-cta::after,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .btn::after {
  opacity: var(--btn-intensity, 0);
  filter: url(#dnThermalNoise);
  background:
    radial-gradient(circle calc(var(--btn-heat-r, 110px) * .5)
      at calc(var(--btn-mx) + var(--lobe-1x, -9%)) calc(var(--btn-my) + var(--lobe-1y, -14%)),
      #ffffff 0%, #ffcf4d 38%, rgba(255,106,0,0) 72%),
    radial-gradient(circle calc(var(--btn-heat-r, 110px) * .68)
      at calc(var(--btn-mx) + var(--lobe-2x, 12%)) calc(var(--btn-my) + var(--lobe-2y, 9%)),
      #ff8a00 0%, #f01c3c 42%, rgba(184,28,134,0) 78%),
    radial-gradient(circle var(--btn-heat-r, 110px) at var(--btn-mx) var(--btn-my),
      #ffffff 0%,
      #ffe97a 7%,
      #ffb42a 15%,
      #ff6a00 24%,
      #f01c3c 34%,
      #b81c86 45%,
      #6a25c9 57%,
      #2c37c4 70%,
      #101d86 83%,
      #060b3a 100%);
}
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-btn:hover,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-hero__btn:hover,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .duneus-cta:hover,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .btn:hover {
  color: #fff;
  border-color: #101d86;
}
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-btn__label,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-btn > span,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-hero__btn > span,
body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .btn .dn-btn__label {
  position: relative;
  z-index: 3;
  mix-blend-mode: difference;
}
/* Anything else inside a platform button (spinner, icon) also stays above the
   field, but without the blend — a difference-blended spinner looks wrong. */
body[data-btn-hover='heatmap'] .btn > img,
body[data-btn-hover='heatmap'] .btn > span:not(.dn-btn__label),
body[data-btn-hover='spotlight'] .btn > img,
body[data-btn-hover='spotlight'] .btn > span:not(.dn-btn__label) {
  position: relative;
  z-index: 3;
}

/* No filter support -> the layered lobes alone still read organic. */
@supports not (filter: url(#dnThermalNoise)) {
  body[data-btn-hover='heatmap'][data-btn-ramp='thermal'] .dn-btn::after { filter: none; }
}

/* ---- Ramp: two-tone (additive) ---- */
body[data-btn-hover='heatmap'][data-btn-ramp='duo'] .dn-btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='duo'] .dn-hero__btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='duo'] .duneus-cta::after,
body[data-btn-hover='heatmap'][data-btn-ramp='duo'] .btn::after {
  mix-blend-mode: screen;
  background: radial-gradient(circle var(--btn-heat-r, 110px) at var(--btn-mx) var(--btn-my),
    rgba(var(--heat-r), var(--heat-g), var(--heat-b), var(--heat-a)) 0%,
    rgba(var(--heat-r), var(--heat-g), var(--heat-b), calc(var(--heat-a) * .45)) 45%,
    rgba(0, 0, 0, 0) 100%);
}

/* ---- Ramp: rainbow hue (additive) ---- */
body[data-btn-hover='heatmap'][data-btn-ramp='rainbow'] .dn-btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='rainbow'] .dn-hero__btn::after,
body[data-btn-hover='heatmap'][data-btn-ramp='rainbow'] .duneus-cta::after,
body[data-btn-hover='heatmap'][data-btn-ramp='rainbow'] .btn::after {
  mix-blend-mode: screen;
  background: radial-gradient(circle var(--btn-heat-r, 110px) at var(--btn-mx) var(--btn-my),
    hsla(var(--heat-hue), 100%, 55%, var(--heat-a)) 0%,
    hsla(var(--heat-hue), 100%, 50%, 0) 100%);
}

/* ---- Spotlight ---- */
body[data-btn-hover='spotlight'] .dn-btn::after,
body[data-btn-hover='spotlight'] .dn-hero__btn::after,
body[data-btn-hover='spotlight'] .duneus-cta::after {
  mix-blend-mode: screen;
  opacity: var(--btn-intensity, 0);
  background: radial-gradient(circle var(--btn-heat-r, 110px) at var(--btn-mx) var(--btn-my),
    var(--btn-hv-color, #FF5100) 0%, rgba(0, 0, 0, 0) 100%);
}

body[data-btn-hover='heatmap'][data-btn-ramp='duo'] .dn-btn:hover,
body[data-btn-hover='heatmap'][data-btn-ramp='rainbow'] .dn-btn:hover,
body[data-btn-hover='spotlight'] .dn-btn:hover,
body[data-btn-hover='spotlight'] .dn-hero__btn:hover { color: inherit; }

@media (hover: none) {
  body[data-btn-hover='heatmap'] .dn-btn:active,
  body[data-btn-hover='heatmap'] .btn:active,
  body[data-btn-hover='spotlight'] .dn-btn:active { --btn-intensity: 1; }
}