/* Sea life, dive flag and depth gauge. Decorative only; honours prefers-reduced-motion. */
.kx-flag-ico{width:30px;height:22px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));transform-origin:left center;animation:kx-wave-flag 3.2s ease-in-out infinite}
@keyframes kx-wave-flag{0%,100%{transform:skewY(0) rotate(0)}50%{transform:skewY(-3deg) rotate(-1.5deg)}}
.kx-bk-kicker::before{display:none!important}

/* swimmers */
.kx-swim{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.kx-turtle{position:absolute;width:150px;height:auto;top:46%;left:-200px;animation:kx-cruise 38s linear infinite,kx-bob 5s ease-in-out infinite;opacity:.95;filter:drop-shadow(0 10px 14px rgba(0,0,0,.3))}
.kx-turtle .fl{transform-box:fill-box;animation:kx-flap 1.6s ease-in-out infinite}
.kx-turtle .fl-1{transform-origin:100% 100%}.kx-turtle .fl-2{transform-origin:100% 0;animation-delay:-.8s}
.kx-turtle .fl-3{transform-origin:100% 100%;animation-delay:-.4s}.kx-turtle .fl-4{transform-origin:100% 0;animation-delay:-1.2s}
@keyframes kx-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes kx-cruise{from{left:-200px}to{left:calc(100% + 200px)}}
@keyframes kx-bob{0%,100%{margin-top:0}50%{margin-top:-18px}}
.kx-school{position:absolute;top:18%;left:-120px;width:130px;height:70px;pointer-events:none;animation:kx-cruise 52s linear infinite;animation-delay:-18s;z-index:1}
.kx-school .f{position:absolute;display:block;animation:kx-bob 3.4s ease-in-out infinite}
.kx-school .f1{left:0;top:6px}.kx-school .f2{left:34px;top:30px;animation-delay:-1s}.kx-school .f3{left:62px;top:2px;animation-delay:-2s}.kx-school .f4{left:84px;top:34px;animation-delay:-.5s}.kx-school .f5{left:104px;top:14px;animation-delay:-1.6s}
.kx-fish{width:30px;height:auto;display:block}
.kx-manta{position:absolute;width:210px;height:auto;right:6%;bottom:18%;opacity:.28;animation:kx-glide 14s ease-in-out infinite;pointer-events:none}
.kx-manta .wing{transform-box:fill-box;transform-origin:50% 50%;animation:kx-wingbeat 4s ease-in-out infinite}
@keyframes kx-wingbeat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes kx-glide{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-16px)}}
.kx-pagehead{overflow:hidden}
.kx-pagehead .kx-wrap{position:relative;z-index:2}
.kx-pagehead .kx-school{top:12%;animation-duration:60s}
.kx-ph-manta{bottom:6%}
.kx-hero .kx-swim .kx-turtle{top:78%;width:130px}
.kx-hero .kx-school{top:12%}
.kx-bk-hero .kx-turtle{top:76%;width:120px;opacity:.85}
.kx-bk-hero .kx-school{top:8%}
.kx-jelly{position:absolute;width:44px;height:auto;animation:kx-drift 9s ease-in-out infinite;pointer-events:none;opacity:.9;filter:drop-shadow(0 0 12px rgba(107,222,216,.6))}
.kx-jelly .bell{transform-box:fill-box;transform-origin:50% 0;animation:kx-pulse 2.4s ease-in-out infinite}
@keyframes kx-pulse{0%,100%{transform:scale(1,1)}50%{transform:scale(1.14,.82)}}
@keyframes kx-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-26px)}}
.kx-bk-jelly{right:9%;top:22%;z-index:1}
.kx-cta{overflow:hidden}
.kx-cta .kx-cta-in{position:relative;z-index:2}
.kx-cta-jelly{right:6%;top:16%;opacity:.8}
.kx-cta-fish{position:absolute;width:34px;left:-60px;bottom:22%;animation:kx-cruise 26s linear infinite;opacity:.85}

/* kelp on the footer */
.kx-footer{position:relative;padding-top:92px}
.kx-kelp{position:absolute;left:0;top:-1px;width:100%;height:56px;display:block;transform:translateY(-100%);pointer-events:none}
.kx-kelp .k{transform-box:fill-box;transform-origin:50% 100%;animation:kx-sway 5s ease-in-out infinite}
.kx-kelp .k1{animation-delay:-1s}.kx-kelp .k2{animation-delay:-2.2s}.kx-kelp .k3{animation-delay:-3.4s}
@keyframes kx-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.kx-footer .kx-wrap{position:relative;z-index:1}

/* dive-log accents */
.kx-act-ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--deep);color:#6BDED8;margin-right:12px;vertical-align:-12px;border:2px solid #6BDED8}
.kx-act-ico svg{width:24px;height:24px}
.kx-head h2{position:relative}
.kx-head h2::after{content:"";display:block;width:64px;height:8px;margin-top:14px;background:linear-gradient(90deg,#0E9F9C,#6BDED8);border-radius:2px}
.kx-head[style*="center"] h2::after,.kx-head.kx-center h2::after{margin-inline:auto}
.kx-lead{max-width:44rem}

/* depth gauge: shows a fake depth as you scroll */
.kx-gauge{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:30;display:none;flex-direction:column;align-items:center;gap:6px;pointer-events:none;font-family:var(--display)}
.kx-gauge-bar{width:6px;height:180px;border-radius:6px;background:rgba(4,28,43,.35);overflow:hidden;border:1px solid rgba(255,255,255,.4)}
.kx-gauge-bar i{display:block;width:100%;height:0;background:linear-gradient(#6BDED8,#D8343B);transition:height .15s linear}
.kx-gauge b{background:#041C2B;color:#6BDED8;font-size:.78rem;padding:4px 8px;border-radius:8px;border:1px solid #6BDED8;min-width:46px;text-align:center}
@media (min-width:1360px){.kx-gauge{display:flex}}
@media (prefers-reduced-motion:reduce){.kx-turtle,.kx-turtle .fl,.kx-school,.kx-school .f,.kx-manta,.kx-manta .wing,.kx-jelly,.kx-jelly .bell,.kx-cta-fish,.kx-kelp .k,.kx-flag-ico{animation:none!important}.kx-turtle{left:62%}.kx-school{left:10%}.kx-cta-fish{left:20%}}
@media (max-width:700px){.kx-turtle{width:100px!important}.kx-manta{width:130px}.kx-school{transform:scale(.8)}}
.kx-hero-text{position:relative;z-index:2}.kx-hero-art{z-index:0}

/* roaming layer */
.kx-roam{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.kx-critter{position:absolute;left:0;top:0;will-change:transform;opacity:.85;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.kx-critter svg{width:100%;height:auto;display:block;position:static!important;animation:none;margin:0;opacity:1;filter:none}
.kx-critter .fl{transform-box:fill-box;animation:kx-flap 1.6s ease-in-out infinite}
.kx-critter .fl-1,.kx-critter .fl-3{transform-origin:100% 100%}.kx-critter .fl-2,.kx-critter .fl-4{transform-origin:100% 0;animation-delay:-.8s}
.kx-ray .wing{transform-box:fill-box;transform-origin:50% 50%;animation:kx-wingbeat 2.6s ease-in-out infinite}
.kx-puffer .pf{transform-box:fill-box;transform-origin:50% 50%;animation:kx-inflate 7s ease-in-out infinite}
@keyframes kx-inflate{0%,70%,100%{transform:scale(1)}78%,90%{transform:scale(1.28)}}
.kx-puffer .fin{transform-box:fill-box;transform-origin:0 50%;animation:kx-flap .5s ease-in-out infinite}
.kx-clam .zap{animation:kx-zap 1.1s steps(2,end) infinite}
.kx-clam .fringe{animation:kx-sway 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes kx-zap{0%{opacity:1}30%{opacity:.15}55%{opacity:1}75%{opacity:.35}100%{opacity:1}}
/* page-head residents (replace the old manta) */
.kx-ph-ray,.kx-ph-puffer,.kx-ph-clam{position:absolute;pointer-events:none;z-index:1}
.kx-ph-ray{width:190px;right:5%;bottom:14%;opacity:.9;animation:kx-glide 16s ease-in-out infinite}
.kx-ph-ray .wing{transform-box:fill-box;transform-origin:50% 50%;animation:kx-wingbeat 3s ease-in-out infinite}
.kx-ph-puffer{width:90px;right:8%;bottom:20%;animation:kx-glide 9s ease-in-out infinite}
.kx-ph-puffer .pf{transform-box:fill-box;transform-origin:50% 50%;animation:kx-inflate 7s ease-in-out infinite}
.kx-ph-clam{width:100px;right:7%;bottom:-2px}
.kx-ph-clam .zap,.kx-cta-clam .zap{animation:kx-zap 1.1s steps(2,end) infinite}
.kx-cta-clam{position:absolute;width:90px;left:5%;bottom:-2px;pointer-events:none;z-index:1}
.kx-ph-manta,.kx-cta-fish,.kx-swim,.kx-school{display:none!important}
@media (max-width:700px){.kx-ph-ray{width:120px;bottom:auto;top:10px}.kx-ph-puffer{width:64px;bottom:auto;top:12px}.kx-ph-clam{width:70px}.kx-cta-clam{width:64px}}
@media (prefers-reduced-motion:reduce){.kx-roam{display:none}.kx-ph-ray,.kx-ph-puffer,.kx-ray .wing,.kx-ph-ray .wing,.kx-pf,.kx-clam .zap,.kx-clam .fringe{animation:none!important}}

.kx-ray .tail{transform-box:fill-box;transform-origin:100% 50%;animation:kx-tail 2.2s ease-in-out infinite}
@keyframes kx-tail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}

.kx-diver .leg{transform-box:view-box;transform-origin:70px 45px;animation:kx-kick 1.1s ease-in-out infinite}
.kx-diver .l2{animation-delay:-.55s}
@keyframes kx-kick{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.kx-diver .arm{transform-box:view-box;transform-origin:128px 44px;animation:kx-armsw 2.2s ease-in-out infinite}
@keyframes kx-armsw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.kx-diver .leg,.kx-diver .arm{animation:none!important}}
/* header residents: jelly + electric clam (static position, own gentle animation) */
.kx-pagehead .kx-ph-jelly{right:14%;top:18%;z-index:1;width:46px}
.kx-ph-clam{width:96px;right:6%;bottom:-2px}
.kx-wall-2{grid-template-columns:repeat(2,1fr)}body.kx .kx-wall-2 img{aspect-ratio:16/10}@media (max-width:700px){.kx-wall-2{grid-template-columns:1fr}}

/* descent on small screens: depth rail, tint and bubbles follow the scroll */
.kx-bubs{display:none}
@media (max-width:1359px){
  .kx-gauge{display:flex;left:auto;right:7px;gap:5px;align-items:flex-end}
  .kx-gauge-bar{width:5px;height:min(34vh,240px);background:rgba(4,28,43,.28);border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(4,28,43,.2)}
  .kx-gauge b{position:absolute;right:12px;top:-30px;font-size:.72rem;padding:3px 8px;min-width:0;white-space:nowrap;opacity:0;transition:opacity .25s}
  .kx-gauge.on b{opacity:1}
}
@media (max-width:860px){
  html{--d:0}
  body.kx:not(.kx-book)::after{content:"";position:fixed;inset:0;z-index:24;pointer-events:none;background:linear-gradient(180deg,rgba(14,159,156,calc(var(--d)*.04)) 0%,rgba(6,60,95,calc(var(--d)*.11)) 100%)}
  .kx-bubs{display:block;position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
  .kx-bubs i{position:absolute;top:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(107,222,216,.12));box-shadow:0 0 6px rgba(107,222,216,.5);will-change:transform;opacity:.55}
}
@media (prefers-reduced-motion:reduce){.kx-bubs{display:none!important}body.kx::after{display:none!important}}