/* === MOTION (screen only) ===
   Each rule is a "before" state (.slide:not(.visible) ...) or a transition towards the
   resting look in theme.css. --d is the entrance delay that prepare.js gives each element. */
:root{--spring:cubic-bezier(.3,1.12,.6,1);--swift:cubic-bezier(.65,0,.35,1)}

/* --- stage atmosphere: a soft light that drifts between slides + fine film grain --- */
.deck-stage::before{content:"";position:absolute;left:-900px;top:-900px;width:1800px;height:1800px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,124,123,.11),rgba(14,124,123,0));
  transform:translate(var(--gx,1500px),var(--gy,300px));transition:transform 2.6s var(--ease)}
.deck-stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .25 0 0 0 0 .25 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- slide swap: the old slide drifts away in the direction of travel --- */
.slide{transition:opacity .6s var(--ease),translate .9s var(--ease),visibility 0s linear .9s}
.slide.active{transition:opacity .6s var(--ease),translate .9s var(--ease),visibility 0s}
.slide.leaving{visibility:visible;translate:-80px 0}
.slide.leaving.back{translate:80px 0}
.slide.leaving *,.slide.leaving *::before,.slide.leaving *::after{transition-duration:.45s!important;transition-delay:0s!important;transition-timing-function:var(--swift)!important}

/* --- text: fade-up, masked heading lines, drawn underlines --- */
.reveal{transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.slide:not(.visible) .reveal:not(.card):not(.lines){opacity:0;transform:translateY(32px)}
.slide:not(.visible) .top.reveal{transform:none}
.ln{overflow:hidden;padding:.1em 0 .18em;margin:-.1em 0 -.18em}
.ln>span{display:inline-block;transform-origin:0 100%;transition:transform 1.15s var(--ease) var(--d,0s)}
.slide:not(.visible) .ln>span{transform:translateY(112%) rotate(3deg)}
h1 i,h2 i{transition:background-size 1.3s var(--ease) calc(var(--d,0s) + .5s)}
.slide:not(.visible) h1 i,.slide:not(.visible) h2 i{background-size:0 .03em}
.coords{transition:clip-path 1.5s steps(19,end) calc(var(--d,0s) + .4s)}
.slide:not(.visible) .coords{clip-path:inset(0 100% 0 0)}

/* --- lists: points slide in, dashes and rules draw, bold words get a marker stroke --- */
.slide li{transition:opacity .8s var(--ease) var(--d,0s),translate 1s var(--ease) var(--d,0s),background-size 1.4s var(--ease) var(--d,0s)}
.slide:not(.visible) li{opacity:0;translate:-28px 0;background-size:0 1px}
li::before{transition:scale .9s var(--ease) calc(var(--d,0s) + .1s),opacity .9s var(--ease) calc(var(--d,0s) + .1s)}
.slide:not(.visible) li::before{scale:0 1}
.slide:not(.visible) ol.steps li::before{scale:.3;opacity:0}
li b{transition:background-size 1s var(--ease) calc(var(--d,0s) + .55s)}
.slide:not(.visible) li b{background-size:0 .42em}

/* --- photos: dropped onto the page like prints, frame settles, slow drift --- */
.card.b,.card.d{--k:-1}
.card.b{--o:70% 30%}.card.c{--o:30% 65%}.card.d{--o:60% 55%}
.card{transition:opacity .8s var(--ease) var(--d,0s),translate 1.3s var(--spring) var(--d,0s),rotate 1.3s var(--spring) var(--d,0s),scale 1.3s var(--spring) var(--d,0s),box-shadow .5s var(--ease)}
.slide:not(.visible) .card{opacity:0;translate:0 100px;scale:1.08;rotate:calc(var(--r,0deg) + 5deg * var(--k,1))}
.tech .card{transition-timing-function:var(--ease)}
.slide.tech:not(.visible) .card{translate:0 40px;scale:1;rotate:0deg}
.slide.tech:not(.visible) .card::before{rotate:0deg;scale:.96}
.card::before{transition:opacity 1s var(--ease) calc(var(--d,0s) + .35s),rotate 1.6s var(--ease) calc(var(--d,0s) + .35s),scale 1.6s var(--ease) calc(var(--d,0s) + .35s)}
.slide:not(.visible) .card::before{opacity:0;rotate:0deg;scale:.9}
.pic img{transform-origin:var(--o,50% 40%);transition:scale 1.2s var(--ease),filter 2.8s cubic-bezier(.4,0,.2,1) calc(var(--d,0s) + .5s)}
.slide.visible:not(.tech):not(.closing) .pic img,.slide.leaving:not(.tech):not(.closing) .pic img{animation:drift 20s cubic-bezier(.3,0,.3,1) var(--d,0s) both}
@keyframes drift{from{transform:scale(1.001)}to{transform:scale(1.1)}}
.slide:not(.visible) .develop img{filter:sepia(.85) saturate(.35) brightness(1.5) contrast(.7) blur(3px)}
.slide.visible .card:not(.ph){cursor:zoom-in}
.slide.visible .card:not(.ph):hover{box-shadow:0 48px 90px rgba(18,64,63,.34)}
.slide.visible:not(.tech) .card:not(.ph):hover .pic img{scale:1.035}

/* --- background numeral rises slowly (depth), golden spiral draws itself --- */
.slide::after{transition:translate 2.2s var(--ease) .1s,opacity 1.6s var(--ease) .1s}
.slide:not(.visible)::after{translate:0 140px;opacity:0}
.spiral .arc{transition:stroke-dashoffset 3.4s cubic-bezier(.45,0,.2,1) .5s}
.spiral .sq{transition:opacity 1.6s var(--ease) .3s}
.slide:not(.visible) .spiral .arc{stroke-dashoffset:1}
.slide:not(.visible) .spiral .sq{opacity:0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}}