@property --prg{syntax:"<number>";inherits:true;initial-value:0}@property --out{syntax:"<number>";inherits:true;initial-value:0}@property --hov{syntax:"<number>";inherits:true;initial-value:0}@property --x{syntax:"<length>";inherits:true;initial-value:0}@property --y{syntax:"<length>";inherits:true;initial-value:0}.eo-root{margin:0}.eo-root *{box-sizing:border-box;margin:0}.eo-root,.eo-root header,.eo-root main,.eo-root footer,.eo-root figure,.eo-root em{display:grid}.eo-root{background:#1b1512;overflow:clip;container-type:inline-size}.eo-root{--y:30vh;--x:100cqw;--out:round(up, var(--prg));--max:Min(30deg, atan2(var(--y), var(--x)));--ang:calc(var(--max)*(1 - 2*var(--prg)));--tan:tan(abs(var(--ang)));--sgn:sign(var(--ang));--bit:calc(.5*(var(--sgn) + 1));--dy:calc(100cqw*var(--tan));filter:drop-shadow(1px 2px 3px #0009);font-family:genos,sans-serif;animation:1s linear eo-prg;animation-timeline:scroll()}@supports not (scale:abs(-2)){.eo-root{--tan:tan(max(var(--ang), -1*var(--ang)))}}@supports not (scale:sign(-2)){.eo-root{--sgn:clamp(-1, tan(var(--ang))*10000, 1)}}@supports (animation-timeline:scroll()){@keyframes eo-prg{to{--prg:1}}}.eo-root header,.eo-root footer{--dy0:(1 - var(--bit))*var(--dy);--dy1:var(--bit)*var(--dy);grid-gap:2em;height:100vh;height:calc(100dvh + .5*var(--dy));color:#f2e9e4;text-align:center;text-wrap:balance;background:#2a1f19;place-content:center;padding:2rem}.eo-root header{padding-bottom:var(--dy);clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--dy0)), 0 calc(100% - var(--dy1)));transition:--out 1s ease-out, --hov calc(var(--hov)*6s) linear}.eo-root header:hover{--hov:1}.eo-root h1,.eo-root em{translate:0 calc(var(--prg)*300vh);opacity:calc(1 - var(--out));filter:blur(calc(var(--out)*8px)) url(#eo-dissolve)}.eo-root h1{justify-self:center;max-width:12em;font-size:clamp(2.5rem,6vw,5rem);font-weight:500}.eo-root em{color:#f7b538;letter-spacing:calc(.25em*(1 - cos(var(--hov)*3turn)));justify-self:center;place-items:center;font-style:normal}.eo-root em:after{translate:0 calc(50%*(1 - cos(var(--hov)*3turn)));content:"";border:3px solid #f7b538;border-width:0 3px 3px 0;padding:.5em;rotate:45deg}.eo-root main{grid-gap:.5em;margin:calc(-.5*var(--dy)) 0;transform:skewY(var(--ang));z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(100%,16em),1fr));padding:.5em;position:relative}@media (max-width:640px){.eo-root main{grid-template-columns:1fr}.eo-root figure{aspect-ratio:4/3}.eo-root h1{font-size:clamp(2rem,10vw,3rem)}}.eo-root figure{aspect-ratio:5/2;clip-path:inset(1px round 4px);grid-template:100%/100%;place-items:center end;transition:--hov .35s,background-color .35s;overflow:hidden;container-type:size}:hover>:is(.eo-root figure){background:rgba(0,0,0, calc(1 - var(--hov)))}.eo-root figure:hover,.eo-root figure:focus-within{--hov:1}.eo-root img,.eo-root figcaption{grid-area:1/1}.eo-root img{width:100%;height:calc(100cqh + 100cqw*var(--tan));object-fit:cover;transform:skewY(calc(-1*var(--ang))) scale(calc(1 + .25*var(--hov)));mix-blend-mode:luminosity;transition:filter}.eo-root figcaption{z-index:2;opacity:var(--hov);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#1b1512;background:#fff6;padding:0 .5em;font:max(.625em,.625rem,4.5cqw)/2 sans-serif}.eo-root footer{padding-top:var(--dy);clip-path:polygon(100% 100%, 0 100%, 0 calc(var(--dy0)), 100% calc(var(--dy1)))}.eo-root b{color:#f7b538;text-shadow:1px 1px 2px #000;font-family:tangerine,cursive;font-size:3.5em;font-weight:700}.eo-root footer p{color:#f2e9e4b3;justify-self:center;max-width:32em}.eo-root footer a{color:#f7b538}.eo-root footer a:is(:focus,:hover){color:#7dd3fc}.eo-root .eo-fallback-note{color:#fff;text-align:left;background:#851d40;border-left:5px solid #dc3055;max-width:32em;margin:1em auto;padding:1em;font:1rem/1.4 sans-serif}@supports (animation-timeline:scroll()){.eo-root .eo-fallback-note{display:none}}
