/* ========================================================================
   BLITZ — FRONT PAGE
   Caricare esclusivamente nella home con is_front_page().
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. HERO — STRUTTURA
   ------------------------------------------------------------------------ */

.blitz-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: clip;
  color: var(--blitz-white);
  background: linear-gradient(180deg,
      #2b5bd0 0%,
      #173f9f 56%,
      #071d58 100%);
}

.blitz-hero::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 70% 45%,
      rgba(80, 130, 255, .42),
      transparent 40%);
}

.blitz-hero>* {
  position: relative;
  z-index: 1;
}

.blitz-hero-layout {
  min-height: 90svh;
  align-items: center;
}

.blitz-hero-copy {
  position: relative;
  z-index: 4;
  max-width: 760px;
  padding-top: 80px;
}

.blitz-hero-products {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

.blitz-hero-products>* {
  position: static;
}

/* ------------------------------------------------------------------------
   2. HERO — ROTATORE PRODOTTI
   Nessuna dissolvenza: viene animato soltanto transform.
   ------------------------------------------------------------------------ */

.blitz-hero-rotator {
  --blitz-hero-slide-duration: 520ms;
  --blitz-hero-interval: 2000ms;
  --blitz-hero-accent:
    radial-gradient(circle at 73% 43%,
      rgba(220, 235, 255, .34) 0%,
      rgba(75, 126, 255, .20) 28%,
      transparent 54%);
}

.blitz-hero-rotator::after {
  background: var(--blitz-hero-accent);
}

/*
 * Prima dell'inizializzazione JavaScript tutti i prodotti restano nascosti.
 */
.blitz-hero-rotator:not([data-blitz-rotator-ready="true"]) .blitz-hero-product {
  opacity: 0 !important;
  visibility: hidden !important;
}

.blitz-hero-product {
  --blitz-product-rotation: 6deg;

  position: absolute;
  z-index: 1;

  /*
   * La lattina viene ancorata in basso invece che posizionata
   * tramite top. La dimensione tiene conto anche dell'altezza
   * disponibile della viewport.
   */
  top: auto;
  right: -2%;
  bottom: -2svh;

  width: min(58vw, 84svh, 860px);

  margin: 0 !important;

  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(0, -120%, 0) rotate(var(--blitz-product-rotation)) scale(1);

  filter: drop-shadow(0 34px 34px rgba(2, 10, 40, .34));

  transition:
    transform var(--blitz-hero-slide-duration) cubic-bezier(.30, .68, .30, 1),
    visibility 0s linear var(--blitz-hero-slide-duration);

  will-change: transform;
}

.blitz-hero-product.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(0, 0, 0) rotate(var(--blitz-product-rotation)) scale(1);

  transition:
    transform var(--blitz-hero-slide-duration) cubic-bezier(.30, .68, .30, 1),
    visibility 0s linear 0s;
}

.blitz-hero-product.is-leaving {
  z-index: 3;
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(0, 120%, 0) rotate(var(--blitz-product-rotation)) scale(1);

  transition:
    transform var(--blitz-hero-slide-duration) cubic-bezier(.30, .68, .30, 1),
    visibility 0s linear var(--blitz-hero-slide-duration);
}

/*
 * IMPORTANTE:
 * Original imposta la rotazione tramite variabile.
 * Non usa più "transform: rotate(-15deg)", che bloccava
 * sia l'entrata sia l'uscita del primo prodotto.
 */
.blitz-hero-product--original {
  --blitz-product-rotation: -15deg;
}

.blitz-hero-product--anguria {
  --blitz-product-rotation: -5deg;
}

.blitz-hero-product--pesca {
  --blitz-product-rotation: 4deg;
}

.blitz-hero-product--sugar-free {
  --blitz-product-rotation: -3deg;
}

.blitz-hero-product--tropical {
  --blitz-product-rotation: 5deg;
}

.blitz-hero-product--white {
  --blitz-product-rotation: -4deg;
}

.blitz-hero-product img,
.blitz-hero-product .el-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------------
   3. HERO — SISTEMA LATTINE LEGACY
   Conservato nel caso sia ancora usato in altre sezioni della home.
   ------------------------------------------------------------------------ */

.blitz-hero-cans {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.blitz-hero-can {
  position: absolute;
  opacity: 0;
  transform: translate3d(0, -22vh, 0) rotate(-8deg) scale(.92);
  filter: drop-shadow(0 28px 30px rgba(2, 10, 40, .30));
  transition:
    opacity .6s ease,
    transform 1s var(--blitz-ease);
  will-change: transform, opacity;
}

.blitz-hero-can.is-visible {
  opacity: 1;
  transform:
    translate3d(0, 0, 0) rotate(var(--blitz-can-rotation, 0deg)) scale(1);
}

.blitz-hero-can:nth-child(1) {
  --blitz-can-rotation: -8deg;
}

.blitz-hero-can:nth-child(2) {
  --blitz-can-rotation: 5deg;
}

.blitz-hero-can:nth-child(3) {
  --blitz-can-rotation: -2deg;
}

.blitz-hero-scroll {
  position: absolute;
  z-index: 4;
  bottom: 26px;
  left: 50%;
  width: 2px;
  height: 54px;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  transform: translateX(-50%);
}

.blitz-hero-scroll::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--blitz-white);
  animation: blitz-scroll-cue 1.7s ease-in-out infinite;
}

@keyframes blitz-scroll-cue {
  0% {
    transform: translateY(-100%);
  }

  55%,
  100% {
    transform: translateY(100%);
  }
}



/* ------------------------------------------------------------------------
   5. RETAILER LOGOS
   ------------------------------------------------------------------------ */

.blitz-retailers img {
  max-width: 150px;
  max-height: 56px;
  object-fit: contain;
  filter: saturate(.95);
  transition:
    transform .25s var(--blitz-ease),
    opacity .25s ease;
}

.blitz-retailers a:hover img {
  opacity: .72;
  transform: translateY(-4px);
}


/* ------------------------------------------------------------------------
   6. CATEGORIE PRODOTTI HOME
   Immagini dal basso verso l'alto e testi dai lati.
   ------------------------------------------------------------------------ */

#prodotti.blitz-home-categories-v3 {
  overflow: hidden;
}

#prodotti.blitz-home-categories-v3 .blitz-category-split-v3 {
  margin: 0 !important;
}

#prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 {
  position: relative;
  overflow: hidden;
}

/* Immagini di sfondo */
#prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 .uk-background-norepeat {
  --blitz-category-image-rest-offset:
    clamp(90px, 15vw, 286px);

  --blitz-category-image-travel:
    clamp(110px, 10vw, 190px);

  --blitz-category-image-duration: .78s;

  /*
   * Posizione finale di sicurezza.
   * Il JavaScript imposta la posizione iniziale al momento corretto.
   */
  background-position:
    center calc(100% + var(--blitz-category-image-rest-offset));

  background-size: 70% !important;

  will-change: background-position;
}

/* Colonna Energy Drink */
#prodotti.blitz-home-categories-v3 .blitz-category-panel-v3--energy {
  color: #fff;

  background:
    linear-gradient(180deg,
      #2252c7 0%,
      #0c276b 100%);

  text-align: left;
}

/* Colonna Drink senza zuccheri */
#prodotti.blitz-home-categories-v3 .blitz-category-panel-v3--zero {
  color: #1b46b2;
  background: #fff;
  text-align: center;
}

/* Testi in ingresso dai lati */
#prodotti.blitz-home-categories-v3 .uk-animation-slide-left,
#prodotti.blitz-home-categories-v3 .uk-animation-slide-right {
  animation-duration: .62s !important;

  animation-timing-function:
    cubic-bezier(.16, 1, .3, 1) !important;

  will-change: transform, opacity;
}

/* Desktop */
@media (min-width: 960px) {

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3>.uk-flex {
    min-height: max(90svh, 700px) !important;
  }

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3--energy .uk-background-norepeat {
    padding-right: 60px;
    padding-left: 80px;
  }

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3--zero .uk-background-norepeat {
    padding-right: 80px;
    padding-left: 60px;
  }
}

/* Tablet e mobile */
@media (max-width: 959px) {

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 .uk-flex {
    min-height: auto !important;
    height: 76svh !important;
    max-height: 550px;
  }

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 .uk-background-norepeat {
    --blitz-category-image-rest-offset:
      clamp(145px, 25svh, 185px);

    --blitz-category-image-travel:
      clamp(90px, 24vw, 160px);

    --blitz-category-image-duration: .65s;

    background-size: 50% !important;
  }

  #prodotti.blitz-home-categories-v3 .uk-animation-slide-left,
  #prodotti.blitz-home-categories-v3 .uk-animation-slide-right {
    animation-duration: .55s !important;
  }
}

/* Telefoni */
@media (max-width: 767px) {

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 .uk-background-norepeat {
    background-size: 80% !important;
  }
}

/* Desktop bassi */
@media (min-width: 960px) and (max-height: 760px) {

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3--zero .uk-background-norepeat>.uk-panel {
    padding-bottom: 30px;
  }
}

/* Mobile landscape */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 600px) {

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3>.uk-flex {
    height: 500px !important;
    min-height: 500px !important;
    max-height: none !important;
  }

  #prodotti.blitz-home-categories-v3 .blitz-category-panel-v3 .uk-background-norepeat {
    background-size: 58% !important;

    --blitz-category-image-rest-offset: 120px;
    --blitz-category-image-travel: 100px;
  }
}

/* ------------------------------------------------------------------------
   7. RESPONSIVE HOME
   ------------------------------------------------------------------------ */

/* HERO — dimensione titolo desktop responsive */

/* 960px → 1199px */
@media (min-width: 960px) and (max-width: 1199px) {
  #home-hero .uk-heading-2xlarge {
    font-size: 6rem;
  }
}

/* 1200px → 1299px */
@media (min-width: 1200px) and (max-width: 1299px) {
  #home-hero .uk-heading-2xlarge {
    font-size: 8rem;
  }
}

/* 1300px → 1439px */
@media (min-width: 1300px) and (max-width: 1439px) {
  #home-hero .uk-heading-2xlarge {
    font-size: 9rem;
  }
}


/* Tablet / mobile generico */
@media (max-width: 959px) {

  .blitz-hero-layout {
    min-height: 90svh;
    align-items: start;
  }

  .blitz-hero-copy {
    max-width: none;
    padding: 118px 18px 0;
    text-align: center;
  }

  #home-hero .blitz-hero-copy .blitz-title {
    margin-inline: auto !important;

    font-size:
      clamp(60px,
        min(16.5vw, 9.5svh),
        96px) !important;

    line-height: .88 !important;
  }

  .blitz-hero-rotator {
    --blitz-hero-slide-duration: 400ms;
    --blitz-hero-interval: 2000ms;
  }

  .blitz-hero-product,
  .blitz-hero-product.blitz-hero-product--original {
    top: auto;
    right: -10%;
    bottom: -4svh;

    width: min(116vw, 70svh, 680px);

    transform:
      translate3d(120%, 0, 0) rotate(var(--blitz-product-rotation)) scale(1);
  }

  .blitz-hero-product.is-active {
    transform:
      translate3d(0, 0, 0) rotate(var(--blitz-product-rotation)) scale(1);
  }

  .blitz-hero-product.is-leaving {
    transform:
      translate3d(-120%, 0, 0) rotate(var(--blitz-product-rotation)) scale(1);
  }
}

/* Telefoni generici */
@media (max-width: 639px) {

  .blitz-hero-products {
    z-index: 2;
  }

  .blitz-hero-product,
  .blitz-hero-product.blitz-hero-product--original {
    right: -12%;

    width: min(118vw, 72svh, 560px);
  }

  .blitz-marquee-item {
    padding-inline: 18px;
  }

  .blitz-marquee-item::after {
    margin-left: 36px;
  }

  .blitz-marquee.uk-section-xsmall {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Portrait: prevale sulle regole mobile generiche */
@media (max-width: 959px) and (orientation: portrait) {

  .blitz-hero-product,
  .blitz-hero-product.blitz-hero-product--original {
    right: -10%;

    bottom:
      clamp(-72px, -7svh, -36px);

    width:
      min(112vw, 68svh, 650px);
  }
}

/* Telefoni portrait stretti */
@media (max-width: 479px) and (orientation: portrait) {

  #home-hero .blitz-hero-copy .blitz-title {
    font-size:
      clamp(58px, 17vw, 64px) !important;

    line-height: .87 !important;
  }

  .blitz-hero-product,
  .blitz-hero-product.blitz-hero-product--original {
    right: -12%;

    bottom:
      clamp(-60px, -7svh, -42px);

    width:
      min(112vw, 67svh, 520px);
  }
}

/* Telefoni / piccoli tablet landscape */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 600px) {

  .blitz-hero-product,
  .blitz-hero-product.blitz-hero-product--original {
    top: auto;
    right: -2%;
    bottom: -1svh;

    width:
      min(52vw, 72svh, 420px);
  }
}

/* ------------------------------------------------------------------------
   8. ACCESSIBILITY / REDUCED MOTION
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .blitz-hero-product {
    transition: none !important;
  }

  .blitz-hero-product:not(.is-active) {
    display: none;
  }

  .blitz-hero-can {
    opacity: 1;
    transform: none;
  }

  .blitz-marquee-track {
    animation: none;
  }
}