/* Ambientacoes por slide. Camada isolada; nao interfere com links ou botoes. */
.moca-hero__effects{position:absolute;inset:-18px 0 0;overflow:hidden;pointer-events:none;z-index:2;isolation:isolate}
.moca-hero__particle{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--size);height:var(--size);pointer-events:none;will-change:transform,opacity}
/* Nevasca em tres profundidades, com movimento real em toda altura do hero. */
.moca-hero__effects--neve{background:transparent}
.moca-hero__effects--neve .moca-hero__particle{top:-16%;border-radius:50%;background:#fff;box-shadow:0 0 7px 1px rgba(216,246,255,.85);animation:moca-fx-snow var(--duration) linear var(--delay) infinite}
.moca-hero__effects--neve .moca-hero__particle:nth-child(3n){filter:blur(1.5px);opacity:.55}
.moca-hero__effects--neve .moca-hero__particle:nth-child(5n){filter:blur(3px);transform:scale(1.5)}
@keyframes moca-fx-snow{0%{transform:translate3d(0,-15vh,0);opacity:0}8%{opacity:.95}85%{opacity:.95}100%{transform:translate3d(var(--drift),120vh,0);opacity:0}}
/* Sangue: cortina SVG organica com gotas pesadas em queda. */
.moca-hero__effects--sangue{background:transparent}
.moca-hero__blood-curtain{position:absolute;left:50%;top:-1px;width:min(calc(100% - 32px), 1220px);transform:translateX(-50%);height:clamp(80px,12vw,158px);filter:drop-shadow(0 5px 3px rgba(26,0,0,.45));animation:moca-blood-appear .8s ease-out both}
@keyframes moca-blood-appear{from{transform:translate(-50%,-65%)}to{transform:translate(-50%,0)}}
.moca-hero__effects--sangue .moca-hero__particle{top:-18px;width:calc(var(--size)*.55);height:calc(var(--size)*1.7);border-radius:55% 55% 70% 70%;background:linear-gradient(90deg,#65000b,#d31a2b 65%,#73000b);box-shadow:0 2px 5px rgba(30,0,0,.4);animation:moca-fx-blood var(--duration) cubic-bezier(.45,0,.9,.55) var(--delay) infinite}
@keyframes moca-fx-blood{0%,18%{transform:translateY(-15px) scaleY(.65);opacity:0}24%{opacity:1}88%{opacity:1}100%{transform:translateY(100vh) scaleY(1.3);opacity:0}}
/* Magia: particulas luminosas com halo e profundidade. */
.moca-hero__effects--magia .moca-hero__particle{border-radius:50%;background:#f3d9ff;box-shadow:0 0 9px 3px #d39bff,0 0 30px 9px #a54dff80;animation:moca-fx-rise var(--duration) ease-in-out var(--delay) infinite}
@keyframes moca-fx-rise{0%{transform:translateY(90px) scale(.2);opacity:0}35%{opacity:1}100%{transform:translate(var(--drift),-230px) scale(1.4);opacity:0}}
/* Aventura: folhas atravessando a cena. */
.moca-hero__effects--aventura .moca-hero__particle{width:calc(var(--size)*1.7);height:var(--size);background:#d6e98d;border-radius:90% 0 90% 0;box-shadow:0 0 7px #80a84b70;animation:moca-fx-leaf var(--duration) ease-in-out var(--delay) infinite}
@keyframes moca-fx-leaf{0%{transform:translate(-120px,-75px) rotate(0);opacity:0}18%{opacity:.95}100%{transform:translate(280px,180px) rotate(530deg);opacity:0}}
/* Areia: poeira e particulas finas sopradas lateralmente. */
.moca-hero__effects--areia{background:linear-gradient(0deg,#b8803120,transparent 60%)}
.moca-hero__effects--areia .moca-hero__particle{width:calc(var(--size)*.55);height:calc(var(--size)*.55);border-radius:50%;background:#f8cf8a;box-shadow:0 0 8px #f2bf6d80;animation:moca-fx-sand var(--duration) linear var(--delay) infinite}
@keyframes moca-fx-sand{0%{transform:translateX(-180px);opacity:0}25%{opacity:.85}100%{transform:translate(430px,-80px);opacity:0}}
/* Anime: riscos de velocidade em diagonais. */
.moca-hero__effects--anime .moca-hero__particle{width:calc(var(--size)*19);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#e0f5ff,transparent);box-shadow:0 0 9px #b7eaff;animation:moca-fx-anime var(--duration) linear var(--delay) infinite}
@keyframes moca-fx-anime{0%{transform:translate(-300px,180px) rotate(-28deg);opacity:0}15%{opacity:.95}65%,100%{transform:translate(470px,-200px) rotate(-28deg);opacity:0}}
@media(max-width:700px){.moca-hero__effects--neve .moca-hero__particle:nth-child(2n){display:none}.moca-hero__effects--areia .moca-hero__particle:nth-child(2n){display:none}.moca-hero__blood-curtain{height:85px}}
@media(prefers-reduced-motion:reduce){.moca-hero__effects{display:none}}

/* Neve: estalactites de gelo no topo e flocos cristalinos em primeiro plano. */
.moca-hero__ice-curtain{position:absolute;left:50%;top:-1px;width:min(calc(100% - 32px), 1220px);transform:translateX(-50%);height:clamp(64px,9.4vw,132px);filter:drop-shadow(0 3px 2px rgba(10,57,99,.25));animation:moca-ice-enter .85s ease-out both;pointer-events:none}
@keyframes moca-ice-enter{from{transform:translate(-50%,-70%)}to{transform:translate(-50%,0)}}
.moca-hero__effects--neve .moca-hero__particle--flake{width:var(--size);height:var(--size);border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 0 3px rgba(229,250,255,.85));opacity:1}
.moca-hero__effects--neve .moca-hero__particle--flake::before,.moca-hero__effects--neve .moca-hero__particle--flake::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:100%;border-radius:2px;background:#effbff;transform:translate(-50%,-50%)}
.moca-hero__effects--neve .moca-hero__particle--flake::after{transform:translate(-50%,-50%) rotate(60deg);box-shadow:0 0 2px #fff}
.moca-hero__effects--neve .moca-hero__particle--flake{background:linear-gradient(30deg,transparent 46%,#effbff 47% 53%,transparent 54%);}
@media(max-width:700px){.moca-hero__ice-curtain{height:65px}}
@media(prefers-reduced-motion:reduce){.moca-hero__ice-curtain{animation:none}}

/* Mobile: aproximar as ambientacoes da base do menu sem deslocar o slide. */
@media(max-width:767px){.moca-hero__effects{top:-12px}}


/* Cortinas: mesmo recuo lateral em todas as telas; acabamento nas formas SVG, sem mascaras. */
.moca-hero__blood-curtain,.moca-hero__ice-curtain{left:50%;right:auto;width:min(calc(100% - 32px),1220px);max-width:calc(100% - 32px);overflow:visible}
@media(max-width:767px){.moca-hero__blood-curtain,.moca-hero__ice-curtain{width:calc(100% - 24px);max-width:calc(100% - 24px)}}