/* Hero: the terrace as a layered stage */
.hero{background:var(--paper);position:relative;overflow:clip}
.hero__stage{position:relative;width:100%;max-width:1800px;margin-inline:auto;aspect-ratio:2400/1784;container-type:inline-size;isolation:isolate}
.hero__art{display:contents}
.hl--base,.hl--base img,.pl{position:absolute;inset:0;width:100%;height:100%}
.hl--base{z-index:0;display:block}
.pl{pointer-events:none;will-change:translate}
.pl .crop{position:absolute;left:calc(var(--L) * 100%);top:calc(var(--T) * 100%);width:calc(var(--w) * 100%);height:calc(var(--h) * 100%);aspect-ratio:auto}
.pl--tree{z-index:1}.pl--ball{z-index:3}.pl--waiter{z-index:3}.pl--acc{z-index:4}
.pl--tree .crop{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent),linear-gradient(to bottom,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 80%,transparent),linear-gradient(to bottom,#000 78%,transparent);mask-composite:intersect;transform-origin:0 0;animation:sway 7s ease-in-out infinite alternate}
.pl--ball .crop{-webkit-mask-image:linear-gradient(to right,#000 72%,transparent),linear-gradient(to bottom,transparent,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 72%,transparent),linear-gradient(to bottom,transparent,#000 14%);mask-composite:intersect}
.pl--acc .crop{-webkit-mask-image:linear-gradient(to right,transparent,#000 22%),linear-gradient(to bottom,transparent,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 22%),linear-gradient(to bottom,transparent,#000 12%);mask-composite:intersect}
.pl--waiter .crop{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);animation:bob 3.4s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-.35deg)}to{transform:rotate(.45deg)}}
@keyframes bob{from{transform:translateY(-.4cqw) rotate(-.3deg)}to{transform:translateY(.5cqw) rotate(.4deg)}}

/* ribbon over the red band of the drawing */
.hero__ribbon{position:absolute;z-index:2;left:0;right:0;top:75.4%;height:13.2%;display:flex;align-items:center;overflow:hidden;color:var(--flour);pointer-events:none}
.hero__ribbon .ribbon__track{font:400 7.2cqw/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;animation-duration:30s;text-shadow:0 2px 0 rgba(30,5,5,.45);opacity:.94}

/* copy */
.hero__copy{position:absolute;z-index:6;left:35.5%;top:3.2%;width:30%}
.hero__copy::before{content:"";position:absolute;z-index:-1;inset:-3% -8% -6% -8%;background:radial-gradient(ellipse at 50% 50%,rgba(240,240,238,.82),rgba(240,240,238,.55) 55%,transparent 75%);filter:blur(6px)}
.hero__wm{font:400 8.4cqw/.92 var(--f-display);text-transform:uppercase;color:var(--charcoal);letter-spacing:.005em;white-space:nowrap}
.hero__wm span{display:inline-flex}
.hero__wm i{font-style:normal;display:inline-block}
.hero__wm b{width:.22em}
.hero__wm i:nth-child(n+4){color:var(--wine)}
.hero__kick{font:600 clamp(20px,2.2cqw,30px)/1 var(--f-hand);color:var(--wine);margin-top:.5cqw}
.hero__lead{font-size:clamp(15px,1.25cqw,19px);line-height:1.45;margin-top:.8cqw;max-width:28em}
.hero__since{font-size:clamp(13px,.95cqw,15px);margin-top:.6cqw;opacity:.8}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.3cqw}
html.js .hero__wm i{animation:drop .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 70ms + .15s)}
html.js .hero__kick,html.js .hero__lead,html.js .hero__since,html.js .hero__cta{animation:rise .8s var(--ease) both;animation-delay:.9s}
@keyframes drop{from{translate:0 -160%;rotate:-14deg;opacity:0}to{translate:0 0;rotate:0;opacity:1}}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0}}

/* fx */
.fx{position:absolute;z-index:5;pointer-events:none;overflow:visible}
.fx--bf{left:30%;top:14%;width:24%;height:24%}
.bf path{transform-box:fill-box;transform-origin:center;animation:flap .32s ease-in-out infinite alternate}
.bf{animation:drift1 14s ease-in-out infinite alternate}
.bf1{translate:60px 150px}.bf2{translate:200px 90px;animation-name:drift2;animation-duration:17s}.bf3{translate:290px 190px;animation-name:drift3;animation-duration:11s}
.bf1 path{animation-duration:.28s}.bf3 path{animation-duration:.36s}
.bf path{scale:1.15}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes drift1{0%{transform:translate(0,0)}50%{transform:translate(70px,-60px)}100%{transform:translate(20px,-110px)}}
@keyframes drift2{0%{transform:translate(0,0)}50%{transform:translate(-60px,50px)}100%{transform:translate(40px,80px)}}
@keyframes drift3{0%{transform:translate(0,0)}50%{transform:translate(-80px,-40px)}100%{transform:translate(-30px,-90px)}}
.fx--leaves{left:4%;top:12%;width:30%;height:56%}
.lf{scale:.6;opacity:0;animation:fall 11s linear infinite}
.lf1{translate:30px 10px}.lf2{translate:60px 2px;animation-delay:3.5s;animation-duration:13s}.lf3{translate:15px 6px;animation-delay:6s;animation-duration:12s}.lf4{translate:75px 12px;animation-delay:8.5s;animation-duration:10s}
.fx--leaves{overflow:visible}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.75}70%{opacity:.6}100%{opacity:0;transform:translate(-26px,90px) rotate(240deg)}}
.fx--bub{left:63%;top:37.5%;width:0;height:0}
.fx--bub i{position:absolute;left:0;top:0;width:1.1cqw;height:1.1cqw;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);background:rgba(255,255,255,.35);box-shadow:inset -2px -2px 3px rgba(120,120,120,.25);opacity:0;animation:rise2 6s ease-in infinite;animation-delay:calc(var(--n) * 1.15s)}
.fx--bub i:nth-child(2n){width:.7cqw;height:.7cqw}
@keyframes rise2{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(-4cqw,-12cqw) scale(1.5)}}

/* mobile: stacked, the phone crop of the drawing + tilted ribbon */
@media (max-width:899px){
  .hero__stage{aspect-ratio:auto;display:flex;flex-direction:column;container-type:normal;padding-top:28px}
  .hero__copy{position:static;width:auto;padding:0 var(--gut) 24px}
  .hero__wm{font-size:min(23vw,110px)}
  .hero__kick{font-size:26px;margin-top:6px}.hero__lead{font-size:17px;margin-top:10px}.hero__since{font-size:14px;margin-top:8px}
  .hero__cta{margin-top:18px}
  .hero__art{display:block;position:relative;width:min(100%,478px);aspect-ratio:478/627;margin:0 auto}
  .hl--base img{object-fit:cover}
  .pl,.fx--leaves{display:none}
  .fx--bf{left:30%;top:20%;width:40%;height:30%}
  .fx--bub{display:none}
  .hero__ribbon{left:-6%;right:-6%;top:auto;bottom:9%;height:56px;background:var(--wine);rotate:-3deg;border-block:2px solid var(--charcoal);z-index:6}
  .hero__ribbon::after{content:"";position:absolute;inset:0;background:var(--noise);mix-blend-mode:multiply;opacity:.5}
  .hero__ribbon .ribbon__track{font-size:34px;position:relative;z-index:1}
}
@media (min-width:900px) and (max-width:1100px){
  .hero__lead{display:none}.hero__since{display:none}.hero__cta{margin-top:2cqw}
}
@media (min-width:1800px){.hero__stage{-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}}
@media (prefers-reduced-motion:reduce){
  .pl--tree .crop,.pl--waiter .crop,.bf,.bf path,.lf,.fx--bub i{animation:none!important}
  .fx--bub,.fx--leaves{display:none}
  html.js .hero__wm i,html.js .hero__kick,html.js .hero__lead,html.js .hero__since,html.js .hero__cta{animation:none}
}