:root { --dark:#0e1117; --lime:#e3f272; --pink:#ff2fae; --purple:#7c4dff; --scale:1; --stage-width:1440px; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--dark); }
body { color:#fff; font-family:"Archivo",sans-serif; }
a { color:inherit; }
.stage { position:absolute; left:0; top:0; width:var(--stage-width); height:1024px; overflow:hidden; transform:scale(var(--scale)); transform-origin:top left; background:var(--dark); }
.stage::after { content:""; position:absolute; z-index:80; inset:0; pointer-events:none; opacity:0; }
.stage.is-bouncing-top { animation:boundaryBounceTop .46s cubic-bezier(.22,.8,.3,1); }
.stage.is-bouncing-bottom { animation:boundaryBounceBottom .46s cubic-bezier(.22,.8,.3,1); }
.stage.is-bouncing-top::after { background:linear-gradient(to bottom,rgba(227,242,114,.5),rgba(124,77,255,.14) 7%,transparent 18%); animation:boundaryGlow .46s ease-out; }
.stage.is-bouncing-bottom::after { background:linear-gradient(to top,rgba(124,77,255,.48),rgba(255,47,174,.13) 7%,transparent 18%); animation:boundaryGlow .46s ease-out; }
@keyframes boundaryBounceTop { 0%,100%{translate:0 0} 34%{translate:0 13px} 68%{translate:0 -3px} 84%{translate:0 1px} }
@keyframes boundaryBounceBottom { 0%,100%{translate:0 0} 34%{translate:0 -13px} 68%{translate:0 3px} 84%{translate:0 -1px} }
@keyframes boundaryGlow { 0%,100%{opacity:0} 28%{opacity:1} 70%{opacity:.28} }
.screen { position:absolute; inset:0; width:100%; height:1024px; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; }
.screen.is-active { visibility:visible; opacity:1; pointer-events:auto; }

.hero { background:var(--dark); }
.hero__blob-wrap { position:absolute; left:calc(50% - 147.23px); top:261px; width:318.684px; height:360.589px; }
.hero__blob-wrap img { display:block; width:100%; height:100%; }
.hero__portrait-wrap { position:absolute; left:calc(50% - 224px); top:371.763px; width:462px; height:652.237px; overflow:hidden; }
.hero__portrait-wrap img { position:absolute; left:-.03%; top:-.03%; width:100.04%; height:139.19%; max-width:none; }
.hero__name { position:absolute; left:44px; top:175px; width:346px; height:93px; margin:0; font:400 48px/1 "Archivo Black",sans-serif; }
.hero__name span { color:var(--pink); }
.hero__name em { display:block; margin-left:43px; color:var(--purple); font:400 40px/1.05 "Archivo",sans-serif; }

.hero__location { position:absolute; right:73px; top:170px; width:255px; height:72px; }
.hero__location-icon { position:absolute; left:0; top:0; width:72px; height:72px; overflow:hidden; }
.hero__location-icon img { position:absolute; left:12px; top:6px; width:48px; height:60px; }
.hero__location-window { position:absolute; left:84px; top:20px; width:171px; height:32px; overflow:hidden; }
.hero__location-train { position:absolute; left:0; top:0; width:171px; height:76px; margin:0; color:#fff; white-space:normal; text-align:center; font:400 32px/normal "Archivo Black",sans-serif; animation:locationTrain 4s infinite; will-change:transform; }
@keyframes locationTrain {
  0%,25% { transform:translateY(0); animation-timing-function:cubic-bezier(.68,-.55,.265,1.55); }
  50%,75% { transform:translateY(-32px); animation-timing-function:cubic-bezier(.68,-.55,.265,1.55); }
  100% { transform:translateY(0); }
}

.hero__role { position:absolute; width:422px; color:#fff; font-size:16px; }
.hero__role .eyebrow { margin:0 0 30px; font:100 32px/normal "Archivo",sans-serif; }
.hero__role h2 { margin:0 0 25px; font:400 32px/normal "Archivo Black",sans-serif; }
.hero__role > p:last-of-type { margin:0; line-height:normal; }
.hero__role--data { left:38px; top:438px; width:377px; height:378px; }
.hero__role--web { right:5px; top:577px; width:422px; height:378px; }
.button { position:absolute; left:-2.5px; top:227px; display:flex; width:136px; height:61px; align-items:center; justify-content:center; border-radius:17px; background:#6f7378; color:#fff; text-decoration:none; font:500 17px/25px "Roboto",sans-serif; letter-spacing:.15px; }
.button:focus-visible { outline:3px solid #fff; outline-offset:3px; }

.hero.is-entering .hero__blob-wrap { animation:introBlob .501s ease-out both; }
.hero.is-entering .hero__portrait-wrap { animation:introPortrait .501s linear both; }
.hero.is-entering .hero__role--data { animation:introLeft .501s linear both; }
.hero.is-entering .hero__role--web { animation:introRight .501s linear both; }
.hero.is-entering .hero__name { animation:introTop .501s linear both; }
.hero.is-entering .hero__location { animation:introLocation .501s ease-out both; }
@keyframes introBlob { from { transform:translateX(-200px); } }
@keyframes introPortrait { from { transform:translateY(550.237px); } }
@keyframes introLeft { from { transform:translateX(-415px); } }
@keyframes introRight { from { transform:translateX(427px); } }
@keyframes introTop { from { transform:translateY(-268px); } }
@keyframes introLocation { from { transform:translateX(200px); } }

.hero.is-exiting .hero__blob-wrap { animation:exitBlob 2.017666s linear both; }
.hero.is-exiting .hero__portrait-wrap { animation:exitPortrait 2.017666s linear both; }
.hero.is-exiting .hero__role--data { animation:exitLeft 2.017666s linear both; }
.hero.is-exiting .hero__role--web { animation:exitRight 2.017666s linear both; }
.hero.is-exiting .hero__name { animation:exitTop 2.017666s linear both; }
.hero.is-exiting .hero__location { animation:exitLocation 2.017666s linear both; }
@keyframes exitBlob { 0%,24.484%{translate:0 0;scale:1} 53.136%{scale:2.33} 70.29%{scale:6.46} 99.124%,100%{translate:462.228px -184px;scale:9.04} }
@keyframes exitPortrait { 0%,24.335%{translate:0 0} 99.124%,100%{translate:0 726.237px} }
@keyframes exitLeft { 0%,23.839%{translate:0 0} 24.335%{translate:6px 0} 99.124%,100%{translate:-415px 0} }
@keyframes exitRight { 0%,23.839%{translate:0 0} 24.335%{translate:115px 0} 100%{translate:537px 0} }
@keyframes exitTop { 0%,23.839%{translate:0 0} 24.335%{translate:0 39px} 99.124%,100%{translate:0 -337px} }
@keyframes exitLocation { 0%,19.825%{translate:0 0} 24.781%{translate:40.989px 0} 34.694%{translate:72.818px 0} 44.606%{translate:113.73px 0} 54.518%{translate:175.899px 0} 64.431%{translate:284.63px 0} 74.343%{translate:393.6px 0} 84.256%{translate:438.206px 0} 94.168%{translate:445.844px 0} 99.124%,100%{translate:440px 0} }

.hero.is-returning .hero__blob-wrap { animation:returnBlob 2.017666s linear both; }
.hero.is-returning .hero__portrait-wrap { animation:returnPortrait 2.017666s linear both; }
.hero.is-returning .hero__role--data { animation:returnLeft 2.017666s linear both; }
.hero.is-returning .hero__role--web { animation:returnRight 2.017666s linear both; }
.hero.is-returning .hero__name { animation:returnTop 2.017666s linear both; }
.hero.is-returning .hero__location { animation:returnLocation 2.017666s linear both; }
@keyframes returnBlob { from{translate:462.228px -184px;scale:9.04} to{translate:0 0;scale:1} }
@keyframes returnPortrait { 0%,.149%{translate:0 726.237px} 100%{translate:0 5.237px} }
@keyframes returnLeft { 0%,.149%{translate:-415px 0} 100%{translate:0 0} }
@keyframes returnRight { 0%,1.024%{translate:537px 0} 100%{translate:0 0} }
@keyframes returnTop { 0%,.149%{translate:0 -337px} 100%{translate:0 0} }
@keyframes returnLocation { 0%,.149%{translate:370px 0} 100%{translate:0 0} }

.about { background:var(--lime); color:var(--purple); }
.about.is-entering .about__body p { animation:aboutContentIn .5s linear both; }
.about__body { position:absolute; left:0; top:0; width:100%; min-height:3776px; }
.about__body p { position:absolute; left:80px; top:285px; width:calc(100% - 160px); height:372px; margin:0; text-align:center; font:400 16px/62px "Archivo Black",sans-serif; }
.about__word { color:#7c4dff; }
@keyframes aboutContentIn { 0%{opacity:0;transform:translateY(200px)} 100%{opacity:1;transform:translateY(0)} }
.about__night-scene { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; visibility:hidden; }
.about.is-night .about__night-scene { visibility:visible; }
.rico-sprite { position:absolute; z-index:2; left:-210px; bottom:26px; width:181px; height:362px; opacity:0; overflow:hidden; clip-path:inset(0 0 0 5%); background:url("assets/rico-flashlight-sprite.png") 0 0/600% 100% no-repeat; image-rendering:auto; }
.about.is-night .rico-sprite { animation:ricoSpriteCycle .72s steps(5) infinite,ricoSpriteEnter 3.2s cubic-bezier(.18,.78,.2,1) forwards; }
.about.is-night.is-sprite-settled .rico-sprite { left:var(--sprite-stop-left,calc(50% - 90.5px)); bottom:var(--sprite-stop-bottom,82px); opacity:1; animation:none; clip-path:none; background-image:url("assets/rico-flashlight-front-still.png"); background-size:100% 100%; background-position:center; }
.about.is-night.is-sprite-exiting .rico-sprite { opacity:1; animation:none; clip-path:inset(0 0 0 5%); background-image:url("assets/rico-flashlight-sprite.png"); background-size:600% 100%; }
.flashlight-beam { position:absolute; z-index:1; left:0; top:0; width:0; height:150px; opacity:0; transform-origin:left center; clip-path:polygon(0 46%,100% 0,100% 100%,0 54%); background:radial-gradient(ellipse at 0 50%,rgba(255,255,224,.74) 0,rgba(227,242,114,.38) 31%,rgba(227,242,114,.12) 57%,transparent 78%); filter:blur(2px); mix-blend-mode:screen; will-change:left,top,width,transform; }
.about.is-night .flashlight-beam { animation:flashlightOn 3.2s ease-out forwards; }
.about.is-night.is-sprite-exiting .flashlight-beam { opacity:1; animation:none; }
.about-scroll-cue { z-index:6; left:50%; bottom:24px; }
@keyframes ricoSpriteCycle { from{background-position:0 0} to{background-position:100% 0} }
@keyframes ricoSpriteEnter { 0%{left:-210px;bottom:26px;opacity:0} 8%{opacity:1} 100%{left:var(--sprite-stop-left,calc(50% - 90.5px));bottom:var(--sprite-stop-bottom,82px);opacity:1} }
@keyframes flashlightOn { 0%,62%{opacity:0} 76%{opacity:.2} 100%{opacity:1} }

.experience { background:var(--dark); }
.experience.is-entering { animation:experienceIn .6s ease-out both; }
@keyframes experienceIn { from{opacity:0} to{opacity:1} }
.experience header { position:absolute; left:85px; top:52px; width:calc(100% - 170px); height:198px; font-size:32px; }
.experience header p { margin:0 0 74px; font-weight:100; line-height:normal; }
.experience header h2 { margin:0; font:400 32px/normal "Archivo Black",sans-serif; }
.experience__list { position:absolute; left:85px; top:250px; display:block; }
.experience__list a { position:absolute; left:0; width:max-content; color:#fff; font-size:32px; font-weight:100; line-height:normal; text-decoration:none; }
.experience__list a:nth-child(1){top:0}.experience__list a:nth-child(2){top:68px}.experience__list a:nth-child(3){top:137px}.experience__list a:nth-child(4){top:209px}.experience__list a:nth-child(5){top:278px}
.experience__detail { position:absolute; right:181px; top:258px; width:445px; height:272px; color:#fff; white-space:pre-line; font:400 18px/normal "Archivo",sans-serif; letter-spacing:1.8px; }
.experience__detail-title { display:none; }
.experience__detail-back { display:none; }
.experience__detail-copy { margin:0; white-space:pre-line; }
.experience__detail.is-visible { animation:detailIn 2s linear both; }
@keyframes detailIn {
  0% { opacity:.24; translate:0 200px; animation-timing-function:ease-out; }
  25%,100% { opacity:1; translate:0 0; }
}
.experience__waves { position:absolute; left:0; top:788.867px; width:100%; height:235.133px; }
.socials { position:absolute; left:13.333%; right:11.033%; top:918px; width:auto; height:20.25px; display:flex; align-items:center; justify-content:space-between; }
.socials a,.socials img { display:block; width:30.25px; height:30.25px; }

.scroll-cue { position:absolute; z-index:20; left:50%; bottom:24px; display:flex; min-width:112px; height:48px; padding:6px 18px; border:1px solid rgba(227,242,114,.8); border-radius:999px; align-items:center; justify-content:center; gap:10px; background:rgba(14,17,23,.78); box-shadow:0 8px 24px rgba(0,0,0,.3); color:#fff; opacity:0; pointer-events:none; transform:translate(-50%,16px); transition:opacity .25s ease,transform .25s ease; font:400 14px/1 "Archivo Black",sans-serif; letter-spacing:.8px; }
.scroll-cue.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.scroll-cue__mobile { display:none; }
.scroll-cue__arrow { color:var(--pink); font-size:24px; line-height:12px; animation:scrollCueBounce 1.25s ease-in-out infinite; }
@keyframes scrollCueBounce { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(3px)} }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

@media (max-width: 768px), (pointer: coarse) {
  :root { --mobile-width:402px; --mobile-height:874px; }
  html,body { overscroll-behavior:none; touch-action:none; }
  .stage { width:var(--stage-width); height:var(--mobile-height); }
  .screen { width:100%; height:var(--mobile-height); }
  .hero { z-index:2; }
  .about { z-index:1; }
  .experience { z-index:3; }

  .hero__blob-wrap { left:calc(50% - 149px); top:155px; width:308px; height:348px; }
  .hero__portrait-wrap { left:calc(50% - 223px); top:262px; width:446px; height:630px; }
  .hero__portrait-wrap img { width:100%; height:139.19%; }
  .hero__name { left:22px; top:28px; width:235px; height:64px; font-size:32.6px; }
  .hero__name em { margin-left:29px; font-size:27px; }
  .hero__location { left:auto; right:17.6px; top:21px; width:173.4px; height:48.96px; scale:.98; transform-origin:center; }
  .hero__location-icon { width:48.96px; height:48.96px; }
  .hero__location-icon img { left:13.5px; top:11.5px; width:21px; height:26px; }
  .hero__location-window { left:45.5px; top:13.6px; width:116.28px; height:24.2px; }
  .hero__location-train { width:116.28px; height:48.4px; font-size:20.5px; line-height:24.2px; animation-name:locationTrainMobile; }
  @keyframes locationTrainMobile {
    0%,25% { transform:translateY(0); animation-timing-function:cubic-bezier(.68,-.55,.265,1.55); }
    50%,75% { transform:translateY(-24.2px); animation-timing-function:cubic-bezier(.68,-.55,.265,1.55); }
    100% { transform:translateY(0); }
  }

  .hero__role { text-shadow:0 2px 4px rgba(0,0,0,.88); }
  .hero__role .eyebrow { margin-bottom:14px; font-size:16px; }
  .hero__role h2 { margin-bottom:12px; font-size:17px; }
  .hero__role > p:last-of-type { font-size:8.5px; }
  .hero__role--data { left:7px; top:142px; width:195px; height:196px; }
  .hero__role--web { left:auto; right:-2px; top:584px; width:205px; height:184px; }
  .button { left:0; top:111px; width:64px; height:31px; border-radius:9px; font-size:8.25px; line-height:13px; }

  .about__body { width:100%; min-height:874px; }
  .about__body p { left:24px; top:112px; width:calc(100% - 48px); height:auto; font-size:16px; line-height:23px; }
  .rico-sprite { left:-120px; bottom:28px; width:104px; height:208px; }
  .about.is-night .rico-sprite { animation-duration:.66s,2.7s; }
  .about.is-night.is-sprite-settled .rico-sprite { left:var(--sprite-stop-left,calc(50% - 52px)); bottom:var(--sprite-stop-bottom,70px); }
  .flashlight-beam { height:96px; }
  .about-scroll-cue { left:50%; bottom:14px; }
  @keyframes ricoSpriteEnter { 0%{left:-120px;bottom:28px;opacity:0} 8%{opacity:1} 100%{left:var(--sprite-stop-left,calc(50% - 52px));bottom:var(--sprite-stop-bottom,70px);opacity:1} }

  .experience header { left:24px; top:38px; width:calc(100% - 48px); height:auto; font-size:28px; }
  .experience header p { margin-bottom:38px; }
  .experience header h2 { font-size:28px; }
  .experience__list { left:24px; top:220px; }
  .experience__list a { font-size:24px; }
  .experience__list a:nth-child(1){top:0}.experience__list a:nth-child(2){top:68px}.experience__list a:nth-child(3){top:136px}.experience__list a:nth-child(4){top:204px}.experience__list a:nth-child(5){top:272px}
  .experience__detail { display:none; left:24px; right:auto; top:44px; width:calc(100% - 48px); height:730px; font-size:14px; line-height:20px; letter-spacing:1.4px; }
  .experience__detail-back { position:absolute; right:0; top:-27px; display:block; padding:7px 10px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(111,115,120,.45); color:#fff; font:400 11px/14px "Archivo",sans-serif; letter-spacing:.4px; cursor:pointer; }
  .experience__detail-title { display:block; margin:0; padding:0; border:0; background:none; color:#fff; font:100 30px/34px "Archivo",sans-serif; text-decoration:none; cursor:pointer; }
  .experience__detail-copy { position:absolute; left:0; top:76px; width:100%; margin:0; white-space:pre-line; }
  .experience.is-detail-mode header,
  .experience.is-detail-mode .experience__list { display:none; }
  .experience.is-detail-mode .experience__detail { display:block; }
  .experience.is-detail-mode .experience__detail.is-visible { animation:detailScreenIn .5s ease-out both; }
  @keyframes detailScreenIn { from { opacity:.24; transform:translateY(400px); } to { opacity:1; transform:translateY(0); } }
  .experience__waves { left:0; top:808px; width:100%; height:66px; }
  .socials { left:24px; right:24px; top:837.9px; width:auto; height:20.68px; }
  .socials a,.socials img { width:20.68px; height:20.68px; }
  .scroll-cue { bottom:16px; min-width:102px; height:38px; padding:5px 13px; gap:7px; border-color:rgba(227,242,114,.9); background:rgba(14,17,23,.72); font-size:10px; letter-spacing:.5px; }
  .scroll-cue__desktop { display:none; }
  .scroll-cue__mobile { display:inline; }
  .scroll-cue__arrow { font-size:19px; }
}