/* ══════════════════════════════════════════════
   SIMPLECARE — Scroll & Hover Animations
   Inspired by dntlbar.com reveal effects
   ══════════════════════════════════════════════ */

/* ── BASE REVEAL (fade-up on scroll) ── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── DIRECTIONAL REVEALS ── */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* ── STAGGERED CHILDREN ── */
.stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.stagger.is-visible > *:nth-child(1)  { transition-delay: 0s; }
.stagger.is-visible > *:nth-child(2)  { transition-delay: 0.1s; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: 0.2s; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: 0.3s; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: 0.4s; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: 0.5s; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: 0.6s; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: 0.7s; }
.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── WORD-BY-WORD TEXT REVEAL (dntlbar style) ── */
.split-text .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em;
  /* Spazio a destra per i glifi in corsivo: il box che maschera
     l'animazione taglia tutto cio' che esce, e l'italico sporge oltre
     l'ultimo carattere (si vedeva sulla ")" di "Curno (BG)").
     Il margine negativo annulla il padding: la spaziatura tra le parole
     resta identica, cambia solo dove avviene il taglio. */
  padding-right: 0.18em;
  margin-right: -0.18em;
}
.split-text .word-inner {
  display: inline-block;
  transform: translateY(1.4em);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.split-text.is-visible .word-inner {
  transform: translateY(0);
}

/* ── IMAGE REVEAL (clip-path + scale) ── */
.img-reveal {
  overflow: hidden;
}
.img-reveal img,
.img-reveal .img-reveal-inner {
  transform: scale(1.2);
  transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.img-reveal.is-visible img,
.img-reveal.is-visible .img-reveal-inner {
  transform: scale(1);
}

/* Clip variant */
.img-clip {
  clip-path: inset(12%);
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.img-clip.is-visible {
  clip-path: inset(0%);
}

/* ── HERO LOAD ANIMATION ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroImgReveal {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.1); }
  to   { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 20px; }
}

.hero-anim-eyebrow {
  opacity: 0;
  animation: heroSlideRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}
.hero-anim-eyebrow::before {
  animation: lineGrow 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
  width: 0;
}
.hero-anim-title {
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards;
}
.hero-anim-sub {
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.65s forwards;
}
.hero-anim-actions {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.85s forwards;
}
.hero-anim-hours {
  opacity: 0;
  animation: heroFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1.1s forwards;
}
.hero-anim-img {
  animation: heroImgReveal 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s both;
}
.hero-anim-bar {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.95s forwards;
}

/* ── ENHANCED CARD HOVERS ── */
.service-card,
.scard,
.blog-card,
.doctor-card,
.doc-card,
.faq-item,
.promo-card,
.value-card,
.related-card,
.service-card-lg {
  transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ── SMOOTH BUTTON HOVER ── */
.btn-hero-primary,
.btn-hero-secondary,
.btn-promise,
.btn-primary-teal,
.btn-outline-dark,
.btn-teal,
.btn-wa,
.btn-light,
.btn-ghost,
.btn-teal-full,
.btn-wa-full,
.nav-cta {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.btn-hero-primary:hover,
.btn-promise:hover,
.btn-primary-teal:hover,
.btn-teal:hover,
.btn-light:hover,
.btn-teal-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 143, 130, 0.25);
}

/* ── NAV LOGO SMOOTH ── */
.nav-logo img,
.nav-inner .nav-logo img {
  transition: transform 0.3s ease;
}
.nav-logo img:hover,
.nav-inner .nav-logo img:hover {
  transform: scale(1.04);
}

/* ── TOPBAR SLIDE DOWN ON LOAD ── */
@keyframes topbarSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.topbar {
  animation: topbarSlide 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ── PARALLAX HELPER ── */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── COUNTER ANIMATION (for stats) ── */
.counter-num {
  display: inline-block;
}

/* ── SECTION DIVIDER LINE GROW ── */
@keyframes dividerGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, #2EC4B6, transparent);
  transform-origin: left;
  transform: scaleX(0);
}
.section-divider.is-visible {
  animation: dividerGrow 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ══════════════════════════════════════════════
   ICONE SVG A LINEE (sostituzione emoji)
   ══════════════════════════════════════════════ */

/* Icona inline dentro testo e pulsanti */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.16em; flex: none; }

/* Icone dentro i "badge" tondi/quadrati: ereditano la dimensione dal font-size del contenitore */
.mega-ic svg,
.sc-icon svg,
.wp-icon svg,
.value-ic svg,
.promo-card-icon svg,
.ct-method-ic svg,
.addr-ic svg,
.scard-ic svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

/* Colori coerenti per contesto */
.mega-ic       { color: #148F82; }
.sc-icon       { color: #ffffff; }
.wp-icon       { color: #2EC4B6; }
.value-ic      { color: #ffffff; }
.promo-card-icon { color: #148F82; }
.ct-method-ic  { color: #ffffff; }
.addr-ic       { color: #148F82; }
.scard-ic      { color: #ffffff; }

/* Avatar dottore (fallback senza foto) */
.doctor-avatar svg,
.doc-avatar svg { width: 64px; height: 64px; color: #ffffff; }

/* ══════════════════════════════════════════════
   HOVER DINAMICO PER I BOX ANCORA STATICI
   ══════════════════════════════════════════════ */

/* FAQ + card promozioni (sfondo chiaro) */
.faq-item,
.promo-card {
  transition: box-shadow .35s cubic-bezier(.25,1,.5,1),
              transform .35s cubic-bezier(.25,1,.5,1),
              border-color .35s ease;
}
.faq-item:hover,
.promo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(20,143,130,.12);
  border-color: #148F82;
}

/* Box numeri/statistiche e pannello orari: leggero sollevamento */
.stat,
.metric,
.hours-card,
.svc-card {
  transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease;
}
.stat:hover,
.metric:hover {
  transform: translateY(-4px);
}
.hours-card:hover,
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Icona promo: piccolo balzo coordinato con la card */
.promo-card-icon {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.promo-card:hover .promo-card-icon {
  transform: translateY(-3px) scale(1.08);
}