/* ilMioAcquario — sfondo animato fondale acqua dolce e marina (section list) Modulo CSS caricato condizionalmente da baseof.html (vedi commento nel ). Generato dallo split di main.css per minimizzare le risorse per pagina. */ /* ---------- Sfondo animato "fondale" banda Acqua dolce (dal design sito/Acqua Dolce.dc.html, 1:1) ---------- */ @keyframes fondale-bolla { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .6; } 85% { opacity: .35; } 100% { transform: translateY(-240px); opacity: 0; } } @keyframes fondale-nuota { 0% { transform: translateX(0) scaleX(1); } 46% { transform: translateX(min(900px, 74vw)) scaleX(1); } 50% { transform: translateX(min(900px, 74vw)) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } } @keyframes fondale-ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes fondale-alga { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } } @keyframes fondale-raggio { 0% { opacity: 0; } 30% { opacity: .3; } 55% { opacity: .1; } 75% { opacity: .26; } 100% { opacity: 0; } } @keyframes fondale-galleggia { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } } /* Gradiente della banda titolo come nel design */ .hero-sezione--fondale { background: linear-gradient(135deg, oklch(0.42 0.09 170), oklch(0.32 0.08 185)); } .sfondo-fondale { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sfondo-fondale__roccia { position: absolute; bottom: -6px; border-radius: 48% 52% 45% 55% / 70% 65% 30% 35%; } .sfondo-fondale__tronco { position: absolute; bottom: 6px; height: 13px; border-radius: 7px; transform-origin: bottom left; } .sfondo-fondale__ramo { position: absolute; left: 55%; bottom: 8px; height: 9px; border-radius: 5px; transform: rotate(-28deg); transform-origin: bottom left; } .sfondo-fondale__pianta { position: absolute; bottom: 0; } .sfondo-fondale__foglia { position: absolute; bottom: 0; width: 9px; border-radius: 50% 50% 20% 20% / 90% 90% 8% 8%; transform-origin: bottom center; } .sfondo-fondale__raggio { position: absolute; top: -30%; height: 160%; transform: skewX(-18deg); opacity: 0; background: linear-gradient(180deg, oklch(1 0 0 / .3), oklch(1 0 0 / 0)); } .sfondo-fondale__bolla { position: absolute; bottom: -14px; border-radius: 50%; border: 1.5px solid oklch(0.92 0.03 180 / .45); background: oklch(0.96 0.02 180 / .07); } .sfondo-fondale__galleggiante { position: absolute; top: -8px; height: 20px; background: oklch(0.3 0.07 150 / .55); border-radius: 0 0 50% 50% / 0 0 100% 100%; } .sfondo-fondale__radice { position: absolute; top: 0; width: 4px; border-radius: 2px; transform-origin: top center; background: linear-gradient(180deg, oklch(0.33 0.05 80 / .5), oklch(0.33 0.05 80 / 0)); } .sfondo-fondale__ombra { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.2 0.05 200 / .35), transparent 40%); } .sfondo-fondale__pesce-track { position: absolute; right: 4%; height: 26px; } .sfondo-fondale__pesce { position: absolute; } .sfondo-fondale__pesce-body { display: flex; align-items: center; } .sfondo-fondale__coda { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-right: -4px; } .sfondo-fondale__corpo { position: relative; width: 34px; height: 17px; border-radius: 50%; } .sfondo-fondale__occhio { position: absolute; right: 6px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: oklch(0.22 0.05 235); } @media (prefers-reduced-motion: reduce) { .sfondo-fondale { display: none; } } /* ---------- Sfondo animato "fondale" marino banda Acqua marina (dal design sito/Acqua Marina.dc.html, 1:1) ---------- */ @keyframes fondale-tentacolo { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } } /* Gradiente della banda titolo marina come nel design */ .hero-sezione--fondale-marino { background: linear-gradient(135deg, oklch(0.42 0.1 235), oklch(0.3 0.08 255)); } /* Sabbia chiara del fondale */ .sfondo-fondale__sabbia { position: absolute; left: -2%; right: -2%; bottom: -14px; height: 34px; background: oklch(0.82 0.05 85 / .35); border-radius: 50% 50% 0 0 / 100% 60% 0 0; } /* Stella marina (clip-path come nel design _stella) */ .sfondo-fondale__stella { position: absolute; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } /* Corallo ramificato (_corallo) */ .sfondo-fondale__corallo { position: absolute; bottom: 0; } .sfondo-fondale__corallo-ramo { position: absolute; bottom: 0; left: 0; width: 8px; border-radius: 5px 5px 2px 2px; transform-origin: bottom center; } /* Anemone: base + tentacoli che ondeggiano (_anemone) */ .sfondo-fondale__anemone { position: absolute; bottom: 0; } .sfondo-fondale__tentacolo { position: absolute; bottom: 10px; left: 0; width: 5px; border-radius: 3px; transform-origin: bottom center; } .sfondo-fondale__anemone-base { position: absolute; bottom: -2px; left: -13px; width: 26px; height: 16px; border-radius: 50% 50% 30% 30%; } /* Gorgonia / ventaglio di mare (_gorgonia) */ .sfondo-fondale__gorgonia { position: absolute; bottom: -2px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: bottom center; animation: fondale-alga 7s ease-in-out infinite; } /* Striscia laterale dei pesci a bande (_pesci strisce) */ .sfondo-fondale__striscia { position: absolute; left: 12px; top: 0; width: 6px; height: 100%; background: oklch(0.97 0.01 230 / .85); } /* Correzioni cromatiche marine rispetto alla variante d'acqua dolce */ .sfondo-fondale--marino .sfondo-fondale__foglia { width: 8px; } .sfondo-fondale--marino .sfondo-fondale__bolla { border-color: oklch(0.92 0.03 230 / .45); background: oklch(0.96 0.02 230 / .07); } .sfondo-fondale--marino .sfondo-fondale__raggio { background: linear-gradient(180deg, oklch(1 0 0 / .32), oklch(1 0 0 / 0)); } .sfondo-fondale--marino .sfondo-fondale__corpo { overflow: hidden; } /* ---------- INP / Core Web Vitals: contenimento del costo delle animazioni ---------- */ /* Su mobile (dove Search Console segnala INP > 200 ms) il fondale animato NON viene mostrato: resta solo il gradiente della banda. Elimina il compositing continuo di decine di layer animati, che erode il budget per frame e gonfia il "presentation delay" delle interazioni. */ @media (max-width: 860px) { .sfondo-fondale { display: none; } } /* Desktop/tablet: quando la banda esce dal viewport le animazioni vengono messe in pausa (classe "is-fuori-vista" aggiunta via IntersectionObserver nei partial), così il compositor non lavora mentre l'utente scrolla e interagisce sotto. */ .sfondo-fondale.is-fuori-vista * { animation-play-state: paused !important; }