/* A single wave becomes a short, tactile chapter in the coastal story. */
.surf-film{
  position:relative;
  min-height:100dvh;
  background:#122e29;
  color:#fff;
}
.surf-film.has-scroll-film{height:300dvh;min-height:300dvh}
.surf-film-stage{
  position:relative;
  height:100dvh;
  min-height:500px;
  overflow:hidden;
  isolation:isolate;
  background:#122e29 url('assets/surf-scroll-poster.webp') center/cover no-repeat;
}
.has-scroll-film .surf-film-stage{position:sticky;top:0;min-height:0}
.surf-film-video{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% center;
}
.surf-film-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(7,28,27,.65),transparent 24%),linear-gradient(110deg,rgba(7,28,27,.34),transparent 52%);
}
.surf-film-copy{
  position:absolute;
  z-index:2;
  top:13%;
  left:var(--pad);
  right:var(--pad);
  max-width:490px;
  pointer-events:none;
  will-change:opacity,transform;
}
.surf-film-copy .section-label{font-size:8px;letter-spacing:.23em;margin-bottom:19px}
.surf-film-copy h2{font-size:clamp(45px,5.2vw,80px);line-height:1.05;letter-spacing:-.025em}
.surf-film-copy p{font-size:11px;line-height:1.9;margin-top:22px;text-shadow:0 1px 5px #071c1b33}
.surf-film-bottom{
  position:absolute;
  z-index:2;
  bottom:31px;
  left:var(--pad);
  right:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  font-size:9px;
  letter-spacing:.015em;
}
.surf-film-bottom>span{white-space:nowrap}
.surf-film-bottom>a{white-space:nowrap;font-size:10px;padding:9px 0;border-bottom:1px solid #ffffff70}
.surf-film-progress{position:relative;width:140px;height:1px;background:#ffffff40;margin-right:auto}
.surf-film-progress i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;will-change:transform}
.surf-film-play{position:absolute;z-index:3;right:var(--pad);bottom:145px;font-size:11px;min-height:47px}
.surf-film.is-manual .surf-film-bottom{bottom:79px}
.surf-film.is-manual .surf-film-shade{pointer-events:none}
.surf-film.is-manual .surf-film-video{z-index:1}
.surf-film.is-manual .surf-film-copy{z-index:2;transition:opacity .35s}
.surf-film.is-playing .surf-film-copy{opacity:0}
.surf-film.has-video-error .surf-film-video{visibility:hidden}
.surf-film.has-video-error .surf-film-bottom{bottom:31px}
.surf-film-status.is-visible,
#surf-film-status.is-visible{
  position:absolute;
  z-index:3;
  left:var(--pad);
  right:var(--pad);
  bottom:115px;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
  border:0;
  max-width:360px;
  font-size:10px;
  line-height:1.8;
}
@media(max-width:767px){
  .surf-film.has-scroll-film{height:285dvh;min-height:285dvh}
  .surf-film-stage{min-height:460px}
  .has-scroll-film .surf-film-stage{min-height:0}
  .surf-film-copy{top:10%;max-width:290px}
  .surf-film-copy .section-label{font-size:7px;margin-bottom:16px}
  .surf-film-copy h2{font-size:clamp(42px,12vw,60px)}
  .surf-film-copy p{font-size:10px;margin-top:18px}
  .surf-film-bottom{gap:20px;bottom:25px;font-size:8px}
  .surf-film-bottom>a{font-size:9px}
  .surf-film-progress{width:60px}
  .surf-film-play{bottom:143px;left:var(--pad);right:auto}
  .surf-film.is-manual .surf-film-bottom{bottom:78px}
}
@media(max-width:380px){.surf-film-progress{display:none}.surf-film-bottom{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){
  .surf-film,.surf-film.has-scroll-film{height:auto;min-height:0}
  .surf-film-stage,.has-scroll-film .surf-film-stage{position:relative;height:100dvh;min-height:460px}
  .surf-film-copy{will-change:auto;transform:none!important;transition:none}
  .surf-film-progress i{will-change:auto}
}
/* The caption follows the same progress as the surfer, including reverse scrolling. */
.surf-film-caption-copy{top:16%;max-width:none;will-change:auto}
.surf-film-captions{position:relative;min-height:190px;width:min(900px,75vw)}
.surf-film-caption-copy .surf-film-caption{position:absolute;top:0;left:0;margin:0;max-width:100%;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:clamp(48px,6vw,92px);font-weight:500;line-height:1.1;letter-spacing:-.025em;text-shadow:0 2px 24px rgba(7,28,27,.45);opacity:0;transform:translate3d(0,18px,0);will-change:opacity,transform}
.surf-film-caption-copy .surf-film-caption:first-child{opacity:1;transform:none}
.surf-film-caption-copy .surf-film-caption[data-film-caption='2']{font-size:clamp(42px,5.3vw,84px)}
.surf-film-caption>span{display:block;white-space:nowrap}
.surf-film.is-playing .surf-film-caption-copy{opacity:1}
@media(max-width:767px){.surf-film-caption-copy{top:14%;max-width:none}.surf-film-captions{width:100%;min-height:150px}.surf-film-caption-copy .surf-film-caption{font-size:clamp(43px,13.5vw,65px)}.surf-film-caption-copy .surf-film-caption[data-film-caption='2']{font-size:clamp(28px,9.2vw,48px)}}
@media(max-height:460px){.surf-film-caption-copy{top:12%}.surf-film-caption-copy .surf-film-caption{font-size:clamp(36px,5vw,58px)}.surf-film-caption-copy .surf-film-caption[data-film-caption='2']{font-size:clamp(30px,4.6vw,52px)}}
@media(prefers-reduced-motion:reduce){.surf-film-caption-copy .surf-film-caption{transform:none!important;will-change:auto;transition:none}}