/* ========== FONT FACE ========== */
@font-face {
  font-family: 'CX Seagal';
  src: url('./fonts/CX-Seagal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Proprietà CSS animabile per lo scale della palla */
@property --ball-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

:root {
  /* Palette Colori TONO - Gradiente vivace */
  --tono-red: #ff0000; /* rosso puro richiesto */
  --tono-red-light: #ff4d4d; /* variante più chiara per sfumato */
  --tono-magenta: #d62598;
  --tono-purple: #8338ec;
  --tono-violet: #5d37c4;

  /* Colori INTERSCAPE */
  --interscape-white: #ffffff;
  --interscape-black: #000000;

  /* Timing e Curve */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-base: 0.8s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: 'CX Seagal', -apple-system, BlinkMacSystemfonts, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@property --sphere-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --sphere-shift {
  syntax: '<length>';
  inherits: true;
  initial-value: 0vh;
}

body {
  position: relative;
}

/* ========== SEZIONI ========== */
.section {
  position: fixed;
  width: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  transition: height var(--duration-base) var(--transition-smooth);
}

/* TONO SECTION - Altezza dinamica */
.section-tono {
  top: 0;
  height: 50vh;
  background: var(--tono-red);
  color: var(--interscape-black);
  z-index: 1;
}

/* ========== ANIMATED MORPHING GRADIENTS ========== */
.gradient-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gradient-bg svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
  --sphere-scale: 1;
  --sphere-shift: 0vh;
  transform: translateY(var(--sphere-shift)) scale(var(--sphere-scale));
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    --sphere-scale 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframes per animazione breathe - solo pulsazione senza cambio colore */
@keyframes breathe {
  0% {
    transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
  }
  50% {
    transform: translate(-50%, -50%) scale(calc(var(--ball-scale, 1) * 1.06));
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
  }
}

@-webkit-keyframes breathe {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
    transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
  }
  50% {
    -webkit-transform: translate(-50%, -50%)
      scale(calc(var(--ball-scale, 1) * 1.06));
    transform: translate(-50%, -50%) scale(calc(var(--ball-scale, 1) * 1.06));
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
    transform: translate(-50%, -50%) scale(var(--ball-scale, 1));
  }
}

/* Sfera grande centrale che pulsa - solo magenta */
.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(255, 0, 255, 1) 0,
      rgba(255, 0, 255, 0) 50%
    )
    no-repeat;
  mix-blend-mode: hard-light;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  --ball-scale: 1;
  transform: translate(-50%, -50%);
  animation: breathe 3.5s ease-in-out infinite;
  opacity: 1;
  transition: --ball-scale 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ingrandisce la sfera quando TONO è contratta (INTERSCAPE espansa) */
.section-tono.contracted .gradients-container {
  --sphere-scale: 1.3;
}

.section-tono.mobile-contracted .gradients-container {
  --sphere-scale: 1.3;
}

/* Elemento interattivo che segue il mouse - più magenta e più piccolo */
.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(
      circle at center,
      rgba(255, 0, 255, 0.85) 0,
      rgba(255, 0, 255, 0) 50%
    )
    no-repeat;
  mix-blend-mode: hard-light;
  width: 50%;
  height: 50%;
  top: -25%;
  left: -25%;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.gradient-bg .interactive-extra {
  opacity: 0.55;
  width: 30%;
  height: 30%;
  top: -15%;
  left: -15%;
  mix-blend-mode: screen;
}

/* ========== INTERSCAPE SECTION - Scorre sopra TONO ========== */
.section-interscape {
  bottom: 0;
  height: 50vh;
  background: var(--interscape-white);
  color: var(--interscape-black);
  z-index: 2;
  overflow: hidden;
  justify-content: flex-start; /* Mantieni contenuto in alto */
}

/* ========== CONTENT WRAPPERS ========== */
.content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
  padding: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
}

/* ========== TONO HEADER ========== */
.tono-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.logo-tono-svg {
  width: clamp(250px, 25vw, 450px);
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Testo festival in alto a destra - Sezione TONO */
.festival-text-container {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
  pointer-events: none;
}

.festival-title {
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  color: var(--interscape-black);
  text-align: left;
  font-family: 'CX Seagal', sans-serif;
}

/* Testo concerti e mostre - Sezione INTERSCAPE */
.interscape-text-container {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
  pointer-events: none;
}

.interscape-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  color: var(--interscape-black);
  text-align: left;
  font-family: 'CX Seagal', sans-serif;
}

/* ========== LOGO PAB IN BASSO A SINISTRA ========== */
.pab-logo-container {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 20;
  pointer-events: none;
}

.pab-logo {
  width: clamp(67px, 8vw, 120px);
  height: auto;
  display: block;
  opacity: 1;
  transition: opacity 0.2s ease 0.8s;
}

/* Logo PAB nella sezione TONO: nascosto di default (coperto da INTERSCAPE) */
.section-tono .pab-logo {
  opacity: 0;
  pointer-events: none;
}

/* Logo PAB visibile solo quando TONO è completamente espansa */
.section-tono.expanded .pab-logo,
.section-tono.mobile-expanded .pab-logo {
  opacity: 1;
  pointer-events: auto;
}

/* Nascondi logo PAB quando INTERSCAPE non è completamente espansa */
.section-interscape.mobile-contracted .pab-logo,
.section-interscape.contracted .pab-logo {
  opacity: 0;
  pointer-events: none;
}

/* ========== OVERLAY SVG RANDOM SU INTERSCAPE ========== */
.interscape-overlay {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  z-index: 15;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: flex-start;
}

.overlay-frame {
  max-width: clamp(300px, 45vw, 700px);
  width: 100%;
  height: auto;
  display: none;
  object-fit: contain;
  transform-origin: center;
  --overlay-translate-y: 0px;
  --overlay-scale-y: 1;
  transform: translateY(var(--overlay-translate-y))
    scaleY(var(--overlay-scale-y));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mostra solo l'SVG selezionato randomicamente */
.overlay-frame.active {
  display: block;
  opacity: 0.5;
  --overlay-translate-y: 0px;
  pointer-events: none;
}

.overlay-frame.is-closing {
  --overlay-scale-y: 0.01;
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0s linear 0.22s;
}

.overlay-frame.is-opening {
  --overlay-scale-y: 0.01;
}

/* Desktop: quando INTERSCAPE è contratta, l'SVG scende subito ma svanisce dopo */
.section-interscape.contracted .overlay-frame.active {
  opacity: 0;
  --overlay-translate-y: 160px;
  transition-delay: 1s, 2.5s; /* Transform parte subito (scende), opacity ritardata (svanisce dopo) */
}

/* Desktop: quando INTERSCAPE è espansa, l'SVG sale subito */
.section-interscape.expanded .overlay-frame.active {
  opacity: 0.5;
  --overlay-translate-y: 0px;
  transition-delay: 0s, 0s;
}

/* Quando la sezione è espansa, mantieni l'overlay in alto */
.section-interscape.expanded .interscape-overlay,
.section-interscape.mobile-expanded .interscape-overlay {
  top: 15px;
}

/* ========== INTERSCAPE SECTION ========== */
.section-interscape {
  background: var(--interscape-white);
  color: var(--interscape-black);
}

.interscape-header {
  margin-bottom: 0;
}

.logo-interscape-svg {
  width: clamp(220px, 28vw, 420px);
  height: auto;
  display: block;
}

/* ========== RESPONSIVE: MOBILE & TABLET ========== */

@media (max-width: 768px) {
  html,
  body {
    overflow-y: scroll;
    height: 100%;
    position: static;
    width: 100%;
  }

  body {
    height: 200vh;
    overscroll-behavior: contain;
  }

  .section {
    position: fixed;
    width: 100%;
    transition: none;
  }

  .section-tono {
    top: 0;
    height: 50vh; /* Altezza iniziale, modificata da JS */
    z-index: 1;
  }

  .section-interscape {
    top: 50vh; /* Iniziale 50/50, poi gestito via JS */
    bottom: auto;
    height: 50vh; /* Altezza iniziale, modificata da JS */
    margin-top: 0;
    z-index: 2;
  }

  /* Stati mobile expanded/contracted con top e height */
  .section-tono.mobile-expanded {
  }

  .section-tono.mobile-contracted {
  }

  .section-interscape.mobile-expanded {
  }

  .section-interscape.mobile-contracted {
  }

  /* Gradiente mobile: sfera ben definita e visibile */
  .gradients-container {
    filter: blur(12px); /* Blur ottimizzato per definizione */
    -webkit-filter: blur(12px);
    position: absolute;
    top: 50%;
    left: 50%;
    animation: mobileFloat 8s ease-in-out infinite;
    will-change: transform;
    transition: none;
    --sphere-scale: 1;
  }

  .gradient-bg .g1 {
    width: 140%;
    height: 140%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    /* Colori più saturi e visibili su mobile */
    mix-blend-mode: normal;
    /* Gradiente concentrato più intenso per forma sferica definita */
    background: radial-gradient(
        circle at center,
        rgba(255, 0, 255, 1) 0%,
        rgba(255, 0, 255, 1) 10%,
        rgba(255, 0, 255, 0.85) 25%,
        rgba(255, 0, 255, 0.5) 38%,
        rgba(255, 0, 255, 0) 50%
      )
      no-repeat;
    --ball-scale: 0.85;
    animation: breathe 5s ease-in-out infinite;
  }

  .gradient-bg .interactive {
    display: block;
    opacity: 0.9;
    mix-blend-mode: normal;
    width: 35%;
    height: 35%;
    top: -17.5%;
    left: -17.5%;
  }

  .gradient-bg .interactive-extra {
    opacity: 0.65;
    width: 22%;
    height: 22%;
    top: -11%;
    left: -11%;
    mix-blend-mode: normal;
  }

  /* Animazione movimento lento per mobile */
  @keyframes mobileFloat {
    0%,
    100% {
      transform: translate3d(-50%, calc(-50% + var(--sphere-shift)), 0)
        scale(var(--sphere-scale));
    }
    25% {
      transform: translate3d(-48%, calc(-52% + var(--sphere-shift)), 0)
        scale(var(--sphere-scale));
    }
    50% {
      transform: translate3d(-52%, calc(-48% + var(--sphere-shift)), 0)
        scale(var(--sphere-scale));
    }
    75% {
      transform: translate3d(-50%, calc(-52% + var(--sphere-shift)), 0)
        scale(var(--sphere-scale));
    }
  }

  /* Su mobile, PAB nascosti di default */
  .section-tono .pab-logo,
  .section-interscape .pab-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* Mostra PAB solo nella sezione dominante (>50% dello schermo) */
  .section-tono.pab-visible .pab-logo {
    opacity: 1;
    pointer-events: auto;
  }

  .section-interscape.pab-visible .pab-logo {
    opacity: 1;
    pointer-events: auto;
  }

  .section-tono .pab-logo-container,
  .section-interscape .pab-logo-container {
    position: absolute; /* Relativo alla sezione */
    left: 15px;
    bottom: 15px;
    z-index: 9999;
    display: block;
  }

  .section-tono.mobile-expanded .gradients-container {
    --sphere-scale: 0.85;
  }

  .content-wrapper {
    padding: 20px;
    padding-bottom: 20px;
  }

  .tono-header {
    margin-top: 0;
  }

  .interscape-header {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Loghi fissi vecchi: nascosti */
  .pab-logo-fixed,
  .pab-logo-mobile {
    display: none !important;
  }

  .logo-tono-svg {
    width: clamp(180px, 50vw, 280px);
  }

  .logo-interscape-svg {
    width: clamp(170px, 48vw, 270px);
  }

  .festival-text-container,
  .interscape-text-container {
    top: 15px;
    right: 15px;
  }

  .festival-title,
  .interscape-subtitle {
    font-size: 1rem;
    line-height: 1;
  }

  .pab-logo-container {
    bottom: 15px;
    left: 15px;
  }

  .pab-logo {
    width: clamp(220px, 42vw, 272px);
    transition: opacity 0.3s ease;
  }

  .interscape-overlay {
    top: 10px;
    left: 0;
    right: 0;
    padding: 0 8px;
    justify-content: center;
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .overlay-frame {
    max-width: clamp(350px, 95vw, 800px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(var(--overlay-translate-y))
      scaleY(var(--overlay-scale-y));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Stato neutral e expanded: SVG visibile sopra il logo */
  .overlay-frame.active {
    opacity: 0.7 !important;
  }

  /* Quando INTERSCAPE è contratta su mobile, abbassa gli overlay per liberare logo e testo */
  .section-interscape.mobile-contracted .interscape-overlay {
    top: 140px;
  }

  .section-interscape.mobile-contracted .overlay-frame.active {
    opacity: 0 !important;
  }

  /* Quando INTERSCAPE è espansa, riporta gli overlay sopra il logo */
  .section-interscape.mobile-expanded .interscape-overlay {
    top: 15px;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 15px;
  }

  .logo-tono-svg {
    width: clamp(150px, 55vw, 220px);
  }

  .logo-interscape-svg {
    width: clamp(140px, 52vw, 210px);
  }

  .festival-title,
  .interscape-subtitle {
    font-size: 0.9rem;
    line-height: 1;
  }

  .pab-logo {
    width: clamp(30px, 10vw, 50px);
  }
}

/* ========== STATI DI ESPANSIONE (Desktop) ========== */
@media (min-width: 769px) {
  .section-tono.expanded {
    /* Altezza gestita dinamicamente da JavaScript */
  }

  .section-tono.contracted {
    /* Altezza gestita dinamicamente da JavaScript */
  }

  .section-interscape.expanded {
    /* Altezza gestita dinamicamente da JavaScript */
  }

  .section-interscape.expanded .content-wrapper {
    padding-top: 20px;
  }

  .section-interscape.contracted {
    /* Altezza gestita dinamicamente da JavaScript */
  }
}