/* The map and film share one stage and one original brand mark. */
.coast-story{position:relative;background:var(--sea)}
.coast-stage{position:relative}
/* Outside the transformed/pinned stage: the same brand remains viewport-fixed. */
.story-header{position:fixed;z-index:20}
.language-switch{position:relative;right:calc(-1 * var(--header-r,0px));margin-left:auto;display:flex;align-items:center;gap:0;pointer-events:auto;background:var(--field-surface);backdrop-filter:var(--field-filter);-webkit-backdrop-filter:var(--field-filter);color:var(--field-ink);border-radius:var(--radius-pill) 0 0 var(--radius-pill);box-shadow:inset 0 1px 0 var(--field-highlight),inset 0 -10px 20px #d9c39433,0 8px 22px #17212422}
/* Content-band gate: the switch slides in from the edge, never over the hero or footer. */
.language-switch--off{opacity:0;visibility:hidden;transform:translateX(18px);pointer-events:none;transition:opacity .45s ease-out,transform .45s ease-out,visibility 0s linear .45s}
.language-switch--off.language-switch--on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s ease-out,transform .45s ease-out,visibility 0s}
.language-switch[hidden]{display:none}
.goo-defs{position:absolute;overflow:hidden}
/* Goo filter melts the drop and its lagging trail into one liquid indicator. */
.language-goo{position:absolute;inset:0;z-index:0;filter:url(#language-goo-filter);pointer-events:none}
.lang-drop,.lang-trail{position:absolute;top:50%;left:var(--drop-x,22px);background:var(--field-ink);border-radius:12px;transform:translate(-50%,-50%)}
.lang-drop{width:34px;height:34px;transition:left .38s cubic-bezier(.5,1.35,.4,1)}
.lang-trail{width:26px;height:26px;transition:left .38s cubic-bezier(.5,1.35,.4,1) .08s}
/* Server-rendered switches link to locale routes: park the drop under the active link. */
.language-switch:has(a[aria-current="true"]:last-of-type){--drop-x:calc(100% - 22px)}
/* A click on the other locale lets the drop travel first, then the page follows. */
.language-switch--switching .lang-drop,.language-switch--switching .lang-trail{transition-duration:.26s}
.language-switch a.language-link--target{color:var(--paper)}
.language-switch.language-switch--switching a[aria-current="true"]{color:var(--field-ink)}
.language-switch button{position:relative;z-index:1;min-width:44px;min-height:44px;padding:0 8px;border:0;background:none;color:inherit;font:inherit;font-size:var(--text-body);line-height:1;cursor:pointer;transition:color .25s ease-out}
.language-switch button[aria-pressed="true"]{font-weight:var(--weight-semibold);color:var(--paper)}
.language-switch button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.language-switch button:active{background:#ffffff16}
.brand{transform-origin:top left}
.logo-object{position:absolute;left:-100%;top:-100%;width:300%;height:300%;pointer-events:none;opacity:0}
/* A short pinned stage lets the rounded video rise above the map. */
.motion-story .coast-stage{height:100svh;isolation:isolate}
.motion-story .experience{height:100%;min-height:0}
.motion-story .film-hero{position:absolute;inset:0;height:100%;transform:translateY(100%)}
.coast-story{z-index:2}
.coast-stage{overflow:clip}
/* Ocean stays behind the upper curve; the lower curve opens onto the sand. */
.coast-stage::before{content:'';position:absolute;inset:0 0 var(--film-radius);z-index:-1;background:var(--sea);pointer-events:none}
/* Tuck sand under the lower corners without adding vertical padding. */
.coast-story:has(.film-hero)+.surf-gallery{margin-top:calc(-1 * var(--film-radius))}
.motion-story{background:transparent}
:root{--film-radius:clamp(24px,4vw,64px)}
.film-hero{position:relative;isolation:isolate;height:100svh;min-height:420px;overflow:hidden;border-radius:var(--film-radius);background:var(--sea);color:var(--paper);z-index:7}
.hero-film,.film-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film{object-position:center}
.film-visual{position:absolute;inset:-8% 0;pointer-events:none}
/* Give accented glyphs breathing room inside each responsive reveal mask. */
.scroll-line{padding-block:.12em;margin-block:-.12em;transform-origin:0 100%}
/* Expand the actual SplitText clip, preserving the headline's line spacing. */
.film-hero .scroll-mask-line-mask{padding-block:.2em;margin-block:-.2em}
.film-shade{pointer-events:none;background:linear-gradient(180deg,#062f3f33 0%,#062f3f00 42%)}
.film-masthead{position:absolute;top:38px;left:40px;right:auto;display:flex;justify-content:space-between;align-items:start;font-size:10px;line-height:1.8;letter-spacing:.025em}
.film-hero-copy{position:absolute;left:6%;right:6%;bottom:17%;pointer-events:none}
.film-hero h2{margin:0;color:var(--sun);font-family:var(--font-display);font-size:clamp(64px,10.2vw,160px);font-weight:400;letter-spacing:-.065em;line-height:1.03}
.film-hero h2>span{display:block}
.film-hero h2>span:last-child{margin-left:11%}
/* Real generated cutouts carry live type; outer wrappers own GSAP arrival. */
.film-collection{position:relative;isolation:isolate;color:var(--ink);background:var(--paper-stock-cream)}
.film-scene{position:relative;height:100svh;min-height:620px;isolation:isolate;overflow:clip;background:var(--sea)}
.film-backdrop{position:absolute;inset:0;overflow:hidden;z-index:-1;background:var(--sea)}
.film-backdrop video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.film-backdrop::after{content:'';position:absolute;inset:0;background:#062b301a;pointer-events:none}
.film-collage{position:relative;width:100%;height:100%;max-width:1800px;margin:auto}
.film-arrival{position:absolute;transform-origin:center}
.film-depth{position:relative}
.film-arrival--ticket{left:5.5%;top:24%;width:34%;z-index:3}
.film-arrival--shore{left:40%;top:17%;width:min(29%,56svh);z-index:6;pointer-events:none}
.film-arrival--practice{left:32%;top:60%;width:min(29%,54svh);z-index:4;pointer-events:none}
.film-arrival--water{left:6%;top:44%;width:min(19.5%,36svh);z-index:2;pointer-events:none}
.film-arrival--stamp{left:25.5%;top:87%;width:8.5%;z-index:6;pointer-events:none}
.film-arrival--between{left:69%;top:14%;width:min(25%,48svh);z-index:3}
.film-arrival--out{left:64%;top:56%;width:min(29%,54svh);z-index:5}
/* Hold the assembled rest positions without seven continuously drifting layers. */
.film-collection--motion .film-arrival--ticket{top:calc(24% - min(4svh,40px))}
.film-collection--motion .film-arrival--shore{top:calc(17% - min(5svh,50px))}
.film-collection--motion .film-arrival--practice{top:calc(60% - min(7svh,70px))}
.film-collection--motion .film-arrival--water{top:calc(44% - min(5svh,50px))}
.film-collection--motion .film-arrival--stamp{top:calc(87% - min(8svh,80px))}
.film-collection--motion .film-arrival--between{top:calc(14% - min(6svh,60px))}
.film-collection--motion .film-arrival--out{top:calc(56% - min(10svh,100px))}
.film-arrival:focus-within{z-index:9}
.film-card{position:relative;min-width:0;isolation:isolate;color:var(--ink);transform:rotate(var(--card-turn,-4deg))}
.film-card--ticket{padding:clamp(28px,3vw,52px);--card-turn:-5deg}
.film-card--ticket::before{content:'';position:absolute;inset:-15px -20px -15px;z-index:-1;background:url('assets/instructors/ivory-sheet.webp') center/100% 100% no-repeat;filter:drop-shadow(0 1px 1px #322a2366) drop-shadow(2px 4px 3px #322a2333);pointer-events:none}
.film-folder{position:absolute;inset:-32px -25px -20px -23px;z-index:-2;background:url('assets/instructors/kraft-folder.webp') center/100% 100% no-repeat;transform:rotate(3deg);filter:drop-shadow(1px 3px 2px #203e4b44);pointer-events:none}
.film-link{position:relative;display:block;text-decoration:none;color:inherit}
.film-link:focus-visible{outline:3px solid var(--ink);outline-offset:8px}
.film-ticket-link{display:flex;flex-direction:column;min-height:clamp(280px,38svh,390px)}
.film-card-topline{display:flex;justify-content:space-between;align-items:baseline;gap:8px 14px;font-size:10px;line-height:1.6}
.film-card--ticket .film-card-topline{text-transform:uppercase;letter-spacing:.035em}
.film-card--ticket h2{margin:clamp(26px,4svh,44px) 0 32px;font:400 clamp(36px,3.6vw,64px)/1.13 var(--font-display);letter-spacing:-.07em}
.film-card--ticket h2>span{display:block;margin-top:7px;color:var(--paper-stock-rust)}
.film-caption{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:auto}
.film-card--ticket .film-caption{align-items:flex-start;flex-direction:column;gap:4px}
.film-caption h3{margin:0;font:700 clamp(15px,1.35vw,22px)/1.5 var(--font-body);letter-spacing:-.045em}
.film-caption-note{margin:7px 0 0;font-size:11px;line-height:1.7}
.film-card--photo{--card-turn:-6deg}
.film-card--photo::before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;aspect-ratio:1402/1122;z-index:2;background:url('assets/films/ivory-photo-mount.webp') center/100% 100% no-repeat;pointer-events:none}
.film-card--photo::after{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/instructors/ivory-sheet.webp') center/100% 100% no-repeat;pointer-events:none}
.film-card--out{--card-turn:5deg}
/* Paper owns its contact shadow; photos, text and sticker shadows stay outside the filter. */
.film-card--photo::after,.film-lesson-print::after,.film-session-print::before{filter:drop-shadow(1px 3px 2px #322a2340)}
.film-lesson-print{position:relative;isolation:isolate;margin:0;padding:10.5% 11.2% 5.3%;transform:rotate(var(--print-turn,7deg))}
.film-lesson-print::before{content:'';position:absolute;inset:0 0 auto;aspect-ratio:1402/1122;z-index:2;background:url('assets/films/ivory-photo-mount.webp') center/100% 100% no-repeat;pointer-events:none}
.film-lesson-print::after{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/instructors/ivory-sheet.webp') center/100% 100% no-repeat;pointer-events:none}
.film-lesson-print--practice{--print-turn:-8deg}
.film-lesson-image{display:block;width:100%;height:auto;aspect-ratio:1.68;object-fit:cover;object-position:50% 60%}
.film-lesson-print figcaption{position:relative;z-index:3;margin:9% 0 3%;font:400 clamp(17px,1.5vw,24px)/1.4 'Bad Script','Segoe Print',cursive}
.film-lesson-print>.film-tape{width:26%;left:37%;top:-2%;transform:rotate(-8deg)}
.film-lesson-print--practice>.film-tape{left:8%;top:-2%;transform:rotate(13deg)}
.film-sticker{position:absolute;z-index:5;display:block;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(var(--shadow-paper-cutout))}
.film-sticker--shaka{width:21%;left:-8%;top:-18%;transform:rotate(-16deg)}
.film-sticker--coconut{width:24%;left:-10%;bottom:-24%;transform:rotate(11deg)}
.film-sticker--turtle{width:32%;right:-14%;bottom:-13%;transform:rotate(17deg)}
.film-sticker--crab{position:relative;width:100%;transform:rotate(-12deg)}
.film-sticker--shell{width:25%;right:-8%;top:-12%;transform:rotate(19deg)}
.film-sticker--fin{width:25%;left:-12%;bottom:-13%;transform:rotate(-16deg)}
.film-paper-piece{position:absolute;display:block;pointer-events:none;background:url('assets/fast/film-paper-ephemera.webp') no-repeat;filter:drop-shadow(var(--shadow-paper-cutout))}
.film-paper-piece--map{left:71%;top:-17%;width:75%;aspect-ratio:510/420;z-index:-3;background-size:301.18% 243.81%;background-position:49.4% 99%;transform:rotate(11deg)}
.film-paper-piece--stamp{right:-3%;top:-18%;width:17%;aspect-ratio:430/490;z-index:5;background-size:357.21% 208.98%;background-position:46% 11.2%;transform:rotate(14deg)}
.film-paper-piece--tag{right:-19%;top:-14%;width:26%;aspect-ratio:390/570;z-index:2;background-size:393.85% 179.65%;background-position:2.6% 0;transform:rotate(15deg)}
.film-paper-piece--matchbook{right:-9%;top:5%;width:24%;aspect-ratio:414/390;z-index:5;background-size:371.01% 262.56%;background-position:3.5% 96.5%;transform:rotate(17deg)}
.film-label-print{position:absolute;top:-25%;left:41%;width:29%;height:auto;z-index:-2;transform:rotate(12deg);pointer-events:none;filter:drop-shadow(var(--shadow-paper-cutout))}
.film-print-clip{position:absolute;right:20%;top:-12%;width:11%;height:auto;z-index:6;transform:rotate(-8deg);pointer-events:none}
.film-session-print{position:relative;isolation:isolate;margin:0;padding:12px 12px 22px;transform:rotate(-11deg)}
.film-session-print::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/instructors/ivory-sheet.webp') center/100% 100% no-repeat;pointer-events:none}
.film-session-print>img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.film-session-print figcaption{margin:10px 0 0;font:400 clamp(12px,1.1vw,18px)/1.5 'Bad Script','Segoe Print',cursive}
.film-session-print>.film-tape{width:38%;left:30%;top:-3%;transform:rotate(8deg)}
.film-card--photo .film-link{padding:10.5% 11.2% 5.3%;box-sizing:border-box;aspect-ratio:1402/1122}
.film-still{position:relative;aspect-ratio:1.68;overflow:hidden;background:var(--sea)}
.film-still img{display:block;width:100%;height:100%;object-fit:cover}
.film-photo-caption{position:relative;z-index:3;margin:7% 0 0}
.film-photo-caption h3{margin:0 0 4px;font:400 clamp(16px,1.5vw,25px)/1.4 'Bad Script','Segoe Print',cursive;letter-spacing:-.02em}
.film-card--photo .film-card-topline{font-size:9px}
.film-play-mark{position:absolute;right:11px;bottom:11px;z-index:3;display:grid;place-items:center;min-width:44px;min-height:44px;color:var(--paper);font-size:24px;text-shadow:0 1px 4px #001c29;transition:color .18s ease-out}
.film-link:hover .film-play-mark,.film-link:focus-visible .film-play-mark{color:var(--sun)}
.film-link:active .film-play-mark{color:var(--paper-stock-coral)}
.film-tape{position:absolute;z-index:4;display:block;width:var(--tape-width);aspect-ratio:var(--tape-aspect-ratio);pointer-events:none;background-image:var(--texture-tape);background-repeat:no-repeat}
.film-tape--clear{background-size:201.59% 385.65%;background-position:4.25% 10.65%}
.film-tape--ivory{background-size:201.59% 385.65%;background-position:4.25% 52.36%}
.film-tape--blue{background-size:221.75% 394.22%;background-position:98.05% 53.47%}
.film-card--ticket>.film-tape{width:110px;left:28%;top:-24px;transform:rotate(-8deg)}
.film-card--between>.film-tape{width:100px;left:42%;top:0;transform:rotate(8deg)}
.film-card--out>.film-tape{width:90px;left:55%;top:-4px;transform:rotate(-9deg)}
.film-runway{display:none}
.film-collection--motion .film-scene{position:sticky;top:0}
.film-collection--motion .film-runway{display:block;height:100svh}
.film-collection--focus .film-arrival{opacity:1!important;transform:none!important;pointer-events:auto!important}
html[lang=vi] .film-card--ticket h2{font-size:clamp(28px,2.85vw,51px)}
.film-dialog{width:min(1100px,calc(100% - 48px));max-height:calc(100svh - 48px);padding:0 24px 24px;border:1px solid #f3edda44;background:var(--sea);color:var(--paper);overflow:auto}
.film-dialog::backdrop{background:#031b26ed}
.film-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.film-dialog h2{margin:0;font:400 clamp(16px,3vw,24px)/1.4 var(--font-display)}
.film-dialog button{display:flex;align-items:center;gap:18px;border:0;background:none;min-height:44px;color:inherit;font-size:11px}
.film-dialog button span{font-size:29px}
.film-dialog video{display:block;width:100%;max-height:calc(100svh - 180px);background:#000}
.film-player-error{font-size:12px;line-height:1.8}.film-player-error a{color:var(--sun)}
html.film-open{overflow:hidden}
@media(min-width:1600px){.film-hero-copy{left:9%;bottom:18%}}
@media(min-width:900px) and (max-width:1199px){
 .film-arrival--water{top:64%;left:5%;width:20%}
 .film-collection--motion .film-arrival--water{top:calc(64% - min(5svh,50px))}
}
@media(min-width:900px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
 .film-collection:not(.film-collection--motion) .film-scene{height:120svh}
}
@media(max-width:760px){
 .film-hero{min-height:0}
 .film-masthead{top:30px;left:20px;right:auto;font-size:8px;line-height:1.7}.film-masthead>span{max-width:calc(50vw - 92px)}
 .film-hero-copy{left:7%;right:5%;bottom:24%}.film-hero h2{font-size:clamp(50px,12vw,91px);line-height:1.13;letter-spacing:-.07em}.film-hero h2 span:last-child{margin-left:3%}
 .film-dialog{width:calc(100% - 24px);padding:0 12px 12px}.film-dialog-bar{gap:10px}.film-dialog button{gap:8px}
}
@media(max-width:360px){.film-masthead{left:16px}.film-masthead>span{font-size:7px}.film-hero h2{font-size:12vw}}
@media(max-height:600px) and (min-aspect-ratio:4/3){.film-masthead{top:22px}.film-hero-copy{bottom:22%;left:8%}.film-hero h2{font-size:clamp(48px,10vh,80px)}}
@media(prefers-reduced-motion:reduce){.film-still img{transition:none;transform:none!important}.lang-drop,.lang-trail,.language-switch--off{transition:none}}

/* Content-led layout for touch, short viewports and reduced motion. */
@media(max-width:899px),(max-height:619px),(prefers-reduced-motion:reduce){
 .film-scene{height:auto;min-height:0;padding:116px 10% 80px}
 .film-collage{display:flex;flex-direction:column;gap:42px;height:auto}
 .film-arrival{position:relative;left:auto;top:auto;width:100%;max-width:620px}
 .film-arrival--ticket{align-self:flex-start}
 .film-arrival--shore,.film-arrival--practice{width:86%;max-width:400px;align-self:flex-end;margin:10px -2% 0 0}
 .film-arrival--practice{align-self:flex-start;margin:0 0 0 -2%}
 .film-arrival--water{width:66%;max-width:260px;align-self:flex-end;margin:-20px 1% 0 0}
 .film-arrival--between,.film-arrival--out{width:85%;max-width:400px;align-self:flex-end;margin-right:-3%}
 .film-arrival--out{align-self:flex-start;margin-left:0;margin-right:0}
 .film-arrival--stamp{position:absolute;left:auto;right:-8%;top:47%;width:23%;max-width:110px}
 .film-sticker--shaka{width:23%;top:-14%;left:-5%}
 .film-sticker--coconut{width:22%;left:-9%;bottom:-18%}
 .film-sticker--turtle{right:-10%;bottom:-10%;width:29%}
 .film-sticker--shell{right:-5%;top:-9%;width:24%}
 .film-sticker--fin{left:-10%;width:25%}
 .film-lesson-print figcaption{font-size:clamp(17px,5vw,26px)}
 .film-paper-piece--map{left:59%;top:-9%;width:58%}
 .film-label-print{top:-16%;left:39%;width:31%}
 .film-paper-piece--stamp{right:-2%;top:-14%;width:16%}
 .film-paper-piece--tag{right:-16%;top:-11%;width:25%}
 .film-session-print{padding:10px 10px 18px}
 .film-session-print figcaption{font-size:15px}
 .film-card--ticket{padding:22px 18px}
 .film-card--ticket::before{inset:-8px -10px}
 .film-folder{inset:-22px -13px -14px -12px}
 .film-ticket-link{min-height:260px}
 .film-card--ticket h2{font-size:clamp(32px,7.2vw,64px);margin:32px 0 30px}
 .film-card-topline{flex-wrap:wrap;font-size:8px;gap:4px 8px}
 .film-caption{gap:4px 12px}
 .film-caption h3{font-size:14px}
 .film-caption-note{font-size:10px}
 .film-photo-caption h3{font-size:clamp(19px,5vw,28px);margin-bottom:2px}
 .film-card--photo .film-card-topline{font-size:8px}
 .film-play-mark{right:4px;bottom:4px;font-size:21px}
 .film-card--ticket>.film-tape{width:80px;top:-17px}
 .film-card--between>.film-tape{width:76px}
 .film-card--out>.film-tape{width:68px}
 html[lang=vi] .film-card--ticket h2{font-size:clamp(26px,5.8vw,52px)}
}