@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

body { box-sizing: border-box; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

html, body { height: 100%; scroll-behavior: smooth; }

/* =========================================================
   ANIMAZIONI BASE (di default: VISIBILI)
   ========================================================= */

/* Di default NON forziamo opacity:0 qui.
   L’invisibilità la gestiamo solo quando JS aggiunge .reveal */
.fade-in { animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-in-left { animation: slideInLeft 0.6s ease-out forwards; }
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-in-right { animation: slideInRight 0.6s ease-out forwards; }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.scale-in { animation: scaleIn 0.5s ease-out forwards; }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hover cards */
.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }

/* Icon float */
.icon-float { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navbar shadow */
.nav-shadow { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); }

/* CTA pulse */
.cta-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

.section-spacing { padding: 5rem 1.5rem; }
@media (max-width: 768px) { .section-spacing { padding: 3rem 1.5rem; } }

/* Price badge underline */
.price-badge { position: relative; display: inline-block; }
.price-badge::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  border-radius: 2px;
}

/* Portal demo card background animation */
.portal-demo-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.portal-demo-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Chart bars */
.chart-bar { animation: growBar 1.5s ease-out forwards; transform-origin: bottom; }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Recommended badge */
.badge-recommended {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* =========================================================
   REVEAL ON SCROLL (solo se JS aggiunge .reveal)
   ========================================================= */

/* Stato iniziale SOLO quando JS marca l’elemento come "reveal" */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}

/* Varianti direzionali (JS può aggiungerle) */
.reveal.reveal-left  { transform: translateX(-24px); }
.reveal.reveal-right { transform: translateX(24px); }

/* Quando visibile: lascia fare all’animazione, ma come fallback rendi visibile */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Importante: finché non è visibile, l’animazione sta in pausa */
.reveal.fade-in,
.reveal.slide-in-left,
.reveal.slide-in-right,
.reveal.scale-in {
  animation-play-state: paused;
}

/* Quando diventa visibile, l’animazione parte */
.reveal.is-visible.fade-in,
.reveal.is-visible.slide-in-left,
.reveal.is-visible.slide-in-right,
.reveal.is-visible.scale-in {
  animation-play-state: running;
}

/* =========================================================
   VIDEO WRAPPER
   ========================================================= */
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b1220; }
.video-wrap video, .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================
   ARTICOLI: STILE CONTENUTI
   ========================================================= */
.article-content h2 { font-size: 1.6rem; font-weight: 800; margin: 1.2rem 0 .6rem; }
.article-content h3 { font-size: 1.25rem; font-weight: 800; margin: 1rem 0 .5rem; }
.article-content p  { margin: .8rem 0; line-height: 1.85; color: #0f172a; }
.article-content ul { list-style: disc; padding-left: 1.25rem; margin: .8rem 0; }
.article-content ol { list-style: decimal; padding-left: 1.25rem; margin: .8rem 0; }
.article-content li { margin: .3rem 0; }
.article-content strong { font-weight: 800; }
.article-content a { color: #0e7490; font-weight: 800; text-decoration: underline; }
.article-content blockquote { border-left: 4px solid #e2e8f0; padding-left: 1rem; color: #334155; margin: 1rem 0; }