/* interact: styles for js/fx/interact.js */

/* header: scroll progress, scrollspy underline, hide on scroll */
#hd{transition:background .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
#hd.ix-hide{transform:translateY(calc(-100% - 2px))}
.ix-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--aqua);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.ix-ul{position:absolute;left:0;top:0;width:1px;height:2px;background:var(--aqua);transform-origin:0 0;opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.ix-ul.on{opacity:1}.ix-ul.nt{transition:opacity .3s}
@media(max-width:860px){.ix-ul{display:none}#nl.open a.ix-on{color:var(--aqua)}}

/* mobile menu: open and close */
@media(max-width:860px) and (prefers-reduced-motion:no-preference){
#nl.open{animation:ix-menu-in .28s cubic-bezier(.2,.7,.2,1) both}
#nl.open li{animation:ix-li-in .34s cubic-bezier(.2,.7,.2,1) both}
#nl.open li:nth-child(2){animation-delay:.03s}#nl.open li:nth-child(3){animation-delay:.06s}#nl.open li:nth-child(4){animation-delay:.09s}
#nl.ix-closing{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:#050708f2;padding:8px clamp(20px,4vw,48px) 20px;border-bottom:1px solid #ffffff14;pointer-events:none;animation:ix-menu-out .18s ease-in both}
#nl.ix-closing a{display:block;padding:14px 0;border-bottom:1px solid #ffffff12;font-size:18px}
}
@keyframes ix-menu-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes ix-menu-out{from{opacity:1;clip-path:inset(0 0 0 0)}to{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes ix-li-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}

/* hero cards: tilt, glare, image parallax; keyboard focus gets the same lift */
.cards.ix-3d{perspective:1100px}
.card:after{z-index:3}
.card img{translate:calc(var(--ix-mx,0) * -6px) calc(var(--ix-my,0) * -6px)}
.ix-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--ix-ga,0);background:radial-gradient(circle at var(--ix-gx,50%) var(--ix-gy,30%),#ffffff3d 0%,#85e0ed17 30%,transparent 62%);mix-blend-mode:screen;transition:opacity .45s}
.card.ix-hot .ix-glare{transition:none}
.card.ix-hot,.card:focus-visible{box-shadow:0 36px 60px -32px #000,0 0 0 1px #85e0ed40}
.card:focus-visible{animation:ix-lift .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes ix-lift{from{translate:none}to{translate:0 -4px}}
.card:focus-visible:after{transform:scaleX(1)}
.card:focus-visible img{transform:scale(1.04)}
.card:focus-visible .ix-glare{opacity:1;--ix-gx:50%;--ix-gy:0%}

/* buttons: the arrow nudges on hover and keyboard focus */
.btn>span[aria-hidden="true"]{display:inline-block;transition:translate .3s cubic-bezier(.2,.7,.2,1)}
.btn:focus-visible>span[aria-hidden="true"]{translate:4px 0}
@media(hover:hover) and (pointer:fine){.btn:hover>span[aria-hidden="true"]{translate:4px 0}}

@media(prefers-reduced-motion:reduce){
#hd.ix-hide{transform:none}
.ix-ul,.ix-glare,.btn>span[aria-hidden="true"]{transition:none}
.card:focus-visible{animation:none}
.btn:hover>span[aria-hidden="true"],.btn:focus-visible>span[aria-hidden="true"]{translate:none}
}