main{padding:0;align-items:center;justify-content:center;@media(min-width:1000px){margin-left: 0; margin-right: 0;}article { z-index: 3; animation: article-slide-up 1.6s cubic-bezier(0, 0.8, 0.2, 1) both; padding: var(--spacing-sm) var(--spacing-lg); min-width: 90vw; margin-top: 0; text-align: center; flex-shrink: 1; @media (min-width: 1000px) { border-radius: 0 !important; border-left: none; border-right: none; } & h1 { width: 100%; text-align: center; text-transform: capitalize; @media (max-width: 1000px) { width: 90%; } & span { display: inline-block; position: relative; opacity: 0; } } &.animate { & h1 span { animation: fall-and-tilt 1s cubic-bezier(0, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--h1-span-animation-delay) + 0.5s); &:nth-child(1) { --h1-span-animation-delay: 0s; } &:nth-child(2) { --h1-span-animation-delay: 0.1s; } &:nth-child(3) { --h1-span-animation-delay: 0.2s; } &:nth-child(4) { --h1-span-animation-delay: 0.3s; } &:nth-child(5) { --h1-span-animation-delay: 0.4s; } } & p { animation: fade-in-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 1s; } & .card-container .tilt-card-wrapper { animation: card-fade-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; &:nth-child(1) { animation-delay: 1.2s; } &:nth-child(2) { animation-delay: 1.3s; } &:nth-child(3) { animation-delay: 1.4s; } } } & p { opacity: 0; } & .card-container { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 2rem; flex-wrap: nowrap; margin: 2rem; @media (max-width: 1200px) { flex-direction: column; } & .tilt-card-wrapper { flex: 1 1 0; display: flex; opacity: 0; & .tilt-card { background: rgba(14, 14, 14, 0.6); color: var(--color-fg, #fff); border-radius: 1.2rem; padding: 2rem 2.5rem; max-width: 100%; max-height: 200px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.3s; text-align: center; border: 2px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; justify-content: center; align-items: center; transform-style: preserve-3d; opacity: 1; flex: 1 1 0; min-width: 220px; min-height: 200px; box-sizing: border-box; @media (max-width: 1200px) { height: clamp(90px, 10vh, 120px); padding: 0.7rem 1rem; box-shadow: none; transform: none !important; min-height: 150px; } &:hover { border-color: var(--color-accent, #00ffd0); box-shadow: 0 8px 32px 0 rgba(0, 255, 208, 0.1); transform: perspective(1000px) scale(1.025); & .tilt-card-title { color: #fff; transform: translateZ(100px) scale(1.07); } } &:hover, &:focus { text-decoration: none !important; @media (pointer: coarse) { border-color: var( --color-accent, #00ffd0 ) !important; box-shadow: none !important; transform: none !important; color: inherit !important; } } & .tilt-card-title { will-change: transform; transition: transform 0.2s, color 0.2s; transform: translateZ(50px); font-size: 3rem; font-weight: 700; color: var(--color-accent, #00ffd0); @media (max-width: 1200px) { font-size: 1.5rem; transform: none !important; } } } } } }}.intro-container{display:flex;flex-direction:row;align-items:stretch;gap:20px;margin:0;@media(max-width:768px){flex-direction: column-reverse; justify-content: flex-end;}& .headshot { animation: circle-reveal 2.5s ease both, slide-right 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation-delay: 0.3s; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; z-index: 2; @media (max-width: 768px) { animation: circle-reveal 2.5s ease both, img-slide-up 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) both; } & img { width: 375px; max-height: 100vh; aspect-ratio: 13/22; object-fit: contain; border: none; } } & .intro-text { display: flex; flex-direction: column; padding: 10px 10px 10px 0; overflow-wrap: break-word; flex-basis: 0; flex-grow: 1; z-index: 1; @media (max-width: 768px) { padding: 0; align-items: center; text-align: center; margin-bottom: -2.4rem; } & .intro-heading-wrapper { --intro-heading-size: 5rem; margin-top: 0; position: relative; height: fit-content; width: fit-content; margin-bottom: var(--intro-heading-size); animation: drift-down-transform 2.5s cubic-bezier(0.22, 1, 0.36, 1); @media (max-width: 768px) { margin-bottom: 0; } & .intro-heading { font-weight: 700; font-size: var(--intro-heading-size); font-family: var(--font-monospace); &.scramble { will-change: contents; position: relative; animation: drift-down-shadow 2.5s cubic-bezier(0.22, 1, 0.36, 1), scramble-text 2.5s; } } } & .intro-subheading { & p { margin: 0; font-size: clamp(0.5rem, 1.5vw + 1rem, 2rem); @media (min-width: 768px) { white-space: nowrap; } opacity: 0; animation: shadow-drift-left 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; &:nth-child(1) { animation-delay: 0.2s; } &:nth-child(2) { animation-delay: 0.5s; } } } }}header{animation:flyInFromTop .5s cubic-bezier(.25,.46,.45,.94)forwards;.title { opacity: 0.2; transform: translateX(-300px); animation: flyInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } a { transform: translateX(350px); opacity: 0; animation: flyInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }}@media(prefers-reduced-motion:reduce){main article,main article.animate h1 span,main article.animate p,main article.animate .card-container .tilt-card-wrapper,.intro-container .headshot,.intro-container .intro-text .intro-heading-wrapper,.intro-container .intro-text .intro-heading-wrapper .intro-heading.scramble,.intro-container .intro-text .intro-subheading p,.tilt-card,.tilt-card .tilt-card-title{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}main article h1 span,main article p,.tilt-card-wrapper,.intro-subheading p{opacity:1}.tilt-card:hover{transform:none !important}.tilt-card:hover .tilt-card-title{transform:translateZ(50px)}}@keyframes fall-and-tilt{0%{transform:translateX(-5rem)translateY(-.5rem)rotate(-1deg);opacity:0}50%{transform:translateX(0)translateY(-.5rem)rotate(-1deg)}to{transform:translateY(0)rotate(0);opacity:1}}@keyframes card-fade-in{from{opacity:0;transform:translateY(40px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes scramble-text{from{opacity:.99}to{opacity:1}}@keyframes drift-down-transform{0%{opacity:0;transform:translate(0,-1.5em)}100%{opacity:1;transform:translate(0,0)}}@keyframes drift-down-shadow{0%{text-shadow:0 0 3px var(--color-accent,#00ffd0),0 -20px 3px var(--color-accent,#00ffd0),0 -40px 3px #00bfae,0 -80px 3px #009e8e}80%{text-shadow:0 0 1px var(--color-accent,#8dffea),0 -1px 1px var(--color-accent,#8cffea),0 -2px 1px #5fb8b0,0 -4px 1px #4e918a}100%{text-shadow:0 0 1px #0000,0 -1px 1px #0000,0 -2px 1px #0000,0 -4px 1px #0000}}@keyframes shadow-drift-left{0%{opacity:0;transform:translateX(100px);text-shadow:0 0 3px var(--color-accent,#00ffd0),20px 0 3px var(--color-accent,#00ffd0),40px 0 3px #00bfae,80px 0 3px #009e8e}60%{text-shadow:0 0 1px var(--color-accent,#8dffea),1px 0 1px var(--color-accent,#8cffea),2px 0 1px #5fb8b0,4px 0 1px #4e918a}100%{opacity:1;transform:translateX(0);text-shadow:0 0 1px #0000,1px 0 1px #0000,2px 0 1px #0000,4px 0 1px #0000}}@keyframes slide-right{0%{opacity:.5;transform:translate(-6rem,0)}10%{opacity:1}100%{transform:translate(0,0)}}@keyframes circle-reveal{0%{opacity:0;clip-path:circle(0%)}100%{opacity:1;clip-path:circle(100%)}}@keyframes article-slide-up{from{transform:translate(0,12rem)}to{transform:translate(0,0)}}@keyframes img-slide-up{from{transform:translate(0,7rem)}to{transform:translate(0,0)}}@keyframes fade-in-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}