/* ═════════ Mini-schermi animati delle caratteristiche ═════════
   Ogni .fx è uno schermo nero in stile AutoPrompter. Le animazioni (.a) restano
   ferme finché il mouse non passa sul riquadro (.fxh:hover) o, su touch, finché
   il riquadro è in vista (.fxh.play). Lo stato base = fotogramma completo, ed è
   uguale a 0% e 100% di ogni keyframe, così il loop non scatta. */

.fx {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: #000; border: 1px solid #2a2a2e; color: #fff; margin: 4px 0 8px;
  font-family: "Arial Narrow", "Archivo Narrow", sans-serif; font-size: 15px; line-height: 1.2;
  user-select: none; pointer-events: none;
}
.fx * { box-sizing: border-box; }
.fx p { margin: 0; color: inherit; font-size: inherit; }
.fx s { text-decoration: none; }
.fx .a {
  animation-duration: var(--d, 6s); animation-iteration-count: infinite;
  animation-fill-mode: both; animation-timing-function: ease-in-out; animation-play-state: paused;
}
.fxh:hover .fx .a, .fxh.play .fx .a { animation-play-state: running; }
.fx-hint { position: absolute; right: 8px; bottom: 6px; font: 600 9px/1 var(--mono); letter-spacing: .14em; color: #ffffff59; transition: opacity .2s; }
.fxh:hover .fx-hint, .fxh.play .fx-hint { opacity: 0; }
.fx-ptr { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; z-index: 2; }
.fx-ptr span { width: 9%; height: 2px; background: #fff; }
.fx-stack { display: inline-grid; }
.fx-stack > * { grid-area: 1 / 1; }
.fx-pill { font: 700 2.6cqw/1 var(--mono); letter-spacing: .12em; padding: .9cqw 1.6cqw; background: #ffffff1f; color: #fff; }

/* ── 01 Copioni da Word ── */
.fx-word { --d: 7s; }
.w-page { position: absolute; left: 5%; top: 12%; width: 30%; height: 76%; background: #fff; padding: 4cqw 3cqw; display: flex; flex-direction: column; gap: 2.2cqw; box-shadow: 0 1cqw 3cqw #0008; }
.w-page i { display: block; height: 1.4cqw; background: #c9c9c9; }
.w-page i.b { background: #111; height: 2cqw; width: 80%; }
.w-page i.r { background: #e5372d; width: 65%; }
.w-page i.y { background: #ffd60a; width: 75%; }
.w-page i.s { width: 50%; }
.w-ext { position: absolute; left: 0; bottom: -0.2cqw; transform: translateY(100%); font: 700 2.4cqw/1.6 var(--mono); color: #ffffff8c; letter-spacing: .1em; }
.w-scan { position: absolute; left: 0; right: 0; top: 10%; height: 2px; background: #2d81ff; box-shadow: 0 0 2cqw #2d81ff; opacity: 0; animation-name: wScan; }
.w-arrow { position: absolute; left: 37.5%; top: 42%; font: 700 5cqw/1 var(--mono); color: #2d81ff; animation-name: wArrow; }
.w-txt { position: absolute; left: 46%; right: 3%; top: 20%; font-size: 7.4cqw; line-height: 1.3; }
.w-txt mark { background: #ffd60a; color: #000; padding: 0 .4cqw; }
.w-txt .w1 { animation-name: wL1; } .w-txt .w2 { animation-name: wL2; } .w-txt .w3 { animation-name: wL3; }
@keyframes wScan { 0%, 4% { opacity: 0; top: 8%; } 8% { opacity: 1; top: 10%; } 62% { opacity: 1; top: 88%; } 66%, 100% { opacity: 0; top: 88%; } }
@keyframes wArrow { 0%, 100% { opacity: 1; transform: none; } 6%, 14% { opacity: .25; } 20%, 60% { opacity: 1; transform: translateX(1cqw); } }
@keyframes wL1 { 0%, 100% { opacity: 1; transform: none; } 4%, 20% { opacity: 0; transform: translateX(-3cqw); } 28%, 96% { opacity: 1; transform: none; } }
@keyframes wL2 { 0%, 100% { opacity: 1; transform: none; } 4%, 36% { opacity: 0; transform: translateX(-3cqw); } 44%, 96% { opacity: 1; transform: none; } }
@keyframes wL3 { 0%, 100% { opacity: 1; transform: none; } 4%, 52% { opacity: 0; transform: translateX(-3cqw); } 60%, 96% { opacity: 1; transform: none; } }

/* ── 02 Watchdog ── */
.fx-watch { --d: 7s; display: grid; grid-template-columns: 1fr 1fr; }
.wa-doc { position: relative; background: #fff; color: #111; font: 400 4.6cqw/1.3 Calibri, "Segoe UI", system-ui, sans-serif; padding: 9cqw 4cqw 0; }
.wa-prm { position: relative; padding: 9cqw 4cqw 0; font-size: 7cqw; line-height: 1.15; }
.wa-lbl { position: absolute; left: 4cqw; top: 3cqw; font: 700 2.3cqw/1 var(--mono); letter-spacing: .14em; color: #0007; }
.wa-prm .wa-lbl { color: #ffffff73; }
.wa-old1 { animation-name: waOld1; opacity: 0; } .wa-new1 { animation-name: waNew1; }
.wa-old2 { animation-name: waOld2; opacity: 0; } .wa-new2 { animation-name: waNew2; }
.wa-new1, .wa-new2 { color: inherit; }
.wa-caret { display: inline-block; width: 2px; height: 1.1em; background: #111; vertical-align: -0.15em; opacity: 0; animation-name: waCaret; }
.wa-saved { position: absolute; left: 4cqw; bottom: 5cqw; font: 600 3cqw/1 system-ui, sans-serif; color: #1a7f37; opacity: 0; animation-name: waSaved; }
.wa-badge { position: absolute; left: 4cqw; bottom: 5cqw; font: 600 3cqw/1 system-ui, sans-serif; color: #30d158; opacity: 0; animation-name: waBadge; }
.wa-flash { position: absolute; inset: 0; background: #30d158; opacity: 0; animation-name: waFlash; }
@keyframes waOld1 { 0% { opacity: 0; } 5%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes waNew1 { 0% { opacity: 1; } 5%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes waOld2 { 0% { opacity: 0; } 5%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes waNew2 { 0% { opacity: 1; } 5%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes waCaret { 0%, 14% { opacity: 0; } 16%, 19% { opacity: 1; } 21%, 23% { opacity: 0; } 25%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes waSaved { 0%, 34% { opacity: 0; transform: translateY(1cqw); } 38%, 56% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }
@keyframes waBadge { 0%, 54% { opacity: 0; } 58%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes waFlash { 0%, 55% { opacity: 0; } 58% { opacity: .22; } 64%, 100% { opacity: 0; } }

/* ── 03 Marker = brani ── */
.fx-mk { --d: 8s; display: grid; grid-template-columns: 40% 1fr; }
.mk-list { position: relative; margin: 0; padding: 3cqw 0; list-style: none; border-right: 1px solid #333; background: #0d0d0f; font: 500 3cqw/1 system-ui, sans-serif; color: #bbb; display: grid; grid-template-rows: repeat(4, 1fr); }
.mk-list li { position: relative; z-index: 1; display: flex; align-items: center; padding: 0 3cqw; white-space: nowrap; overflow: hidden; }
.mk-list li b { color: #ffffff73; font: 700 2.4cqw/1 var(--mono); margin-right: 1.6cqw; }
.mk-hl { position: absolute; left: 0; right: 0; top: 3cqw; height: calc((100% - 6cqw) / 4); background: #2d81ff; animation-name: mkHl; }
.mk-view { position: relative; overflow: hidden; }
.mk-roll { position: absolute; left: 4cqw; right: 2cqw; top: 9cqw; font-size: 5.6cqw; animation-name: mkRoll; }
.mk-roll p { height: 8cqw; line-height: 8cqw; white-space: nowrap; }
.mk-roll .h { color: #9ad1ff; font-weight: 700; }
.fx-mk .fx-ptr { top: 16.5cqw; }
@keyframes mkHl { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(100%); } 50%, 70% { transform: translateY(200%); } 75%, 95% { transform: translateY(300%); } 100% { transform: translateY(0); } }
@keyframes mkRoll { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-16cqw); } 50%, 70% { transform: translateY(-32cqw); } 75%, 95% { transform: translateY(-48cqw); } 100% { transform: translateY(0); } }

/* ── 04 Main ⇄ Backup ── */
.fx-sync { --d: 9s; display: grid; grid-template-columns: 1fr 10% 1fr; align-items: center; padding: 0 4%; }
.sy-scr { position: relative; height: 64%; border: 1px solid #3a3a3e; overflow: hidden; font-size: 4.2cqw; }
.sy-lbl { position: absolute; left: 0; right: 0; top: -1px; z-index: 3; text-align: center; font: 700 2.2cqw/1 var(--mono); letter-spacing: .14em; padding: 1cqw 0; background: #1c1c20; color: #fff; }
.sy-roll { position: absolute; left: 2.5cqw; right: 1cqw; top: 6cqw; animation-name: syRoll; animation-timing-function: linear; }
.sy-roll p { white-space: nowrap; }
.sy-off { position: absolute; inset: 0; z-index: 2; background: #000; display: grid; place-items: center; font: 700 3cqw/1 var(--mono); color: #ff453a; letter-spacing: .12em; opacity: 0; animation-name: syOff; }
.sy-warn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #ff9f0a; color: #000; font: 700 2cqw/1.3 var(--mono); text-align: center; padding: .8cqw .5cqw; opacity: 0; animation-name: syWarn; }
.sy-link { height: 2px; margin: 0 1cqw; background: repeating-linear-gradient(90deg, #30d158 0 3px, transparent 3px 7px); animation-name: syLink; }
.sy-l1 { animation-name: syL1; } .sy-l2 { animation-name: syL2; opacity: 0; }
.sy-bk .sy-lbl { animation-name: syLblBg; }
@keyframes syRoll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes syOff { 0%, 38% { opacity: 0; } 42%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes syWarn { 0%, 44% { opacity: 0; } 47%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes syLink { 0%, 38% { opacity: 1; filter: none; } 42%, 92% { opacity: .5; filter: hue-rotate(250deg) saturate(3); } 96%, 100% { opacity: 1; filter: none; } }
@keyframes syL1 { 0%, 66% { opacity: 1; } 70%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes syL2 { 0%, 66% { opacity: 0; } 70%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes syLblBg { 0%, 66% { background: #1c1c20; } 70%, 94% { background: #2d81ff; } 98%, 100% { background: #1c1c20; } }

/* ── 05 Strumenti di palco ── */
.fx-stage { --d: 10s; }
.st-text { position: absolute; left: 4cqw; right: 3cqw; top: 17cqw; font-size: 7.4cqw; }
.fx-stage .fx-ptr { top: 18cqw; }
.st-sem { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: #06e806; z-index: 3; animation-name: stSem; }
.st-black { position: absolute; inset: 0; z-index: 4; background: #000; display: grid; place-items: center; opacity: 0; animation-name: stShow2; }
.st-black img { width: 52%; opacity: .45; }
.st-day { position: absolute; inset: 0; z-index: 5; background: #fff; mix-blend-mode: difference; opacity: 0; animation-name: stShow3; }
.st-cd { position: absolute; right: 4cqw; top: 4cqw; z-index: 4; text-align: center; font: 700 7cqw/1 "Arial Narrow", "Archivo Narrow", sans-serif; color: #fff; background: #1c1c20; border: 1px solid #444; padding: 1.4cqw 2.4cqw; opacity: 0; animation-name: stShow4; }
.st-cd small { display: block; font: 600 1.8cqw/1.4 var(--mono); letter-spacing: .14em; color: #ff9f0a; }
.st-msg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: #ff9f0a; color: #000; text-align: center; font-weight: 700; font-size: 5.4cqw; padding: 1.6cqw; opacity: 0; animation-name: stShow5; }
.st-lbl { position: absolute; left: 3cqw; bottom: 3cqw; z-index: 6; }
.st-lbl s { opacity: 0; }
.st-k1 { animation-name: stShow1; } .st-k2 { animation-name: stShow2; } .st-k3 { animation-name: stShow3; } .st-k4 { animation-name: stShow4; } .st-k5 { animation-name: stShow5; }
.st-lbl s.st-k1 { opacity: 1; }
@keyframes stSem { 0%, 9% { background: #06e806; opacity: 1; } 10.5%, 18% { background: #ff0000; opacity: 1; } 20%, 97% { background: #ff0000; opacity: 0; } 100% { background: #06e806; opacity: 1; } }
@keyframes stShow1 { 0%, 18% { opacity: 1; } 20%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stShow2 { 0%, 19% { opacity: 0; } 21%, 35% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes stShow3 { 0%, 37% { opacity: 0; } 39%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes stShow4 { 0%, 57% { opacity: 0; } 59%, 75% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes stShow5 { 0%, 77% { opacity: 0; } 80%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ── 06 Logo del tour ── */
.fx-logo { --d: 7s; }
.lg-roll { position: absolute; left: 4cqw; right: 3cqw; top: 10cqw; font-size: 7.4cqw; animation-name: syRoll; animation-timing-function: linear; }
.lg-roll p { white-space: nowrap; }
.fx-logo .fx-ptr { top: 19cqw; }
.lg-img { position: absolute; inset: 0; z-index: 3; opacity: 0; animation-name: lgImg; }
.lg-img img { width: 100%; height: 100%; object-fit: cover; }
.lg-key { position: absolute; right: 4cqw; bottom: 4cqw; z-index: 4; width: 9cqw; height: 9cqw; display: grid; place-items: center; background: #f2f1ee; color: #111; border-radius: 1.2cqw; font: 700 4.6cqw/1 var(--mono); box-shadow: 0 .8cqw 0 #999; opacity: 0; animation-name: lgKey; }
@keyframes lgImg { 0%, 30% { opacity: 0; } 35%, 70% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes lgKey { 0%, 24% { opacity: 0; transform: none; } 26% { opacity: 1; transform: none; } 29% { opacity: 1; transform: translateY(.8cqw); box-shadow: 0 0 0 #999; } 32%, 63% { opacity: 0; transform: none; } 65% { opacity: 1; transform: none; } 68% { opacity: 1; transform: translateY(.8cqw); box-shadow: 0 0 0 #999; } 71%, 100% { opacity: 0; transform: none; } }

/* ── 07 Show Log ── */
.fx-log { --d: 8s; padding: 3% 4%; background: #0a0a0c; }
.fx-log > *, .fx-log p { font: 500 3.3cqw/1.75 var(--mono); color: #d8d8d8; }
.fx-log > .lgh { font-size: 2.4cqw !important; letter-spacing: .12em; color: #ffffff59; border-bottom: 1px solid #ffffff1a; margin-bottom: 1.6cqw; padding-bottom: 1cqw; text-transform: uppercase; }
.fx-log p { white-space: nowrap; overflow: hidden; }
.fx-log p b { color: #6fb1ff; font-weight: 500; margin-right: 1.4cqw; }
.fx-log p.m { color: #ffd60a; }
.g1 { animation-name: g1; } .g2 { animation-name: g2; } .g3 { animation-name: g3; } .g4 { animation-name: g4; } .g5 { animation-name: g5; }
@keyframes g1 { 0%, 100% { clip-path: inset(0); } 3%, 6% { clip-path: inset(0 100% 0 0); } 14%, 97% { clip-path: inset(0); } }
@keyframes g2 { 0%, 100% { clip-path: inset(0); } 3%, 18% { clip-path: inset(0 100% 0 0); } 26%, 97% { clip-path: inset(0); } }
@keyframes g3 { 0%, 100% { clip-path: inset(0); } 3%, 30% { clip-path: inset(0 100% 0 0); } 40%, 97% { clip-path: inset(0); } }
@keyframes g4 { 0%, 100% { clip-path: inset(0); } 3%, 44% { clip-path: inset(0 100% 0 0); } 52%, 97% { clip-path: inset(0); } }
@keyframes g5 { 0%, 100% { clip-path: inset(0); } 3%, 56% { clip-path: inset(0 100% 0 0); } 66%, 97% { clip-path: inset(0); } }

/* ── 08 Export brani ── */
.fx-exp { --d: 7s; }
.ex-src { position: absolute; left: 50%; top: 8%; width: 17cqw; height: 22cqw; margin-left: -8.5cqw; background: #fff; padding: 2.6cqw 2cqw; display: flex; flex-direction: column; gap: 1.6cqw; animation-name: exSrc; }
.ex-src i { display: block; height: 1.2cqw; background: #c9c9c9; }
.ex-src i:nth-child(odd) { background: #111; width: 70%; }
.ex-src span { position: absolute; left: 50%; bottom: -1cqw; transform: translate(-50%, 100%); white-space: nowrap; font: 600 2.2cqw/1 var(--mono); color: #ffffff99; }
.ex-f { position: absolute; top: 64%; width: 21%; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; animation-name: exF; }
.ex-f b { width: 8cqw; height: 10cqw; display: grid; place-items: center; background: #2b579a; color: #fff; font: 700 4.4cqw/1 system-ui, sans-serif; border-radius: .6cqw; }
.ex-f span { font: 600 2cqw/1 var(--mono); color: #ddd; white-space: nowrap; }
.ex-f.f1 { left: 3%; --tx: 37cqw; } .ex-f.f2 { left: 27%; --tx: 13cqw; animation-delay: .12s; } .ex-f.f3 { left: 51%; --tx: -11cqw; animation-delay: .24s; } .ex-f.f4 { left: 75%; --tx: -35cqw; animation-delay: .36s; }
@keyframes exSrc { 0%, 100% { transform: none; } 30% { transform: scale(1.08); } 36% { transform: scale(.94); } 42% { transform: none; } }
@keyframes exF { 0%, 100% { transform: none; opacity: 1; } 6%, 34% { transform: translate(var(--tx), -20cqw) scale(.3); opacity: 0; } 52%, 96% { transform: none; opacity: 1; } }

/* ── 09 Gira da chiavetta ── */
.fx-usb { --d: 6s; }
.us-lap { position: absolute; left: 14%; top: 14%; width: 56%; }
.us-scr { aspect-ratio: 16 / 10; border: 1.2cqw solid #2c2c30; border-bottom-width: 1.6cqw; border-radius: 1.2cqw 1.2cqw 0 0; background: #050505; display: grid; place-items: center; overflow: hidden; }
.us-on { width: 74%; animation-name: usOn; }
.us-base { height: 2.6cqw; margin: 0 -7%; background: linear-gradient(#3a3a3e, #1f1f22); border-radius: 0 0 2cqw 2cqw; }
.us-stick { position: absolute; left: 70.5%; top: 52%; display: flex; align-items: center; animation-name: usStick; }
.us-plug { width: 4.6cqw; height: 3.2cqw; background: #bfc3c8; border: .5cqw solid #8a8e93; }
.us-body { width: 15cqw; height: 6.4cqw; background: #2d81ff; border-radius: 0 1.4cqw 1.4cqw 0; display: grid; place-items: center; font: 700 2.6cqw/1 var(--mono); color: #fff; letter-spacing: .1em; }
.us-led { position: absolute; left: 12.5%; top: 59%; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #30d158; box-shadow: 0 0 1.4cqw #30d158; animation-name: usOn; }
@keyframes usStick { 0%, 100% { transform: none; } 8%, 34% { transform: translateX(8cqw); } 46% { transform: none; } }
@keyframes usOn { 0%, 100% { opacity: 1; } 6%, 50% { opacity: 0; } 58% { opacity: 1; } }

/* ═════════ Controllo ═════════ */
/* A · ShuttleXpress */
.fx-sh { --d: 7s; display: grid; grid-template-columns: 46% 1fr; align-items: center; padding: 0 5%; gap: 4%; background: #0c0c0e; }
.fx-sh > div:nth-child(2) { display: flex; flex-direction: column; }
.sh-ring { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #45454b, #141416 70%); display: grid; place-items: center; animation-name: shRing; }
.sh-ring::after { content: ""; position: absolute; top: 5%; left: 50%; width: 3%; height: 13%; margin-left: -1.5%; background: #2d81ff; border-radius: 2px; }
.sh-ring i { width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5c5c63, #26262a); }
.sh-meter { position: relative; height: 3cqw; background: #222; border-radius: 1.5cqw; }
.sh-meter::before { content: ""; position: absolute; left: 50%; top: -1cqw; bottom: -1cqw; width: 2px; background: #666; }
.sh-fill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 1.5cqw; background: #30d158; animation-name: shFill; }
.sh-lbl { display: grid; margin-top: 3cqw; font: 700 3cqw/1 var(--mono); letter-spacing: .1em; color: #ddd; }
.sh-lbl s { opacity: 0; }
.sh-l1 { animation-name: shL1; }
.sh-lbl s.sh-l1 { opacity: 1; } .sh-l2 { animation-name: shL2; } .sh-l3 { animation-name: shL3; }
@keyframes shRing { 0%, 100% { transform: rotate(0); } 12%, 38% { transform: rotate(-38deg); } 48% { transform: rotate(0); } 60%, 86% { transform: rotate(42deg); } 94% { transform: rotate(0); } }
@keyframes shFill { 0%, 100% { left: 50%; width: 0; background: #ff453a; } 12%, 38% { left: 22%; width: 28%; background: #ff453a; } 48% { left: 50%; width: 0; background: #30d158; } 60%, 86% { left: 50%; width: 34%; background: #30d158; } 94% { left: 50%; width: 0; } }
@keyframes shL1 { 0%, 4%, 44%, 52%, 90%, 100% { opacity: 1; } 8%, 40%, 56%, 86% { opacity: 0; } }
@keyframes shL2 { 0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes shL3 { 0%, 54% { opacity: 0; } 58%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* B · ControlXpress virtuale */
.fx-cx { --d: 6s; background: #121214; }
.cx-win { position: absolute; inset: 8% 8%; border: 1px solid #3a3a3e; border-radius: 1.2cqw; background: #1c1c1e; overflow: hidden; }
.cx-bar { display: flex; gap: 1cqw; align-items: center; padding: 1.4cqw 2cqw; background: #2c2c2e; font: 600 2.2cqw/1 var(--mono); color: #aaa; letter-spacing: .08em; }
.cx-bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #555; }
.cx-bar i:first-child { background: #ff5f57; } .cx-bar i:nth-child(2) { background: #febc2e; } .cx-bar i:nth-child(3) { background: #28c840; margin-right: 1.6cqw; }
.cx-seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 3cqw 4cqw 0; border: 1px solid #444; font: 700 2.4cqw/1 var(--mono); color: #bbb; text-align: center; }
.cx-seg span { padding: 1.6cqw 0; }
.cx-seg span:nth-child(2) { border-inline: 1px solid #444; }
.cx-segs { animation-name: cxSeg; background: #2d81ff; }
.cx-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqw; margin: 3.4cqw 4cqw 0; }
.cx-btns i { height: 7cqw; border-radius: 1cqw; background: #3a3a3e; box-shadow: inset 0 1px 0 #fff2; animation-name: cxBtn; }
.cx-btns i:nth-child(2) { animation-delay: .7s; } .cx-btns i:nth-child(3) { animation-delay: 1.4s; } .cx-btns i:nth-child(4) { animation-delay: 2.1s; } .cx-btns i:nth-child(5) { animation-delay: 2.8s; }
@keyframes cxSeg { 0%, 100% { background: transparent; } 4%, 30% { background: #2d81ff33; } 34%, 64% { background: transparent; } }
@keyframes cxBtn { 0%, 6%, 16%, 100% { background: #3a3a3e; transform: none; } 9%, 13% { background: #2d81ff; transform: scale(.92); } }

/* C · Remote & Timer Remote */
.fx-rm { --d: 8s; background: #121214; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3%; padding: 6% 5%; }
.rm-win { position: relative; border: 1px solid #3a3a3e; border-radius: 1cqw; background: #1c1c1e; overflow: hidden; display: flex; flex-direction: column; }
.rm-t { padding: 1.2cqw 2cqw; background: #2c2c2e; font: 600 2cqw/1 var(--mono); color: #aaa; letter-spacing: .08em; }
.rm-list { position: relative; flex: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, 1fr); font: 500 2.7cqw/1 system-ui, sans-serif; color: #ccc; }
.rm-list li { position: relative; z-index: 1; display: flex; align-items: center; padding: 0 2cqw; white-space: nowrap; overflow: hidden; }
.rm-hl { position: absolute; left: 0; right: 0; top: 0; height: 25%; background: #2d81ff; animation-name: mkHl; }
.rm-time { flex: 1; display: grid; place-items: center; font: 700 7.4cqw/1 "Arial Narrow", "Archivo Narrow", sans-serif; color: #fff; }
.rm-time small { display: block; font: 600 1.8cqw/1.6 var(--mono); color: #ff9f0a; letter-spacing: .14em; text-align: center; }
.rm-sem { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; padding: 0 2cqw 2cqw; }
.rm-sem i { height: 5cqw; border-radius: .8cqw; background: #2a2a2e; }
.rm-g { animation-name: rmG; } .rm-r { animation-name: rmR; }
@keyframes rmG { 0%, 45%, 100% { background: #06e806; } 50%, 95% { background: #2a2a2e; } }
@keyframes rmR { 0%, 45%, 100% { background: #2a2a2e; } 50%, 95% { background: #ff0000; } }

/* D · OSC / Companion */
.fx-osc { --d: 8s; display: grid; grid-template-columns: 40% 1fr 40%; align-items: center; padding: 0 4%; background: #0c0c0e; }
.os-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; padding: 1.8cqw; background: #1a1a1c; border-radius: 1.4cqw; }
.os-deck i { aspect-ratio: 1; border-radius: .8cqw; background: #2c2c30; display: grid; place-items: center; font: 700 2cqw/1 var(--mono); font-style: normal; color: #ddd; letter-spacing: .04em; }
.os-k1 { animation-name: osK1; } .os-k2 { animation-name: osK2; } .os-k3 { animation-name: osK3; } .os-k4 { animation-name: osK4; }
.os-wire { position: relative; height: 2px; margin: 0 1.5cqw; background: #333; }
.os-dot { position: absolute; top: -0.9cqw; left: 0; width: 2cqw; height: 2cqw; margin-top: 1px; border-radius: 50%; background: #2d81ff; box-shadow: 0 0 1.6cqw #2d81ff; opacity: 0; animation-name: osDot; animation-duration: 2s !important; animation-timing-function: ease-in !important; }
.os-addr { position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%); font: 600 2.4cqw/1 var(--mono); color: #6fb1ff; white-space: nowrap; }
.os-addr s { opacity: 0; }
.os-a1 { animation-name: osK1t; }
.os-addr s.os-a1 { opacity: 1; } .os-a2 { animation-name: osK2t; } .os-a3 { animation-name: osK3t; } .os-a4 { animation-name: osK4t; }
.os-scr { position: relative; aspect-ratio: 16 / 10; border: 1px solid #3a3a3e; overflow: hidden; background: #000; font-size: 3.6cqw; }
.os-roll { position: absolute; left: 2cqw; top: 3cqw; animation-name: osRoll; }
.os-roll p { white-space: nowrap; }
.os-black { position: absolute; inset: 0; background: #000; opacity: 0; animation-name: osK3t; }
.os-logo { position: absolute; inset: 0; opacity: 0; animation-name: osK4t; }
.os-logo img { width: 100%; height: 100%; object-fit: cover; }
@keyframes osK1 { 0%, 2%, 10%, 100% { background: #2c2c30; } 4%, 8% { background: #30d158; color: #000; } }
@keyframes osK2 { 0%, 27%, 35%, 100% { background: #2c2c30; } 29%, 33% { background: #2d81ff; } }
@keyframes osK3 { 0%, 52%, 60%, 100% { background: #2c2c30; } 54%, 58% { background: #ff453a; } }
@keyframes osK4 { 0%, 77%, 85%, 100% { background: #2c2c30; } 79%, 83% { background: #ffd60a; color: #000; } }
@keyframes osK1t { 0%, 24% { opacity: 1; } 25%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes osK2t { 0%, 25% { opacity: 0; } 26%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes osK3t { 0%, 51% { opacity: 0; } 53%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes osK4t { 0%, 76% { opacity: 0; } 78%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes osDot { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 22% { left: calc(100% - 2cqw); opacity: 1; } 26%, 100% { left: calc(100% - 2cqw); opacity: 0; } }
@keyframes osRoll { 0%, 4% { transform: translateY(0); } 25% { transform: translateY(-6cqw); } 29%, 100% { transform: translateY(-14cqw); } }

/* layout della lista Controllo con mini-schermo */
.control-list article { display: grid; grid-template-columns: auto 1fr 38%; gap: 20px; align-items: center; }
.control-list article .fx { margin: 0; }
@media (max-width: 1080px) {
  .control-list article { grid-template-columns: auto 1fr; }
  .control-list article .fx { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .fx .a, .ltc-col > span { animation: none !important; }
}

/* ═════════ Server ═════════ */
/* 01 · Song Editor */
.fx-se { --d: 8s; background: #050506; }
.se-wave { position: absolute; left: 3%; right: 3%; top: 12%; height: 42%; }
.se-wave svg { width: 100%; height: 100%; display: block; }
.se-kf { position: absolute; top: 9%; height: 50%; border-left: 2px solid #ffd60a; }
.se-kf b { position: absolute; left: .6cqw; top: 0; font: 700 2cqw/1 var(--mono); color: #ffd60a; white-space: nowrap; }
.se-k1 { left: 13%; } .se-k2 { left: 34%; } .se-k4 { left: 82%; }
.se-k3 { left: 72%; animation-name: seK3; }
.se-snap { position: absolute; top: 2%; left: 56%; font: 700 1.8cqw/1 var(--mono); color: #000; background: #ffd60a; padding: .5cqw .8cqw; opacity: 0; animation-name: seSnap; }
.se-ph { position: absolute; top: 9%; height: 50%; left: 3%; width: 2px; background: #ff453a; box-shadow: 0 0 1.2cqw #ff453a; animation-name: sePh; animation-timing-function: linear; }
.se-txt { position: absolute; left: 4%; right: 4%; bottom: 7%; height: 26%; border-top: 1px solid #222; display: grid; align-items: center; font-size: 6.4cqw; }
.se-txt > * { grid-area: 1 / 1; opacity: 0; white-space: nowrap; }
.se-txt .t0 { opacity: 1; color: #888; animation-name: seT0; } .se-txt .t1 { animation-name: seT1; } .se-txt .t2 { animation-name: seT2; } .se-txt .t3 { animation-name: seT3; } .se-txt .t4 { animation-name: seT4; }
@keyframes seK3 { 0%, 18%, 100% { left: 72%; } 40%, 94% { left: 56%; } }
@keyframes seSnap { 0%, 38% { opacity: 0; } 41%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes sePh { 0% { left: 3%; } 100% { left: 97%; } }
@keyframes seT0 { 0%, 10% { opacity: 1; } 11%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes seT1 { 0%, 10% { opacity: 0; } 11%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes seT2 { 0%, 33% { opacity: 0; } 34%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes seT3 { 0%, 56% { opacity: 0; } 57%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes seT4 { 0%, 80% { opacity: 0; } 81%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* 02 · LTC dal vivo */
.fx-ltc { --d: 6s; background: #050506; }
.ltc-sig { position: absolute; left: 0; right: 0; top: 8%; height: 18%; overflow: hidden; border-bottom: 1px solid #1f1f22; }
.ltc-sig i { position: absolute; inset: 0 -40cqw 0 0; background: repeating-linear-gradient(90deg, transparent 0 1.2cqw, #30d158 1.2cqw calc(1.2cqw + 2px), transparent calc(1.2cqw + 2px) 2.6cqw, #30d158 2.6cqw calc(2.6cqw + 2px), transparent calc(2.6cqw + 2px) 3.2cqw, #30d158 3.2cqw calc(3.2cqw + 2px), transparent calc(3.2cqw + 2px) 5cqw); opacity: .85; animation-name: ltcSig; animation-timing-function: linear; }
.ltc-in { position: absolute; left: 3cqw; top: 1.4cqw; z-index: 1; font: 700 1.8cqw/1 var(--mono); color: #30d158; letter-spacing: .12em; background: #050506; padding: 0 .6cqw; }
.ltc-tc { position: absolute; left: 0; right: 0; top: 32%; display: flex; justify-content: center; font: 700 11cqw/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.ltc-col { display: inline-block; height: 1em; overflow: hidden; }
.ltc-col > span { display: flex; flex-direction: column; }
.ltc-col > span > s { height: 1em; line-height: 1em; }
.ltc-fr > span { animation: ltcFr 1s steps(25) infinite paused; }
.ltc-se > span { animation: ltcSe 6s steps(6) infinite paused; }
.fxh:hover .ltc-col > span, .fxh.play .ltc-col > span { animation-play-state: running; }
.ltc-fps { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap; animation-name: ltcFps; }
.ltc-fps.fx-pill { background: #30d158; color: #000; }
@keyframes ltcSig { 0% { transform: translateX(0); } 100% { transform: translateX(-30cqw); } }
@keyframes ltcFr { from { transform: translateY(0); } to { transform: translateY(-25em); } }
@keyframes ltcSe { from { transform: translateY(0); } to { transform: translateY(-6em); } }
@keyframes ltcFps { 0%, 100% { opacity: 1; } 3%, 18% { opacity: 0; } 24%, 97% { opacity: 1; } }

/* 03 · Timecode nei file */
.fx-bwf { --d: 7s; background: #050506; }
.bw-file { position: absolute; left: 6%; top: 14%; width: 34%; height: 50%; border: 1px solid #3a3a3e; background: #141416; padding: 2cqw; display: flex; flex-direction: column; gap: 1.4cqw; animation-name: bwFile; }
.bw-file b { font: 700 2.6cqw/1 var(--mono); color: #fff; }
.bw-file em { font: 700 1.8cqw/1 var(--mono); font-style: normal; color: #000; background: #ffd60a; padding: .5cqw .8cqw; align-self: flex-start; }
.bw-file svg { flex: 1; width: 100%; }
.bw-ruler { position: absolute; left: 6%; right: 6%; bottom: 14%; height: 12%; border-top: 1px solid #555; background: repeating-linear-gradient(90deg, #555 0 1px, transparent 1px 5%); background-size: 100% 40%; background-repeat: repeat-x; }
.bw-ruler span { position: absolute; top: 2cqw; font: 600 1.8cqw/1 var(--mono); color: #888; }
.bw-chip { position: absolute; left: 58%; bottom: 27%; font: 700 3.6cqw/1 var(--mono); color: #fff; background: #2d81ff; padding: 1.2cqw 1.6cqw; animation-name: bwChip; }
.bw-chip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 3.4cqw; background: #2d81ff; }
@keyframes bwFile { 0%, 8%, 30%, 100% { box-shadow: none; border-color: #3a3a3e; } 14%, 24% { box-shadow: 0 0 3cqw #ffd60a55; border-color: #ffd60a; } }
@keyframes bwChip { 0%, 100% { transform: none; opacity: 1; } 4%, 20% { transform: translate(-26cqw, -18cqw) scale(.6); opacity: 0; } 26% { transform: translate(-26cqw, -18cqw) scale(.8); opacity: 1; } 50%, 96% { transform: none; opacity: 1; } }

/* 04 · Timeline 24h */
.fx-tl { --d: 8s; background: #0a0a0c; }
.tl-head { position: absolute; left: 18%; right: 3%; top: 6%; height: 10%; }
.tl-head > * { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; font: 600 1.9cqw/1 var(--mono); color: #888; }
.tl-r1 { animation-name: tlR1; } .tl-r2 { animation-name: tlR2; opacity: 0; }
.tl-names { position: absolute; left: 3%; top: 18%; bottom: 12%; width: 14%; display: grid; grid-template-rows: repeat(4, 1fr); font: 700 1.8cqw/1 var(--mono); color: #888; letter-spacing: .06em; }
.tl-names span { display: flex; align-items: center; }
.tl-view { position: absolute; left: 18%; right: 3%; top: 18%; bottom: 8%; overflow: hidden; border-left: 1px solid #333; }
.tl-zoom { position: absolute; inset: 0; transform-origin: 63% 50%; animation-name: tlZoom; }
.tl-tr { position: absolute; left: 0; right: 0; height: 22%; }
.tl-tr:nth-child(1) { top: 2%; } .tl-tr:nth-child(2) { top: 27%; } .tl-tr:nth-child(3) { top: 52%; } .tl-tr:nth-child(4) { top: 77%; }
.tl-tr i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.tl-n i { background: #8b5cf6; } .tl-p i { background: #f26b1d; } .tl-t i { background: #e5372d; } .tl-b i { background: #2d81ff; }
.tl-ph { position: absolute; top: 0; bottom: 0; left: 63%; width: 2px; background: #fff; z-index: 2; }
.tl-z { position: absolute; left: 2%; bottom: 2%; z-index: 3; }
.tl-z s { opacity: 0; }
.tl-z .z1 { animation-name: tlR1; opacity: 1; } .tl-z .z2 { animation-name: tlR2; }
.tl-z s.z1 { opacity: 1; }
@keyframes tlZoom { 0%, 18%, 96%, 100% { transform: scaleX(1); } 52%, 72% { transform: scaleX(14); } }
@keyframes tlR1 { 0%, 36%, 88%, 100% { opacity: 1; } 40%, 84% { opacity: 0; } }
@keyframes tlR2 { 0%, 36%, 88%, 100% { opacity: 0; } 40%, 84% { opacity: 1; } }

/* 05 · Scalette */
.fx-sl { --d: 8s; background: #121214; }
.sl-col { position: absolute; top: 5%; bottom: 6%; border: 1px solid #333; background: #1a1a1d; }
.sl-lib { left: 4%; width: 42%; } .sl-set { left: 54%; width: 42%; }
.sl-h { position: absolute; left: 0; right: 0; top: 0; padding: 1.4cqw 1.8cqw; font: 700 1.9cqw/1 var(--mono); color: #888; letter-spacing: .12em; border-bottom: 1px solid #333; }
.sl-r { position: absolute; left: 1.4cqw; right: 1.4cqw; height: 7.4cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.4cqw; background: #2a2a2e; border-radius: .6cqw; font: 500 2.6cqw/1 system-ui, sans-serif; color: #ddd; white-space: nowrap; overflow: hidden; z-index: 1; }
.sl-r b { font: 700 1.8cqw/1 var(--mono); color: #888; }
.sl-r.s1 { top: 8cqw; } .sl-r.s2 { top: 17cqw; } .sl-r.s3 { top: 26cqw; } .sl-r.s4 { top: 35cqw; }
.sl-lib .sl-r { background: #232327; color: #aaa; }
.sl-mv { background: #2d81ff !important; color: #fff !important; animation-name: slMv; }
.sl-sh { animation-name: slSh; }
.sl-hl { position: absolute; left: .6cqw; right: .6cqw; top: 7.4cqw; height: 8.6cqw; border: 2px solid #30d158; border-radius: .9cqw; z-index: 2; animation-name: slHl; }
@keyframes slMv { 0%, 100% { transform: none; opacity: 1; } 3% { transform: none; opacity: 0; } 5% { transform: translate(-50cqw, -9cqw); opacity: 0; } 9%, 14% { transform: translate(-50cqw, -9cqw); opacity: 1; } 34%, 97% { transform: none; opacity: 1; } }
@keyframes slSh { 0%, 100% { transform: none; } 4%, 22% { transform: translateY(-9cqw); } 30%, 97% { transform: none; } }
@keyframes slHl { 0%, 42%, 100% { transform: none; } 50%, 60% { transform: translateY(9cqw); } 68%, 78% { transform: translateY(18cqw); } 86%, 96% { transform: translateY(27cqw); } }

/* 06 · Show portabili */
.fx-show { --d: 7s; background: #0c0c0e; }
.sh-fold { position: absolute; top: 18%; width: 22%; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.sh-fold i { width: 15cqw; height: 11cqw; background: #f2a516; border-radius: .6cqw; position: relative; }
.sh-fold i::before { content: ""; position: absolute; left: 0; top: -1.6cqw; width: 6cqw; height: 2.2cqw; background: #f2a516; border-radius: .6cqw .6cqw 0 0; }
.sh-fold span { font: 600 2cqw/1 var(--mono); color: #ddd; white-space: nowrap; }
.sh-a { left: 4%; } .sh-b { right: 4%; }
.sh-items { position: absolute; left: 30%; top: 12%; display: flex; flex-direction: column; gap: 1.2cqw; }
.sh-items s { font: 600 2.2cqw/1 var(--mono); color: #bbb; padding: .8cqw 1.4cqw; border: 1px solid #333; background: #17171a; white-space: nowrap; }
.sh-items s:nth-child(1) { animation-name: shI1; } .sh-items s:nth-child(2) { animation-name: shI2; } .sh-items s:nth-child(3) { animation-name: shI3; } .sh-items s:nth-child(4) { animation-name: shI4; } .sh-items s:nth-child(5) { animation-name: shI5; }
.sh-pkg { position: absolute; left: 60%; top: 8%; font: 700 2.4cqw/1 var(--mono); color: #fff; background: #2d81ff; padding: 1.4cqw 1.8cqw; border-radius: .6cqw; animation-name: shPkg; }
@keyframes shI1 { 0%, 100% { opacity: 1; transform: none; } 3%, 6% { opacity: 0; transform: translateX(-4cqw); } 12%, 97% { opacity: 1; transform: none; } }
@keyframes shI2 { 0%, 100% { opacity: 1; transform: none; } 3%, 10% { opacity: 0; transform: translateX(-4cqw); } 16%, 97% { opacity: 1; transform: none; } }
@keyframes shI3 { 0%, 100% { opacity: 1; transform: none; } 3%, 14% { opacity: 0; transform: translateX(-4cqw); } 20%, 97% { opacity: 1; transform: none; } }
@keyframes shI4 { 0%, 100% { opacity: 1; transform: none; } 3%, 18% { opacity: 0; transform: translateX(-4cqw); } 24%, 97% { opacity: 1; transform: none; } }
@keyframes shI5 { 0%, 100% { opacity: 1; transform: none; } 3%, 22% { opacity: 0; transform: translateX(-4cqw); } 28%, 97% { opacity: 1; transform: none; } }
@keyframes shPkg { 0%, 16%, 100% { transform: translate(14cqw, 2cqw); opacity: 1; } 22% { transform: translate(14cqw, 2cqw); opacity: 0; } 30% { transform: translate(-26cqw, 0) scale(.7); opacity: 0; } 36% { transform: translate(-26cqw, 0); opacity: 1; } 62% { transform: translate(14cqw, 2cqw); opacity: 1; } }

/* 07 · Viewer in rete */
.fx-net { --d: 6s; background: #0c0c0e; }
.nt-srv { position: absolute; left: 50%; top: 50%; width: 22%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.nt-srv i { display: block; height: 12cqw; border: 1px solid #3a3a3e; border-bottom-width: 1.4cqw; border-radius: .8cqw .8cqw 0 0; background: #000; }
.nt-srv span { display: block; margin-top: 1cqw; font: 700 1.8cqw/1 var(--mono); color: #6fb1ff; letter-spacing: .08em; }
.nt-dev { position: absolute; border: 1px solid #3a3a3e; border-radius: 1cqw; background: #000; overflow: hidden; }
.nt-dev .sy-roll { left: 1.2cqw; top: 1.4cqw; font-size: 2.6cqw; line-height: 1.25; }
.nt-tab { left: 4%; top: 10%; width: 25%; height: 34%; }
.nt-ph { left: 7%; bottom: 8%; width: 12%; height: 38%; border-radius: 1.4cqw; }
.nt-pi { right: 4%; top: 10%; width: 25%; height: 34%; }
.nt-pc { right: 6%; bottom: 8%; width: 22%; height: 32%; }
.nt-lbl { position: absolute; font: 700 1.6cqw/1 var(--mono); color: #888; letter-spacing: .1em; }
.nt-line { position: absolute; height: 2px; left: 50%; top: 50%; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, #2d81ff 0 4px, transparent 4px 9px); background-size: 9px 2px; animation-name: ntFlow; animation-timing-function: linear; opacity: .8; }
@keyframes ntFlow { from { background-position: 0 0; } to { background-position: 90px 0; } }

/* 08 · Portale parlati */
.fx-por { --d: 7s; }
.po-roll { position: absolute; left: 4cqw; right: 3cqw; top: 12cqw; font-size: 6.6cqw; animation-name: syRoll; animation-timing-function: linear; }
.po-roll p { white-space: nowrap; }
.fx-por .fx-ptr { top: 19cqw; }
.po-next { position: absolute; left: 0; right: 0; top: 0; z-index: 5; background: #1c1c20; border-bottom: 1px solid #333; padding: 1.4cqw 3cqw; font: 700 2.4cqw/1 var(--mono); color: #ffd60a; letter-spacing: .08em; animation-name: poNext; }
.po-next b { color: #fff; }
.po-box { position: absolute; inset: 5.2cqw 0 0 0; z-index: 4; background: #0b2a4a; border-top: 2px solid #2d81ff; overflow: hidden; animation-name: poBox; }
.po-box > b { position: absolute; left: 0; right: 0; top: 0; z-index: 1; font: 700 1.9cqw/1 var(--mono); color: #6fb1ff; letter-spacing: .12em; background: #0b2a4a; padding: 2.2cqw 4cqw; border-bottom: 1px solid #2d81ff55; }
.po-box .sy-roll { top: 9cqw; left: 4cqw; font-size: 6.6cqw; color: #e6f0ff; animation-duration: 5s; }
@keyframes poNext { 0%, 100% { transform: none; } 4%, 14% { transform: translateY(-100%); } 22%, 97% { transform: none; } }
@keyframes poBox { 0%, 100% { transform: none; } 4%, 26% { transform: translateY(100%); } 36%, 82% { transform: none; } 92%, 97% { transform: translateY(100%); } }

/* 09 · Main ⇄ Backup (in arrivo) */
.fx-soon .sy-scr, .fx-soon .sy-link { opacity: .55; }
.fx-soon-pill { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); z-index: 5; background: #2d81ff; }

/* Logo tour inventato (Notte Rossa — Tour 2026) */
.tour-logo { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw;
  background: radial-gradient(ellipse at 50% 120%, #ff6a2b 0%, #c4123a 38%, #4a0b3d 72%, #12051a 100%); color: #fff; text-align: center; }
.tl-sun { position: absolute; left: 50%; bottom: -26%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: repeating-linear-gradient(180deg, #ffb347 0 7%, transparent 7% 10%); opacity: .55; }
.tl-name { position: relative; font: 800 13cqw/.86 "Archivo", system-ui, sans-serif; letter-spacing: -.04em; text-shadow: 0 .6cqw 2.4cqw #0007; }
.tl-sub { position: relative; font: 600 2.6cqw/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.tl-sub em { font: italic 400 4.4cqw/1 var(--serif); letter-spacing: 0; text-transform: none; margin-right: .6cqw; }
.os-logo .tl-name { font-size: 6cqw; } .os-logo .tl-sub { font-size: 1.2cqw; } .os-logo .tl-sub em { font-size: 2cqw; } .os-logo .tour-logo { gap: 1cqw; }