/* Mobile art direction, measured against the CRAV mobile composition. */
.mobile-copy,.mobile-break,.journey-caption{display:none}
.word-pop{display:inline-block;transform-origin:50% 90%}
.copy-word{display:inline-block}
.sticker-landing{pointer-events:none;transform-origin:50% 70%;will-change:transform,filter}
.sticker-landing .decal-face,.sticker-landing .decal-fold{transition:none}
.sticker-attached{transform:rotate(var(--decal-rotation,12deg))}
@media(max-width:1024px){
  html{scroll-padding-top:90px}
  .desktop-copy{display:none}.mobile-copy,.mobile-break{display:block}
  .navigation{position:fixed;padding:4vw;transition:translate .35s ease;pointer-events:none}
  .navigation a,.navigation button{pointer-events:auto}
  .navigation.nav-hidden{translate:0 -130%}.menu-open .navigation{translate:0 0}
  .logo{font-size:8vw;letter-spacing:-.035em;-webkit-text-stroke:1vw white}
  .nav-right{font-size:max(16px,3.5vw);gap:3vw;text-transform:uppercase}
  .nav-pizza{height:auto;min-height:44px;padding:1.8vw 4vw;line-height:1.2}
  .menu-toggle{min-height:44px;padding:1.8vw 4vw;border-width:.4vw;gap:2vw}
  .menu-icon{width:3.5vw;min-width:17px;gap:5px}
  .navigation-panel{inset:calc(9vw + 44px) 4vw auto;min-height:0;padding:6vw;border-radius:4vw;background:var(--red);box-shadow:0 1vw 3vw #1b1b1b40;clip-path:inset(0 0 100% 0 round 4vw);transition:clip-path .45s cubic-bezier(.22,1,.36,1)}
  .menu-open .navigation-panel{clip-path:inset(0 round 4vw)}
  .navigation-panel nav{gap:2vw}.navigation-panel nav a,.navigation-panel nav button{font-size:8vw;line-height:1.15}
  .navigation-panel>p{font-size:max(16px,3.5vw);margin-top:5vw;padding-top:4vw}
  .menu-open .navigation{color:var(--red)}.menu-open .menu-toggle{color:var(--ink);border-color:#1b1b1b33}
  .outline{-webkit-text-stroke:1vw white}
  .sticker{font-size:6vw;line-height:.9;-webkit-text-stroke:1vw white}
  .hero{height:200vw;min-height:0;max-height:none;padding:40vw 0 2vw;justify-content:space-between}
  .hero-heading{width:94vw}.hero h1{font-size:30vw;line-height:.85}
  .hero-sticker-left{top:2%;left:2%;font-size:6vw;transform:none}
  .hero-sticker-right{bottom:2%;right:2%;font-size:6vw;transform:none}
  .hero-pizza{width:80vw;max-width:none;top:110vw;transform:translate(-50%,-50%)}
  .hero-brand{top:133vw;margin-top:6vw;font-size:20vw;line-height:1;translate:0 -50%;-webkit-text-stroke:1vw white}
  .hero-bottom{position:static;gap:4vw;padding:0 5vw}
  .hero-bottom p{font-size:5vw;line-height:1;max-width:100%;width:100%;text-align:center}
  .section{padding:16vw 4vw}.display{font-size:24vw;line-height:.75}
  .intro{font-size:5vw;line-height:1.1;max-width:90vw;margin:6vw auto}
  .blob{font-size:5vw;min-height:56px;padding:4vw 10vw;margin:6vw auto 10vw;border-width:.4vw;border-radius:54% 46% 49% 51% / 44% 49% 51% 56%}
  .blob:active{transform:scale(.94) rotate(-3deg)}
  .about{padding:16vw 4vw 26vw;overflow:clip}
  .about>.sticker{font-size:8vw;margin-bottom:6vw;transform:none}
  .about h2{line-height:.75}.about .intro{max-width:84vw;margin:6vw auto}
  .photo-fan{width:100%;gap:2vw;padding:4vw 0 2vw;isolation:isolate}
  .fan-card{width:35vw;height:38vw;flex-shrink:0;transform-origin:50% 100%;border-radius:4%}
  .fan-decal{width:25vw;left:-4vw;top:-30vw;--decal-rotation:16deg}
  .experience{margin-top:-15vw;padding:26vw 2.5vw 0;overflow:clip}
  .jelly-wave,.photo-break .jelly-wave{height:19.53125vw}
  .experience-label{position:absolute;top:6vw;left:50%;translate:-50% 0;white-space:nowrap;margin:0;font-size:7vw;opacity:.8;mix-blend-mode:overlay;transform:none}
  .experience .display{font-size:24vw;line-height:.75;margin:0;z-index:2}
  .experience-decal-left{width:25vw;left:-4vw;top:30vw}
  .experience-decal-right{width:35vw;right:-6vw;top:35vw}
  .experience-product{min-height:102vw;margin-top:0;padding-bottom:17vw}
  .mascot-stage{width:90vw;margin:0 auto -9vw}
  .experience-product .side-note{font-size:max(14px,3.8vw);line-height:1.05;bottom:5vw;left:1.5vw}
  .experience-product .right-note{left:auto;right:1.5vw}
  .taste-sticker{right:7%;bottom:26vw;font-size:6vw}
  .photo-break{height:70vh;min-height:0;max-height:none}
  .ingredients{padding:14vw 2.5vw;overflow:hidden}
  .ingredients>.sticker{font-size:8vw;transform:none}
  .ingredient-words{font-size:24vw;line-height:.85;gap:1vw;margin-top:10vw}
  .ingredient-basil{width:36vw;left:5vw;top:20vw}
  .ingredient-tomato{width:26vw;right:5vw;top:25vw}
  .ingredient-mozzarella{width:32vw;left:5vw;top:65vw}
  .ingredient-mushroom{width:32vw;right:4vw;bottom:4vw}
  .takeaway{height:auto;min-height:0;padding:30vw 0 10vw}
  .takeaway-heading{position:relative;inset:auto;width:100%;text-align:center}
  .takeaway-heading>.sticker{display:none}
  .takeaway-heading h2{max-width:none;width:100%;font-size:24vw;line-height:.85}
  .takeaway-heading .intro{width:65%;max-width:none;margin:4vw auto 0;font-size:5vw;line-height:1.1}
  .journey{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:50vw;height:auto;width:100%;margin:25vw 0 0;padding:0 0 10vw}
  .journey-line{position:absolute;left:0;top:8%;height:84%;width:100%}
  .journey-line path{stroke-width:14;stroke-dasharray:8 10;opacity:.7}
  .journey-token{width:25vw;z-index:2;transition:opacity .2s}
  .journey-card{position:relative;inset:auto!important;width:70vw;z-index:3;text-align:center;transform-origin:50% 55%}
  .journey-card h3{font-size:7vw;color:var(--ink);line-height:1.15;margin:0 0 3vw;-webkit-text-stroke:5px white;transform:none!important}
  .journey-card>img{width:60vw;height:60vw;object-fit:cover;border-radius:5vw;margin:auto}
  .journey-caption{display:block;font-size:5vw;line-height:1.1;text-transform:uppercase;width:65vw;margin:3vw auto 0;padding:0 4vw}
  .js-motion .journey-card{opacity:0;transform:translateY(9vw) scale(.85);transition:opacity .45s,transform .8s cubic-bezier(.2,1.5,.4,1)}
  .js-motion .journey-card.arrived{opacity:1;transform:translateY(0) scale(1.05)}
  .cta{padding-top:12vw}.cta-layout{gap:0;margin:0 0 8vw}
  .cta-copy{width:100%;padding:16vw 4vw;gap:4vw;align-items:center;text-align:center}
  .cta-copy>.sticker{font-size:7vw;transform:none}
  .cta-copy h2{font-size:24vw;line-height:.85}
  .cta-copy .intro{width:84vw;font-size:5vw;line-height:1.1}
  .cta-copy .blob{font-size:5vw;padding:4vw 10vw;margin:0}
  .cta-image{width:100%;height:40vh;min-height:40vw;border-radius:4vw}
  .cta-decal{width:38vw;left:-3vw;bottom:26vh}
  footer{padding:8vw 4vw 5vw}.footer-top{padding-bottom:6vw;gap:4vw;font-size:4.5vw}
  .footer-top nav{gap:5vw}.footer-tagline{font-size:max(14px,3.8vw)}
  .footer-stage{margin-top:5vw;min-height:28vw;padding-top:0}
  .footer-word{padding-top:6vw;font-size:21.5vw;line-height:.8;-webkit-text-stroke:2.5vw white}
  .footer-mobile-copy{font-size:max(14px,3vw);padding-top:4vw}
  .js-motion .reveal.word-reveal,.js-motion .reveal.copy-reveal{opacity:1;transform:none;transition:none}
  .js-motion .word-reveal .word-pop{opacity:0;transform:translateY(.65em) rotate(8deg) scale(.45);transition:transform .85s cubic-bezier(.18,1.5,.35,1),opacity .25s;transition-delay:calc(var(--word-index,0)*65ms)}
  .js-motion .word-reveal.in-view .word-pop{opacity:1;transform:none}
  .js-motion .copy-reveal .copy-word{opacity:0;transform:translateY(100%);clip-path:inset(0 0 100% 0);transition:opacity .4s,transform .7s cubic-bezier(.22,1,.36,1),clip-path .65s;transition-delay:calc(var(--copy-row,0)*100ms)}
  .js-motion .copy-reveal.in-view .copy-word{opacity:1;transform:none;clip-path:inset(-10% -5% -10% -5%)}
  .js-motion .hero h1.pop,.js-motion .hero-brand.pop{animation:none}
  .js-motion .hero .word-pop{animation:mobileWordPop .9s cubic-bezier(.18,1.4,.35,1) both;animation-delay:calc(1.45s + var(--word-index,0)*100ms)}
  .js-motion .hero-brand .word-pop{animation-delay:1.95s}
  .js-motion .hero-pizza{animation:mobilePizzaEnter 1.05s cubic-bezier(.18,1.2,.35,1) 1.6s both}
  .decal:active .decal-face{clip-path:inset(13% 0 0 0)}.decal:active .decal-fold{opacity:1}
  @keyframes mobileWordPop{from{opacity:0;transform:translateY(.7em) rotate(9deg) scale(.3)}to{opacity:1;transform:none}}
  @keyframes mobilePizzaEnter{from{opacity:0;translate:0 12vw;rotate:-15deg;scale:.6}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
}
@media(prefers-reduced-motion:reduce){
  .js-motion .word-reveal .word-pop,.js-motion .copy-reveal .copy-word{opacity:1;transform:none;clip-path:none}
  .navigation.nav-hidden{translate:0 0}
}