/* ─────────────────────────────────────────────
   CROSSFADE BLOCK — Emiliano Sicuro
   Posizione: /wp-content/themes/tuo-child-tema/css/crossfade.css
───────────────────────────────────────────── */


/* ── BASE (comune a tutti i blocchi) ───────── */

.cf-block {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.cf-block img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: cf;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes cf {
  0%     { opacity: 0; }
  8.9%   { opacity: 1; }
  33.3%  { opacity: 1; }
  42.2%  { opacity: 0; }
  100%   { opacity: 0; }
}


/* ─────────────────────────────────────────────
   BLOCCHI — uno per ID
   Formula:
     duration  = n_immagini × secondi_per_immagine
     delay img2 = 1 × secondi_per_immagine
     delay img3 = 2 × secondi_per_immagine

   Cambia solo i valori numerici, la logica resta uguale.
───────────────────────────────────────────── */


/* ── #cf-moda ── ciclo 9s (3 img × 3s) ────── */
#cf-moda {height: 100vh;}
#cf-moda img                { animation-duration: 9s; }
#cf-moda img:nth-child(1)   { animation-delay: 0s; z-index: 3; }
#cf-moda img:nth-child(2)   { animation-delay: 3s; z-index: 2; }
#cf-moda img:nth-child(3)   { animation-delay: 6s; z-index: 1; }



/* ── #cf-costume ── ciclo 9s (3 img × 3s) ─── */
#cf-costume {height: 100vh;}
#cf-costume img              { animation-duration: 9s; }
#cf-costume img:nth-child(1) { animation-delay: 0s; z-index: 3; }
#cf-costume img:nth-child(2) { animation-delay: 3s; z-index: 2; }
#cf-costume img:nth-child(3) { animation-delay: 6s; z-index: 1; }


/* ── #cf-haute ── ciclo 15s (3 img × 5s) ──── */
#cf-haute img                { animation-duration: 15s; }
#cf-haute img:nth-child(1)   { animation-delay: 0s;  z-index: 3; }
#cf-haute img:nth-child(2)   { animation-delay: 5s;  z-index: 2; }
#cf-haute img:nth-child(3)   { animation-delay: 10s; z-index: 1; }


/* ── #cf-about ── ciclo 9s (3 img × 3s) ───── */
#cf-about img                { animation-duration: 9s; }
#cf-about img:nth-child(1)   { animation-delay: 0s; z-index: 3; }
#cf-about img:nth-child(2)   { animation-delay: 3s; z-index: 2; }
#cf-about img:nth-child(3)   { animation-delay: 6s; z-index: 1; }


/* ── #cf-hero ── ciclo 12s (3 img × 4s) ───── */
#cf-hero img                 { animation-duration: 12s; }
#cf-hero img:nth-child(1)    { animation-delay: 0s; z-index: 3; }
#cf-hero img:nth-child(2)    { animation-delay: 4s; z-index: 2; }
#cf-hero img:nth-child(3)    { animation-delay: 8s; z-index: 1; }


/* ── #cf-dettaglio ── ciclo 9s (3 img × 3s) ─ */
#cf-dettaglio img                { animation-duration: 9s; }
#cf-dettaglio img:nth-child(1)   { animation-delay: 0s; z-index: 3; }
#cf-dettaglio img:nth-child(2)   { animation-delay: 3s; z-index: 2; }
#cf-dettaglio img:nth-child(3)   { animation-delay: 6s; z-index: 1; }


/* ─────────────────────────────────────────────
   TEMPLATE per nuovi blocchi — copia, incolla, rinomina:

   #cf-NOMEBLOCCO img                { animation-duration: Xs; }
   #cf-NOMEBLOCCO img:nth-child(1)   { animation-delay: 0s;  z-index: 3; }
   #cf-NOMEBLOCCO img:nth-child(2)   { animation-delay: Xs;  z-index: 2; }
   #cf-NOMEBLOCCO img:nth-child(3)   { animation-delay: X2s; z-index: 1; }
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   FADE IN SU IMMAGINI DI SFONDO CATALOGO MODA COSTUME CON JS
───────────────────────────────────────────── */

.kb-bg {
  height: 100vh; /* o quello che preferisci */
  opacity: 0;
  transition: opacity 1.5s ease;
}


.kb-bg.visible {
  opacity: 1;
}
/* ─────────────────────────────────────────────
KEN BURNS HERO
───────────────────────────────────────────── */
/* Prepara i contenitori con classe Hero */
.Hero {
    position: relative;
    overflow: hidden;
}

/* Stile e animazione del nuovo livello creato via JS */
.hero-ken-burns-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 0;
    
    /* FIX MOBILE: Forza l'accelerazione hardware GPU */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    
    transform-origin: center;
    -webkit-animation: kenBurns 10s ease-out forwards;
    animation: kenBurns 10s ease-out forwards;
}

/* Protegge i contenuti mantenendoli in primo piano */
.Hero > .wpb_column {
    position: relative;
    z-index: 1;
}

/* Keyframes dell'animazione stabilizzati per mobile */
@-webkit-keyframes kenBurns {
    0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
    100% { -webkit-transform: scale(1.1) translate3d(0, 0, 0); }
}

@keyframes kenBurns {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.1) translate3d(0, 0, 0); }
}

/***************************************/
/*SFONDO FLUIDO GOTICO PER LANDING PAGE*/
/***************************************/
#MultiColorRadiale {
  width: 100%;
  height: 100vh;
  /* Rimuoviamo "circle at center" per consentire lo scorrimento fluido */
  background: radial-gradient(
    circle,
    #3e4547 0%,
    #0a0b0c 30%,
    #3b2b2c 70%,
    #16191d 100%
  );
  /* Ingrandiamo l'area a dismisura per avere margine di movimento */
  background-size: 200% 200%;
  animation: wanderingSpirit 18s ease-in-out infinite alternate;
  
  /* Regole Flexbox intatte per il centramento dei contenuti WPBakery */
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
}

/* Traiettoria irregolare: da in alto a sx a in basso a dx */
@keyframes wanderingSpirit {
  0%   { background-position: 0% 0%; }     /* Partenza: Alto a sinistra */
  33%  { background-position: 80% 20%; }   /* Deviazione verso destra */
  66%  { background-position: 20% 90%; }   /* Discesa sbilanciata a sinistra */
  100% { background-position: 100% 100%; } /* Arrivo: Basso a destra */
}

/* Stili tipografici */
.animated-radial h2,
.animated-radial button {
  color: #fff;
  margin: 1rem;
}