/* ============================================================================
CARDUME — Biblioteca de animações web (CSS)
Drop-in para a landing page e o portfólio. Consome ../tokens.css.
Regras: só transform/opacity (GPU); decorativo = aria-hidden + pointer-events:none;
respeita prefers-reduced-motion. Pareia com cardume-animations.js (Canvas/JS).
============================================================================ */
@import "tokens.css";
:root{
/* mapeia tokens da marca com fallback literal (funciona mesmo sem tokens.css) */
--cd-abyss: var(--c-abyss-800, #0A1822);
--cd-abyss-deep: var(--c-abyss-900, #060F17);
--cd-water: var(--c-petrol-700, #0C3E3D);
--cd-cyan: var(--c-cyan-300, #57E0D4);
--cd-glow: var(--c-cyan-200, #8FF3EA);
--cd-silver: var(--c-silver-300, #C4D4D8);
--cd-brand: var(--c-brand-400, #3E9BD8);
--cd-teal: var(--c-teal-500, #1E857D);
}
/* ---- superfície abissal reutilizável (fundo de seção) --------------------- */
.cd-deep{position:relative;overflow:hidden;background:
radial-gradient(120% 100% at 50% -10%,#123542 0%,var(--cd-abyss) 46%,var(--cd-abyss-deep) 100%)}
.cd-deep > *{position:relative;z-index:1}
/* ---- camada ambiente: raios de luz --------------------------------------- */
.cd-rays{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cd-rays::before,.cd-rays::after{content:"";position:absolute;top:-25%;height:160%;width:38%;
mix-blend-mode:screen;filter:blur(8px);
background:linear-gradient(90deg,transparent 40%,rgba(143,243,234,.10) 50%,transparent 60%)}
.cd-rays::before{left:14%;transform:rotate(9deg);animation:cd-ray 9s ease-in-out infinite}
.cd-rays::after{left:56%;transform:rotate(-7deg);animation:cd-ray 11s ease-in-out infinite reverse;
background:linear-gradient(90deg,transparent 45%,rgba(62,155,216,.09) 55%,transparent 65%)}
@keyframes cd-ray{0%,100%{opacity:.35;transform:translateX(-12px) rotate(9deg)}
50%{opacity:.75;transform:translateX(12px) rotate(11deg)}}
/* ---- glow bioluminescente pontual ---------------------------------------- */
.cd-glow-dot{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,var(--cd-glow) 0%,rgba(143,243,234,0) 70%);
animation:cd-pulse 3.2s ease-in-out infinite}
@keyframes cd-pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
/* ============================================================================
0) ABERTURA EM SONAR (preloader PADRÃO da marca)
Uso: …svg…
(o JS remove sozinho ao terminar). Coloque como 1º filho do .
Lê o símbolo da Cardume como ondas de sonar: pings concêntricos + varredura
+ as barras da logo, e o último ping abre a página.
============================================================================ */
/* Pings (atributo `r`), varredura (atributo `transform`) e o buraco da máscara
são animados por JS/rAF — sem @keyframes nem transform-box no SVG. */
.cd-sonar-reveal{position:fixed;inset:0;z-index:9999;pointer-events:none}
.cd-sonar-reveal svg{width:100%;height:100%;display:block}
.cd-sonar-reveal .cd-sonar-fill{fill:var(--cd-abyss-deep)}
.cd-sonar-reveal .cd-ping{fill:none;stroke:var(--cd-cyan);stroke-width:.35;opacity:0}
.cd-sonar-reveal .cd-sonar-sweep{stroke:var(--cd-glow);stroke-width:.45;stroke-linecap:round;
opacity:.75;filter:drop-shadow(0 0 2px rgba(143,243,234,.9))}
.cd-sonar-reveal .cd-sonar-bars{opacity:0}
/* As barras são o SÍMBOLO OFICIAL da Cardume, não um "equalizador": 6 cápsulas
simétricas, todas centradas na mesma linha, alturas na proporção 254/171/72 e
passo uniforme (medidas do original). Copie o do brand-book.html — não
redesenhe de memória. O precisa existir nos
do MESMO SVG (cores amostradas da logo). */
.cd-sonar-reveal .cd-sonar-bars rect{fill:url(#cd-bar-grad)}
/* O nome, que entra à direita no fim da abertura. `textLength` no trava a
largura mesmo sem a fonte de display instalada — não remover. NÃO usar
var(--font-display) aqui: em documentos que já têm essa variável ela pode ser
outra fonte (na galeria é "Archivo Black") e o nome sai pesado. */
.cd-sonar-reveal .cd-word{
font-family:var(--cd-font-display,"Futura","Century Gothic","Avenir Next","Nunito Sans",
ui-sans-serif,system-ui,sans-serif);
font-weight:300;font-size:5.4px;fill:#EAF3F5;text-rendering:geometricPrecision}
.cd-sonar-reveal.cd-done{animation:cd-reveal-fade .45s ease forwards}
/* ============================================================================
1) ABERTURA EM FORMA DE PEIXE (variante anterior — segue disponível)
Uso: …svg…
(o JS remove sozinho ao terminar). Coloque como 1º filho do .
============================================================================ */
/* O peixe (na máscara) e o rim (contorno ciano) escalam via atributo SVG `transform`,
controlado por JS (requestAnimationFrame) — robusto, sem quirks de transform-box. */
.cd-reveal{position:fixed;inset:0;z-index:9999;pointer-events:none}
.cd-reveal svg{width:100%;height:100%;display:block}
.cd-reveal .cd-reveal-fill{fill:var(--cd-abyss-deep)}
.cd-reveal .cd-reveal-rim{fill:none;stroke:var(--cd-glow);stroke-width:.6;filter:drop-shadow(0 0 3px rgba(143,243,234,.9))}
.cd-reveal.cd-done{animation:cd-reveal-fade .45s ease forwards}
@keyframes cd-reveal-fade{to{opacity:0;visibility:hidden}}
/* ============================================================================
2) PEIXE ATRAVESSA A TELA (crosser ambiente / entre seções)
Uso: …svg…
modificadores: .rtl (direita→esquerda), variáveis --cd-cross-dur/-delay/-top/-size
============================================================================ */
.cd-fish-cross{position:relative;overflow:hidden;min-height:60px}
.cd-swimmer{position:absolute;top:var(--cd-cross-top,50%);left:0;
width:var(--cd-cross-size,72px);height:calc(var(--cd-cross-size,72px)*.48);
color:var(--cd-silver);will-change:left;
animation:cd-swim var(--cd-cross-dur,15s) linear infinite;animation-delay:var(--cd-cross-delay,0s)}
.cd-swimmer svg{display:block;width:100%;height:100%;overflow:visible}
.cd-swimmer .cd-body{fill:currentColor}
.cd-swimmer .cd-eye{fill:var(--cd-abyss)}
.cd-swimmer .cd-tail{fill:currentColor;transform-box:fill-box;transform-origin:100% 50%;
animation:cd-tailwag .55s ease-in-out infinite}
.cd-swimmer .cd-bob{transform-box:fill-box;transform-origin:50% 50%;
animation:cd-bob 2.6s ease-in-out infinite}
.cd-fish-cross.rtl .cd-swimmer{animation-name:cd-swim-rtl;transform:scaleX(-1)}
.cd-swimmer.glow{color:var(--cd-glow);filter:drop-shadow(0 0 8px rgba(143,243,234,.8))}
@keyframes cd-swim{from{left:-14%}to{left:114%}}
@keyframes cd-swim-rtl{from{left:114%}to{left:-14%}}
@keyframes cd-tailwag{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes cd-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
/* ============================================================================
3) BALEIA (drifter majestoso de fundo)
Uso: …svg…
modificadores: .rtl · vars --cd-whale-top/-size/-op/-dur/-delay
============================================================================ */
.cd-whale-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cd-whale{position:absolute;left:0;top:var(--cd-whale-top,40%);
width:var(--cd-whale-size,340px);height:calc(var(--cd-whale-size,340px)*.47);
color:var(--cd-silver);opacity:var(--cd-whale-op,.20);will-change:left;
animation:cd-glide var(--cd-whale-dur,56s) linear infinite;animation-delay:var(--cd-whale-delay,0s)}
.cd-whale svg{display:block;width:100%;height:100%;overflow:visible}
.cd-whale .cd-wbody{fill:currentColor}
.cd-whale .cd-wbelly{fill:var(--cd-glow);opacity:.14}
.cd-whale .cd-weye{fill:var(--cd-abyss)}
.cd-whale .cd-wbob{transform-box:fill-box;transform-origin:50% 50%;animation:cd-wbob 7s ease-in-out infinite}
.cd-whale .cd-fluke{transform-box:fill-box;transform-origin:100% 50%;animation:cd-flukewag 3.8s ease-in-out infinite}
.cd-whale-scene.rtl .cd-whale{animation-name:cd-glide-rtl;transform:scaleX(-1)}
@keyframes cd-glide{from{left:-42%}to{left:142%}}
@keyframes cd-glide-rtl{from{left:142%}to{left:-42%}}
@keyframes cd-wbob{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@keyframes cd-flukewag{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
/* ============================================================================
4) TUBARÃO (predador cruza o fundo profundo, mais lento/silencioso)
Uso: …svg…
modificadores: .rtl · vars --cd-shark-top/-size/-op/-dur/-delay
============================================================================ */
.cd-shark-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cd-shark{position:absolute;left:0;top:var(--cd-shark-top,58%);
width:var(--cd-shark-size,260px);height:calc(var(--cd-shark-size,260px)*.4);
color:var(--cd-shark-col,#2b4a55);opacity:var(--cd-shark-op,.5);will-change:left;
animation:cd-glide var(--cd-shark-dur,40s) linear infinite;animation-delay:var(--cd-shark-delay,0s)}
.cd-shark svg{display:block;width:100%;height:100%;overflow:visible}
.cd-shark .cd-sbody{fill:currentColor}
.cd-shark .cd-seye{fill:var(--cd-abyss)}
.cd-shark .cd-sbob{transform-box:fill-box;transform-origin:50% 50%;animation:cd-wbob 5.4s ease-in-out infinite}
.cd-shark .cd-fluke{transform-box:fill-box;transform-origin:100% 50%;animation:cd-flukewag 2.8s ease-in-out infinite}
.cd-shark-scene.rtl .cd-shark{animation-name:cd-glide-rtl;transform:scaleX(-1)}
/* ============================================================================
5) ÁGUA-VIVA (bioluminescente subindo; sino pulsa, tentáculos ondulam)
Uso: …svg…
vars --cd-jelly-size/-dur/-delay · empilhe várias com delays diferentes
============================================================================ */
.cd-jelly{position:absolute;width:var(--cd-jelly-size,64px);height:calc(var(--cd-jelly-size,64px)*1.5);
pointer-events:none;color:var(--cd-cyan);will-change:transform,opacity;
animation:cd-jelly-rise var(--cd-jelly-dur,16s) ease-in-out infinite;animation-delay:var(--cd-jelly-delay,0s)}
.cd-jelly svg{display:block;width:100%;height:100%;overflow:visible;
filter:drop-shadow(0 0 6px rgba(87,224,212,.55))}
.cd-jelly .cd-jglow{fill:var(--cd-glow);opacity:.14}
.cd-jelly .cd-bell{fill:currentColor;opacity:.55;transform-box:fill-box;transform-origin:50% 30%;
animation:cd-jelly-pulse var(--cd-jelly-dur,16s) ease-in-out infinite;animation-delay:inherit}
.cd-jelly .cd-bell-hi{fill:var(--cd-glow);opacity:.5}
.cd-jelly .cd-tentacles{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;fill:none;opacity:.7;
transform-box:fill-box;transform-origin:50% 0;animation:cd-jelly-sway 4.6s ease-in-out infinite}
@keyframes cd-jelly-rise{0%{transform:translateY(26%);opacity:0}
14%{opacity:.95}82%{opacity:.95}100%{transform:translateY(-40%);opacity:0}}
@keyframes cd-jelly-pulse{0%,100%{transform:scale(1,1)}42%{transform:scale(1.12,.82)}68%{transform:scale(.9,1.12)}}
@keyframes cd-jelly-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* ============================================================================
6) PEIXE-LANTERNA (anglerfish: isca luminosa piscando na escuridão)
Uso: …svg…
(canto de seção muito escura)
modificadores: .rtl · var --cd-angler-size
============================================================================ */
.cd-angler{position:absolute;width:var(--cd-angler-size,180px);height:calc(var(--cd-angler-size,180px)*.8);
pointer-events:none;color:var(--cd-cyan)}
.cd-angler svg{display:block;width:100%;height:100%;overflow:visible}
.cd-angler .cd-abody{fill:#12303a;opacity:.2;animation:cd-angler-breathe 4.4s ease-in-out infinite}
.cd-angler .cd-arod{stroke:#12303a;stroke-width:1.6;fill:none;opacity:.55}
.cd-angler .cd-aglow{fill:var(--cd-glow);opacity:.3;transform-box:fill-box;transform-origin:50% 50%;
animation:cd-lure-blink 4.4s ease-in-out infinite}
.cd-angler .cd-alure{fill:var(--cd-cyan);transform-box:fill-box;transform-origin:50% 50%;
filter:drop-shadow(0 0 5px rgba(87,224,212,.9));animation:cd-lure-blink 4.4s ease-in-out infinite}
.cd-angler.rtl{transform:scaleX(-1)}
@keyframes cd-lure-blink{0%{opacity:.25;transform:scale(.8)}6%{opacity:1;transform:scale(1.15)}
14%{opacity:.4;transform:scale(.92)}22%{opacity:1;transform:scale(1.1)}34%{opacity:.3;transform:scale(.85)}
100%{opacity:.3;transform:scale(.85)}}
@keyframes cd-angler-breathe{0%,100%{opacity:.16}8%{opacity:.5}22%{opacity:.42}40%,100%{opacity:.18}}
/* ============================================================================
7) ALGAS / KELP (faixa de rodapé/base; balançam na corrente)
Uso: …svg……
vars por fronde: --cd-frond-w/-dur/-delay · na .cd-kelp: --cd-kelp-h (altura da faixa)
============================================================================ */
.cd-kelp{position:absolute;left:0;right:0;bottom:0;height:var(--cd-kelp-h,58%);z-index:0;
display:flex;align-items:flex-end;justify-content:space-around;pointer-events:none;overflow:hidden}
.cd-frond{width:var(--cd-frond-w,34px);height:100%;color:var(--cd-teal);opacity:.5;
transform-origin:50% 100%;will-change:transform;
animation:cd-kelp-sway var(--cd-frond-dur,8s) ease-in-out infinite;animation-delay:var(--cd-frond-delay,0s)}
.cd-frond svg{display:block;width:100%;height:100%;overflow:visible}
.cd-frond path{fill:currentColor}
.cd-frond .cd-frond-tip{fill:var(--cd-glow);opacity:.5}
@keyframes cd-kelp-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
/* ============================================================================
8) CORAIS (low-poly na base; polipos com glow pulsante)
Uso: …svg…
(ancorado no rodapé)
var --cd-coral-size · combine com .cd-bubbles saindo das pontas
============================================================================ */
.cd-coral{position:absolute;bottom:0;pointer-events:none;z-index:0;
width:var(--cd-coral-size,220px);height:calc(var(--cd-coral-size,220px)*.7)}
.cd-coral svg{display:block;width:100%;height:100%;overflow:visible}
.cd-coral .cd-coral-a{fill:var(--cd-teal);opacity:.55}
.cd-coral .cd-coral-b{fill:var(--cd-water);opacity:.7}
.cd-coral .cd-coral-tip{fill:var(--cd-glow);opacity:.5;transform-box:fill-box;transform-origin:50% 50%;
animation:cd-pulse 3.6s ease-in-out infinite}
/* ============================================================================
9) BOLHAS (campo reutilizável de bolhas subindo)
Uso: ……
vars por bolha: --cd-bubble-size/-rise/-drift/-dur/-delay
============================================================================ */
.cd-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cd-bubble{position:absolute;bottom:0;border-radius:50%;
width:var(--cd-bubble-size,8px);height:var(--cd-bubble-size,8px);
background:radial-gradient(circle at 34% 30%,rgba(143,243,234,.5),rgba(143,243,234,.05) 68%);
border:1px solid rgba(143,243,234,.22);will-change:transform,opacity;
animation:cd-bubble-rise var(--cd-bubble-dur,7s) linear infinite;animation-delay:var(--cd-bubble-delay,0s)}
@keyframes cd-bubble-rise{
0%{transform:translate(0,0);opacity:0}
12%{opacity:.75}85%{opacity:.5}
100%{transform:translate(var(--cd-bubble-drift,6px),calc(-1*var(--cd-bubble-rise,220px)));opacity:0}}
/* ============================================================================
Reduced motion — congela tudo em estado estático elegante
============================================================================ */
@media (prefers-reduced-motion:reduce){
.cd-rays::before,.cd-rays::after,.cd-glow-dot,
.cd-swimmer,.cd-swimmer .cd-tail,.cd-swimmer .cd-bob,
.cd-whale,.cd-whale .cd-wbob,.cd-whale .cd-fluke,
.cd-shark,.cd-shark .cd-sbob,.cd-shark .cd-fluke,
.cd-jelly,.cd-jelly .cd-bell,.cd-jelly .cd-tentacles,
.cd-angler .cd-abody,.cd-angler .cd-aglow,.cd-angler .cd-alure,
.cd-frond,.cd-coral .cd-coral-tip,.cd-bubble{animation:none!important}
.cd-reveal,.cd-sonar-reveal{display:none!important} /* sem intro em reduced-motion */
.cd-swimmer{left:38%}
.cd-whale{left:20%}.cd-shark{left:60%}
.cd-jelly{opacity:.9}.cd-angler .cd-abody{opacity:.4}.cd-angler .cd-alure{opacity:.9}
.cd-bubble{opacity:.4}
}