/* Progressive, accessible cinematic experience shared by the purple main site and green-and-gold Campus site. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ggs-page-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:ggs-page-in .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes ggs-page-out{to{opacity:0;transform:scale(.992)}}
@keyframes ggs-page-in{from{opacity:0;transform:translateY(8px) scale(1.006)}to{opacity:1;transform:none}}

.js-effects .cinematic-photo{--tilt-x:0deg;--tilt-y:0deg;position:relative;isolation:isolate;overflow:hidden;transform:perspective(1200px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(0);transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.7,.2,1),box-shadow .42s ease}
.js-effects .cinematic-photo img{transition:filter 1.05s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.js-effects .cinematic-photo:not(.is-photo-visible) img{filter:saturate(.58) contrast(.92) brightness(.78);transform:scale(1.035)}
.js-effects .cinematic-photo.is-photo-visible img{filter:saturate(1) contrast(1) brightness(1);transform:scale(1)}
.js-effects .cinematic-photo.is-archive-photo img,
.js-effects .cinematic-photo.is-archive-photo:not(.is-photo-visible) img{filter:grayscale(1) sepia(.22) contrast(1.06) brightness(.88)}
.js-effects .cinematic-photo::after{content:"";position:absolute;top:-28%;bottom:-28%;left:-52%;z-index:3;width:38%;background:linear-gradient(90deg,transparent,rgba(255,244,210,.08) 15%,rgba(255,235,183,.58) 50%,rgba(255,250,231,.12) 84%,transparent);opacity:0;pointer-events:none;transform:translateX(-160%) rotate(10deg);will-change:transform,opacity}
.js-effects .cinematic-photo.is-photo-visible::after{animation:ggs-light-sweep 1.25s cubic-bezier(.2,.7,.2,1) .12s 1 both}
.js-effects .cinematic-photo figure,
.js-effects .cinematic-photo figcaption,
.js-effects figure.cinematic-photo figcaption{position:relative;z-index:4}
@keyframes ggs-light-sweep{0%{opacity:0;transform:translateX(-160%) rotate(10deg)}18%{opacity:.72}72%{opacity:.34}100%{opacity:0;transform:translateX(520%) rotate(10deg)}}

@media(hover:hover) and (pointer:fine){
  .js-effects .cinematic-photo.is-photo-visible:hover,
  .js-effects .cinematic-photo.is-photo-visible:focus-within{box-shadow:0 30px 86px rgba(45,18,56,.2),0 0 0 1px rgba(225,189,120,.5);transform:perspective(1200px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(-5px)}
  .js-effects .cinematic-photo.is-tilting{transition:box-shadow .3s ease}
}

.js-effects .reveal-ready{opacity:0;transform:translateY(24px);transition:opacity .72s ease var(--reveal-delay,0ms),transform .82s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.js-effects .reveal-ready.reveal-from-left{transform:translate3d(-18px,18px,0)}
.js-effects .reveal-ready.reveal-from-right{transform:translate3d(18px,18px,0)}
.js-effects .reveal-ready.is-visible{opacity:1;transform:none}

.js-effects .cinematic-portal{position:relative;isolation:isolate}
.js-effects .cinematic-portal::before{content:"";position:absolute;inset:clamp(12px,2vw,26px);z-index:3;border:1px solid rgba(240,201,129,.88);border-radius:clamp(14px,2vw,24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 46px rgba(240,201,129,.16);opacity:0;pointer-events:none;transform:scale(.975);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-effects .cinematic-portal.is-portal-visible::before{opacity:1;transform:scale(1)}
.js-effects .cinematic-portal>picture img,
.js-effects .cinematic-portal>img{transition:filter 1s ease,opacity .7s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js-effects .cinematic-portal:not(.is-portal-visible)>picture img,
.js-effects .cinematic-portal:not(.is-portal-visible)>img{filter:saturate(.72) contrast(.94) brightness(.82);transform:scale(1.04)}
.js-effects .cinematic-portal.is-portal-visible>picture img,
.js-effects .cinematic-portal.is-portal-visible>img{transform:scale(1.012)}
.campus-gateway .campus-entry,
.campus-bridge .campus-button{overflow:hidden;isolation:isolate}
.campus-gateway .campus-entry::after,
.campus-bridge .campus-button::before{content:"";position:absolute;top:-70%;bottom:-70%;left:-38%;z-index:1;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);opacity:0;pointer-events:none;transform:translateX(-180%) rotate(14deg)}
.cinematic-portal.is-portal-visible .campus-entry::after,
.cinematic-portal.is-portal-visible .campus-button::before{animation:ggs-action-glint 1s cubic-bezier(.2,.7,.2,1) .8s 1 both}
.campus-gateway .campus-action-label,
.campus-bridge .campus-action-label{position:relative;z-index:2;font:inherit}
@keyframes ggs-action-glint{0%{opacity:0;transform:translateX(-180%) rotate(14deg)}22%{opacity:.78}100%{opacity:0;transform:translateX(560%) rotate(14deg)}}

@media(max-width:700px){
  .js-effects .cinematic-photo{--tilt-x:0deg!important;--tilt-y:0deg!important}
  .js-effects .cinematic-photo.is-photo-visible:hover,
  .js-effects .cinematic-photo.is-photo-visible:focus-within{transform:none}
  .js-effects .reveal-ready.reveal-from-left,
  .js-effects .reveal-ready.reveal-from-right{transform:translateY(18px)}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .js-effects .cinematic-photo,.js-effects .cinematic-photo img,.js-effects .cinematic-portal,.js-effects .cinematic-portal>picture img,.js-effects .cinematic-portal>img,.js-effects .reveal-ready{opacity:1!important;filter:none!important;transform:none!important;transition:none!important;animation:none!important}
  .js-effects .cinematic-photo.is-archive-photo img{filter:grayscale(1) sepia(.22) contrast(1.06) brightness(.88)!important}
  .js-effects .cinematic-photo::after,.js-effects .cinematic-portal::before,.campus-gateway .campus-entry::after,.campus-bridge .campus-button::before{display:none!important}
}
