/* Sottopancia OBS - stili condivisi (Entrata 3s, Uscita 2s) */
:root { --red: #cf4c4e; --text-color: #ffffff; --ease-out: cubic-bezier(.19, .76, .32, 1); }
html, body { margin: 0; padding: 0; min-height: 100vh; }
.lower-third-container { position: relative; min-width: 20em; width: max-content; max-width: 100%; min-height: 6em; color: var(--text-color); }
.red { color: var(--red); }
.white { color: var(--text-color); }
.light { font-weight: 300; }
.bold { font-weight: 700; }
.mask { overflow: hidden; position: relative; }
.animation { position: relative; }
.anim-hidden { display: none !important; }
.lower-third-container.hidden { opacity: 0; pointer-events: none; }

/* Animation 1 */
@keyframes anim1-slash-in { 0% { opacity: 0; transform: translate3d(6em, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes anim1-slash-out { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(6em, 0, 0); } }
@keyframes anim1-text1-in { 0% { left: -100%; } 100% { left: 0; } }
@keyframes anim1-text1-out { 0% { left: 0; } 100% { left: -100%; } }
@keyframes anim1-text2-in { 0% { left: -100%; } 100% { left: 0; } }
@keyframes anim1-text2-out { 0% { left: 0; } 100% { left: -100%; } }
#anim-1 div { position: absolute; }
#anim-1 > div:first-child { font-size: 4.8em; top: -.13em; }
#anim-1 > div:nth-child(2), #anim-1 > div:nth-child(3) { font-size: 2em; min-height: 1em; min-width: 8em; width: max-content; }
#anim-1 div:nth-child(2) { top: 0; left: .9em; }
#anim-1 div:nth-child(3) { top: .8em; left: .5em; }
#anim-1.state-entrata > div:first-child { animation: 3s var(--ease-out) forwards anim1-slash-in; }
#anim-1.state-entrata > div:nth-child(2) div { animation: 3s var(--ease-out) forwards anim1-text1-in; }
#anim-1.state-entrata > div:nth-child(3) div { animation: 3s var(--ease-out) forwards anim1-text2-in; }
#anim-1.state-uscita > div:first-child { animation: 2s var(--ease-out) forwards anim1-slash-out; }
#anim-1.state-uscita > div:nth-child(2) div { animation: 2s var(--ease-out) forwards anim1-text1-out; }
#anim-1.state-uscita > div:nth-child(3) div { animation: 2s var(--ease-out) forwards anim1-text2-out; }
#anim-1.state-visible > div:first-child { opacity: 1; transform: translate3d(0, 0, 0); }
#anim-1.state-visible > div:nth-child(2) div, #anim-1.state-visible > div:nth-child(3) div { left: 0; }
#anim-1.state-hidden > div:first-child { opacity: 0; transform: translate3d(6em, 0, 0); }
#anim-1.state-hidden > div:nth-child(2) div, #anim-1.state-hidden > div:nth-child(3) div { left: -100%; }

/* Animation 2 */
@keyframes anim2-name-in { 0% { transform: translate3d(0, 100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim2-name-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, 100%, 0); } }
@keyframes anim2-title-in { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim2-title-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
#anim-2 { text-align: center; }
#anim-2 > div { min-height: 1.2em; }
#anim-2 > div div { position: relative; white-space: nowrap; display: inline-block; }
#anim-2 > div:first-child { font-size: 2.8em; }
#anim-2 > div:last-child { font-size: 1.1em; }
#anim-2.state-entrata > div:first-child div { animation: 3s ease-out forwards anim2-name-in; }
#anim-2.state-entrata > div:last-child div { animation: 3s ease-out forwards anim2-title-in; }
#anim-2.state-uscita > div:first-child div { animation: 2s ease-out forwards anim2-name-out; }
#anim-2.state-uscita > div:last-child div { animation: 2s ease-out forwards anim2-title-out; }
#anim-2.state-visible > div div { transform: translate3d(0, 0, 0); }
#anim-2.state-hidden > div:first-child div { transform: translate3d(0, 100%, 0); }
#anim-2.state-hidden > div:last-child div { transform: translate3d(0, -100%, 0); }

/* Animation 3 */
@keyframes anim3-left-in { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim3-left-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } }
@keyframes anim3-right-in { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim3-right-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
#anim-3 { display: flex; gap: 0.5em; flex-wrap: nowrap; }
#anim-3 > div { display: inline-block; min-width: 5em; min-height: 1em; flex: 1 1 auto; }
#anim-3 > div:first-child { font-size: 2.4em; text-align: right; letter-spacing: 1px; }
#anim-3 > div:last-child { font-size: 2.5em; line-height: 1.15; letter-spacing: -1px; }
#anim-3.state-entrata > div:first-child div { animation: 3s ease-out forwards anim3-left-in; }
#anim-3.state-entrata > div:last-child div { animation: 3s ease-out forwards anim3-right-in; }
#anim-3.state-uscita > div:first-child div { animation: 2s ease-out forwards anim3-left-out; }
#anim-3.state-uscita > div:last-child div { animation: 2s ease-out forwards anim3-right-out; }
#anim-3.state-visible > div div { transform: translate3d(0, 0, 0); }
#anim-3.state-hidden > div:first-child div { transform: translate3d(100%, 0, 0); }
#anim-3.state-hidden > div:last-child div { transform: translate3d(-100%, 0, 0); }

/* Animation 4 */
@keyframes anim4-stroke-in { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim4-stroke-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
@keyframes anim4-text-in { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim4-text-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
#anim-4 > div { display: inline-block; vertical-align: middle; }
#anim-4 > div:first-child { font-size: 2.8em; }
#anim-4 > div:last-child div { width: .38em; height: 2.4em; background-color: var(--red); }
#anim-4.state-entrata > div:first-child div { animation: 3s ease-out forwards anim4-text-in; }
#anim-4.state-entrata > div:last-child div { animation: 3s ease-out forwards anim4-stroke-in; }
#anim-4.state-uscita > div:first-child div { animation: 2s ease-out forwards anim4-text-out; }
#anim-4.state-uscita > div:last-child div { animation: 2s ease-out forwards anim4-stroke-out; }
#anim-4.state-visible > div div { transform: translate3d(0, 0, 0); }
#anim-4.state-hidden > div div { transform: translate3d(0, -100%, 0); }

/* Animation 5 */
@keyframes anim5-name-in { 0% { transform: translate3d(0, 100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim5-name-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, 100%, 0); } }
@keyframes anim5-title-in { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes anim5-title-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
#anim-5 { text-align: center; height: 3.5em; }
#anim-5 svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#anim-5 line { stroke-width: 4px; stroke: var(--red); }
#anim-5 > div.mask:first-of-type { font-size: 2em; padding-top: .4em; }
#anim-5 > div.mask:last-of-type { font-size: .9em; letter-spacing: .7px; margin-top: .2em; }
#anim-5.state-entrata > div.mask:first-of-type div { animation: 3s ease-out forwards anim5-name-in; }
#anim-5.state-entrata > div.mask:last-of-type div { animation: 3s ease-out forwards anim5-title-in; }
#anim-5.state-uscita > div.mask:first-of-type div { animation: 2s ease-out forwards anim5-name-out; }
#anim-5.state-uscita > div.mask:last-of-type div { animation: 2s ease-out forwards anim5-title-out; }
#anim-5.state-visible > div.mask div { transform: translate3d(0, 0, 0); }
#anim-5.state-hidden > div.mask:first-of-type div { transform: translate3d(0, 100%, 0); }
#anim-5.state-hidden > div.mask:last-of-type div { transform: translate3d(0, -100%, 0); }