/* The cards move through depth as a carousel, rather than tilting on hover. */
.project-viewport{height:520px;overflow:visible;position:relative;perspective:1500px;perspective-origin:50% 45%;scroll-snap-type:none;touch-action:pan-y;cursor:grab;isolation:isolate}
.project-track{position:relative;display:block;height:100%;padding:0;transform-style:preserve-3d;--spread:clamp(200px,25vw,315px)}
.project-card{position:absolute;top:50%;left:50%;width:min(52%,550px);height:410px;min-height:0;padding:30px;overflow:hidden;isolation:auto;flex:none;backface-visibility:hidden;transform-origin:50% 50%;background:linear-gradient(140deg,#0b3461,#06182f);border:1px solid #8fb5eb44;border-radius:16px;box-shadow:0 24px 55px #0005;transition:transform .85s cubic-bezier(.22,.7,.2,1),opacity .65s ease,filter .85s ease,border-color .6s;will-change:transform;transform:translate(-50%,-50%) translateZ(-500px);opacity:0;pointer-events:none}
.project-card:before{content:attr(data-number);position:absolute;right:25px;top:55px;font-size:150px;line-height:1;color:#83b4ff08;z-index:0;pointer-events:none}
.project-card:after{display:none}
.project-card>*{position:relative;transform:none!important}
.project-card[data-slot="0"]{transform:translate(-50%,-50%) translateZ(85px) rotateY(0deg);opacity:1;filter:brightness(1);border-color:#aacfff70;z-index:5;pointer-events:auto;cursor:default}
.project-card[data-slot="-1"]{transform:translate(-50%,-50%) translateX(calc(-1 * var(--spread))) translateZ(-165px) rotateY(43deg);opacity:.7;filter:brightness(.65);z-index:4;pointer-events:auto;cursor:pointer}
.project-card[data-slot="1"]{transform:translate(-50%,-50%) translateX(var(--spread)) translateZ(-165px) rotateY(-43deg);opacity:.7;filter:brightness(.65);z-index:4;pointer-events:auto;cursor:pointer}
.project-card[data-slot="-2"]{transform:translate(-50%,-50%) translateX(calc(-1.7 * var(--spread))) translateZ(-380px) rotateY(57deg);opacity:.25;filter:brightness(.45);z-index:2}
.project-card[data-slot="2"]{transform:translate(-50%,-50%) translateX(calc(1.7 * var(--spread))) translateZ(-380px) rotateY(-57deg);opacity:.25;filter:brightness(.45);z-index:2}
.project-card[data-slot="-3"]{transform:translate(-50%,-50%) translateX(calc(-2 * var(--spread))) translateZ(-550px) rotateY(70deg);opacity:0;z-index:1}
.project-card[data-slot="3"]{transform:translate(-50%,-50%) translateX(calc(2 * var(--spread))) translateZ(-550px) rotateY(-70deg);opacity:0;z-index:1}
.project-card:hover{box-shadow:0 24px 55px #0005}
.project-card-top .school{background:#ffffff08;border-color:#ffffff25;box-shadow:none}
.project-card h3{font-size:26px;text-shadow:none;line-height:1.6}
.project-card .project-description{font-size:12px}
.project-bottom{position:relative;margin-top:20px;z-index:6}
@media(max-width:850px){.project-viewport{height:480px;perspective:1200px}.project-track{--spread:clamp(180px,30vw,245px)}.project-card{width:70%;height:385px;min-height:0;padding:27px}.project-card h3{font-size:24px}}
@media(max-width:500px){.project-viewport{height:475px;perspective:1000px}.project-track{--spread:165px}.project-card{width:84%;height:390px;padding:22px}.project-card h3{font-size:21px}.project-card-top{gap:10px}.project-card-top .school{font-size:11px;padding:8px 10px}.project-number{font-size:9px!important}.project-category{font-size:8px;margin-top:28px}.project-card[data-slot="0"]{transform:translate(-50%,-50%) translateZ(30px)}.project-card[data-slot="1"]{transform:translate(-50%,-50%) translateX(var(--spread)) translateZ(-200px) rotateY(-48deg)}.project-card[data-slot="-1"]{transform:translate(-50%,-50%) translateX(calc(-1 * var(--spread))) translateZ(-200px) rotateY(48deg)}}