/* D2 animated homepage hero (R4). Integrated from the supplied prototype (hero.css).
   Every rule is scoped under .d2hero so it cannot affect the rest of the site.
   The person/background plate is one stationary image; only the four photographic
   thought bubbles animate (hero.js). Loaded on the homepage only. */

.d2hero {
  --d2h-yellow: #FBC140;          /* official D2 logo yellow (prototype used #ffce36) */
  --d2h-ink: #080909;
  --d2h-text: #F9F8F3;
  --d2h-muted: #D5D5CE;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  aspect-ratio: 1672 / 941;
  min-height: 640px;
  overflow: hidden;
  background: var(--d2h-ink);
  color: var(--d2h-text);
  font-family: "Archivo D2", Arial, Helvetica, sans-serif;
}
/* zero-specificity reset so the hero classes below can set margins without */
:where(.d2hero) p { margin: 0; }
.d2hero :focus-visible { outline: 3px solid var(--d2h-yellow); outline-offset: 4px; }

/* Stationary plate: the original man and dark office, never transformed */
.d2hero__plate { position: absolute; inset: 0; z-index: -1; }
.d2hero__base { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.d2hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 6, .19), transparent 65%); }

/* Copy */
/* top 27% keeps both buttons above the fold at 1366x768; min width keeps them on one row */
.d2hero__copy { position: absolute; left: 4.5%; top: 27%; width: max(35%, 450px); z-index: 2; }
.d2hero__eyebrow {
  color: var(--d2h-yellow); font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 22px;
}
.d2hero__headline, .d2hero__answer {
  font-family: "Newsreader D2", Georgia, "Times New Roman", serif;
  font-weight: 400; line-height: .98; letter-spacing: -.045em; margin: 0;
}
.d2hero__headline { font-size: clamp(38px, 5.7vw, 104px); max-width: 6.8em; color: var(--d2h-text); text-wrap: balance; }
.d2hero__answer { font-size: clamp(35px, 4.7vw, 86px); color: var(--d2h-yellow); margin-top: 14px; white-space: nowrap; letter-spacing: -.05em; }
.d2hero__rule { width: 54px; height: 2px; background: var(--d2h-yellow); margin: 26px 0; }
.d2hero__tagline { font-size: clamp(18px, 1.9vw, 34px); color: var(--d2h-text); }
.d2hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.d2hero__actions .btn { min-height: 46px; }

/* Thought bubbles: four independent photographic layers */
.d2hero__thoughts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.d2hero__bubble {
  position: absolute; width: 22%; aspect-ratio: 370 / 270;
  transform-origin: 50% 85%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}
.d2hero__bubble:nth-child(1) { left: 30%; top: 2%; width: 21%; }
.d2hero__bubble:nth-child(2) { left: 51%; top: 0%; width: 20%; }
.d2hero__bubble:nth-child(3) { left: 72%; top: 7%; }
.d2hero__bubble:nth-child(4) { left: 76%; top: 38%; }
.d2hero__bubble svg { display: block; width: 100%; height: 100%; overflow: visible; }
.d2hero__bubble text {
  font: 700 15px "Archivo D2", Arial, sans-serif; letter-spacing: 1px;
  fill: #FFFFFF; text-anchor: middle;
}

/* Controls */
.d2hero__controls {
  position: absolute; left: 4.5%; right: 4.5%; bottom: 20px; z-index: 3;
  display: flex; align-items: center; gap: 18px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
html:not(.js) .d2hero__controls { display: none; }
.d2hero__setlabel { min-width: 132px; color: var(--d2h-muted); }
.d2hero__dots { display: flex; gap: 2px; }
.d2hero__dots button {
  position: relative; width: 32px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.d2hero__dots button::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; background: #8A8A86;
}
.d2hero__dots button[aria-pressed="true"]::before { background: var(--d2h-yellow); }
.d2hero__pause {
  margin-left: auto; min-height: 40px; padding: 9px 16px; cursor: pointer;
  font: 600 13px "Archivo D2", Arial, sans-serif; letter-spacing: 0; text-transform: none;
  color: var(--d2h-text); background: rgba(11, 12, 11, .72); border: 1px solid rgba(255, 255, 255, .25); border-radius: 25px;
}
.d2hero__pause:hover { border-color: var(--d2h-yellow); }
.d2hero__pause [aria-hidden] { margin-right: 6px; }

/* Narrow desktop / tablet landscape: move the first bubble clear of the eyebrow line */
@media (min-width: 961px) and (max-width: 1180px) {
  .d2hero__bubble:nth-child(1) { left: 33%; width: 19%; }
}

/* Stacked layout (tablet portrait and phones): copy, then the bubbles above the stationary person.
   Normal document flow reserves space through every animation cycle */
@media (max-width: 960px) {
  .d2hero { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; }
  .d2hero__copy {
    position: relative; order: 1; left: auto; top: auto; width: auto;
    padding-top: 40px; padding-left: max(16px, 6%); padding-right: max(16px, 6%);
  }
  .d2hero__eyebrow { font-size: 10.5px; letter-spacing: 1.6px; margin-bottom: 16px; }
  .d2hero__headline { font-size: clamp(46px, 8vw, 72px); max-width: 7em; }
  .d2hero__answer { font-size: clamp(38px, 6.4vw, 60px); margin-top: 10px; }
  .d2hero__rule { margin: 20px 0; }
  .d2hero__tagline { font-size: clamp(21px, 3vw, 26px); }
  .d2hero__actions { margin-top: 22px; }
  .d2hero__plate { position: relative; inset: auto; order: 3; height: 480px; margin-top: -120px; }
  .d2hero__base { object-position: 62% center; }
  .d2hero__shade { background: linear-gradient(#080909 0%, transparent 24%, transparent 52%, #080909 90%); }
  .d2hero__thoughts {
    position: relative; inset: auto; order: 2; z-index: 2;
    margin: 30px max(16px, 4%) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px;
  }
  .d2hero__bubble, .d2hero__bubble:nth-child(n) { position: relative; left: auto; top: auto; width: 100%; }
  .d2hero__bubble text { font-size: 24px; letter-spacing: .2px; font-stretch: 88%; }
  .d2hero__controls {
    position: relative; order: 4; left: auto; right: auto; bottom: auto; gap: 10px;
    padding: 26px max(16px, 6%) 30px;
  }
  .d2hero__setlabel { min-width: 0; font-size: 10.5px; }
  .d2hero__pause { font-size: 12px; padding: 9px 12px; }
}
@media (max-width: 560px) {
  .d2hero__thoughts { grid-template-columns: 1fr 1fr; margin-top: 30px; gap: 10px 6px; }
  .d2hero__bubble text { font-size: 28px; }
}

/* Homepage lede: keeps the authored cross-channel sentence directly under the hero */
.d2lede { padding-block: clamp(36px, 5vw, 64px) 8px; }
.d2lede p {
  font-family: "Newsreader D2", Georgia, serif; font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.38; max-width: 36em; color: var(--ink, #F3F0EA); margin: 0; text-wrap: pretty;
}