/* The artwork stays still; only atmospheric light and mist move. */
.drex-hero.drex-hero-atmosphere {
  overflow: hidden;
  min-height: 100svh;
  padding: 8rem 1.5rem 2rem;
  gap: 2rem;
  justify-content: flex-end;
}
.drex-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.drex-scene-picture, .drex-scene-picture img { display: block; width: 100%; height: 100%; }
.drex-scene-picture img { object-fit: cover; object-position: 68% center; }
.drex-scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,12,.12), rgba(5,8,12,.35) 35%, rgba(5,8,12,.92) 100%);
}
.drex-scene-glow {
  position: absolute; inset: 0; opacity: .18;
  background: radial-gradient(ellipse at 81% 33%, rgba(255,62,22,.28), transparent 30%);
}
.drex-scene-fog {
  position: absolute; inset: 30% -25% -10%; opacity: .65; z-index: 2;
  background: radial-gradient(ellipse at 25% 50%, rgba(190,205,216,.5), transparent 28%),
    radial-gradient(ellipse at 65% 65%, rgba(175,195,213,.45), transparent 35%),
    radial-gradient(ellipse at 90% 40%, rgba(180,200,215,.4), transparent 25%);
}
.drex-scene-fog-front { inset: 55% -30% -20%; opacity: .55; }
.drex-hero-atmosphere[data-motion="running"] .drex-scene-glow,
.drex-hero-atmosphere[data-motion="paused"] .drex-scene-glow { animation: drex-atmosphere-glow 8s ease-in-out infinite alternate; }
.drex-hero-atmosphere[data-motion] .drex-scene-fog-back { animation: drex-atmosphere-mist 18s ease-in-out infinite alternate; }
.drex-hero-atmosphere[data-motion] .drex-scene-fog-front { animation: drex-atmosphere-mist 24s ease-in-out -8s infinite alternate-reverse; }
.drex-hero-atmosphere[data-motion="paused"] .drex-scene > div { animation-play-state: paused; }
.drex-hero-atmosphere .drex-hero-inner { position: relative; margin: 0 auto; }
.drex-hero-atmosphere .thesis { font-size: clamp(2rem, 5vw, 4.25rem); max-width: 18ch; }
.drex-hero-atmosphere .lede { margin: 1.5rem 0; color: #e0e2e5; text-shadow: 0 1px 12px #000; }
.drex-hero-atmosphere .cta-row { gap: 1.25rem; }
.drex-hero-atmosphere .cta-primary { min-height: 2.75rem; }
.drex-hero-atmosphere .cta-secondary { color: #e0e2e5; padding: .75rem 0; }
.drex-hero-atmosphere .drex-hero-meta {
  position: relative; inset: auto; gap: clamp(1.25rem, 5vw, 3.75rem);
  width: 100%; max-width: 68.75rem; margin: 0 auto;
}
.drex-hero-atmosphere .drex-hero-meta > div { color: #c3c7cf; letter-spacing: .08em; }
.drex-hero-atmosphere a.drex-hero-scroll {
  position: relative; inset: auto; width: 100%; max-width: 68.75rem;
  margin: 0 auto; min-height: 2.75rem; color: #d0d3d8;
}
.drex-hero-atmosphere .drex-hero-scroll::after { display: none; }
.drex-motion-toggle {
  position: absolute; top: 5.5rem; right: 1.5rem;
  color: #fff; background: rgba(8,10,14,.8); border: 1px solid rgba(255,255,255,.3);
  border-radius: 2rem; padding: .65rem 1rem; min-height: 2.75rem;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.drex-motion-toggle:focus-visible, .drex-hero-atmosphere a:focus-visible,
.drex-hero-atmosphere button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes drex-atmosphere-mist { from { transform: translateX(-10%); } to { transform: translateX(12%); } }
@keyframes drex-atmosphere-glow { from { opacity: .14; } to { opacity: .42; } }
@media (min-width: 48rem) {
  .drex-hero.drex-hero-atmosphere { padding: 9rem 2.75rem 2rem; justify-content: center; }
  .drex-scene-picture img { object-position: 85% center; }
  .drex-scene::after { background: linear-gradient(90deg, rgba(5,8,12,.8), rgba(5,8,12,.42) 48%, rgba(5,8,12,.05) 80%), linear-gradient(0deg, rgba(5,8,12,.8), transparent 45%); }
  .drex-motion-toggle { right: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .drex-hero-atmosphere[data-motion] .drex-scene > div,
  .drex-hero-atmosphere .chev { animation: none; }
  html:has(body.drex) { scroll-behavior: auto; }
}

/* The comparison button removes effects instead of freezing an indistinguishable frame. */
.drex-hero-atmosphere[data-motion] .drex-scene-picture { animation: drex-camera-drift 20s ease-in-out infinite alternate; transform-origin: 80% 30%; }
.drex-hero-atmosphere[data-motion="paused"] .drex-scene-picture { animation-play-state: paused; }
.drex-hero-atmosphere[data-static="true"] .drex-scene > div { visibility: hidden; }
.drex-hero-atmosphere[data-static="true"] .drex-scene-picture { animation: none; }
@keyframes drex-camera-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
 .drex-hero-atmosphere[data-motion] .drex-scene-picture { animation: none; }
 .drex-hero-atmosphere .drex-scene > div { visibility: hidden; }
}

/* Compact visual control with a larger invisible touch target. */
.drex-hero-atmosphere .drex-motion-toggle {
 width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0;
 border-radius: 50%; font-size: 0; display: grid; place-items: center;
}
.drex-motion-toggle[hidden] { display: none; }
.drex-motion-toggle::before { content: 'Ⅱ'; font-size: .9rem; line-height: 1; }
.drex-motion-toggle[aria-pressed="true"]::before { content: '▶'; font-size: .7rem; }
.drex-motion-toggle::after { content: ''; position: absolute; inset: -.3rem; }


/* All moving layers fade to transparent well before their rectangular boundaries. */
.drex-scene-fog, .drex-scene-clouds, .drex-scene-red-clouds {
 -webkit-mask-image: radial-gradient(ellipse, #000 20%, transparent 70%);
 mask-image: radial-gradient(ellipse, #000 20%, transparent 70%);
}
.drex-scene-fog { inset: 45% -65% -30%; }
.drex-scene-fog-front { inset: 60% -70% -40%; }
.drex-scene-clouds {
 position: absolute; top: 50%; left: -35%; width: 170%; height: 30%;
 background: url('/assets/hero/cloud-mist.svg') center / 100% 100% no-repeat;
 opacity: .65; z-index: 2;
}
.drex-scene-clouds-front { top: 62%; left: -30%; width: 160%; height: 24%; opacity: .45; }
.drex-scene-red-clouds {
 position: absolute; top: 9%; right: -19%; width: 85%; height: 42%;
 background: url('/assets/hero/cloud-red.svg?v=7') center / 100% 100% no-repeat;
 opacity: .75; z-index: 2;
}
.drex-hero-atmosphere.drex-gsap[data-motion] .drex-scene > div { animation: none; }
@media (min-width: 48rem) {
 .drex-scene-clouds { top: 57%; }
 .drex-scene-clouds-front { top: 68%; }
 .drex-scene-red-clouds { top: 14%; right: -13%; width: 72%; height: 42%; }
}

.drex-scene-red-clouds {
 opacity: 1; mix-blend-mode: screen;
 -webkit-mask-image: radial-gradient(ellipse, #000 40%, transparent 75%);
 mask-image: radial-gradient(ellipse, #000 40%, transparent 75%);
}
.drex-shooting-star {
 position: absolute; left: 7%; top: 13%; z-index: 3; opacity: 0;
 width: clamp(3rem, 7vw, 6rem); height: .13rem;
 background: linear-gradient(90deg, transparent, #ffb79a 75%, #fff);
 border-radius: 50%; transform: rotate(15deg); transform-origin: right center;
 filter: drop-shadow(0 0 4px #ffad8c);
}
.drex-shooting-star::after {
 content: ''; position: absolute; right: 0; top: -.08rem;
 width: .28rem; height: .28rem; border-radius: 50%; background: #fff3df;
 box-shadow: 0 0 8px #ffd0ab;
}

/* Keep the moving red cloud bank in the sky, clear of the headline. */
.drex-scene-red-clouds { opacity: .7; }
@media (min-width: 48rem) {
 .drex-scene-red-clouds { right: -9%; width: 55%; }
}

/* Animate only the cloud texture already present in the original artwork. */
.drex-hero-atmosphere .drex-scene-red-clouds {
 inset: 0; width: 100%; height: 100%; opacity: 1; background: none;
 mix-blend-mode: normal;
 mask-image: radial-gradient(circle at var(--moon-x) var(--moon-y), transparent calc(var(--moon-r) * 1.1), #000 calc(var(--moon-r) * 1.5), #000 calc(var(--moon-r) * 2.4), transparent calc(var(--moon-r) * 3.2));
 -webkit-mask-image: radial-gradient(circle at var(--moon-x) var(--moon-y), transparent calc(var(--moon-r) * 1.1), #000 calc(var(--moon-r) * 1.5), #000 calc(var(--moon-r) * 2.4), transparent calc(var(--moon-r) * 3.2));
}
.drex-red-original-picture, .drex-red-original-picture img { display: block; width: 100%; height: 100%; }
.drex-red-original-picture img { object-fit: cover; object-position: 68% center; filter: url('#drex-cloud-warp'); }
/* Keep the source and overlay aligned; the clouds warp independently. */
.drex-hero-atmosphere[data-motion] .drex-scene-picture { animation: none; }
.drex-shooting-star { width: clamp(5rem, 11vw, 9rem); height: .2rem; }
.drex-shooting-star::after { width: .45rem; height: .45rem; top: -.12rem; box-shadow: 0 0 12px #ffd0ab; }
@media (min-width: 48rem) { .drex-red-original-picture img { object-position: 85% center; } }

/* The transformed artwork must never reach the mountain silhouettes. */
.drex-hero-atmosphere .drex-scene-red-clouds {
 -webkit-mask-image: radial-gradient(circle at var(--moon-x) var(--moon-y), transparent calc(var(--moon-r) * 1.1), #000 calc(var(--moon-r) * 1.5), #000 calc(var(--moon-r) * 2.4), transparent calc(var(--moon-r) * 3.2)), linear-gradient(to bottom, #000 0, #000 calc(var(--cloud-sky-end) - 3rem), transparent var(--cloud-sky-end));
 -webkit-mask-composite: source-in;
 mask-image: radial-gradient(circle at var(--moon-x) var(--moon-y), transparent calc(var(--moon-r) * 1.1), #000 calc(var(--moon-r) * 1.5), #000 calc(var(--moon-r) * 2.4), transparent calc(var(--moon-r) * 3.2)), linear-gradient(to bottom, #000 0, #000 calc(var(--cloud-sky-end) - 3rem), transparent var(--cloud-sky-end));
 mask-composite: intersect;
}

.drex-fixed-star {
 position: absolute; z-index: 3; width: .2rem; height: .2rem;
 border-radius: 50%; background: #fff4df; opacity: .12;
 box-shadow: 0 0 5px 2px #ffd9af88, 0 0 14px 3px #ffd9af44;
}
.drex-fixed-star::before, .drex-fixed-star::after {
 content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
 background: linear-gradient(90deg, transparent, #fff4df, transparent);
 width: .85rem; height: 1px;
}
.drex-fixed-star::after { transform: translate(-50%, -50%) rotate(90deg); }
.drex-fixed-star-1 { left: 37%; top: 9%; }
.drex-fixed-star-2 { left: 48%; top: 9%; }
.drex-fixed-star-3 { left: 56%; top: 12%; }
.drex-fixed-star-4 { left: 65%; top: 9%; }
.drex-hero-atmosphere[data-static="true"] .drex-fixed-star { opacity: .25 !important; }
@media (prefers-reduced-motion: reduce) { .drex-fixed-star { opacity: .25 !important; } }

/* Larger fixed stars, retaining the staggered gentle twinkle. */
.drex-fixed-star {
 width: .32rem; height: .32rem;
 box-shadow: 0 0 7px 3px #ffd9af99, 0 0 20px 5px #ffd9af44;
}
.drex-fixed-star::before, .drex-fixed-star::after { width: 1.4rem; height: 1.5px; }

/* Quiet motion control: icon only, with an invisible comfortable hit area. */
.drex-hero-atmosphere .drex-motion-toggle {
 right: .65rem; top: 5.25rem;
 width: 1.25rem; height: 1.25rem;
 border: 0; border-radius: 0; background: transparent;
 color: rgba(255,255,255,.48);
 box-shadow: none; opacity: .65;
}
.drex-hero-atmosphere .drex-motion-toggle::before { font-size: .7rem; }
.drex-hero-atmosphere .drex-motion-toggle[aria-pressed="true"]::before { font-size: .6rem; }
.drex-hero-atmosphere .drex-motion-toggle::after { inset: -.75rem; }
.drex-hero-atmosphere .drex-motion-toggle:hover,
.drex-hero-atmosphere .drex-motion-toggle:focus-visible { color: #fff; opacity: 1; }

/* No tooltip box or rectangular focus frame on the motion icon. */
.drex-hero-atmosphere .drex-motion-toggle,
.drex-hero-atmosphere .drex-motion-toggle:focus,
.drex-hero-atmosphere .drex-motion-toggle:focus-visible,
.drex-hero-atmosphere .drex-motion-toggle:active {
 outline: none; border: 0; background: transparent; box-shadow: none;
 -webkit-tap-highlight-color: transparent;
}
.drex-hero-atmosphere .drex-motion-toggle:focus-visible::before {
 color: #fff; text-shadow: 0 0 5px #fff;
}

/* Include padding in the first screen height on mobile and desktop. */
.drex-hero.drex-hero-atmosphere { box-sizing: border-box; }