/* Welcome page ocean: section colours, the deepening sea, and the illustrated sections
   (markup in landing-scenes.js / experience.js, behaviour in landing-ocean.js). */
.x-welcome { --x-shallow:#0e4a56; position:relative; isolation:isolate; }
[data-theme="light"] .x-welcome { --x-shallow:#cdeeee; }
/* Shallow turquoise under the hero, deepening to midnight blue toward the invitation. */
.x-welcome:before { content:""; position:absolute; z-index:-1; top:0; bottom:-160px; left:50%; width:100vw; margin-left:-50vw; pointer-events:none; background:linear-gradient(180deg,#0e4a56 0,#0b3d4b 14%,#082c3d 36%,#061f30 60%,#041425 82%,#020a15 100%); }
[data-theme="light"] .x-welcome:before { background:linear-gradient(180deg,#cdeeee 0,#c3e7ea 25%,#b4dbe3 55%,#a3cdd9 80%,#7fb2c6 100%); }

/* One accent per numbered section. */
.x-tone-1 { --accent:#5ee6c8; }.x-tone-2 { --accent:#ff7b6b; }.x-tone-3 { --accent:#4fd6f5; }.x-tone-4 { --accent:#ffc24d; }.x-tone-5 { --accent:#b48cff; }.x-tone-6 { --accent:#8be36b; }
.x-welcome [class*="x-tone-"] .x-section-heading>span { display:inline-flex; align-items:center; gap:9px; color:var(--accent); }
.x-section-heading>span i { width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent,var(--cyan)); box-shadow:0 0 12px var(--accent,var(--cyan)); }
.x-welcome [class*="x-tone-"] .x-section-heading h2 { background:linear-gradient(90deg,var(--ink-strong) 55%,color-mix(in srgb,var(--accent) 80%,var(--ink-strong))); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] .x-welcome [class*="x-tone-"] .x-section-heading>span { color:color-mix(in srgb,var(--accent) 55%,#06222b); }
[data-theme="light"] .x-welcome [class*="x-tone-"] .x-section-heading h2 { background:linear-gradient(90deg,var(--ink-strong) 55%,color-mix(in srgb,var(--accent) 55%,#06222b)); -webkit-background-clip:text; background-clip:text; }

/* Scroll reveal (only once landing-ocean.js is running, so content never hides without it). */
html.x-reveal-ready .x-welcome [data-reveal] .x-section-heading,html.x-reveal-ready .x-welcome .x-inv-copy { opacity:0; translate:0 22px; transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1); }
html.x-reveal-ready .x-welcome [data-reveal].is-in .x-section-heading,html.x-reveal-ready .x-welcome .is-in .x-inv-copy { opacity:1; translate:0 0; }

/* Hero: lighthouse silhouette with a sweeping beam, and waves that drift with the parallax. */
.x-hero-light { position:absolute; z-index:0; right:clamp(18px,7vw,120px); bottom:52px; width:clamp(70px,8vw,124px); pointer-events:none; translate:0 calc(var(--hp,0) * .22px); }
.x-hero-tower { display:block; width:100%; height:auto; color:#0a1d29; filter:drop-shadow(0 0 1px #9fe9e655) drop-shadow(0 0 22px rgba(255,214,140,.18)); }
.x-hero-tower path[fill="#fff"] { opacity:.16; }
.x-hero-light:after { content:""; position:absolute; left:50%; top:23%; width:18px; height:18px; margin:-9px; border-radius:50%; background:#fff1c2; box-shadow:0 0 22px 8px rgba(255,224,150,.6),0 0 70px 24px rgba(255,210,120,.22); animation:x-lamp 3s ease-in-out infinite; }
.x-beam { position:absolute; left:50%; top:23%; width:115vw; height:clamp(120px,24vh,250px); transform-origin:0 50%; translate:0 -50%; rotate:186deg; clip-path:polygon(0 48%,100% 0,100% 100%,0 52%); background:linear-gradient(90deg,rgba(255,231,163,.5),rgba(255,231,163,.14) 40%,transparent 80%); mix-blend-mode:screen; animation:x-sweep 9s ease-in-out infinite alternate; }
.x-hero .x-hero-coordinate { right:calc(clamp(18px,7vw,120px) + clamp(70px,8vw,124px) + 26px); }
.x-waves { position:absolute; z-index:0; left:0; right:0; bottom:-1px; height:clamp(46px,6vw,80px); overflow:hidden; pointer-events:none; }
.x-wave { position:absolute; left:0; bottom:0; width:200%; height:100%; animation:x-drift-x 22s linear infinite; }
.x-wave path { fill:var(--x-shallow); }
.x-wave-1 { opacity:.35; animation-duration:26s; }.x-wave-2 { opacity:.6; animation-duration:17s; animation-direction:reverse; }.x-wave-3 { animation-duration:12s; }
.x-hero-waves .x-wave-1 { translate:calc(var(--hp,0) * -.6px) 0; }.x-hero-waves .x-wave-2 { translate:calc(var(--hp,0) * .4px) 0; }.x-hero-waves .x-wave-3 { translate:calc(var(--hp,0) * -.25px) 0; }

/* 01 · Accent bars and a reef that grows in. */
.x-intro-grid p { position:relative; padding-left:22px; }
.x-intro-grid p:before { content:""; position:absolute; left:0; top:.4em; bottom:.4em; width:3px; border-radius:3px; background:linear-gradient(#5ee6c8,#2a9f9b); box-shadow:0 0 14px #5ee6c866; }
.x-intro-grid p:nth-child(2):before { background:linear-gradient(#ff7b6b,#ffc24d); box-shadow:0 0 14px #ff7b6b55; }
.x-reef { display:block; width:100%; height:clamp(150px,19vw,240px); margin-top:clamp(28px,5vw,56px); }
.x-reef .sand { fill:#e9c98a; opacity:.16; }
.x-reef .rf { transform-box:fill-box; transform-origin:50% 100%; transition:transform 1.2s cubic-bezier(.2,1.25,.4,1) var(--d),opacity .6s ease var(--d); }
html.x-reveal-ready .x-intro:not(.is-in) .rf { transform:scale(.55,0); opacity:0; }
.x-reef .kelp path { fill:none; stroke:#3fbf9a; stroke-width:5; stroke-linecap:round; transform-box:fill-box; transform-origin:50% 100%; animation:x-sway 5s ease-in-out var(--k) infinite alternate; }
.x-reef .branch path { fill:none; stroke:var(--tone); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }
.x-reef .fan path { fill:none; stroke:var(--tone); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.3s ease calc(var(--d) + var(--i) * .09s); }
html.x-reveal-ready .x-intro:not(.is-in) .fan path { stroke-dashoffset:1; }
.x-reef .brain path { fill:var(--tone); opacity:.85; }.x-reef .brain .ridge { fill:none; stroke:#04121e; stroke-opacity:.3; stroke-width:2.5; stroke-linecap:round; }
.x-reef .tubes rect { fill:var(--tone); opacity:.82; }
.x-reef .anemone path { fill:none; stroke:var(--tone); stroke-width:4; stroke-linecap:round; transform-box:fill-box; transform-origin:50% 100%; animation:x-sway 3.4s ease-in-out var(--k) infinite alternate; }.x-reef .anemone ellipse { fill:var(--tone); }
.reef-fish { color:#ffc24d; animation:x-swim-left 24s linear infinite; }.reef-fish.two { color:#ff8a4c; animation-duration:31s; animation-delay:-12s; }
[data-theme="light"] .x-reef .sand { fill:#c79a4a; opacity:.3; }

/* 02 · A colour per card, a tilt toward the cursor, and a sea creature crossing on hover. */
.x-feature-grid { perspective:1000px; }
.x-feature { overflow:hidden; border-color:color-mix(in srgb,var(--tone) 38%,var(--line-strong)); background:radial-gradient(circle at var(--mx,85%) var(--my,0%),color-mix(in srgb,var(--tone) 20%,transparent),transparent 58%),linear-gradient(145deg,color-mix(in srgb,var(--tone) 9%,rgba(7,27,40,.55)),rgba(7,27,40,.8)); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s ease-out,border-color .2s,box-shadow .3s; }
.x-feature:hover,.x-feature:focus-visible { transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); border-color:var(--tone); background:radial-gradient(circle at var(--mx,85%) var(--my,0%),color-mix(in srgb,var(--tone) 30%,transparent),transparent 60%),linear-gradient(145deg,color-mix(in srgb,var(--tone) 14%,rgba(7,27,40,.5)),rgba(7,27,40,.78)); box-shadow:0 22px 44px -22px var(--tone); }
.x-feature>span,.x-feature>b { color:var(--tone); }
.x-feature>span,.x-feature h3,.x-feature p { position:relative; z-index:1; }
.x-swimmer { position:absolute; z-index:0; left:-80px; bottom:14px; width:58px; color:var(--tone); opacity:0; pointer-events:none; }
.x-swimmer svg { display:block; width:100%; height:auto; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tone) 60%,transparent)); }
.x-swimmer[data-c="clownfish"] svg { transform:scaleX(-1); }.x-swimmer[data-c="manta"] svg { transform:rotate(90deg); }
.x-feature:hover .x-swimmer,.x-feature:focus-visible .x-swimmer { animation:x-cross 3.6s linear infinite; }
.x-feature:hover .x-swimmer svg,.x-feature:focus-visible .x-swimmer svg { animation:x-bob .9s ease-in-out infinite alternate; }
.x-feature:hover .x-swimmer[data-c="clownfish"] svg { animation-name:x-bob-flip; }.x-feature:hover .x-swimmer[data-c="manta"] svg { animation-name:x-bob-turn; }
[data-theme="light"] .x-feature { background:radial-gradient(circle at var(--mx,85%) var(--my,0%),color-mix(in srgb,var(--tone) 22%,transparent),transparent 58%),linear-gradient(145deg,color-mix(in srgb,var(--tone) 10%,#fff),#f7fbfa); }
[data-theme="light"] .x-feature>span,[data-theme="light"] .x-feature>b { color:color-mix(in srgb,var(--tone) 60%,#06222b); }

/* 03 · The current: a glowing particle runs People → Measurable progress and lights each step. */
.x-system-line { position:relative; }
.x-system-line>div { position:relative; transition:background .25s; animation:x-lit 6s linear calc(var(--i) * 1s + .5s) infinite; }
.x-system-line>div:hover,.x-system-line>div:focus-visible { background:color-mix(in srgb,var(--accent) 18%,transparent); outline:none; }
.x-system-line>div:hover span,.x-system-line>div:focus-visible span { color:var(--accent); }
.x-system-line em { display:block; max-height:0; margin-top:0; overflow:hidden; opacity:0; color:var(--muted); font-size:12px; font-style:normal; line-height:1.45; transition:max-height .35s ease,opacity .3s ease,margin .3s; }
.x-system-line>div:hover em,.x-system-line>div:focus-visible em { max-height:70px; margin-top:8px; opacity:1; }
.x-current { display:block; position:absolute; z-index:1; left:0; right:0; top:-20px; height:40px; pointer-events:none; }
.x-current svg { display:block; width:100%; height:100%; overflow:visible; }
.x-current path { fill:none; stroke:var(--accent); stroke-opacity:.55; stroke-width:2; stroke-dasharray:6 9; vector-effect:non-scaling-stroke; animation:x-flow-dash 1.4s linear infinite; }
.x-current-dot { position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px; animation:x-run 6s linear infinite; }
.x-current-dot i { display:block; width:100%; height:100%; border-radius:50%; background:#e9feff; box-shadow:0 0 10px 3px var(--accent),0 0 32px 10px color-mix(in srgb,var(--accent) 45%,transparent); animation:x-wave-bob 2s linear infinite; }
.x-school { position:absolute; top:2px; left:0; width:120px; height:36px; animation:x-school 17s linear infinite; }
.x-school b { position:absolute; width:20px; color:#ffc24d; animation:x-bob .7s ease-in-out calc(var(--f) * -.23s) infinite alternate; }
.x-school b svg { display:block; width:100%; height:auto; }
.x-school b:nth-child(1) { left:0; top:4px; }.x-school b:nth-child(2) { left:22px; top:16px; color:#ff8a4c; }.x-school b:nth-child(3) { left:30px; top:0; width:16px; }.x-school b:nth-child(4) { left:50px; top:12px; color:#4fd6f5; }.x-school b:nth-child(5) { left:66px; top:4px; width:15px; }

/* 04 · Trust tide: each stage fills with its own colour; clicking a stage fills to that level. */
.x-tank { --lvl:42%; --tank:#9aa7b0; position:relative; overflow:hidden; isolation:isolate; border-top-color:var(--tank)!important; transition:box-shadow .3s; }
.x-tank:nth-child(2) { --lvl:64%; --tank:#ffc24d; }.x-tank:nth-child(3) { --lvl:88%; --tank:#5fe08a; }
.x-tank>span:not(.x-water) { color:var(--tank)!important; }
.x-tank>span:not(.x-water),.x-tank h3,.x-tank p { position:relative; z-index:1; pointer-events:none; }
.x-water { position:absolute; z-index:0; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg,color-mix(in srgb,var(--tank) 30%,transparent),color-mix(in srgb,var(--tank) 12%,transparent)); transition:height 1.3s cubic-bezier(.3,1.15,.4,1) calc(var(--i) * .2s); }
.x-water:before { content:""; position:absolute; left:0; bottom:100%; width:calc(100% + 80px); height:10px; background:color-mix(in srgb,var(--tank) 30%,transparent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5Q20 0 40 5T80 5V10Z'/%3E%3C/svg%3E") 0 0/80px 10px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5Q20 0 40 5T80 5V10Z'/%3E%3C/svg%3E") 0 0/80px 10px repeat-x; animation:x-crest 3s linear infinite; }
.x-water b { position:absolute; bottom:0; width:7px; height:7px; border-radius:50%; border:1px solid color-mix(in srgb,var(--tank) 70%,#fff); background:radial-gradient(circle at 30% 30%,#ffffffaa,transparent 60%); opacity:0; }
.x-water b:nth-child(1) { left:14%; }.x-water b:nth-child(2) { left:33%; width:5px; height:5px; }.x-water b:nth-child(3) { left:52%; width:9px; height:9px; }.x-water b:nth-child(4) { left:71%; width:5px; height:5px; }.x-water b:nth-child(5) { left:87%; }
.x-proof-grid[data-tide="1"] .x-tank:nth-child(1) .x-water,.x-proof-grid[data-tide="2"] .x-tank:nth-child(-n+2) .x-water,.x-proof-grid[data-tide="3"] .x-tank .x-water { height:var(--lvl); }
.x-proof-grid[data-tide="1"] .x-tank:nth-child(1) .x-water b,.x-proof-grid[data-tide="2"] .x-tank:nth-child(-n+2) .x-water b,.x-proof-grid[data-tide="3"] .x-tank .x-water b { animation:x-rise 3.2s ease-in infinite; }
.x-water b:nth-child(2) { animation-delay:.7s!important; }.x-water b:nth-child(3) { animation-delay:1.5s!important; }.x-water b:nth-child(4) { animation-delay:2.2s!important; }.x-water b:nth-child(5) { animation-delay:1.1s!important; }
.x-tide-hit { position:absolute; z-index:2; inset:0; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.x-tide-hit:focus-visible { outline:2px solid var(--tank); outline-offset:-2px; }
.x-tank:has(.x-tide-hit[aria-pressed="true"]) { box-shadow:inset 0 0 0 1px var(--tank),0 14px 40px -24px var(--tank); }
[data-theme="light"] .x-tank>span:not(.x-water) { color:color-mix(in srgb,var(--tank) 60%,#06222b)!important; }

/* 05 · Audience bubbles: drifting, colourful, and they pop with a splash. */
.x-audience { gap:12px; padding:6px 0; }
.x-audience button { --b:#5ee6c8; position:relative; gap:14px; min-height:50px; padding:0 20px; border:1.5px solid color-mix(in srgb,var(--b) 65%,transparent); border-radius:999px; background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.32),transparent 32%),color-mix(in srgb,var(--b) 15%,transparent); box-shadow:inset 0 0 16px color-mix(in srgb,var(--b) 30%,transparent),0 8px 22px -14px var(--b); animation:x-float calc(4.6s + var(--i) * .31s) ease-in-out calc(var(--i) * -.83s) infinite alternate; transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .2s; }
.x-audience button:nth-child(7n+2) { --b:#ff7b6b; }.x-audience button:nth-child(7n+3) { --b:#ffc24d; }.x-audience button:nth-child(7n+4) { --b:#4fd6f5; }.x-audience button:nth-child(7n+5) { --b:#b48cff; }.x-audience button:nth-child(7n+6) { --b:#ff7fca; }.x-audience button:nth-child(7n+7) { --b:#8be36b; }
.x-audience button:hover,.x-audience button:focus-visible { transform:scale(1.07); border-color:var(--b); }
.x-audience button span { color:var(--b); }
.x-audience button.is-popping { animation:x-pop .26s ease-out forwards; }
[data-theme="light"] .x-audience button span { color:color-mix(in srgb,var(--b) 60%,#06222b); }

/* 06 · Sea chart with a beacon on the hovered country. */
.x-chart { position:relative; width:100%; aspect-ratio:2/1; max-height:440px; margin:28px 0 -64px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line-strong)); border-radius:18px; background:#06202d; }
.x-chart:before { content:""; position:absolute; inset:0; background:url('/assets/earth_atmos_1024.jpg') center/100% 100% no-repeat; filter:grayscale(1) sepia(.4) hue-rotate(130deg) saturate(1.5) brightness(.5) contrast(1.2); }
.x-chart:after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(3,16,28,.55)),linear-gradient(180deg,transparent 55%,rgba(5,26,40,.92)); pointer-events:none; }
.x-chart-grid { position:absolute; z-index:1; inset:0; width:100%; height:100%; }
.x-chart-grid path { fill:none; stroke:rgba(150,235,230,.16); stroke-width:1; vector-effect:non-scaling-stroke; }
.x-chart-grid .equator { stroke:color-mix(in srgb,var(--accent) 50%,transparent); stroke-dasharray:4 6; }
.x-compass { position:absolute; z-index:1; right:16px; top:14px; width:clamp(44px,7vw,76px); opacity:.55; }
.x-compass circle { fill:none; stroke:#9fe9e6; stroke-width:1.2; }.x-compass path { fill:var(--accent); opacity:.8; }.x-compass text { fill:#dffcf8; font:700 12px var(--font-mono,monospace); text-anchor:middle; }
.x-pin { position:absolute; z-index:2; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); transition:transform .3s,background .3s,box-shadow .3s; }
.x-pin i { position:absolute; inset:-12px; border:2px solid #ffe7a3; border-radius:50%; opacity:0; }
.x-pin:before { content:""; position:absolute; left:50%; top:50%; width:110px; height:30px; transform-origin:0 50%; translate:0 -50%; clip-path:polygon(0 44%,100% 0,100% 100%,0 56%); background:linear-gradient(90deg,rgba(255,231,163,.75),transparent); opacity:0; transition:opacity .3s; }
.x-pin.is-lit { z-index:3; background:#ffe7a3; transform:scale(1.5); box-shadow:0 0 16px 6px rgba(255,231,163,.7); }
.x-pin.is-lit i { animation:x-beacon 1.5s ease-out infinite; }
.x-pin.is-lit:before { opacity:1; animation:x-spin 3.2s linear infinite; }
.x-countries .x-country-strip { position:relative; z-index:2; }
.x-country-strip button { transition:border-color .2s,transform .25s,box-shadow .3s; }
.x-country-strip button:hover,.x-country-strip button:focus-visible { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 0 0 1px var(--accent),0 16px 36px -20px #ffe7a3; }
.x-country-strip button span { color:var(--accent); }

/* The invitation: a full-width night sea with a lighthouse aimed at the button. */
.x-welcome .x-invitation { position:relative; isolation:isolate; overflow:hidden; width:100vw; max-width:none; min-height:560px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:clamp(80px,10vw,140px) clamp(24px,8vw,140px) clamp(170px,17vw,240px); border:0; border-block:1px solid rgba(117,229,225,.22); border-radius:0; background:linear-gradient(180deg,#020713 0%,#051229 50%,#0a2238 100%); }
.x-night { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.x-stars { position:absolute; inset:0 0 30% 0; background-image:radial-gradient(1.3px 1.3px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 85px,#d6fbff,transparent),radial-gradient(1.6px 1.6px at 172px 18px,#fff,transparent),radial-gradient(1px 1px at 64px 132px,#fff,transparent),radial-gradient(1.2px 1.2px at 205px 150px,#cfe6ff,transparent); background-size:230px 170px; animation:x-twinkle 4s ease-in-out infinite alternate; }
.x-stars-2 { background-image:radial-gradient(1px 1px at 40px 60px,#fff,transparent),radial-gradient(1.4px 1.4px at 150px 20px,#ffe9c4,transparent),radial-gradient(1px 1px at 260px 110px,#fff,transparent),radial-gradient(1.8px 1.8px at 90px 170px,#e0fbff,transparent); background-size:310px 210px; animation-duration:6.5s; animation-delay:-2s; }
.x-night-waves { height:clamp(90px,11vw,150px); }
.x-night-waves .x-wave path { fill:#0c3150; }.x-night-waves .x-wave-2 path { fill:#0a2a46; }.x-night-waves .x-wave-3 path { fill:#081f36; }
.x-night-waves .x-wave-1 { opacity:.7; }.x-night-waves .x-wave-2 { opacity:.85; }
.x-inv-light { position:absolute; right:clamp(18px,9vw,170px); bottom:clamp(40px,5vw,70px); width:clamp(84px,12vw,180px); }
.x-inv-tower { display:block; width:100%; height:auto; color:#0b1a29; filter:drop-shadow(0 0 1px #9fe9e644); }
.x-inv-tower path[fill="#fff"] { opacity:.5; fill:#c94a4a; }
.x-inv-lantern { position:absolute; left:50%; top:22.9%; width:16px; height:16px; margin:-8px; border-radius:50%; background:#fff3c8; box-shadow:0 0 26px 10px rgba(255,226,150,.6),0 0 100px 36px rgba(255,210,120,.22); animation:x-lamp 2.5s ease-in-out infinite; }
.x-inv-beam { position:absolute; left:50%; top:22.9%; width:var(--beam-len,900px); height:clamp(150px,22vw,280px); transform-origin:0 50%; translate:0 -50%; rotate:var(--beam-angle,190deg); clip-path:polygon(0 47%,100% 0,100% 100%,0 53%); background:linear-gradient(90deg,rgba(255,231,163,.62),rgba(255,231,163,.2) 55%,transparent 96%); mix-blend-mode:screen; animation:x-inv-sweep 5s ease-in-out infinite alternate; }
.x-inv-copy { position:relative; z-index:1; max-width:780px; }
.x-inv-copy>span { color:#a1f5ef; font:600 10px var(--font-mono,monospace); letter-spacing:.18em; }
.x-welcome .x-inv-cta { position:relative; animation:x-cta-glow 5s ease-in-out infinite; }

@keyframes x-sweep { from { rotate:172deg; } to { rotate:200deg; } }
@keyframes x-inv-sweep { from { rotate:calc(var(--beam-angle,190deg) - 9deg); } to { rotate:calc(var(--beam-angle,190deg) + 9deg); } }
@keyframes x-cta-glow { 0%,100% { box-shadow:0 0 0 0 rgba(255,231,163,0); filter:none; } 50% { box-shadow:0 0 0 3px rgba(255,231,163,.4),0 0 50px 14px rgba(255,220,140,.5); filter:brightness(1.12); } }
@keyframes x-lamp { 0%,100% { opacity:.85; } 50% { opacity:1; transform:scale(1.15); } }
@keyframes x-drift-x { to { transform:translateX(-50%); } }
@keyframes x-sway { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }
@keyframes x-swim-left { from { transform:translateX(1260px); } to { transform:translateX(-90px); } }
@keyframes x-cross { 0% { left:-80px; opacity:0; } 12% { opacity:.95; } 88% { opacity:.95; } 100% { left:calc(100% + 20px); opacity:0; } }
@keyframes x-bob { from { transform:translateY(-4px); } to { transform:translateY(4px); } }
@keyframes x-bob-flip { from { transform:scaleX(-1) translateY(-4px); } to { transform:scaleX(-1) translateY(4px); } }
@keyframes x-bob-turn { from { transform:rotate(90deg) translateX(-4px); } to { transform:rotate(90deg) translateX(4px); } }
@keyframes x-lit { 0% { background:color-mix(in srgb,var(--accent) 16%,transparent); box-shadow:inset 0 2px 0 var(--accent); } 18%,100% { background:transparent; box-shadow:inset 0 2px 0 transparent; } }
@keyframes x-flow-dash { to { stroke-dashoffset:-15; } }
@keyframes x-run { from { left:0; } to { left:100%; } }
@keyframes x-wave-bob { 0%,100% { transform:translateY(0); } 25% { transform:translateY(-8px); } 75% { transform:translateY(8px); } }
@keyframes x-school { from { left:100%; } to { left:-130px; } }
@keyframes x-crest { to { transform:translateX(-80px); } }
@keyframes x-rise { 0% { bottom:0; opacity:0; transform:translateX(0); } 15% { opacity:.9; } 60% { transform:translateX(5px); } 100% { bottom:100%; opacity:0; transform:translateX(-3px); } }
@keyframes x-float { 0% { translate:0 0; } 50% { translate:3px -7px; } 100% { translate:-3px 4px; } }
@keyframes x-pop { 40% { transform:scale(1.22); opacity:1; } 100% { transform:scale(1.5); opacity:0; } }
@keyframes x-beacon { from { transform:scale(.3); opacity:.95; } to { transform:scale(2.2); opacity:0; } }
@keyframes x-spin { to { rotate:360deg; } }
@keyframes x-twinkle { from { opacity:.55; } to { opacity:1; } }

@media (max-width:900px) { .x-current { display:none; } }
@media (max-width:620px) {
  .x-hero-light { right:14px; bottom:34px; width:58px; }
  .x-chart { margin-bottom:-36px; border-radius:14px; }
  .x-welcome .x-invitation { min-height:0; padding:70px 24px 210px; }
  .x-inv-light { right:18px; bottom:44px; width:78px; }
}
/* Still versions for reduced motion: everything is shown in its finished state. */
@media (prefers-reduced-motion:reduce) {
  .x-welcome *,.x-welcome *:before,.x-welcome *:after { animation:none!important; transition:none!important; }
  .x-swimmer,.x-school,.x-current-dot,.reef-fish { display:none; }
}
.user-reduced-motion .x-welcome *,.user-reduced-motion .x-welcome *:before,.user-reduced-motion .x-welcome *:after { animation:none!important; transition:none!important; }
.user-reduced-motion .x-swimmer,.user-reduced-motion .x-school,.user-reduced-motion .x-current-dot,.user-reduced-motion .reef-fish { display:none; }