/* Ambient dust around a visible elephant (explore.js drives dust-reveal.mjs). The copy sits on the
   dust's darker, shaded right side; stacked layouts put it below the scene. */
.explore-section{position:relative;isolation:isolate;height:clamp(640px,50vw,860px);margin-bottom:-1px;background:#2e2d30;color:#f4efe8;overflow:hidden}
.explore-stage{position:absolute;inset:0;z-index:0}
.explore-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 42%,rgba(22,20,20,.45) 74%,rgba(22,20,20,.54))}
.explore-layout{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.explore-copy{width:min(430px,38%);pointer-events:auto;text-shadow:0 1px 18px #15121088}
.explore-copy .eyebrow{color:#d8cbbb;margin-bottom:22px}
.explore-copy h2{font-size:clamp(40px,4.6vw,70px);line-height:1.06}
.explore-copy h2 em{color:#e7c9a2}
.explore-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid #f4e6d22e}
.explore-list li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid #f4e6d22e}
.explore-list span{font-size:9px;color:#c7b9a8}
.explore-list h3{font-size:clamp(16px,1.55vw,22px);margin:0}
.explore-copy .text-link{margin-top:24px}.explore-copy .text-link:hover{color:#e8c49b}.explore-copy a:focus-visible{outline-color:#e8c49b}

/* Without WebGL2 the elephant stands on a static dusk gradient. */
.explore-stage.dust-reveal-fallback{background:radial-gradient(ellipse at 30% 8%,#c8b093,#6b5d52 38%,#3a383b 70%,#2e2d30)}
.explore-stage .dust-reveal-subject{position:absolute;left:38%;bottom:0;height:100%;transform:translateX(-50%);filter:grayscale(.85) brightness(.6)}

@media(max-width:1100px){
.explore-section{height:auto}
.explore-stage{position:relative;inset:auto;height:clamp(460px,72vw,640px)}
.explore-stage:after{content:"";position:absolute;inset:auto 0 0;height:18%;background:linear-gradient(transparent,#2e2d30);pointer-events:none}
.explore-stage .dust-reveal-subject{left:50%}
.explore-scrim{display:none}
.explore-layout{height:auto;display:block;padding-block:34px 72px}
.explore-copy{width:auto;max-width:560px;text-shadow:none}
}
@media(max-width:760px){.explore-stage{height:min(118vw,620px)}.explore-copy h2{font-size:48px}.explore-list h3{font-size:19px}}

/* Elephant section type: Laydan Serif and Laydan Caps (loaded by explore.js) take over once the html element has
   .explore-type; until then the Inter and Georgia setting above stays. A documentary title in a tall, narrow serif, with the
   list set like film credits. */
@media(min-width:1101px){.explore-type .explore-copy{width:min(460px,40%)}}
.explore-type #explore-title{font-family:"Laydan Serif",Georgia,serif;font-size:clamp(58px,5.9vw,88px);line-height:.93;letter-spacing:-.012em}
.explore-type #explore-title em{font-family:inherit;font-style:normal;color:#e7c9a2;letter-spacing:inherit}
.explore-type .explore-list{margin-top:38px}
.explore-type .explore-list li{grid-template-columns:38px 1fr;padding:13px 0 12px}
.explore-type .explore-list span{font:italic 400 18px/1 "Laydan Serif",Georgia,serif;color:#e7c9a2}
.explore-type .explore-list h3{font:500 12px/1.4 "Laydan Caps",Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#eee5d9}
.explore-type .explore-copy .text-link{margin-top:28px;font:italic 400 23px/1 "Laydan Serif",Georgia,serif;gap:14px}
@media(max-width:760px){.explore-type #explore-title{font-size:clamp(44px,14.5vw,58px)}}

/* How it works -> elephant (WEB-056): the elephant walks out of the dust. The section starts --explore-haze earlier, over extra
   paper at the end of How it works (whose bottom padding is that height, so the haze only ever covers empty paper), and rises out
   of it: a haze in the colours of the photo's top edge thickens up out of the paper, covers the photo's top edge and thins out
   over the first --explore-over of the photo; the section's own dust plates billow in it and specks drift up (explore.js). The
   haze sits in front of the photo and its shading (the scrim) and behind the copy. The stray rule under the desktop step list goes. */
:root{--explore-haze:44svh;--explore-over:20svh}
.process-section{padding-bottom:var(--explore-haze)}
.process-steps{border-bottom:0}
.explore-section{margin-top:calc(-1 * var(--explore-haze));padding-top:var(--explore-haze);height:calc(clamp(640px,50vw,860px) + var(--explore-haze));background:linear-gradient(transparent var(--explore-haze),#2e2d30 var(--explore-haze))}
.explore-stage,.explore-scrim{top:var(--explore-haze)}
.explore-haze{--fade:linear-gradient(transparent,rgba(0,0,0,.05) 14%,rgba(0,0,0,.2) 28%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.85) 58%,#000 66%,#000 74%,rgba(0,0,0,.62) 84%,rgba(0,0,0,.22) 93%,transparent);position:absolute;inset:0 0 auto;height:calc(var(--explore-haze) + var(--explore-over));z-index:2;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,#8f8270,#b4a991 9%,#c7b899 18%,#c5aa87 27%,#b79e84 36%,#ac967f 45%,#988471 55%,#756456 64%,#584f46 73%,#413c38 82%,#2f2b29);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.eh-plate{position:absolute;background:url(/frost/assets/dust/dust-cloud.webp) center/contain no-repeat;animation:eh-drift 16s ease-in-out infinite alternate}
.eh-cloud{left:-4%;top:24%;width:52%;height:76%;opacity:.85}
.eh-veil{right:-6%;top:30%;width:50%;height:70%;opacity:.4;transform:scaleX(-1);animation-name:eh-drift-flip;animation-duration:21s;animation-delay:-7s}
.eh-ground{left:30%;top:42%;width:40%;height:58%;opacity:.5;background-image:url(/frost/assets/dust/dust-veil.webp);animation-duration:19s;animation-delay:-4s}
@keyframes eh-drift{to{transform:translate(2.5%,-5%) scale(1.07)}}
@keyframes eh-drift-flip{from{transform:scaleX(-1)}to{transform:scaleX(-1) translate(2.5%,-5%) scale(1.07)}}
.eh-motes i{position:absolute;left:var(--x);bottom:calc(var(--explore-over) + 2svh);width:var(--s);height:var(--s);border-radius:50%;background:#c9a676;opacity:0;animation:eh-rise var(--t) linear var(--d) infinite}
@keyframes eh-rise{12%{opacity:var(--o)}78%{opacity:var(--o)}to{transform:translate(var(--dx),calc(var(--explore-haze) * var(--r) * -1));opacity:0}}
.explore-haze:not(.is-on) *{animation-play-state:paused}
@media(max-width:1100px){
 :root{--explore-haze:30svh;--explore-over:16svh}
 .explore-section{height:auto}
 .explore-stage{top:auto}
 .explore-haze{background:linear-gradient(90deg,#cebea8,#e5dbc4 9%,#dfcba4 18%,#cbac89 27%,#bfa385 36%,#bda487 45%,#c6ae90 55%,#c3ad92 64%,#cbb59a 73%,#d1bda1 82%,#cebca1)}
 .eh-cloud{left:-16%;top:20%;width:74%;height:80%}
 .eh-veil{right:-18%;top:24%;width:70%;height:76%;opacity:.55}
 .eh-ground{left:16%;width:70%}
}
@media(prefers-reduced-motion:reduce){.eh-plate{animation:none}}