/* ---- theme layers: only the active theme's layers are displayed, so the others cost nothing ---- */
.th-reef,.th-forest{display:none}
html[data-theme="reef"] .th-reef,html[data-theme="forest"] .th-forest{display:block}
html[data-theme="midnight"] #sea{display:none}
#sea{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* reef */
#bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#bubbles i{position:absolute;bottom:-30px;left:var(--x);width:var(--sz);height:var(--sz);border-radius:50%;border:1px solid rgba(160,230,255,.35);background:radial-gradient(circle at 30% 30%,rgba(200,245,255,.28),rgba(200,245,255,0) 60%);animation:rise var(--t) linear var(--d) infinite}
@keyframes rise{from{transform:translateY(0) translateX(0)}50%{transform:translateY(-55vh) translateX(14px)}to{transform:translateY(-115vh) translateX(-8px)}}
#bubbles::before{content:"";position:absolute;inset:-10% -20% 20%;background:repeating-linear-gradient(104deg,transparent 0 120px,rgba(120,210,240,.07) 150px,transparent 210px 330px);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);animation:sway 16s ease-in-out infinite alternate}
@keyframes sway{from{transform:translateX(-40px) skewX(-3deg)}to{transform:translateX(40px) skewX(3deg)}}
#bubbles::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,4,8,.7) 100%),linear-gradient(180deg,transparent 55%,rgba(0,3,6,.6))}
.fish{position:absolute;left:0;top:var(--y);color:var(--fc);opacity:var(--o,.6);animation:swimL var(--t) linear var(--d) infinite;pointer-events:none}
.fish.r{animation-name:swimR}
.fish svg{display:block;width:calc(60px*var(--s));height:auto;animation:bob 5s ease-in-out infinite alternate}
.fish.r svg{transform:scaleX(-1)}
.fish .tail{transform-box:fill-box;transform-origin:0 50%;animation:wag .55s ease-in-out infinite alternate}
@keyframes swimL{from{transform:translateX(calc(100vw + 160px))}to{transform:translateX(-200px)}}
@keyframes swimR{from{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 160px))}}
@keyframes bob{from{translate:0 -8px}to{translate:0 10px}}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* forest */
.moon{position:absolute;top:calc(var(--barh) + 28px);right:12%;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F7FBE9,#D6E4C4 70%,#B9CDAA);box-shadow:0 0 60px 20px rgba(200,235,190,.22),0 0 160px 60px rgba(140,255,107,.07);opacity:.9;pointer-events:none}
.trees{position:absolute;left:0;right:0;bottom:0;background-repeat:repeat-x;background-position:0 100%;pointer-events:none}
.trees.far{height:42%;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22260%22%20viewBox%3D%220%200%20900%20260%22%3E%3Cpath%20d%3D%22M-53%20260%20L-27%20204%20L-38%20204%20L-20%20157%20L-29%20157%20L-7%20101%20L15%20157%20L6%20157%20L24%20204%20L13%20204%20L38%20260ZM24%20260%20L47%20190%20L37%20190%20L53%20131%20L45%20131%20L64%2061%20L83%20131%20L76%20131%20L91%20190%20L82%20190%20L104%20260ZM112%20260%20L131%20191%20L123%20191%20L136%20133%20L129%20133%20L146%2064%20L162%20133%20L155%20133%20L168%20191%20L160%20191%20L179%20260ZM208%20260%20L228%20207%20L219%20207%20L233%20162%20L226%20162%20L243%20110%20L259%20162%20L252%20162%20L266%20207%20L258%20207%20L277%20260ZM289%20260%20L309%20180%20L300%20180%20L314%20111%20L307%20111%20L324%2031%20L341%20111%20L334%20111%20L348%20180%20L340%20180%20L359%20260ZM346%20260%20L375%20187%20L363%20187%20L383%20125%20L373%20125%20L398%2052%20L422%20125%20L412%20125%20L433%20187%20L420%20187%20L449%20260ZM442%20260%20L471%20196%20L459%20196%20L480%20140%20L469%20140%20L494%2076%20L519%20140%20L509%20140%20L529%20196%20L517%20196%20L546%20260ZM516%20260%20L537%20179%20L528%20179%20L543%20109%20L536%20109%20L554%2028%20L573%20109%20L565%20109%20L580%20179%20L571%20179%20L593%20260ZM601%20260%20L623%20206%20L614%20206%20L629%20159%20L621%20159%20L640%20105%20L659%20159%20L651%20159%20L666%20206%20L657%20206%20L679%20260ZM705%20260%20L730%20203%20L719%20203%20L737%20155%20L728%20155%20L749%2098%20L770%20155%20L762%20155%20L779%20203%20L769%20203%20L793%20260ZM780%20260%20L805%20196%20L794%20196%20L812%20142%20L803%20142%20L824%2078%20L845%20142%20L836%20142%20L853%20196%20L843%20196%20L867%20260Z%22%20fill%3D%22%230B1A12%22/%3E%3Crect%20y%3D%22259%22%20width%3D%22900%22%20height%3D%222%22%20fill%3D%22%230B1A12%22/%3E%3C/svg%3E');background-size:auto 100%;opacity:.9}
.trees.near{height:30%;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22300%22%20viewBox%3D%220%200%20900%20300%22%3E%3Cpath%20d%3D%22M-86%20300%20L-54%20225%20L-67%20225%20L-44%20160%20L-56%20160%20L-28%2085%20L-0%20160%20L-12%20160%20L11%20225%20L-3%20225%20L30%20300ZM79%20300%20L113%20213%20L99%20213%20L123%20138%20L111%20138%20L140%2052%20L170%20138%20L157%20138%20L182%20213%20L167%20213%20L201%20300ZM202%20300%20L236%20212%20L221%20212%20L246%20137%20L234%20137%20L263%2049%20L292%20137%20L280%20137%20L304%20212%20L289%20212%20L323%20300ZM346%20300%20L379%20204%20L365%20204%20L388%20123%20L376%20123%20L405%2027%20L433%20123%20L421%20123%20L445%20204%20L431%20204%20L464%20300ZM441%20300%20L485%20210%20L466%20210%20L497%20133%20L481%20133%20L519%2043%20L557%20133%20L541%20133%20L572%20210%20L554%20210%20L598%20300ZM576%20300%20L622%20217%20L602%20217%20L635%20147%20L618%20147%20L658%2064%20L697%20147%20L680%20147%20L713%20217%20L694%20217%20L739%20300ZM672%20300%20L714%20213%20L696%20213%20L726%20139%20L711%20139%20L747%2052%20L783%20139%20L768%20139%20L798%20213%20L780%20213%20L822%20300Z%22%20fill%3D%22%23050B07%22/%3E%3Crect%20y%3D%22299%22%20width%3D%22900%22%20height%3D%222%22%20fill%3D%22%23050B07%22/%3E%3C/svg%3E');background-size:auto 100%}
.mist{position:absolute;left:-10%;right:-10%;height:22%;background:radial-gradient(60% 55% at 50% 60%,rgba(160,210,170,.13),transparent 70%);pointer-events:none;animation:mist 40s ease-in-out infinite alternate}
.mist.m1{bottom:8%}.mist.m2{bottom:22%;animation-duration:55s;animation-direction:alternate-reverse;opacity:.7}
@keyframes mist{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,3,1,.6) 100%)}
.owl{position:absolute;left:max(18px,3%);top:calc(var(--barh) + 9%);width:112px;pointer-events:none;overflow:visible}
.owl svg{display:block;overflow:visible;width:100%;height:auto}
.owl .head{transform-box:fill-box;transform-origin:50% 80%;animation:look 14s ease-in-out infinite}
@keyframes look{0%,12%{transform:rotate(0)}18%,34%{transform:rotate(-9deg)}42%,58%{transform:rotate(0)}66%,80%{transform:rotate(8deg)}88%,100%{transform:rotate(0)}}
.owl .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 6s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.owl .eye{filter:drop-shadow(0 0 6px rgba(255,200,87,.8))}
.flyer{position:absolute;top:calc(var(--barh) + 22%);left:0;width:84px;color:#050B07;opacity:.9;pointer-events:none;animation:fly 70s linear infinite}
.flyer svg{display:block;width:100%;overflow:visible;animation:glide 3s ease-in-out infinite alternate}
.flyer .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .7s ease-in-out infinite alternate}
@keyframes fly{0%,72%{transform:translateX(calc(100vw + 120px))}100%{transform:translateX(-200px)}}
@keyframes glide{from{translate:0 -10px}to{translate:0 14px}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@media (max-width:760px){.owl{width:78px}.moon{width:56px;height:56px;right:8%}}
/* Reduced motion: html[data-rm="1"] rules live in app.css. */