*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#152e38;color:#f7f3e8}body{min-height:100svh;font:16px/1.5 system-ui,-apple-system,sans-serif;isolation:isolate;display:flex;flex-direction:column}a{color:inherit;text-underline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #ffe2a4;outline-offset:5px}button{font:inherit;cursor:pointer}header,footer{position:relative;z-index:2;padding:24px clamp(22px,5vw,80px)}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:max(24px,env(safe-area-inset-top))}.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:.85rem}.back>span:first-child{font-size:1.5rem}.brand{font-size:.7rem;letter-spacing:.32em;opacity:.7}time{min-width:70px;text-align:right;font-size:.95rem;font-variant-numeric:tabular-nums}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 22px 50px;position:relative;z-index:1}.eyebrow{font-size:.65rem;letter-spacing:.24em;color:#e6d7bc;margin:0 0 18px}h1{font:400 clamp(2.7rem,7vw,5.8rem)/1.08 Georgia,serif;letter-spacing:-.04em;margin:0;text-shadow:0 2px 24px #12313d66}.intro{margin:20px 0 48px;color:#f1e6d4;font-size:clamp(.95rem,2vw,1.1rem)}.thought{max-width:610px;padding:28px 34px;border:1px solid #ffffff24;background:#142e3bd9;border-radius:22px;box-shadow:0 12px 50px #10263120}.thought-label{font-size:.57rem;letter-spacing:.19em;color:#d8d4c8}blockquote{font:400 clamp(1.3rem,3vw,1.85rem)/1.5 Georgia,serif;margin:16px 0}.thought p{font-size:.7rem;opacity:.7;margin:14px 0}.thought a{display:inline-block;min-height:44px;padding-top:8px;font-size:.8rem;color:#f5dcb1}footer{padding-bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(transparent,#102c3890)}.weekend{font:italic 1rem Georgia,serif;color:#eee5d4}nav{display:flex;gap:8px;flex-wrap:wrap}nav button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 14px;color:#f5f0e6;background:#142e3bdd;border:1px solid #ffffff30;border-radius:30px;font-size:.75rem}button[aria-pressed=true]{background:#e7d6b7;color:#183844}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button[hidden]{display:none}#status{flex-basis:100%;margin:0;font-size:.75rem;text-align:right}#status:empty{display:none}.coast{position:fixed;inset:0;overflow:hidden;z-index:-1;background:#567d87}.sky{position:absolute;inset:0 0 40%;background:linear-gradient(#143d50,#587886 62%,#d6bca0)}.sun{position:absolute;width:110px;height:110px;left:74%;top:28%;border-radius:50%;background:#ffe3af;box-shadow:0 0 100px 45px #f8d9a536;filter:blur(1px)}.haze{position:absolute;inset:45% 0 auto;height:8%;background:linear-gradient(transparent,#e9d3b75c,transparent);filter:blur(12px)}.sea{position:absolute;inset:50% 0 0;background:repeating-linear-gradient(0deg,#91b9b008 0 2px,transparent 3px 12px),linear-gradient(#577d86,#396777 45%,#244d60)}.reflection{position:absolute;left:64%;top:0;width:28%;height:78%;background:linear-gradient(#e8d3a97a,transparent);clip-path:polygon(46% 0,58% 0,100% 100%,0 100%);filter:blur(12px)}.shore{position:absolute;bottom:3%;left:-10%;width:120%;height:23%;fill:#bed2c44d;animation:tide 19s ease-in-out infinite alternate}.shore-front{bottom:0;height:23%;fill:#e4e7d878;animation-delay:-8s;animation-duration:23s}.sand{position:absolute;inset:91% 0 0;background:linear-gradient(#bdb4a05c,#8b998e)}.grain{position:absolute;inset:0;pointer-events:none;background:none}@keyframes tide{from{transform:translate(-2%,-9px)}to{transform:translate(2%,14px)}}body.is-still .shore{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.shore{animation:none}}@media(max-width:600px){header{padding:18px 20px}.brand{display:none}main{padding:32px 20px}.intro{margin-bottom:32px}.thought{padding:24px 20px;width:100%}.sun{left:70%;top:22%;width:75px;height:75px}footer{justify-content:center;padding:18px 18px max(22px,env(safe-area-inset-bottom))}.weekend{display:none}nav{justify-content:center}nav button{padding:10px 12px;font-size:.7rem}#status{text-align:center}}
/* Sun height and palette follow local solar time; horizon remains at 50%. */
.sky{inset:0 0 40%;background:linear-gradient(var(--sky-top,#143d50),var(--sky-middle,#587886) 62%,var(--sky-horizon,#d6bca0));transition:background 30s linear}
.sun{left:var(--sun-x,74%);top:var(--sun-y,28%);transform:translate(-50%,-50%);background:var(--sun-color,#ffe3af);opacity:var(--sun-opacity,0);box-shadow:0 0 100px 45px var(--sun-color,#ffe3af);transition:top 30s linear,left 30s linear,opacity 20s linear}
.haze{background:linear-gradient(transparent,var(--sky-horizon,#e9d3b7),transparent);opacity:var(--glow-opacity,.3)}
.sea{background:repeating-linear-gradient(0deg,#91b9b008 0 2px,transparent 3px 12px),linear-gradient(var(--sea-top,#577d86),var(--sea-bottom,#244d60));z-index:1}
.reflection{left:calc(var(--sun-x,74%) - 14%);opacity:var(--sun-opacity,0);background:linear-gradient(var(--sun-color,#e8d3a9),transparent)}
.shore,.sand{z-index:2}.grain{z-index:3}
.clouds{position:absolute;inset:0 0 50%;overflow:hidden;pointer-events:none}
.cloud{position:absolute;left:-40%;width:260px;height:55px;border-radius:50%;background:var(--cloud-color,#e7eef0);opacity:var(--cloud-opacity,.3);filter:blur(12px);animation:cloud-drift 240s linear infinite}
.cloud::before,.cloud::after{content:'';position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:130px;height:85px;left:25px;bottom:4px}.cloud::after{width:100px;height:65px;right:25px;bottom:4px}
.cloud-one{top:28%;animation-delay:-85s}.cloud-two{top:56%;width:180px;height:34px;animation-duration:310s;animation-delay:-200s;filter:blur(16px)}
.cloud-three{top:12%;width:320px;animation-duration:390s;animation-delay:-340s}
@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(calc(140vw + 400px))}}
body.is-still .cloud{animation-play-state:paused}
.thought[hidden]{display:none}
.quote-collapse{display:block;width:100%;border:0;background:transparent;color:inherit;font:400 clamp(1.3rem,3vw,1.85rem)/1.5 Georgia,serif;padding:0;margin:16px 0;text-align:center;border-radius:8px}
.quote-hint{display:block;margin-top:14px;font:400 .65rem/1.4 system-ui;color:#d8d4c8;opacity:.65}
.thought{cursor:pointer}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}.sun{transition:none}}
/* Small silhouettes at the horizon: slow travel and barely perceptible motion. */
.sailboat{position:absolute;z-index:2;top:51%;left:-7%;width:clamp(24px,3.2vw,48px);opacity:.63;animation:boat-crossing 420s linear infinite;animation-delay:-145s;pointer-events:none}
.sailboat svg{display:block;width:100%;overflow:visible;animation:boat-rock 11s ease-in-out infinite alternate;transform-origin:50% 85%}
.boat-sail{fill:var(--cloud-color,#e1e2da)}.boat-hull{fill:var(--sea-bottom,#244d60)}.boat-mast{stroke:var(--cloud-color,#c6d0cd);stroke-width:1.2}
.gulls{position:absolute;z-index:2;top:44%;left:-12%;width:85px;height:42px;opacity:.48;animation:gulls-crossing 185s linear infinite;animation-delay:-95s;pointer-events:none}
.gull{position:absolute;width:14px;height:8px;fill:none;stroke:var(--cloud-color,#d5dcd9);stroke-width:1.3;stroke-linecap:round;animation:gull-glide 8s ease-in-out infinite alternate}
.gull-one{left:0;top:10px}.gull-two{left:30px;top:0;width:11px;animation-delay:-3s}.gull-three{left:62px;top:19px;width:9px;animation-delay:-6s}
@keyframes boat-crossing{from{transform:translateX(0)}to{transform:translateX(115vw)}}
@keyframes boat-rock{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(1px) rotate(1.5deg)}}
@keyframes gulls-crossing{0%{transform:translate(0,6px)}45%{transform:translate(57vw,-9px)}100%{transform:translate(125vw,3px)}}
@keyframes gull-glide{0%,65%{transform:scaleY(1) translateY(0)}85%{transform:scaleY(.6) translateY(-1px)}100%{transform:scaleY(1) translateY(-2px)}}
body.is-still :is(.sailboat,.sailboat svg,.gulls,.gull){animation-play-state:paused}
/* Let the scene breathe when the viewer stops interacting. */
body>header,body>main,body>footer{opacity:1;transition:opacity 2.8s ease}
body.is-idle>header,body.is-idle>main,body.is-idle>footer{opacity:0;pointer-events:none}
body.is-idle :is(a,button){pointer-events:none}
@media(prefers-reduced-motion:reduce){.sailboat,.sailboat svg,.gulls,.gull{animation:none}body>header,body>main,body>footer{transition:none}}
/* During arrival, every colour and sun coordinate is driven by one solar timeline. */
body.sunrise-intro .sun,body.sunrise-intro .sky{transition:none}
.coast::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:rgba(5,12,29,var(--scene-shade,0))}
.thought{transform-origin:50% 100%;will-change:auto}
#quote-open[aria-expanded=true]{background:#e7d6b7;color:#183844;border-color:#f2e1bf}
/* Night arrival; moon illumination follows the current phase. */
.night-stars{position:absolute;inset:0 0 auto;width:100%;height:50%;fill:#edf0ff;opacity:var(--night-opacity,1);pointer-events:none}
.night-moon{position:absolute;left:79%;top:var(--moon-y,18%);width:clamp(38px,4.4vw,66px);transform:translate(-50%,-50%);opacity:var(--night-opacity,1);filter:drop-shadow(0 0 14px #dddff52b);pointer-events:none}
.moon-shadow{fill:#252d44}#moon-phase-light{fill:#eee4c8}
.reflection{clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);filter:blur(7px);background:repeating-linear-gradient(0deg,transparent 0 3px,var(--sun-color,#ffc58d) 4px 6px,transparent 7px 11px);opacity:var(--reflection-alpha,0);mask-image:linear-gradient(#000,transparent 96%);-webkit-mask-image:linear-gradient(#000,transparent 96%)}
.sea::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--sun-color,#ffc58d),transparent 40%);opacity:calc(var(--warm-horizon,0)*.15)}
.haze{height:10%;inset:44% 0 auto;filter:blur(18px)}
.sun{box-shadow:0 0 55px 16px color-mix(in srgb,var(--sun-color,#ffe3af) 38%,transparent),0 0 130px 45px color-mix(in srgb,var(--sun-color,#ffe3af) 15%,transparent)}
@media(prefers-reduced-motion:reduce){.night-moon{transition:none}}
/* A quiet fade with a small rightward drift, never a descending moon. */
.night-moon{left:var(--moon-x,79%);top:18%}
/* Wide, soft light path; its colour always comes from the sun. */
.reflection{
left:calc(var(--sun-x,74%) - 23%);width:46%;height:96%;
clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
filter:blur(.6px);
background:radial-gradient(ellipse at 50% 5%,var(--sun-color,#ffc58d),transparent 72%),repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--sun-color,#ffc58d) 60%,transparent) 6px 7px,transparent 8px 17px);
mask-image:linear-gradient(#000c,#0008 60%,transparent 100%);
-webkit-mask-image:linear-gradient(#000c,#0008 60%,transparent 100%);
animation:reflection-sway 21s ease-in-out infinite alternate;
}
.reflection::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(178deg,transparent 0 9px,var(--sun-color,#ffc58d) 10px 11px,transparent 12px 23px);
opacity:.2;animation:light-ripples 17s ease-in-out infinite alternate;
}
.sea::before{
content:'';position:absolute;inset:-3%;pointer-events:none;
background:repeating-linear-gradient(178deg,transparent 0 13px,#dbeaf41a 14px 15px,transparent 16px 31px),repeating-linear-gradient(2deg,transparent 0 29px,#091f321a 30px 32px,transparent 33px 57px);
opacity:.38;animation:sea-ripples 24s ease-in-out infinite alternate;
}
.water-glint{
position:absolute;display:block;left:var(--glint-x);top:var(--glint-y);
width:var(--glint-width);height:1px;border-radius:50%;
background:var(--sun-color,#ffc58d);box-shadow:0 0 3px var(--sun-color,#ffc58d);
opacity:.06;transform-origin:center;pointer-events:none;
animation:water-glimmer var(--glint-duration,12s) ease-in-out var(--glint-delay,0s) infinite;
}
@keyframes reflection-sway{from{transform:scaleX(.98)}to{transform:scaleX(1.02)}}
@keyframes light-ripples{from{transform:translateY(-2px) scaleX(.99)}to{transform:translateY(2px) scaleX(1.01)}}
@keyframes sea-ripples{from{transform:translate(-2px,-1px)}to{transform:translate(2px,1px)}}
@keyframes water-glimmer{0%,100%{opacity:.04;transform:translate(-1px,0) scaleX(.6)}40%{opacity:.12}60%{opacity:.65;transform:translate(1px,-1px) scaleX(1)}80%{opacity:.15}}
body.is-still .reflection,body.is-still .reflection::before,body.is-still .sea::before,body.is-still .water-glint{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.reflection,.reflection::before,.sea::before,.water-glint{animation:none}.water-glint{opacity:.14}}
/* Narrow solar track: one solar disc wide at the horizon, tighter as it rises. */
:root{--sun-diameter:110px}
.sun{width:var(--sun-diameter);height:var(--sun-diameter)}
.sea{position:absolute;inset:50% 0 0;z-index:1;background:linear-gradient(var(--sea-top,#577d86),var(--sea-bottom,#244d60))}
.sea::before{content:'';position:absolute;inset:-2%;pointer-events:none;background:radial-gradient(ellipse at 30% 60%,#dbeaf40a,transparent 55%),radial-gradient(ellipse at 75% 25%,#091f320d,transparent 60%);animation:sea-ripples 24s ease-in-out infinite alternate}
.reflection{
position:absolute;top:0;left:var(--reflection-x,var(--sun-x,74%));transform-origin:50% 0;
width:calc(var(--sun-diameter)*var(--reflection-width,1));height:calc(100% * var(--reflection-length,1) * var(--cloud-reflection-length,1));
margin-left:calc(var(--sun-diameter)*var(--reflection-width,1)*-.5);
clip-path:none;filter:none;opacity:var(--reflection-alpha,0);
background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--sun-color,#ffc58d) 65%,transparent),transparent 72%);
mask-image:linear-gradient(#000,#000b 65%,transparent),radial-gradient(ellipse at center,#000 20%,transparent 75%);
mask-composite:intersect;
-webkit-mask-image:linear-gradient(#000,#000b 65%,transparent),radial-gradient(ellipse at center,#000 20%,transparent 75%);
-webkit-mask-composite:source-in;
animation:reflection-sway 21s ease-in-out infinite alternate;
pointer-events:none;
}
.reflection::before,.sea::after{content:none}
.water-glint{position:absolute;display:block;left:var(--glint-x);top:var(--glint-y);width:var(--glint-width,1px);height:.7px;border-radius:50%;background:var(--sun-color,#ffc58d);box-shadow:0 0 1px color-mix(in srgb,var(--sun-color,#ffc58d) 45%,transparent);pointer-events:none;opacity:.04;animation:fine-glimmer var(--glint-duration,12s) ease-in-out var(--glint-delay,0s) infinite}
@keyframes fine-glimmer{0%,100%{opacity:.03;transform:translate(0,0) scaleX(.7)}45%{opacity:.12}60%{opacity:.5;transform:translate(.5px,-.4px) scaleX(1)}80%{opacity:.08}}
body.is-still .reflection,body.is-still .sea::before,body.is-still .water-glint{animation-play-state:paused}
@media(max-width:600px){:root{--sun-diameter:75px}}
@media(prefers-reduced-motion:reduce){.reflection,.sea::before,.water-glint{animation:none}.water-glint{opacity:.1}}
/* A legible distant flock; non-scaling strokes survive small mobile rendering. */
.gulls{top:44%;left:0;width:190px;height:36px;z-index:5;opacity:.82;animation:gulls-horizon 240s linear -70s infinite}
.gull{left:var(--bird-left,0);top:var(--bird-top,0);width:var(--bird-size,20px);height:12px;stroke:color-mix(in srgb,#213746 75%,var(--cloud-color,#d5dcd9));stroke-width:1.15;animation:gull-glide 9s ease-in-out var(--bird-delay,0s) infinite alternate}
@keyframes gulls-horizon{0%{transform:translate(-200px,3px)}50%{transform:translate(50vw,-4px)}100%{transform:translate(calc(100vw + 200px),2px)}}
body.is-still .gulls,body.is-still .gull{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gulls{animation:none;left:14%;transform:none}.gull{animation:none}}
/* Outbound nearby; return farther away, with the bow facing left.
All turns and scale changes happen completely beyond the viewport edges. */
.sailboat{left:0;transform-origin:50% 85%;animation:boat-round-trip 960s linear -145s infinite}
@keyframes boat-round-trip{
0%{transform:translate(-100px,0) scale(1,1);opacity:.63}
44%{transform:translate(calc(100vw + 100px),0) scale(1,1);opacity:.63}
44.01%{transform:translate(calc(100vw + 100px),0) scale(1,1);opacity:0}
49.99%{transform:translate(calc(100vw + 100px),-14px) scale(-.62,.62);opacity:0}
50%{transform:translate(calc(100vw + 100px),-14px) scale(-.62,.62);opacity:.48}
94%{transform:translate(-100px,-14px) scale(-.62,.62);opacity:.48}
94.01%{transform:translate(-100px,-14px) scale(-.62,.62);opacity:0}
99.99%{transform:translate(-100px,0) scale(1,1);opacity:0}
100%{transform:translate(-100px,0) scale(1,1);opacity:.63}
}
body.is-still .sailboat{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.sailboat{animation:none;transform:translateX(20vw);opacity:.63}}
/* Tiny offshore silhouettes, just above the horizon, arriving from the right. */
.gulls{top:calc(50% - 16px);left:0;width:52px;height:11px;opacity:.42;animation:gulls-offshore 280s linear -55s infinite}
.gull{left:calc(var(--bird-left,0px)*.26);top:calc(var(--bird-top,0px)*.26);width:calc(var(--bird-size,20px)*.44);height:5px;stroke-width:.65}
@keyframes gulls-offshore{0%{transform:translate(calc(100vw + 100px),0)}50%{transform:translate(50vw,-1px)}100%{transform:translate(-110px,1px)}}
body.is-still .gulls{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gulls{animation:none;left:70%;transform:none}}
/* Soft contact shadow at the hull; inherits the boat's position and distance scale. */
.sailboat::before{content:'';position:absolute;left:13%;top:83%;width:74%;height:8%;border-radius:50%;background:#102b3b;opacity:.3;filter:blur(1.4px);transform:translateY(1px);pointer-events:none}
/* Subtle depth: darker upper sky and a darker band of distant water. */
.sky{background:linear-gradient(color-mix(in srgb,var(--sky-top,#143d50) 82%,#081421) 0%,var(--sky-middle,#587886) 60%,var(--sky-horizon,#d6bca0) 84%,var(--sky-horizon,#d6bca0) 100%)}
.sea{background:linear-gradient(color-mix(in srgb,var(--sea-top,#577d86) 72%,#0c2338) 0%,color-mix(in srgb,var(--sea-top,#577d86) 90%,var(--sea-bottom,#244d60)) 24%,var(--sea-top,#577d86) 70%,color-mix(in srgb,var(--sea-top,#577d86) 74%,var(--sea-bottom,#244d60)) 100%)}
/* Small independent shifts retain the tight flock and distant scale. */
.gull{animation:flock-spacing var(--flock-period,19s) ease-in-out var(--bird-delay,0s) infinite alternate}
.gull:nth-child(2n){--flock-period:23s;--drift-x:-1.1px;--drift-y:.5px}
.gull:nth-child(3n){--flock-period:17s;--drift-x:.9px;--drift-y:-.7px}
@keyframes flock-spacing{from{transform:translate(0,0)}to{transform:translate(var(--drift-x,1.3px),var(--drift-y,-.5px))}}
.gull-wing{transform-box:view-box;transform-origin:50% 60%;animation:wing-left-turn var(--wing-period,5.8s) ease-in-out var(--bird-delay,0s) infinite}
.wing-right{animation-name:wing-right-turn}
.gull:nth-child(2n) .gull-wing{--wing-period:6.6s}
.gull:nth-child(3n) .gull-wing{--wing-period:5.1s}
@keyframes wing-left-turn{0%,55%,100%{transform:rotate(0deg)}75%{transform:rotate(-11deg)}88%{transform:rotate(5deg)}}
@keyframes wing-right-turn{0%,55%,100%{transform:rotate(0deg)}75%{transform:rotate(11deg)}88%{transform:rotate(-5deg)}}
body.is-still .gull,body.is-still .gull-wing{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gull,.gull-wing{animation:none}}
/* Shorter wing beats with small gliding rests between them. */
.gull-wing{--wing-period:2.1s}
.gull:nth-child(2n) .gull-wing{--wing-period:2.5s}
.gull:nth-child(3n) .gull-wing{--wing-period:1.9s}
/* Each bird takes a different, slow route among the same compact flock slots. */
.gull:nth-child(1){animation:flock-route-1 118s cubic-bezier(.45,0,.55,1) -0s infinite}
@keyframes flock-route-1{0%{transform:translate(0.00px,0.00px)}14%{transform:translate(13.52px,1.56px)}33%{transform:translate(27.04px,-3.64px)}52%{transform:translate(40.56px,-1.82px)}75%{transform:translate(6.76px,-2.60px)}90%{transform:translate(20.28px,-1.04px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(2){animation:flock-route-2 125s cubic-bezier(.45,0,.55,1) -9s infinite}
@keyframes flock-route-2{0%{transform:translate(0.00px,0.00px)}15%{transform:translate(13.52px,1.56px)}32%{transform:translate(27.04px,3.38px)}53%{transform:translate(-6.76px,2.60px)}74%{transform:translate(6.76px,4.16px)}91%{transform:translate(20.28px,-1.04px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(3){animation:flock-route-3 132s cubic-bezier(.45,0,.55,1) -18s infinite}
@keyframes flock-route-3{0%{transform:translate(0.00px,0.00px)}16%{transform:translate(13.52px,-5.20px)}31%{transform:translate(27.04px,-3.38px)}54%{transform:translate(-6.76px,-4.16px)}73%{transform:translate(6.76px,-2.60px)}90%{transform:translate(20.28px,-0.78px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(4){animation:flock-route-4 139s cubic-bezier(.45,0,.55,1) -27s infinite}
@keyframes flock-route-4{0%{transform:translate(0.00px,0.00px)}14%{transform:translate(13.52px,1.82px)}30%{transform:translate(-20.28px,1.04px)}55%{transform:translate(-6.76px,2.60px)}75%{transform:translate(6.76px,-2.60px)}91%{transform:translate(20.28px,-0.78px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(5){animation:flock-route-5 146s cubic-bezier(.45,0,.55,1) -36s infinite}
@keyframes flock-route-5{0%{transform:translate(0.00px,0.00px)}15%{transform:translate(13.52px,1.82px)}33%{transform:translate(-20.28px,1.04px)}56%{transform:translate(-6.76px,2.60px)}74%{transform:translate(6.76px,4.42px)}90%{transform:translate(-27.04px,3.64px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(6){animation:flock-route-6 153s cubic-bezier(.45,0,.55,1) -45s infinite}
@keyframes flock-route-6{0%{transform:translate(0.00px,0.00px)}16%{transform:translate(-33.80px,-0.78px)}32%{transform:translate(-20.28px,0.78px)}52%{transform:translate(-6.76px,-4.42px)}73%{transform:translate(6.76px,-2.60px)}91%{transform:translate(-27.04px,-3.38px)}100%{transform:translate(0.00px,0.00px)}}
.gull:nth-child(7){animation:flock-route-7 160s cubic-bezier(.45,0,.55,1) -54s infinite}
@keyframes flock-route-7{0%{transform:translate(0.00px,0.00px)}14%{transform:translate(-33.80px,-0.78px)}31%{transform:translate(-20.28px,0.78px)}53%{transform:translate(-6.76px,2.60px)}75%{transform:translate(-40.56px,1.82px)}90%{transform:translate(-27.04px,3.38px)}100%{transform:translate(0.00px,0.00px)}}
body.is-still .gulls .gull,body.is-still .gull-wing{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gulls .gull,.gull-wing{animation:none}}
/* Rearward view: the compact flock recedes into a vanishing point left of centre. */
.gulls{left:calc(43% - 26px);top:calc(50% - 9px);transform-origin:50% 50%;animation:flock-receding 225s linear -20s infinite}
@keyframes flock-receding{
0%{transform:translate(-6px,-18px) scale(1);opacity:0}
6%{transform:translate(-5px,-17px) scale(.96);opacity:.42}
38%{transform:translate(-1px,-10px) scale(.69);opacity:.38}
70%{transform:translate(3px,-3px) scale(.38);opacity:.28}
93%{transform:translate(5px,1px) scale(.13);opacity:.08}
98%,100%{transform:translate(6px,2px) scale(.08);opacity:0}
}
body.is-still .gulls{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gulls{animation:none;left:calc(43% - 26px);transform:translateY(-12px) scale(.8);opacity:.35}}
/* Enter from offscreen right, then visibly travel toward the distant 43% point. */
.gulls{left:calc(43% - 26px);top:calc(50% - 9px);transform-origin:50% 50%;animation:flock-arriving-and-receding 240s linear -20s infinite}
@keyframes flock-arriving-and-receding{
0%{transform:translate(calc(57vw + 90px),-10vh) scale(1);opacity:.42}
12%{transform:translate(49vw,-9vh) scale(.96);opacity:.42}
35%{transform:translate(29vw,-6.5vh) scale(.78);opacity:.4}
60%{transform:translate(12vw,-3.5vh) scale(.51);opacity:.34}
82%{transform:translate(3vw,-1.2vh) scale(.27);opacity:.23}
95%{transform:translate(0,-.15vh) scale(.1);opacity:.07}
99%,100%{transform:translate(0,2px) scale(.06);opacity:0}
}
body.is-still .gulls{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gulls{animation:none;transform:translate(12vw,-8px) scale(.6);opacity:.35}}
/* Desktop starts with larger silhouettes; the complete flock still shrinks away. */
@media(min-width:900px){.gull{width:calc(var(--bird-size,20px)*.68);height:7.5px;stroke-width:.8}}
/* Shoreline motion is driven by the same phase as the audible surf envelope. */
.shore{animation:none;transform-origin:50% 100%;will-change:transform}
.shore-front{fill:#e4e7d88a}
.shore path{stroke:#dfe8df55;stroke-width:1;vector-effect:non-scaling-stroke}
@media(prefers-reduced-motion:reduce){.shore{will-change:auto}}
/* A tiny working boat exactly at the distant waterline. */
.fishing-cutter{position:absolute;z-index:2;bottom:calc(50% - 1px);left:24%;width:clamp(14px,1.6vw,24px);opacity:.48;pointer-events:none;transform-origin:center}
.fishing-cutter svg{display:block;width:100%;height:auto;fill:color-mix(in srgb,var(--sea-bottom,#244d60) 70%,#182b35)}
.cutter-rig{fill:none;stroke:color-mix(in srgb,var(--sea-bottom,#244d60) 70%,#182b35);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fishing-cutter .cutter-window{fill:var(--sky-horizon,#d6bca0);opacity:.5}
/* An occasional lone bird in side profile, usually gliding. */
.solo-bird{position:absolute;z-index:3;left:-80px;top:27%;width:clamp(14px,1.65vw,27px);opacity:.65;pointer-events:none;transform-origin:center}
.solo-bird svg{display:block;width:100%;height:auto;overflow:visible;fill:color-mix(in srgb,#233544 85%,var(--cloud-color,#d5dcd9))}
.solo-wing{transform-box:view-box;transform-origin:47% 61%}
@media(prefers-reduced-motion:reduce){.solo-bird{display:none}}
/* Reference-derived profile sprite; keep the body steady during the single wing stroke. */
.solo-bird .solo-wing{transform-box:view-box;transform-origin:60% 60%}
/* A flattened projection of the real mast, sails and hull, anchored at the waterline. */
.sailboat::before{content:none}
.sailboat .boat-shadow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 85%;animation:none;opacity:0;filter:blur(.65px);mix-blend-mode:multiply;pointer-events:none}
.sailboat .boat-shadow :is(.boat-sail,.boat-hull){fill:#102331}
.sailboat .boat-shadow .boat-mast{stroke:#102331}
/* Consistent sprite registration keeps the body steady while wings change pose. */
.solo-bird{width:clamp(24px,2.5vw,44px)}
.solo-bird svg{overflow:hidden}
/* Cloud transit gently dims scenery, direct reflection and the solar shadow together. */
.coast::after{background:rgba(5,12,29,calc(var(--scene-shade,0) + var(--cloud-shade,0)))}
.reflection{opacity:calc(var(--reflection-alpha,0) * var(--direct-light,1))}
.sailboat .boat-shadow{transform:none;transform-origin:0 0}
/* Fly in front of text, including while the interface fades in or out. */
body>.solo-bird{position:fixed;z-index:10;pointer-events:none}
/* Explicit square dimensions and viewport waterline prevent mobile SVG sizing drift. */
.sailboat{position:fixed;--boat-size:clamp(24px,3.2vw,48px);width:var(--boat-size);height:var(--boat-size);transform-origin:50% 85%}
.sailboat>svg:not(.boat-shadow){width:100%;height:100%}
/* Sails become a soft silhouette near the sun's bearing; shadows keep their own colour. */
.sailboat>svg:not(.boat-shadow) .boat-sail{fill:color-mix(in srgb,var(--cloud-color,#e1e2da),#142b37 var(--sail-backlight,0%))}
.sailboat>svg:not(.boat-shadow) .boat-mast{stroke:color-mix(in srgb,var(--cloud-color,#c6d0cd),#142b37 var(--sail-backlight,0%))}
/* Sailcloth illumination: separate the two sail planes and preserve warm transmitted light. */
.sailboat>svg:not(.boat-shadow) .boat-sail{
fill:var(--sail-cloth,#e9e7dc);
stroke:rgba(92,105,108,.12);
stroke-width:.45;
}
.sailboat>svg:not(.boat-shadow) .boat-sail:first-child{fill:var(--sail-main,#f1ebdc)}
.sailboat>svg:not(.boat-shadow) .boat-sail:nth-child(2){fill:var(--sail-jib,#dce0d9)}
/* Hull, mast and sails share one continuous shadow and one opacity. */
.sailboat .boat-shadow :is(.boat-shadow-silhouette,.shadow-contact){fill:#102331;stroke:none}
/* The distant cutter is darkest in the sun's bearing and fades into haze away from it. */
.fishing-cutter{--cutter-color:color-mix(in srgb,var(--sky-horizon,#d6bca0),#142b37 var(--cutter-ink,40%))}
.fishing-cutter svg{fill:var(--cutter-color)}
.fishing-cutter .cutter-rig{stroke:var(--cutter-color)}
/* Confine shadow painting to the sea viewport; no oversized SVG filters or clip paths. */
.sea>.boat-shadow{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none;opacity:0;z-index:2;mix-blend-mode:multiply}
.sea>.boat-shadow path{fill:#102331;stroke:none;filter:blur(.65px)}
/* Compact icon controls; labels remain available to assistive technology. */
footer nav{gap:10px}
footer nav button{position:relative;flex:none;width:48px;height:48px;min-height:48px;padding:12px;gap:0;border-radius:50%}
footer nav button svg{width:22px;height:22px}
footer nav button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Marine golden hour: cool zenith, thin rose/peach layers, warm solar aureole.
The sky ends exactly at the visible horizon, so its warmest band is not hidden. */
.sky{inset:0 0 50%;background:
radial-gradient(ellipse 46vw 28vh at var(--light-x,var(--sun-x,50%)) var(--sky-light-y,95%),color-mix(in srgb,var(--sun-color) calc(var(--aureole-opacity,0)*100%),transparent),transparent 80%),
linear-gradient(180deg,var(--sky-top) 0%,var(--sky-upper) 36%,var(--sky-middle) 62%,var(--sky-rose) 79%,var(--sky-peach) 91%,var(--sky-horizon) 100%)}
.haze{inset:46% 0 auto;height:7%;background:radial-gradient(ellipse 55% 65% at var(--light-x,var(--sun-x,50%)) 50%,var(--sky-horizon),transparent);opacity:calc(var(--aureole-opacity,0)*.55);filter:blur(14px)}
.sea{background:
radial-gradient(ellipse 42vw 70% at var(--light-x,var(--sun-x,50%)) 0%,color-mix(in srgb,var(--sea-sheen) calc(var(--water-glow,.04)*100%),transparent),transparent 85%),
linear-gradient(180deg,color-mix(in srgb,var(--sea-top) 80%,#12293d) 0%,var(--sea-top) 22%,color-mix(in srgb,var(--sea-top) 65%,var(--sea-bottom)) 65%,var(--sea-bottom) 100%)}
.cloud{background:linear-gradient(180deg,color-mix(in srgb,var(--cloud-color) 80%,var(--sky-upper)) 0%,var(--cloud-color) 65%,var(--cloud-edge) 100%)}
.cloud::before,.cloud::after{background:inherit}
.shore-front{fill:color-mix(in srgb,var(--cloud-edge) 52%,transparent)}
.shore-back{fill:color-mix(in srgb,var(--sky-peach) 30%,transparent)}
.sand{background:linear-gradient(color-mix(in srgb,var(--sky-peach) 35%,var(--sea-bottom)),var(--sea-bottom))}
/* Hull and cast shadow share the same ink colour. */
.sailboat>svg:not(.boat-shadow) .boat-hull{fill:#102331}
/* A gentle horizontal camera turn keeps the sun and its reflection together. */
body.is-view-turning .sun{transition:none}
.sailboat,.fishing-cutter,.gulls,.cloud,.night-moon,body>.solo-bird{translate:var(--view-shift,0px) 0}
/* Atmospheric color gradient and slight refraction flattening near the horizon. */
.sun{transform:translate(-50%,-50%) scaleY(var(--sun-flatten,1));background:linear-gradient(to bottom,var(--sun-upper,#fff8e7),var(--sun-color,#ffe3af) 50%,var(--sun-lower,#ffe6ae));}
/* Coastal depth: cool distant sea, darker troughs, lighter surf and wet shore. */
.sea{background:linear-gradient(180deg,var(--sea-top) 0%,color-mix(in srgb,var(--sea-top) 75%,#172b3b) 38%,var(--sea-bottom) 100%)}
.shore-back{fill:color-mix(in srgb,var(--sea-top) 70%,var(--sky-peach) 30%)}
.shore-front{fill:color-mix(in srgb,var(--cloud-edge) 65%,var(--sea-top) 35%)}
.sand{background:linear-gradient(180deg,color-mix(in srgb,var(--sea-bottom) 60%,var(--sky-peach) 40%),var(--sea-bottom))}
/* Wave crests catch daylight; troughs remain cool even at sunset. */
.sea::before{opacity:calc(.12 + var(--surf-daylight,.5)*.28)}
.shore-front{fill:color-mix(in srgb,var(--cloud-edge) calc(40% + var(--surf-daylight,.5)*35%),var(--sea-top))}
.shore-back{fill:color-mix(in srgb,var(--sea-top) 75%,var(--sky-peach) 25%)}
.sand{background:linear-gradient(180deg,color-mix(in srgb,var(--sea-bottom) 60%,var(--sky-peach) 40%),color-mix(in srgb,var(--sea-bottom) 85%,var(--sky-rose) 15%))}
/* Broken solar glitter: horizontal wave facets, never a solid cone. */
.reflection{
background:
repeating-linear-gradient(177deg,transparent 0 9px,color-mix(in srgb,var(--sun-color) 62%,transparent) 10px 10.8px,transparent 12px 21px),
repeating-linear-gradient(183deg,transparent 0 16px,color-mix(in srgb,var(--sea-sheen) 44%,transparent) 17px 18px,transparent 19px 32px),
radial-gradient(ellipse 52% 88% at 50% 4%,color-mix(in srgb,var(--sun-color) 24%,transparent),transparent 80%);
background-size:100% 100%,83% 100%,100% 100%;
mask-image:linear-gradient(#000 0%,#000d 22%,#0008 58%,transparent 100%),radial-gradient(ellipse at 50% 12%,#000 12%,transparent 78%);
-webkit-mask-image:linear-gradient(#000 0%,#000d 22%,#0008 58%,transparent 100%),radial-gradient(ellipse at 50% 12%,#000 12%,transparent 78%);
}
.reflection::before{
content:'';display:block;position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(2deg,transparent 0 13px,color-mix(in srgb,var(--sun-color) 72%,transparent) 14px 14.8px,transparent 16px 28px);
background-size:68% 100%;
opacity:.42;
animation:solar-facets 13s ease-in-out infinite alternate;
}
@keyframes solar-facets{from{background-position:-12px 0;opacity:.2}to{background-position:17px 6px;opacity:.55}}
body.is-still .reflection::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.reflection::before{animation:none}}
/* Near the horizon, wave facets glow longer and warmer; at higher sun the glints are tighter. */
.reflection{background-size:100% 100%,calc(70% + var(--glitter-near-horizon,0)*25%) 100%,100% 100%}
.reflection::before{opacity:calc(.12 + var(--glitter-brightness,.5)*.35)}
/* Baltic dusk: the upper sky cools first; residual warmth stays low. */
.sky{
background:
radial-gradient(ellipse 52vw 25vh at var(--light-x,var(--sun-x,50%)) 96%,color-mix(in srgb,var(--sun-color) calc(var(--aureole-opacity,0)*80%),transparent),transparent 82%),
linear-gradient(180deg,
color-mix(in srgb,var(--sky-top) 85%,#071329) 0%,
var(--sky-upper) 24%,
color-mix(in srgb,var(--sky-middle) 78%,var(--sky-upper)) 49%,
var(--sky-middle) 67%,
var(--sky-rose) 83%,
color-mix(in srgb,var(--sky-peach) 72%,var(--sky-horizon)) 94%,
var(--sky-horizon) 100%);
}
.sky::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,#060c20 0%,#101a35 40%,transparent 79%),
linear-gradient(0deg,color-mix(in srgb,var(--sky-peach) 55%,transparent),transparent 18%);
opacity:calc(var(--dusk-depth,0)*.34);
}
.cloud{
background:
radial-gradient(ellipse 75% 90% at 52% 105%,color-mix(in srgb,var(--cloud-edge) 76%,transparent),transparent 86%),
linear-gradient(180deg,color-mix(in srgb,var(--cloud-color) 68%,#17253c) 0%,var(--cloud-color) 73%,var(--cloud-edge) 100%);
border-radius:48% 52% 46% 54% / 62% 67% 33% 38%;
filter:blur(10px);
}
.cloud::before,.cloud::after{background:inherit;border-radius:50% 50% 43% 44%}
.cloud-one{filter:blur(11px)}
.cloud-two{filter:blur(13px)}
.cloud-three{filter:blur(9px)}
/* At night cloud undersides lose their warm rim; only weak skylight remains. */
.cloud{
box-shadow:inset 0 -5px 18px color-mix(in srgb,var(--cloud-edge) calc(var(--cloud-backlight,0)*30%),transparent);
}
.night-stars{opacity:calc(var(--night-opacity,0)*.85)}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}}
/* Individual moving specular highlights, not a static striped gradient. */
.sun-glitter{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.sun-glitter-facet{position:absolute;top:0;left:0;height:1.5px;border-radius:50%;transform-origin:center;background:var(--sun-color,#ffe4ac);box-shadow:0 0 3px 1px color-mix(in srgb,var(--sun-color) 55%,transparent);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.sun-glitter{display:none}}
/* Moon: physical apparent size, horizon tint and subtle lunar surface tones. */
.night-moon{
left:var(--moon-x,79%);
top:var(--moon-y,18%);
width:clamp(38px,4.4vw,66px);
transform:translate(-50%,-50%) scale(var(--moon-scale,1));
opacity:calc(var(--night-opacity,1)*var(--moon-visibility,1));
filter:drop-shadow(0 0 11px color-mix(in srgb,#f5e8d0 22%,transparent));
}
.moon-shadow{fill:#152039;opacity:.48}
#moon-phase-light{
fill:color-mix(in srgb,#d99a6b calc(var(--moon-horizon,0)*68%),#e9e7db);
filter:drop-shadow(0 0 1.2px #fff9e4);
}
/* Replace the old angled repeating stripes with a soft underglow.
Irregular animated .sun-glitter-facet elements provide the highlights. */
.reflection{
background:radial-gradient(ellipse 42% 85% at 50% 0%,color-mix(in srgb,var(--sun-color) 19%,transparent),transparent 78%);
background-size:100% 100%;
}
.reflection::before{content:none;animation:none}
/* Sailcloth in daylight, warm translucent backlight, cool dusk silhouette. */
.sailboat>svg:not(.boat-shadow) .boat-sail{
fill:color-mix(in srgb,
color-mix(in srgb,var(--cloud-color,#e9e7df) 80%,#f4f0e3)
calc(100% - var(--sail-backlight,0%)),
color-mix(in srgb,var(--sun-color,#ffe2ae) 55%,#8b563e));
stroke:color-mix(in srgb,var(--cloud-edge,#d1c8b7) 65%,#394250);
stroke-width:.45;
}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,#142737 78%,var(--sea-top,#315b72));
}
.sailboat>svg:not(.boat-shadow) .boat-mast{
stroke:color-mix(in srgb,#27333b 78%,var(--sun-color,#f2d9a8));
}
/* Keep the hull waterline on the horizon; only mast and sails rise above it. */
.sailboat{top:calc(50% - var(--boat-size) * .8)}
/* Stronger solar colour on the sea without restoring regular stripe patterns. */
.reflection{
background:
radial-gradient(ellipse 34% 80% at 50% 2%,color-mix(in srgb,var(--sun-color) 38%,transparent),transparent 82%),
radial-gradient(ellipse 65% 90% at 50% 0%,color-mix(in srgb,var(--sky-peach) 17%,transparent),transparent 94%);
filter:blur(5px);
}
.sun-glitter-facet{
background:color-mix(in srgb,var(--sun-color) 82%,#fff6d8);
box-shadow:0 0 5px 1.4px color-mix(in srgb,var(--sun-color) 68%,transparent);
}
/* Living wet-sand edge: the water leaves a fading, reflective film behind. */
.sand{overflow:hidden;isolation:isolate}
.sand::before{
content:"";position:absolute;inset:-12% -5% 20%;pointer-events:none;
background:linear-gradient(180deg,
color-mix(in srgb,var(--sea-top,#55768a) 58%,var(--sky-peach,#d7a49c)) 0%,
color-mix(in srgb,var(--sea-bottom,#314b60) 70%,var(--sky-peach,#d7a49c)) 42%,
transparent 100%);
opacity:var(--wet-sand-opacity,.35);
transform:translateY(var(--wet-sand-shift,0px));
transition:opacity .8s ease;
}
.sand::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 24% 50% at var(--shore-light-x,50%) 0%,
color-mix(in srgb,var(--sun-color,#f3c9a0) 40%,transparent),transparent 88%);
opacity:var(--wet-sand-glow,.2);
}
/* A thin broken-looking foam glint rather than two heavy outlined bands. */
.shore-front path{
stroke:color-mix(in srgb,var(--cloud-color,#d8e1df) 55%,transparent);
stroke-width:1.3;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.shore-back path{
stroke:color-mix(in srgb,var(--cloud-color,#d8e1df) 25%,transparent);
stroke-width:.65;
vector-effect:non-scaling-stroke;
}
/* The beach must not read as a fixed rectangular bar.
Feather its sea-facing edge; wet sand mirrors the sky, dry sand stays matte. */
.sand{
inset:83% 0 0;
z-index:2;
background:linear-gradient(180deg,
color-mix(in srgb,var(--sea-bottom) 77%,var(--sky-horizon) 23%) 0%,
color-mix(in srgb,var(--sea-bottom) 61%,var(--sky-peach) 39%) 38%,
color-mix(in srgb,var(--sea-bottom) 72%,var(--sky-rose) 28%) 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
}
.sand::before{
background:linear-gradient(180deg,
color-mix(in srgb,var(--sky-horizon) 55%,var(--sea-top)) 0%,
color-mix(in srgb,var(--sky-peach) 43%,var(--sea-bottom)) 45%,
transparent 95%);
}
.sand::after{
background:radial-gradient(ellipse 30% 60% at var(--shore-light-x,50%) 4%,
color-mix(in srgb,var(--sun-color,#f3c9a0) 46%,transparent),transparent 90%);
}
/* The control area is part of the same shore, not a separate fixed dark bar.
A subtle luminous wash breathes with the surf audio envelope. */
body>footer{
background:linear-gradient(180deg,
color-mix(in srgb,var(--sea-bottom,#30475a) 76%,var(--sky-peach,#cba29c) 24%) 0%,
color-mix(in srgb,var(--sea-bottom,#30475a) 90%,#102c38) 100%);
isolation:isolate;
}
body>footer::before{
content:"";position:absolute;inset:-34px 0 0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse 100% 75% at 50% 0%,
color-mix(in srgb,var(--sky-peach,#cba29c) 24%,transparent),transparent 85%);
opacity:var(--shore-breath,.2);
}
@media(prefers-reduced-motion:reduce){body>footer::before{opacity:.15}}
/* Sail is furled at night; mast and hull remain visible.
Hoisting/lowering follows calculated solar altitude. */
.sailboat>svg:not(.boat-shadow) .boat-sail{
transform-box:fill-box;
transform-origin:50% 100%;
transform:scaleY(var(--sail-hoist,0));
transition:transform 35s ease-in-out;
}
.sailboat .boat-shadow-silhouette{opacity:var(--sail-hoist,0);transition:opacity 35s ease-in-out}
@media(prefers-reduced-motion:reduce){
.sailboat>svg:not(.boat-shadow) .boat-sail,
.sailboat .boat-shadow-silhouette{transition:none}
}
/* Midday overexposure without changing the sun's angular size. */
.sun{
background:radial-gradient(circle at 50% 50%,
color-mix(in srgb,white var(--sun-white-mix,0%),var(--sun-color,#ffe3af)) 0%,
color-mix(in srgb,white var(--sun-white-mix,0%),var(--sun-upper,#fff8e7)) 72%,
var(--sun-lower,#ffe6ae) 100%);
box-shadow:
0 0 25px 8px rgba(255,255,248,.28),
0 0 90px 35px color-mix(in srgb,white var(--sun-white-mix,0%),var(--sun-color,#ffe3af));
}
.sun::after{
content:"";position:absolute;inset:-70%;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,255,255,.72) 0%,rgba(255,255,244,.30) 23%,transparent 69%);
opacity:var(--sun-dazzle,0);
filter:blur(18px);
}
/* Solar limb: luminous, not a shaded grey moon.
Keep the white-hot core and place the soft glare outside the disc. */
.sun{
background:radial-gradient(circle at 49% 47%,
#fffef7 0%,
color-mix(in srgb,#fffef3 82%,var(--sun-color,#ffe3af)) 67%,
color-mix(in srgb,#fff4c9 72%,var(--sun-lower,#ffe6ae)) 92%,
color-mix(in srgb,#fff9dc 88%,var(--sun-color,#ffe3af)) 100%);
filter:none;
box-shadow:
0 0 5px 2px rgba(255,251,224,.94),
0 0 17px 7px rgba(255,248,215,.57),
0 0 55px 24px color-mix(in srgb,var(--sun-color,#ffe3af) 45%,transparent),
0 0 125px 42px color-mix(in srgb,var(--sun-color,#ffe3af) 19%,transparent);
}
.sun::after{
inset:-90%;
background:radial-gradient(circle,
rgba(255,255,249,.72) 0%,
rgba(255,253,230,.34) 16%,
rgba(255,245,206,.13) 37%,
transparent 69%);
filter:blur(13px);
opacity:calc(.24 + .65 * var(--sun-dazzle,0));
}
/* Stars remain pinpoint-sized; only brighter ones scintillate noticeably. */
.night-stars{overflow:visible}
.night-stars circle{
opacity:var(--star-base,.5);
animation:star-scintillation var(--star-duration,5s) ease-in-out var(--star-delay,0s) infinite alternate;
}
@keyframes star-scintillation{
0%{opacity:calc(var(--star-base,.5) - var(--star-twinkle,.03))}
37%{opacity:var(--star-base,.5)}
76%{opacity:calc(var(--star-base,.5) + var(--star-twinkle,.03))}
100%{opacity:var(--star-base,.5)}
}
@media(prefers-reduced-motion:reduce){.night-stars circle{animation:none}}
/* The 18-second sunrise replay drives the hoist directly.
A 35-second transition otherwise leaves the sail furled at noon. */
body.sunrise-intro .sailboat>svg:not(.boat-shadow) .boat-sail,
body.sunrise-intro .sailboat .boat-shadow-silhouette{
transition:none;
}
/* Moonlight only when the real moon is above the horizon and sky is dark. */
.moon-waterlight{
position:absolute;z-index:1;pointer-events:none;
top:50%;bottom:5%;left:var(--moon-reflection-x,50%);
width:clamp(45px,12vw,160px);transform:translateX(-50%);
opacity:var(--moon-water-strength,0);
background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(225,234,252,.38) 9px 10px,transparent 12px 20px);
-webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,black 55%,transparent 100%),linear-gradient(to right,transparent,black 45%,transparent);
mask-image:linear-gradient(to bottom,transparent,black 20%,black 55%,transparent 100%);
filter:blur(2px);
animation:moon-shimmer 12s ease-in-out infinite alternate;
}
.moon-shorelight{
position:absolute;z-index:2;pointer-events:none;
bottom:0;left:var(--moon-reflection-x,50%);width:38%;height:14%;
transform:translateX(-50%);
opacity:var(--moon-water-strength,0);
background:radial-gradient(ellipse at 50% 10%,rgba(211,225,250,.38),transparent 70%);
filter:blur(13px);
}
@keyframes moon-shimmer{from{background-position:0 0;opacity:calc(var(--moon-water-strength,0)*.65)}to{background-position:0 19px;opacity:var(--moon-water-strength,0)}}
.dune-grass{
position:absolute;z-index:4;bottom:0;width:clamp(55px,15vw,155px);
height:clamp(95px,24vh,225px);pointer-events:none;
color:color-mix(in srgb,#9b9163 calc(var(--grass-daylight,0)*75%),#202b34);
opacity:.68;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.dune-grass-left{left:-9px}
.dune-grass-right{right:-35px;transform:scaleX(-1);opacity:.38}
.sailboat>svg:not(.boat-shadow),.fishing-cutter svg{
filter:drop-shadow(0 0 4px rgba(255,215,141,calc(var(--boat-night-light,0)*.6)));
}
.sailboat::before,.fishing-cutter::before{
content:"";position:absolute;z-index:4;
width:3px;height:3px;border-radius:50%;
top:56%;left:49%;
background:#ffe2a0;
box-shadow:0 0 6px 2px rgba(255,210,125,.85);
opacity:var(--boat-night-light,0);
}
.fishing-cutter::before{
top:54%;left:52%;
background:#fff0b7;
box-shadow:-8px 1px 3px #e4473e,8px 1px 3px #55bc9c,0 0 6px 2px #ffe2a0;
}
.sailboat::after,.fishing-cutter::after{
content:"";position:absolute;pointer-events:none;
left:48%;top:82%;width:9px;height:45px;
transform:translateX(-50%);
opacity:calc(var(--boat-night-light,0)*.65);
background:repeating-linear-gradient(to bottom,rgba(255,211,127,.65) 0 2px,transparent 3px 8px);
filter:blur(2px);
clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
}
@media(prefers-reduced-motion:reduce){.moon-waterlight{animation:none}}
/* Individual navigation lights are part of each vessel's SVG silhouette.
Red/green port/starboard and white mast light illuminate only at night. */
.sailboat .nav-lights,.fishing-cutter .nav-lights{
opacity:var(--boat-night-light,0);
transition:opacity 20s ease;
}
.sailboat .nav-lights circle,.fishing-cutter .nav-lights circle{
stroke:none;
}
.sailboat .nav-red,.fishing-cutter .nav-red{fill:#ff554c;filter:drop-shadow(0 0 2px #ff3939)}
.sailboat .nav-green,.fishing-cutter .nav-green{fill:#64e5ae;filter:drop-shadow(0 0 2px #38eab2)}
.sailboat .nav-white,.fishing-cutter .nav-white{fill:#fff4d3;filter:drop-shadow(0 0 3px #fff0c3)}
/* Remove the old generic yellow dot; the SVG lamps now define the lights. */
.sailboat::before,.fishing-cutter::before{content:none}
/* Night vessel refinement: restrained pinprick navigation lights, visible
silhouettes and very short broken reflections, not long light pillars. */
.sailboat>svg:not(.boat-shadow),.fishing-cutter svg{
filter:none;
}
.sailboat,.fishing-cutter{
opacity:calc(.63 + .25 * var(--boat-night-light,0));
}
.fishing-cutter{opacity:calc(.48 + .32 * var(--boat-night-light,0))}
.sailboat .nav-lights circle,.fishing-cutter .nav-lights circle{
filter:none;
stroke:rgba(255,255,255,.18);
stroke-width:.25px;
}
.sailboat .nav-red,.fishing-cutter .nav-red{fill:#ef3c39}
.sailboat .nav-green,.fishing-cutter .nav-green{fill:#39c891}
.sailboat .nav-white,.fishing-cutter .nav-white{fill:#fff4d4}
.sailboat::after,.fishing-cutter::after{
left:50%;top:87%;
width:7px;height:20px;
opacity:calc(var(--boat-night-light,0)*.35);
background:repeating-linear-gradient(to bottom,
rgba(255,230,168,.46) 0 1px,transparent 2px 6px);
clip-path:polygon(47% 0,53% 0,83% 100%,17% 100%);
filter:blur(1.1px);
}
.fishing-cutter::after{height:15px;width:5px;top:94%}
/* At night the unlit hulls and rigs become near-black silhouettes.
Navigation lights remain separate and retain their own colors. */
.sailboat .boat-hull{
fill:color-mix(in srgb,var(--sea-bottom,#244d60) calc(100% - var(--boat-night-light,0)*100%),#070b11);
}
.sailboat .boat-sail{
fill:color-mix(in srgb,var(--cloud-color,#e1e2da) calc(100% - var(--boat-night-light,0)*100%),#090d13);
}
.sailboat .boat-mast{
stroke:color-mix(in srgb,var(--cloud-color,#c6d0cd) calc(100% - var(--boat-night-light,0)*100%),#060a10);
}
.fishing-cutter svg{
fill:color-mix(in srgb,var(--sea-bottom,#244d60) calc(100% - var(--boat-night-light,0)*100%),#060a10);
}
.fishing-cutter .cutter-rig{
stroke:color-mix(in srgb,var(--sea-bottom,#244d60) calc(100% - var(--boat-night-light,0)*100%),#060a10);
}
.fishing-cutter .cutter-window{
fill:#e4b976;
opacity:calc(.5 * var(--boat-night-light,0));
}
/* A boat shadow on moving water should break into short rippled patches. */
.sailboat .boat-shadow{
filter:blur(1.9px);
opacity:.42;
-webkit-mask-image:repeating-linear-gradient(175deg,rgba(0,0,0,.75) 0 3px,rgba(0,0,0,.3) 5px,transparent 8px,rgba(0,0,0,.65) 12px);
mask-image:repeating-linear-gradient(175deg,rgba(0,0,0,.75) 0 3px,rgba(0,0,0,.3) 5px,transparent 8px,rgba(0,0,0,.65) 12px);
}
.sailboat .boat-shadow-silhouette{fill:#17394a}
.sailboat .shadow-contact{fill:#183d4d}
/* Preserve daylight invisibility but make tiny cutter lights legible at night. */
.fishing-cutter .nav-lights circle{stroke-width:.4px}
.fishing-cutter .nav-red,.fishing-cutter .nav-green{r:2.3px}
.fishing-cutter .nav-white{r:2.2px}
.fishing-cutter .nav-red{filter:drop-shadow(0 0 2.4px #ff4c45)}
.fishing-cutter .nav-green{filter:drop-shadow(0 0 2.4px #42f6b2)}
.fishing-cutter .nav-white{filter:drop-shadow(0 0 2.6px #fff5ce)}
/* Vessel lighting: mast light stays; the side facing shore determines
which colored lamp can be seen. Return legs reverse the sailboat. */
.sailboat{animation-direction:alternate}
/* Directional mirroring now belongs solely to the inner .boat-model SVG group. */
.sailboat .nav-port,.fishing-cutter .nav-port{opacity:0}
.sailboat.is-returning .nav-port,.fishing-cutter.is-returning .nav-port{opacity:1}
.sailboat.is-returning .nav-starboard,.fishing-cutter.is-returning .nav-starboard{opacity:0}
.fishing-cutter .nav-bow{
fill:#fff9d7;
filter:drop-shadow(0 0 3px #fff3c0) drop-shadow(0 0 5px #fff4d2);
}
.fishing-cutter .nav-bow{opacity:.95}
/* Shore-side navigation convention: left-to-right shows starboard green,
right-to-left shows port red. White mast/bow/stern stay visible. */
.sailboat:not(.is-returning) .nav-green,
.fishing-cutter:not(.is-returning) .nav-green{opacity:1}
.sailboat:not(.is-returning) .nav-red,
.fishing-cutter:not(.is-returning) .nav-red{opacity:0}
.sailboat.is-returning .nav-green,
.fishing-cutter.is-returning .nav-green{opacity:0}
.sailboat.is-returning .nav-red,
.fishing-cutter.is-returning .nav-red{opacity:1}
.sailboat .nav-white,.fishing-cutter .nav-white{opacity:1}
.sailboat .nav-bow{filter:drop-shadow(0 0 1.6px #fff0cf)}
/* Layered dune grasses respond to a shared, gently varying sea breeze.
Slightly stronger by day, softer by night; each tuft moves differently. */
.dune-grass{
transform-origin:50% 100%;
animation:grass-breeze var(--grass-wind-duration,5.5s) ease-in-out infinite alternate;
will-change:transform;
}
.dune-grass-left{width:clamp(90px,23vw,235px);left:-22px;opacity:.78}
.dune-grass-thicket{
left:clamp(-42px,-3vw,-12px);
bottom:-4px;
width:clamp(105px,27vw,265px);
height:clamp(110px,27vh,245px);
opacity:.65;
animation-duration:calc(var(--grass-wind-duration,5.5s)*1.17);
animation-delay:-2.7s;
}
.dune-grass-right{
animation-name:grass-breeze-right;
animation-duration:calc(var(--grass-wind-duration,5.5s)*1.11);
animation-delay:-1.6s;
}
@keyframes grass-breeze{
from{transform:rotate(calc(var(--grass-wind-angle,3deg)*-.5)) skewX(-1deg)}
to{transform:rotate(var(--grass-wind-angle,3deg)) skewX(1.5deg)}
}
@keyframes grass-breeze-right{
from{transform:scaleX(-1) rotate(calc(var(--grass-wind-angle,3deg)*-.5))}
to{transform:scaleX(-1) rotate(var(--grass-wind-angle,3deg))}
}
@media(prefers-reduced-motion:reduce){
.dune-grass{animation:none;will-change:auto}
.dune-grass-right{transform:scaleX(-1)}
}
/* Offshore rotating beacon: pivot 1.5vh below the 50% sea horizon.
The beam starts almost tangent to the horizon across the full frame,
then its near-horizontal fan lifts away together as it sweeps overhead. */
.lighthouse-sky{
position:absolute;z-index:1;pointer-events:none;
inset:0 0 50% 0;overflow:visible;
opacity:clamp(0,calc(var(--boat-night-light,0)*1.4),1);
}
.lighthouse-sky-beam{
position:absolute;
right:-24vw;
bottom:-1.5vh;
width:230vw;
height:175vh;
transform-origin:100% 100%;
clip-path:polygon(0 93%,0 100%,100% 100%);
background:linear-gradient(180deg,
transparent 0%,rgba(190,222,255,.04) 83%,
rgba(214,236,255,.14) 93%,rgba(246,251,255,.32) 98%,
rgba(230,244,255,.18) 100%);
filter:blur(7px);
will-change:transform,opacity;
backface-visibility:hidden;
animation:lighthouse-horizon-sweep 4s linear infinite;
}
/* Narrow until 30 degrees, then rapidly open toward the right.
At 45 degrees a diffuse fill covers the entire right-hand sky. */
@keyframes lighthouse-horizon-sweep{
0%{transform:rotate(-1deg) scaleY(1);opacity:0}
2%{opacity:.45}
5%{opacity:1}
8.611%{transform:rotate(30deg) scaleY(1);opacity:1}
11%{transform:rotate(38.6deg) scaleY(1.55);opacity:1}
12.778%{transform:rotate(45deg) scaleY(2.8);opacity:1}
15%{transform:rotate(53deg) scaleY(3.2);opacity:.9}
18%{transform:rotate(63.8deg) scaleY(3.5);opacity:.7}
21%{transform:rotate(74.6deg) scaleY(3.8);opacity:.4}
24%{transform:rotate(85.4deg) scaleY(4);opacity:0}
100%{transform:rotate(359deg) scaleY(1);opacity:0}
}
/* Only the sky ABOVE the right-hand beam edge brightens.
Below its slanted lower boundary the night stays immediately dark;
never wash the entire right half with a rectangular glow. */
.lighthouse-sky::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(90deg,transparent 30%,rgba(202,229,255,.08) 62%,rgba(227,242,255,.22) 100%);
clip-path:polygon(100% 0,100% 100%,100% 100%,100% 0);
opacity:0;
animation:lighthouse-upper-right-wedge 4s linear infinite;
}
@keyframes lighthouse-upper-right-wedge{
0%,8.611%{
opacity:0;
clip-path:polygon(100% 0,100% 100%,100% 100%,100% 0);
}
11%{
opacity:.4;
clip-path:polygon(63% 0,100% 0,100% 72%,83% 100%);
}
12.778%{
opacity:1;
clip-path:polygon(42% 0,100% 0,100% 55%,73% 100%);
}
17%{
opacity:1;
clip-path:polygon(25% 0,100% 0,100% 32%,64% 100%);
}
24%,100%{
opacity:0;
clip-path:polygon(0 0,100% 0,100% 12%,55% 100%);
}
}
@media(prefers-reduced-motion:reduce){
.lighthouse-sky-beam{animation:none;opacity:0;will-change:auto}
.lighthouse-sky::after{animation:none;opacity:0}
}
/* Lighthouse temporarily disabled; keep implementation for later. */
.lighthouse-sky{display:none!important}
/* Stylized distant harbor entrance sector light, inspired by the
Travemünde Nordermole: occulting green, 3s on / 1s off (4s period).
At a real 30 km range it would generally be below the horizon or
outside nominal range; keep the artistic cue extremely faint. */
.harbor-entrance-light{
position:absolute;
z-index:2;
pointer-events:none;
left:77%;
top:calc(50% - 1px);
width:2px;height:2px;
border-radius:50%;
background:#b5ffcb;
box-shadow:0 0 2px 1px rgba(87,230,146,.28),0 0 6px 2px rgba(52,170,100,.09);
opacity:calc(var(--boat-night-light,0)*.55);
animation:harbor-entrance-occult 4s linear infinite;
}
@keyframes harbor-entrance-occult{
0%,73%{visibility:visible}
75%,99.99%{visibility:hidden}
100%{visibility:visible}
}
@media(prefers-reduced-motion:reduce){
.harbor-entrance-light{animation:none}
}
/* Infrequent, non-interactive nighttime phenomena. */
.night-events{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.distant-lightning{position:absolute;inset:0 0 50% 0;width:100%;height:50%;border-radius:0;opacity:0;filter:none;background:radial-gradient(ellipse 65% 42% at var(--flash-x,75%) 98%,rgba(194,209,255,.19) 0%,rgba(162,179,229,.075) 42%,transparent 100%);pointer-events:none}
.distant-lightning.flash{animation:distant-cloud-flash .55s steps(1,end) both}
@keyframes distant-cloud-flash{0%,12%,21%,34%,100%{opacity:0}5%{opacity:.6}16%{opacity:.27}25%{opacity:.48}}
.shooting-star{position:absolute;top:12%;left:50%;width:85px;height:1px;opacity:0;transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(219,232,255,.15),rgba(255,255,255,.95));filter:drop-shadow(0 0 2px rgba(220,237,255,.6))}
.shooting-star.fly{animation:meteor-pass 1.25s ease-out both}
@keyframes meteor-pass{0%{opacity:0;transform:rotate(var(--meteor-angle,25deg)) translateX(0)}14%{opacity:.9}65%{opacity:.7}100%{opacity:0;transform:rotate(var(--meteor-angle,25deg)) translateX(210px)}}
.distant-aircraft{position:absolute;top:12%;left:0;width:9px;height:5px;opacity:0}
.distant-aircraft.cross{animation:aircraft-cross 70s linear both;animation-direction:normal}
.distant-aircraft[style*="--aircraft-direction: -1"].cross{animation-direction:reverse}
.distant-aircraft i{position:absolute;display:block;width:2px;height:2px;border-radius:50%;top:2px}
.aircraft-red{left:0;background:#e17c77;box-shadow:0 0 3px #d45b58}
.aircraft-green{right:0;background:#9bcab2;box-shadow:0 0 3px #8ac8a0}
.aircraft-strobe{left:4px;background:#fff;animation:aircraft-strobe 2.2s steps(1,end) infinite}
@keyframes aircraft-strobe{0%,3%,7%,100%{opacity:0}1%,5%{opacity:1}}
@keyframes aircraft-cross{0%{opacity:0;transform:translateX(-4vw)}5%,94%{opacity:.62}100%{opacity:0;transform:translateX(104vw)}}
@media(prefers-reduced-motion:reduce){.distant-lightning,.shooting-star,.distant-aircraft{display:none!important}}
/* Moon realism: the unlit lunar disk is not a visible dark silhouette.
Only the illuminated phase should show against the night sky. */
.night-moon{overflow:visible;filter:drop-shadow(0 0 3px rgba(240,235,216,.17))}
.night-moon .moon-shadow{fill:transparent!important;opacity:0!important}
.night-moon #moon-phase-light{filter:drop-shadow(0 0 1px rgba(255,247,220,.48))}
/* Moon reflection: broken, narrow silver highlights, not a broad striped column.
Near moonrise the path is short and faint; it lengthens with lunar altitude. */
.moon-waterlight{
top:50%;bottom:auto;
height:calc(8% + var(--moon-reflection-length,.4)*34%);
width:clamp(22px,calc(2.4vw + var(--moon-reflection-length,.4)*6vw),85px);
opacity:calc(var(--moon-water-strength,0)*.55);
background:
repeating-linear-gradient(180deg,
transparent 0 11px,rgba(225,232,246,.19) 12px 13px,
transparent 14px 22px,rgba(218,229,244,.09) 23px 24px,
transparent 25px 37px);
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),black 22%,transparent 100%),linear-gradient(to right,transparent 0%,black 42%,black 58%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),black 22%,transparent 100%);
filter:blur(1.1px);
animation:moon-shimmer 9s ease-in-out infinite alternate;
}
.moon-shorelight{
width:clamp(30px,8vw,100px);height:7%;
opacity:calc(var(--moon-water-strength,0)*.10);
filter:blur(10px);
}
@keyframes moon-shimmer{
from{background-position:0 0;opacity:calc(var(--moon-water-strength,0)*.35)}
to{background-position:0 7px;opacity:calc(var(--moon-water-strength,0)*.55)}
}
.moon-waterlight{background:none!important;filter:none!important;animation:none!important;opacity:var(--moon-water-strength,0)!important;width:clamp(42px,13vw,155px);height:calc(12% + var(--moon-reflection-length,.4)*35%);-webkit-mask-image:linear-gradient(#000,transparent)!important;mask-image:linear-gradient(#000,transparent)!important}
.moon-glint{position:absolute;left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh);border-radius:50%;background:#dfe8f5;opacity:0;transform:translateX(-50%);animation:moon-glimmer var(--mt) ease-in-out var(--md) infinite}
@keyframes moon-glimmer{0%,100%{opacity:0;transform:translateX(-50%) scaleX(.3)}45%{opacity:var(--ma);transform:translateX(-50%) scaleX(1.1)}70%{opacity:0}}
@media(prefers-reduced-motion:reduce){.moon-glint{animation:none;opacity:.12}}
/* Keep lunar reflections in the same camera coordinate system as the moon. */
.moon-waterlight,.moon-shorelight{translate:var(--view-shift,0px) 0}
/* Stronger individual moon highlights, keeping the surrounding sea dark. */
.moon-waterlight{opacity:var(--moon-water-strength,0)!important}
.moon-glint{background:rgba(237,242,252,.95);box-shadow:0 0 2px rgba(222,234,255,.38)}
@keyframes moon-glimmer{0%,100%{opacity:0;transform:translateX(-50%) scaleX(.3)}32%{opacity:calc(var(--ma)*.55)}48%{opacity:min(1,calc(var(--ma)*1.8));transform:translateX(-50%) scaleX(1.3)}72%{opacity:0}}
/* Lunar finish: brighter illuminated phase, no visible unlit disk. */
.night-moon #moon-phase-light{
fill:color-mix(in srgb,#dfad83 calc(var(--moon-horizon,0)*63%),#f3f0e6);
filter:drop-shadow(0 0 1.8px rgba(250,246,229,.7));
}
.night-moon{filter:drop-shadow(0 0 6px rgba(242,238,220,.23))}
/* Dense silver glints close to the horizon, a few broader facets further away. */
.moon-glint{background:rgba(239,243,251,.98)}
.moon-waterlight .moon-glint:nth-child(5n){box-shadow:0 0 3px rgba(235,240,255,.5)}
/* Moonrise optics: warm amber close to the sea, less bloom and modest refraction. */
.night-moon{
width:clamp(30px,3.2vw,49px);
transform:translate(-50%,-50%) scale(var(--moon-scale,1)) scaleY(var(--moon-flatten,1));
filter:drop-shadow(0 0 3px rgba(239,221,192,.18));
}
.night-moon #moon-phase-light{
fill:color-mix(in srgb,#c78050 calc(var(--moon-horizon,0)*85%),#f1f0e8);
filter:drop-shadow(0 0 1px rgba(255,240,215,.24));
}
.night-moon .moon-surface{fill:#55515a;opacity:calc(.075 + (1 - var(--moon-horizon,0))*.065);pointer-events:none}
/* IALA Region A lateral marks, a distant channel pair. Illustrative Fl R/G 4s,
not claimed to be charted marks of the Travemuende approach. */
.channel-buoy{position:absolute;top:calc(50% - 5px);z-index:2;width:5px;height:8px;pointer-events:none;opacity:.76;translate:var(--view-shift,0px) 0}
.channel-buoy-approach{left:25%;--buoy-color:#f0ede5;--buoy-light:#fff7de;opacity:.83}
.channel-buoy-approach .channel-buoy-body{
background:repeating-linear-gradient(90deg,#b83f38 0 1px,#f0ede5 1px 2px,#b83f38 2px 3px);
clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
}
.channel-buoy-approach .channel-buoy-top{background:#b83f38}
.channel-buoy-approach .channel-buoy-light{
animation:approach-buoy-morse-a 8s linear infinite;
box-shadow:0 0 3px 1px rgba(255,246,219,.72);
}
/* White Morse A: short then long, with an extended dark interval. */
@keyframes approach-buoy-morse-a{
0%,9%,18%,43%,100%{opacity:0}
1%,7%,20%,41%{opacity:calc(var(--buoy-lamp-strength,0)*.95)}
}
@media(prefers-reduced-motion:reduce){
.channel-buoy-approach .channel-buoy-light{
animation:none;opacity:calc(var(--buoy-lamp-strength,0)*.9);
}
}
.channel-buoy-port{left:56%;top:calc(50% - 3px);--buoy-color:#32785c;--buoy-light:#5aff9b;--buoy-phase:0s}
.channel-buoy-starboard{left:63%;--buoy-color:#a83d3b;--buoy-light:#ff5148;--buoy-phase:-.8s}
.channel-buoy-body{position:absolute;bottom:0;left:1px;width:3px;height:4px;background:var(--buoy-color);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);filter:brightness(calc(.22 + var(--surf-daylight,0)*.78))}
.channel-buoy-starboard .channel-buoy-body{border-radius:1px 1px 0 0}
.channel-buoy-port .channel-buoy-body{clip-path:polygon(50% 0,100% 100%,0 100%)}
.channel-buoy-top{position:absolute;left:2px;bottom:4px;width:1px;height:2px;background:var(--buoy-color);filter:brightness(calc(.25 + var(--surf-daylight,0)*.75))}
.channel-buoy-light{position:absolute;left:1px;top:0;width:3px;height:3px;border-radius:50%;background:var(--buoy-light);box-shadow:0 0 3px 1px var(--buoy-light);opacity:0;animation:channel-buoy-flash 4s linear var(--buoy-phase) infinite}
@keyframes channel-buoy-flash{0%,73%{opacity:calc(var(--buoy-lamp-strength,0)*.95)}76%,99.99%{opacity:0}100%{opacity:calc(var(--buoy-lamp-strength,0)*.95)}}
@media(prefers-reduced-motion:reduce){.channel-buoy-light{animation:none;opacity:calc(var(--buoy-lamp-strength,0)*.9)}}
/* Moon disc: soft limb shading and quiet maria rather than a flat grey coin. */
.night-moon #moon-phase-light{
fill:url(#moon-disc-gradient);
stroke:rgba(255,250,234,.17);
stroke-width:.45px;
filter:drop-shadow(0 0 1.4px rgba(247,244,222,.36));
}
.night-moon .moon-surface{
fill:#626d74;
opacity:calc(.10 + (1 - var(--moon-horizon,0))*.09);
filter:blur(.7px);
pointer-events:none;
}
.night-moon{
filter:drop-shadow(0 0 4px rgba(244,237,207,.25));
}
/* Horizon reddening of the moon: atmospheric extinction scatters short wavelengths.
Keep the shaded disc, but tint its gradient stops dynamically near moonrise/set. */
.night-moon #moon-disc-gradient stop:nth-child(1){stop-color:color-mix(in srgb,#f4aa72 calc(var(--moon-horizon,0)*95%),#fffdf2)}
.night-moon #moon-disc-gradient stop:nth-child(2){stop-color:color-mix(in srgb,#d98555 calc(var(--moon-horizon,0)*94%),#e9e6dc)}
.night-moon #moon-disc-gradient stop:nth-child(3){stop-color:color-mix(in srgb,#b86445 calc(var(--moon-horizon,0)*90%),#c8c9c5)}
.night-moon #moon-disc-gradient stop:nth-child(4){stop-color:color-mix(in srgb,#844b3c calc(var(--moon-horizon,0)*86%),#9ca2a3)}
.night-moon #moon-phase-light{stroke:rgba(240,184,133,.11)}
/* Baltic sand: pale dry quartz above a narrower darker damp shoreline.
The existing daylight scalar preserves muted blue-grey nights. */
.sand{
background:
radial-gradient(ellipse 80% 25% at 62% 5%,rgba(114,104,87,.18),transparent 85%),
repeating-linear-gradient(177deg,rgba(120,104,80,.055) 0 1px,transparent 1px 13px),
linear-gradient(180deg,
color-mix(in srgb,#9b9180 calc(var(--surf-daylight,0)*90%),var(--sea-bottom)) 0%,
color-mix(in srgb,#c9bca3 calc(var(--surf-daylight,0)*94%),var(--sea-bottom)) 24%,
color-mix(in srgb,#ded3b9 calc(var(--surf-daylight,0)*96%),var(--sea-bottom)) 100%);
}
.sand::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 17% 61%,rgba(100,83,61,.09) 0 1px,transparent 1.5px),
radial-gradient(circle at 72% 34%,rgba(255,250,226,.16) 0 1px,transparent 1.5px);
background-size:31px 23px,43px 37px;
opacity:var(--surf-daylight,0);
}
/* Small fair-weather cumulus with a flat base and uneven, restrained tops. */
.cloud{
height:24px;
border-radius:42% 53% 12% 12% / 82% 80% 15% 15%;
filter:blur(2.8px);
background:linear-gradient(180deg,
color-mix(in srgb,var(--cloud-color,#eef1ee) 90%,#fffaf0) 0%,
var(--cloud-color,#e5e9e7) 57%,
color-mix(in srgb,var(--cloud-color,#e5e9e7) 72%,#91a6b0) 100%);
box-shadow:inset 0 -4px 6px -5px #667c8660;
}
.cloud::before,.cloud::after{
border-radius:48% 52% 15% 15% / 78% 84% 12% 12%;
background:inherit;
box-shadow:none;
}
.cloud::before{width:35%;height:32px;left:20%;bottom:8px}
.cloud::after{width:26%;height:25px;right:18%;bottom:7px}
.cloud-one{height:23px}
.cloud-two{height:15px;filter:blur(3.5px)}
.cloud-two::before{height:21px}
.cloud-two::after{height:16px}
.cloud-three{height:25px;filter:blur(3px)}
/* Soft irregular fair-weather clouds: overlapping curved lobes, no polygon cliffs. */
.cloud{
height:28px;
clip-path:none;
border-radius:58% 44% 32% 29% / 84% 76% 43% 35%;
filter:blur(6px);
background:linear-gradient(180deg,
color-mix(in srgb,var(--cloud-color,#edf0ed) 84%,#fffdf7),
var(--cloud-color,#e7ecea) 62%,
color-mix(in srgb,var(--cloud-color,#e7ecea) 84%,#9eafb7));
box-shadow:none;
}
.cloud::before,.cloud::after{display:block;background:inherit;box-shadow:none}
.cloud::before{width:32%;height:38px;left:17%;bottom:5px;border-radius:62% 48% 42% 40%}
.cloud::after{width:23%;height:29px;right:18%;bottom:5px;border-radius:48% 65% 38% 40%}
.cloud-one{height:26px}
.cloud-two{height:18px;filter:blur(7px)}
.cloud-two::before{height:24px}
.cloud-two::after{height:19px}
.cloud-three{height:29px;filter:blur(7px)}
/* SVG cumulus: smooth individual silhouettes, no CSS-generated humps. */
.cloud,.cloud-one,.cloud-two,.cloud-three{
height:76px;
border-radius:0;
clip-path:none;
filter:none;
background:none;
box-shadow:none;
}
.cloud::before,.cloud::after{content:none;display:none}
.cloud svg{display:block;width:100%;height:100%;overflow:visible;filter:blur(1.3px)}
.cloud-two{height:52px}
.cloud-two svg{filter:blur(2px)}
.cloud-three{height:86px}
.cloud-three svg{filter:blur(1.7px)}
.cloud svg path:first-of-type{opacity:.94}
/* The hull alone creates a subtle, diffuse contact shadow on the water. */
.sea>.boat-shadow .shadow-contact{fill:#385967;filter:blur(1.8px)}
.sea>.boat-shadow .boat-shadow-silhouette{display:none}
/* Visible but restrained hull shadow: two soft water patches. */
.sea>.boat-shadow .boat-shadow-silhouette{display:block;fill:#355967;filter:blur(4px)}
.sea>.boat-shadow .shadow-contact{fill:#294e5d;filter:blur(2px)}
/* Counterlight: translucent white cloth, dark opaque hull and rig. */
.sailboat>svg:not(.boat-shadow) .boat-main{fill:var(--sail-main,#f1ebdc)}
.sailboat>svg:not(.boat-shadow) .boat-jib{fill:var(--sail-jib,#dce0d9)}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,#365969 calc(100% - var(--sail-backlight-strength,0)*78%),#102632);
}
.sailboat>svg:not(.boat-shadow) .boat-mast{
stroke:color-mix(in srgb,#6c8589 calc(100% - var(--sail-backlight-strength,0)*82%),#152b35);
}
/* Prevent oversized sprite-sheet artifacts from the lone bird on mobile Safari.
Keep the distant SVG gull flock; disable the unstable raster-sprite bird. */
.solo-bird{display:none!important}
/* Safari: isolate each moving SVG cloud to prevent leaked horizontal paint strips. */
.cloud{overflow:hidden;isolation:isolate;contain:paint}
.cloud svg{overflow:hidden;filter:none}
.cloud-two svg,.cloud-three svg{filter:none}
.cloud svg path:nth-of-type(2){display:none}
/* Small irregular ripple edges instead of two smooth shadow discs. */
.sea>.boat-shadow .boat-shadow-silhouette{filter:blur(2.4px);opacity:.56}
.sea>.boat-shadow .shadow-contact{filter:blur(1.3px);opacity:.68}
/* Restore readable, gently broken boat shadow against daylight water. */
.sea>.boat-shadow .shadow-contact{fill:#163c4b;filter:blur(.7px);opacity:1}
.sea>.boat-shadow .boat-shadow-silhouette{fill:#214858;filter:blur(1.1px);opacity:.9}
/* Reflection facets lose contrast with distance from the hull. */
.sea>.boat-shadow .boat-shadow-silhouette{opacity:.57;filter:blur(1.2px)}
.sea>.boat-shadow .shadow-contact{opacity:.88;filter:blur(.8px)}
/* One distance per passage: Web Animations controls translation and constant scale. */
.sailboat{animation:none;transform-origin:50% 85%}
/* Strong direct backlight: sails are opaque silhouettes only at solar alignment. */
.sailboat>svg:not(.boat-shadow) .boat-main{fill:var(--sail-main,#e8e9e3)}
.sailboat>svg:not(.boat-shadow) .boat-jib{fill:var(--sail-jib,#dce0d9)}
/* Keep the contact patch visible; the outer patch is softer and lighter. */
.sea>.boat-shadow .shadow-contact{fill:#173d4d;opacity:1;filter:blur(1px)}
.sea>.boat-shadow .boat-shadow-silhouette{fill:#315969;opacity:.7;filter:blur(2.4px)}
/* Slightly deepen only the trailing sail shadow on the water; hull contact unchanged. */
.sea>.boat-shadow .boat-shadow-silhouette{fill:#173b4b;opacity:.85;filter:blur(2px)}
/* Narrow tapered hull footprint; deeper, less diffuse sail shadow immediately below. */
.sea>.boat-shadow .shadow-contact{fill:#173b4a;opacity:.94;filter:blur(.65px)}
.sea>.boat-shadow .boat-shadow-silhouette{fill:#0b2937;opacity:1;filter:blur(1px)}
/* Sunset-photo calibration: the sun's gold appears as sharp, broken wave highlights.
Keep diffuse sheen restrained; no continuous orange beam across the water. */
.sun-glitter-facet{
background:color-mix(in srgb,var(--glitter-gold,#ffd078) calc(65% + var(--golden-hour-strength,0)*30%),#fff8e8);
box-shadow:0 0 2px .35px color-mix(in srgb,var(--glitter-gold,#ffd078) 54%,transparent);
}
.reflection{
background:radial-gradient(ellipse 38% 78% at 50% 0%,
color-mix(in srgb,var(--glitter-gold,#ffd078) calc(12% + var(--golden-hour-strength,0)*14%),transparent),
transparent 86%);
filter:blur(4px);
}
/* Sunset glints: luminous cores against blue-grey water, without a solid beam. */
.sun-glitter{z-index:5;mix-blend-mode:screen}
.sun-glitter-facet{
background:color-mix(in srgb,var(--glitter-gold,#ffca58) 74%,#fff9dc);
box-shadow:0 0 4px 1px color-mix(in srgb,var(--glitter-gold,#ffc34f) 75%,transparent);
}
/* Golden-hour swash: broken wave crests and a fleeting sheen on wet sand. */
.sea::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:35px;z-index:4;pointer-events:none;
background:repeating-linear-gradient(178deg,transparent 0 8px,rgba(255,205,117,.45) 9px 10px,transparent 11px 19px);
mask-image:radial-gradient(ellipse 18% 90% at var(--shore-light-x,50%) 70%,black,transparent);
-webkit-mask-image:radial-gradient(ellipse 18% 90% at var(--shore-light-x,50%) 70%,black,transparent);
opacity:calc(var(--sun-opacity,0)*var(--shore-breath,.3)*.65);
}
.sand::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 14% 40% at var(--shore-light-x,50%) 0%,rgba(255,203,115,.55),transparent 90%);
opacity:calc(var(--sun-opacity,0)*var(--wet-sand-glow,.2)*.7);
transform:translateY(var(--wet-sand-shift,0px));
}
/* Continuous beach transition: no SVG contour strokes across the horizon. */
.shore-front path,.shore-back path{stroke:none;stroke-width:0}
.sea::after{
height:clamp(26px,5vh,72px);
background:
repeating-linear-gradient(178deg,transparent 0 9px,rgba(255,218,147,.58) 10px 11px,transparent 12px 21px);
mask-image:radial-gradient(ellipse 25% 95% at var(--shore-light-x,50%) 65%,black,transparent);
-webkit-mask-image:radial-gradient(ellipse 25% 95% at var(--shore-light-x,50%) 65%,black,transparent);
opacity:calc(var(--sun-opacity,0)*var(--shore-breath,.3)*.85);
}
.sand::after{
background:
radial-gradient(ellipse 20% 35% at var(--shore-light-x,50%) 0%,rgba(255,205,127,.62),transparent 92%),
repeating-linear-gradient(178deg,transparent 0 14px,rgba(255,223,166,.13) 15px 16px,transparent 17px 30px);
mask-image:linear-gradient(black,transparent 52%);
-webkit-mask-image:linear-gradient(black,transparent 52%);
opacity:calc(var(--sun-opacity,0)*var(--wet-sand-glow,.2)*.9);
}
/* Remove the broad parallel bands introduced by the shoreline gradient.
Individual solar facets and the existing moving swash remain active. */
.sea::after{content:none!important;display:none!important}
/* Immediate low-contrast menu on hover; restore on leaving. */
footer nav{transition:opacity .12s ease}
@media(hover:hover){footer nav:hover{opacity:.32}footer nav:focus-within{opacity:1}footer nav button:hover{opacity:1}}
/* Filled eye = text visible; outlined eye = text hidden. */
#hide-interface .eye-outline{fill:currentColor;stroke:currentColor;stroke-width:1.6}
#hide-interface .eye-pupil{fill:var(--sea-bottom,#244d60);stroke:none}
body.texts-hidden #hide-interface .eye-outline{fill:none}
body.texts-hidden #hide-interface .eye-pupil{fill:none;stroke:currentColor;stroke-width:1.6}
body.texts-hidden main :is(.eyebrow,h1,.intro,.thought){opacity:0!important;pointer-events:none}
body.texts-hidden header :is(.brand,.weekend){opacity:0!important;pointer-events:none}
body.texts-hidden footer .weekend{opacity:0!important}
/* Retractable control dock: only a slim hover sensor remains at the bottom. */
@media(hover:hover) and (pointer:fine){
body>footer nav{
position:fixed;left:50%;bottom:0;z-index:30;
width:max-content;max-width:calc(100vw - 24px);
flex-wrap:nowrap;overflow:visible;
padding:12px 16px max(16px,env(safe-area-inset-bottom));
border-radius:22px 22px 0 0;
background:rgba(22,44,57,.88);
box-shadow:0 -3px 22px rgba(0,0,0,.15);
opacity:1;
transform:translate(-50%,calc(100% - 7px));
transition:transform .3s ease,opacity .16s ease;
}
body>footer nav:hover,body>footer nav:focus-within{
transform:translate(-50%,0);
opacity:1;
}
body>footer nav::before{
content:"";position:absolute;left:0;right:0;top:-14px;height:21px;
}
body.is-idle>footer{opacity:1;pointer-events:auto}
body.is-idle>footer nav{pointer-events:auto}
}
/* The eye controls every textual overlay, including clock and Compass link. */
body.texts-hidden header :is(.back,.brand,#clock){opacity:0!important;visibility:hidden;pointer-events:none}
/* Freiraum: restore floating icon-only controls, without an opaque dock or footer stripe. */
body>footer{background:none!important;isolation:auto!important}
body>footer::before{content:none!important;display:none!important}
@media(hover:hover) and (pointer:fine){
body>footer nav{
background:transparent!important;box-shadow:none!important;
border-radius:0!important;padding:10px 12px max(14px,env(safe-area-inset-bottom))!important;
}
body>footer nav button{background-color:rgba(22,44,57,.56);backdrop-filter:blur(8px)}
body>footer nav button:hover{background-color:rgba(22,44,57,.8)}
}
/* Sunlight follows the water onto the wet shore as a soft, irregular luminous patch. */
.sand::after{
background:
radial-gradient(ellipse 10% 24% at var(--shore-light-x,50%) 0%,rgba(255,239,188,.78),transparent 92%),
radial-gradient(ellipse 21% 47% at var(--shore-light-x,50%) 4%,rgba(255,194,107,.35),transparent 95%)!important;
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 38%,transparent 88%)!important;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 38%,transparent 88%)!important;
opacity:calc(var(--sun-opacity,0)*var(--wet-sand-glow,.2)*1.7)!important;
mix-blend-mode:screen;
}
/* No static line or tinted footer should mask the lower beach. */
/* Restore solitary seabird; vector wings avoid raster sprite overflow in Safari. */
body>.solo-bird{display:block!important;width:clamp(30px,3.2vw,55px);opacity:.82;filter:drop-shadow(0 0 1px rgba(0,0,0,.12))}
body>.solo-bird svg{width:100%;height:auto;overflow:visible;fill:color-mix(in srgb,#263e4b 82%,var(--cloud-color,#d5dcd9))}
.solo-vector-wing{transform-box:fill-box;transform-origin:50% 80%;animation:solo-natural-flap 3.8s ease-in-out infinite}
.solo-vector-right{animation-delay:-.08s}
@keyframes solo-natural-flap{0%,36%,100%{transform:rotate(0deg)}47%{transform:rotate(-13deg)}60%{transform:rotate(9deg)}73%{transform:rotate(0deg)}}
/* Marram grass: narrow blades and fine seed heads bend from their rooted base.
Slow gusts overlay small, asynchronous movements. */
.dune-grass{transform-origin:50% 100%;filter:drop-shadow(0 1px 1px rgba(17,35,30,.14));animation-duration:calc(var(--grass-wind-duration,5.5s)*1.7)!important;animation-timing-function:cubic-bezier(.42,0,.58,1)!important}
.dune-grass-left{animation-delay:-2.8s}
.dune-grass-thicket{animation-delay:-5.1s;animation-duration:calc(var(--grass-wind-duration,5.5s)*2.1)!important}
.dune-grass-right{animation-delay:-1.1s}
.dune-grass g path{stroke-width:1.25;stroke-linecap:round}
.dune-grass g path:nth-child(3n){stroke-width:.85;opacity:.8}
@media(prefers-reduced-motion:reduce){.solo-vector-wing,.dune-grass{animation:none!important}}
/* Original multi-frame lone seabird restored: contain each sprite within its SVG clips. */
body>.solo-bird{display:block!important;width:clamp(24px,2.5vw,44px);opacity:.75;filter:none;contain:layout style}
body>.solo-bird>svg{display:block;width:100%;height:auto;overflow:hidden;isolation:isolate}
body>.solo-bird .solo-wing{animation:none!important}
body>.solo-bird .solo-frame-a,body>.solo-bird .solo-frame-b{image-rendering:auto}
@media(prefers-reduced-motion:reduce){body>.solo-bird{display:none!important}}
/* Coastal marram: seed heads shift between backlit gold, daylight straw and night silhouette. */
.dune-grass{
color:color-mix(in srgb,#b7a16e calc(var(--grass-daylight,0)*78%),#192d35);
}
.dune-grass .marram-seedheads{
fill:none;stroke-linecap:round;stroke-linejoin:round;
stroke:color-mix(in srgb,#c3a16d calc(var(--grass-daylight,0)*85%),#1c3037);
opacity:.88;
filter:drop-shadow(0 0 calc(var(--golden-hour-strength,0)*2px) rgba(255,201,107,.5));
}
.dune-grass .marram-stem{stroke-width:1.15;opacity:.82}
.dune-grass .marram-head{stroke-width:.95}
.dune-grass .marram-head path:not(:first-child){stroke-width:.7;opacity:.85}
.dune-grass{
filter:drop-shadow(0 1px 1px rgba(17,35,30,.14))
drop-shadow(0 0 calc(var(--golden-hour-strength,0)*5px) rgba(255,185,90,.26));
}
/* Stronger visible seed heads, with day/night and solar backlight. */
.dune-grass .marram-seedheads{stroke:color-mix(in srgb,#dfb86b calc(var(--grass-daylight,0)*85%),#263b39);opacity:1}
.dune-grass .marram-stem{stroke-width:1.65}
.dune-grass .marram-spikes{stroke-width:3.4}
.dune-grass .marram-awn{stroke-width:1.35}
.dune-grass{opacity:.92}
.dune-grass-thicket{opacity:.82}
.dune-grass-right{opacity:.72}
/* Natural marram: curved narrow leaves, upright compact spikes, low-light silhouettes. */
.dune-grass .marram-leaves{opacity:.83;stroke:color-mix(in srgb,#a4a06d calc(var(--grass-daylight,0)*80%),#14232b)}
.dune-grass .marram-stalks{opacity:.9;stroke:color-mix(in srgb,#aa9d69 calc(var(--grass-daylight,0)*82%),#15252c)}
.dune-grass .marram-panicles{opacity:.95;stroke:color-mix(in srgb,#d8bb7d calc(var(--grass-daylight,0)*88%),#18262b);filter:drop-shadow(0 0 calc(var(--golden-hour-strength,0)*2px) rgba(255,199,110,.6))}
.dune-grass-left{opacity:clamp(.5,calc(.58 + var(--grass-daylight,0)*.28),.9)}
.dune-grass-thicket{opacity:clamp(.46,calc(.5 + var(--grass-daylight,0)*.27),.82)}
.dune-grass-right{opacity:clamp(.44,calc(.48 + var(--grass-daylight,0)*.27),.8);right:-12px}
/* Plant roots must disappear into the sand, not hover above it.
Keep the wind pivot at the buried base. */
.dune-grass-right{bottom:-48px!important;right:-26px!important;transform-origin:50% 100%}
.dune-grass-right .marram-leaves,.dune-grass-right .marram-stalks{stroke-linecap:round}
/* Solar-adaptive typography: less stark at night, warm at twilight, shaded in daylight. */
body{
--overlay-ink:color-mix(in srgb,#263e4b calc(var(--overlay-daylight,0)*100%),#d4c8bd);
--overlay-muted:color-mix(in srgb,#42555d calc(var(--overlay-daylight,0)*100%),#b8aaa4);
--overlay-warm:color-mix(in srgb,var(--sky-peach,#d6b3a3) calc(var(--overlay-twilight,0)*30%),var(--overlay-ink));
}
header :is(.back,.brand,#clock),main h1,main .intro,main .eyebrow,footer .weekend{
color:var(--overlay-warm);
transition:opacity .75s ease,color 18s ease;
}
main h1{text-shadow:0 2px 18px rgba(8,24,34,.17),0 1px 2px rgba(8,24,34,.1)}
main .intro,main .eyebrow,footer .weekend{color:var(--overlay-muted)}
main .thought{transition:opacity .75s ease}
body.texts-hidden main :is(.eyebrow,h1,.intro,.thought),
body.texts-hidden header :is(.back,.brand,#clock),
body.texts-hidden footer .weekend{
opacity:0!important;pointer-events:none!important;
}
body.texts-hidden header :is(.back,.brand,#clock){visibility:visible!important}
@media(prefers-reduced-motion:reduce){
header :is(.back,.brand,#clock),main h1,main .intro,main .eyebrow,footer .weekend,main .thought{transition:none!important}
}
/* Nearly imperceptible breathing, driven by the same phase as the surf. */
body:not(.texts-hidden) main :is(.eyebrow,h1,.intro,.thought),
body:not(.texts-hidden) header :is(.back,.brand,#clock),
body:not(.texts-hidden) footer .weekend{
opacity:var(--text-surf-opacity,1);
}
body.texts-hidden main :is(.eyebrow,h1,.intro,.thought),
body.texts-hidden header :is(.back,.brand,#clock),
body.texts-hidden footer .weekend{opacity:0!important}
/* Clouds keep their drift; their SVG silhouettes subtly stretch and contract. */
.cloud svg{will-change:transform}
@media(prefers-reduced-motion:reduce){.cloud svg{transform:none!important}}
/* Far-off cargo vessel: only its steady white masthead light is resolvable.
A crossing takes far longer than the fishing cutter's. */
.distant-freighter-light{
position:absolute;left:0;top:calc(50% - 3px);width:3px;height:3px;
z-index:3;pointer-events:none;opacity:var(--freighter-visibility,0);
transform:translateX(var(--freighter-x,-20px));
transition:opacity 20s linear;
}
.distant-freighter-light i{
display:block;position:absolute;left:1px;top:0;width:1.5px;height:1.5px;
border-radius:50%;background:#fffdf2;
box-shadow:0 0 2.5px .6px rgba(255,251,225,.25);
}
@media(prefers-reduced-motion:reduce){.distant-freighter-light{transition:none}}
/* Reference-inspired silhouettes: existing solar/backlight variables stay in charge. */
.fishing-cutter .cutter-hull,.fishing-cutter .cutter-deck,
.fishing-cutter .cutter-cabin{fill:var(--cutter-color,#203847)}
.fishing-cutter .cutter-boom{fill:none;stroke:var(--cutter-color,#203847);stroke-width:1.6;stroke-linecap:round}
.fishing-cutter .cutter-rig{stroke-width:1.1;fill:none}
.fishing-cutter .cutter-window{fill:var(--sky-horizon,#d6bca0);opacity:.56}
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,#415c67 calc(100% - var(--sail-backlight-strength,0)*75%),#132b37);
}
.sailboat>svg:not(.boat-shadow) .boat-main,
.sailboat>svg:not(.boat-shadow) .boat-jib{
transition:fill 12s linear;
}
/* At night the sea starts in the sky's horizon color, fading into dark water
rather than drawing a crisp horizontal dividing line. Daytime remains unchanged. */
.sea{
background:linear-gradient(180deg,
color-mix(in srgb,var(--sky-horizon,#152238) calc(var(--night-opacity,0)*100%),var(--sea-top,#182c3a)) 0%,
var(--sea-top,#182c3a) 8%,
color-mix(in srgb,var(--sea-top,#182c3a) 75%,#172b3b) 38%,
var(--sea-bottom,#101d30) 100%);
}
/* Sail cloth must actually disappear at night, including Safari SVG paths.
Rigging, mast, hull and navigation lights remain. */
.sailboat>svg:not(.boat-shadow) :is(.boat-main,.boat-jib){
opacity:var(--sail-hoist,0);
transform:scaleY(var(--sail-hoist,0));
transform-box:fill-box;
transform-origin:50% 100%;
transition:opacity 35s ease-in-out,transform 35s ease-in-out,fill 12s linear;
}
/* Very slow, random alternation between mist-softened and distinct horizons.
A translucent rim changes only the first few pixels of water. */
.sea::before{
content:"";position:absolute;inset:0 0 auto;height:12px;pointer-events:none;
z-index:0;opacity:calc(var(--horizon-clarity,0) * var(--night-opacity,0));
background:linear-gradient(to bottom,rgba(174,193,211,.17) 0,rgba(151,177,200,.075) 1px,rgba(137,165,187,.02) 4px,transparent 100%);
transition:opacity 110s ease-in-out;
}
@media(prefers-reduced-motion:reduce){.sea::before{transition:none}}
/* The rocking animation otherwise overrides the returning SVG's mirror transform.
Keep the whole hull, bow and navigation lights correctly facing left. */
/* Directional mirroring now belongs solely to the inner .boat-model SVG group. */
/* Lunar ambient light: a very small cool lift, not a blue night filter.
Existing sea gradient, mist/clear horizon, solar backlight and nav lamps stay intact. */
.sky{
filter:brightness(calc(1 + var(--lunar-ambient,0) * .055));
}
.sea{
filter:brightness(calc(1 + var(--lunar-ambient,0) * .085));
}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,
color-mix(in srgb,#365969 calc(100% - var(--sail-backlight-strength,0)*78%),#102632)
calc(100% - var(--lunar-ambient,0)*19%),#8295a1);
}
.fishing-cutter .cutter-hull,.fishing-cutter .cutter-deck,
.fishing-cutter .cutter-cabin{
fill:color-mix(in srgb,var(--cutter-color,#203847)
calc(100% - var(--lunar-ambient,0)*16%),#778d9a);
}
/* Clouds cross in front of the lunar disc, not just the star field.
Keep both in the sky's existing coordinate system and preserve the
moon's astronomical position and the cloud drift/morph animations. */
.night-moon{z-index:2}
.clouds{z-index:3}
.clouds .cloud svg{position:relative;display:block;width:100%;height:100%}
/* Clouds are translucent across the lunar disc; their moving contours
gently reduce the moon's glow and reflected light. */
.night-moon{
filter:brightness(calc(1 - var(--moon-cloud-cover,0) * .78))
drop-shadow(0 0 3px rgba(244,237,207,.17));
}
.moon-waterlight{
opacity:calc(var(--moon-water-strength,0) * (1 - var(--moon-cloud-cover,0) * .65));
}
.clouds .cloud svg{
filter:drop-shadow(0 0 5px rgba(225,231,241,var(--moon-cloud-edge,0)));
}
/* Only clouds passing close to the lunar disc grow optically denser.
Their SVG edge stays softly feathered; no new cloud geometry is added. */
.clouds .cloud{
opacity:var(--cloud-opacity,.3);
}
.clouds .cloud svg path:first-of-type{
filter:drop-shadow(0 0 1.4px rgba(204,215,231,.12));
}
/* Idle must hide the floating controls on touch devices too.
Earlier mobile dock rules explicitly kept footer visible. */
body.is-idle>footer,
body.is-idle>footer nav{
opacity:0!important;
pointer-events:none!important;
}
body.is-idle>footer nav{
visibility:hidden;
transition:opacity .8s ease,visibility 0s linear .8s;
}
body:not(.is-idle)>footer nav{
visibility:visible;
transition:opacity .5s ease,visibility 0s;
}
/* Moonlit cloud optics based on photographs: only the nearby cloud
scatters lunar light; distant portions keep their normal night tone. */
.clouds .cloud svg .moon-cloud-scatter{
pointer-events:none;
transition:opacity 2.4s ease-in-out;
filter:blur(2px);
}
.clouds .cloud svg{
filter:none;
}
/* T stage 2: the IFIS thought is the sole text overlay. */
body.thought-only main .thought{
opacity:1!important;
pointer-events:auto!important;
visibility:visible!important;
}
body.thought-only main :is(.eyebrow,h1,.intro){opacity:0!important;pointer-events:none!important}
/* Paired IFIS reflection: revealed below the quote on the second T click. */
body.thought-only main .thought-addition{
margin:18px auto 4px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.18);
}
body.thought-only main .thought-addition[hidden]{display:none!important}
body.thought-only main .thought-addition-text{
font:400 clamp(1rem,2.3vw,1.25rem)/1.55 Georgia,serif;
color:#e9e5da;
opacity:.9;
margin:12px 0;
}
/* Three T stages: title alone, title with IFIS card, uninterrupted seascape. */
body.heading-stage main h1{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
body.heading-stage main :is(.eyebrow,.intro){opacity:0!important;pointer-events:none!important}
body.heading-stage:not(.thought-only) main .thought{opacity:0!important;pointer-events:none!important}
/* Full offscreen cloud travel: no wraparound pop on narrow viewports.
Each SVG's tapered leading tip enters before its main body. */
.clouds .cloud{
left:0;
animation-name:freiraum-cloud-entry;
animation-timing-function:linear;
animation-iteration-count:infinite;
will-change:transform;
}
@keyframes freiraum-cloud-entry{
from{transform:translateX(calc(-100% - 38px))}
to{transform:translateX(calc(100vw + 38px))}
}
/* Apparent depth: high thin clouds drift slowest, low nearby clouds fastest.
Long, unsynchronised loops keep the horizon calm. */
.clouds .cloud-one{animation-duration:330s;animation-delay:-91s;width:265px;opacity:calc(var(--cloud-opacity,.3)*.85)}
.clouds .cloud-two{animation-duration:240s;animation-delay:-157s;width:220px;opacity:calc(var(--cloud-opacity,.3)*1.04)}
.clouds .cloud-three{animation-duration:520s;animation-delay:-321s;width:350px;opacity:calc(var(--cloud-opacity,.3)*.72)}
@media(prefers-reduced-motion:reduce){
.clouds .cloud{animation:none;transform:translateX(24vw)}
}
/* The return link is part of the regular controls, not a separate floating portal.
Keep the horizontal room-slide action on the link itself. */
body>footer nav .freiraum-home{
position:relative;inset:auto;flex:none;display:grid;place-items:center;
width:48px;height:48px;min-height:48px;padding:12px;
border:1px solid #ffffff30;border-radius:50%;
background:rgba(22,44,57,.56);backdrop-filter:blur(8px);
color:#f5f0e6;text-decoration:none;opacity:1;
transition:background-color .2s ease,color .2s ease;
}
body>footer nav .freiraum-home:hover,
body>footer nav .freiraum-home:focus-visible{background:rgba(22,44,57,.8);color:#fff}
body>footer nav .freiraum-home svg{display:block;width:22px;height:22px}
@media(hover:hover){body>footer nav:hover .freiraum-home{opacity:1}}
/* Optional time-lapse intro: crossed-out horizon indicates that the replay is off. */
#intro-toggle .intro-toggle-slash{opacity:0;transition:opacity .18s ease}
#intro-toggle[aria-pressed="false"] .intro-toggle-slash{opacity:1}
@media(prefers-reduced-motion:reduce){#intro-toggle .intro-toggle-slash{transition:none}}
/* Skipping the start time-lapse must display today's real solar position
immediately, not interpolate backwards from a stale/default sun location. */
body.freiraum-instant-sky .sun,
body.freiraum-instant-sky .sky,
body.freiraum-instant-sky .night-moon,
body.freiraum-instant-sky .reflection,
body.freiraum-instant-sky .sailboat .boat-shadow-silhouette{
transition:none!important;
}
/* Daytime cargo traffic: a tiny flattened silhouette touching the true
horizon, based on the supplied distant-ship photograph. Keep night lights. */
.distant-freighter-light{
/* Align the tiny hull with the sea horizon, rather than floating above it. */
/* The visible hull is a hairline: most of it is below the sea horizon. */
/* One shared scale (0.17px per approximate metre), horizon at SVG y=54. */
top:calc(50% - 9.18px);
width:var(--freighter-size,40.8px);
height:11.9px;
transition:opacity 8s ease;
}
.distant-freighter-light .freighter-silhouette{
position:absolute;inset:0;
display:block;width:100%;height:100%;
color:color-mix(in srgb,var(--sea-bottom,#244d60) 78%,#18212a);
fill:currentColor;
opacity:var(--freighter-daylight,1);
/* SVG waterline y=54: show only a hairline of hull above it,
regardless of vessel length and superstructure. */
clip-path:inset(0 0 2.72px 0);
filter:blur(.16px);
}
.distant-freighter-light i{
left:76%;top:32%;
opacity:calc(1 - var(--freighter-daylight,1));
}
@media(prefers-reduced-motion:reduce){.distant-freighter-light .freighter-silhouette{filter:none}}
/* Reference photograph: mostly dark water between separate sunlit
wave crests; a restrained underglow, never a broad opaque strip. */
.reflection{
background:radial-gradient(ellipse 52% 87% at 50% 0%,
color-mix(in srgb,var(--sun-color,#ffe4ac) 21%,transparent),transparent 78%);
filter:blur(4px);
}
.sun-glitter-facet{
border-radius:45%;
background:color-mix(in srgb,#fffdf0 62%,var(--sun-color,#ffe4ac));
box-shadow:0 0 2px .65px color-mix(in srgb,var(--sun-color,#ffe4ac) 46%,transparent);
}
/* Whole viewport is the menu hover zone: do not retract the nav until idle. */
@media(hover:hover) and (pointer:fine){
body>footer nav,
body>footer nav:hover,
body>footer nav:focus-within{
transform:translateX(-50%)!important;
}
}
/* Horizon depth order: the buoy pair is in front of the cutter,
while distant freighters remain behind both. */
.sailboat{z-index:6}
.channel-buoy{z-index:5}
.fishing-cutter{z-index:4;bottom:calc(50% - 5px)}
.distant-freighter-light{z-index:3}
/* Horizon-correct cutter: its hull just meets the waterline, without
transparency making the lower hull absorb the colour of the sea. */
.fishing-cutter{
bottom:calc(50% - 3px);
opacity:1!important;
--cutter-color:color-mix(in srgb,
color-mix(in srgb,var(--sky-horizon,#c9d1cc) calc(55% + var(--cutter-haze,0)*32%),#1b343e)
calc(100% - var(--boat-night-light,0)*87%),#101923);
}
.fishing-cutter svg{opacity:1;mix-blend-mode:normal;filter:none}
.fishing-cutter .cutter-hull,
.fishing-cutter .cutter-deck,
.fishing-cutter .cutter-cabin{fill:var(--cutter-color)!important;opacity:1}
.fishing-cutter .cutter-rig,
.fishing-cutter .cutter-boom{stroke:var(--cutter-color)!important;opacity:1}
/* Cabin windows remain readable, but take their tone from the same daylight
and haze palette as the distant vessel; at night they stay subdued. */
.fishing-cutter .cutter-window{
fill:color-mix(in srgb,var(--sky-horizon,#c9d1cc) 82%,#e7e3d7)!important;
opacity:calc(.18 + .35 * var(--surf-daylight,0))!important;
}
.fishing-cutter::after{content:none!important}
/* The astronomy already interpolates the sail position for three minutes.
Never apply an additional 35-second visual lag after a scene jump. */
.sailboat>svg:not(.boat-shadow) .boat-sail{
transition:none!important;
}
.sailboat .boat-shadow-silhouette{transition:none!important}
/* Distance: sea covers the final 3px of the cutter, rather than painting
its underwater hull darker. The rig and deck stay above the horizon. */
.fishing-cutter>svg{
clip-path:inset(0 0 3px 0);
-webkit-clip-path:inset(0 0 3px 0);
}
.fishing-cutter{
--cutter-color:color-mix(in srgb,
color-mix(in srgb,var(--sky-horizon,#c9d1cc) var(--cutter-sky-mix,70%),#182c36)
calc(100% - var(--boat-night-light,0)*87%),#101923);
}
.fishing-cutter .cutter-window{
fill:color-mix(in srgb,var(--sky-horizon,#c9d1cc) 86%,#e8e3d5)!important;
opacity:calc(.16 + .38 * var(--surf-daylight,0))!important;
}
/* Detailed ~9m coastal sloop. These small details use the same
time-of-day palette as the existing hull, mast and two sails. */
.sailboat>svg:not(.boat-shadow) .boat-deck{
fill:color-mix(in srgb,var(--cloud-color,#e1e2da) 55%,#43545b);
stroke:color-mix(in srgb,var(--sea-bottom,#244d60) 76%,#263440);
stroke-width:.7;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,var(--cloud-color,#e1e2da) 75%,#435962);
stroke:color-mix(in srgb,var(--sea-bottom,#244d60) 64%,#27383f);
stroke-width:.55;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-roof{
fill:none;
stroke:color-mix(in srgb,var(--cloud-color,#e1e2da) 77%,#6e8792);
stroke-width:1.2;stroke-linecap:round;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-window{
fill:color-mix(in srgb,var(--sky-horizon,#c9d1cc) 42%,#36535e);
stroke:color-mix(in srgb,var(--sea-bottom,#244d60) 70%,#27353c);
stroke-width:.4;
}
.sailboat>svg:not(.boat-shadow) .boat-bootstripe{
fill:none;stroke:color-mix(in srgb,var(--cloud-color,#c7d7d4) 64%,#1a3546);
stroke-width:.6;
}
.sailboat>svg:not(.boat-shadow) .boat-rig{
fill:none;stroke:color-mix(in srgb,var(--sea-bottom,#244d60) 75%,#52616a);
stroke-width:.72;stroke-linecap:round;stroke-linejoin:round;
}
.sailboat>svg:not(.boat-shadow) .boat-stay{stroke-width:.56;opacity:.8}
.sailboat>svg:not(.boat-shadow) .boat-boom{stroke-width:1.25}
.sailboat>svg:not(.boat-shadow) .boat-rail{stroke-width:.52;opacity:.85}
.sailboat>svg:not(.boat-shadow) .boat-tiller{stroke-width:.85}
.sailboat>svg:not(.boat-shadow) .boat-mast{stroke-width:1.2}
.sailboat>svg:not(.boat-shadow) .boat-sail-detail{
stroke:color-mix(in srgb,var(--sail-main,#eef0ed) 80%,#65757c);
stroke-width:.48;stroke-linecap:round;
opacity:calc(.32 * var(--sail-hoist,0));
transform-box:fill-box;transform-origin:50% 100%;
transform:scaleY(var(--sail-hoist,0));
transition:none!important;
pointer-events:none;
}
/* The hull follows night darkness and subtle moonlight, not a fixed blue-gray.
The hull is in shade below the sail: show construction only as subtle
tone-on-tone silhouette lines, not bright cabin/stripe/deck details.
Keep the sails, their hoisting, shadows and navigation lights untouched. */
.sailboat>svg:not(.boat-shadow){
--hull-shade:color-mix(in srgb,
color-mix(in srgb,var(--sea-bottom,#244d60) 56%,#142a36)
calc(100% - var(--boat-night-light,0)*100%),
color-mix(in srgb,#152330 calc(100% - var(--vessel-lunar,var(--lunar-ambient,0))*35%),#556e7c));
--hull-line:color-mix(in srgb,var(--hull-shade) 88%,#a3b2b5);
}
.sailboat>svg:not(.boat-shadow) :is(.boat-hull,.boat-deck,.boat-cabin){
fill:var(--hull-shade)!important;
stroke:var(--hull-shade)!important;
}
.sailboat>svg:not(.boat-shadow) :is(.boat-cabin-roof,.boat-bootstripe,.boat-cabin-window){
fill:none!important;
stroke:var(--hull-line)!important;
stroke-width:.45!important;
opacity:calc(.43 + var(--lunar-ambient,0)*.22 + (1 - var(--boat-night-light,0))*.10);
}
.sailboat>svg:not(.boat-shadow) .boat-rig{
stroke:var(--hull-line)!important;
opacity:.65;
}
.sailboat>svg:not(.boat-shadow) .boat-mast{opacity:1}
/* Subtle dawn/dusk silhouette separation: a little reflected sky light on the
shaded hull, only while twilight is present. No permanent night glow.
Keep water shadows and genuine solar backlighting unchanged. */
.sailboat>svg:not(.boat-shadow) :is(.boat-hull,.boat-deck,.boat-cabin){
fill:color-mix(in srgb,
var(--hull-shade) calc(100% - var(--sail-twilight-lift,0%)),
#91a2a9)!important;
stroke:color-mix(in srgb,
var(--hull-shade) calc(100% - var(--sail-twilight-lift,0%)),
#91a2a9)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-rig{
opacity:calc(.65 + var(--vessel-ambient,0)*.13);
}
/* Evening Gegenlicht: dark, opaque cutter, while daytime haze still
mixes its colour with the current horizon. All solid parts share it. */
.fishing-cutter{
--cutter-shadow:.24;
--cutter-color:color-mix(in srgb,
color-mix(in srgb,var(--sky-horizon,#c9d1cc) var(--cutter-sky-mix,70%),#18303a)
calc((1 - var(--cutter-shadow)) * 100%),
#101923 calc(var(--cutter-shadow) * 100%));
}
.fishing-cutter .cutter-window{
fill:color-mix(in srgb,var(--sky-horizon,#c9d1cc) 72%,#d8d0bf)!important;
opacity:calc(.08 + .24 * var(--surf-daylight,0))!important;
}
/* Anchoring: navigation signals are exclusive; preserve daylight shading and rocking. */
.sailboat{--anchor-sail-factor:1;--anchor-swing:0deg}
.sailboat>svg:not(.boat-shadow) .boat-sail{
transform:scaleY(calc(var(--sail-hoist,0) * var(--anchor-sail-factor,1)));
}
.sailboat .boat-shadow-silhouette{
opacity:calc(var(--sail-hoist,0) * var(--anchor-sail-factor,1));
}
.sailboat>svg:not(.boat-shadow){transform:rotate(var(--anchor-swing,0deg))}
/* Directional mirroring now belongs solely to the inner .boat-model SVG group. */
.sailboat .anchor-signals{pointer-events:none}
.sailboat .anchor-chain{opacity:0;stroke:#27333a;stroke-width:.85;stroke-linecap:round;stroke-dasharray:1.4 .7;transition:opacity 3s}
.sailboat .anchor-ball{opacity:0;fill:#111c24;transition:opacity 3s}
.sailboat .anchor-lamp{opacity:0;fill:#fff7dc;filter:drop-shadow(0 0 3px #fff4d7);transition:opacity 2s}
.sailboat.is-anchoring .anchor-chain,
.sailboat.is-anchored .anchor-chain,
.sailboat.is-weighing .anchor-chain{opacity:1}
.sailboat.is-anchored .anchor-ball,
.sailboat.is-weighing .anchor-ball{opacity:calc(1 - var(--boat-night-light,0))}
.sailboat.is-anchored .anchor-lamp,
.sailboat.is-weighing .anchor-lamp{opacity:var(--boat-night-light,0)}
.sailboat:is(.is-anchoring,.is-anchored,.is-weighing) .nav-lights{opacity:0!important}
.sailboat:not(.is-anchored):not(.is-anchoring):not(.is-weighing) .nav-masthead,
.sailboat:not(.is-anchored):not(.is-anchoring):not(.is-weighing) .nav-bow{opacity:0}
/* At anchor there is no way on; the separate white lamp is all-round. */
/* KÜH-24: medium-distance harbor cutter, behind the channel marks and in
front of the old distant cutter. Preserve the original vessel unchanged. */
.harbor-cutter{
position:absolute;left:0;bottom:calc(50% - 5px);
width:clamp(46px,5.4vw,76px);aspect-ratio:1660/1002;
z-index:4;opacity:0;pointer-events:none;
translate:var(--view-shift,0px) 0;
--harbor-lightness:.64;--harbor-haze:.05;
--harbor-night-strength:0;--harbor-moonlight:0;
}
.harbor-cutter img{
display:block;width:100%;height:100%;object-fit:contain;
filter:brightness(var(--harbor-lightness)) saturate(calc(1 - var(--harbor-haze)*.65));
}
.harbor-cutter-lights{position:absolute;inset:0;opacity:var(--boat-night-light,0);pointer-events:none}
/* Local glow belongs to the navigation lights, not to the whole hull.
A little warm spill from the masthead light hints at nearby rigging. */
.harbor-cutter-lights::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 11% 13% at 55% 13%,
rgba(255,239,192,.22) 0%,rgba(255,239,192,.07) 46%,transparent 100%);
opacity:var(--harbor-night-strength,0);
}
.harbor-cutter.is-returning .harbor-cutter-lights::before{
background-position:center;
transform:scaleX(-1);
}
.harbor-light{position:absolute;width:2.4px;height:2.4px;border-radius:50%;box-shadow:0 0 3px 1px currentColor}
.harbor-light-white{left:55%;top:11%;background:#fff9dc;color:#fff9dc}
.harbor-light-side{left:88%;top:64%;background:#43e19d;color:#43e19d}
.harbor-cutter.is-returning img{transform:scaleX(-1)}
.harbor-cutter.is-returning .harbor-light-white{left:45%}
.harbor-cutter.is-returning .harbor-light-side{left:12%;background:#ff5449;color:#ff5449}
.harbor-light-stern{left:6%;top:78%;background:#fff9dc;color:#fff9dc;opacity:.65}
.harbor-cutter.is-returning .harbor-light-stern{left:90%}
@media(prefers-reduced-motion:reduce){.harbor-cutter-lights{opacity:0}}
/* KÜH-24: restrained surface-breaking bow wave; the outer white edge
stays at the hull's waterline, mirrors for departures, and dims at night. */
.harbor-bow-wave{
position:absolute;left:93%;top:88%;width:15%;height:11%;
z-index:2;pointer-events:none;
transform-origin:8% 75%;
opacity:calc((.12 + var(--surf-daylight,0)*.62) * var(--harbor-wake-strength,1));
transition:opacity 1.8s linear;
filter:blur(.22px);
}
.harbor-bow-wave::before,
.harbor-bow-wave::after{
content:'';position:absolute;display:block;left:0;
border:solid rgba(232,247,249,.80);border-width:1px 0 0 0;
transform-origin:left center;
}
.harbor-bow-wave::before{
top:24%;width:100%;height:45%;border-radius:60% 85% 0 0;
transform:rotate(-13deg) skewX(-17deg);
animation:harbor-bow-foam 3.8s ease-in-out infinite alternate;
}
.harbor-bow-wave::after{
top:47%;width:78%;height:30%;border-radius:70% 80% 0 0;
border-color:rgba(198,233,239,.52);
transform:rotate(16deg);
animation:harbor-bow-foam 4.7s ease-in-out -1.4s infinite alternate-reverse;
}
.harbor-cutter.is-returning .harbor-bow-wave{left:3%;transform:scaleX(-1)}
@keyframes harbor-bow-foam{
from{opacity:.52;scale:.88 1}
to{opacity:1;scale:1.08 1}
}
body.is-still .harbor-bow-wave::before,
body.is-still .harbor-bow-wave::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.harbor-bow-wave::before,.harbor-bow-wave::after{animation:none}
}
/* Spatial order for harbor traffic (foreground to background):
sailing yacht > left green channel buoy > KÜH-24 >
right red channel buoy > distant original fishing cutter.
The approach mark remains a separate distant navigation reference. */
.sailboat{z-index:9}
.channel-buoy-port{z-index:8}
.harbor-cutter{z-index:7}
.channel-buoy-starboard{z-index:6}
.fishing-cutter{z-index:4}
/* Hide only human-made details, not stars, birds, sea, weather or nature audio.
A visibility switch also overrides inline opacity from vessel animation frames. */
body.human-details-hidden :is(
.sailboat,.fishing-cutter,.harbor-cutter,.channel-buoy,
.distant-freighter-light,.harbor-entrance-light,.lighthouse-sky,
.distant-aircraft
){visibility:hidden!important;pointer-events:none!important}
body.human-details-hidden .sea>.boat-shadow{visibility:hidden!important}
body.human-details-hidden .harbor-bow-wave{visibility:hidden!important}
#human-details .human-details-slash{opacity:0;transition:opacity .2s ease}
#human-details[aria-pressed="false"] .human-details-slash{opacity:1}
/* Near-field channel geometry: approach mark is in front of harbor cutter,
green port-side screen marker appears slightly closer to the viewer. */
.channel-buoy-approach{z-index:8}
.channel-buoy-port{z-index:8;scale:1.24;transform-origin:50% 100%}
/* Only while KÜH-24 passes the red mark: conceal the submerged lower
portion that would otherwise show through beneath its hull. */
.channel-buoy-starboard.behind-harbor-hull{
clip-path:inset(0 0 58% 0);
-webkit-clip-path:inset(0 0 58% 0);
}
/* Fullscreen: the controls must disappear completely after inactivity, even
when the mouse stays over the dock or a button retains focus. */
html:fullscreen body.is-idle>footer,
html:fullscreen body.is-idle>footer nav,
html:fullscreen body.is-idle>footer nav:hover,
html:fullscreen body.is-idle>footer nav:focus-within{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
html:fullscreen body.is-idle>footer nav{transform:translateX(-50%)!important}
/* KÜH-24: subdued, animated wake attached to the stern, mirrored on return.
It remains quieter than the bow wave and follows the vessel's speed. */
.harbor-stern-wake{
position:absolute;left:-7%;top:88%;width:17%;height:12%;z-index:1;
pointer-events:none;
opacity:calc((.05 + var(--surf-daylight,0)*.30) * (.22 + var(--harbor-wake-strength,1)*.78));
transition:opacity 1.8s linear;filter:blur(.22px);
}
.harbor-stern-wake::before,.harbor-stern-wake::after{
content:'';position:absolute;display:block;right:0;
border-top:1px solid rgba(210,236,240,.34);
transform-origin:right center;
}
.harbor-stern-wake::before{
width:100%;top:33%;transform:rotate(17deg);
animation:harbor-stern-foam 4.8s ease-in-out infinite alternate;
}
.harbor-stern-wake::after{
width:80%;top:58%;transform:rotate(-12deg);
border-top-color:rgba(190,226,232,.23);
animation:harbor-stern-foam 5.6s ease-in-out -1.8s infinite alternate-reverse;
}
.harbor-cutter.is-returning .harbor-stern-wake{left:90%;transform:scaleX(-1)}
@keyframes harbor-stern-foam{
from{opacity:.38;scale:.88 1}
to{opacity:.82;scale:1.07 1}
}
body.is-still .harbor-stern-wake::before,
body.is-still .harbor-stern-wake::after{animation-play-state:paused}
body.human-details-hidden .harbor-stern-wake{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){
.harbor-stern-wake::before,.harbor-stern-wake::after{animation:none}
}
/* Robust idle state for older desktop Safari/iMac, regardless of
fullscreen matching, sticky :hover or retained keyboard focus. */
body.is-idle>footer,
body.is-idle>footer nav,
body.is-idle>footer nav:hover,
body.is-idle>footer nav:focus-within{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
body.is-idle>footer nav{transform:translateX(-50%)!important}
body:not(.is-idle)>footer{visibility:visible}
/* Hide stationary mouse pointer throughout Freiraum, including links and
the fullscreen dock. Movement restores it without opening the dock. */
body.cursor-idle,body.cursor-idle *{cursor:none!important}
/* A small coastal cruiser: slender mast and believable standing rigging.
Match the existing hoist/anchor animation; only the unlit metal is dark
at night. Keep the masthead / anchor lamps independent from this shading. */
.sailboat>svg:not(.boat-shadow) .boat-rig{
--mast-day:color-mix(in srgb,var(--sea-bottom,#244d60) 75%,#52616a);
--mast-night:color-mix(in srgb,#0a151e 89%,var(--sea-top,#244d60));
--mast-tone:color-mix(in srgb,var(--mast-day) calc(100% - var(--boat-night-light,0)*100%),var(--mast-night));
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-mast{
stroke:var(--mast-tone)!important;
stroke-width:.68!important;
stroke-linecap:round;
opacity:.9;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-mast-foot{
stroke:var(--mast-tone)!important;
stroke-width:.65;
opacity:.8;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-stay{
stroke:var(--mast-tone)!important;
stroke-width:.38;
opacity:.52;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-backstay{opacity:.4}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-shrouds{stroke-width:.31;opacity:.38}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-mast-top-light{
stroke:#d6c9ab!important;stroke-width:1.1;
opacity:calc(var(--boat-night-light,0) * .19);
filter:blur(.55px);
pointer-events:none;
}
/* Keep the KÜH-24 slightly immersed but preserve the *actual curved hull*.
The SVG already contains its dark, opaque hull; a deep bottom inset
removed the entire lower contour on smaller screens. The tiny cut here
only trims the SVG's transparent lower margin, not its painted hull. */
.harbor-cutter{
--harbor-submerge:12px;
bottom:calc(50% - var(--harbor-submerge));
}
.harbor-cutter>img{
clip-path:inset(0 0 2px 0);
-webkit-clip-path:inset(0 0 2px 0);
}
/* Buoy lights remain above water while bodies sit deeper.
The closer green marker is slightly larger and lower than the red. */
.channel-buoy-approach{top:calc(50% + 0px)}
.channel-buoy-port{left:58.5%;top:calc(50% + 5px)}
.channel-buoy-starboard{left:61.5%;top:calc(50% + 0px)}
/* Side-view gull visitors: clone the existing animated individual gull rather
than rendering symbolic V-shaped strokes. The layer has no hit targets. */
.side-gull-flocks{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;translate:var(--view-shift,0px) 0}
.side-gull-group{position:absolute;left:0;top:0;height:1px;pointer-events:none}
.side-gull-bird{position:absolute;top:0;left:0;aspect-ratio:2/1;pointer-events:none;will-change:translate;color:#293d43;filter:drop-shadow(0 0 .5px rgba(7,28,38,.12))}
.side-gull-bird svg{display:block;width:100%;height:100%;overflow:hidden}
.side-gull-bird .solo-wing{transform:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.side-gull-flocks{display:none!important}}
body.is-still .side-gull-flocks{visibility:hidden}
/* Feeding gulls occupy the same distant water plane as the incoming KÜH-24.
Their sprite is reused for approach, dive and takeoff; a tiny swimming
silhouette replaces spread wings while the bird rests on the sea. */
.harbor-follow-gulls{
position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden;
translate:var(--view-shift,0px) 0;
}
.harbor-follow-gull{
position:absolute;left:0;top:0;aspect-ratio:2/1;
pointer-events:none;will-change:transform;
}
.harbor-follow-gull>svg{
display:block;width:100%;height:100%;overflow:hidden;
filter:brightness(.74) saturate(.6);
}
.harbor-follow-gull .solo-wing{transform:none!important;animation:none!important}
.harbor-follow-gull.is-diving>svg{rotate:12deg;transform-origin:65% 52%}
.harbor-follow-gull.is-swimming>svg{opacity:0}
.harbor-floating-gull{
display:none;position:absolute;left:18%;top:48%;width:56%;height:19%;
background:#253a44;border-radius:65% 55% 58% 55%;
transform:rotate(-3deg);
}
.harbor-floating-gull::before{
content:'';position:absolute;left:65%;bottom:35%;width:18%;height:105%;
background:#283e47;border-radius:100% 100% 30% 20%;
transform:rotate(14deg);
}
.harbor-floating-gull::after{
content:'';position:absolute;left:-20%;top:70%;width:130%;height:35%;
border:solid rgba(213,229,228,.32);border-width:1px 0 0 0;
border-radius:50%;
animation:harbor-gull-ripple 2.8s ease-in-out infinite;
}
.harbor-follow-gull.is-swimming .harbor-floating-gull{display:block}
@keyframes harbor-gull-ripple{
0%,100%{opacity:.24;transform:scaleX(.8)}
50%{opacity:.65;transform:scaleX(1.2)}
}
body.human-details-hidden .harbor-follow-gulls{visibility:hidden!important}
body.is-still .harbor-follow-gulls{visibility:hidden}
@media(prefers-reduced-motion:reduce){.harbor-follow-gulls{display:none!important}}
/* The complete SVG gull silhouettes are never sprite-clipped, including in Safari. */
.side-gull-bird svg{overflow:visible}
.side-gull-bird .gull-near-wing,.side-gull-bird .gull-far-wing{transform-origin:37px 20px}
/* An occasional single shore gull at the wet sand / swash boundary.
Fully vector-drawn, with separately articulated head and walking legs. */
.shore-gull{
position:fixed;left:0;bottom:6.7vh;
width:clamp(68px,5.8vw,100px);aspect-ratio:120/76;
z-index:7;pointer-events:none;
opacity:0;visibility:hidden;
will-change:transform;
transition:opacity 1.8s ease,visibility 1.8s ease;
color:color-mix(in srgb,#e7e9e3 calc(65% + var(--surf-daylight,0)*35%),#60727a);
}
.shore-gull.is-visiting{
visibility:visible;
opacity:clamp(0,calc(var(--surf-daylight,0)*.91),.91);
}
.shore-gull svg{display:block;width:100%;height:100%;overflow:visible}
.shore-gull.is-facing-left svg{transform:scaleX(-1)}
.shore-gull-body,.shore-gull-neck,.shore-gull-face{fill:color-mix(in srgb,#f0eee7 calc(var(--surf-daylight,0)*90%),#283a44)}
.shore-gull-wing{fill:color-mix(in srgb,#9faab1 calc(var(--surf-daylight,0)*90%),#21323d)}
.shore-gull-wingtip,.shore-gull-tail{fill:color-mix(in srgb,#293941 75%,#536168)}
.shore-gull-feather{fill:none;stroke:rgba(72,91,100,.34);stroke-width:.9;stroke-linecap:round}
.shore-gull-leg{fill:none;stroke:color-mix(in srgb,#bd8c58 calc(var(--surf-daylight,0)*88%),#293844);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shore-gull-leg-back{opacity:.75;transform-origin:60px 49px}
.shore-gull-leg-front{transform-origin:67px 49px}
.shore-gull-beak{fill:color-mix(in srgb,#dba43c calc(var(--surf-daylight,0)*92%),#4b4d43)}
.shore-gull-eye{fill:#273035}
.shore-gull-head{transform-origin:81px 38px}
.shore-gull-shadow{fill:#132832;opacity:.24;filter:blur(2.2px)}
.shore-gull-reflection{fill:#d7dfe0;opacity:calc(var(--surf-daylight,0)*.12)}
@media(prefers-reduced-motion:reduce){.shore-gull{display:none}}
/* Photo-observed gull poses: one complete bird per SVG, no crossfaded crops.
Subtle plumage differences suggest mixed light and shadow in a real flock. */
.side-gull-bird .gull-body{
fill:color-mix(in srgb,#cdd0cc var(--gull-plumage,38%),#253640);
}
.side-gull-bird .gull-tail,.side-gull-bird .gull-near-wing{
fill:color-mix(in srgb,#8e9ba0 calc(var(--gull-plumage,38%) * .46),#20313b);
}
.side-gull-bird .gull-far-wing{
fill:color-mix(in srgb,#b6bec0 var(--gull-plumage,38%),#273b45);
}
/* Sunset reference: with sails furled, the yacht reads as one dark, opaque
silhouette against the bright horizon. Never dim navigation lamps. */
.sailboat>svg:not(.boat-shadow) .boat-furled-cloth{
opacity:clamp(0,calc(1 - var(--sail-hoist,0)),1);
transition:opacity 35s ease-in-out;
fill:color-mix(in srgb,var(--hull-shade,#182d38) calc(100% - var(--furled-backlight,0)*76%),#0c171c);
pointer-events:none;
}
.sailboat:is(.is-approaching,.is-anchoring,.is-anchored,.is-weighing)>svg:not(.boat-shadow) .boat-furled-cloth{opacity:1}
.sailboat>svg:not(.boat-shadow) .boat-furled-fold{
fill:none;stroke:color-mix(in srgb,#62727a calc(100% - var(--furled-backlight,0)*90%),#101c22);
stroke-width:.45;opacity:.45;
}
.sailboat>svg:not(.boat-shadow) :is(.boat-hull,.boat-deck,.boat-cabin){
fill:color-mix(in srgb,var(--hull-shade) calc(100% - var(--furled-backlight,0)*74%),#0b151c)!important;
stroke:color-mix(in srgb,var(--hull-shade) calc(100% - var(--furled-backlight,0)*74%),#0b151c)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-rig{
stroke:color-mix(in srgb,var(--hull-line) calc(100% - var(--furled-backlight,0)*75%),#111b20)!important;
}
@media(prefers-reduced-motion:reduce){
.sailboat>svg:not(.boat-shadow) .boat-furled-cloth{transition:none}
}
/* Counterlight for all three navigation marks, including the red/white
approach mark. Darken and desaturate only solid paint: independently
flashing lamps and their glow must never inherit this filter. */
.channel-buoy{--buoy-backlight:0}
.channel-buoy .channel-buoy-body,
.channel-buoy .channel-buoy-top{
filter:brightness(clamp(.17,
calc(.22 + var(--surf-daylight,0)*.78 - var(--buoy-backlight,0)*.64),
1))
saturate(clamp(.12,calc(1 - var(--buoy-backlight,0)*.92),1));
}
.channel-buoy .channel-buoy-light{
filter:none;
}
/* Reference cruiser: the bow tapers up to its finer stem while the
stern transom stays fuller. Retain the established daylight/night
hull colour logic and give the bootstripe a quiet, continuous line. */
.sailboat>svg:not(.boat-shadow) .boat-hull{
stroke-linejoin:round;
stroke-linecap:round;
}
.sailboat>svg:not(.boat-shadow) .boat-bootstripe{
stroke-width:.42!important;
opacity:calc(.14 + var(--surf-daylight,0)*.22);
}
.sailboat>svg:not(.boat-shadow) .boat-furled-main{
stroke:color-mix(in srgb,var(--hull-shade,#182d38) 82%,#aab4b1);
stroke-width:.38;
}
/* The approved yacht silhouette: fine bow, outward-rounded stern and a
small, naturally lit triangular gap at the bow/waterline. This colour
follows the sea, and fades at night rather than glowing independently. */
.sailboat>svg:not(.boat-shadow) .boat-bow-light-wedge{
fill:color-mix(in srgb,var(--sea-top,#608da1) 64%,var(--sky-horizon,#d9ded1));
opacity:calc(var(--surf-daylight,0)*.62);
stroke:none;
}
/* The mainsail remains on the boom when furled. Reinforce the actual spar
only in that state, instead of changing the hoist/bearing animation. */
.sailboat>svg:not(.boat-shadow) .boat-boom-furled{
fill:none;
stroke:color-mix(in srgb,var(--hull-line,#75878e) 84%,#233a43);
stroke-width:2.55;
stroke-linecap:round;
opacity:clamp(0,calc(1 - var(--sail-hoist,0)),1);
transition:opacity 35s ease-in-out;
}
.sailboat:is(.is-approaching,.is-anchoring,.is-anchored,.is-weighing)>svg:not(.boat-shadow) .boat-boom-furled{
opacity:1;
}
@media(prefers-reduced-motion:reduce){
.sailboat>svg:not(.boat-shadow) .boat-boom-furled{transition:none}
}
/* Unified cruiser — one hull, mast and standing rig at every sun angle.
The original daylight/night colour controls still govern the same hull;
only the two sail surfaces and the furled sailpack respond to hoisting. */
.sailboat>svg:not(.boat-shadow){overflow:visible}
.sailboat>svg:not(.boat-shadow) .boat-rig{
opacity:.82!important;
stroke:var(--hull-line,#839499)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-mast{
stroke:color-mix(in srgb,var(--hull-line,#839499) 74%,#294653)!important;
stroke-width:1.16!important;
opacity:1!important;
}
.sailboat>svg:not(.boat-shadow) .boat-rig :is(.boat-forestay,.boat-backstay){
stroke-width:.37;
opacity:.68;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-shrouds{
stroke-width:.30;
opacity:.35;
}
.sailboat>svg:not(.boat-shadow) .boat-deck{
fill:color-mix(in srgb,var(--hull-shade,#234656) 91%,var(--cloud-color,#c5d4d5))!important;
stroke:none!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,var(--hull-shade,#234656) 81%,var(--cloud-color,#c5d4d5))!important;
stroke:none!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-roof{
fill:none!important;
stroke:color-mix(in srgb,var(--hull-line,#839499) 68%,var(--cloud-color,#c5d4d5))!important;
stroke-width:.68!important;
opacity:.65;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-window{
fill:color-mix(in srgb,var(--hull-shade,#234656) 68%,#1e303a)!important;
stroke:none!important;
opacity:.75;
}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,var(--hull-shade,#234656) calc(100% - var(--hull-solar-backlight,0)*70%),#0c171f)!important;
stroke:none!important;
opacity:1!important;
}
.sailboat>svg:not(.boat-shadow) .boat-bootstripe{
fill:none!important;
stroke:color-mix(in srgb,var(--hull-line,#839499) 69%,var(--cloud-color,#c5d4d5))!important;
stroke-width:.38!important;
opacity:calc(.1 + var(--surf-daylight,0)*.29);
}
.sailboat>svg:not(.boat-shadow) .boat-furled-cloth{
opacity:clamp(0,calc(1 - var(--sail-hoist,0) * var(--anchor-sail-factor,1)),1);
transition:opacity 35s ease-in-out;
}
.sailboat>svg:not(.boat-shadow) .boat-boom-furled{
opacity:clamp(0,calc(1 - var(--sail-hoist,0) * var(--anchor-sail-factor,1)),1);
stroke-width:2.55;
}
.sailboat.is-furled>svg:not(.boat-shadow) :is(.boat-sail,.boat-sail-detail){opacity:0!important}
.sea>.boat-shadow .boat-vertical-reflection{display:none}
.sea>.boat-shadow.is-furled .boat-shadow-silhouette{display:none}
.sea>.boat-shadow.is-furled .shadow-contact{filter:blur(1.1px);opacity:.76}
.sea>.boat-shadow.is-furled .boat-vertical-reflection{
display:block;
fill:color-mix(in srgb,var(--sea-bottom,#244d60) 66%,#102733);
opacity:calc(.085 + var(--surf-daylight,0)*.22 + var(--lunar-ambient,0)*.04);
filter:blur(1.35px);
}
@media(prefers-reduced-motion:reduce){
.sailboat>svg:not(.boat-shadow) .boat-furled-cloth{transition:none}
}
/* Unified directional yacht: its internal SVG group changes orientation,
so the parent may gently swing at anchor without a second mirror. */
.sailboat.is-returning>svg:not(.boat-shadow){
transform:rotate(var(--anchor-swing,0deg));
}
.sailboat>svg:not(.boat-shadow)>.boat-model{
pointer-events:none;
}
/* Ensure native SVG transform attribute (set for each journey) stays the
sole mirror source; prevent browser-specific CSS transform inheritance. */
.sailboat .boat-model{transform-box:view-box}
/* The contact shadow is drawn with a real sharp bow point in JS. Excessive
blur erased that taper, especially when the yacht was small on screen. */
.sea>.boat-shadow .shadow-contact,
.sea>.boat-shadow.is-furled .shadow-contact{
filter:blur(.45px);
}
.sea>.boat-shadow .boat-shadow-silhouette{
filter:blur(1.25px);
opacity:.53;
}
/* Hull-water contact uses the true pointed bow and rounded stern. Keep the
contour distinct at small sizes; don't let the old diffuse ripple patches
mask the sharp tip. Reflection facets remain soft, secondary texture. */
.sea>.boat-shadow .shadow-contact,
.sea>.boat-shadow.is-furled .shadow-contact{
fill:#163a49;
opacity:.92;
filter:blur(.30px);
}
.sea>.boat-shadow .boat-shadow-silhouette{
fill:#315463;
opacity:.23;
filter:blur(1.6px);
}
/* Water-contact shadows are drawn in the sea's own coordinates, not in the
boat's scrolling/mirrored DOM layer. The pointed bow remains a hard tip;
ripples are subordinate, diffuse glints rather than separate dark ovals. */
.sea>.boat-shadow .shadow-contact,
.sea>.boat-shadow.is-furled .shadow-contact{
filter:blur(.15px);
opacity:.92;
}
.sea>.boat-shadow .boat-shadow-silhouette{
opacity:.12;
filter:blur(1.35px);
}
/* KÜH-24: true bow/stern water footprint follows its direction, sun angle,
cloudiness and moonlight. The hull/rig light calculations stay independent. */
.sea>.harbor-water-shadow{
position:absolute;inset:0;display:block;width:100%;height:100%;
overflow:hidden;pointer-events:none;z-index:2;opacity:0;
mix-blend-mode:multiply;
}
.sea>.harbor-water-shadow .harbor-shadow-contact{
fill:#163845;stroke:none;filter:blur(.28px);
}
.sea>.harbor-water-shadow .harbor-shadow-reflections{
fill:#315a69;stroke:none;opacity:.35;filter:blur(1.15px);
}
body.human-details-hidden .sea>.harbor-water-shadow{visibility:hidden!important}
/* The gulls belong behind the large cutter (also on inbound passages).
Keep the fore-/background vessel hierarchy from the existing scene. */
.gulls,.side-gull-flocks,.harbor-follow-gulls{z-index:3!important}
.harbor-cutter{z-index:7}
/* Foreground marram grass must occlude the visiting gull, including its feet
and contact shadow. The gull remains above sand and foam at the waterline. */
.shore-gull{z-index:3;--shore-backlight:0;--shore-sit:0}
.dune-grass{z-index:4}
.shore-gull :is(.shore-gull-body,.shore-gull-wing,.shore-gull-wingtip,
.shore-gull-tail,.shore-gull-neck,.shore-gull-face,.shore-gull-beak,
.shore-gull-sleep-head,.shore-gull-sleep-beak){
filter:brightness(clamp(.28,calc(1 - var(--shore-backlight,0)*.64),1))
saturate(clamp(.20,calc(1 - var(--shore-backlight,0)*.72),1));
}
.shore-gull .shore-gull-shadow{
opacity:calc(.18 + var(--shore-backlight,0)*.28);
transform:translateX(var(--shore-shadow-direction,0px));
transform-origin:50% 50%;
}
.shore-gull :is(.shore-gull-body,.shore-gull-wing,.shore-gull-wingtip,
.shore-gull-tail,.shore-gull-feather){
transform:translateY(calc(var(--shore-sit,0)*11px));
}
.shore-gull .shore-gull-leg{opacity:calc(1 - var(--shore-sit,0))}
.shore-gull .shore-gull-sleep-head{
display:none;fill:color-mix(in srgb,#eef0e9 calc(var(--surf-daylight,0)*90%),#283a44);
}
.shore-gull .shore-gull-sleep-beak{display:none;fill:#c49b53}
.shore-gull.is-sleeping .shore-gull-head{display:none}
.shore-gull.is-sleeping :is(.shore-gull-sleep-head,.shore-gull-sleep-beak){display:block}
.shore-gull.is-sleeping .shore-gull-eye{display:none}
/* Seated neck and tucked sleeping head descend together with the body;
avoid a floating head when the legs fold beneath the gull. */
.shore-gull .shore-gull-sleep-head,
.shore-gull .shore-gull-sleep-beak{
transform:translateY(calc(var(--shore-sit,0)*11px));
}
/* Resting gull rests on the sand, not on an offset flying shadow. */
.shore-gull.is-sleeping .shore-gull-shadow{
transform:translateX(0) scaleX(.77);
opacity:.32;
filter:blur(1.35px);
}
.shore-gull.is-sleeping .shore-gull-reflection{opacity:0}
/* Rig shadow is a sun-projected silhouette, separate from the shallow hull
water reflection. Its edges are broken by water blur, not made invisible. */
.sea>.boat-shadow .boat-shadow-silhouette{
fill:#163e50;
opacity:.48;
filter:blur(1.45px);
}
.sea>.boat-shadow .boat-mast-water-shadow{
fill:none;
stroke:#143847;
stroke-width:.72;
stroke-linecap:round;
opacity:.72;
filter:blur(.28px);
}
.sea>.boat-shadow.is-furled .boat-mast-water-shadow{opacity:.65}
/* Attached keel contact, independent from the shallow mirrored hull and
broken rig shadow. Preserve a narrow pointed bow and soft water edge. */
.sea>.boat-shadow .boat-hull-contact-band{
fill:#163b49;
opacity:.80;
filter:blur(.65px);
}
.sea>.boat-shadow .boat-shadow-silhouette{
fill:#1a4050;
opacity:var(--rig-shadow-opacity,.42);
filter:blur(.85px);
}
.sea>.boat-shadow .boat-mast-water-shadow{
opacity:var(--mast-shadow-opacity,.65);
filter:blur(.28px);
}
/* The yacht's sharp attached keel band defines the water contact; the
broader vertically reflected hull is subdued to avoid a second flat bar. */
.sea>.boat-shadow .shadow-contact,
.sea>.boat-shadow.is-furled .shadow-contact{
opacity:.36;
filter:blur(.9px);
}
.sea>.boat-shadow .boat-hull-contact-band{
opacity:.91;
filter:blur(.38px);
}
/* KÜH-24 daylight contact: a readable but restrained hull shade. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
fill:#173b4b;
filter:blur(.55px);
}
.sea>.harbor-water-shadow .harbor-shadow-reflections{
fill:#244958;
opacity:.50;
filter:blur(.9px);
}
/* The KÜH-24 shadow includes the actual wheelhouse and fishing rig.
The hull footprint remains a quiet base; solid buildings and thin
rigging cast separate, water-broken silhouettes with one solar vector. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
opacity:.73;
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
fill:#183c4a;
stroke:none;
opacity:.83;
filter:blur(.65px);
}
.sea>.harbor-water-shadow .harbor-shadow-rigging{
fill:none;
stroke:#163b49;
stroke-width:1.2;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.85;
filter:blur(.4px);
}
/* Keep KÜH-24's hull contact readable, but avoid additive dark
polygons from the wheelhouse, rigging and water bands. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
fill:#173b4b;
opacity:.62;
filter:blur(.5px);
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
fill:#183c4a;
stroke:none;
opacity:.42;
filter:blur(.45px);
}
.sea>.harbor-water-shadow .harbor-shadow-rigging{
fill:none;
stroke:#163b49;
stroke-width:.85;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.45;
filter:blur(.22px);
}
.sea>.harbor-water-shadow .harbor-shadow-reflections{
fill:#244958;
opacity:.36;
filter:blur(.75px);
}
/* KÜH-24 water shadow: prioritize contact under the hull over the long
projected comb of rigging. Slight blur is deliberate at this distance. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
opacity:.67;
filter:blur(.65px);
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
opacity:.27;
filter:blur(1.4px);
}
.sea>.harbor-water-shadow .harbor-shadow-rigging{
stroke-width:.56;
opacity:.14;
filter:blur(1.1px);
}
.sea>.harbor-water-shadow .harbor-shadow-reflections{
opacity:.20;
filter:blur(1.25px);
}
.sea>.harbor-water-shadow .harbor-shadow-tail{
filter:blur(1.1px);
}
/* Near-hull contact stays joined to the cutter; a compact soft tone
transitions into the weaker broken reflection farther out. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
opacity:.79;
filter:blur(.45px);
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
opacity:.24;
filter:blur(1.65px);
}
/* Restore the cutter's near-water contact without the earlier striped rigging. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
opacity:.87;
filter:blur(.38px);
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
opacity:.31;
filter:blur(1.4px);
}
.sea>.harbor-water-shadow .harbor-shadow-tail{
filter:blur(.95px);
}
/* Final near-hull adjustment: stronger contact and first fading water band;
keep the long projection and thin rigging restrained. */
.sea>.harbor-water-shadow .harbor-shadow-contact{
opacity:.94;
filter:blur(.30px);
}
.sea>.harbor-water-shadow .harbor-shadow-structures{
opacity:.33;
filter:blur(1.35px);
}
.sea>.harbor-water-shadow .harbor-shadow-tail{
filter:blur(.85px);
}
/* Photo-referenced approach mark: tall red top ball, lantern body, railing,
white/red float. The 4m+ mark is visually inshore/foreground of KÜH 24.
Its lower float sits into the water, unlike the tiny lateral pair. */
.channel-buoy.channel-buoy-approach{
left:19%;
top:calc(50% - 30px);
width:22px;
height:41px;
opacity:.94;
z-index:8;
scale:1;
transform-origin:center 75%;
}
.channel-buoy-approach .approach-buoy-figure{
display:block;
width:100%;
height:100%;
overflow:visible;
filter:brightness(calc(1 - var(--buoy-backlight,0)*.52));
}
.channel-buoy-approach .channel-buoy-light{
position:absolute;
left:49%;
top:7px;
width:2px;
height:2px;
transform:translateX(-50%);
box-shadow:0 0 3px 1px rgba(255,249,218,.72);
}
/* Keep this visually separate from the cutter's sailing waterline. */
@media(max-width:600px){
.channel-buoy.channel-buoy-approach{
left:16%;
top:calc(50% - 25px);
width:18px;
height:35px;
}
}
/* Buoy proportions calibrated against the ~9m yacht (~12-13m mast height):
approach mark 4m, lateral marks 3m. Both are smaller in perspective
than the yacht and are anchored at their own waterline. */
.channel-buoy.channel-buoy-approach{
left:19%;
top:calc(50% - 20px);
width:15px;
height:27px;
scale:1;
transform-origin:50% 74%;
}
.channel-buoy.channel-buoy-port,
.channel-buoy.channel-buoy-starboard{
width:11px;
height:18px;
scale:1;
transform-origin:50% 76%;
opacity:.90;
}
.channel-buoy.channel-buoy-port{
left:58.5%;
top:calc(50% - 14px);
--lateral-paint:#27a981;
--lateral-dark:#12684f;
--lateral-highlight:#65d6b0;
}
.channel-buoy.channel-buoy-starboard{
left:61.5%;
top:calc(50% - 14px);
--lateral-paint:#c84540;
--lateral-dark:#8f2d2d;
--lateral-highlight:#e98172;
}
.channel-lateral-figure{
display:block;
width:100%;
height:100%;
overflow:visible;
filter:brightness(calc(1 - var(--buoy-backlight,0)*.56));
}
.channel-lateral-figure .lateral-float{
fill:var(--lateral-paint);
stroke:var(--lateral-dark);
stroke-width:3;
}
.channel-lateral-figure .lateral-float-rim{
fill:var(--lateral-paint);
stroke:var(--lateral-dark);
stroke-width:2;
}
.channel-lateral-figure .lateral-cone{
fill:var(--lateral-paint);
stroke:var(--lateral-dark);
stroke-width:2;
}
.channel-lateral-figure .lateral-highlight{fill:var(--lateral-highlight);opacity:.42}
.channel-lateral-figure .lateral-solar-panel{fill:#b4cac8;stroke:#567981;stroke-width:2}
.channel-lateral-figure .lateral-solar-grid{fill:none;stroke:#6b8587;stroke-width:1.7}
.channel-lateral-figure .lateral-support,
.channel-lateral-figure .lateral-cage{
fill:none;
stroke:#dce4df;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
}
.channel-lateral-figure .lateral-lantern{fill:#f2efdf;stroke:#96b2af;stroke-width:1.5}
.channel-buoy-port .channel-buoy-light,
.channel-buoy-starboard .channel-buoy-light{
left:50%;
top:1px;
width:2px;
height:2px;
transform:translateX(-50%);
}
@media(max-width:600px){
.channel-buoy.channel-buoy-approach{
left:16%;top:calc(50% - 16px);width:12px;height:22px;
}
.channel-buoy.channel-buoy-port,
.channel-buoy.channel-buoy-starboard{
top:calc(50% - 11px);width:9px;height:15px;
}
}
/* Gentle water motion: all marks share the yacht's 11s swell rhythm,
with different phases so they never rock in perfect synchrony.
Animate the parent so the lamp stays firmly attached to its buoy. */
.channel-buoy{
transform-origin:50% 76%;
animation:freiraum-buoy-swell 11s ease-in-out infinite alternate;
}
.channel-buoy-approach{animation-delay:-2.8s}
.channel-buoy-port{animation-delay:-5.1s}
.channel-buoy-starboard{animation-delay:-8.4s}
@keyframes freiraum-buoy-swell{
0%{transform:translateY(.45px) rotate(-.9deg)}
45%{transform:translateY(-.45px) rotate(.65deg)}
100%{transform:translateY(.3px) rotate(-.55deg)}
}
body.is-still .channel-buoy{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.channel-buoy{animation:none}
}
/* The green buoy lies in the foreground lane, in front of KÜH-24.
A few pixels of water depth and a modest size increase make that
relationship legible without changing its nominal 3m real height. */
.channel-buoy.channel-buoy-port{
top:calc(50% - 10px);
width:12px;
height:20px;
z-index:8;
}
@media(max-width:600px){
.channel-buoy.channel-buoy-port{
top:calc(50% - 8px);
width:10px;
height:17px;
}
}
/* Sun-facing painted gradient is computed from the celestial position.
Keep navigation lamps independent and preserve their flash patterns. */
.channel-buoy .approach-buoy-figure,
.channel-buoy .channel-lateral-figure{
transition:filter 2s linear;
}
/* Approach buoy marks the nearer water lane, not the cutter's track.
Shift its water contact below the KÜH-24 hull so crossings are visually
separated even when their horizontal positions coincide. */
.channel-buoy.channel-buoy-approach{
top:calc(50% - 6px);
z-index:10;
}
@media(max-width:600px){
.channel-buoy.channel-buoy-approach{
top:calc(50% - 4px);
}
}
/* Sun-projected water shadows of the 4m approach and 3m channel marks.
The complete path is driven by solar altitude and the buoy's own
wave-bobbed screen position; never parent a shadow to a passing ship. */
.sea>.buoy-water-shadows{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:2;
overflow:hidden;
pointer-events:none;
mix-blend-mode:multiply;
}
.sea>.buoy-water-shadows .buoy-water-shadow{
/* SVG defines a per-buoy gradient fading away from the contact point. */
stroke:none;
filter:blur(1.45px);
}
body.human-details-hidden .sea>.buoy-water-shadows{
visibility:hidden!important;
}
/* Red buoy goes *behind* the cutter via actual paint order. Clipping
away half its body based on bounding-box intersections made it vanish
before the hull arrived and reappear only after it had passed. */
.channel-buoy-starboard.behind-harbor-hull{
clip-path:none;
-webkit-clip-path:none;
}
.channel-buoy{--buoy-body-brightness:1;--buoy-body-saturation:1}
.channel-buoy .approach-buoy-figure,
.channel-buoy .channel-lateral-figure{
filter:brightness(calc(1 - var(--buoy-backlight,0)*.52))
brightness(var(--buoy-body-brightness))
saturate(var(--buoy-body-saturation));
transition:filter 2s linear;
}
/* Navigation lamps are independent of the shaded buoy artwork and
become visible during civil twilight, before full darkness. */
.channel-buoy{--buoy-lamp-strength:0}
.channel-buoy .channel-buoy-light{
z-index:3;
filter:none;
width:3px;
height:3px;
background:var(--buoy-light);
box-shadow:0 0 3px 1px var(--buoy-light),0 0 8px 2px color-mix(in srgb,var(--buoy-light) 55%,transparent);
}
/* Twilight cutter: the masthead lamp illuminates only a limited area of
the actual cutter silhouette. Duplicate SVG is softly masked around
the lamp, so the cabin and blue hull do not become bright at night. */
.harbor-cutter{--harbor-lamp-strength:0}
.harbor-cutter::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:url('/images/kueh24-contour.svg?v=open-stern-deck-passage-20261103') center / 100% 100% no-repeat;
filter:brightness(.85) saturate(.65);
opacity:calc(var(--harbor-lamp-strength,0)*.46);
-webkit-mask-image:radial-gradient(ellipse 19% 25% at 55% 12%,#000 4%,transparent 100%);
mask-image:radial-gradient(ellipse 19% 25% at 55% 12%,#000 4%,transparent 100%);
}
.harbor-cutter.is-returning::after{
transform:scaleX(-1);
}
.harbor-cutter-lights{
opacity:var(--harbor-lamp-strength,0);
}
.harbor-cutter-lights::before{
opacity:var(--harbor-lamp-strength,0);
}
/* Distant lateral marks: pass behind KÜH-24 instead of crossing its deck.
Their smaller bodies and water contacts are tied to the horizon; the
dynamic shadow calculation reads the resulting actual screen bounds. */
.channel-buoy.channel-buoy-port{
left:49%;
top:calc(50% - 9px);
width:8px;
height:13px;
scale:1;
z-index:5;
opacity:.95;
}
.channel-buoy.channel-buoy-starboard{
left:61.5%;
top:calc(50% - 9px);
width:8px;
height:12px;
scale:1;
z-index:5;
opacity:.95;
}
/* Navigation flashes must stand out independently of dark body paint.
A slightly larger green LED and a broader halo remain readable at
the small, distant scale without illuminating the float itself. */
.channel-buoy.channel-buoy-port .channel-buoy-light{
left:50%;
top:0;
width:3px;
height:3px;
z-index:12;
transform:translateX(-50%);
background:#6bffae;
box-shadow:0 0 4px 1.5px #5aff9b,0 0 10px 3px rgba(67,255,150,.65);
animation:channel-buoy-flash 4s linear 0s infinite;
}
@media(max-width:600px){
.channel-buoy.channel-buoy-port{
left:49%;
top:calc(50% - 8px);
width:7px;
height:11px;
}
.channel-buoy.channel-buoy-starboard{
top:calc(50% - 8px);
width:7px;
height:10px;
}
}
@media(prefers-reduced-motion:reduce){
.channel-buoy.channel-buoy-port .channel-buoy-light{
animation:none;
opacity:calc(var(--buoy-lamp-strength,0)*.95);
}
}
/* Navigation-lane depth revision: the 4m approach mark is farther offshore
and behind KÜH-24; the green 3m lateral mark comes closer to the red
partner and toward the viewer. Shadows use the live DOM bounds. */
.channel-buoy.channel-buoy-approach{
left:12%;
top:calc(50% - 12px);
width:9px;
height:17px;
z-index:5;
}
.channel-buoy.channel-buoy-port{
left:57.5%;
top:calc(50% - 7px);
width:11px;
height:17px;
z-index:8;
}
@media(max-width:600px){
.channel-buoy.channel-buoy-approach{
left:10%;
top:calc(50% - 10px);
width:8px;
height:15px;
}
.channel-buoy.channel-buoy-port{
left:57.5%;
top:calc(50% - 6px);
width:10px;
height:15px;
}
}
/* Approach mark: its small lantern sits inside the red housing, not on
the top ball. At long viewing distance it needs a distinct white flash
and halo; body darkness must never affect this separate lamp. */
.channel-buoy.channel-buoy-approach .channel-buoy-light{
left:50%;
top:31%;
width:3px;
height:3px;
transform:translate(-50%,-50%);
z-index:15;
background:#fffdea;
box-shadow:0 0 3px 1px #fff9de,0 0 10px 3px rgba(255,249,213,.85);
animation:freiraum-approach-white-morse-a 8s steps(1,end) infinite;
}
@keyframes freiraum-approach-white-morse-a{
0%,1%,8%,19%,43%,100%{opacity:0}
2%,7%,20%,42%{opacity:var(--buoy-lamp-strength,0)}
}
@media(prefers-reduced-motion:reduce){
.channel-buoy.channel-buoy-approach .channel-buoy-light{
animation:none;
opacity:calc(var(--buoy-lamp-strength,0)*.9);
}
}
/* Single source of truth: the approach beacon's short-long Morse A rhythm
is driven by updateApproachLamp(). Disable older competing keyframes. */
.channel-buoy.channel-buoy-approach .channel-buoy-light{
animation:none!important;
left:50%;
top:30.6%;
width:2.5px;
height:2.5px;
z-index:20;
opacity:0;
transform:translate(-50%,-50%);
background:#fff9e8;
border:0;
box-shadow:0 0 3px 1px rgba(255,249,226,.85),
0 0 7px 2px rgba(255,245,204,.56),
0 0 12px 4px rgba(255,237,189,.22);
filter:none!important;
pointer-events:none;
}
/* At night, a modest lunar highlight reveals the yacht's cabin without
introducing a persistent white outline. Daylight styling stays intact. */
.sailboat>svg:not(.boat-shadow) .boat-cabin-roof{
opacity:calc(.46 + var(--vessel-lunar,var(--lunar-ambient,0))*.27 + (1 - var(--boat-night-light,0))*.19);
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-window{
opacity:calc(.52 + var(--vessel-lunar,var(--lunar-ambient,0))*.16 + (1 - var(--boat-night-light,0))*.07);
}
/* Independent sail controls: foresail first up, mainsail first down.
?reef=1 previews the reefed mainsail without changing the jib. */
.sailboat>svg:not(.boat-shadow) .boat-sail:first-child{
transform:scaleY(var(--sail-main-hoist,0));
}
.sailboat>svg:not(.boat-shadow) .boat-sail:nth-child(2){
transform:scaleY(var(--sail-jib-hoist,0));
}
/* Compact sea sound popover, opened only by the sea sound button. */
footer nav{position:relative}
.ocean-volume-panel{
position:absolute;bottom:calc(100% + 12px);left:0;z-index:20;
width:min(290px,calc(100vw - 32px));padding:16px 17px;
background:rgba(18,42,53,.97);color:#f7f3e8;border:1px solid #ffffff50;
border-radius:16px;box-shadow:0 12px 32px #071a2380;
font-size:.84rem;
}
.ocean-volume-panel[hidden]{display:none!important}
.ocean-volume-heading{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:11px}
footer nav .ocean-volume-heading button{
display:inline-flex;padding:0;width:28px;min-height:28px;
border:0;background:transparent;color:inherit;font-size:1.35rem;
}
.ocean-volume-panel label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.ocean-volume-panel input[type=range]{display:block;width:100%;accent-color:#efd5a0;cursor:pointer;min-height:28px}
.ocean-volume-panel small{display:block;font-size:.68rem;opacity:.8;margin-top:7px;line-height:1.4}
footer nav .ocean-volume-panel .ocean-sound-toggle{
margin-top:12px;padding:8px 12px;min-height:34px;width:100%;
border:1px solid #ffffff45;background:#294653;color:#f7f3e8;
font-size:.72rem;border-radius:9px;
}
@media(max-width:600px){.ocean-volume-panel{left:50%;transform:translateX(-50%)}}
/* Single accessible mixer instead of separate sea/bird toolbar buttons. */
.ocean-volume-panel{width:min(315px,calc(100vw - 32px));max-height:min(70vh,490px);overflow-y:auto}
.sound-mixer-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:9px 0;border-top:1px solid #ffffff21}
.sound-mixer-line label{grid-column:1/-1;margin:0}
.sound-mixer-line input[type=range]{grid-column:1;min-width:0}
footer nav .ocean-volume-panel .sound-mixer-line button.ocean-sound-toggle{
grid-column:2;width:auto;min-width:94px;margin:0;min-height:32px;
padding:5px 9px;font-size:.71rem;border-radius:10px;
}
footer nav .ocean-volume-panel .sound-mixer-line button[aria-pressed=true]{
background:#e7d6b7;color:#183844;
}
/* Four-stage vessel traffic: outward near shore, cross offshore twice, return to
the invisible harbor on the right. Large commercial silhouettes stay at horizon. */
.fishing-cutter.is-foreground{
width:clamp(24px,2.7vw,42px);
bottom:calc(50% - 20px);
z-index:7;
}
.fishing-cutter.is-middle{
width:clamp(14px,1.6vw,24px);
bottom:calc(50% - 5px);
z-index:4;
}
.harbor-cutter.is-foreground{
width:clamp(68px,8.1vw,114px);
bottom:calc(50% - 23px);
z-index:8;
}
.harbor-cutter.is-middle{
width:clamp(46px,5.4vw,76px);
bottom:calc(50% - 12px);
z-index:5;
}
/* Seute Deern is 36.10 m versus the KÜH-24's 14.38 m, at matching
apparent distance: same depth scaling, approximately 2.51x the hull length.
Its red underwater body is never part of the above-water vector. */
/* Hull-length calibration, NOT viewBox-width calibration:
KÜH-24 painted hull = (1514 - 92)/1660 = .8566265 of graphic
Seute Deern painted hull = (830 - 110)/1000 = .7200000 of graphic
Physical ratio = 36.10m / 14.38m = 2.51043
Element-width ratio at equal distance = 2.51043 * .8566265/.72 = 2.98684
The bowsprit is deliberately excluded from the 36.10m hull comparison.
The full rig is much taller than the old inaccurate illustration. */
.harbor-cutter.is-seute.is-middle{
width:clamp(137.4px, 16.13vw, 227px);
bottom:calc(50% - clamp(9px, 1.05vw, 16px));
}
.harbor-cutter.is-seute.is-foreground{
width:clamp(203.1px, 24.20vw, 340.6px);
bottom:calc(50% - clamp(14px, 1.6vw, 25px));
}
.harbor-cutter.is-seute{aspect-ratio:1000/760}
.harbor-cutter.is-seute>img{clip-path:none;-webkit-clip-path:none}
.harbor-cutter.is-seute .harbor-bow-wave{top:94%;width:6%;height:4%}
.harbor-cutter.is-seute .harbor-stern-wake{top:94%}
.harbor-cutter.is-seute .harbor-light-white{left:54%;top:9%}
.harbor-cutter.is-seute .harbor-light-side{left:91%;top:91%}
.harbor-cutter.is-seute .harbor-light-stern{top:91%}
.harbor-cutter.is-seute.is-returning .harbor-light-white{left:46%}
.harbor-cutter.is-seute.is-returning .harbor-light-side{left:9%}
/* FAIRPLAY-54 replaces the archived tiny cutter. No foreground variant.
Same apparent distance as KÜH-24: 28.36 / 14.38 = 1.97218.
Painted hull fractions: KÜH-24 1422/1660 = .85663;
FAIRPLAY-54 881/1000 = .881. Element scale = 1.9176.
Keep its blue/white detail rather than the old monochrome cutter fill. */
.fishing-cutter.fairplay-54,
.fishing-cutter.fairplay-54.is-middle,
.fishing-cutter.fairplay-54.is-foreground{
width:clamp(88.2px,10.36vw,145.7px);
height:auto;
bottom:calc(50% - clamp(6px,.8vw,11px));
z-index:5;
opacity:1!important;
pointer-events:none;
}
.fishing-cutter.fairplay-54 img{
display:block;
width:100%;
height:auto;
object-fit:contain;
transform-origin:center center;
filter:brightness(calc(.42 + var(--surf-daylight,1)*.58))
saturate(calc(1 - var(--cutter-haze,0)*.6));
}
.fishing-cutter.fairplay-54.is-returning img{transform:none}
.fishing-cutter.fairplay-54::before,
.fishing-cutter.fairplay-54::after{content:none!important}
@media(prefers-reduced-motion:reduce){
.fishing-cutter.fairplay-54{opacity:1!important}
}
/* Seute Deern casts a separate water-only silhouette; sail and rig remain
fixed in their photographed shape and are mirrored as one ship. */
.sea>.seute-water-shadow{
position:absolute;inset:0;width:100%;height:100%;display:block;
overflow:hidden;pointer-events:none;z-index:4;opacity:0;
mix-blend-mode:multiply;
}
.sea>.seute-water-shadow .seute-contact{
fill:#153744;opacity:.85;filter:blur(.55px);
}
.sea>.seute-water-shadow .seute-sails{
fill:#173745;opacity:.32;filter:blur(1.8px);
stroke:none;
}
.sea>.seute-water-shadow .seute-rig{
fill:none;stroke:#112e3c;stroke-width:.85;opacity:.31;
stroke-linejoin:round;filter:blur(.65px);
}
/* Only the fully mirrored SVG changes course. Sail curvature stays identical. */
.harbor-cutter.is-seute:not(.is-returning)>img{transform:none}
.harbor-cutter.is-seute.is-returning>img{transform:scaleX(-1)}
/* FAIRPLAY-54: independent sunlight-dependent, wave-broken sea projection.
Keep the shadow below the ship, not in the sky or on harbor markers. */
.sea>.fairplay-water-shadow{
position:absolute;inset:0;width:100%;height:100%;
z-index:4;pointer-events:none;overflow:hidden;opacity:0;
mix-blend-mode:multiply;
}
.sea>.fairplay-water-shadow .fairplay-contact{
fill:#173a49;opacity:.78;filter:blur(.55px);
}
.sea>.fairplay-water-shadow .fairplay-cabin{
fill:#183948;opacity:.28;filter:blur(1.35px);
}
.sea>.fairplay-water-shadow .fairplay-rig{
fill:none;stroke:#173644;stroke-width:.85;
stroke-linecap:round;stroke-linejoin:round;
opacity:.34;filter:blur(.7px);
}
.sea>.fairplay-water-shadow .fairplay-ripples{
fill:#173a49;opacity:.23;filter:blur(.7px);
}
body.human-details-hidden .sea>.fairplay-water-shadow{visibility:hidden!important}
/* Low sun: dark opaque hull and shaded superstructures, rather than
a uniformly illuminated ship. Preserve recognizable colors at midday. */
.fishing-cutter.fairplay-54 img{
filter:brightness(calc((.95 - var(--fairplay-backlight,0)*.48) * (.64 + var(--surf-daylight,1)*.36)))
saturate(calc(1 - var(--cutter-haze,0)*.48));
}
.harbor-cutter.is-seute img{
filter:brightness(calc(var(--harbor-lightness,.65)*.82))
saturate(calc(1 - var(--harbor-haze,0)*.65));
}
/* Tug bow breaks the surface, with a narrow bright shoulder and fine foam.
The entire moving parent is horizontally mirrored for the opposite course. */
.fishing-cutter.fairplay-54 .fairplay-bow-wave{
position:absolute;left:3%;top:78%;width:20%;height:13%;z-index:3;
pointer-events:none;transform:rotate(-5deg);
border-radius:0 80% 25% 95%;
background:
radial-gradient(ellipse 90% 42% at 18% 65%,rgba(244,251,249,.84),transparent 79%),
linear-gradient(171deg,transparent 36%,rgba(238,251,253,.66) 46%,transparent 67%);
opacity:calc(.24 + var(--surf-daylight,1)*.64);
filter:blur(.6px);
animation:fairplay-foam 2.2s ease-in-out infinite alternate;
}
.fishing-cutter.fairplay-54 .fairplay-stern-wake{
position:absolute;left:85%;top:84%;width:46%;height:13%;z-index:1;
pointer-events:none;transform:rotate(2deg);
background:repeating-linear-gradient(177deg,
rgba(235,249,251,.58) 0 1px,transparent 2px 5px);
mask-image:linear-gradient(90deg,#000b,transparent);
-webkit-mask-image:linear-gradient(90deg,#000b,transparent);
opacity:calc(.16 + var(--surf-daylight,1)*.39);
filter:blur(.65px);
animation:fairplay-foam 2.6s ease-in-out infinite alternate-reverse;
}
@keyframes fairplay-foam{
from{opacity:.27;filter:blur(1px)}
to{opacity:.75;filter:blur(.35px)}
}
@media(prefers-reduced-motion:reduce){
.fishing-cutter.fairplay-54 .fairplay-bow-wave,
.fishing-cutter.fairplay-54 .fairplay-stern-wake{animation:none}
}
/* Attached hull footprint and softly broken superstructure shadows. */
.sea>.fairplay-water-shadow .fairplay-contact{opacity:.94;filter:blur(.4px)}
.sea>.fairplay-water-shadow .fairplay-tail{
fill:#163847;opacity:.44;filter:blur(1.7px);
}
.sea>.fairplay-water-shadow .fairplay-cabin{
opacity:.32;filter:blur(1.5px);
}
.sea>.seute-water-shadow .seute-sails{
opacity:.12;filter:blur(2.9px);
}
.sea>.seute-water-shadow .seute-rig{
opacity:.22;filter:blur(1.25px);
}
/* Fairplay-54: distant midground, 14% smaller than previous visual scale.
Earlier rules are overridden without disturbing the larger KÜH-24. */
.fishing-cutter.fairplay-54,
.fishing-cutter.fairplay-54.is-middle,
.fishing-cutter.fairplay-54.is-foreground{
width:clamp(75.8px,8.9vw,125.5px);
bottom:calc(50% - clamp(2px,.35vw,5px));
z-index:4;
}
.fishing-cutter.fairplay-54 img{
filter:brightness(calc((.82 - var(--fairplay-backlight,0)*.34) * (.70 + var(--surf-daylight,1)*.30)))
saturate(calc(1 - var(--cutter-haze,0)*.46));
}
.fishing-cutter.fairplay-54 .fairplay-bow-wave{
left:4%;top:79%;width:16%;height:10%;
background:
radial-gradient(ellipse 88% 40% at 18% 65%,rgba(244,251,249,.78),transparent 80%),
linear-gradient(171deg,transparent 38%,rgba(238,251,253,.58) 47%,transparent 66%);
opacity:calc(.18 + var(--surf-daylight,1)*.46);
filter:blur(.7px);
}
.fishing-cutter.fairplay-54 .fairplay-stern-wake{
left:87%;top:85%;width:34%;height:10%;
background:repeating-linear-gradient(177deg,rgba(235,249,251,.48) 0 1px,transparent 2px 5px);
mask-image:linear-gradient(90deg,#0009,transparent);
-webkit-mask-image:linear-gradient(90deg,#0009,transparent);
opacity:calc(.11 + var(--surf-daylight,1)*.28);
filter:blur(.75px);
}
/* Fairplay midground shadow: waterline contact must remain readable even
when direct sunlight is cloud-muted, while the distant projection stays soft. */
.sea>.fairplay-water-shadow .fairplay-contact{
fill:#153744;opacity:1;filter:blur(.35px);
}
.sea>.fairplay-water-shadow .fairplay-tail{
fill:#183c4b;opacity:.19;filter:blur(2.3px);
}
.sea>.fairplay-water-shadow .fairplay-cabin{
fill:#143541;opacity:.40;filter:blur(1.2px);
}
.sea>.fairplay-water-shadow .fairplay-rig{
opacity:.30;stroke-width:1;filter:blur(.75px);
}
/* Align actual 1000x570 SVG hull (y≈490) to the sea surface.
The 80px transparent space below the hull must not lift the tug into air. */
.fishing-cutter.fairplay-54,
.fishing-cutter.fairplay-54.is-middle,
.fishing-cutter.fairplay-54.is-foreground{
bottom:calc(50% - clamp(9px, 1.0vw, 13px));
}
/* Fairplay: the broad polygonal shadow was an artificial tail.
Leave only hull contact and outlines of real solid structures. */
.sea>.fairplay-water-shadow .fairplay-tail{display:none!important}
.sea>.fairplay-water-shadow .fairplay-cabin{
opacity:.30;
filter:blur(1.45px);
}
.sea>.fairplay-water-shadow .fairplay-contact{
opacity:.85;
filter:blur(.6px);
}
/* Restrained blue/white silhouette in head-on sunlight without bleaching
the entire ship; no semi-transparent hull. */
.fishing-cutter.fairplay-54 img{
filter:brightness(calc((.76 - var(--fairplay-backlight,0)*.43) *
(.78 + var(--surf-daylight,1)*.22)))
saturate(calc(.88 - var(--cutter-haze,0)*.30));
}
/* Fairplay-54 harbor perspective: two genuinely distinct depth planes.
The vessel overlaps the RED buoy only in the near shipping channel;
the background voyages stay at the horizon and behind all channel marks. */
.fishing-cutter.fairplay-54.is-foreground{
width:clamp(75.8px,8.9vw,125.5px);
bottom:calc(50% - clamp(18px,1.45vw,26px));
z-index:9;
opacity:1!important;
}
.fishing-cutter.fairplay-54.is-middle{
width:clamp(33px,4.1vw,58px);
bottom:calc(50% - clamp(3px,.28vw,5px));
z-index:3;
opacity:.82!important;
}
/* Nearby tug retains recognizable muted paint; horizon tug becomes a dark,
desaturated silhouette rather than a brightly painted foreground model. */
.fishing-cutter.fairplay-54.is-middle img{
filter:grayscale(.9) brightness(calc(.40 - var(--fairplay-backlight,0)*.15))
saturate(.27) contrast(1.08);
}
.fishing-cutter.fairplay-54.is-middle .fairplay-bow-wave{
width:9%;height:6%;opacity:.24;filter:blur(.9px);
}
.fishing-cutter.fairplay-54.is-middle .fairplay-stern-wake{
width:21%;height:5%;opacity:.15;filter:blur(1px);
}
/* TUEMMLER — provisional 15m x 4m compact tug.
Painted hull 870/1000; KÜH-24 reference 1422/1660, so at an equal
distance element width is roughly (15/14.38)*(.8566/.87)=1.027x KÜH.
The perspective planes, not nameplate dimensions, govern visible scale. */
.tuemmler{
position:absolute;left:0;z-index:9;
pointer-events:none;transform-origin:center center;
width:clamp(72px,8.4vw,116px);
bottom:calc(50% - clamp(15px,1.45vw,21px));
opacity:1;
}
.tuemmler img{
width:100%;height:auto;display:block;
filter:brightness(calc(.83 - var(--tuemmler-backlight,0)*.48))
saturate(.78);
}
.tuemmler.is-near{
width:clamp(72px,8.4vw,116px);
bottom:calc(50% - clamp(15px,1.45vw,21px));
z-index:9;
}
.tuemmler.is-far{
width:clamp(19px,2.4vw,34px);
bottom:calc(50% - 3px);
z-index:3;
}
.tuemmler.is-far img{
filter:grayscale(.94) brightness(calc(.39 - var(--tuemmler-backlight,0)*.13)) contrast(1.08);
}
.tuemmler .tuemmler-bow-wave{
position:absolute;left:4%;top:80%;width:15%;height:12%;
pointer-events:none;
background:radial-gradient(ellipse at 35% 60%,#e0f5f0bb,transparent 78%);
filter:blur(.8px);
animation:tuemmler-wave 2.4s ease-in-out infinite alternate;
}
.tuemmler.is-far .tuemmler-bow-wave{opacity:.12;width:7%;height:5%}
@keyframes tuemmler-wave{from{opacity:.28}to{opacity:.7}}
.sea>.tuemmler-water-shadow{
position:absolute;inset:0;width:100%;height:100%;
z-index:3;pointer-events:none;overflow:hidden;opacity:0;
mix-blend-mode:multiply;
}
.sea>.tuemmler-water-shadow .tuemmler-contact{
fill:#173b49;opacity:.85;filter:blur(.45px)
}
.sea>.tuemmler-water-shadow .tuemmler-house{
fill:#173b49;opacity:.27;filter:blur(1.35px)
}
.sea>.tuemmler-water-shadow .tuemmler-mast{
fill:none;stroke:#173b49;stroke-width:.65;opacity:.24;
filter:blur(.7px)
}
body.human-details-hidden .tuemmler,
body.human-details-hidden .sea>.tuemmler-water-shadow{visibility:hidden!important}
@media(prefers-reduced-motion:reduce){.tuemmler .tuemmler-bow-wave{animation:none}}
/* Photo-accurate Seute Deern: reduce the apparent size in both traffic
planes while keeping painted-hull ratio 36.10/14.38 in the model.
The vessel travels farther from the observer than the small yacht. */
.harbor-cutter.is-seute.is-middle{
width:clamp(110px,12.9vw,181px);
bottom:calc(50% - clamp(9px,.9vw,13px));
}
.harbor-cutter.is-seute.is-foreground{
width:clamp(155px,18.4vw,260px);
bottom:calc(50% - clamp(11px,1.2vw,19px));
}
.harbor-cutter.is-seute>img{
object-fit:contain;
clip-path:none;
-webkit-clip-path:none;
}
/* Original dark lower hull stays opaque in the sun; cloth retains its
cream/maroon contrast through the existing backlight model. */
.harbor-cutter.is-seute .harbor-bow-wave{
top:91%;width:4%;height:3%;opacity:.3;
}
.harbor-cutter.is-seute .harbor-stern-wake{
top:91%;opacity:.22;
}
/* Rear navigation-channel position for the 36.10m Seute Deern.
The ratio to the ~9m yacht is ~4:1 only AT EQUAL DISTANCE;
at the more distant channel depth the apparent hull must be smaller.
The SVG dimensions and mast proportions remain physically unchanged. */
.harbor-cutter.is-seute.is-foreground{
width:clamp(110px,13.0vw,182px);
bottom:calc(50% - clamp(17px,1.65vw,26px));
z-index:6;
}
.harbor-cutter.is-seute.is-middle{
width:clamp(86px,10.0vw,139px);
bottom:calc(50% - clamp(11px,1.0vw,16px));
z-index:4;
}
/* 2026-11-04: Distant tugs must merge with the horizon. Crop the submerged
portion of the drawn hull rather than letting the whole profile float.
Keep near-channel vessels untouched. */
.fishing-cutter.fairplay-54.is-middle{
bottom:calc(50% - 7px);
}
.fishing-cutter.fairplay-54.is-middle>img{
clip-path:inset(0 0 17% 0);
-webkit-clip-path:inset(0 0 17% 0);
}
.tuemmler.is-far{
bottom:calc(50% - 7px);
}
.tuemmler.is-far>img{
clip-path:inset(0 0 19% 0);
-webkit-clip-path:inset(0 0 19% 0);
}
/* Photo-pass 2026-11-04: distinct structures on Seute Deern.
Avoid a dark solid sail triangle in the water; use separate soft facets
and a visible curved contact at the actual black keel. */
.sea>.seute-water-shadow .seute-contact{
fill:#142f3c;opacity:.88;filter:blur(.5px);
}
.sea>.seute-water-shadow .seute-sails{
fill:#183a46;opacity:.28;filter:blur(2.2px);
}
.sea>.seute-water-shadow .seute-rig{
stroke:#193845;stroke-width:.75;opacity:.36;filter:blur(.9px);
}
/* Coastal cruiser: make the redesigned opaque hull read as a 9m yacht.
No change to its rigging, sleep/sail states, or position. */
.sailboat .boat-cabin{
fill:color-mix(in srgb,#e6e6df calc(100% - var(--hull-solar-backlight,0)*55%),#395466);
}
.sailboat .boat-cabin-window{opacity:.72}
.sailboat .boat-deck{stroke-width:.7px}
/* 2026-11-04: readable new 9m cruiser on a pale Baltic horizon.
The original color-mix rules washed out the replacement SVG because the
shaded hull and cabin shared nearly identical tones. These overrides use
the live dynamic sail-color variables and retain night/solar shading. */
.sailboat>svg:not(.boat-shadow) .boat-sail.boat-main{
fill:var(--sail-main,#e2dac9)!important;
stroke:color-mix(in srgb,var(--sail-main,#e2dac9) 38%,#455c66)!important;
stroke-width:.72!important;
filter:drop-shadow(-.35px .2px .45px rgba(32,53,61,.32));
}
.sailboat>svg:not(.boat-shadow) .boat-sail.boat-jib{
fill:var(--sail-jib,#dce3db)!important;
stroke:color-mix(in srgb,var(--sail-jib,#dce3db) 35%,#435966)!important;
stroke-width:.7!important;
filter:drop-shadow(.35px .1px .45px rgba(32,53,61,.25));
}
.sailboat>svg:not(.boat-shadow) .boat-sail-detail{
stroke:color-mix(in srgb,var(--sail-main,#e8e1d5) 35%,#73848a)!important;
stroke-width:.45!important;
opacity:calc(.62 * var(--sail-hoist,0));
}
.sailboat>svg:not(.boat-shadow) .boat-deck{
fill:color-mix(in srgb,var(--hull-shade,#254b5c) calc(55% + var(--boat-night-light,0)*45%),#c0caca)!important;
stroke:#3b5968!important;
stroke-width:.4!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,var(--hull-shade,#254b5c) calc(30% + var(--boat-night-light,0)*70%),#d9dad2)!important;
stroke:#4b6670!important;
stroke-width:.58!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-window{
fill:color-mix(in srgb,var(--hull-shade,#254b5c) calc(48% + var(--boat-night-light,0)*52%),#192e3b)!important;
stroke:none!important;
opacity:.85!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-roof{
stroke:color-mix(in srgb,var(--hull-shade,#254b5c) 50%,#e1e0d6)!important;
opacity:.85;
}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,var(--hull-shade,#193c4b) 85%,#102b3a)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-bootstripe{
stroke:#b6c4bf!important;
opacity:calc(.19 + var(--surf-daylight,0)*.42);
}
/* Dedicated tapered bow wedge stays crisp; never mask it with the sail
shadow's wave fragments. It follows sun-bearing and disappears at night
with the same parent water-shadow opacity. */
.sea>.boat-shadow .boat-bow-water-shadow{
fill:#173c4d;
stroke:none;
opacity:.77;
filter:blur(.30px);
}
.sea>.boat-shadow.is-furled .boat-bow-water-shadow{opacity:.48}
/* Solar shadow review: preserve moving wavelets, but soften the large
sailcloth patches and keep the bow point visually part of the hull. */
.sea>.boat-shadow .boat-shadow-silhouette{
fill:#244754;
opacity:var(--rig-shadow-opacity,.24);
filter:blur(1.7px);
}
.sea>.boat-shadow .boat-bow-water-shadow{
fill:#183b49;
opacity:.55;
filter:blur(.65px);
}
.sea>.boat-shadow .boat-hull-contact-band{
opacity:.80;
filter:blur(.35px);
}
/* Anchored yacht: no loose long zigzag line; the hoisted daylight ball
is attached to the mast, and a thin chain enters the water at the bow. */
.sailboat .anchor-chain{
stroke-width:.48;
stroke-dasharray:1.4 .9;
opacity:0;
}
.sailboat:is(.is-anchored,.is-anchoring,.is-weighing) .anchor-chain{
opacity:.60;
}
.sailboat .anchor-ball{filter:none;stroke:#28343b;stroke-width:.18}
/* When sails are down, avoid a second elongated mast streak. */
.sea>.boat-shadow.is-furled .boat-mast-water-shadow{
opacity:.20;
stroke-width:.42;
filter:blur(.7px);
}
/* Distant compact motor/patrol vessel: genuinely behind the approach buoy.
Its visible above-water profile hugs the horizon; only the mast/cabin
clears it. Foreground journeys are deliberately not affected. */
.tuemmler.is-far{
width:clamp(16px,2.05vw,29px);
bottom:calc(50% + 1px);
z-index:2;
}
.tuemmler.is-far>img{
clip-path:inset(0 0 24% 0);
-webkit-clip-path:inset(0 0 24% 0);
filter:grayscale(1) brightness(calc(.36 - var(--tuemmler-backlight,0)*.11)) contrast(1.04);
}
.tuemmler.is-far .tuemmler-bow-wave{opacity:.09}
/* Mast stepped on the raised coachroof, boom clear of its top.
Preserve deckhouse brightness in daylight, and spare the submerged
lower hull from a false visible keel: actual 1.4–1.75m draft is below
the surface, not represented as exposed topsides. */
.sailboat>svg:not(.boat-shadow) .boat-boom,
.sailboat>svg:not(.boat-shadow) .boat-boom-furled{
stroke-linecap:round;
}
/* Channel-depth ordering, 2026-11-04:
GREEN channel buoy is nearest; police vessel passes behind it,
but in front of the smaller RED channel buoy. Keep this order
for both near and horizon crossings (not screen-position tricks). */
.channel-buoy.channel-buoy-port{
top:calc(50% - 3px);
z-index:8;
}
.channel-buoy.channel-buoy-starboard{
top:calc(50% - 3px);
width:7px;
height:10px;
z-index:5;
transform-origin:50% 80%;
}
.tuemmler.is-near{z-index:7}
.tuemmler.is-far{z-index:6}
@media(max-width:600px){
.channel-buoy.channel-buoy-port{top:calc(50% - 2px)}
.channel-buoy.channel-buoy-starboard{
top:calc(50% - 2px);
width:6px;height:9px;
}
}
/* Solar-based vessel exposure. The sunset sky can still be vivid while
surfaces facing away from the sun become predominantly silhouettes.
Keep every hull opaque; fade paint by lighting, not element opacity. */
.harbor-cutter:not(.is-seute)>img{
filter:brightness(calc(var(--harbor-lightness,.64) * var(--vessel-dusk-brightness,1)))
saturate(calc(1 - var(--harbor-haze,0)*.65));
}
.harbor-cutter.is-seute>img{
filter:brightness(calc(var(--harbor-lightness,.65) * .82 * var(--vessel-dusk-brightness,1)))
saturate(calc(1 - var(--harbor-haze,0)*.65));
}
.fishing-cutter.fairplay-54:not(.is-middle)>img{
filter:brightness(calc((.76 - var(--fairplay-backlight,0)*.43)
* (.78 + var(--surf-daylight,1)*.22) * var(--vessel-dusk-brightness,1)))
saturate(calc(.88 - var(--cutter-haze,0)*.30));
}
.fishing-cutter.fairplay-54.is-middle>img{
filter:grayscale(.9)
brightness(calc((.40 - var(--fairplay-backlight,0)*.15) * var(--vessel-dusk-brightness,1)))
saturate(.27) contrast(1.08);
}
.tuemmler.is-near>img{
filter:brightness(calc((.83 - var(--tuemmler-backlight,0)*.48) * var(--vessel-dusk-brightness,1)))
saturate(.78);
}
.tuemmler.is-far>img{
filter:grayscale(.94)
brightness(calc((.36 - var(--tuemmler-backlight,0)*.11) * var(--vessel-dusk-brightness,1)))
contrast(1.04);
}
/* Seute Deern: lights at the actual deck/rail height, not at the keel.
The mainmast masthead sits at x≈60%, the bow at x≈82%, stern x≈12%. */
.harbor-cutter.is-seute .harbor-light-white{left:60%;top:10.5%}
.harbor-cutter.is-seute .harbor-light-side{left:81.5%;top:81.5%}
.harbor-cutter.is-seute .harbor-light-stern{left:13%;top:83%}
.harbor-cutter.is-seute.is-returning .harbor-light-white{left:40%}
.harbor-cutter.is-seute.is-returning .harbor-light-side{left:18.5%}
.harbor-cutter.is-seute.is-returning .harbor-light-stern{left:87%}
/* Light units stay separate from dimmed SVG paint. Fade in at dusk and
follow the existing leg-direction class for the visible red/green side. */
:is(.fairplay-54,.tuemmler) .vessel-nav-lights{
position:absolute;inset:0;display:block;pointer-events:none;
z-index:5;opacity:var(--vessel-navigation-strength,0);
}
:is(.fairplay-54,.tuemmler) .vessel-nav-lights>i{
position:absolute;display:block;width:2.3px;height:2.3px;
border-radius:50%;background:currentColor;
box-shadow:0 0 3px 1px currentColor;
}
:is(.fairplay-54,.tuemmler) .vessel-nav-white{color:#fff2d8}
:is(.fairplay-54,.tuemmler) .vessel-nav-side{color:#46e9a5}
:is(.fairplay-54,.tuemmler).is-returning .vessel-nav-side{color:#ff6459}
:is(.fairplay-54,.tuemmler) .vessel-nav-stern{color:#fff1d4;opacity:.55}
/* Fairplay photo model: bow is at x≈7%, white topmast x≈37%. */
.fairplay-54 .vessel-nav-white{left:37%;top:12%}
.fairplay-54 .vessel-nav-side{left:8%;top:69%}
.fairplay-54 .vessel-nav-stern{left:93%;top:75%}
/* Tümmler photo model: bow is at x≈94%, white topmast x≈55%. */
.tuemmler .vessel-nav-white{left:55%;top:14%}
.tuemmler .vessel-nav-side{left:91%;top:72%}
.tuemmler .vessel-nav-stern{left:8%;top:75%}
:is(.fairplay-54.is-middle,.tuemmler.is-far) .vessel-nav-lights>i{
width:1.5px;height:1.5px;box-shadow:0 0 2px currentColor;
}
/* Tümmler / KÜH-24 perspective calibration: both are roughly 15m vessels.
Tümmler runs between the lateral marks and should never visually dwarf
the KÜH-24. Make its near-channel width slightly smaller than KÜH-24's
middle-channel 46..76px; keep far-channel treatment unchanged. */
.tuemmler.is-near{
width:clamp(42px,4.8vw,68px);
bottom:calc(50% - clamp(9px,.9vw,13px));
}
/* Yacht silhouette correction 2026-11-04:
The previous global 0.63 alpha made even the solid dark hull translucent
against the dusk water. Keep model opaque and let painted colors follow sun.
The rounded hull contact crescent is deliberately disabled until a true
broken reflection is modelled. */
.sailboat{opacity:1}
.sea>.boat-shadow .boat-hull-contact-band{display:none!important}
.sea>.boat-shadow .shadow-contact{display:none!important}
.sailboat>svg:not(.boat-shadow) .boat-hull{
fill:color-mix(in srgb,var(--hull-shade,#193c4b) 94%,#0c2531)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,var(--hull-shade,#254b5c) calc(38% + var(--boat-night-light,0)*62%),#d9dad2)!important;
}
/* FAIRPLAY: the marked 2-way channel is BETWEEN the two lateral buoys.
Regardless of direction the green buoy (z=8) must occlude the tug,
and the red buoy (z=5) must remain behind it. The two slight shifts
distinguish right-hand traffic looking along the direction of travel:
outgoing near red / incoming near green. */
.fishing-cutter.fairplay-54.is-foreground.lane-outbound,
.fishing-cutter.fairplay-54.is-foreground.lane-inbound{
z-index:6;
opacity:1!important;
transform-origin:50% 85%;
}
.fishing-cutter.fairplay-54.is-foreground.lane-outbound{
width:clamp(69px,8.0vw,113px);
bottom:calc(50% - clamp(6px,.65vw,10px));
}
.fishing-cutter.fairplay-54.is-foreground.lane-inbound{
width:clamp(78px,9.0vw,127px);
bottom:calc(50% - clamp(10px,1.0vw,15px));
}
/* Navigation lights move with the entire transformed ship, including
its bow/stern wakes and the existing sun-dependent water shadow. */
/* 2026-11-04: Shared traffic perspective. Only moving harbor vessels.
Small sailing cruiser and distant large freighters remain untouched. */
.harbor-cutter.ship-far{
width:clamp(19px,2.4vw,34px);
bottom:calc(50% - 4px);
z-index:3;
}
.harbor-cutter.ship-far img{
filter:grayscale(.9) brightness(calc(.42 * var(--vessel-dusk-brightness,1))) contrast(1.06);
}
.harbor-cutter.ship-far :is(.harbor-bow-wave,.harbor-stern-wake){opacity:.10}
.harbor-cutter:not(.ship-far){z-index:6}
.harbor-cutter:not(.ship-far).lane-outbound{bottom:calc(50% - 9px)}
.harbor-cutter:not(.ship-far).lane-inbound{bottom:calc(50% - 14px)}
.tuemmler.is-near{z-index:6}
.tuemmler.is-near.lane-outbound{bottom:calc(50% - 8px)}
.tuemmler.is-near.lane-inbound{bottom:calc(50% - 13px)}
.tuemmler.is-far{z-index:3}
.channel-buoy.channel-buoy-port{z-index:8}
.channel-buoy.channel-buoy-starboard{z-index:5}
/* Traffic-vessel water contact and approach-mark layering, 2026-11-04.
Do not apply any of these selectors to the small sailboat or horizon freighters.
All moving ship models use their waterline as the scale pivot, so reducing
their apparent size does not lift the hull clear of the horizon. */
.fishing-cutter.fairplay-54,
.harbor-cutter,
.tuemmler{transform-origin:50% 100%}
/* The ship is below the GREEN mark and above the RED mark in either
fairway lane; outbound goes BEHIND the white approach mark, inbound
in FRONT. This is an actual stacking change, not a clipping trick. */
.channel-buoy.channel-buoy-port{z-index:14}
.channel-buoy.channel-buoy-starboard{z-index:5}
.channel-buoy.channel-buoy-approach{z-index:10}
.fishing-cutter.fairplay-54.is-foreground.lane-outbound,
.harbor-cutter:not(.ship-far).lane-outbound,
.tuemmler.is-near.lane-outbound{z-index:7}
.fishing-cutter.fairplay-54.is-foreground.lane-inbound,
.harbor-cutter:not(.ship-far).lane-inbound,
.tuemmler.is-near.lane-inbound{z-index:12}
/* Lower the marked-channel hulls into the water. The element artwork
contains transparent space below each drawn waterline, especially
Seute Deern's tall 1000x760 sail profile. */
.fishing-cutter.fairplay-54.is-foreground.lane-outbound{
bottom:calc(50% - clamp(15px,1.4vw,20px))
}
.fishing-cutter.fairplay-54.is-foreground.lane-inbound{
bottom:calc(50% - clamp(17px,1.6vw,23px))
}
.harbor-cutter:not(.is-seute):not(.ship-far).lane-outbound{
bottom:calc(50% - 16px)
}
.harbor-cutter:not(.is-seute):not(.ship-far).lane-inbound{
bottom:calc(50% - 20px)
}
.harbor-cutter.is-seute:not(.ship-far).lane-outbound{
/* Match the Seute Deern's hull contact to the other channel vessels;
retain her existing painted hull, scale, and sail profile. */
bottom:calc(50% - 25px)
}
.harbor-cutter.is-seute:not(.ship-far).lane-inbound{
bottom:calc(50% - clamp(33px,3.3vw,48px))
}
.tuemmler.is-near.lane-outbound{bottom:calc(50% - 14px)}
.tuemmler.is-near.lane-inbound{bottom:calc(50% - 18px)}
/* Far traffic remains a tiny opaque silhouette tangent to the horizon.
High-specificity Seute rules above otherwise kept the full-size model,
causing the large black ship to float above the horizon. */
.harbor-cutter.ship-far,
.harbor-cutter.is-seute.is-middle.ship-far{
width:clamp(18px,2.15vw,31px);
bottom:calc(50% - 7px);
z-index:3;
}
.harbor-cutter.is-seute.is-middle.ship-far{
aspect-ratio:1000/760;
}
.fishing-cutter.fairplay-54.is-middle{
width:clamp(24px,3vw,42px);
bottom:calc(50% - 9px);
z-index:3;
}
.tuemmler.is-far{
width:clamp(16px,2vw,28px);
bottom:calc(50% - 6px);
z-index:3;
}
/* Offshore size interpolation is anchored at the water contact, not the
centre of the artboard. All 4 travelling vessel types retain their own
near/far hull baseline. Static yacht and skyline freighters are excluded. */
.fishing-cutter.fairplay-54.is-middle,
.harbor-cutter.ship-far,
.tuemmler.is-far{transform-origin:50% 100%}
/* Offshore traffic converges on the sea horizon and vanishes behind it,
driven by per-leg keyframes. Every far vessel stays BEHIND all marks,
including the small white/red approach buoy. */
.fishing-cutter.fairplay-54.is-middle,
.harbor-cutter.ship-far,
.harbor-cutter.is-seute.is-middle.ship-far,
.tuemmler.is-far{z-index:3!important;transform-origin:50% 100%}
/* Approach buoy: slightly smaller and lower, without altering the lateral
red/green pair. Its existing paint, night flash and shadow still apply. */
.channel-buoy.channel-buoy-approach{
top:calc(50% - 7px);
width:7px;
height:13px;
z-index:10;
}
@media(max-width:600px){
.channel-buoy.channel-buoy-approach{
top:calc(50% - 6px);
width:6px;
height:11px;
}
}
/* Seute Deern: locate wakes at the *painted hull ends*, not at the
SVG artboard edges (hull approx x=110..825 of 1000). Both directions
are mirrored around the artwork centre. The long bowsprit is not
the waterline and must not pull the bow wave away from the hull. */
.harbor-cutter.is-seute .harbor-bow-wave{
left:81%;
top:87%;
width:10%;
height:5%;
}
.harbor-cutter.is-seute .harbor-stern-wake{
left:9%;
top:88%;
width:12%;
height:5%;
}
.harbor-cutter.is-seute.is-returning .harbor-bow-wave{
left:19%;
transform:scaleX(-1);
}
.harbor-cutter.is-seute.is-returning .harbor-stern-wake{
left:79%;
transform:scaleX(-1);
}
/* Offshore departure, 2026-11-05: align the painted water-contact edge
with the scene horizon from the first visible frame. Previous far-lane
negative bottom offsets put these small vessels below the horizon.
Keep near-lane baselines, the stationary yacht, and skyline freighters. */
.fishing-cutter.fairplay-54.is-middle{
bottom:calc(50% + 3px);
}
.harbor-cutter.ship-far,
.harbor-cutter.is-seute.is-middle.ship-far{
bottom:calc(50% + 4px);
}
.tuemmler.is-far{
bottom:calc(50% + 3px);
}
/* 2026-11-05 screenshot correction: the painted hulls still floated several
pixels above y=50% even though their animation transforms were aligned.
Move the moving traffic artwork DOWN while preserving the route's
horizontal positions, timing and size curves. Never touch the stationary
sailboat, large horizon freighters, or the already tuned Seute near lane. */
.fishing-cutter.fairplay-54.is-middle{bottom:calc(50% - 9px)}
.harbor-cutter.ship-far,
.harbor-cutter.is-seute.is-middle.ship-far{bottom:calc(50% - 8px)}
.tuemmler.is-far{bottom:calc(50% - 8px)}
/* Larger painted hulls retain artboard padding beneath their keel. */
.fishing-cutter.fairplay-54.is-foreground.lane-outbound{
bottom:calc(50% - clamp(24px,2.2vw,30px))
}
.fishing-cutter.fairplay-54.is-foreground.lane-inbound{
bottom:calc(50% - clamp(26px,2.4vw,33px))
}
.harbor-cutter:not(.is-seute):not(.ship-far).lane-outbound{
bottom:calc(50% - 26px)
}
.harbor-cutter:not(.is-seute):not(.ship-far).lane-inbound{
bottom:calc(50% - 30px)
}
.tuemmler.is-near.lane-outbound{bottom:calc(50% - 24px)}
.tuemmler.is-near.lane-inbound{bottom:calc(50% - 28px)}
/* Shared scene-driven traffic geometry (2026-11-05).
All regular vessels use the identical course coordinates. The JS now
pins the painted waterline of each SVG to the route's projected water
surface. Supersede obsolete per-model horizon crop percentages.
Excludes the free-sailing yacht and background commercial silhouettes. */
.fishing-cutter.fairplay-54.traffic-calibrated>img,
.harbor-cutter.traffic-calibrated>img,
.tuemmler.traffic-calibrated>img{
clip-path:none!important;
-webkit-clip-path:none!important;
}
.fishing-cutter.fairplay-54.traffic-calibrated,
.harbor-cutter.traffic-calibrated,
.tuemmler.traffic-calibrated{
transform-origin:50% 100%!important;
}
/* Small yacht: its hull edge is the bow. No strong, pointed second
silhouette under the bow; only a light soft contact on the ripples.
Do not alter the approved sail and mast shadow projections. */
.sea>.boat-shadow .boat-bow-water-shadow,
.sea>.boat-shadow.is-furled .boat-bow-water-shadow{
fill:color-mix(in srgb,var(--sea-top,#557f8b) 58%,#102e3d);
opacity:.23;
filter:blur(1.05px);
}
/* 2026-11-05: Observer-facing coastal yacht at low solar altitude.
Preserve opaque hull, hull shape, water shadow, sails and nav lights.
The same low-sun state shades cabin/deck even when the boat is not
directly inside the narrow solar glitter stripe. Normal day/night
colours resume smoothly outside twilight. */
.sailboat>svg:not(.boat-shadow) .boat-cabin{
fill:color-mix(in srgb,
var(--hull-shade,#254b5c)
calc(38% + var(--boat-night-light,0)*62% + var(--yacht-dusk-shade,0)*43%),
#d9dad2)!important;
stroke:color-mix(in srgb,#4b6670 calc(100% - var(--yacht-dusk-shade,0)*42%),#152d38)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-deck{
fill:color-mix(in srgb,
var(--hull-shade,#254b5c)
calc(55% + var(--boat-night-light,0)*45% + var(--yacht-dusk-shade,0)*32%),
#c0caca)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-window{
fill:color-mix(in srgb,#192e3b calc(100% - var(--yacht-dusk-shade,0)*36%),#0c202c)!important;
opacity:calc(.85 - var(--yacht-dusk-shade,0)*.17)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-cabin-roof{
stroke:color-mix(in srgb,var(--hull-shade,#254b5c)
calc(50% + var(--yacht-dusk-shade,0)*34%),#e1e0d6)!important;
opacity:calc(.85 - var(--yacht-dusk-shade,0)*.19);
}
.sailboat>svg:not(.boat-shadow) .boat-rig{
opacity:calc(.82 - var(--yacht-dusk-shade,0)*.15)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-rig .boat-mast{
stroke:color-mix(in srgb,var(--hull-line,#839499)
calc(74% - var(--yacht-dusk-shade,0)*34%),#294653)!important;
}
.sailboat>svg:not(.boat-shadow) .boat-bootstripe{
stroke:color-mix(in srgb,#b6c4bf calc(100% - var(--yacht-dusk-shade,0)*55%),#243d48)!important;
opacity:calc(.19 + var(--surf-daylight,0)*.42 - var(--yacht-dusk-shade,0)*.13);
}
/* Optional workshop preset mode. The default random-traffic scene is untouched.
Suppress the visual output of the legacy independent traffic controllers
only while the timetable player renders its own six original ship models. */
body.freiraum-preset-mode .fishing-cutter.fairplay-54,
body.freiraum-preset-mode .harbor-cutter,
body.freiraum-preset-mode .tuemmler,
body.freiraum-preset-mode .sailboat,
body.freiraum-preset-mode .distant-freighter-light,
body.freiraum-preset-mode .distant-freighter,
body.freiraum-preset-mode :is(.boat-shadow,.fairplay-water-shadow,.harbor-water-shadow,.tuemmler-water-shadow,.seute-water-shadow){
visibility:hidden!important;
}
.freiraum-preset-layer{position:fixed;inset:0;pointer-events:none;z-index:12;overflow:hidden;isolation:isolate}
.freiraum-preset-vessel{position:absolute;left:0;top:0;display:block;transform-origin:0 0;pointer-events:none;will-change:transform}
.freiraum-preset-vessel>img,
.freiraum-preset-vessel>svg{width:100%;height:auto;display:block;overflow:visible}
.freiraum-preset-vessel[data-model="small-yacht"]>svg{aspect-ratio:1/1}
.freiraum-preset-vessel[data-model="horizon-freighter"]{filter:brightness(.52) saturate(.65)}
.freiraum-preset-vessel.is-far{filter:brightness(.55) saturate(.75)}
.freiraum-preset-label{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:80;pointer-events:none;color:#e0e7e5;background:#0b2637b8;border:1px solid #ffffff27;border-radius:999px;padding:5px 12px;font:12px/1.3 system-ui,sans-serif;white-space:nowrap}
.freiraum-preset-label[hidden]{display:none}
/* Inline yacht artwork in timetable mode retains its nautical shapes. The
original .sailboat selector does not apply to this isolated clone. */
.freiraum-preset-vessel[data-model="small-yacht"] :is(.boat-hull,.boat-deck){fill:#193b4b;stroke:#254554;stroke-width:.6}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-bootstripe{fill:none;stroke:#90aaa9;stroke-width:.5}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-cabin{fill:#758d94;stroke:#254b58;stroke-width:.55}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-cabin-window{fill:#193b49}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-cabin-roof{fill:none;stroke:#a7bbba;stroke-width:.65}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-sail{fill:#d2d5ce;stroke:#829598;stroke-width:.6}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-sail-detail{fill:none;stroke:#9ba9aa;stroke-width:.32}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-rig{fill:none;stroke:#607d87;stroke-width:.55}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-rig .boat-mast{stroke-width:1}
.freiraum-preset-vessel[data-model="small-yacht"] .boat-furled-cloth,
.freiraum-preset-vessel[data-model="small-yacht"] .nav-lights,
.freiraum-preset-vessel[data-model="small-yacht"] .anchor-signals{display:none}
/* Admin-configurable atmosphere. Defaults (fog 0, clouds 1 and all events)
leave the existing scene looking exactly as before. */
:root{--atmo-fog:0;--atmo-clouds:1}
.cloud{opacity:calc(var(--cloud-opacity,.3) * var(--atmo-clouds,1))}
.freiraum-admin-mist{
position:fixed;left:0;right:0;top:29%;height:39%;z-index:4;
pointer-events:none;opacity:var(--atmo-fog,0);
background:linear-gradient(to bottom,transparent 0%,rgba(186,201,203,.26) 32%,rgba(191,203,206,.72) 53%,rgba(183,197,201,.56) 66%,transparent 100%);
filter:blur(10px);
}
:root.atmo-no-aircraft .distant-aircraft,
:root.atmo-no-meteor .shooting-star,
:root.atmo-no-lightning .distant-lightning,
:root.atmo-no-single .solo-bird,
:root.atmo-no-single .shore-gull,
:root.atmo-no-flocks .gulls,
:root.atmo-no-flocks .side-gull-flocks,
:root.atmo-no-flocks .harbor-follow-gulls{
display:none!important;
}
/* Species-scoped wildlife rendering. Existing gull types are individually
tagged in the live controller; newly registered bird types can supply
their own form without changing these visibility rules. */
:root.atmo-no-species-herring-gull [data-bird-species="herring-gull"]{
display:none!important;
}
/* Thought visibility uses opacity rather than immediate display:none.
Preserve user-triggered transitions even when thought-only has higher
specificity in the existing theme. */
main .thought{
transition:opacity .9s ease,transform .9s ease!important;
}
main .thought.is-fading-out,
body.thought-only main .thought.is-fading-out{
opacity:0!important;transform:translateY(9px);pointer-events:none!important;
}
main .thought.custom-thought :is(.thought-addition,.quote-hint,p,a){display:none!important}
@media(prefers-reduced-motion:reduce){
main .thought{transition:none!important}
}
/* Optional Travemünde model weather: tinted atmosphere, never affecting
astronomical sun/moon calculations or harbour geometry. */
:root{--live-weather-overcast:0;--live-rain-opacity:0}
.freiraum-live-weather .coast::before{
content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg,rgba(85,96,109,.4),rgba(117,128,136,.28) 55%,transparent 77%);
opacity:var(--live-weather-overcast,0);transition:opacity 45s ease;
}
.freiraum-weather-rain{
position:fixed;inset:0;z-index:10;pointer-events:none;
opacity:var(--live-rain-opacity,0);transition:opacity 35s ease;
background-image:repeating-linear-gradient(104deg,transparent 0 13px,rgba(204,219,230,.31) 13.3px 13.8px,transparent 14.5px 29px);
background-size:140px 180px;
animation:freiraum-weather-rain-fall .9s linear infinite;
}
.freiraum-weather-rain.is-snow{
background-image:radial-gradient(circle,rgba(231,239,241,.75) 0 1px,transparent 2px);
background-size:30px 41px;
animation-duration:8s;
}
@keyframes freiraum-weather-rain-fall{to{background-position:-55px 210px}}
.freiraum-weather-status{
position:fixed;top:10px;right:14px;max-width:min(550px,calc(100vw - 28px));z-index:40;
padding:6px 11px;border-radius:10px;background:#122b39bf;border:1px solid #ffffff24;
color:#e8e9e6;font:11px/1.4 system-ui,sans-serif;text-align:right;pointer-events:none;
opacity:.72;
}
@media(max-width:650px){.freiraum-weather-status{top:8px;right:8px;font-size:10px;max-width:65vw}}
@media(prefers-reduced-motion:reduce){.freiraum-weather-rain{animation:none!important;opacity:0!important}}
/* Procedural layered cloud field. All cloud elements keep the same SVG
structure, gradient stops, light-occlusion paths and animation hooks. */
.clouds .cloud[data-cloud-type]{
opacity:calc(var(--cloud-opacity,.3) * var(--atmo-clouds,1) *
var(--cloud-variant-opacity,1));
transition:opacity 45s ease;
transform-origin:50% 80%;
background:none;
border-radius:0;
}
.clouds .cloud[data-cloud-type="cirrus"] svg{
filter:blur(1.7px);
opacity:.64;
}
.clouds .cloud[data-cloud-type="stratus"] svg{
filter:blur(2.4px);
}
.clouds .cloud[data-cloud-type="stratocumulus"] svg{
filter:blur(.9px);
}
.clouds .cloud[data-cloud-type="cumulus"] svg{
filter:blur(.6px);
}
.clouds .cloud.cloud-generated{
animation-name:freiraum-cloud-entry;
animation-timing-function:linear;
animation-iteration-count:infinite;
overflow:hidden;
contain:paint;
isolation:isolate;
}
.clouds .cloud[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
.clouds .cloud[data-cloud-type]{animation:none!important;transform:translateX(15vw)!important}
}
/* Weather presets occupy one icon in the established Freiraum toolbar.
Popover is a choice of weather, not a second settings dashboard. */
footer nav{position:relative}
footer nav .weather-presets-panel{
position:absolute;bottom:calc(100% + 12px);left:0;z-index:65;
width:min(355px,calc(100vw - 30px));max-height:min(78vh,600px);
overflow-y:auto;padding:15px;border:1px solid rgba(229,235,234,.23);
border-radius:17px;background:rgba(17,37,49,.96);
box-shadow:0 17px 48px rgba(0,13,24,.46);
color:#eff0e9;backdrop-filter:blur(16px);
}
footer nav .weather-presets-panel[hidden]{display:none!important}
footer nav .weather-presets-heading{
display:flex;align-items:center;justify-content:space-between;
gap:15px;margin-bottom:12px;font-size:15px
}
footer nav .weather-presets-heading button{
width:30px;height:30px;min-height:30px;border-radius:50%;
padding:0;line-height:1;font-size:23px
}
footer nav .weather-preset-options{display:grid;gap:8px}
footer nav .weather-preset-options button{
display:flex;align-items:center;justify-content:flex-start;gap:12px;
width:100%;height:auto;min-height:62px;border-radius:12px;
padding:10px 12px;text-align:left;background:#234050;
color:#eef0e9;border:1px solid #ffffff20
}
footer nav .weather-preset-options button[aria-pressed=true]{
background:#dfe6df;color:#1c3942;border-color:#f8e1b1
}
footer nav .weather-preset-options button>svg{width:25px;height:25px;flex-shrink:0}
footer nav .weather-preset-options button>span{
position:static;width:auto;height:auto;padding:0;margin:0;
overflow:visible;clip:auto;white-space:normal;border:0;
display:flex;flex-direction:column;gap:2px
}
footer nav .weather-preset-options button strong{font-size:13px}
footer nav .weather-preset-options button small{font-size:11px;opacity:.77}
footer nav .weather-presets-info{margin:12px 3px 0;font-size:11px;line-height:1.5;opacity:.85}
footer nav #weather-presets-toggle[aria-expanded=true]{
background:#e7d6b7;color:#183844
}
@media(max-width:600px){
footer nav .weather-presets-panel{
position:fixed;bottom:max(88px,calc(env(safe-area-inset-bottom) + 78px));
left:50%;transform:translateX(-50%)
}
}
/* A continuous low cloud ceiling, with drifting SVG silhouettes in front.
Smooth tonal variation is essential: never a uniformly painted sky. */
.clouds::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
opacity:var(--cloud-deck-opacity,0);
background:
radial-gradient(ellipse 44% 28% at 15% 18%,rgba(52,66,78,.47),transparent 80%),
radial-gradient(ellipse 67% 36% at 81% 36%,rgba(40,56,70,.34),transparent 86%),
radial-gradient(ellipse 70% 37% at 48% 74%,rgba(177,184,184,.50),transparent 85%),
linear-gradient(180deg,rgba(84,100,109,.91),rgba(139,153,159,.86) 58%,rgba(170,177,175,.33) 100%);
filter:brightness(calc(.22 + var(--overlay-daylight,0)*.78 - var(--cloud-deck-darkness,0)*.30));
background-size:140% 120%;animation:freiraum-deck-drift 280s linear infinite alternate;
transition:opacity 45s ease,filter 40s ease
}
@keyframes freiraum-deck-drift{
from{background-position:0 0}
to{background-position:55% 15%}
}
.clouds .cloud{z-index:1}
:root.freiraum-live-weather .sun{
opacity:calc(var(--sun-opacity,0) * (1 - var(--cloud-deck-opacity,0) * .87))
}
:root.freiraum-live-weather .reflection{
opacity:calc(var(--reflection-alpha,0) * (1 - var(--cloud-deck-opacity,0) * .84))
}
/* Sparse surface impacts accompany the foreground rainfall. The animation
stays separate from the ships and uses only a repeating paint texture. */
.freiraum-weather-rain::after{
content:'';position:absolute;inset:50% 0 0;pointer-events:none;
background:
radial-gradient(ellipse 7px 1.6px at 18% 31%,transparent 50%,rgba(211,226,227,.64) 66%,transparent 90%),
radial-gradient(ellipse 5px 1.3px at 64% 48%,transparent 49%,rgba(211,226,227,.55) 69%,transparent 91%),
radial-gradient(ellipse 6px 1px at 83% 78%,transparent 50%,rgba(211,226,227,.50) 68%,transparent 90%);
background-size:102px 58px;opacity:var(--live-water-rain,0);
animation:freiraum-rain-ripples 3.3s linear infinite
}
@keyframes freiraum-rain-ripples{
from{background-position:0 0}
to{background-position:55px 62px}
}
:root.freiraum-fair-weather .freiraum-weather-rain{opacity:0!important}
@media(prefers-reduced-motion:reduce){
.clouds::before,.freiraum-weather-rain::after{animation:none!important}
}
/* Weather-driven solar obscuration applies to all weather presets and live
Travemünde. Astronomical position remains untouched. */
:root{--weather-sun-visibility:1;--weather-shadow-opacity:1;--weather-sea-dimming:0}
:root:is(.freiraum-live-weather,.freiraum-rain-weather) .sun{
opacity:calc(var(--sun-opacity,1) * var(--weather-sun-visibility,1))!important;
transition:opacity 35s ease;
}
/* Preserve all per-facet light calculations under partial cloud;
only a fully opaque ceiling removes the direct-sun glitter field. */
:root.weather-sun-obscured :is(.reflection,.sun-glitter,.sun-glitter-facet,.sun-reflection){
opacity:0!important;
}
:root.weather-sun-obscured :is(
.sea>.boat-shadow,.sea>.fairplay-water-shadow,.sea>.seute-water-shadow,
.sea>.cutter-water-shadow,.sea>.buoy-shadow,.boat-shadow
){opacity:0!important}
:root:is(.freiraum-live-weather,.freiraum-rain-weather) .sea{
filter:brightness(calc(1 - var(--weather-sea-dimming,0) * .44))
saturate(calc(1 - var(--weather-sea-dimming,0) * .48));
transition:filter 45s ease;
}
:root.freiraum-rain-weather .clouds::before{opacity:var(--cloud-deck-opacity,.98)}
:root.freiraum-rain-weather .freiraum-weather-rain{
opacity:var(--live-rain-opacity,.72)
}
/* Rain is not a wallpaper of individual diagonals. Three irregular, soft
precipitation curtains drift at different speeds and depths. */
.freiraum-weather-rain{
background:none!important;
opacity:1!important;
overflow:hidden;
}
.freiraum-weather-rain::before{
content:'';position:absolute;inset:-18% -27%;pointer-events:none;
background:
radial-gradient(ellipse 14% 73% at 9% 32%,rgba(196,207,210,.27),transparent 83%),
radial-gradient(ellipse 22% 83% at 32% 40%,rgba(169,185,194,.31),transparent 82%),
radial-gradient(ellipse 11% 65% at 63% 57%,rgba(210,219,219,.22),transparent 86%),
radial-gradient(ellipse 21% 89% at 88% 29%,rgba(162,177,188,.27),transparent 80%);
background-size:130% 100%;
opacity:calc(var(--live-rain-opacity,0) * 1.15);
filter:blur(28px);
transform:skewX(var(--weather-rain-wind-angle,-13deg));
animation:freiraum-rain-curtains 15s ease-in-out infinite alternate;
will-change:transform;
transition:opacity 14s ease;
}
@keyframes freiraum-rain-curtains{
0%{transform:translateX(-3%) skewX(var(--weather-rain-wind-angle,-13deg)) scaleX(1)}
37%{transform:translateX(2%) skewX(var(--weather-rain-wind-angle,-13deg)) scaleX(1.05)}
100%{transform:translateX(8%) skewX(var(--weather-rain-wind-angle,-13deg)) scaleX(.95)}
}
/* Ripples are small, submerged water texture rather than bright isolated
drop outlines. Old transparent diagonal lines are entirely removed. */
.freiraum-weather-rain::after{
inset:52% 0 0;
background:
radial-gradient(ellipse 5px 1px at 17% 26%,rgba(192,211,215,.14),transparent 80%),
radial-gradient(ellipse 4px 1px at 62% 78%,rgba(184,203,208,.10),transparent 80%);
background-size:110px 88px;
opacity:calc(var(--live-water-rain,0) * .55);
filter:blur(.7px);
}
/* Visibility range controls loss of distant contrast, not an evenly opaque
foreground screen. At high visibility opacity tends toward zero. */
.freiraum-weather-distance-haze{
position:fixed;inset:31% 0 auto;height:39%;z-index:7;
pointer-events:none;
background:
linear-gradient(to bottom,transparent 0%,rgba(158,169,175,.22) 21%,
rgba(168,177,183,.80) 49%,rgba(172,182,187,.40) 61%,transparent 100%);
opacity:var(--weather-visibility-strength,0);
filter:blur(20px) saturate(.8);
transition:opacity 45s ease;
}
/* Snow remains a distinct precipitation type when returned by weather data. */
.freiraum-weather-rain.is-snow{
background-image:radial-gradient(circle,rgba(232,239,242,.65) 0 1px,transparent 2px)!important;
background-size:31px 43px;
opacity:var(--live-rain-opacity,0)!important;
}
.freiraum-weather-rain.is-snow::before{display:none}
:root.freiraum-fair-weather .freiraum-weather-distance-haze{
opacity:0!important;
}
@media(prefers-reduced-motion:reduce){
.freiraum-weather-rain::before{animation:none!important}
}
/* Low visibility removes colour at the horizon before foreground contrast.
Atmospheric scattering must also become dark during night scenes. */
.freiraum-weather-distance-haze{
filter:blur(20px) saturate(.72)
brightness(calc(.16 + var(--overlay-daylight,0) * .84));
}
:root.freiraum-rain-weather .sky{
filter:saturate(.28) brightness(.78);
}
:root.freiraum-live-weather .sky{
filter:saturate(calc(1 - var(--cloud-deck-opacity,0) * .68))
brightness(calc(1 - var(--cloud-deck-opacity,0) * .17));
transition:filter 45s ease;
}
/* 2026-11-05: remove circular gradient contours reported on the display.
Clouds and showers should read as broad irregular bands, never spotlights
or large ellipse edges. The geographic visibility veil is retained. */
.clouds::before{
background:
linear-gradient(167deg,transparent 0%,rgba(47,61,72,.15) 17%,
rgba(63,77,88,.23) 31%,transparent 49%),
linear-gradient(13deg,transparent 9%,rgba(37,54,68,.17) 30%,
rgba(114,127,132,.22) 54%,transparent 79%),
linear-gradient(180deg,rgba(74,91,103,.86) 0%,
rgba(128,141,151,.84) 53%,rgba(168,175,175,.27) 100%);
background-size:150% 125%;
}
.freiraum-weather-rain::before{
background:
linear-gradient(100deg,transparent 0%,rgba(193,207,213,.10) 14%,
rgba(175,190,201,.19) 22%,transparent 37%),
linear-gradient(104deg,transparent 13%,rgba(206,217,220,.13) 35%,
transparent 56%,rgba(169,186,195,.16) 78%,transparent 96%),
linear-gradient(94deg,rgba(163,181,190,.045),transparent 42%,
rgba(197,208,213,.08) 70%,transparent);
background-size:145% 100%;
filter:blur(24px);
}
.freiraum-weather-rain::after{
background:
repeating-linear-gradient(173deg,transparent 0 27px,
rgba(196,213,217,.045) 28px 29px,transparent 30px 63px);
background-size:160px 110px;
filter:blur(2px);
}