/* ZDeck - ship home page effects: the dive from the surface scene into the underwater scene, bubbles, crossing band.
   Scroll-linked values from fx.js: the surface stage's transform and the fog's opacity on the first screen, --lens on
   .deep (0..1, peaks while the meniscus passes the middle of the screen) and --dive on #stageSea (0 while the sea
   scene is below the fold, 1 fully under). Transforms and opacity only, apart from one static SVG ripple filter on the
   crossing strip (.first__refr). */

/* Per-theme tints */
:root,html[data-theme="mavi"]{ --fx-rgb:2,22,56; --ray-rgb:190,235,255; --foam:#e8f8ff; --fog-rgb:6,52,104 }
html[data-theme="matrix"]{ --fx-rgb:0,16,6; --ray-rgb:170,255,205; --foam:#dcffe9; --fog-rgb:2,30,20 }
/* Under the surface, from the meniscus down: its bright underside, then the water deepening toward the picture's own
   colours (--uw-3 is the water around the underwater picture's hull strip) */
:root,html[data-theme="mavi"]{ --uw-0:150,214,240; --uw-1:28,112,178; --uw-2:12,70,130; --uw-3:6,38,78; --uw-glow:.34; --caus-a:.4 }
html[data-theme="matrix"]{ --uw-0:110,230,170; --uw-1:8,74,50; --uw-2:4,46,32; --uw-3:2,24,17; --uw-glow:.2; --caus-a:.3 }

/* ---------- First screen: caption over the sea, the dive fog and the refraction strip at the meniscus ---------- */
.drop{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(40px,8svh,90px) 16px clamp(66px,9svh,104px);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--fx-rgb),.38) 55%,rgba(var(--fx-rgb),.55))}
.drop .first__line{position:relative;pointer-events:auto;text-shadow:0 1px 2px rgba(var(--fx-rgb),.9),0 1px 14px rgba(var(--fx-rgb),.95)}
/* The camera tilts down and sinks: the sea darkens toward the deep blue of the band below, strongest at the bottom */
.first__fog{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;will-change:opacity;
  background:linear-gradient(180deg,rgba(var(--fog-rgb),.15) 0,rgba(var(--fog-rgb),.5) 45%,rgba(var(--uw-1),.82) 88%,rgb(var(--uw-0)) 100%)}
/* The bottom of the first screen: the sea seen from above dissolves into the colour of the water just under the
   meniscus, so the two sides of the line meet without a seam */
.first::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--uw-1),0),rgba(var(--uw-1),.35) 55%,rgba(var(--uw-1),.85) 92%,rgb(var(--uw-1)))}
/* Just above the meniscus the surface is seen at a grazing angle: rippled, brighter, refracting the sea behind */
.first__refr{position:absolute;left:-2%;right:-2%;bottom:0;height:clamp(40px,7vh,72px);z-index:1;pointer-events:none;opacity:.55;
  background:linear-gradient(180deg,transparent 15%,rgba(var(--uw-0),.35) 75%,rgba(var(--uw-0),.6)),url(sea-mavi.webp) 50% 100%/104vw auto repeat-x;
  filter:url(#surfRipple);-webkit-mask-image:linear-gradient(0deg,#000 25%,transparent);mask-image:linear-gradient(0deg,#000 25%,transparent)}
html[data-theme="matrix"] .first__refr{background-image:linear-gradient(180deg,transparent 15%,rgba(var(--uw-0),.25) 75%,rgba(var(--uw-0),.45)),url(sea-matrix.webp)}
.fx-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- The waterline crossing (.surf at the top of .deep): meniscus, the underside of the surface ----------
   The band of open water under the meniscus is only --band tall (ship.css); the surface layer lies over the top of the
   underwater picture and dissolves into it through its mask, so the hull strip comes up through the caustics and the
   rays with no seam. It takes no pointer events: the hotspots of the picture work through it. */
.surf{position:absolute;left:0;right:0;top:0;height:calc(var(--band) + 9vw);overflow:hidden;pointer-events:none;z-index:2;
  background:radial-gradient(38% 60% at 72% 0,rgba(var(--uw-0),var(--uw-glow)),transparent 70%),radial-gradient(30% 45% at 24% 0,rgba(var(--uw-0),calc(var(--uw-glow)*.6)),transparent 70%),linear-gradient(180deg,rgb(var(--uw-1)) 0,rgb(var(--uw-1)) 10%,rgb(var(--uw-2)) 55%,rgb(var(--uw-3)) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--band),rgba(0,0,0,.72) calc(var(--band) + 2.5vw),rgba(0,0,0,.3) calc(var(--band) + 5.5vw),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 var(--band),rgba(0,0,0,.72) calc(var(--band) + 2.5vw),rgba(0,0,0,.3) calc(var(--band) + 5.5vw),transparent 100%)}
.surf>*{position:absolute;pointer-events:none}
/* Just under the meniscus the surface is a mirror: the waves above, upside down, squeezed */
.surf__mirror{left:0;right:0;top:0;height:clamp(40px,7vh,84px);opacity:.28;
  background:url(sea-mavi.webp) 50% 100%/104vw 230px repeat-x;transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.5) 45%,transparent);mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.5) 45%,transparent)}
html[data-theme="matrix"] .surf__mirror{background-image:url(sea-matrix.webp);opacity:.32}
/* Caustics: two pre-baked webs drifting against each other; plain backgrounds on composited layers */
.surf__caus{left:-14%;top:0;width:128%;height:calc(var(--band) + 7vw);opacity:var(--caus-a);will-change:transform;
  background:url(caustics-a.webp) 0 0/auto 100% repeat-x;animation:caus-a 26s ease-in-out infinite alternate paused}
.surf__caus--b{opacity:calc(var(--caus-a)*.75);background-image:url(caustics-b.webp);height:calc(var(--band) + 9vw);animation-name:caus-b;animation-duration:33s}
@keyframes caus-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-9%,4px,0)}}
@keyframes caus-b{from{transform:translate3d(-8%,3px,0)}to{transform:translate3d(3%,-2px,0)}}
/* Light shafts from the surface (static) */
.surf__rays{left:-10%;right:-10%;top:0;bottom:0;
  background:repeating-linear-gradient(101deg,transparent 0 4.5%,rgba(var(--ray-rgb),.12) 6.5%,transparent 9.5%,transparent 13%,rgba(var(--ray-rgb),.07) 15%,transparent 18%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 35%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 35%,transparent 80%)}
/* Matrix: binary rain falls through the band below the meniscus, as it does in the underwater picture */
html[data-theme="matrix"] .surf::after{content:"";position:absolute;left:0;right:0;top:-640px;height:calc(100% + 640px);pointer-events:none;opacity:.42;will-change:transform;
  background:url(matrix-rain.webp) 0 0/480px 640px repeat;animation:rain 24s linear infinite paused}
html[data-theme="matrix"] .deep.is-live .surf::after{animation-play-state:running}
@keyframes rain{to{transform:translate3d(0,640px,0)}}
/* Bubbles rising to the surface and vanishing at the meniscus */
.surf__bub{left:0;right:0;top:0;height:calc(var(--band) + 7vw);container-type:size}
.surf__bub b{position:absolute;bottom:0;left:var(--x);width:var(--s);aspect-ratio:1;border-radius:50%;opacity:0;
  border:1px solid rgba(255,255,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.65),rgba(255,255,255,.1) 62%,transparent);
  animation:surf-bub var(--d) cubic-bezier(.45,.1,.75,.9) var(--dl) infinite paused}
@keyframes surf-bub{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.75}88%{opacity:.7}100%{transform:translate3d(var(--dr),calc(-100cqh + 6px),0) scale(1.15);opacity:0}}
/* The meniscus: the surface seen edge-on, a wavering bright line over a thin dark band; the waves slide along it.
   .surf__lip fills under the wave with the underside colour; 8 waves over 200%. */
.surf__wave{position:absolute;left:0;top:-12px;width:200%;height:24px;z-index:2;pointer-events:none;will-change:transform;animation:menis 22s linear infinite paused}
.surf__lip{display:none}
.surf__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.surf__line path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.surf__dark{stroke:rgba(var(--fx-rgb),.45);stroke-width:5;transform:translateY(3px)}
.surf__glow{stroke:rgba(var(--uw-0),.6);stroke-width:9;filter:blur(4px)}
.surf__edge{stroke:rgba(246,253,255,.95);stroke-width:1.8}
@keyframes menis{to{transform:translate3d(-50%,0,0)}}
.deep.is-live .surf>*,.deep.is-live .surf__bub b,.deep.is-live .surf__wave{animation-play-state:running}

/* ---------- Lens: the camera crossing the surface. Sticky from the meniscus down, so it only ever covers the part of
   the screen that is under water; it shows only while --lens is up. Edge blur only in the full tier. ---------- */
.lens{position:sticky;top:0;z-index:4;height:100vh;margin:calc(-1*var(--band)) 0 calc(var(--band) - 100vh);pointer-events:none;opacity:var(--lens,0)}
.lens::before,.lens::after{content:"";position:absolute;inset:0}
.lens::after{background:radial-gradient(110% 90% at 50% 18%,transparent 42%,rgba(var(--fx-rgb),.75) 100%),
  linear-gradient(180deg,rgba(var(--uw-0),.55) 0,rgba(var(--uw-0),.2) 9%,rgba(var(--uw-1),.12) 30%,transparent 55%)}
html[data-fx="full"].is-crossing .lens::before{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:radial-gradient(115% 100% at 50% 30%,transparent 45%,#000 95%);mask-image:radial-gradient(115% 100% at 50% 30%,transparent 45%,#000 95%)}

/* ---------- Under the surface: the camera settles (scale, slow drift of the backdrop), the depth tint deepens,
   the shafts fade, bubbles rise ---------- */
.sea__pan{transform:translate3d(0,calc((1 - var(--dive,1))*-2.5%),0) scale(calc(1 + .04*(1 - var(--dive,1))));will-change:transform}
.sea__fx,.sea__fx>*{position:absolute;inset:0;pointer-events:none}
.sea__tint{opacity:calc(var(--dive,0)*.7);will-change:opacity;
  background:radial-gradient(125% 95% at 50% 32%,transparent 50%,rgba(var(--fx-rgb),.55) 100%)}
.sea__rays{opacity:calc(.9 - var(--dive,0)*.6);will-change:opacity;
  background:repeating-linear-gradient(104deg,transparent 0 5.5%,rgba(var(--ray-rgb),.1) 8%,transparent 11%);
  -webkit-mask-image:linear-gradient(180deg,transparent 12%,#000 22%,transparent 62%);mask-image:linear-gradient(180deg,transparent 12%,#000 22%,transparent 62%)}
.bubbles{opacity:min(1,calc(var(--dive,0)*1.7))}
.bubbles b{position:absolute;bottom:4cqw;left:var(--x);width:var(--s);aspect-ratio:1;border-radius:50%;opacity:0;
  border:1px solid rgba(255,255,255,.5);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 62%,transparent);
  animation:bubble var(--d) linear var(--dl) infinite paused}
.stage--sea.is-live .bubbles b{animation-play-state:running}
@keyframes bubble{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.8}85%{opacity:.6}100%{transform:translate3d(var(--dr),-40cqw,0);opacity:0}}

/* ---------- Living surface: soft glints come and go on the foam along the hull (see buildSurface in fx.js) ---------- */
.air__live{position:absolute;inset:0;pointer-events:none}
.glint{position:absolute;border-radius:50%;opacity:0;transform:rotate(var(--a));
  background:radial-gradient(closest-side,rgba(var(--ray-rgb),.75),rgba(var(--ray-rgb),.25) 55%,transparent);
  animation:glint var(--d) ease-in-out var(--dl) infinite paused}
@keyframes glint{0%,100%{opacity:0}50%{opacity:var(--o,.45)}}
.stage--air.is-live .glint{animation-play-state:running}

/* ---------- Dive cue: a small pill fixed to the bottom of the first screen; fades out once the visitor scrolls ---------- */
.cue{display:none}
@media (min-width:860px){
  .cue{position:fixed;left:50%;bottom:clamp(14px,2.6vh,28px);z-index:6;display:inline-flex;align-items:center;gap:.7em;
    padding:.62em 1.15em .6em 1.3em;border:1px solid var(--line);border-radius:999px;background:rgba(var(--bg-rgb),.5);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.25);
    color:var(--text);text-decoration:none;font:600 12px/1 var(--font-h);letter-spacing:.22em;text-transform:uppercase;
    transform:translateX(-50%);transition:opacity .45s,transform .45s,border-color .25s}
  .cue[hidden]{display:none}
  .cue:hover,.cue:focus-visible{border-color:var(--cyan)}
  .cue.is-gone{opacity:0;transform:translate(-50%,10px);pointer-events:none}
  .cue.is-gone:focus-visible{opacity:1;transform:translateX(-50%);pointer-events:auto}
  /* Short screens: beside the caption (fx.js sets --cue-x / --cue-y from the caption's text box) */
  .cue--side{left:var(--cue-x);top:var(--cue-y);bottom:auto;transform:translateY(-50%)}
  .cue--side.is-gone{transform:translateY(calc(-50% + 10px))}
  .cue--side.is-gone:focus-visible{transform:translateY(-50%)}
}
.cue__chev{width:11px;height:8px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:cue-nudge 2.4s ease-in-out infinite}
@keyframes cue-nudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
.cue__bub{position:absolute;left:50%;bottom:100%;width:26px;height:30px;margin-left:-13px;pointer-events:none}
.cue__bub i{position:absolute;bottom:0;width:5px;aspect-ratio:1;border-radius:50%;opacity:0;
  border:1px solid rgba(var(--ray-rgb),.7);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.6),transparent 70%);
  animation:cue-bub 3s ease-out infinite}
.cue__bub i:nth-child(1){left:6px}
.cue__bub i:nth-child(2){left:14px;width:4px;animation-delay:1s}
.cue__bub i:nth-child(3){left:10px;width:3px;animation-delay:2s}
@keyframes cue-bub{0%{transform:translate3d(0,4px,0);opacity:0}20%{opacity:.9}100%{transform:translate3d(2px,-24px,0);opacity:0}}
.cue.is-gone .cue__chev,.cue.is-gone .cue__bub i{animation-play-state:paused}

/* ---------- Lite tier, chosen by the frame-rate governor in fx.js on slow machines ---------- */
html[data-fx="lite"] .bubbles b:nth-child(n+13),html[data-fx="lite"] .surf__bub b:nth-child(n+7),html[data-fx="lite"] .air__live,
html[data-fx="lite"] .surf__caus--b,html[data-fx="lite"] .first__refr{display:none}
html[data-fx="lite"] .surf__caus,html[data-fx="lite"] .surf::after,html[data-fx="lite"] .life__sway{animation:none}

/* Reduced motion: everything here is static, the creatures hold still, no scroll-linked camera */
@media (prefers-reduced-motion:reduce){
  .sea__rays,.bubbles,.surf__bub,.lens,.first__fog{display:none}
  .surf>*,.surf__wave,.surf::after,.life__sway{animation:none}
  .air__live,.cue__bub,.cue__chev{display:none}
  .cue{transition:none}
  .sea__pan,.life{transform:none;will-change:auto}
  .life__sway{will-change:auto}
  .first .stage{will-change:auto}
  .hangar__door{transition:opacity .2s linear}
  .hs--hangar:hover .hangar__door,.hs--hangar:focus-visible .hangar__door,.hs--hangar.is-armed .hangar__door{transform:none;opacity:0}
}