@font-face{font-family:DynaPuff;src:url('./assets/dynapuff.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#39332e;--sky:#bddfea;--cream:#fff9e8}
*{box-sizing:border-box}
html{background:var(--sky);scrollbar-color:#85ac83 #d7eaf0}
body{margin:0;color:var(--ink);background:var(--sky);font-family:DynaPuff,'Arial Rounded MT Bold',sans-serif}
body,html{width:100%;min-width:280px}
#journey{height:440svh;position:relative}
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:#737baa;--sky-top:#737baa;--sky-bottom:#abb9dd}
.atmosphere{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));pointer-events:none}
.scene{position:absolute;inset:0;pointer-events:none;user-select:none}
.scenery-piece{position:absolute;top:0;left:0;contain:layout style}
.piece-art{display:block;width:100%;height:100%;transform-origin:50% 80%}
.opening{position:absolute;inset:8.5vh 16px auto;z-index:70;text-align:center;will-change:transform,opacity;pointer-events:none}
.title-lockup{display:inline-block;position:relative}
.robinhood-sticker{position:absolute;right:clamp(-90px,-5vw,-18px);top:62%;width:clamp(104px,13vw,184px);aspect-ratio:1;transform:rotate(12deg)}
.robinhood-sticker::before{content:'';position:absolute;inset:18%;border-radius:50%;background:#e8f59b;z-index:-1}
.sticker-base{position:relative;z-index:-2;display:block;width:100%;height:100%;object-fit:contain}
.sticker-copy{position:absolute;inset:18% 8% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1;color:#302b29}
.robinhood-feather{width:auto;height:clamp(22px,2.8vw,39px);margin-bottom:2px}
.sticker-copy span{font-size:clamp(10px,1.05vw,15px)}
.sticker-copy strong{font-size:clamp(11px,1.2vw,17px);font-weight:700;white-space:nowrap}
h1{display:flex;justify-content:center;align-items:baseline;margin:0;line-height:1.15;font-size:clamp(5.8rem,14.7vw,14rem);font-weight:700;letter-spacing:-.045em;filter:drop-shadow(0 7px 0 var(--ink));-webkit-text-stroke:7px var(--ink);paint-order:stroke fill}
h1 span{display:inline-block;color:#f9edab;transform:rotate(-7deg)}
h1 span:nth-child(2){color:#f8b5c9;transform:rotate(6deg) translateY(5px)}
h1 span:nth-child(3){color:#b7d99f;transform:rotate(-4deg) translateY(-5px)}
h1 span:nth-child(4){color:#ffbe8c;transform:rotate(9deg)}
h1 span:nth-child(5){color:#c1b5e6;transform:rotate(-6deg) translateY(3px)}
h1 span:nth-child(6){color:#f6d776;transform:rotate(5deg) translateY(-5px)}
h1 span:nth-child(7){color:#f6a9b4;transform:rotate(-7deg)}
.social{position:fixed;right:32px;top:30px;width:56px;height:56px;z-index:20;display:grid;place-items:center;background:var(--cream);border:3px solid var(--ink);border-radius:48% 52% 47% 53%;box-shadow:3px 4px 0 var(--ink);color:var(--ink);transform:rotate(8deg);transition:transform .18s,background-color .18s}
.social svg{width:23px;height:23px;fill:currentColor}
.social:hover{transform:rotate(-8deg) translateY(-3px);background:#f6d776}
.social:focus-visible{outline:4px solid #fff;outline-offset:6px;box-shadow:0 0 0 10px var(--ink)}
.social:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.social{z-index:100}
.falling{position:absolute;top:0;left:0;z-index:40;width:var(--hero-size,300px);height:var(--hero-size,300px);will-change:transform;pointer-events:none}
.hodlotl{position:absolute;bottom:0;transform-origin:50% 100%}
.float .piece-art{animation:float 7s ease-in-out infinite alternate;animation-delay:var(--phase,0s)}
.cloud .piece-art{animation:drift 18s ease-in-out infinite alternate;animation-delay:var(--phase,0s)}
.stars .piece-art{animation:twinkle 4s ease-in-out infinite alternate;animation-delay:var(--phase,0s)}
.scroll-cue{position:absolute;bottom:30px;left:calc(50% - 12px);width:24px;height:38px;border:2px solid var(--ink);border-radius:15px;opacity:.65;transition:opacity .25s;z-index:70}
.scroll-cue span{position:absolute;top:7px;left:9px;width:3px;height:7px;border-radius:4px;background:var(--ink);animation:scroll 1.8s ease-in-out infinite}
.impact{position:absolute;left:0;top:0;width:1px;height:1px;z-index:39;pointer-events:none;opacity:0}
.impact i{position:absolute;width:40px;height:4px;border-radius:100%;background:var(--ink);transform-origin:-100px 0}
.impact i:nth-child(1){transform:translateX(100px) rotate(-20deg)}
.impact i:nth-child(2){transform:translateX(100px) rotate(-65deg);width:22px}
.impact i:nth-child(3){transform:translateX(100px) rotate(-115deg);width:22px}
.impact i:nth-child(4){transform:translateX(100px) rotate(-160deg)}
.impact i:nth-child(5){transform:translateX(100px) rotate(15deg);width:22px}
.impact i:nth-child(6){transform:translateX(100px) rotate(165deg);width:22px}
@keyframes float{from{transform:translateY(-5px) rotate(-1.5deg)}to{transform:translateY(6px) rotate(1.5deg)}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
@keyframes scroll{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(10px);opacity:1}}
@media(max-width:700px){.opening{top:15vh;inset-inline:8px}h1{font-size:18vw;-webkit-text-stroke:4px var(--ink);filter:drop-shadow(0 4px 0 var(--ink))}.social{top:20px;right:20px;width:48px;height:48px;border-width:2.5px}.social svg{width:20px;height:20px}.scroll-cue{bottom:35px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.scroll-cue span{transform:none}.falling{will-change:auto}}