/* ============================================================
   CLONE "CPH OPEN / Home" — header fisso bianco + hero fissi
     · header sticky opaco color pagina (#EBEBEB), sempre visibile
     · la prima foto inizia SOTTO l'header
     · DUE hero FISSI: il contenuto (testo/foto) scorre SOPRA coprendoli,
       e l'immagine dell'hero si muove verso l'alto (parallax JS -> ovunque)
     · solo un hero visibile per volta (gestito via JS: .is-active)
     · fallback senza JS / reduced-motion: hero normali in flusso
   Richiede: style.css + style-cph.css (variabili, font, footer a tema).
   ============================================================ */

body{background:#EBEBEB;}

/* ---------- HEADER FISSO BIANCO (color pagina) ---------- */
.nav{background:#fff;border-bottom:1px solid var(--border);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.nav.scrolled{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.07);}

/* ---------- HERO ---------- */
/* Base (fallback no-JS / reduced-motion): hero normale in flusso */
.cph-hero{position:relative;height:calc(100vh - var(--hh,60px));min-height:420px;
  overflow:hidden;background:#111;}
.cph-hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;
  transform:translateZ(0);backface-visibility:hidden;}
.cph-hero-img{position:absolute;left:0;top:-14%;width:100%;height:128%;
  object-fit:cover;object-position:center;will-change:transform;}
@media(max-width:768px){.cph-hero-img.cph-hero-mob60{object-position:60% 60%;}}
/* mobile: solo la PRIMA hero (home + contest) più bassa, così la foto è ritagliata meno.
   Le seconde hero restano a tutta altezza per non lasciare spazi vuoti nello scroll. */
@media(max-width:768px){
  .cph-hero.cph-hero-lowm{height:60vh;min-height:340px;}
  html.cphfx .cph-hero.cph-hero-lowm{height:60vh;}
  html.cphfx .cph-reveal.cph-reveal-lowm{height:60vh;}
}
.cph-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 68%,rgba(10,10,10,.28) 100%);}

/* Con JS attivo: hero FISSO dietro, il contenuto ci scorre sopra.
   Solo l'hero attivo è visibile (evita che il 2° copra il 1°). */
html.cphfx .cph-hero{position:fixed;left:0;right:0;top:var(--hh,60px);
  height:calc(100vh - var(--hh,60px));z-index:0;visibility:hidden;}
html.cphfx .cph-hero.is-active{visibility:visible;}
/* spazio-scroll che rivela l'hero fisso (solo con JS) */
.cph-reveal{height:0;}
html.cphfx .cph-reveal{height:calc(100vh - var(--hh,60px));}
/* indicatore "Scroll" (solo primo hero) */
.cph-scroll{position:absolute;z-index:3;left:0;right:0;bottom:24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;
  font-family:var(--f-sub);font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:12px;}
.cph-scroll .line{width:1px;height:38px;background:rgba(255,255,255,.8);transform-origin:top;
  animation:cphScroll 1.8s ease-in-out infinite;}
@keyframes cphScroll{0%{transform:scaleY(.2);opacity:.3;}50%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(.2);opacity:.3;}}
@media(prefers-reduced-motion:reduce){.cph-scroll .line{animation:none;}}

/* ---------- BLOCCHI DI CONTENUTO (fondo pieno, coprono l'hero) ---------- */
.cph-block{position:relative;z-index:2;background:#EBEBEB;}

.cph-wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.cph-intro{padding-top:clamp(56px,9vw,116px);padding-bottom:clamp(26px,4vw,46px);}
.cph-h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-2.8px;line-height:.95;
  -webkit-text-stroke:1.1px currentColor;
  font-size:clamp(42px,6.6vw,76px);color:#16130f;max-width:760px;
  display:inline-block;transform:scaleX(1.2);transform-origin:left;}
.cph-lead{max-width:760px;margin-top:18px;}
.cph-body{font-family:var(--f-body);font-size:clamp(17px,1.7vw,18px);line-height:1.5;
  color:#484747;max-width:640px;margin-top:18px;}
.cph-body + .cph-body{margin-top:14px;}
.cph-body a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.cph-body a:hover{text-decoration:none;}

.cph-single{padding-top:clamp(24px,3vw,44px);padding-bottom:0;}

/* foto B/N -> colore (classe .is-color aggiunta da cph-anim.js all'80% in vista) */
.cph-bw img{filter:grayscale(1);transition:filter .9s ease;}
.cph-bw.is-color img{filter:grayscale(0);}
@media(prefers-reduced-motion:reduce){.cph-bw img{transition:none;}}

.cph-gridwrap{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(56px,9vw,110px);}
.cph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);}
@media(max-width:820px){.cph-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cph-grid{grid-template-columns:1fr;}}
.cph-grid .cph-fig{margin:0;}
.cph-grid .cph-fig img{aspect-ratio:3/2;object-fit:cover;}

.cph-fig{margin:0 0 clamp(36px,5vw,72px);}
.cph-fig:last-child{margin-bottom:0;}
.cph-fig img{width:100%;height:auto;display:block;}
.cph-fig figcaption{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:#16130f;margin-top:12px;
  font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}

.cph-outro{padding-bottom:clamp(40px,6vw,80px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,72px);flex-wrap:wrap;}
.cph-outro-text{flex:1 1 420px;min-width:0;}
.cph-outro .btn{margin-top:24px;}
.cph-outro-logo{flex:0 0 auto;width:min(260px,34vw);height:auto;display:block;}
@media(max-width:620px){
  .cph-outro{flex-direction:column;align-items:center;gap:0;}
  .cph-outro-text{flex:0 0 auto;width:100%;text-align:center;}
  .cph-outro .cph-h1{font-size:clamp(26px,7.4vw,40px);letter-spacing:-1.2px;transform-origin:center;}
  .cph-outro-logo{width:150px;margin:clamp(40px,6vw,80px) auto 0;align-self:center;}
}

/* ---------- MOVIMENTO: dissolvenza + risalita foto ---------- */
html.cphfx .cph-fig{opacity:0;transform:translateY(42px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);}
html.cphfx .cph-fig.in{opacity:1;transform:none;}
html.cphfx .cph-bw{opacity:1;transform:none;transition:none;}
@media(prefers-reduced-motion:reduce){html.cphfx .cph-fig{opacity:1;transform:none;transition:none;}}

/* barra di caricamento rossa in alto */
#cph-load{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:9999;
  pointer-events:none;transition:width .6s ease,opacity .45s ease .6s;}
#cph-load.done{width:100%;opacity:0;}

/* ============================================================
   BANDA SCORREVOLE (marquee) — banda nera, testo bianco, scorre
   da destra a sinistra. Usata sopra la sezione titolo (home + contest).
   ============================================================ */
.cph-marquee{position:relative;z-index:2;background:#16130f;color:#fff;
  overflow:hidden;white-space:nowrap;}
.cph-marquee-track{display:inline-flex;align-items:center;
  will-change:transform;animation:cphMarquee 30s linear infinite;}
.cph-marquee:hover .cph-marquee-track{animation-play-state:paused;}
.cph-mq-g{display:inline-flex;align-items:center;padding:11px 0;}
.cph-mq-g span{font-family:var(--f-sub);font-weight:800;text-transform:uppercase;
  letter-spacing:2px;font-size:clamp(12px,1.4vw,15px);word-spacing:normal;
  -webkit-text-stroke:0;white-space:nowrap;}
.cph-mq-g b{color:var(--red);font-weight:800;font-style:normal;padding:0 .7em;}
@keyframes cphMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.cph-marquee-track{animation:none;}}

/* ============================================================
   COUNTDOWN — striscia nera all'inizio del blocco outro (home),
   sotto la seconda foto. Numeri live gestiti da effects.js (#countdown).
   ============================================================ */
.cph-cd-strip{position:relative;z-index:2;background:#16130f;color:#fff;}
.cph-cd{max-width:1200px;margin:0 auto;
  padding:clamp(16px,2.2vw,26px) clamp(20px,8.3vw,120px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,40px);text-align:center;}
.cph-cd-title{font-family:var(--f-sub);font-weight:800;text-transform:uppercase;
  letter-spacing:2px;font-size:clamp(12px,1.4vw,15px);color:#fff;word-spacing:normal;}
.cph-countdown{display:flex;gap:clamp(16px,3.2vw,44px);}
.cph-countdown .cd-cell{display:flex;align-items:baseline;gap:7px;}
.cph-countdown .cd-n{font-family:var(--f-display);font-weight:800;
  font-size:clamp(24px,3.4vw,38px);line-height:1;letter-spacing:-1.5px;
  -webkit-text-stroke:.6px currentColor;color:#fff;
  display:inline-block;transform:scaleX(1.1);}
.cph-countdown .cd-l{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;font-size:11px;color:#a8a29a;word-spacing:normal;}

/* immagini disciplina (programma): foto grandi quasi a tutto schermo,
   bordi allineati a "DOCK V" nell'header (max 1320 + var(--pad)),
   parallax forte via JS. Fallback: foto statica che copre il frame. */
.disc-hero{width:100vw;position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;
  margin-top:clamp(16px,2.5vw,34px);margin-bottom:clamp(30px,5vw,72px);}
.disc-wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad);}
/* hero a tutta larghezza, a filo con la sezione successiva */
.disc-hero.flush{margin-top:clamp(24px,4vw,56px);margin-bottom:0;}
.disc-hero.flush .disc-wrap{max-width:none;padding:0;}
.disc-frame{position:relative;overflow:hidden;height:clamp(440px,84vh,900px);background:#111;
  transform:translateZ(0);backface-visibility:hidden;}
.disc-frame img{position:absolute;left:0;top:-18%;width:100%;height:136%;
  object-fit:cover;will-change:transform;}
@media(max-width:768px){.disc-frame img.disc-mob-left{object-position:0% center;}}

/* ---------- PROGRAMMA / CALENDARIO — pulito e coerente col sito ---------- */
.format-grid{gap:clamp(16px,2.2vw,26px);margin-top:clamp(18px,2.6vw,32px);}
.day{background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:clamp(24px,2.6vw,38px);}
.day::before,.day::after{content:none;display:none;}
.day h3{color:#16130f;font-size:clamp(26px,3.2vw,40px);letter-spacing:-1.5px;line-height:1;}
.day .date{display:block;background:none;color:#16130f;box-shadow:none;
  border-radius:0;padding:0;margin:10px 0 22px;
  font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:12px;word-spacing:normal;}
.slot{grid-template-columns:clamp(96px,12vw,124px) 1fr;gap:14px;
  padding:13px 10px;border-radius:8px;border-bottom:1px solid var(--border);
  transition:background .2s ease,transform .2s ease;}
.slot::before,.slot::after{content:none;display:none;}
.slot:last-of-type{border-bottom:0;}
.slot:hover{background:#f1efe8;transform:translateX(4px);box-shadow:none;}
.slot .t{color:var(--red);font-family:var(--f-sub);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;font-size:13px;word-spacing:normal;}
.slot .a{color:#16130f;font-family:var(--f-sub);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;font-size:14px;word-spacing:normal;}
.slot:hover .a,.slot.live .a{color:#16130f;}

/* ============================================================
   LOGO accanto al titolo (solo home): testo a sinistra, logo a
   destra; il bordo destro del logo coincide col padding del wrap
   (= bordo destro della foto sottostante, anch'essa in .cph-wrap).
   ============================================================ */
.cph-intro-logo{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,5vw,72px);}
.cph-intro-text{flex:1 1 auto;min-width:0;}
.cph-intro-text .cph-intro-cta{margin-top:26px;}
.cph-intro-logoimg{flex:0 0 auto;width:min(200px,24vw);height:auto;display:block;}
@media(max-width:720px){
  .cph-intro-logo{flex-direction:column;align-items:flex-start;}
  .cph-intro-text{width:100%;}
  .cph-intro-logoimg{width:130px;margin:10px auto 0;align-self:center;}
}
@media(max-width:620px){
  .disc-frame{height:clamp(300px,56vh,460px);}
}