@import url(https://fonts.googleapis.com/css2?family=Boogaloo&family=Dela+Gothic+One&family=DM+Sans:wght@400;500;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}body,html{-webkit-overflow-scrolling:none;background:#1a1a1a;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}.app{inset:0;overflow:hidden;position:fixed}.wrapper{display:flex;flex-direction:column;height:1100vh;transition:transform .7s cubic-bezier(.4,0,.2,1)}.wrapper.s1{transform:translateY(0)}.wrapper.s2{transform:translateY(-100vh)}.wrapper.s3{transform:translateY(-200vh)}.wrapper.s4{transform:translateY(-300vh)}.wrapper.s5{transform:translateY(-400vh)}.wrapper.s6{transform:translateY(-500vh)}.wrapper.s7{transform:translateY(-600vh)}.wrapper.s8{transform:translateY(-700vh)}.wrapper.s9{transform:translateY(-800vh)}.wrapper.s10{transform:translateY(-900vh)}.wrapper.s11{transform:translateY(-1000vh)}.screen{align-items:center;display:flex;flex-direction:column;flex-shrink:0;height:100vh;overflow:hidden;padding:env(safe-area-inset-top,20px) 20px env(safe-area-inset-bottom,20px);position:relative;width:100vw}@keyframes fadeUp{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeLeft{0%{opacity:0;transform:translateX(-25px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.7}}@keyframes flip{0%,45%{transform:rotateY(0)}50%,95%{transform:rotateY(180deg)}to{transform:rotateY(1turn)}}@keyframes draw{to{stroke-dashoffset:0}}.logo-wrap{margin-top:15px;opacity:0}.logo-wrap.animate{animation:fadeDown .5s ease-out forwards}.logo-wrap.small{margin-bottom:10px}.spotify-logo{height:50px;width:50px}.spotify-logo.large{height:70px;width:70px}.spotify-logo.small{height:40px;width:40px}.svg-lines{height:100%;inset:0;pointer-events:none;position:absolute;width:100%;z-index:1}.line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2s ease-out .3s forwards}.checkerboard-container{height:18%;left:0;max-height:130px;position:absolute;right:0;z-index:2}.checkerboard-container.top{top:0;transform:scaleY(-1)}.checkerboard-container.bottom{bottom:0}.checkerboard-container.bottom-only{bottom:0;height:18%;max-height:120px;transform:perspective(300px) rotateX(-10deg);transform-origin:bottom}.checkerboard-svg{height:100%;width:100%}.small-checkerboard{height:60px;position:absolute;width:110px;z-index:2}.small-checkerboard.bottom-right{bottom:10px;right:10px;transform:perspective(200px) rotateX(-12deg) rotate(4deg);transform-origin:bottom right}.small-checkerboard.top-left{left:10px;top:10px;transform:perspective(200px) rotateX(12deg) rotate(-4deg);transform-origin:top left}.small-checkerboard.top-right{right:10px;top:10px;transform:perspective(200px) rotateX(12deg) rotate(4deg);transform-origin:top right}.screen-1{background:beige;justify-content:center}.main-content{align-items:center;display:flex;flex-direction:column;gap:12px;z-index:10}.year-wrap{opacity:0}.year-wrap.animate{animation:fadeRight .7s ease-out .3s forwards}.year-text{color:#ff3c00;font-family:Boogaloo,cursive;font-size:32vw;line-height:.9}.hint{bottom:22%;color:#1a1a1a;font-family:DM Sans,sans-serif;font-size:13px;opacity:0;position:absolute;z-index:10}.hint.animate{animation:pulse 2s ease-in-out 1s infinite}.screen-2{background:beige;padding-top:50px}.title{color:#1a1a1a;font-family:Dela Gothic One,sans-serif;font-size:6.5vw;opacity:0;text-align:center;z-index:10}.title.animate{animation:fadeUp .5s ease-out .2s forwards}.year-2026{bottom:22%;color:#ff3c00;font-family:Boogaloo,cursive;font-size:26vw;opacity:0;position:absolute;z-index:5}.year-2026.animate{animation:fadeUp .6s ease-out .4s forwards}.screen-3{background:#2a2a2a;padding-top:50px}.listened{margin-top:25%;opacity:0;text-align:center;z-index:10}.listened.animate{animation:fadeUp .6s ease-out .2s forwards}.listened h1{color:#fff;font-family:Dela Gothic One,sans-serif;font-size:8vw;line-height:1.3}.screen-4{background:#2a2a2a;padding-top:50px}.minutes{margin-top:18%;opacity:0;text-align:center;z-index:10}.minutes.animate{animation:fadeUp .6s ease-out .2s forwards}.minutes .num{color:#7b5cf5;font-family:Dela Gothic One,sans-serif;font-size:18vw;line-height:1}.minutes p{color:#fff;font-family:DM Sans,sans-serif;font-size:4vw;margin-top:12px}.screen-5{background:#2a2a2a;padding-top:50px}.teaser{margin-top:20%;opacity:0;padding:0 20px;text-align:center;z-index:10}.teaser.animate{animation:fadeUp .6s ease-out .2s forwards}.teaser.dark,.teaser.dark h1,.teaser.dark p{color:#1a1a1a}.teaser p{color:#fff;font-family:DM Sans,sans-serif;font-size:4.5vw;margin-bottom:12px}.teaser p.bold{font-weight:700}.teaser p.med{font-weight:500;margin-bottom:6px}.teaser h1{color:#fff;font-family:Dela Gothic One,sans-serif;font-size:14vw}.screen-10,.screen-6{background:#2a2a2a;padding-top:45px}.section-title{font-family:Dela Gothic One,sans-serif;font-size:5.5vw;margin:8px 0 12px;opacity:0;padding:5px 14px;z-index:10}.section-title.animate{animation:fadeUp .5s ease-out .15s forwards}.section-title.white-bg{background:#fff;color:#1a1a1a}.section-title.yellow-bg{background:#f5c518;color:#1a1a1a}.list{display:flex;flex-direction:column;gap:6px;max-width:320px;width:100%;z-index:10}.list-item{align-items:center;display:flex;gap:10px;opacity:0;transform:translateX(50px)}.list-item.animate{animation:fadeRight .45s ease-out forwards}.list-item .rank{color:#fff;font-family:Dela Gothic One,sans-serif;font-size:7vw;min-width:32px;text-align:center}.list-item img{border-radius:3px;height:48px;object-fit:cover;width:48px}.list-item .info h3{color:#fff;font-family:Dela Gothic One,sans-serif;font-size:3.8vw}.list-item .info p{color:#aaa;font-family:DM Sans,sans-serif;font-size:3vw}.list-item .artist-name-tag{background:#fff;color:#1a1a1a;font-family:Dela Gothic One,sans-serif;font-size:3.2vw;padding:2px 8px}.screen-7{background:beige;padding-top:50px}.flipping-circles-grid{grid-gap:5px;bottom:20px;display:grid;gap:5px;left:15px;position:absolute;z-index:2}.flip-circle{height:36px;perspective:600px;width:36px}.flip-circle-inner{animation:flip 2s ease-in-out infinite;height:100%;transform-style:preserve-3d;width:100%}.flip-circle.yellow .flip-circle-inner{animation-delay:0s}.flip-circle.black .flip-circle-inner{animation-delay:1s}.flip-circle-back,.flip-circle-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;height:100%;position:absolute;width:100%}.flip-circle.yellow .flip-circle-front{background:#f5c518}.flip-circle.yellow .flip-circle-back{background:#1a1a1a;transform:rotateY(180deg)}.flip-circle.black .flip-circle-front{background:#1a1a1a}.flip-circle.black .flip-circle-back{background:#f5c518;transform:rotateY(180deg)}.screen-8{background:beige;padding-top:40px}.flipping-circles-row{display:flex;gap:0;justify-content:center;margin:6px 0}.flip-circle-horizontal{height:42px;perspective:600px;width:42px}.flip-circle-horizontal .flip-circle-inner{height:100%;transform-style:preserve-3d;width:100%}.flip-circle-horizontal.animate .flip-circle-inner{animation:flip 2s ease-in-out infinite}.flip-circle-horizontal.yellow .flip-circle-front{background:#f5c518}.flip-circle-horizontal.yellow .flip-circle-back{background:#1a1a1a;transform:rotateY(180deg)}.flip-circle-horizontal.black .flip-circle-front{background:#1a1a1a}.flip-circle-horizontal.black .flip-circle-back{background:#f5c518;transform:rotateY(180deg)}.albums-grid{grid-gap:4px;display:grid;gap:4px;grid-template-columns:repeat(2,1fr);margin-bottom:10px;max-width:240px;z-index:10}.album-img{opacity:0;position:relative;transform:scale(.85)}.album-img.animate{animation:scaleIn .4s ease-out forwards}.album-img img{aspect-ratio:1;object-fit:cover;width:100%}.album-img span{background:#0009;border-radius:3px;bottom:4px;color:#fff;font-family:Dela Gothic One,sans-serif;font-size:12px;padding:2px 6px;position:absolute;right:4px}.albums-text{display:flex;gap:25px;z-index:10}.albums-text .col{display:flex;flex-direction:column;gap:6px}.album-item{align-items:center;display:flex;gap:8px;opacity:0;transform:translateX(25px)}.album-item.animate{animation:fadeRight .4s ease-out forwards}.album-item.center{justify-content:center;margin-top:6px}.album-item .rank{font-size:5vw;min-width:20px}.album-item .rank,.album-item h3{color:#1a1a1a;font-family:Dela Gothic One,sans-serif}.album-item h3{font-size:3.2vw}.album-item p{color:#666;font-family:DM Sans,sans-serif;font-size:2.6vw}.screen-9{background:#2a2a2a;padding-top:50px}.screen-11{background:beige;padding-top:15px}.big-year{-webkit-text-stroke:2px #1a1a1a;color:#f5c518;font-family:Boogaloo,cursive;font-size:38vw;left:-6%;line-height:.8;opacity:0;position:absolute;text-orientation:mixed;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;z-index:1}.big-year.animate{animation:fadeLeft .7s ease-out forwards}.summary{align-items:center;display:flex;flex-direction:column;width:100%;z-index:10}.main-img{margin-bottom:12px;opacity:0;transform:scale(.85)}.main-img.animate{animation:scaleIn .6s ease-out .2s forwards}.main-img img{aspect-ratio:1;border:4px solid #fff;box-shadow:0 6px 20px #0003;max-width:160px;object-fit:cover;width:38vw}.cols{display:flex;gap:30px;margin-bottom:12px}.cols .col{text-align:left}.cols h3{color:#1a1a1a;font-family:DM Sans,sans-serif;font-size:3vw;margin-bottom:4px;opacity:0}.cols h3.animate{animation:fadeUp .4s ease-out .25s forwards}.cols ul{list-style:none}.cols li{color:#1a1a1a;font-family:Dela Gothic One,sans-serif;font-size:3.5vw;line-height:1.5;opacity:0;transform:translateX(15px)}.cols li.animate{animation:fadeRight .35s ease-out forwards}.final-mins{opacity:0;text-align:center}.final-mins.animate{animation:fadeUp .5s ease-out .7s forwards}.final-mins p{color:#1a1a1a;font-family:DM Sans,sans-serif;font-size:3vw}.final-mins h2{color:#1a1a1a;font-family:Dela Gothic One,sans-serif;font-size:10vw}@media (max-width:380px){.year-text{font-size:36vw}.list-item img{height:42px;width:42px}.flip-circle{height:32px;width:32px}.flip-circle-horizontal{height:38px;width:38px}.albums-grid{max-width:200px}}@media (min-width:430px){.list-item .info h3{font-size:16px}.list-item .info p{font-size:12px}.list-item .rank{font-size:28px}.teaser p{font-size:18px}.teaser h1{font-size:56px}.title{font-size:28px}.section-title{font-size:22px}.listened h1{font-size:34px}.minutes .num{font-size:72px}.minutes p{font-size:16px}.cols h3{font-size:12px}.cols li{font-size:14px}.final-mins p{font-size:12px}.final-mins h2{font-size:42px}}.svg-lines ellipse.line,.svg-lines path.line{stroke-dasharray:1000;stroke-dashoffset:1000}.svg-lines.active ellipse.line,.svg-lines.active path.line{animation:drawLine 2s ease-out forwards}@keyframes drawLine{to{stroke-dashoffset:0}}.svg-lines.active ellipse.line:first-child,.svg-lines.active path.line:first-child{animation-delay:.3s}.svg-lines.active ellipse.line:nth-child(2),.svg-lines.active path.line:nth-child(2){animation-delay:.5s}.svg-lines.active ellipse.line:nth-child(3),.svg-lines.active path.line:nth-child(3){animation-delay:.7s}.svg-lines.active ellipse.line:nth-child(4),.svg-lines.active path.line:nth-child(4){animation-delay:.9s}
/*# sourceMappingURL=main.13b23f53.css.map*/