/* Depth effects remain optional and never hide page content. */
.hero{overflow:hidden}.hero>img{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.08)}
.depth-reveal{transition:opacity .75s ease,translate .75s cubic-bezier(.2,.7,.2,1)}
.depth-reveal.is-waiting{opacity:.12;translate:0 24px}
.card{perspective:1000px}.card .photo{position:relative;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .32s ease,box-shadow .32s ease;box-shadow:0 12px 24px -24px #191b1855;border-radius:3px}
.card .photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,30%),#ffffff30,transparent 65%);opacity:0;transition:opacity .3s}
@media(hover:hover) and (pointer:fine){html.motion-on .card:hover .photo{box-shadow:0 22px 30px -20px #191b1866}html.motion-on .card:hover .photo::after{opacity:1}}
.button{transition:translate .2s,box-shadow .2s}html.motion-on .button:hover{translate:0 -2px;box-shadow:0 7px 18px #0002}
.motion-toggle{position:fixed;bottom:14px;left:14px;z-index:10;padding:10px 14px;min-height:44px;border:1px solid #c8bba8;border-radius:24px;background:#191b18ed;color:#f4f0e8;font-size:11px;cursor:pointer;box-shadow:0 3px 16px #0002}
html:not(.motion-on) .hero>img{transform:none}html:not(.motion-on) .card .photo{transform:none}
@media(prefers-reduced-motion:reduce){.depth-reveal,.card .photo,.button{transition:none}.depth-reveal.is-waiting{opacity:1;translate:none}.hero>img{transform:none!important}}

/* A cinematic opening and automatic depth on touchscreens. */
.hero{perspective:1100px}.hero>img{backface-visibility:hidden}
html.motion-on .hero.motion-visible>img{animation:maovra-arrive 2.4s cubic-bezier(.16,.65,.24,1) both,maovra-drift 12s 2.4s ease-in-out infinite alternate;will-change:transform}
@keyframes maovra-arrive{from{transform:perspective(1100px) translate3d(-35px,15px,0) rotateY(-9deg) rotateZ(-2deg) scale(1.46);filter:brightness(.65)}to{transform:perspective(1100px) translate3d(18px,var(--hero-shift,0px),0) rotateY(3deg) rotateZ(.6deg) scale(1.18);filter:brightness(1)}}
@keyframes maovra-drift{0%{transform:perspective(1100px) translate3d(18px,var(--hero-shift,0px),0) rotateY(3deg) rotateZ(.6deg) scale(1.18)}50%{transform:perspective(1100px) translate3d(-22px,calc(var(--hero-shift,0px) - 12px),0) rotateY(-3deg) rotateZ(-.6deg) scale(1.23)}100%{transform:perspective(1100px) translate3d(12px,calc(var(--hero-shift,0px) + 8px),0) rotateY(2deg) rotateZ(.4deg) scale(1.19)}}
.hero:before{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 36%,#f2c18420 48%,transparent 60%);mix-blend-mode:screen}
html.motion-on .hero.motion-visible:before{animation:maovra-light 9s 1s ease-in-out infinite}
@keyframes maovra-light{0%,100%{transform:translateX(-28%) rotate(-8deg);opacity:0}30%,65%{opacity:1}80%{transform:translateX(30%) rotate(8deg);opacity:0}}
html.motion-on .hero-content>div:first-child{animation:maovra-title 1.6s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes maovra-title{from{opacity:0;transform:perspective(900px) translate3d(0,75px,-160px) rotateX(12deg)}to{opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0)}}
html.motion-on .hero-aside{padding:22px;border:1px solid #ffffff36;background:#191b1838;backdrop-filter:blur(7px);box-shadow:0 22px 45px #0003;animation:maovra-label 5s ease-in-out infinite alternate}
@keyframes maovra-label{from{transform:perspective(700px) translateY(0) rotateY(-7deg)}to{transform:perspective(700px) translateY(-18px) rotateY(7deg)}}
.depth-reveal{transition:opacity 1s ease,translate 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.depth-reveal.is-waiting{opacity:.08;translate:0 65px;transform:perspective(1000px) rotateX(9deg) scale(.94)}
.card .photo{box-shadow:0 18px 28px -20px #191b1877}
html.motion-on .card.motion-visible .photo{animation:maovra-card 6s ease-in-out infinite alternate;animation-delay:var(--float-delay,0s)}
@keyframes maovra-card{from{transform:perspective(950px) translateY(0) rotateX(2deg) rotateY(-3deg)}to{transform:perspective(950px) translateY(-10px) rotateX(-2deg) rotateY(3deg);box-shadow:0 25px 35px -19px #191b1880}}
@media(hover:hover) and (pointer:fine){html.motion-on .card.motion-visible:hover .photo{animation:none;transform:perspective(900px) translateY(-10px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.035);box-shadow:0 28px 35px -18px #191b1899}}
html:not(.motion-on) .hero:before{animation:none;opacity:0}
@media(max-width:750px){html.motion-on .hero.motion-visible>img{animation-name:maovra-arrive,maovra-drift}.hero h1{text-shadow:0 4px 24px #0005}}
@media(prefers-reduced-motion:reduce){html.motion-on .hero.motion-visible>img,html.motion-on .hero.motion-visible:before,html.motion-on .hero-content>div:first-child,html.motion-on .hero-aside,html.motion-on .card.motion-visible .photo{animation:none;will-change:auto}.depth-reveal{transition:none}.depth-reveal.is-waiting{transform:none}}