/* Full-screen mangrove growth scene. Kept separate from the main page styles. */
.intro.mangrove-intro{background:#061e1c;color:#e6eddb;isolation:isolate;transition:opacity 1s ease,filter 1.1s ease;transform:none;display:block}
.mangrove-intro::before,.mangrove-intro::after{display:none}
.mangrove-intro .mangrove-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.intro-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 42%,transparent 30%,#0317166e 100%),linear-gradient(0deg,#04191aea,transparent 31%)}
.mangrove-intro .intro-overline{position:absolute;left:20px;right:20px;top:max(27px,4.5vh);font:9px 'DM Sans',sans-serif;letter-spacing:3px;color:#b3c7a4;z-index:3}
.mangrove-intro .intro-seed{position:absolute;top:10%;left:10%;width:80%;height:54%;margin:0;padding:0;transform:none;z-index:2;border-radius:40%;transition:none}
.mangrove-intro .intro-seed:focus-visible{outline:1px solid #b8d09255;outline-offset:-10px}
.mangrove-intro .intro-touch{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font:8px 'DM Sans',sans-serif;letter-spacing:2.5px;white-space:nowrap;color:#bcccaa;display:flex;align-items:center;gap:12px;transition:opacity .35s}
.intro-touch-ring{display:grid;place-items:center;width:33px;height:33px;border:1px solid #a9bd8e77;border-radius:50%;font-size:17px;animation:gentle-pulse 2.5s ease-in-out infinite}
.intro-copy{position:absolute;left:20px;right:20px;bottom:max(22px,3vh);z-index:3;display:flex;align-items:center;flex-direction:column}
.mangrove-intro .intro-phase{color:#c1d6a4;font-family:var(--si,'Noto Sans Sinhala',sans-serif);font-size:10px;min-height:20px;line-height:2;letter-spacing:.2px;transition:opacity .3s;margin:0 0 7px}
.mangrove-intro h1{color:#e7edda;font-size:43px;font-weight:500;line-height:1.65;margin:0;letter-spacing:-1px;text-shadow:0 3px 24px #0005}
.mangrove-intro .intro-subtitle{font-family:var(--si,'Noto Sans Sinhala',sans-serif);font-size:11px;line-height:1.9;color:#b3c6b2;margin-top:4px}
.mangrove-intro .intro-subtitle span{font:10px 'DM Sans',sans-serif;display:block;color:#7f9b90;letter-spacing:.2px;margin-top:5px}
.intro-actions{display:flex;align-items:center;gap:23px;margin-top:20px}
.mangrove-intro .intro-enter{background:#d1e1a7;color:#244536;border:1px solid #dae8b5;margin:0;padding:13px 22px;font-size:10px;border-radius:4px;transition:opacity .3s,background .3s;min-width:220px}
.mangrove-intro .intro-enter:hover{background:#e0edc1}
.mangrove-intro .intro-enter span{margin-left:20px}
.mangrove-intro .intro-skip{margin:0;padding:12px 0;color:#819f91;font-size:9px}
.intro-growth-track{height:2px;background:#7e9f6d25;width:160px;margin-top:21px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.intro-growth-track>span{display:block;height:100%;background:#b9ce8a;transform:scaleX(0);transform-origin:left}
.mangrove-intro.growing .intro-touch{opacity:0}
.mangrove-intro.growing .intro-seed{pointer-events:none;transform:none}
.mangrove-intro.growing .intro-enter{opacity:.45;pointer-events:none}
.mangrove-intro.growing .intro-growth-track{opacity:1}
.mangrove-intro.growing .intro-growth-track>span{animation:grow-progress 4.9s linear both}
.mangrove-intro.leaving{opacity:0;filter:blur(5px) brightness(1.4);transform:none;pointer-events:none}
@keyframes grow-progress{to{transform:scaleX(1)}}
@media(max-width:650px){.mangrove-intro .intro-overline{font-size:8px;letter-spacing:2.2px;top:max(25px,4vh)}.mangrove-intro h1{font-size:36px}.mangrove-intro .intro-subtitle{font-size:10px}.mangrove-intro .intro-subtitle span{font-size:9px}.mangrove-intro .intro-phase{font-size:9px}.intro-copy{bottom:25px}.intro-actions{gap:18px;margin-top:17px}.mangrove-intro .intro-enter{padding:12px 15px;min-width:190px;font-size:9px}.mangrove-intro .intro-skip{font-size:8px}.intro-growth-track{margin-top:17px;width:140px}.mangrove-intro .intro-touch{font-size:7px;bottom:-7px}.mangrove-intro .intro-seed{top:8%;height:54%}}
@media(max-height:660px){.mangrove-intro .intro-overline{top:17px}.mangrove-intro h1{font-size:28px}.intro-copy{bottom:13px}.mangrove-intro .intro-subtitle{font-size:9px}.mangrove-intro .intro-subtitle span{display:none}.intro-actions{margin-top:10px}.intro-growth-track{margin-top:9px}.mangrove-intro .intro-phase{font-size:9px;margin-bottom:0}.mangrove-intro .intro-enter{padding:10px 15px;min-width:185px}.mangrove-intro .intro-touch{bottom:-3px}}
@media(prefers-reduced-motion:reduce){.mangrove-intro,.intro-touch-ring,.intro-growth-track>span{animation:none!important;transition:none!important}}

.mangrove-intro .intro-seed:focus-visible{outline:none}.mangrove-intro .intro-enter:focus-visible,.mangrove-intro .intro-skip:focus-visible{outline:2px solid #d1e1a7;outline-offset:5px}html[lang=en] .mangrove-intro h1{font-family:Georgia,serif;font-size:52px;letter-spacing:1px}.mangrove-intro .intro-subtitle>span:first-child{font-size:12px;color:#b3c6b2}.mangrove-intro .intro-enter span:first-child{margin-left:0}

/* Film edition: let the image breathe, and keep copy away from the tree. */
.mangrove-intro{background:#071d18 url('/assets/mangrove-intro-poster.jpg') center/cover no-repeat!important}
.mangrove-intro .intro-film{object-fit:contain;object-position:center 35%;height:80%;top:0;filter:saturate(.88)}
.intro-vignette{background:linear-gradient(0deg,#061b17 0%,#061b17f0 19%,#061b1740 43%,transparent 65%),linear-gradient(180deg,#04171085,transparent 22%)}
.mangrove-intro .intro-seed{top:8%;height:58%;border-radius:0}
.mangrove-intro .intro-touch{display:none}
.intro-copy{bottom:4vh}.mangrove-intro .intro-phase{font-family:'DM Sans',var(--si,'Noto Sans Sinhala',sans-serif);letter-spacing:.8px;color:#c8d7b5}
html[lang=en] .mangrove-intro h1{font-size:clamp(42px,4vw,62px);font-weight:400;letter-spacing:2px;line-height:1.3}
.mangrove-intro .intro-subtitle>span:last-child{display:none}
.mangrove-intro .intro-enter{min-width:195px;padding:15px 25px;background:#d9e4bc;border-radius:2px}
.mangrove-intro.growing .intro-growth-track>span{animation:none}
.mangrove-intro.growing .intro-enter{visibility:hidden}
.mangrove-intro.growing .intro-actions{margin-top:8px}
.mangrove-intro.leaving{filter:none;transition:opacity 1s ease}
@media(max-width:650px){.mangrove-intro{background-size:auto 100%!important}.mangrove-intro .intro-film{top:11%;height:52%;object-position:center;object-fit:contain;background:#0b241b66}.intro-vignette{background:linear-gradient(0deg,#061b17 0%,#061b17ed 31%,#061b1720 65%),linear-gradient(180deg,#061b17ad,transparent 25%)}.intro-copy{bottom:8vh}.mangrove-intro .intro-overline{top:6vh}.mangrove-intro .intro-phase{font-size:9px}.mangrove-intro .intro-subtitle>span:first-child{font-size:11px}.intro-actions{margin-top:24px}.mangrove-intro .intro-seed{top:12%;height:49%}}

.mangrove-intro{background:#071d18!important}.mangrove-intro::before{display:block;position:absolute;inset:-35px;width:auto;height:auto;border:0;border-radius:0;background:url('/assets/mangrove-intro-poster.jpg') center/cover;filter:blur(30px) brightness(.45);opacity:.55;z-index:0;pointer-events:none}.mangrove-intro .intro-film{z-index:0}

/* Full-bleed original-quality film: no blurred duplicate background. */
.mangrove-intro::before{display:none!important}
.mangrove-intro .intro-film{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;background:#071d18}
.intro-vignette{background:linear-gradient(0deg,rgba(3,19,15,.90) 0%,rgba(3,19,15,.55) 19%,transparent 49%),linear-gradient(180deg,rgba(3,19,15,.30),transparent 18%)}
.mangrove-intro .intro-seed{inset:0;width:100%;height:68%}
@media(max-width:650px){.mangrove-intro .intro-film{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:none}.intro-copy{bottom:6vh}.intro-vignette{background:linear-gradient(0deg,rgba(3,19,15,.94),rgba(3,19,15,.62) 25%,transparent 62%)}.mangrove-intro .intro-seed{inset:0;width:100%;height:65%}}

/* The final film frame lifts away as the real landing page arrives beneath it. */
.mangrove-intro{clip-path:inset(0 0 0 0);will-change:clip-path,opacity}
.mangrove-intro.leaving{clip-path:inset(0 0 100% 0);opacity:0;filter:none;transition:clip-path 1.45s cubic-bezier(.76,0,.24,1),opacity 1.4s ease}
.mangrove-intro.leaving .intro-copy{opacity:0;transform:translateY(-18px);transition:opacity .35s ease,transform .5s ease}
body.page-arriving .site-header{animation:arrival-header 1s .5s both cubic-bezier(.2,.75,.25,1)}
body.page-arriving main{animation:arrival-page 1.7s both cubic-bezier(.2,.75,.25,1)}
body.page-arriving .hero-content>.eyebrow{animation:arrival-item .9s .45s both}
body.page-arriving .hero h1>span{display:inline-block;animation:arrival-item 1s .58s both cubic-bezier(.2,.75,.25,1)}
body.page-arriving .hero h1>span.accent{animation-delay:.76s}
body.page-arriving .hero-content>p{animation:arrival-item 1s .9s both}
body.page-arriving .hero-buttons{animation:arrival-item 1s 1.05s both}
body.page-arriving .hero-note{animation:arrival-item 1s 1.2s both}
@keyframes arrival-page{from{transform:translateY(45px)}to{transform:translateY(0)}}
@keyframes arrival-header{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes arrival-item{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mangrove-intro.leaving{clip-path:none;transition:none}body.page-arriving main,body.page-arriving .site-header,body.page-arriving .hero-content>*{animation:none!important}}

.sound-toggle{position:fixed;right:20px;bottom:20px;z-index:150;background:#102f27e8;color:#e2ecd1;border:1px solid #a6bd8655;border-radius:24px;padding:11px 17px;font:11px 'DM Sans',var(--si,'Noto Sans Sinhala',sans-serif);box-shadow:0 4px 20px #0002;backdrop-filter:blur(8px)}.sound-toggle:hover{background:#254a37}.sound-toggle:focus-visible{outline:2px solid #cce0a4;outline-offset:4px}@media(max-width:650px){.sound-toggle{right:12px;bottom:12px;padding:9px 13px;font-size:10px}}

/* Centered brand-first autoplay presentation. */
.mangrove-intro .intro-copy{top:50%;bottom:auto;left:20px;right:20px;transform:translateY(-50%);text-align:center;gap:8px}
.intro-brand-logo{display:block;width:190px;height:126px;flex-shrink:0;filter:drop-shadow(0 3px 5px #0006);animation:brand-emerge 1s ease both;order:0}
.mangrove-intro h1{order:1;animation:brand-emerge 1.1s ease both;margin:0}
.mangrove-intro .intro-subtitle{order:2;margin:0}.mangrove-intro .intro-phase{order:3;margin:12px 0 0}.intro-actions{order:4;justify-content:center;margin-top:7px}.intro-growth-track{order:5;margin-top:12px}
.mangrove-intro.growing .intro-enter{display:none}.mangrove-intro .intro-seed{display:none}
.intro-vignette{background:radial-gradient(ellipse at center,rgba(3,19,15,.46),rgba(3,19,15,.12) 65%),linear-gradient(0deg,rgba(3,19,15,.55),transparent 65%)}
@keyframes brand-emerge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.mangrove-intro .intro-copy{top:50%;bottom:auto;left:18px;right:18px}.intro-brand-logo{width:150px;height:100px}html[lang=en] .mangrove-intro h1{font-size:44px}.mangrove-intro .intro-phase{max-width:290px;line-height:1.8}.intro-vignette{background:radial-gradient(ellipse at center,rgba(3,19,15,.55),rgba(3,19,15,.12) 75%)}}
@media(prefers-reduced-motion:reduce){.intro-brand-logo,.mangrove-intro h1{animation:none!important}}
.mangrove-intro.leaving .intro-copy{transform:translateY(calc(-50% - 18px))}

/* Clean, borderless logo and restrained title hierarchy. */
.intro-brand-logo{width:210px;height:140px;background:none!important;border:0!important;outline:0!important;box-shadow:none!important;filter:drop-shadow(0 3px 8px rgba(0,0,0,.32))}
.mangrove-intro .intro-copy{gap:12px}.mangrove-intro h1{font-weight:400;letter-spacing:1px;text-shadow:0 2px 18px rgba(0,0,0,.38)}
.mangrove-intro .intro-phase{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
.mangrove-intro .intro-subtitle{color:#e0e9d3}.mangrove-intro .intro-subtitle>span:first-child{color:#e0e9d3;letter-spacing:.7px}
.mangrove-intro .intro-actions{margin-top:13px}.mangrove-intro .intro-skip{color:#cedac4;text-decoration:none;border-bottom:1px solid #b7c7a16b;padding-bottom:5px}
@media(max-width:650px){.intro-brand-logo{width:185px;height:123px}.mangrove-intro .intro-copy{gap:10px}html[lang=en] .mangrove-intro h1{font-size:48px}.mangrove-intro .intro-subtitle>span:first-child{font-size:11px;letter-spacing:.3px}}

/* Large living logo: lettering and roots remain still, crown and water move separately. */
.intro-brand-logo{width:min(620px,82vw);height:auto;max-height:48svh;overflow:visible}
.logo-leaf-sway{transform-origin:350px 500px;animation:logo-breeze 5.8s ease-in-out infinite}
.logo-water-flow{animation:logo-current 7s ease-in-out infinite}
.mangrove-intro .intro-copy{gap:7px}html[lang=en] .mangrove-intro h1{font-size:clamp(35px,3.6vw,48px);line-height:1.2}.mangrove-intro .intro-subtitle{margin-top:5px}
@keyframes logo-breeze{0%,100%{transform:rotate(-.6deg) skewX(-.25deg)}50%{transform:rotate(.8deg) skewX(.3deg)}}
@keyframes logo-current{0%,100%{transform:translateX(-3px);opacity:.94}50%{transform:translateX(4px);opacity:1}}
@media(max-width:650px){.intro-brand-logo{width:90vw;height:auto;max-height:43svh}.mangrove-intro .intro-copy{left:12px;right:12px;gap:9px}html[lang=en] .mangrove-intro h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.logo-leaf-sway,.logo-water-flow{animation:none!important;filter:none!important}}

/* Floating foreground emblem, with independent sunlight and water depth. */
.intro-brand-logo{transform-origin:50% 60%;transform-style:preserve-3d;filter:drop-shadow(0 20px 16px rgba(0,0,0,.65)) drop-shadow(0 1px 1px rgba(225,245,195,.30));animation:logo-float-depth 7s ease-in-out infinite;will-change:transform}
.logo-leaf-sway{animation:logo-breeze-living 4.8s ease-in-out infinite}
.logo-water-flow{animation:logo-current-living 5.7s ease-in-out infinite}
.logo-sun-drift{transform-origin:1325px 450px;animation:logo-sunlight 8s ease-in-out infinite}
.mangrove-intro .intro-film{filter:blur(2.5px) brightness(.66) saturate(.88);transform:scale(1.025);animation:video-soft-focus 9s ease-in-out infinite}
@keyframes logo-float-depth{0%,100%{transform:perspective(1000px) translateY(3px) rotateX(2deg) rotateY(-3deg)}50%{transform:perspective(1000px) translateY(-9px) rotateX(-1deg) rotateY(3deg)}}
@keyframes logo-breeze-living{0%,100%{transform:rotate(-.9deg) skewX(-.35deg)}50%{transform:rotate(1.2deg) skewX(.5deg)}}
@keyframes logo-current-living{0%,100%{transform:translate(-5px,1px);opacity:.94}50%{transform:translate(6px,-1px);opacity:1}}
@keyframes logo-sunlight{0%,100%{transform:translate(-4px,1px);filter:brightness(1)}50%{transform:translate(7px,-2px);filter:brightness(1.10)}}
@keyframes video-soft-focus{0%,100%{filter:blur(2px) brightness(.66) saturate(.88)}50%{filter:blur(3px) brightness(.62) saturate(.88)}}
@media(prefers-reduced-motion:reduce){.intro-brand-logo,.logo-sun-drift,.mangrove-intro .intro-film{animation:none!important;transform:none!important}.mangrove-intro .intro-film{filter:blur(2px) brightness(.66)}}

/* A deliberate gesture starts the film and audible recording together. */
.mangrove-intro:not(.growing) .intro-film{visibility:hidden}
.mangrove-intro:not(.growing){background:#071d18 url(/assets/mangrove-intro-poster.jpg) center/cover no-repeat!important}
.intro-audio-hint{order:5;color:#cedac4;font:11px/1.8 "DM Sans",sans-serif;margin:5px 0 0;text-align:center}
.intro-audio-hint span{display:block;font-size:10px}
.mangrove-intro.growing .intro-audio-hint{display:none}

/* Welcome composition: one clear action with a quiet secondary exit. */
.mangrove-intro:not(.growing) .intro-vignette{background:radial-gradient(ellipse at 50% 46%,#061c1755 0%,#03130fe0 100%),linear-gradient(0deg,#03130fc9,transparent 80%)}
.mangrove-intro:not(.growing) .intro-copy{width:min(560px,calc(100% - 40px));left:50%;right:auto;top:50%;transform:translate(-50%,-50%);gap:0}
.mangrove-intro:not(.growing) .intro-brand-logo{width:min(420px,72vw);max-height:34svh;margin-bottom:15px}
html[lang=en] .mangrove-intro:not(.growing) h1{font-size:clamp(40px,5vw,64px);line-height:1.12;letter-spacing:1px}
.mangrove-intro:not(.growing) .intro-subtitle{margin:16px 0 0}
.mangrove-intro:not(.growing) .intro-subtitle>span:first-child{font-size:12px;line-height:1.8;letter-spacing:.4px;color:#d3dfca}
.mangrove-intro:not(.growing) .intro-actions{flex-direction:column;gap:18px;margin-top:30px;width:100%}
.mangrove-intro:not(.growing) .intro-enter{display:flex;align-items:center;justify-content:space-between;width:240px;min-height:54px;padding:16px 24px;border-radius:30px;border:1px solid #e1ecc3;background:#dbe7bd;color:#163e2c;font:500 13px 'DM Sans',sans-serif;box-shadow:0 8px 32px #0003;transition:transform .2s,background .2s,box-shadow .2s}
.mangrove-intro:not(.growing) .intro-enter:hover{transform:translateY(-2px);background:#edf4d9;box-shadow:0 12px 36px #0004}
.mangrove-intro:not(.growing) .intro-enter span:last-child{font-size:19px;margin:0}
.mangrove-intro:not(.growing) .intro-skip{font:11px 'DM Sans',sans-serif;letter-spacing:.3px;color:#b2c3b3;border-bottom:0;padding:5px 12px;min-height:32px}
.mangrove-intro:not(.growing) .intro-skip:hover{color:#f0f3df;text-decoration:underline;text-underline-offset:5px}
.intro-audio-hint{font-size:10px;line-height:1.8;color:#a8bba9;letter-spacing:.2px;margin-top:17px;max-width:300px}
.intro-audio-hint span{font:9px/1.9 var(--si,'Noto Sans Sinhala',sans-serif);color:#a8bba9;margin-top:3px}
.mangrove-intro:not(.growing) .intro-growth-track{display:none}
@media(max-width:650px){.mangrove-intro:not(.growing) .intro-brand-logo{width:min(340px,80vw);max-height:30svh;margin-bottom:16px}.mangrove-intro:not(.growing) .intro-actions{margin-top:25px;gap:12px}.mangrove-intro:not(.growing) .intro-enter{width:min(250px,100%);min-height:54px}.mangrove-intro:not(.growing) .intro-subtitle{margin-top:13px}.intro-audio-hint{margin-top:13px}}
@media(max-height:620px){.mangrove-intro:not(.growing) .intro-brand-logo{max-height:25svh;width:auto;margin-bottom:6px}.mangrove-intro:not(.growing) .intro-actions{margin-top:16px;gap:5px}.mangrove-intro:not(.growing) .intro-subtitle{margin-top:8px}.intro-audio-hint{margin-top:7px}.mangrove-intro:not(.growing) .intro-overline{top:15px}}
@media(prefers-reduced-motion:reduce){.mangrove-intro:not(.growing) .intro-enter{transition:none}}

/* Separate welcome screen unlocks audio before the full-size film intro. */
.welcome-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#071d18;color:#e6eddb;isolation:isolate;padding:28px;text-align:center;overflow:auto}
.welcome-screen[hidden]{display:none}
.welcome-screen::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#031914bc,#031914ee),url('/assets/mangrove-intro-poster.jpg') center/cover;opacity:.7}
.welcome-content{width:min(430px,100%);display:flex;flex-direction:column;align-items:center;padding:32px 0}
.welcome-club{font:9px/1.8 'DM Sans',sans-serif;letter-spacing:3px;color:#b2c4aa;margin:0 0 30px}
.welcome-content h1{font:400 clamp(44px,8vw,68px)/1.15 Georgia,serif;letter-spacing:1px;margin:0;color:#e8eedb}
.welcome-tagline{font:12px/1.9 'DM Sans',sans-serif;color:#c1d1b9;margin:16px 0 36px}
.welcome-enter{display:flex;align-items:center;justify-content:space-between;gap:40px;width:min(270px,100%);min-height:56px;padding:16px 25px;border:1px solid #e0ebc1;border-radius:32px;background:#dce8bf;color:#173e2c;font:500 13px 'DM Sans',sans-serif;box-shadow:0 10px 40px #0003;cursor:pointer;transition:transform .2s,background .2s}
.welcome-enter:hover{background:#edf4d9;transform:translateY(-2px)}
.welcome-enter:focus-visible{outline:2px solid #dce8bf;outline-offset:6px}
.welcome-enter span:last-child{font-size:21px}
.welcome-audio{font:10px/1.8 'DM Sans',sans-serif;color:#aebfa7;margin:24px 0 0}
.welcome-audio span{display:block;font:9px/2 var(--si,'Noto Sans Sinhala',sans-serif);margin-top:4px}
.mangrove-intro.growing .intro-brand-logo{width:min(620px,82vw);height:auto;max-height:48svh}
@media(max-width:650px){.mangrove-intro.growing .intro-brand-logo{width:90vw;max-height:43svh}.welcome-club{font-size:8px;letter-spacing:2px}.welcome-tagline{font-size:11px}}
@media(prefers-reduced-motion:reduce){.welcome-enter{transition:none}}

/* Film composition: the animated project emblem is the only foreground mark. */
.mangrove-intro.growing .intro-copy{top:50%;left:0;right:0;bottom:auto;width:100%;transform:translateY(-50%);gap:0;padding:20px;box-sizing:border-box}
.mangrove-intro.growing h1,.mangrove-intro.growing .intro-subtitle,.mangrove-intro.growing .intro-actions,.mangrove-intro.growing .intro-growth-track,.mangrove-intro.growing .intro-overline{display:none}
.mangrove-intro.growing .intro-brand-logo{display:block;width:min(1000px,90vw);height:auto;max-height:78svh;aspect-ratio:3/2;margin:0;flex-shrink:1}
.mangrove-intro.film-error .intro-actions{display:flex}
.mangrove-intro.film-error .intro-skip{display:block}
@media(max-width:650px){.mangrove-intro.growing .intro-copy{padding:8px}.mangrove-intro.growing .intro-brand-logo{width:96vw;max-height:76svh}}
@media(max-height:500px) and (min-width:651px){.mangrove-intro.growing .intro-brand-logo{width:auto;height:78svh;max-width:90vw}}

/* Balanced emblem scale and a dedicated bottom-centre skip control. */
.mangrove-intro.growing .intro-brand-logo{width:min(760px,76vw);max-height:65svh}
.mangrove-intro.growing .intro-actions{display:flex;position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;justify-content:center;z-index:5}
.mangrove-intro.growing .intro-copy{position:static;transform:none;padding:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.mangrove-intro.growing .intro-enter{display:none}
.mangrove-intro.growing .intro-skip{display:flex;align-items:center;justify-content:center;min-width:92px;min-height:44px;padding:10px 23px;border:1px solid #d5e3c45c;border-radius:24px;background:#08231ac9;color:#e4ecd9;font:12px 'DM Sans',sans-serif;letter-spacing:.5px;text-decoration:none;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.mangrove-intro.growing .intro-skip:hover{background:#244537;border-color:#d5e3c4}
.mangrove-intro.growing .intro-skip:focus-visible{outline:2px solid #dce8bf;outline-offset:4px}
@media(max-width:650px){.mangrove-intro.growing .intro-brand-logo{width:84vw;max-height:62svh}.mangrove-intro.growing .intro-actions{bottom:max(24px,env(safe-area-inset-bottom))}}
@media(max-height:500px) and (min-width:651px){.mangrove-intro.growing .intro-brand-logo{width:auto;height:62svh;max-width:76vw}}

/* Keep the foreground logo above the film's dark vignette. */
.mangrove-intro.growing .intro-copy{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;z-index:3;transform:none}
.mangrove-intro.growing .intro-brand-logo{opacity:1;filter:brightness(1.12) saturate(1.08) drop-shadow(0 12px 16px #0007)}

/* Refined welcome typography and a truly centred entry action. */
.welcome-screen{padding:28px 24px;background:#061c16}
.welcome-screen::before{background:radial-gradient(ellipse at 50% 42%,#09271b55,#031811e8 85%),linear-gradient(#041b1566,#041b15bb),url('/assets/mangrove-intro-poster.jpg') center/cover;opacity:1}
.welcome-content{width:min(560px,100%);padding:36px 0;text-align:center}
.welcome-club{font-size:9px;letter-spacing:3.8px;line-height:2;color:#bfccae;margin:0 0 32px}
.welcome-content h1{font-size:clamp(48px,7vw,78px);line-height:1.12;letter-spacing:1px;color:#edf0de;text-shadow:0 5px 30px #0003}
.welcome-tagline{font-size:12px;letter-spacing:.35px;line-height:1.9;margin:20px 0 38px;color:#d0dac4}
.welcome-enter{position:relative;justify-content:center;gap:16px;width:min(272px,100%);min-height:58px;padding:17px 28px;font-size:13px;letter-spacing:.35px;background:linear-gradient(135deg,#e4edcb,#ccdca8);border-color:#e5edcc;box-shadow:0 10px 36px #0003,inset 0 1px 0 #fff8}
.welcome-enter span:first-child{margin:0;text-align:center}
.welcome-enter span:last-child{font-size:20px;line-height:1;transform:translateY(-1px);transition:transform .25s}
.welcome-enter:hover span:last-child{transform:translate(4px,-1px)}
.welcome-enter:hover{box-shadow:0 14px 42px #0004,inset 0 1px 0 #fff8}
.welcome-audio{font-size:10px;letter-spacing:.3px;line-height:1.9;margin-top:25px;color:#b8c7ac}
.welcome-audio::before{content:"";display:block;width:26px;height:1px;background:#aabf8755;margin:0 auto 17px}
.welcome-audio span{font-size:9px;color:#a9baa1;margin-top:4px;letter-spacing:0}
@media(max-width:650px){.welcome-content{padding:25px 0}.welcome-club{font-size:8px;letter-spacing:2.6px;margin-bottom:28px}.welcome-content h1{font-size:clamp(46px,12vw,64px)}.welcome-tagline{font-size:11px;margin:17px 0 30px}.welcome-enter{width:min(260px,100%);min-height:56px}.welcome-audio{margin-top:22px}}
@media(max-height:500px){.welcome-content{padding:12px 0}.welcome-club{margin-bottom:14px}.welcome-content h1{font-size:44px}.welcome-tagline{margin:10px 0 20px}.welcome-audio{margin-top:14px}.welcome-audio::before{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.welcome-enter span:last-child{transition:none}}

.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
@media(max-width:650px){.hero .hero-video{object-position:60% center}}



/* --- Sinhala Welcome & Intro Screen Typography --- */
html[lang=si] .welcome-club {
  letter-spacing: 2px !important;
  font-size: 10px;
}
html[lang=si] .welcome-content h1 {
  font-family: var(--derana) !important;
  font-size: clamp(40px, 8vw, 64px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
html[lang=si] .welcome-tagline {
  font-family: var(--si) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  color: #c9d8bf;
}
html[lang=si] .welcome-enter {
  font-family: var(--si) !important;
  font-size: 14.5px !important;
  letter-spacing: 0 !important;
  padding: 16px 26px !important;
}
html[lang=si] .welcome-audio {
  font-family: var(--si) !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
}
html[lang=si] .mangrove-intro h1 {
  font-family: var(--derana) !important;
  font-size: clamp(34px, 6vw, 52px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
html[lang=si] .mangrove-intro .intro-subtitle {
  font-family: var(--si) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
}
html[lang=si] .mangrove-intro .intro-enter {
  font-family: var(--si) !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
}
html[lang=si] .mangrove-intro .intro-skip {
  font-family: var(--si) !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
}
@media(max-width:650px) {
  html[lang=si] .welcome-content h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }
  html[lang=si] .welcome-tagline {
    font-size: 13.5px !important;
  }
  html[lang=si] .welcome-enter {
    font-size: 13.5px !important;
    padding: 14px 22px !important;
  }
  html[lang=si] .mangrove-intro h1 {
    font-size: 32px !important;
  }
  html[lang=si] .mangrove-intro .intro-subtitle {
    font-size: 12.5px !important;
  }
}

.notification-invite{width:min(340px,100%);margin:0 auto 18px}.notification-eyebrow{font:9px/1.8 'DM Sans',sans-serif;letter-spacing:2px;color:#d0e497;margin:0 0 10px}.notification-invite #notification-status{color:#c9d8be;font:11px/1.9 'DM Sans','Noto Sans Sinhala',sans-serif;max-width:320px;margin:0 auto 18px}.notification-invite .welcome-enter{margin:auto;width:min(300px,100%);font-size:12px}.notification-settings{margin:20px 0 8px}.welcome-content .welcome-tagline{margin-bottom:24px}@media(max-height:600px){.welcome-club{margin-bottom:12px}.welcome-content h1{font-size:42px}.welcome-content .welcome-tagline{margin-bottom:14px}.notification-invite{margin-bottom:10px}.notification-invite #notification-status{margin-bottom:12px}.welcome-audio{margin-top:12px}}