/* A brief viewport transition. The portfolio stays interactive underneath. */
.wr-boot{--wr-duration:1400ms;--wr-hold:1000ms}
.world-reveal{display:none;position:fixed;inset:0;z-index:30;pointer-events:none;overflow:clip;isolation:isolate;color:#f2f3ed;contain:layout paint;--wr-duration:1400ms;--wr-hold:1000ms}
.wr-boot .world-reveal{display:block;animation:wr-dismiss var(--wr-duration) linear both}
.wr-world{position:absolute;inset:0 0 auto;height:min(880px,100svh);background:#0a1117}
.wr-world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:scale(1.075)}
.wr-render{animation:wr-light var(--wr-duration) linear both}
.wr-wire{background:#071118;position:absolute;inset:0;animation:wr-wire-pass var(--wr-duration) linear both}
.wr-wire img{filter:url(#wr-edge-pass);opacity:.95}
.wr-unlit{filter:grayscale(1) brightness(.63) contrast(.8);animation:wr-material-pass var(--wr-duration) linear both}
.wr-shutter{position:absolute;inset:0;background:#090c10;will-change:transform}
.wr-shutter-top{clip-path:polygon(0 0,100% 0,100% calc(50% - 10.63vw),0 calc(50% + 10.63vw + 1px));animation:wr-open-top var(--wr-duration) cubic-bezier(.65,0,.15,1) both}
.wr-shutter-bottom{clip-path:polygon(0 calc(50% + 10.63vw),100% calc(50% - 10.63vw - 1px),100% 100%,0 100%);animation:wr-open-bottom var(--wr-duration) cubic-bezier(.65,0,.15,1) both}
.wr-slash,.wr-spill{position:absolute;top:50%;left:-12%;width:124%;height:2px;transform-origin:50% 50%;background:linear-gradient(90deg,transparent 3%,#e3fb71 28%,#ffffe8 60%,#e3fb71 85%,transparent);animation:wr-cut var(--wr-duration) linear both}
.wr-slash{box-shadow:0 0 9px #e3fb7180,0 0 28px #fafad84d}
.wr-spill{height:42px;margin-top:-21px;filter:blur(19px);opacity:0;animation:wr-light-spill var(--wr-duration) linear both;mix-blend-mode:screen}
.wr-identity{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.65rem;padding:2rem;text-align:center;animation:none}
.wr-identity strong{font:600 clamp(1.6rem,3vw,2.8rem)/1.25 var(--sans);letter-spacing:.08em}
.wr-identity span{font:.8125rem/1.6 var(--mono);color:#b8c2c7;letter-spacing:.09em;text-transform:uppercase}
.wr-viewport{position:absolute;inset:clamp(1.2rem,4vw,3.5rem);border:1px solid #e3fb713b;animation:wr-viewport-pass var(--wr-duration) linear both}
.wr-view-title{position:absolute;left:1rem;top:.8rem;display:flex;gap:1rem;font:.75rem/1.5 var(--mono);color:#d4e8d1}
.wr-view-title>span:first-child{color:#aebbbc}
.wr-mode{display:grid;min-width:6rem}.wr-mode>span{grid-area:1/1;opacity:0}
.wr-mode>span:nth-child(1){animation:wr-label-wire var(--wr-duration) linear both}
.wr-mode>span:nth-child(2){animation:wr-label-unlit var(--wr-duration) linear both}
.wr-mode>span:nth-child(3){animation:wr-label-lit var(--wr-duration) linear both}
.wr-viewport-corner{position:absolute;left:1rem;bottom:.8rem;font:.75rem/1.5 var(--mono);color:#b8c9c2;letter-spacing:.08em}
.wr-boot .home-header,.wr-boot .hero-body,.wr-boot .hero-bottom{animation:wr-content-arrival var(--wr-duration) linear both}
.wr-filters{position:absolute;width:0;height:0;overflow:hidden}

@keyframes wr-dismiss{0%,85%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes wr-name-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes wr-name-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-7px)}}
@keyframes wr-cut{0%,18%{opacity:0;transform:rotate(-12deg) scaleX(0)}22%{opacity:.8;transform:rotate(-12deg) scaleX(.2)}32%,43%{opacity:1;transform:rotate(-12deg) scaleX(1)}58%,100%{opacity:0;transform:rotate(-12deg) scaleX(1.08)}}
@keyframes wr-light-spill{0%,28%{opacity:0;transform:rotate(-12deg) scaleX(.5)}43%{opacity:.36;transform:rotate(-12deg) scaleX(1)}66%,100%{opacity:0;transform:rotate(-12deg) scaleX(1.04)}}
@keyframes wr-open-top{0%,31%{transform:none}49%{transform:translateY(-5%)}80%,100%{transform:translateY(-105%)}}
@keyframes wr-open-bottom{0%,31%{transform:none}49%{transform:translateY(5%)}80%,100%{transform:translateY(105%)}}
@keyframes wr-wire-pass{0%,47%{opacity:1}62%,100%{opacity:0}}
@keyframes wr-material-pass{0%,46%{opacity:0}55%,61%{opacity:1}76%,100%{opacity:0}}
@keyframes wr-light{0%,55%{filter:brightness(.3) saturate(.4)}80%,100%{filter:brightness(1) saturate(1)}}
@keyframes wr-viewport-pass{0%,28%{opacity:0;transform:scale(.98)}40%,67%{opacity:.8;transform:scale(1)}85%,100%{opacity:0;transform:scale(1.05)}}
@keyframes wr-label-wire{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes wr-label-unlit{0%,49%{opacity:0}50%,66%{opacity:1}67%,100%{opacity:0}}
@keyframes wr-label-lit{0%,66%{opacity:0}67%,100%{opacity:1}}
@keyframes wr-content-arrival{0%,70%{opacity:0}100%{opacity:1}}

/* Hold the identity for one extra second; retain the original cut/reveal speed. */
.wr-boot .world-reveal,.world-reveal *,.wr-boot .home-header,.wr-boot .hero-body,.wr-boot .hero-bottom{animation-delay:var(--wr-hold)}
.world-reveal .wr-identity{animation:wr-name-in calc(var(--wr-duration) * .08) linear both,wr-name-out calc(var(--wr-duration) * .12) linear calc(var(--wr-hold) + var(--wr-duration) * .22) forwards}

@media(max-width:800px){
  .wr-boot{--wr-duration:1050ms}
  .world-reveal{--wr-duration:1050ms}
  .wr-world{height:100svh}
  .wr-world img{object-position:55% center;transform:none}
  .wr-wire img{filter:grayscale(1) contrast(1.8) brightness(.5)}
  .wr-spill,.wr-viewport{display:none}
  .wr-identity{padding:1.25rem;gap:.6rem}
  .wr-identity strong{font-size:clamp(1.4rem,6vw,2rem)}
  .wr-identity span{font-size:.75rem;max-width:270px}
  .wr-boot .home-header,.wr-boot .hero-body,.wr-boot .hero-bottom{animation:none}
}
@media(prefers-reduced-motion:reduce){.wr-boot .world-reveal{display:none!important}.wr-boot .home-header,.wr-boot .hero-body,.wr-boot .hero-bottom{animation:none!important}}
@media print{.world-reveal{display:none!important}}