.about-page{opacity:0;transition:opacity .3s ease-in-out}.about-page.loaded{opacity:1}.about-hero{width:100vw;height:100svh;position:relative;overflow:hidden}.about-hero .about-hero-img{width:100%;height:100%;position:absolute;top:0;left:0}.about-hero .about-header{text-align:center;width:60%;color:var(--base-100);position:absolute;bottom:2.75rem;left:50%;transform:translate(-50%)}.anime-text-container{width:100vw;height:100svh;position:relative;overflow:hidden}.anime-text-container .copy-container{text-align:center;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.anime-text-container .anime-text{width:65%}.anime-text-container .anime-text p{color:var(--base-300);text-align:center;margin-bottom:2rem;font-size:2rem;font-weight:900;line-height:1}.anime-text-container .anime-text .word{will-change:background-color,opacity;border-radius:8px;margin-bottom:.2rem;margin-right:.2rem;padding:.1rem .2rem;font-size:2rem;font-weight:900;line-height:1;display:inline-block;position:relative}.anime-text-container .anime-text .word.keyword-wrapper{margin:0 .4rem .2rem .2rem}.anime-text-container .anime-text .word span{position:relative}.anime-text-container .anime-text .word span.keyword{width:100%;height:100%;color:var(--base-300);border-radius:2rem;padding:.1rem 0;display:inline-block}.anime-text-container .anime-text .word span.keyword:before{content:"";background-color:var(--base-300);z-index:-1;border:1px dashed var(--base-300);border-radius:8px;width:calc(100% + 1rem);height:calc(100% + .1rem);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.anime-text-container .anime-text .word span.keyword.corner:before,.anime-text-container .anime-text .word span.keyword.learnings:before,.anime-text-container .anime-text .word span.keyword.deploy:before{background-color:var(--accent-1)}.anime-text-container .anime-text .word span.keyword.scroll:before,.anime-text-container .anime-text .word span.keyword.rhythm:before,.anime-text-container .anime-text .word span.keyword.caffeine:before{background-color:var(--accent-2)}.anime-text-container .anime-text .word span.keyword.archive:before,.anime-text-container .anime-text .word span.keyword.detail:before,.anime-text-container .anime-text .word span.keyword.messing:before{background-color:var(--accent-3)}.anime-text-container .anime-text .word,.anime-text-container .anime-text .word span{opacity:0}.about-skills{background-color:var(--base-300);width:100vw;height:100svh;color:var(--base-100);position:relative;overflow:hidden}.about-skills .container{gap:2rem;display:flex}.about-skills .about-skills-col{border-radius:16px;flex:1;width:100%;height:100%;position:relative}.about-skills .about-skills-col:first-child{flex-direction:column;justify-content:space-between;display:flex}.about-skills .about-skills-col:first-child h3{width:80%}.about-skills .about-skills-col .object-container{border:1px dashed var(--base-secondary-fade);background-color:#101010;border-radius:16px;width:100%;height:100%;position:absolute;top:0;left:0}.about-skills .object-container{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.about-skills .object-container .object{background-color:var(--base-100);width:max-content;color:var(--base-300);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;z-index:2;cursor:grab;border:2px solid #101010;border-radius:10px;padding:2rem 4rem;font-size:2rem;font-weight:500;transition:transform .15s ease-out,box-shadow .15s ease-out;position:absolute}.about-skills .object-container .object:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.15)}.about-skills .object-container .object:active{cursor:grabbing;transform:scale(1.05);box-shadow:0 12px 32px rgba(0,0,0,.2)}.about-skills .object-container .os-1{background-color:var(--accent-1)}.about-skills .object-container .os-2{background-color:var(--accent-2)}.about-skills .object-container .os-3{background-color:var(--accent-3)}.about-skills-copy-wrapper{flex-direction:column;gap:2rem;display:flex}.about-sticky-cards{background-color:var(--base-100);width:100vw;height:100svh;color:var(--base-300);position:relative;overflow:hidden}.about-sticky-cards .sticky-cards-header{text-align:center;width:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.about-sticky-cards .gallery-card{will-change:transform;background-color:var(--base-300);width:25%;height:50%;color:var(--base-100);border-radius:12px;flex-direction:column;gap:.5em;padding:.5em;display:flex;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}.about-sticky-cards .gallery-card-img{border-radius:8px;flex:1 1 0;width:100%;min-height:0;overflow:hidden}.about-sticky-cards .gallery-card-content{flex:0 0 12px;align-items:center;display:flex}.about-sticky-cards .gallery-card-content p.mono{font-size:.8rem}@media (max-width:1000px){.about-sticky-cards .gallery-card{width:75%}.anime-text-container .copy-container h1{width:90%;font-size:2rem}.anime-text-container .anime-text{width:100%}.anime-text-container .anime-text p{margin-bottom:1rem;font-size:1.3rem}.anime-text-container .anime-text .word{margin-bottom:.15rem;margin-right:.1rem;padding:.05rem .125rem;font-size:1.05rem}.anime-text-container .anime-text .word.keyword-wrapper{margin:0 .2rem .1rem .1rem}.anime-text-container .anime-text .word span.keyword:before{width:calc(100% + .35rem);height:calc(100% + .075rem)}.about-hero .about-header{width:90%;top:50%;bottom:unset;transform:translate(-50%,-50%)}.about-skills{height:100svh}.about-skills .about-skills-col:first-child h3{width:100%}.about-skills .container{flex-direction:column}.about-skills .about-skills-col:first-child{justify-content:flex-start;gap:4rem}.skills-playground{flex:2!important}.about-skills .object-container .object{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;z-index:2;border:2px solid #101010;border-radius:8px;padding:.75rem 1.5rem;font-size:.75rem;font-weight:500}.about-sticky-cards .gallery-card{width:50%;height:25svh;top:50%}.about-sticky-cards .sticky-cards-header{width:90%}}
