.workshop-section{position:relative;height:clamp(500px,80svh,960px);overflow:hidden;background:var(--blue);isolation:isolate}
.workshop-image{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:55% 50%;display:block;will-change:transform;transform:translate3d(0,var(--workshop-shift,0px),0)}
.beach-section{position:relative;height:clamp(640px,78.7vw,900px);overflow:hidden;isolation:isolate;background:white}
.beach-sun{position:absolute;z-index:1;width:25.5%;max-width:350px;height:auto;left:37.2%;top:4%;transform:translate3d(0,var(--sun-shift,40px),0);will-change:transform}
.beach-ribbon{position:absolute;z-index:0;left:68.5%;top:0;bottom:0;width:23%;overflow:hidden;pointer-events:none}
.beach-ribbon-track{display:flex;flex-direction:column;width:100%;animation:beach-rise 48s linear infinite;will-change:transform}
.beach-ribbon img{display:block;width:100%;height:auto;flex:none}
.beach-shore{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:30%;object-fit:fill;display:block}
.beach-mascot{position:absolute;z-index:3;width:55%;max-width:780px;height:auto;left:.5%;bottom:1.5%;image-rendering:pixelated}
.beach-section.is-offscreen .beach-ribbon-track{animation-play-state:paused}
@keyframes beach-rise{to{transform:translateY(-50%)}}
@media(max-width:700px){
  .workshop-section{height:90vw;min-height:300px;max-height:620px}
  .workshop-image{object-position:59% 50%;top:-12%;height:124%}
  .beach-section{height:107.5vw;min-height:390px;max-height:720px}
  .beach-sun{width:30%;left:40.3%;top:7%;max-width:none}
  .beach-ribbon{left:72%;width:25%}
  .beach-ribbon-track{animation-duration:38s}
  .beach-shore{height:27%}
  .beach-mascot{left:-13.5%;width:86%;max-width:none;bottom:1%}
}
@media(prefers-reduced-motion:reduce){.workshop-image,.beach-sun{transform:none;will-change:auto}.beach-ribbon-track{animation:none;will-change:auto}}