@font-face{font-family:Display;src:url('/demos/fanta/fonts/fanta-pop.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Body;src:url('/demos/fanta/fonts/aktiv-grotesk.woff2') format('woff2');font-weight:400;font-display:swap}
:root{font-family:Body,sans-serif;background:#000;color:#f5f0e8;font-synthesis:none;--violet:#aa70ff;--lime:#daff70;--ease:cubic-bezier(.23,1,.32,1);--gutter:4.5vw;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}::selection{background:var(--lime);color:#000}html{scrollbar-color:#aa70ff #000}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:7px}a:active,button:active{transform:scale(.97)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;left:20px;top:20px;z-index:100;background:var(--lime);color:#000;padding:16px;transform:translateY(-200%)}.skip:focus{transform:none}
.header{position:absolute;top:0;left:0;width:100%;z-index:10;padding:30px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:32px}.wordmark{font-family:Display,sans-serif;font-size:55px;line-height:.8;letter-spacing:-.035em;font-style:italic;display:flex;align-items:center;gap:16px}.wordmark span{font:400 10px Body,sans-serif;letter-spacing:.16em;border-left:1px solid #61586c;padding:10px 0 10px 16px;color:var(--violet)}nav{display:flex;gap:40px;margin-left:auto;margin-right:5vw}nav a{font-size:12px;display:flex;gap:8px;align-items:center;padding:12px 0}nav svg{width:15px;height:15px}.motion{display:flex;align-items:center;gap:10px;font-size:11px;background:none;color:inherit;border:1px solid #48414d;border-radius:30px;padding:12px 16px}.motion-icon{display:flex;align-items:center;gap:3px;height:14px}.motion-icon i{height:6px;width:2px;background:var(--violet)}.motion-icon i:nth-child(2){height:14px}.motion-icon i:nth-child(3){height:10px}.motion[aria-pressed=true] .motion-icon i{height:2px}
.journey{position:relative;height:650svh}.stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:#000;isolation:isolate}.poster,.sequence{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.sequence{opacity:0}.sequence-ready{opacity:1}.act{position:absolute;inset:0;pointer-events:none}.act a{pointer-events:auto}.hero h1{margin:0;position:absolute;left:var(--gutter);right:var(--gutter);top:32%;display:flex;justify-content:space-between;font:400 18.4vw/.83 Display,sans-serif;letter-spacing:-.025em}.hero h1 span:last-child{color:var(--violet)}.intro{position:absolute;left:var(--gutter);bottom:16%}.intro p{font-size:20px;line-height:1.4;margin:0 0 15px}.intro>span{font-size:11px;color:#b3a9be}.start{position:absolute;right:var(--gutter);bottom:17%;background:var(--violet);color:#000;padding:20px 25px;border-radius:60px;display:flex;gap:34px;align-items:center;font-size:13px;transition:background 180ms var(--ease),transform 180ms var(--ease)}.start svg{width:21px;height:21px}.turn,.detail{opacity:0;visibility:hidden}.turn h2,.detail h2{font:400 8vw/.9 Display,sans-serif;letter-spacing:-.02em;position:absolute;top:26%;left:var(--gutter);margin:0;max-width:40%}.turn h2{color:var(--violet)}.turn p,.detail p{position:absolute;left:var(--gutter);bottom:22%;font-size:17px;line-height:1.5}.side-note{position:absolute;right:var(--gutter);top:46%;font-size:10px;letter-spacing:.08em;writing-mode:vertical-rl}.detail h2{font-size:6.8vw;top:31%}.detail h2 em{font-style:normal;color:var(--violet)}.scrubber{position:absolute;z-index:5;bottom:4.5%;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;gap:28px}.scroll-label{font-size:10px;letter-spacing:.15em;white-space:nowrap}.percent{width:40px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:#c7b7d9}.scrubber input{--fill:0%;flex:1;min-width:0;height:28px;margin:0;appearance:none;background:transparent;cursor:ew-resize}.scrubber input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--violet) var(--fill),#38303f var(--fill));border-radius:2px}.scrubber input::-moz-range-track{height:2px;background:#38303f}.scrubber input::-moz-range-progress{height:2px;background:var(--violet)}.scrubber input::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;margin-top:-3.5px;background:var(--violet)}.scrubber input::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--violet)}.loading{position:absolute;bottom:9%;left:var(--gutter);font-size:11px;color:#c7b7d9}.ready .loading{display:none}.waypoints{position:absolute;inset:0;pointer-events:none}.waypoints span{position:absolute;width:1px;height:1px}#giro{top:25%}#detalle{top:68%}
.finale{background:var(--violet);color:#160724;position:relative;overflow:hidden;padding:45px var(--gutter) 0;min-height:100svh}.final-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em}.finale h2{font:400 13.5vw/.86 Display,sans-serif;letter-spacing:-.02em;margin:90px 0 45px}.finale h2 span{color:#160724}.final-bottom{display:flex;justify-content:space-between;align-items:center;padding-bottom:80px}.final-bottom p{font-size:15px;line-height:1.5}.replay{border-radius:60px;background:var(--lime);color:#160724;display:flex;align-items:center;gap:65px;padding:22px 30px;font-size:16px;transition:transform 180ms var(--ease)}.ticker{margin:0 calc(-1 * var(--gutter));border-block:1px solid #623197;overflow:hidden;padding:18px 0;color:#160724}.ticker div{font:400 48px/1 Display,sans-serif;white-space:nowrap;width:max-content;will-change:transform}.finale footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px 0}.footer-brand{font:400 italic 38px/1 Display,sans-serif;letter-spacing:-.025em}.finale footer p{font-size:10px;line-height:1.6}.finale footer>span{font-size:9px;letter-spacing:.06em}.finale a:focus-visible{outline-color:#160724}
@media(hover:hover) and (pointer:fine){nav a:hover{text-decoration:underline;text-underline-offset:6px}.start:hover{background:var(--lime)}.replay:hover{transform:translateY(-3px)}.motion:hover{border-color:var(--violet)}}
@media(max-width:760px){:root{--gutter:6vw}.header{padding-top:24px;gap:14px}.wordmark{font-size:42px;gap:10px}.wordmark span{font-size:9px;padding-left:10px}nav{display:none}.motion{padding:11px}.motion-label{font-size:10px}.stage{min-height:620px}.journey{height:580svh}.hero h1{top:20%;font-size:22vw}.poster,.sequence{object-fit:cover}.intro{bottom:19%;}.intro p{font-size:16px}.intro>span{font-size:10px}.start{bottom:10%;left:var(--gutter);right:auto;padding:14px 18px;gap:30px;font-size:12px}.start svg{width:18px;height:18px}.scrubber{bottom:3%;gap:15px}.scroll-label{font-size:8px;letter-spacing:.08em}.percent{font-size:10px;width:31px}.turn h2,.detail h2{font-size:14vw;top:13%;max-width:85%}.turn p,.detail p{bottom:12%;font-size:15px}.side-note{display:none}.detail h2{font-size:13vw}.finale{padding-top:30px}.final-top{font-size:8px;gap:25px}.final-top span:first-child{max-width:22ch}.finale h2{font-size:20vw;margin:80px 0 40px;line-height:.9}.finale h2 span{display:block}.final-bottom{display:block;padding-bottom:55px}.final-bottom p{font-size:14px}.replay{display:inline-flex;margin-top:24px;padding:18px 22px;font-size:14px;gap:55px}.ticker div{font-size:38px}.finale footer{flex-wrap:wrap;align-items:start}.footer-brand{font-size:32px}.finale footer p{margin:0}.finale footer>span{width:100%;font-size:8px}.loading{bottom:8%;left:auto;right:var(--gutter);max-width:100px;text-align:right;font-size:10px}}
@media(max-height:650px) and (min-width:761px){.stage{min-height:500px}.header{padding-top:22px}.hero h1{top:29%;font-size:16vw}.intro p{font-size:16px}.start{padding:15px 22px}.turn h2{font-size:7vw;top:25%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.ticker div{will-change:auto}}
.quiet *{scroll-behavior:auto!important;transition:none!important}
html:not(.enhanced) .journey{height:100svh}html:not(.enhanced) .scrubber,html:not(.enhanced) .loading,html:not(.enhanced) .motion{display:none}
/* Keep the full product clear of the portrait headline and controls. */
@media(max-width:760px){.poster,.sequence{top:25%;height:50%}.hero h1{top:16%}.scroll-label{font-size:10px}.finale footer>span{font-size:9px}}
@media(min-width:761px){.detail{background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.55) 28%,transparent 58%)}}
.wordmark span,.motion-label,.scroll-label,.percent,.side-note,.intro>span,.final-top,.finale footer>span{font-size:11px}.final-top,.finale footer>span{letter-spacing:.04em}.final-top{line-height:1.4}

/* Actual brand assets served by Coca-Cola: Fanta Pop and the Fanta vector logo. */
.wordmark{font-style:normal;letter-spacing:0;gap:18px}.wordmark img,.footer-brand img{display:block;width:112px;height:auto}.wordmark span{font-family:Display,sans-serif;border:0;padding:0;letter-spacing:0;font-size:18px}.header{padding-top:20px}.hero h1{font-size:11.8vw;top:37%;letter-spacing:-.025em}.turn h2{font-size:5.8vw;line-height:1.02}.detail h2{font-size:5.2vw;line-height:1.05}.finale h2{font-size:9vw;line-height:1.05;letter-spacing:-.025em}.ticker div{font-size:36px}.footer-brand{display:flex;gap:16px;align-items:center;font-style:normal}.footer-brand span{font:400 18px Display,sans-serif}.footer-brand img{width:92px}
@media(max-width:760px){.wordmark{gap:8px}.wordmark img{width:78px}.wordmark span{font-size:13px}.header{gap:12px;padding-top:20px}.hero h1{top:16%;font-size:15vw}.turn h2,.detail h2{top:12%;font-size:10vw;max-width:90%;line-height:1.05}.finale h2{font-size:12.8vw;line-height:1.1}.ticker div{font-size:28px}.footer-brand img{width:75px}.footer-brand span{font-size:14px}.finale footer{gap:28px 20px}}
.hero h1{font-size:17.2vw;top:33%}.turn h2{font-size:7.3vw}.detail h2{font-size:6.3vw}.finale h2{font-size:12vw}
@media(max-width:760px){.hero h1{font-size:22vw;top:16%}.turn h2{font-size:13vw}.detail h2{font-size:12vw}.finale h2{font-size:18.5vw}}

@media(max-height:700px){.stage{min-height:100svh}}