/* ---------------------------------------------------------------------------
   The Denial X-Ray · Soft Appeals hero
   ---------------------------------------------------------------------------
   A 3D field of falling claims on canvas (dx-field.js). A beam catches one
   and traces it to OWNED. Every class is prefixed dx- so nothing here reaches
   journey.css, modules.css or the sam- Maryland additions.

   States on the section, moved by denial-xray.js and read by the canvas:
     .dx-js .is-stamped .is-f1..f4 .is-split .is-chosen .is-owned .is-final
     .dx-reduce  prefers-reduced-motion: one finished frame

   Desktop pins the hero inside .dx-wrap so the Maryland numbers rise over the
   dark field. Phones get the field at 100svh, SCAN DENIAL on it, the headline
   under it.
   --------------------------------------------------------------------------- */
.dx-hero {
  --dx-navy: #101426;
  --dx-cream: #f3ead9;
  --dx-cream-soft: rgba(243, 234, 217, 0.64);
  --dx-cream-line: rgba(243, 234, 217, 0.18);
  --dx-orange: #c2501c;
  --dx-ink: #101426;
  --dx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  background: var(--dx-navy);
  color: var(--dx-cream);
  font-family: var(--sans);
}

.dx-stage {
  position: relative;
  overflow: hidden;
  background: var(--dx-navy);
}

.dx-field {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dx-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dx-eyebrow {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  top: clamp(18px, 3vw, 32px);
  z-index: 2;
  color: var(--dx-cream-soft);
  opacity: 0;
  transition: opacity 0.8s var(--dx-ease) 0.6s;
}

.dx-hero.is-stamped .dx-eyebrow { opacity: 1; }
.dx-hero.is-final .dx-eyebrow { opacity: 0; transition-delay: 0s; }

/* ---- the final scene ------------------------------------------------------ */
.dx-final {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 72px);
}

.dx-final h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 82px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(16, 20, 38, 0.9);
}

.dx-final h1 span { display: block; color: var(--dx-orange); }

.dx-sub {
  max-width: 38ch;
  margin: clamp(16px, 2vw, 26px) 0 0;
  color: var(--dx-cream-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
}

.dx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); }

.dx-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--dx-cream);
  border-radius: 5px;
  background: var(--dx-cream);
  color: var(--dx-ink);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.dx-btn.dx-ghost { border-color: var(--dx-cream-line); background: rgba(16, 20, 38, 0.6); color: var(--dx-cream); }
.dx-btn:hover, .dx-btn:focus-visible { background: var(--dx-orange); border-color: var(--dx-orange); color: var(--dx-cream); transform: translateY(-1px); }
.dx-btn:focus-visible { outline: 3px solid var(--dx-cream); outline-offset: 3px; }

.dx-label { margin: clamp(18px, 2vw, 26px) 0 0; color: var(--dx-cream-soft); }

.dx-final h1, .dx-sub, .dx-actions, .dx-label {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--dx-ease), transform 0.9s var(--dx-ease);
}
.dx-sub { transition-delay: 0.15s; }
.dx-actions { transition-delay: 0.3s; }
.dx-label { transition-delay: 0.45s; }
.dx-hero.is-final .dx-final h1, .dx-hero.is-final .dx-sub, .dx-hero.is-final .dx-actions, .dx-hero.is-final .dx-label,
.dx-hero:not(.dx-js) .dx-final h1, .dx-hero:not(.dx-js) .dx-sub, .dx-hero:not(.dx-js) .dx-actions, .dx-hero:not(.dx-js) .dx-label {
  opacity: 1;
  transform: none;
}

/* ---- the phone scan button -------------------------------------------------- */
.dx-scan {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 26px;
  border: 0;
  border-radius: 4px;
  background: var(--dx-orange);
  color: var(--dx-cream);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.dx-scan:focus-visible { outline: 3px solid var(--dx-cream); outline-offset: 3px; }

/* ---- the findings for screen readers only ---------------------------------- */
.dx-finds {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.dx-hero:not(.dx-js) .dx-field, .dx-hero:not(.dx-js) .dx-scan { display: none; }
.dx-hero.dx-reduce *, .dx-hero.dx-reduce *::before { transition: none !important; animation: none !important; }

/* ---- desktop: the pinned film ------------------------------------------------ */
@media (min-width: 761px) {
  .dx-wrap { position: relative; }
  .dx-wrap > .section { position: relative; z-index: 3; background: var(--paper); }
  .dx-hero.dx-js { position: sticky; top: var(--nav-height, 76px); z-index: 1; }
  .dx-hero.dx-js.dx-reduce { position: relative; }
  .dx-hero.dx-js .dx-stage {
    height: calc(100vh - var(--nav-height, 76px));
    height: calc(100svh - var(--nav-height, 76px));
  }
  .dx-hero.dx-js .dx-field { position: absolute; inset: 0; }
  .dx-hero.dx-js .dx-final {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 46vw;
    pointer-events: none;
  }
  .dx-hero.dx-js.is-final .dx-final { pointer-events: auto; }
}

/* ---- phone: the field, then the headline --------------------------------------- */
@media (max-width: 760px) {
  .dx-hero.dx-js .dx-stage { display: flex; flex-direction: column; }
  .dx-hero.dx-js .dx-field { height: 100vh; height: 100svh; }
  .dx-hero.dx-js .dx-scan {
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(100svh - var(--nav-height, 76px) - 92px);
    z-index: 2;
    display: flex;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--dx-ease) 0.8s, transform 0.7s var(--dx-ease) 0.8s;
  }
  .dx-hero.dx-js.is-stamped .dx-scan { opacity: 1; transform: none; }
  .dx-hero.dx-js.is-scanned .dx-scan { opacity: 0; pointer-events: none; transition-delay: 0s; }
  .dx-final h1 { font-size: clamp(36px, 11vw, 60px); }
  .dx-actions .dx-btn { width: 100%; }
  .dx-hero.dx-js .dx-final { display: none; }
  .dx-hero.dx-js.is-final .dx-final { display: block; }
}