.vestige-loader{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden;animation:loader-safety 0s 3s forwards}
.vestige-loader-curtain{position:absolute;inset:0;background:#000;animation:curtain-away 1s .75s cubic-bezier(.76,0,.24,1) both}
.vestige-loader-icon{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
.vestige-loader-icon img{display:block;width:clamp(168px,17.5vw,252px);height:auto;animation:mark-away .75s .5s cubic-bezier(.45,0,.55,1) both}
.vestige-loader[hidden]{display:none}
.vestige-loader.is-outgoing{animation:none;pointer-events:auto}
.vestige-loader.is-outgoing .vestige-loader-curtain{animation:curtain-in .85s cubic-bezier(.76,0,.24,1) both}
.vestige-loader.is-outgoing img{animation:mark-in .65s .2s cubic-bezier(.45,0,.55,1) both}
@keyframes curtain-away{to{transform:translateY(100%)}}
@keyframes mark-away{to{transform:translateY(-64px) rotateY(270deg);opacity:0}}
@keyframes curtain-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes mark-in{from{transform:translateY(64px) rotateY(270deg);opacity:0}to{transform:none;opacity:1}}
@keyframes loader-safety{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.vestige-loader{display:none!important}}

/* Reveal the photograph first, then the hero copy in a short sequence. */
.hero-image{animation:hero-photo-settle 1.8s .75s cubic-bezier(.22,1,.36,1) both}
.hero-copy>.eyebrow{animation:hero-copy-enter .8s 1.65s cubic-bezier(.22,1,.36,1) backwards}
.hero h1 .hero-line{animation:hero-copy-enter .95s 1.8s cubic-bezier(.22,1,.36,1) backwards}
.hero h1 .hero-line:nth-child(2){animation-delay:1.92s}
.hero h1 .hero-line:nth-child(3){animation-delay:2.04s}
.hero-bottom>p{animation:hero-copy-enter .8s 2.16s cubic-bezier(.22,1,.36,1) backwards}
.hero-bottom .actions{animation:hero-copy-enter .8s 2.28s cubic-bezier(.22,1,.36,1) backwards}
@keyframes hero-photo-settle{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes hero-copy-enter{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hero-image,.hero-copy>.eyebrow,.hero h1 .hero-line,.hero-bottom>p,.hero-bottom .actions{animation:none}}

body:has(.hero)>header{animation:hero-copy-enter .8s 1.5s cubic-bezier(.22,1,.36,1) backwards}
@media(prefers-reduced-motion:reduce){body:has(.hero)>header{animation:none}}

/* Return from About without replaying the staged homepage intro. */
.quick-entry .hero-image,.quick-entry .hero-copy>.eyebrow,.quick-entry .hero h1 .hero-line,.quick-entry .hero-bottom>p,.quick-entry .hero-bottom .actions,body.quick-entry>header{animation:none}

/* Keep the original animated preload; mobile page content stays still. */
@media(max-width:650px){
  .hero-image,.hero-copy>.eyebrow,.hero h1 .hero-line,.hero-bottom>p,.hero-bottom .actions,body:has(.hero)>header{animation:none;translate:none}
}

/* Mobile uses the same 3D motion with an explicit starting transform. */
@media(max-width:650px){
  .vestige-loader-icon img{animation:none;transform:translateY(0px) rotateY(0deg);will-change:transform}
  .vestige-loader-curtain{will-change:transform}
  .vestige-loader:not(.mobile-preload-ready) .vestige-loader-curtain{animation-play-state:paused}
}

/* Allow mobile Contact imagery and fonts to settle behind the existing curtain. */
@media(max-width:650px){.contact-page .vestige-loader{animation-delay:4s}}

/* About and Contact reveal after their opening image and fonts are ready. */
:is(.contact-page,.about-page) .vestige-loader{animation-delay:4s}
:is(.contact-page,.about-page) .vestige-loader:not(.mobile-preload-ready):not(.is-outgoing) .vestige-loader-curtain{animation-play-state:paused}
:is(.contact-page,.about-page) .vestige-loader:not(.is-outgoing) .vestige-loader-icon img{animation:none;transform:translateY(0) rotateY(0);will-change:transform,opacity}