/* Approved identity: white, black and mineral orange. Motion is progressive. */
.mineral-site .loader { display: grid; place-content: center; gap: 34px; background: #fff; color: #000; overflow: hidden; transform: translate3d(0,-105%,0); transition: opacity .2s, visibility .2s, transform .62s cubic-bezier(.76,0,.24,1); }
html.mx-loading .mineral-site .loader, html.mx-exiting .mineral-site .loader { visibility: visible; opacity: 1; }
html.mx-loading .mineral-site .loader { transform: translate3d(0,0,0); }
html.mx-exiting .mineral-site .loader { transform: translate3d(0,-105%,0); }
.mineral-site .loader::before, .mineral-site .loader::after { content: ''; position: absolute; pointer-events: none; }
.mineral-site .loader::before { inset: 0; background: linear-gradient(126deg,transparent 49.92%,#00000009 50%,transparent 50.08%); }
.mineral-site .loader::after { bottom: 0; left: 0; right: 0; height: 5px; background: #ee4712; }
.mineral-site .loader-logo { position: relative; width: min(640px,80vw); aspect-ratio:1469/257; }
.mineral-site .loader-piece { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mineral-site .loader-piece--mountain { clip-path: polygon(0 100%,13.35% 0,26.7% 100%); }
.mineral-site .loader-piece--diagonal { clip-path: polygon(16.5% 0,22.45% 0,35.75% 100%,30% 100%); }
.mineral-site .loader-piece--summit { clip-path: polygon(27.65% 16%,29.85% 0,35.75% 0,30.65% 38%); }
.mineral-site .loader-piece--wordmark { clip-path: inset(0 0 0 38%); }
html.mx-loading .loader-piece--mountain { animation: mx-mountain .75s cubic-bezier(.22,1,.36,1) both; }
html.mx-loading .loader-piece--diagonal { animation: mx-diagonal .75s .12s cubic-bezier(.22,1,.36,1) both; }
html.mx-loading .loader-piece--summit { animation: mx-summit .65s .24s cubic-bezier(.22,1,.36,1) both; }
html.mx-loading .loader-piece--wordmark { animation: mx-wordmark .75s .34s cubic-bezier(.22,1,.36,1) both; }
.mineral-site .loader-track { height: 2px; width: min(210px,36vw); background: #00000018; justify-self: center; overflow: hidden; }
.mineral-site .loader-track::after { content:''; display:block; height:100%; background:#ee4712; transform-origin:left; }
html.mx-loading .loader-track::after { animation: mx-load-line 1.2s cubic-bezier(.22,1,.36,1) both; }
.mineral-site .loader-caption { margin:0; text-align:center; font:500 9px/1.6 var(--font-mono); letter-spacing:.25em; text-transform:uppercase; color:#5c605f; }
@keyframes mx-mountain { from { opacity:0; transform:translate3d(-28px,35px,0); } to { opacity:1; transform:none; } }
@keyframes mx-diagonal { from { opacity:0; transform:translate3d(-20px,-35px,0); } to { opacity:1; transform:none; } }
@keyframes mx-summit { from { opacity:0; transform:translate3d(30px,-25px,0); } to { opacity:1; transform:none; } }
@keyframes mx-wordmark { from { opacity:0; transform:translate3d(24px,0,0); } to { opacity:1; transform:none; } }
@keyframes mx-load-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* Reveals move once into place; reading and form focus never depend on motion. */
.mineral-site.motion-ready [data-story-reveal] { opacity:0; transform:translate3d(0,30px,0); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); }
.mineral-site.motion-ready [data-story-reveal].is-revealed, .mineral-site.motion-ready [data-story-reveal]:focus-within { opacity:1; transform:none; }
html.mx-loading .mineral-site.motion-ready :is(.hero,.project-hero,.page-intro,.article-header,.error-page) [data-story-reveal], html.mx-exiting .mineral-site.motion-ready :is(.hero,.project-hero,.page-intro,.article-header,.error-page) [data-story-reveal] { opacity:0; transform:translate3d(0,30px,0); }
.mineral-site.motion-ready [data-story-chapter] { scroll-margin-top:85px; }
.mineral-site.motion-ready .page-intro::after { content:''; display:block; height:1px; margin-top:34px; background:var(--rule); transform:scaleX(var(--chapter-progress,0)); transform-origin:left; }
.mineral-site.motion-ready [data-story-image] { transform:translate3d(0,var(--image-shift,0px),0) scale(var(--image-scale,1.04)); transition:none; }
.mineral-site.motion-ready .hero, .mineral-site.motion-ready .project-hero { overflow:hidden; }
.mineral-site.motion-ready .project-card [data-story-image] { transition:filter .4s; }
.mineral-site.motion-ready .project-card:hover [data-story-image] { filter:brightness(1.08); }
.mineral-site .project-nav a { transition:border-color .3s,color .3s; }
.mineral-site .project-nav .project-nav-toggle { display:none; }
@media(max-width:48rem) {
  .mineral-site .project-nav .project-nav-toggle { display:flex; }
  .mineral-site .project-nav .project-nav-inner { display:flex; max-height:0; opacity:0; visibility:hidden; overflow:hidden; pointer-events:none; transition:max-height .32s cubic-bezier(.22,.6,.22,1),opacity .25s,visibility .32s; }
  .mineral-site .project-nav.is-open .project-nav-inner { max-height:240px; opacity:1; visibility:visible; pointer-events:auto; }
  .mineral-site .project-nav .project-nav-inner a { flex-shrink:0; }
}

/* A vertical exploration sequence lets each stage become the focus as it passes. */
.mineral-site.motion-ready .story-sequence { display:block; position:relative; margin-top:80px; padding-left:0; }
.mineral-site.motion-ready .story-sequence::before, .mineral-site.motion-ready .story-sequence::after { content:''; position:absolute; top:0; bottom:0; left:30px; width:1px; background:var(--rule); }
.mineral-site.motion-ready .story-sequence::after { width:2px; background:#ee4712; transform:scaleY(var(--sequence-progress,0)); transform-origin:top; }
.mineral-site.motion-ready .story-sequence .process-step { position:relative; min-height:clamp(240px,40vh,380px); padding:45px 5% 65px 110px; border:0; }
.mineral-site.motion-ready .story-sequence .process-step .number { position:absolute; z-index:1; top:46px; left:0; width:62px; height:62px; display:grid; place-items:center; padding:0; border:1px solid var(--rule); background:var(--paper); color:var(--ink); font-size:1rem; transition:background .4s,color .4s,border-color .4s; }
.mineral-site.motion-ready .section-dark .story-sequence .process-step .number { background:#172020; color:#fff; }
.mineral-site.motion-ready .story-sequence .process-step.is-current .number, .mineral-site.motion-ready .story-sequence .process-step.is-past .number { color:#fff; background:#b94221; border-color:#ee4712; }
.mineral-site.motion-ready .story-sequence .process-step h3 { font-size:clamp(28px,3.7vw,54px); max-width:22ch; margin-top:0; letter-spacing:-.045em; }
.mineral-site.motion-ready .story-sequence .process-step p { max-width:48ch; font-size:clamp(16px,1.5vw,20px); }

/* The chapter rail sits in the outside gutter, with labels exposed on focus. */
.mineral-site .story-rail { position:fixed; z-index:44; right:7px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:5px; width:32px; opacity:0; pointer-events:none; transition:opacity .3s; }
.mineral-site.motion-ready .story-rail { display:flex; opacity:1; pointer-events:auto; }
.mineral-site .story-link { position:relative; display:flex; align-items:center; justify-content:center; width:32px; min-height:32px; text-decoration:none; color:var(--ink); }
.mineral-site .story-link::before { content:''; width:5px; height:5px; border-radius:50%; background:#75817b; box-shadow:0 0 0 2px #ffffffab; transition:transform .25s,background .25s; }
.mineral-site .story-link.is-current::before { background:#ee4712; transform:scale(1.5); }
.mineral-site .story-link span { position:absolute; right:36px; max-width:240px; width:max-content; padding:8px 11px; background:#fff; color:#172020; border:1px solid #17202018; box-shadow:0 8px 30px #0000000a; font:500 10px/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity .2s,transform .2s; }
.mineral-site .story-link:hover span, .mineral-site .story-link:focus-visible span { opacity:1; transform:none; }
.mineral-site .story-rail-progress { display:none; }
.mineral-site .scroll-progress { width:100%; transform:scaleX(var(--page-progress,0)); transform-origin:left; }
@media(min-width:1100px) { .mineral-site.motion-ready .project-showcase>.section-head { position:sticky; top:90px; align-self:start; } }
@media(max-width:1279px) { .mineral-site.motion-ready .story-rail { display:none; } }
@media(max-width:650px) {
  .mineral-site .loader-logo { width:86vw; }
  .mineral-site .loader { gap:25px; }
  .mineral-site .loader-caption { font-size:8px; letter-spacing:.16em; }
  .mineral-site.motion-ready [data-story-reveal] { transform:translate3d(0,18px,0); transition-duration:.65s; }
  .mineral-site.motion-ready [data-story-reveal].is-revealed { transform:none; }
  .mineral-site.motion-ready .story-sequence { margin-top:48px; }
  .mineral-site.motion-ready .story-sequence::before, .mineral-site.motion-ready .story-sequence::after { left:20px; }
  .mineral-site.motion-ready .story-sequence .process-step { min-height:220px; padding:28px 0 40px 68px; }
  .mineral-site.motion-ready .story-sequence .process-step .number { top:30px; width:42px; height:42px; font-size:12px; }
  .mineral-site.motion-ready .story-sequence .process-step h3 { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
  html.mx-loading .mineral-site .loader,html.mx-exiting .mineral-site .loader { display:none; }
  .mineral-site [data-story-reveal], .mineral-site.motion-ready [data-story-reveal], html.mx-loading .mineral-site.motion-ready [data-story-reveal], html.mx-exiting .mineral-site.motion-ready [data-story-reveal] { opacity:1!important; transform:none!important; transition:none!important; }
  .mineral-site [data-story-image] { transform:none!important; }
  .mineral-site.motion-ready .story-rail { display:none; }
}
@media print {
  .mineral-site [data-story-reveal] { opacity:1!important; transform:none!important; }
  .mineral-site .story-rail,.mineral-site .loader { display:none!important; }
  .mineral-site [data-story-image] { transform:none!important; }
  .mineral-site.motion-ready .story-sequence .process-step { min-height:0; padding:20px 0 20px 80px; break-inside:avoid; }
}
