/* Adapted from MotionSites' free Space Voyage prompt: portal, staggered reveals,
   pointer perspective and immersive transitions, using ASU's own artwork. */
.hero{min-height:calc(100svh - 100px);padding-top:85px;padding-bottom:110px;isolation:isolate;background:radial-gradient(ellipse at 70% 50%,#265ba650,transparent 60%),#101b35}
.hero:after{content:'19';position:absolute;right:1%;bottom:-.23em;font:500 clamp(240px,44vw,650px)/1 Georgia,serif;color:#d5b47d05;z-index:-1;pointer-events:none}
.hero-copy{animation:motion-rise 1.1s cubic-bezier(.22,1,.36,1) both}.hero h1{font-size:clamp(44px,4.7vw,75px);line-height:1.12}.hero .intro{animation:motion-rise .9s .2s both}.hero .actions{animation:motion-rise .9s .35s both}.hero .event-meta{animation:motion-rise .9s .5s both}
.official-graduation{perspective:1000px;animation:motion-rise 1.3s .15s both}.official-graduation:before{display:none}.official-graduation>img{display:none}.official-graduation>figcaption{margin-top:24px}
.ceremony-portal{display:block;position:relative;width:100%;padding:0;border:1px solid #e2bc7577;border-radius:42% 42% 22px 22px;overflow:hidden;aspect-ratio:1/1.05;cursor:pointer;background:#152444;box-shadow:0 40px 100px #0006,0 0 80px #d4b2710c;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .5s;isolation:isolate;animation:portal-reveal 1.4s cubic-bezier(.16,1,.3,1) both}
.ceremony-portal>img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;transform:scale(1.08);transition:transform 1s}.ceremony-portal:hover>img{transform:scale(1.14)}.ceremony-portal:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#071127dd);pointer-events:none}
.portal-caption{position:absolute;bottom:24px;left:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:center;color:#fff;gap:7px}.portal-caption small{font-size:8px;letter-spacing:3px;color:#ead4a9}.portal-caption strong{font-size:13px;font-weight:500;letter-spacing:.5px}.portal-arrow{width:30px;height:30px;border:1px solid #dfbd7b77;border-radius:50%;display:grid;place-items:center;color:#e9c986}
.motion-stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.motion-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#8a6631,#ffe5b0);z-index:50;pointer-events:none}
.portal-wash{position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(ellipse at center,#d6b47a,#132444 72%);clip-path:circle(0% at 65% 50%);opacity:0}.portal-wash.travelling{animation:portal-travel .95s cubic-bezier(.65,0,.35,1) both}
.timeline article{transition:transform .5s,opacity .5s;transition-delay:calc(var(--order,0)*90ms)}.day:not(.visible) .timeline article{transform:translateY(25px);opacity:0}.timeline article:hover{transform:translateY(-7px)}.timeline article>span{display:inline-block;transition:transform .5s}.timeline article:hover>span{transform:translateX(5px)}
.reveal{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}.button{position:relative;overflow:hidden}.button:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff4 50%,transparent 80%);transform:translateX(-150%);transition:transform .7s}.button:hover:after{transform:translateX(150%)}
@keyframes motion-rise{from{opacity:0;filter:blur(8px);transform:translateY(30px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes portal-reveal{from{clip-path:inset(20% 15% round 45%);opacity:0}to{clip-path:inset(0 round 0);opacity:1}}
@keyframes portal-travel{0%{clip-path:circle(0% at 65% 50%);opacity:0}40%{clip-path:circle(130% at 65% 50%);opacity:1}65%{clip-path:circle(130% at 65% 50%);opacity:1}100%{clip-path:circle(130% at 65% 50%);opacity:0}}
@media(max-width:900px){.hero h1{font-size:45px}.ceremony-portal{border-radius:42% 42% 18px 18px}}
@media(max-width:650px){.hero{padding-top:50px;padding-bottom:60px;gap:35px;min-height:auto}.hero h1{font-size:43px}.ceremony-portal{max-width:380px;margin:auto;aspect-ratio:1/1.02}.official-graduation>figcaption{font-size:7px;letter-spacing:1.5px}.portal-caption{bottom:18px}.event-meta{margin-top:32px}.hero:after{bottom:15%;font-size:430px}.motion-stars{opacity:.6}}
@media(prefers-reduced-motion:reduce){.hero-copy,.hero .intro,.hero .actions,.hero .event-meta,.official-graduation,.ceremony-portal{animation:none;filter:none;opacity:1;transform:none}.portal-wash{display:none}.ceremony-portal>img{transform:none!important}.day:not(.visible) .timeline article{opacity:1;transform:none}.motion-stars{display:none}}

.ceremony-portal{aspect-ratio:auto;border-radius:28px}.ceremony-portal>img{height:auto;object-fit:contain;transform:none}.ceremony-portal:hover>img{transform:none}.portal-caption{position:relative;bottom:auto;padding:20px 12px;background:#10203c;border-top:1px solid #e2bc7533}.ceremony-portal:after{display:none}@media(max-width:650px){.ceremony-portal{aspect-ratio:auto;border-radius:22px}.portal-caption{bottom:auto;padding:16px 10px}}