/* v2.css — secondo giro: logo definitivo, fotografie, home a rotazione con schermo proiettato in 3D,
   schede in formato 16:9, pagina del proiettore, aiuto tasti. Si carica dopo gli altri fogli e li corregge.
   Regole di sempre: si animano solo transform e opacity; versione calma con «riduci animazioni». */

/* ---------- immagini che entrano in dissolvenza ---------- */
img.fade { opacity: 0; transition: opacity .5s ease; }
img.fade.in { opacity: 1; }

/* ---------- cornice ---------- */
.helpbtn { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--line-strong); font: 700 16px/1 var(--font-display); color: var(--tx2); }
.helpbtn:hover { color: #fff; border-color: var(--accent); }
.helpbtn + .langpick { margin-left: 0; }
.navlink, .tab { transition: color .2s, transform .15s var(--ease); }
.navlink:active, .tab:active { transform: scale(.94); }
@media (max-width: 760px) { .helpbtn { display: none; } }
@media (hover: none) { .helpbtn { display: none; } }

/* ---------- aiuto ---------- */
.help-dlg h3 { margin: 18px 0 8px; font-size: 17px; color: var(--tx2); }
.helplist { display: grid; gap: 8px; }
.helplist li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; align-items: center; gap: 14px; color: var(--tx2); font-size: 15px; }
.keys { display: flex; flex-wrap: wrap; gap: 5px; }
kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong); border-bottom-width: 3px; background: rgba(255, 255, 255, .06); font: 600 13px/1 var(--font-body); color: #fff; white-space: nowrap; }

/* ---------- avvio: il logo si compone in profondità ---------- */
.boot-logo { perspective: 700px; }
#boot.run:not(.boot-short):not(.boot-kids) .boot-logo .mark { animation: logo-depth 1s var(--ease) both; }
@keyframes logo-depth { from { transform: translateZ(-220px) rotateY(-28deg); } to { transform: none; } }
#boot.lit .boot-logo .mark { filter: drop-shadow(0 0 18px rgba(22, 211, 235, .7)); }
.mascot3d { display: inline-block; line-height: 0; }
.mascot3d img { width: 100%; height: 100%; object-fit: contain; }
.mascot3d.pop { animation: m3-pop .6s var(--ease) both; }
@keyframes m3-pop { 0% { transform: scale(.8) translateY(10px); } 60% { transform: scale(1.08) translateY(-8px); } 100% { transform: none; } }

/* ---------- locandine: fotogrammi 16:9, con ripiego fotografico e titolo ---------- */
.poster { aspect-ratio: 16 / 9; background: #0b1024; }
.poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-art { position: absolute; inset: 0; }
.poster-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.62); }
.poster-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, hsl(var(--ph) 90% 45% / .55), transparent 55%), linear-gradient(0deg, rgba(3, 4, 10, .92), rgba(3, 4, 10, .1) 70%); }
.poster-none { padding: 0; background: linear-gradient(150deg, hsl(var(--ph) 85% 30%), hsl(calc(var(--ph) + 60) 70% 10%) 80%); }
.poster-none::before { display: none; }
.poster-kind { position: absolute; left: 12px; top: 10px; z-index: 1; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: rgba(3, 4, 10, .55); border: 1px solid rgba(255, 255, 255, .2); }
.poster-title { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font: 600 clamp(15px, 1.35vw, 19px)/1.1 var(--font-display); -webkit-line-clamp: 2; text-shadow: 0 2px 12px #000; }
.poster:not(.poster-none) .poster-kind, .poster:not(.poster-none) .poster-title, .poster:not(.poster-none) .poster-art { display: none; }

.card { transition: transform .28s var(--ease); }
.card > .card-glow { aspect-ratio: 16 / 9; }
.card-peek { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; border-radius: var(--r2); display: grid; place-items: center; opacity: 0; transition: opacity .25s ease; background: linear-gradient(0deg, rgba(3, 4, 10, .7), transparent 60%); pointer-events: none; }
.card-play { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #02030a; box-shadow: 0 0 34px var(--accent-glow); transform: scale(.7); transition: transform .3s var(--ease); }
.card-play .ic { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-left: 3px; }
.card-peek-meta { position: absolute; right: 10px; bottom: 8px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(3, 4, 10, .7); }
.card:hover .card-peek, .card:focus-visible .card-peek { opacity: 1; }
.card:hover .card-play, .card:focus-visible .card-play { transform: none; }
.card:active { transform: perspective(800px) scale(.97); }
.rail-item:has(.card:hover), .rail-item:has(.card:focus-visible), .grid-item:has(.card:hover) { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .rail .card:hover, .rail .card:focus-visible { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.07) translateY(-4px); }
}
.rail-item { width: clamp(210px, 21vw, 300px); }
.rail.wide .rail-item { width: clamp(270px, 27vw, 380px); }
.sk-card { aspect-ratio: 16 / 9; }
.sk-poster { aspect-ratio: 16 / 9; }

/* logo del canale: immagine locale (ch-NNN) al posto dell'emoji */
.chlogo.has-img { padding: 0; overflow: hidden; background: #0a1226; }
.chlogo.has-img img { width: 100%; height: 100%; object-fit: cover; }

/* scheda del canale in onda: il fotogramma del programma sullo sfondo */
.chcard { isolation: isolate; }
.chcard-back { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.chcard-back img { width: 100%; height: 100%; object-fit: cover; opacity: .0; }
.chcard-back img.in { opacity: .38; }
.chcard-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 11, 26, .95) 20%, rgba(8, 11, 26, .5)); }
.chcard:active { transform: perspective(800px) scale(.98); }

/* ---------- HOME: in evidenza ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: clamp(500px, 68vh, 720px); padding: calc(var(--top) + 30px) var(--gut) 92px; }
.hero::before { display: none; }
.hero-stage { position: absolute; inset: -5% -3%; z-index: -4; will-change: transform; transform: scale(1.06); }
.hero-base { position: absolute; inset: 0; }
.hero-base img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, var(--void) 0, rgba(3, 4, 10, .86) 30%, rgba(3, 4, 10, .25) 62%, rgba(3, 4, 10, .1)), linear-gradient(0deg, var(--void) 2%, rgba(3, 4, 10, .5) 22%, transparent 46%), radial-gradient(ellipse 60% 70% at 78% 40%, hsl(var(--ah) 100% 55% / .16), transparent 70%); }
/* lo schermo proiettato: un piano in prospettiva che segue il puntatore; il fascio parte dal basso a sinistra */
.hero-proj { position: absolute; z-index: -2; right: calc(var(--gut) - 6px); top: calc(var(--top) + 14px); width: min(43vw, 760px); aspect-ratio: 16 / 9; perspective: 1500px; pointer-events: none; }
.hero-screen { position: absolute; inset: 0; transform: rotateY(var(--sy, -13deg)) rotateX(var(--sx, 3deg)); transform-origin: 70% 50%; transform-style: preserve-3d; transition: transform .35s var(--ease); border-radius: 22px; box-shadow: 0 0 0 1.5px hsl(var(--ah) 100% 80% / .55), 0 0 120px -10px hsl(var(--ah) 100% 60% / .55), 0 60px 90px -40px #000; background: #060a18; }
.hero-slide { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; opacity: 0; transform: translateZ(-90px) rotateY(24deg); transition: opacity .7s ease, transform .9s var(--ease); backface-visibility: hidden; }
.hero-slide.on { opacity: 1; transform: none; }
.hero-slide .poster { width: 100%; height: 100%; border-radius: 0; }
.hero-slide .poster-title { font-size: clamp(22px, 2.6vw, 40px); left: 5%; bottom: 7%; }
.hero-slide .poster-kind { left: 5%; top: 6%; font-size: 13px; }
.hero-screen::after { content: ""; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 30%, transparent 70%, rgba(255, 255, 255, .05)); pointer-events: none; }
.hero-ray { position: absolute; left: -62%; bottom: -34%; width: 170%; height: 150%; transform-origin: 0 100%; background: conic-gradient(from 52deg at 0 100%, transparent 0deg, hsl(var(--ah) 100% 75% / .2) 4deg, hsl(var(--ah) 100% 75% / .07) 20deg, transparent 27deg); -webkit-mask-image: linear-gradient(60deg, #000 20%, transparent 70%); mask-image: linear-gradient(60deg, #000 20%, transparent 70%); opacity: .9; }
.hero-text { position: relative; max-width: min(46vw, 620px); gap: 14px; }
.hero-text.swap > * { animation: hero-in .5s var(--ease) both; }
.hero-text.swap > :nth-child(2) { animation-delay: .04s; } .hero-text.swap > :nth-child(3) { animation-delay: .08s; } .hero-text.swap > :nth-child(n+4) { animation-delay: .12s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
.hero h1 { font-size: clamp(38px, 5.2vw, 78px); line-height: .96; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .06em; }
.hero-syn { -webkit-line-clamp: 2; }
.hero-tag .dot { animation: none; }
.hero-picks { position: absolute; right: var(--gut); bottom: 70px; display: flex; gap: 10px; z-index: 1; }
.hero-pick { position: relative; width: clamp(96px, 9vw, 132px); text-align: left; border-radius: 12px; opacity: .72; transition: opacity .2s, transform .2s var(--ease); }
.hero-pick:hover, .hero-pick:focus-visible, .hero-pick[aria-pressed="true"] { opacity: 1; transform: translateY(-3px); }
.hero-pick:active { transform: scale(.96); }
.hero-pick-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(140deg, hsl(var(--ph) 80% 36%), hsl(calc(var(--ph) + 50) 70% 14%)); box-shadow: 0 0 0 1px var(--line-strong); }
.hero-pick[aria-pressed="true"] .hero-pick-img { box-shadow: 0 0 0 2px var(--accent), 0 0 22px var(--accent-glow); }
.hero-pick-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-pick-title { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; }
.hero-pick-bar { display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.hero-pick-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hero-pick.run .hero-pick-bar i { animation: pick-time 9s linear forwards; }
.hero:hover .hero-pick.run .hero-pick-bar i, .hero:focus-within .hero-pick.run .hero-pick-bar i { animation-play-state: paused; }
@keyframes pick-time { to { transform: scaleX(1); } }
.rail.onair { margin-top: -58px; z-index: 2; }
.rail.onair .rail-head h2 { font-size: clamp(20px, 2vw, 26px); }
.hero.skel { min-height: clamp(500px, 68vh, 720px); }

/* ---------- HOME: Storie e libri ---------- */
.stories { position: relative; display: grid; align-items: end; min-height: clamp(380px, 50vw, 680px); margin: clamp(34px, 5vw, 64px) var(--gut) 0; border-radius: var(--r3); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px #000; transition: box-shadow .3s; }
.stories:hover, .stories:focus-visible { box-shadow: 0 0 0 1.5px #ffcf7a, 0 0 70px -14px rgba(255, 190, 90, .6), 0 40px 80px -40px #000; }
.stories-bg { position: absolute; inset: -9% 0; z-index: -2; }
.stories-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(0, calc(var(--par, 0) * -46px), 0) scale(1.04); will-change: transform; }
.stories::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 7, 22, .97) 6%, rgba(5, 7, 22, .7) 22%, transparent 44%); }
.stories-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 28px; padding: clamp(18px, 2.6vw, 36px); }
.stories-text > * { grid-column: 1; }
.stories-text > .btn, .stories-text > .pill { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.stories-kicker { font-size: 14px; color: #ffd591; }
.stories-text strong { font: 700 clamp(28px, 3.6vw, 52px)/1 var(--font-display); text-wrap: balance; }
.stories-text > span:not(.stories-kicker):not(.btn):not(.pill) { color: #d9def5; font-size: clamp(15px, 1.3vw, 18px); max-width: 60ch; }
.stories-cta { margin-top: 8px; --accent: #ffc56b; --accent-hi: #ffe2ad; --accent-glow: rgba(255, 190, 90, .5); }
.stories-soon { margin-top: 8px; padding: 6px 16px; font-size: 14px; color: #ffe2ad; border-color: rgba(255, 213, 145, .5); background: rgba(5, 7, 22, .6); }
.stories.soon { cursor: default; }

/* ---------- HOME: fascia del proiettore ---------- */
.projband { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin: clamp(34px, 5vw, 64px) var(--gut) 0; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(40, 28, 14, .7), rgba(13, 17, 36, .8)); transition: border-color .3s, box-shadow .3s; }
.projband:hover, .projband:focus-visible { border-color: #ffcf7a; box-shadow: 0 0 60px -18px rgba(255, 190, 90, .6); }
.projband-img { position: relative; min-height: 240px; overflow: hidden; }
.projband-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s; }
.projband:hover .projband-img img { transform: scale(1.05); }
.projband-text { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(20px, 3vw, 44px); }
.projband-text strong { font: 600 clamp(24px, 2.8vw, 40px)/1.05 var(--font-display); text-wrap: balance; }
.projband-text > span:not(.btn) { color: var(--tx2); max-width: 46ch; }
.projband .btn .ic { transition: transform .3s var(--ease); } .projband:hover .btn .ic { transform: translateX(4px); }

/* ---------- HOME: categorie con fotografia ---------- */
.cattiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 230px), 1fr)); gap: 14px; margin-bottom: 14px; }
.cattile { position: relative; display: grid; align-content: end; aspect-ratio: 16 / 10; padding: 14px; border-radius: var(--r2); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line); }
.cattile:hover, .cattile:focus-visible { box-shadow: 0 0 0 1.5px var(--accent), 0 0 34px -6px var(--accent-glow); }
.cattile-img { position: absolute; inset: 0; z-index: -2; }
.cattile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .5s; }
.cattile:hover .cattile-img img { transform: scale(1.08); }
.cattile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 4, 10, .88), transparent 62%); }
.cattile-name { font: 600 clamp(18px, 1.8vw, 24px)/1.1 var(--font-display); }
.cattile-live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: rgba(3, 4, 10, .7); font-size: 12px; font-weight: 600; }
.cattile-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); }
.cat { min-height: 52px; }

/* ---------- PROIETTORE ---------- */
.projector { margin-top: calc(-1 * var(--top)); padding-bottom: 60px; --accent: #ffc56b; --accent-hi: #ffe2ad; --accent-glow: rgba(255, 190, 90, .5); }
.ph { position: relative; display: block; overflow: hidden; background: #0b1024; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.pj-hero { position: relative; display: grid; align-items: end; min-height: min(92vh, 900px); padding: calc(var(--top) + 40px) var(--gut) clamp(40px, 7vw, 90px); overflow: hidden; isolation: isolate; }
.pj-hero-bg { position: absolute; inset: -6% 0; z-index: -2; }
.pj-hero-bg .ph { width: 100%; height: 100%; }
.pj-hero-bg img { object-position: 50% 20%; transform: translate3d(0, calc(var(--par, 0) * -60px), 0) scale(1.06); }
.pj-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--void) 0, rgba(3, 4, 10, .86) 16%, transparent 40%); }
.pj-hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 32px; }
.pj-hero-text > * { grid-column: 1; }
.pj-hero-text > .btn { grid-column: 2; grid-row: 1 / span 2; }
.pj-hero h1 { font-size: clamp(30px, 4.3vw, 64px); font-weight: 700; line-height: 1; }
.pj-hero p { color: #dfe3f7; font-size: clamp(15px, 1.4vw, 19px); max-width: 70ch; }
.pj-hero.lit .pj-hero-text > * { animation: hero-in .7s var(--ease) both; } .pj-hero.lit .pj-hero-text > :nth-child(2) { animation-delay: .1s; } .pj-hero.lit .pj-hero-text > :nth-child(3) { animation-delay: .2s; }
.btn.is-soon { opacity: .75; cursor: default; }
.projector h2 { font-size: clamp(26px, 3.2vw, 44px); margin-bottom: clamp(16px, 2.4vw, 28px); }
.pj-how, .pj-gallery { padding: clamp(40px, 6vw, 84px) var(--gut) 0; }
.pj-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); counter-reset: none; }
.pj-step { position: relative; display: grid; align-content: start; gap: 10px; padding-bottom: 22px; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.pj-step .ph { aspect-ratio: 16 / 10; }
.pj-num { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #1a1004; font: 700 24px/1 var(--font-display); box-shadow: 0 0 30px var(--accent-glow); }
.pj-step h3 { padding: 6px 20px 0; font-size: clamp(20px, 1.9vw, 26px); }
.pj-step p { padding: 0 20px; color: var(--tx2); }
.pj-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); margin: clamp(40px, 6vw, 84px) var(--gut) 0; }
.pj-product-img { position: relative; border-radius: var(--r3); overflow: hidden; }
.pj-product-img .ph { aspect-ratio: 16 / 10; }
.pj-beam { position: absolute; left: 33%; top: 32%; width: 90%; height: 90%; transform-origin: 0 0; transform: rotate(-52deg) scaleX(0); opacity: 0; background: conic-gradient(from 80deg at 0 0, transparent 0deg, rgba(255, 214, 150, .5) 5deg, rgba(255, 214, 150, .12) 18deg, transparent 24deg); -webkit-mask-image: linear-gradient(90deg, #000, transparent 75%); mask-image: linear-gradient(90deg, #000, transparent 75%); transition: transform 1.1s var(--ease) .3s, opacity .8s ease .3s; pointer-events: none; }
.pj-product.in .pj-beam { transform: rotate(-52deg) scaleX(1); opacity: 1; }
.pj-product-text p { color: var(--tx2); font-size: clamp(16px, 1.4vw, 19px); max-width: 48ch; }
.pj-arc { display: flex; justify-content: center; gap: clamp(8px, 1.2vw, 18px); perspective: 1400px; padding: 10px 0 30px; }
.pj-shot { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r2); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 50px -30px #000; transform: rotateY(calc(var(--k) * -26deg)) translateZ(calc((1 - var(--k) * var(--k)) * -70px)); transition: transform .4s var(--ease), box-shadow .3s; }
.pj-shot.in { transition: transform .4s var(--ease), box-shadow .3s, opacity .5s ease var(--d, 0ms); }
.pj-shot .ph { aspect-ratio: 3 / 4; }
.pj-shot:hover, .pj-shot:focus-visible { transform: translateZ(40px) scale(1.04); box-shadow: 0 0 0 1.5px var(--accent), 0 0 50px -10px var(--accent-glow); z-index: 2; }
.pj-cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; font-size: 13.5px; font-weight: 600; text-align: left; background: linear-gradient(0deg, rgba(3, 4, 10, .9), transparent); }
.pj-end { position: relative; display: grid; place-items: center; min-height: clamp(280px, 40vw, 520px); margin: clamp(40px, 6vw, 84px) var(--gut) 0; border-radius: var(--r3); overflow: hidden; isolation: isolate; text-align: center; }
.pj-end-bg { position: absolute; inset: 0; z-index: -2; } .pj-end-bg .ph { width: 100%; height: 100%; }
.pj-end::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 6, 20, .55); }
.pj-end-text { display: grid; gap: 18px; justify-items: center; padding: 24px; }
.pj-end h2 { font-size: clamp(30px, 5vw, 72px); margin: 0; }
.photo-dlg { width: min(94vw, 1200px); max-width: none; }
.photo-dlg .ph { border-radius: var(--r2); aspect-ratio: 16 / 9; }

/* ---------- telefono e schermi stretti ---------- */
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: calc(var(--top) + 14px); padding-bottom: 96px; }
  .hero-proj { position: relative; right: auto; top: auto; width: 100%; margin-bottom: 18px; perspective: 900px; }
  .hero-screen { transform: rotateX(4deg); transform-origin: 50% 100%; border-radius: 16px; }
  .hero-slide, .hero-screen::after { border-radius: 16px; }
  .hero-ray { display: none; }
  .hero-text { max-width: none; }
  .hero-shade { background: linear-gradient(0deg, var(--void) 8%, rgba(3, 4, 10, .78) 50%, rgba(3, 4, 10, .5)); }
  .hero-picks { position: static; margin-top: 18px; gap: 6px; }
  .hero-pick { flex: 1; width: auto; min-height: 24px; display: grid; align-items: center; }
  .hero-pick-img, .hero-pick-title { display: none; }
  .hero-pick-bar { height: 4px; margin: 0; }
  .rail.onair { margin-top: -70px; }
  .pj-steps { grid-template-columns: 1fr; }
  .pj-hero-text { grid-template-columns: 1fr; }
  .pj-hero-text > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .pj-product { grid-template-columns: 1fr; }
  .projband { grid-template-columns: 1fr; }
  .pj-arc { flex-wrap: wrap; perspective: none; }
  .pj-shot { flex: 1 1 42%; transform: none; }
  .pj-shot .ph { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .rail-item { width: min(62vw, 250px); }
  .rail.wide .rail-item { width: min(80vw, 320px); }
  .hero h1 { font-size: clamp(32px, 9vw, 46px); }
  .hero-lic { display: none; }
  .stories { min-height: 460px; }
  .stories-text { grid-template-columns: 1fr; }
  .stories-text > .btn, .stories-text > .pill { grid-column: 1; grid-row: auto; justify-self: start; }
  .stories-bg img { object-position: 38% 30%; }
  .helplist li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- versione calma ---------- */
@media (prefers-reduced-motion: reduce) {
  img.fade { transition: none; }
  .hero-slide { transition: opacity .2s linear; transform: none; }
  .hero-screen { transform: none; }
  .hero-text.swap > *, .pj-hero.lit .pj-hero-text > * { animation: none; }
  .hero-pick.run .hero-pick-bar i { animation: none; transform: scaleX(1); }
  .card, .card-play, .pj-shot { transition: none; }
  .stories-bg img, .pj-hero-bg img { transform: none; }
  #boot .boot-logo .mark { animation: none !important; }
  .pj-beam { transition: none; }
}

/* ---------- LIVE: sintonia, altezza del player, piccoli riscontri ---------- */
.screen { max-height: max(260px, calc(100dvh - var(--top) - 268px)); }
.tune { position: absolute; inset: 0; z-index: 2; display: none; overflow: hidden; background: #05070f; }
.screen[data-state="loading"] .tune { display: block; }
.tune .poster { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; animation: tune-in .35s ease both; }
.tune .poster-title, .tune .poster-kind { display: none; }
.tune-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 4, 10, .85), rgba(3, 4, 10, .35) 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
/* la riga che cerca la frequenza: una sola passata lenta avanti e indietro, nessun lampo */
.tune-line { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; background: linear-gradient(90deg, transparent, hsl(var(--ah) 100% 70% / .22) 45%, hsl(var(--ah) 100% 85% / .5) 50%, hsl(var(--ah) 100% 70% / .22) 55%, transparent); animation: tune-sweep 2.2s ease-in-out infinite alternate; }
@keyframes tune-sweep { from { transform: translateX(-30%); } to { transform: translateX(480%); } }
@keyframes tune-in { from { opacity: 0; transform: scale(1.04); } }
.tune-txt { position: absolute; left: clamp(14px, 2.6vw, 34px); bottom: clamp(56px, 7vw, 84px); display: flex; align-items: baseline; gap: 12px; font-size: clamp(14px, 1.5vw, 19px); color: var(--tx2); }
.tune-txt b { font: 700 clamp(34px, 5vw, 64px)/.9 var(--font-display); color: var(--accent); text-shadow: 0 0 26px var(--accent-glow); letter-spacing: .04em; }
.tune-txt i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-left: -6px; animation: tune-dot 1.2s ease-in-out infinite; }
.tune-txt i:nth-of-type(2) { animation-delay: .2s; } .tune-txt i:nth-of-type(3) { animation-delay: .4s; }
@keyframes tune-dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.osd .chlogo { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; }
.chrow { transition: background .2s, transform .15s var(--ease); }
.chrow:active { transform: scale(.98); }
.chrow[aria-selected="true"] .chnum { animation: num-pop .35s var(--ease); }
@keyframes num-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.nowinfo h1 { animation: hero-in .35s var(--ease) both; }
@media (max-width: 960px) { .screen { max-height: 46dvh; } }
@media (prefers-reduced-motion: reduce) { .tune-line { animation: none; opacity: .5; left: 40%; } .tune-txt i, .tune .poster, .nowinfo h1, .chrow[aria-selected="true"] .chnum { animation: none; } }

/* ---------- KIDS: fondali dipinti, robot in 3D, libro che si apre, pianeti con satellite ---------- */
.chlogo.has-img { width: 34px; flex: none; }
.kids[data-sky="sunset"] { --k-sky: linear-gradient(#5b3fb8 0%, #e86aa6 46%, #ffb36b 78%, #ffe3a8 100%); --k-hill1: #3f9a63; --k-hill2: #2a7d5e; --k-sun: #ffd23f; --k-shadow: rgba(60, 20, 80, .3); }
.k-photo { position: absolute; inset: 0; }
.k-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.kids.has-photo .k-orb, .kids.has-photo .k-hill { display: none; }
.kids.has-photo .k-cloud.c2 { display: none; }
.kids.has-photo:not(.night) .k-star { display: none; }
.kids .planet-now { background: var(--k-card); color: var(--k-ink); text-shadow: none; padding: 3px 12px; box-shadow: 0 3px 0 var(--k-shadow); }
.kids.has-photo .k-cloud { opacity: .85; }
.kids.has-photo.night .k-cloud { opacity: .14; }
/* un velo leggero in alto: scritte e pulsanti restano leggibili sopra il fondale */
.kids.has-photo .kids-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 110, .28), transparent 40%); }
.kids-home { gap: 8px; padding: 6px 18px 6px 8px; border-radius: 22px; background: #fff; color: #1b1464; box-shadow: 0 5px 0 var(--k-shadow); }
.kids-home .mark { width: 50px; height: 50px; }
.kids-home .lg-word { color: #1b1464; }
.kids-home:active { transform: scale(.96); }
.kids-hello { align-items: center; flex-wrap: wrap; }
.guide-bot { position: relative; width: clamp(140px, 19vw, 250px); aspect-ratio: 1; }
.bot-hold { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; transform: rotate(var(--lean, 0deg)) rotateX(var(--nod, 0deg)); transition: transform .3s var(--ease); }
.bot-hold .mascot3d, .bot-hold .mascot { display: block; width: 100%; height: 100%; animation: bot-float 3.6s ease-in-out infinite alternate; }
.bot-hold .mascot3d.pop { animation: m3-pop .6s var(--ease) both, bot-float 3.6s ease-in-out .6s infinite alternate; }
@keyframes bot-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.bot-shadow { position: absolute; left: 22%; right: 22%; bottom: -4px; height: 12px; border-radius: 50%; background: rgba(20, 20, 80, .28); }
.guide-bot:active .bot-hold { transform: scale(.94); }
.bubble.talk { animation: pop .4s var(--ease) both; }
.kids-stop .mascot3d, .kids-empty .mascot3d { width: 200px; height: 200px; }
.kids-more .mascot3d { width: 170px; height: 170px; animation: m3-pop .8s var(--ease) .1s both; }

.kbook { margin-left: auto; display: grid; gap: 12px; justify-items: center; width: clamp(270px, 33vw, 470px); border-radius: 26px; padding: 6px; touch-action: manipulation; }
.kbook-3d { position: relative; width: 100%; aspect-ratio: 16 / 10; perspective: 2400px; perspective-origin: 50% 40%; }
.kbook-page, .kbook-front, .kbook-inside { position: absolute; inset: 0; border-radius: 10px 24px 24px 10px; }
.kbook-page { overflow: hidden; background: #1c2676; box-shadow: 0 10px 0 var(--k-shadow), 0 0 0 5px #fff; }
.kbook-page img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.kbook-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 30, .45), transparent 14%); }
.kbook-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(-58deg); transition: transform .9s var(--ease); animation: book-peek 1.8s var(--ease) .6s both; }
@keyframes book-peek { 0% { transform: rotateY(0deg); } 55% { transform: rotateY(-96deg); } 100% { transform: rotateY(-58deg); } }
.kbook:hover .kbook-cover, .kbook:focus-visible .kbook-cover { transform: rotateY(-150deg); animation: none; }
.kbook-front, .kbook-inside { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kbook-front { display: grid; place-items: center; background: linear-gradient(135deg, #2f2bd0, #7a3df0 58%, #ff4f9a); border: 5px solid #fff; color: #ffe14a; overflow: hidden; }
.kbook-front .ic { width: 30%; height: auto; fill: currentColor; stroke: none; }
.kbook-front i { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; background: #fff; transform: scale(var(--s)); clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 2% 36%, 38% 35%); }
.kbook-inside { transform: rotateY(180deg); background: linear-gradient(90deg, #fff7dc, #ffe9b8); border: 5px solid #fff; }
.kbook-text { display: grid; justify-items: center; gap: 2px; padding: 8px 20px; border-radius: 22px; background: var(--k-card); color: var(--k-ink); box-shadow: 0 5px 0 var(--k-shadow); text-align: center; }
.kbook-text strong { font-size: clamp(20px, 2.3vw, 30px); font-weight: 800; line-height: 1.1; }
.kbook-sub { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; color: var(--k-ink2); }
.kbook:active { transform: scale(.97); }
.kbook.soon { cursor: default; } .kbook.soon .kbook-page img { filter: saturate(.6); }

.planet-ball { transform-style: preserve-3d; }
.planet-orbit { position: absolute; inset: -16%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .8); transform: rotateX(72deg) rotateZ(0deg); animation: orbit 10s linear infinite; pointer-events: none; }
.planet-orbit i { position: absolute; left: 50%; top: -11px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px hsl(var(--ph) 100% 80% / .6); }
.planet:nth-child(2n) .planet-orbit { animation-duration: 13s; animation-direction: reverse; }
@keyframes orbit { to { transform: rotateX(72deg) rotateZ(360deg); } }
.fx-paused .planet-orbit, .fx-paused .bot-hold .mascot3d { animation-play-state: paused; }

@media (max-width: 860px) {
  .kbook { width: 100%; max-width: 520px; margin: 14px auto 0; }
  .kids-home .lg-word { height: 34px; width: auto; }
  .kids-home .mark { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-hold .mascot3d, .bot-hold .mascot, .planet-orbit, .kbook-cover { animation: none !important; }
  .kbook-cover { transition: none; }
}

/* ---------- GUIDA: tacche ogni dieci minuti quando la scala è larga, blocchi di programmi brevi ---------- */
.tick:not(.hour):not(:empty) { top: 12px; height: 32px; padding-left: 7px; font: 500 12.5px/32px var(--font-body); color: var(--tx3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gcell.ggroup { border-style: dashed; background: rgba(150, 180, 255, .05); }
.gcell.ggroup b { font-size: 14px; color: var(--tx2); }
.gcell.ggroup .ic { width: 16px; height: 16px; margin: 0 auto; color: var(--tx3); }
.gcell { transition: background .15s, border-color .15s, transform .12s var(--ease); }
.gcell:active { transform: translateX(var(--tx0, 0)) scale(.98); }
.gch .chlogo.has-img { width: 34px; }
.prog-ch .chlogo { margin-right: 4px; }

/* ---------- CINEMA: sezioni per tipo, griglia in 16:9 ---------- */
.secbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.secbar .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-stories { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #ffe2ad; border-color: rgba(255, 213, 145, .5); }
.chip-stories .ic { width: 17px; height: 17px; }
.chip-stories:hover { border-color: #ffcf7a; color: #fff; }
.grid { display: block; }
.grid-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 20vw, 300px), 1fr)); gap: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 22px); }
.grid-sec + .grid-sec { margin-top: clamp(30px, 4vw, 52px); }
.grid-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.grid-sec-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.grid.grouped + .x, .grid.grouped { margin-top: 6px; }
.catalog:has(.grid.grouped) .count { display: none; }
.detail-main { grid-template-columns: minmax(260px, 42%) minmax(0, 1fr); }
.detail-poster .poster-title { font-size: clamp(20px, 2.2vw, 32px); left: 5%; bottom: 7%; }
@media (max-width: 760px) {
  .detail-main { grid-template-columns: 1fr; }
  .detail-poster { width: 100%; }
  .grid-in { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .chip-stories { margin-left: 0; }
}

/* avvio: proporzioni più generose su schermi grandi */
.boot-in { gap: 22px; width: min(92vw, 460px); }
.boot-logo { width: clamp(150px, 16vw, 210px); height: clamp(150px, 16vw, 210px); }
.boot-logo .mark { width: 100%; height: 100%; }
.boot-word .lg-word { height: clamp(26px, 2.6vw, 36px); width: auto; }
.boot-steps { font-size: 14.5px; width: min(86vw, 290px); gap: 6px; }
.boot-bar { width: min(86vw, 290px); }
#boot.boot-kids .boot-steps em { display: none; }
#boot.boot-kids .boot-word .lg-word { height: 74px; color: #fff; filter: drop-shadow(0 3px 0 rgba(27, 20, 100, .35)); }
#boot.boot-kids .boot-word .lg-kids { fill: #ffe14a; }
#boot.boot-kids .boot-logo { width: 210px; height: 210px; }
#boot.boot-kids .boot-logo .mascot3d { width: 210px; height: 210px; }
.kids-home .lg-wordmark { fill: #1b1464; }
.logo .lg-wordmark, .boot-word .lg-wordmark { fill: currentColor; }
@media (max-width: 960px) {
  .screen-panel { gap: 6px; padding: 10px 14px 54px; }
  .screen-panel .panel-art { display: none; }
  .screen-panel strong { font-size: 19px; }
  .screen-panel > span:not(.panel-art) { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .screen-panel .btn { min-height: 34px; font-size: 13.5px; }
}

/* ---------- scheda: la locandina si gira in 3D e mostra licenza e crediti ---------- */
.flip { perspective: 1400px; display: grid; gap: 12px; justify-items: start; }
.flip-in { position: relative; width: 100%; aspect-ratio: 16 / 9; transform-style: preserve-3d; transition: transform .8s var(--ease); border-radius: var(--r3); }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; inset: 0; border-radius: var(--r3); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1.5px hsl(var(--ah) 100% 75% / .6), 0 0 80px -14px var(--accent-glow), 0 40px 80px -30px #000; }
.flip-front .poster { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.flip-back { transform: rotateY(180deg); display: grid; align-content: center; justify-items: start; gap: 8px; padding: clamp(16px, 2.4vw, 32px); background: linear-gradient(140deg, hsl(var(--ah) 70% 22%), #0a0e22 70%); font-size: 14.5px; overflow: auto; }
.flip-back strong { font: 600 clamp(18px, 1.8vw, 24px)/1.1 var(--font-display); }
.flip-back p { max-width: 52ch; }
.flip-btn .ic { width: 16px; height: 16px; }

/* ---------- versione leggera (dispositivi lenti, misurati all'avvio) ---------- */
.fx-lite #sky, .fx-lite #aurora { display: none; }
.fx-lite .hero-screen { transform: none !important; transition: none; }
.fx-lite .hero-ray, .fx-lite .planet-orbit { display: none; }
.fx-lite .hero-slide { transform: none; transition: opacity .3s linear; }
.fx-lite .hero-stage { transform: none !important; }
.fx-lite .pj-shot { transform: none; }
.fx-lite .toolbar, .fx-lite .chlist, .fx-lite .chcard, .fx-lite .kids-parent { -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-lite .bot-hold .mascot3d, .fx-lite .tune-line { animation: none; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
.navlink { white-space: nowrap; }
@media (max-width: 1040px) and (min-width: 761px) { .navlink { padding: 10px 8px; font-size: 15px; } .navlink .ic { display: none; } .navlink::after { left: 8px; right: 8px; } }
.kbook-text { position: relative; z-index: 2; }
.gcell.narrow { padding: 0 7px; }
.gcell.narrow b { font-size: 12.5px; line-height: 1.12; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; letter-spacing: 0; }
.kbook-inside { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 8%; text-align: center; color: #6a3df0; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(106, 61, 240, .12) 27px 29px), linear-gradient(90deg, #fff7dc, #ffe9b8); box-shadow: inset -18px 0 22px -14px rgba(90, 60, 20, .45); }
.kbook-inside .ic { width: 22%; height: auto; fill: #ffd23f; stroke: #e2a400; }
.kbook-inside b { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; line-height: 1.1; }

/* KIDS TV sopra il fondale dipinto: i testi stanno su una scheda, così si leggono sempre */
.kids-tv .osd { color: #fff; } .kids-tv .osd-txt b { color: #fff; }
.kids-tv .nowinfo { margin-top: 16px; padding: 18px 22px 20px; border-radius: 28px; background: var(--k-card); color: var(--k-ink); box-shadow: 0 6px 0 var(--k-shadow); }
.kids-tv .nowinfo h1, .kids-tv .nowinfo .nowinfo-name, .kids-tv .nowinfo .nowinfo-time, .kids-tv .nowinfo .nowinfo-next b { color: var(--k-ink); text-shadow: none; }
.kids-tv .nowinfo .dim, .kids-tv .nowinfo .nowinfo-syn, .kids-tv .nowinfo .pill { color: var(--k-ink2); text-shadow: none; }
.kids-tv .nowinfo .pill { border-color: var(--k-ink2); }
.kids-tv .nowinfo .chnum { text-shadow: none; }
.kids-tv .nowinfo .prog { background: rgba(27, 20, 100, .16); }
.kids.night .kids-tv .nowinfo .prog { background: rgba(255, 255, 255, .2); }
.kids-tv .nowinfo .nowinfo-next { background: transparent; border-color: var(--k-ink2); color: var(--k-ink); }
.kids-tv .nowinfo .chnum { color: var(--k-violet); } .kids.night .kids-tv .nowinfo .chnum { color: #ffe14a; }
.hero-text { min-width: 0; }
.hero-text > * { min-width: 0; max-width: 100%; }
@media (max-width: 430px) { .hero-actions { gap: 8px; } .hero-actions .btn.big { padding: 0 14px; font-size: 15px; min-height: 50px; gap: 7px; } }