/* ==========================================================================
   Isola Digitale - Stile Pop-Art CMYK & Effetti Grafici Tipografici
   ========================================================================== */

/* Font import: Plus Jakarta Sans + Space Grotesk per titoli d'impatto */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
  --cmyk-cyan: #00AEEF;
  --cmyk-magenta: #EC008C;
  --cmyk-yellow: #FFF200;
  --cmyk-yellow-bold: #FFE500;
  --cmyk-black: #0F172A;
  --whatsapp-green: #25D366;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0F172A;
  background-color: #FAFAF9;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.font-pop {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   BARRA DI PROGRESSO SCROLL CMYK
   -------------------------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #00AEEF 0%, #EC008C 35%, #FFF200 70%, #0F172A 100%);
  z-index: 9999;
  transition: width 0.08s ease-out;
}

/* --------------------------------------------------------------------------
   MARQUEE TICKER SCORREVOLE INFINITO (Responsive)
   -------------------------------------------------------------------------- */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  user-select: none;
  border-top: 2.5px solid #0F172A;
  border-bottom: 2.5px solid #0F172A;
  width: 100%;
}

.marquee-content {
  display: flex;
  gap: 1.5rem;
  animation: marqueeScroll 24s linear infinite;
  min-width: 100%;
}

@media (min-width: 768px) {
  .marquee-content {
    gap: 2.5rem;
  }
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Halftone Patterns (Retini Tipografici Ben-Day / Stampa Pop)
   -------------------------------------------------------------------------- */
.bg-halftone-cmyk {
  background-image: 
    radial-gradient(#00AEEF 1.5px, transparent 1.5px),
    radial-gradient(#EC008C 1.5px, transparent 1.5px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.15;
}

.bg-dots-pattern {
  background-image: radial-gradient(#CBD5E1 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

/* --------------------------------------------------------------------------
   Pop Shadows (Ombre piene a contrasto netto stile Neo-Pop)
   -------------------------------------------------------------------------- */
.pop-shadow {
  box-shadow: 4px 4px 0px #0F172A;
}

.pop-shadow-lg {
  box-shadow: 6px 6px 0px #0F172A;
}

@media (min-width: 640px) {
  .pop-shadow-lg {
    box-shadow: 8px 8px 0px #0F172A;
  }
}

.pop-shadow-cyan {
  box-shadow: 5px 5px 0px #00AEEF;
}

.pop-shadow-magenta {
  box-shadow: 5px 5px 0px #EC008C;
}

.pop-shadow-yellow {
  box-shadow: 5px 5px 0px #F59E0B;
}

/* --------------------------------------------------------------------------
   Bottoni Tattili Pop (Pressione con rimbalzo)
   -------------------------------------------------------------------------- */
.btn-pop {
  border: 2.5px solid #0F172A;
  box-shadow: 4px 4px 0px #0F172A;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.btn-pop:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #0F172A;
}

.btn-pop:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #0F172A;
}

/* Bottone WhatsApp Pop con feedback visivo */
.btn-pop-whatsapp {
  background-color: #25D366;
  color: #0F172A;
  border: 2.5px solid #0F172A;
  box-shadow: 4px 4px 0px #0F172A;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 640px) {
  .btn-pop-whatsapp {
    box-shadow: 5px 5px 0px #0F172A;
  }
}

.btn-pop-whatsapp:hover {
  background-color: #22C55E;
  transform: translate(-2px, -2px) scale(1.015);
  box-shadow: 7px 7px 0px #0F172A;
}

.btn-pop-whatsapp:active {
  transform: translate(2px, 2px) scale(0.98);
  box-shadow: 1px 1px 0px #0F172A;
}

/* --------------------------------------------------------------------------
   EFFETTO 3D TILT INTERATTIVO SULLE CARD (Solo su desktop con mouse)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .tilt-card {
    transition: transform 0.15s ease-out, box-shadow 0.25s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
  }

  .tilt-inner {
    transform: translateZ(15px);
    transition: transform 0.15s ease-out;
  }
}

/* Struttura interna flessibile per card a tutta altezza */
.tilt-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Card Pop Art con bordo netto e contrasto
   -------------------------------------------------------------------------- */
.pop-card {
  border: 2.5px solid #0F172A;
  border-radius: 20px;
  background-color: #FFFFFF;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-wrap: break-word;
  word-break: break-word;
}

.pop-card:hover {
  transform: translate(-3px, -3px);
}

.pop-card-cyan:hover {
  box-shadow: 8px 8px 0px #00AEEF;
}

.pop-card-magenta:hover {
  box-shadow: 8px 8px 0px #EC008C;
}

.pop-card-yellow:hover {
  box-shadow: 8px 8px 0px #FFE500;
}

.pop-card-black:hover {
  box-shadow: 8px 8px 0px #0F172A;
}

/* --------------------------------------------------------------------------
   Sticker Pop con animazione Wiggle all'hover
   -------------------------------------------------------------------------- */
.pop-sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid #0F172A;
  border-radius: 9999px;
  box-shadow: 3px 3px 0px #0F172A;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
  font-size: 11px;
}

@media (min-width: 640px) {
  .pop-sticker {
    padding: 6px 14px;
    font-size: 12px;
  }
}

.pop-sticker:hover {
  animation: stickerWiggle 0.4s ease infinite alternate;
  box-shadow: 5px 5px 0px #0F172A;
}

@keyframes stickerWiggle {
  0% { transform: scale(1.05) rotate(-3deg); }
  100% { transform: scale(1.05) rotate(3deg); }
}

.tilt-left {
  transform: rotate(-2.5deg);
}

.tilt-right {
  transform: rotate(2.5deg);
}

/* --------------------------------------------------------------------------
   HOVER PULITO PER TITOLI (Sostituisce il fuori registro per massima leggibilità)
   -------------------------------------------------------------------------- */
.pop-title-hover {
  transition: color 0.2s ease, transform 0.2s ease;
}

.pop-title-hover:hover {
  color: #00AEEF;
}

/* --------------------------------------------------------------------------
   Crocini di Registro Tipografici
   -------------------------------------------------------------------------- */
.registration-mark {
  position: relative;
  width: 24px;
  height: 24px;
}

.registration-mark::before,
.registration-mark::after {
  content: '';
  position: absolute;
  background-color: #0F172A;
}

.registration-mark::before {
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
}

.registration-mark::after {
  top: 0;
  left: 11px;
  width: 2px;
  height: 24px;
}

.registration-mark .circle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #0F172A;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Barra di calibrazione colori CMYK
   -------------------------------------------------------------------------- */
.cmyk-calibration-bar {
  display: flex;
  height: 6px;
  width: 100%;
}

@media (min-width: 640px) {
  .cmyk-calibration-bar {
    height: 8px;
  }
}

.cmyk-calibration-bar .bar-c { background-color: #00AEEF; flex: 1; }
.cmyk-calibration-bar .bar-m { background-color: #EC008C; flex: 1; }
.cmyk-calibration-bar .bar-y { background-color: #FFF200; flex: 1; }
.cmyk-calibration-bar .bar-k { background-color: #0F172A; flex: 1; }

/* --------------------------------------------------------------------------
   ANIMAZIONI SCROLL REVEAL (Con fallback per rendering fluido)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 80ms; }
.delay-200 { transition-delay: 150ms; }
.delay-300 { transition-delay: 220ms; }
.delay-400 { transition-delay: 290ms; }

/* --------------------------------------------------------------------------
   CONSOLE PREVENTIVO CON BORDO CMYK ROTANTE
   -------------------------------------------------------------------------- */
.quote-card-animated {
  position: relative;
  background: #0B0F19;
  border-radius: 24px;
  border: 3px solid #0F172A;
  box-shadow: 6px 6px 0px #0F172A;
  overflow: hidden;
}

@media (min-width: 640px) {
  .quote-card-animated {
    box-shadow: 9px 9px 0px #0F172A;
  }
}

.quote-card-animated::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00AEEF, #EC008C, #FFF200, #00AEEF);
  animation: rotateBorder 12s linear infinite;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

@keyframes rotateBorder {
  100% {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP BADGE POP CON COLORE UFFICIALE (#25D366)
   -------------------------------------------------------------------------- */
.whatsapp-pop-floating {
  background-color: #25D366 !important;
  color: #FFFFFF !important;
  border: 2.5px solid #0F172A;
  box-shadow: 4px 4px 0px #0F172A;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whatsapp-pop-floating:hover {
  background-color: #20BD5A !important;
  transform: translate(-3px, -3px) scale(1.08);
  box-shadow: 7px 7px 0px #0F172A;
}

.whatsapp-pop-floating:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #0F172A;
}

.whatsapp-pop-floating svg {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   PARTICELLE CMYK CONFETTI GENERATE VIA JS
   -------------------------------------------------------------------------- */
.cmyk-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  animation: particleFly 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes particleFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.2);
  }
}

/* Chat bubble styling */
.chat-bubble {
  position: relative;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  box-shadow: 3px 3px 0px #0F172A;
  word-break: break-word;
  overflow-wrap: anywhere;
}