/* Homepage: direzione grafica ripresa da ZETA Evolution, valida per i tre temi.
   Si carica dopo style.css, temi.css e corso.css (che definisce le variabili --a1, --a2, --g1, --g2). */

/* ---------- Hero con video ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
/* Come nella sales page di ZETA Evolution: il video si vede pulito, senza velature sopra */
html[data-tema] .hero::after,html[data-tema] .hero::before{content:none;display:none}
.hero .cx-stripe{z-index:2}
.hero h1{font-family:var(--cx-display);text-transform:var(--cx-upper);text-shadow:3px 0 0 color-mix(in srgb,var(--g1) 70%,transparent),-3px 0 0 color-mix(in srgb,var(--g2) 55%,transparent)}
.hero h1 em{color:var(--a1);font-weight:inherit}
[data-tema="classico"] .hero h1 em{font-style:italic;font-weight:800;color:#9bbcff}
[data-tema="gotico"] .hero h1{text-shadow:0 3px 0 #000a,0 0 30px #6e171744}
[data-tema="gotico"] .hero h1 em{color:#ddbb85}
.hero-foot{bottom:64px}
.eyebrow{text-transform:uppercase}

/* ---------- Fascia scorrevole ---------- */
.discipline{display:block;padding:0;overflow:hidden;white-space:nowrap;border-block:1px solid color-mix(in srgb,var(--a1) 40%,transparent);background:color-mix(in srgb,var(--bg) 90%,var(--a1))}
.marquee{display:inline-flex;align-items:center;gap:clamp(18px,3vw,44px);padding:20px clamp(9px,1.5vw,22px);animation:scorri 38s linear infinite;will-change:transform;font:600 var(--fs-small)/1 var(--cx-display);letter-spacing:.16em;text-transform:uppercase}
.marquee-set{display:inline-flex;align-items:center;gap:inherit;flex-shrink:0;padding-right:clamp(18px,3vw,44px)}.marquee i{font-style:normal;color:var(--a1)}
.discipline:hover .marquee{animation-play-state:paused}
@keyframes scorri{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;justify-content:center;white-space:normal;width:100%}.marquee .dup{display:none}}

/* ---------- Pulsanti ---------- */
[data-tema="classico"] .button,[data-tema="gotico"] .button{font-family:var(--cx-display)}
[data-tema="classico"] .button{background:var(--fill)}
[data-tema="classico"] .button:hover{background:#1f52b8}
[data-tema="classico"] .button{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:0}
[data-tema="classico"] .button:focus-visible{clip-path:none}
[data-tema="punk"] .button,[data-tema="classico"] .button{text-transform:var(--cx-upper);letter-spacing:.02em}
.button:not(:disabled):hover{transform:translateY(-2px)}

/* ---------- Mini corso: sezione scura in tutti i temi ---------- */
[data-tema="classico"] .resources{background:radial-gradient(ellipse at 85% 0,#14306e 0,transparent 55%),linear-gradient(180deg,#0b1020,#101214);color:var(--text);border-block:1px solid #467ff755}
[data-tema="classico"] .resources .section-head>p,[data-tema="classico"] .mini-intro p,[data-tema="classico"] .lesson-outline p,[data-tema="classico"] .tutorials span:last-child{color:var(--muted)}
[data-tema="classico"] .mini-intro .lead{color:var(--text)}
[data-tema="classico"] .lesson-outline li,[data-tema="classico"] .tutorials,[data-tema="classico"] .tutorials>a{border-color:#467ff740}
[data-tema="classico"] .lesson-number{color:var(--a1)}
[data-tema="classico"] .tutorials a:hover h3{color:#9bbcff}
[data-tema="classico"] .button:disabled{background:#1c2438;color:#aab6cc;border-color:#467ff755}
.lesson-outline li{align-items:flex-start;gap:26px}
.lesson-number{font:700 var(--fs-h3)/1 var(--cx-display);min-width:58px;padding-top:0;color:var(--a1);text-shadow:2px 0 0 color-mix(in srgb,var(--g1) 65%,transparent),-2px 0 0 color-mix(in srgb,var(--g2) 50%,transparent)}
[data-tema="gotico"] .lesson-number{text-shadow:none}
.mini-intro h3{font-family:var(--cx-display);text-transform:var(--cx-upper)}

/* ---------- Corsi: accordion con immagine ---------- */
.course-accordion summary h3{font-family:var(--cx-display);text-transform:var(--cx-upper)}
.course-accordion summary:hover h3{color:var(--a1)}
.course-accordion[open]{background:linear-gradient(120deg,color-mix(in srgb,var(--a1) 8%,transparent),transparent 70%)}
.course-detail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;max-width:none;padding:0 8px 48px 75px}
.course-detail>.course-image{margin:0;max-height:340px;height:100%;border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:8px 8px 0 color-mix(in srgb,var(--g1) 55%,transparent)}
.course-detail .actions{margin-top:18px;gap:14px 26px}
.course-detail .actions .button{margin-top:0}
@media(max-width:900px){.course-detail{grid-template-columns:1fr;gap:26px;padding:0 8px 34px}.course-detail>.course-image{max-height:240px}}
.course-detail .cx-chips{margin:0 0 18px}

/* ---------- Software ---------- */
.software-grid article{position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.software-grid article:hover{transform:translateY(-4px);border-top-color:var(--a2)}
.software-grid article::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a1) 22%,transparent),transparent 70%)}
.software-mark{text-shadow:2px 0 0 color-mix(in srgb,var(--g1) 55%,transparent),-2px 0 0 color-mix(in srgb,var(--g2) 45%,transparent)}

/* ---------- Chiusura ---------- */
.closing{position:relative;border-top:12px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--stripe-a) 0 14px,var(--stripe-b) 14px 28px) 12}
[data-tema="classico"] .closing{background:radial-gradient(ellipse at 80% 20%,#1f5ad6,#06429e 55%,#041f4d)}
.closing h2{font-family:var(--cx-display);text-transform:var(--cx-upper);text-shadow:3px 0 0 color-mix(in srgb,var(--g1) 60%,transparent),-3px 0 0 color-mix(in srgb,var(--g2) 45%,transparent)}
[data-tema="gotico"] .closing h2{text-shadow:none}
[data-tema="punk"] .closing h2{text-shadow:3px 0 0 #fff8}

/* ---------- Titoli di sezione ---------- */
.section-head h2{font-family:var(--cx-display);text-transform:var(--cx-upper)}
.about-title h2{font-family:var(--cx-display);text-transform:var(--cx-upper)}
[data-tema="classico"] .closing .button{background:#f3f5f8;color:#06429e}[data-tema="classico"] .closing .button:hover{background:#d1e0ff}

/* ---------- Software come percorso di lavoro ---------- */
.software-label{font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;color:var(--a2);margin:0 0 18px}
.software-grid{position:relative}
.software-grid::before{content:'';position:absolute;left:4%;right:4%;top:26px;height:2px;background:repeating-linear-gradient(90deg,var(--a1) 0 10px,transparent 10px 20px);opacity:.55}
.software-grid article{padding-top:56px;z-index:1}
.software-step{position:absolute;top:8px;left:20px;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;background:var(--bg);border:2px solid var(--a1);color:var(--a1);font:700 var(--fs-small)/1 var(--cx-display);z-index:2}
.software-note{margin:26px 0 0;padding:16px 20px;border-left:3px solid var(--a1);background:color-mix(in srgb,var(--bg) 88%,var(--a1));color:var(--muted);font-size:var(--fs-small);max-width:760px}
@media(max-width:1100px){.software-grid::before{display:none}.software-grid article{padding-top:60px}}

/* ---------- Rivelazione allo scroll (attiva solo se main.js aggiunge .js-rv) ---------- */
.js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--d,0ms),transform .7s ease var(--d,0ms)}
.js-rv .rv.in{opacity:1;transform:none}
@media(min-width:1101px){.software-grid{gap:36px}}

/* ---------- Scene allo scroll (stesso linguaggio della pagina di ZETA Evolution) ---------- */
.scene{position:relative;height:calc(100svh + var(--n,3) * 55svh);background:#000;--ink:#fff}
.scene-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-stage::before,.scene-stage::after{content:'';position:absolute;left:0;right:0;height:22vh;z-index:2;pointer-events:none}
.scene-stage::before{top:0;background:linear-gradient(#000,transparent)}
.scene-stage::after{bottom:0;height:44vh;background:linear-gradient(0deg,#000d,transparent)}
.scene-caption{position:absolute;z-index:3;left:var(--gutter);bottom:15vh;margin:0;max-width:20ch;font:800 clamp(2rem,5vw,4.6rem)/1.02 var(--cx-display,Montserrat);letter-spacing:-.02em;text-transform:var(--cx-upper,none);color:#fff;text-shadow:0 4px 40px #000a;opacity:0;transform:translateY(34px);will-change:opacity,transform}
.scene-caption.scene-title{font-size:clamp(2.4rem,6.4vw,5.8rem);max-width:17ch}
.scene-caption em{font-style:normal;font-weight:inherit;color:var(--a1);text-shadow:3px 0 0 color-mix(in srgb,var(--g1) 75%,transparent),-3px 0 0 color-mix(in srgb,var(--g2) 60%,transparent)}
[data-tema="classico"] .scene-caption em{font-style:italic;font-weight:900;color:#9bbcff}
[data-tema="gotico"] .scene-caption em{color:#ddbb85;text-shadow:0 3px 0 #000a,0 0 30px #6e171766}
.scene-caption.is-visible::before{content:'';display:block;width:56px;height:6px;margin-bottom:22px;background:var(--a1)}
@media(max-width:760px){.scene-caption{bottom:20vh;right:var(--gutter);font-size:clamp(2.1rem,9vw,2.8rem)}.scene-caption.scene-title{font-size:clamp(2.6rem,11.5vw,3.6rem)}}
/* Senza movimento: scena breve, primo frame e didascalie una sotto l'altra */
.scene-static{height:auto}.scene-static .scene-stage{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:24px;padding:0 var(--gutter) 12vh}
.scene-static .scene-canvas{height:100%}.scene-static .scene-caption{position:relative;left:auto;bottom:auto;opacity:1!important;transform:none!important;max-width:none}

/* ---------- Menu trasparente sulla hero, come in ZETA Evolution ---------- */
.header{position:fixed;left:0;right:0;top:0;padding-block:18px;background:linear-gradient(#000c,transparent);border-bottom-color:transparent;backdrop-filter:none;transition:background .3s,border-color .3s}
.header.is-solid,.header:has(nav.open){background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--line);backdrop-filter:blur(12px)}
[data-tema] .header{background:linear-gradient(#000c,transparent)}
[data-tema] .header.is-solid,[data-tema] .header:has(nav.open){background:color-mix(in srgb,var(--bg) 94%,transparent)}
.header nav a:not(.members){font-family:var(--cx-display);letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-small);position:relative;padding:6px 0}
.header nav a:not(.members)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--a1);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.header nav a:not(.members):hover::after,.header nav a.is-active::after{transform:scaleX(1)}
.header nav a.is-active{color:var(--a1)}
.draft{position:fixed;left:14px;bottom:14px;white-space:nowrap;z-index:90;padding:5px 12px;font-size:12px;letter-spacing:.14em;border:1px solid #ffffff40;background:#000b;color:#fff;border-radius:2px;pointer-events:none}
.draft span{display:none}
@media(max-width:760px){.draft{left:8px;bottom:8px;font-size:10px;padding:4px 8px}}
.hero{height:100svh;min-height:640px;align-items:center}
.hero-content{padding-block:110px 90px}
html[data-tema] .hero-shade,.hero-shade{background:linear-gradient(to top,var(--bg) 0%,#13131373 14%,#13131300 38%),linear-gradient(to right,#0b0b0cb3,transparent 60%)}
/* Il personaggio nel video sta a circa 2/3 della larghezza: in verticale si sposta il ritaglio */
@media(max-aspect-ratio:1/1){.hero-video{object-position:72% 50%}}
@media(max-width:760px){.hero{align-items:flex-end}.hero-content{padding-bottom:90px}.hero-foot{display:none}}

/* Glitch alla fine del video, prima che riparta (la classe is-glitch la mette semplice.js): intensa nel Punk, dimezzata negli altri temi */
.hero{--g:.5}
[data-tema="punk"] .hero{--g:1}
.hero-glitch-bande{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(to bottom,transparent 8%,#ff003c8c 8% 11%,transparent 11% 38%,#00f0ff80 38% 40%,transparent 40% 63%,#ff003c73 63% 67%,transparent 67% 86%,#00f0ff80 86% 88%,transparent 88%)}
.hero.is-glitch .hero-video{animation:hero-glitch .4s steps(1,end) both}
.hero.is-glitch .hero-glitch-bande{animation:hero-glitch-bande .4s steps(1,end) both}
@keyframes hero-glitch{
  0%{transform:translate(0);filter:none}
  10%{transform:translate(calc(-16px*var(--g)),0) skewX(calc(-2deg*var(--g)));filter:hue-rotate(40deg) saturate(1.7) brightness(1.3)}
  22%{transform:translate(calc(14px*var(--g)),calc(-3px*var(--g)));filter:contrast(1.5) brightness(.8)}
  34%{transform:translate(0);filter:none}
  46%{transform:translate(calc(-8px*var(--g)),calc(2px*var(--g)));filter:hue-rotate(-60deg) saturate(2.2)}
  58%{transform:translate(calc(20px*var(--g)),0) skewX(calc(2deg*var(--g)));filter:brightness(1.7) contrast(1.3)}
  72%{transform:translate(calc(-10px*var(--g)),calc(-2px*var(--g)));filter:hue-rotate(90deg) contrast(1.4)}
  86%{transform:translate(calc(6px*var(--g)),0);filter:saturate(.4) brightness(1.2)}
  100%{transform:translate(0);filter:none}
}
@keyframes hero-glitch-bande{
  0%,34%,100%{opacity:0;transform:translateX(0)}
  10%{opacity:calc(.9*var(--g));transform:translateX(-24px)}
  22%{opacity:calc(.7*var(--g));transform:translateX(30px)}
  46%{opacity:calc(.9*var(--g));transform:translateY(40px)}
  58%{opacity:calc(.8*var(--g));transform:translateX(-18px)}
  72%{opacity:calc(.6*var(--g));transform:translateY(-30px)}
  86%{opacity:calc(.4*var(--g));transform:translateX(10px)}
}
@media(prefers-reduced-motion:reduce){.hero.is-glitch .hero-video,.hero.is-glitch .hero-glitch-bande{animation:none}}

/* ---------- Schede con tacca d'angolo (come le schede di Evolution) ---------- */
.course-detail>.course-image,.software-grid article,.mentorship{position:relative}
.course-detail>.course-image::before,.software-grid article::before,.mentorship::before{content:'';position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-left:4px solid var(--a1);border-top:4px solid var(--a1);z-index:3;pointer-events:none}

/* ---------- Elenco corsi: l'immagine del corso emerge da destra al passaggio ---------- */
.course-accordion summary{position:relative;isolation:isolate;overflow:hidden}
.course-accordion summary::before{content:'';position:absolute;top:0;bottom:0;right:0;width:62%;z-index:-1;background:var(--im) 70% 30%/cover no-repeat;opacity:0;transform:translateX(40px);transition:opacity .45s,transform .45s;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.course-accordion summary:hover::before,.course-accordion summary:focus-visible::before{opacity:.5;transform:none}
.course-accordion[open] summary::before{opacity:.28;transform:none}
#corso-anatomy{--im:url(assets/scene/primopiano-01.jpg)}#corso-workshop{--im:url(assets/scene/primopiano-20.jpg)}#corso-god{--im:url(assets/scene/primopiano-40.jpg)}#corso-evolution{--im:url(assets/scene/primopiano-60.jpg)}
@media(hover:none){.course-accordion summary::before{opacity:.22;transform:none;width:80%}}
@media(prefers-reduced-motion:reduce){.course-accordion summary::before{transition:none}}

/* ---------- Mini corso: video di sfondo (stesso di ZETA Evolution), molto attenuato ---------- */
.resources{position:relative;isolation:isolate;overflow:hidden}
.res-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.res-bg video{width:100%;height:100%;object-fit:cover;object-position:75% 20%;opacity:.4}
.res-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 72%,transparent) 50%,color-mix(in srgb,var(--bg) 55%,transparent)),linear-gradient(180deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
[data-tema="classico"] .res-bg{background:#0b1020}
[data-tema="classico"] .res-bg::after{background:linear-gradient(90deg,#0b1020 8%,#0b1020c8 50%,#0b102090),linear-gradient(180deg,#0b1020,transparent 18%,transparent 82%,#101214)}
@media(max-width:760px){.res-bg video{opacity:.35}}
@media(prefers-reduced-motion:reduce){.res-bg video{display:none}}

/* ---------- Mini corso: titolo, una frase, programma in elenco, modulo di iscrizione ---------- */
.mc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:center;padding-block:clamp(90px,10vw,150px)}
.mc h2{font-family:var(--cx-display);text-transform:var(--cx-upper);margin-bottom:28px}
.mc .lead{font-size:var(--fs-lead);color:var(--text);max-width:28ch;line-height:1.35}
.mc-copy>p:not(.eyebrow){max-width:44ch;color:var(--muted)}
.mc-steps{list-style:none;padding:0;margin:36px 0 0;border-top:1px solid color-mix(in srgb,var(--a1) 35%,transparent)}
.mc-steps li{display:flex;gap:22px;align-items:baseline;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--a1) 35%,transparent)}
.mc-num{font:700 var(--fs-small)/1 var(--cx-display);color:var(--a1);min-width:2.2em;letter-spacing:.08em}
.mc-form{position:relative;padding:35px;overflow:hidden;background:color-mix(in srgb,#000 55%,var(--raised));border:1px solid color-mix(in srgb,var(--a1) 35%,transparent)}
.mc-form::before{content:'';position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-left:4px solid var(--a1);border-top:4px solid var(--a1);z-index:3}
.mc-fig{width:calc(100% + 70px);max-width:none;margin:-35px -35px 28px;aspect-ratio:16/7;object-fit:cover;object-position:50% 22%;filter:saturate(1.05)}
.mc-form h3{font-family:var(--cx-display);text-transform:var(--cx-upper);margin-bottom:10px}
.mc-form>p{color:var(--muted);font-size:var(--fs-small);margin-bottom:6px}
.mc-form .waiting-form .button{background:var(--fill);color:var(--on-a1);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));font-family:var(--cx-display);text-transform:var(--cx-upper)}
[data-tema="classico"] .mc-form .waiting-form .button{color:#fff}
.mc-form .waiting-form .button:disabled{background:#2b2f38;color:#9aa3b2}
@media(max-width:900px){.mc{grid-template-columns:1fr}}

/* ---------- Testate di sezione: solo titolo ---------- */
.section-head{margin-bottom:clamp(36px,5vw,64px)}

/* ---------- Social ---------- */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0}
.social a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border:1px solid color-mix(in srgb,currentColor 45%,transparent);font-size:var(--fs-small);transition:transform .2s,border-color .2s}
.social svg{width:22px;height:22px;flex-shrink:0}
.social a:hover{border-color:currentColor;transform:translateY(-2px)}
.closing-social{margin-top:60px}.closing-social .eyebrow{margin-bottom:14px}

.mc{align-items:start}.mc-copy{padding-top:clamp(0px,4vw,60px)}
.mc-copy{position:sticky;top:130px;align-self:start}.mc-fig{aspect-ratio:16/5}.mc-form .waiting-form label{margin-top:8px}.mc-form .waiting-form input:not([type=checkbox]){min-height:48px}.mc-form .waiting-form .consent{margin-block:10px}@media(max-width:900px){.mc-copy{position:static}}