/* ilMioAcquario — sfondo animato banda titolo (blog/guide 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 banda titolo (dai design sito/Blog.dc.html e sito/Guide.dc.html, 1:1) ---------- */ @keyframes banda-bolla { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .7; } 85% { opacity: .4; } 100% { transform: translateY(-280px) translateX(16px); opacity: 0; } } @keyframes banda-nuota { 0% { transform: translateX(0) scaleX(1); } 46% { transform: translateX(min(900px, 76vw)) scaleX(1); } 50% { transform: translateX(min(900px, 76vw)) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } } @keyframes banda-raggio { 0% { opacity: 0; } 30% { opacity: .35; } 55% { opacity: .12; } 75% { opacity: .3; } 100% { opacity: 0; } } @keyframes banda-ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .sfondo-banda { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sfondo-banda__bolla { position: absolute; bottom: -20px; border-radius: 50%; border: 1.5px solid oklch(0.9 0.03 240 / .5); background: oklch(0.95 0.02 240 / .08); } /* Tinta bolle della banda Guide (da sito/Guide.dc.html) */ .sfondo-banda--verde .sfondo-banda__bolla { border-color: oklch(0.9 0.03 200 / .5); background: oklch(0.95 0.02 195 / .08); } .sfondo-banda__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-banda__pesce-track { position: absolute; right: 4%; height: 26px; } .sfondo-banda__pesce { position: absolute; } .sfondo-banda__pesce-body { display: flex; align-items: center; opacity: .85; } .sfondo-banda__coda { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-right: -4px; } .sfondo-banda__corpo { position: relative; width: 34px; height: 17px; border-radius: 50%; } .sfondo-banda__occhio { position: absolute; right: 6px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: oklch(0.24 0.055 235); } @media (prefers-reduced-motion: reduce) { .sfondo-banda { display: none; } }