/* Landing Page - CSS v0.8 fix icone social */
:root {
  --ease: cubic-bezier(.16,.8,.32,1);
  --gradient:linear-gradient(90deg,#ff5f77,#410b3d);
}

/* Riduci saturazione immagini fuori viewport (progressive reveal) */
.lazy-illustration:not(.loaded) img { filter: blur(8px) saturate(.7) brightness(.9); }

.feature-card.reveal, .seo-card.reveal { animation: riseIn .85s var(--ease) forwards; }
.feature-card:nth-child(2){animation-delay:.05s}
.feature-card:nth-child(3){animation-delay:.1s}
.feature-card:nth-child(4){animation-delay:.15s}
.feature-card:nth-child(5){animation-delay:.2s}
.feature-card:nth-child(6){animation-delay:.25s}
.seo-card:nth-child(2){animation-delay:.05s}
.seo-card:nth-child(3){animation-delay:.1s}
.seo-card:nth-child(4){animation-delay:.15s}
.seo-card:nth-child(5){animation-delay:.2s}
.seo-card:nth-child(6){animation-delay:.25s}

@keyframes riseIn { 0% {opacity:0; transform:translateY(30px) scale(.98);} 55% {opacity:1;} 100% {opacity:1; transform:translateY(0) scale(1);} }

/* Hover accent subtle */
.feature-card:hover { box-shadow:0 10px 34px -12px rgba(0,0,0,.18),0 4px 12px -2px rgba(0,0,0,.08); transform:translateY(-4px); transition:.55s var(--ease); }
.seo-card:hover { box-shadow:0 12px 28px -14px rgba(0,0,0,.2),0 4px 14px -3px rgba(0,0,0,.08); transform:translateY(-4px); transition:.55s var(--ease); }

/* Focus ring personalizzato mantenendo a11y */
.feature-card:focus-within, .seo-card:focus-within { outline:2px solid #a084e8; outline-offset:3px; }

/* Riduzione motion */
@media (prefers-reduced-motion:reduce) {
  .feature-card.reveal, .seo-card.reveal { animation:none!important; opacity:1!important; transform:none!important; }
  .feature-card:hover, .seo-card:hover { transform:none!important; }
}

/* Piccoli raffinamenti tipografici opzionali */
.hero-sub strong { color:#fff; font-weight:600; }
.section-head em { font-style:normal; background:linear-gradient(90deg,#cca9ff,#ffb18d); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Utility SEO text balancing (solo se supportato) */
@supports (text-wrap:balance) {
  h1, .section-head h2 { text-wrap:balance; }
  .hero-sub, .section-head p { text-wrap:pretty; }
}

/* ================= Glitch Heading ================= */
/* Evitiamo reset globali: nessun override di body/p generico */
.hero-heading-glitch { display:flex; flex-direction:column; align-items:center; gap:1.15rem; color: #ffffff; }
.hero-heading-glitch .glitch-wrapper { position:relative; font-size:clamp(2.4rem,6.5vw,4.2rem); font-weight:700; line-height:1; font-family:'Inter',system-ui,sans-serif; letter-spacing:-.05em; color: #ffffff; }
.hero-heading-glitch .glitch-original { position:absolute; opacity:0; pointer-events:none; }
@keyframes glitch-switch { 0%{content:var(--char-0);}10%{content:var(--char-1);}20%{content:var(--char-2);}30%{content:var(--char-3);}40%{content:var(--char-4);}50%{content:var(--char-5);}60%{content:var(--char-6);}70%{content:var(--char-7);}80%{content:var(--char-8);}90%{content:var(--char-9);}100%{content:var(--txt);} }

/* Accessibilità: mantenere h1 solo per screen reader */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }

@media (prefers-reduced-motion:reduce) {
  .glitch-anim [data-char]::after { animation:none!important; content:attr(data-char)!important; }
}

/* ================= Share CTA and Modal ================= */
/* Share CTA wrapper inside the SEO block on landing */
.share-cta { display:block; max-width:760px; text-align:center; margin-inline:auto; }
.share-cta h2 { color:#fff; margin-bottom:.5rem; font-size:1.4rem; font-weight:600; }
.share-cta p { color:#e8e8e8; margin-bottom:1rem; }

/* Share Popup (copiato da bacheca.css) */
.share-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .25s ease;
  opacity: 0;
}
.share-overlay.active { display:block; opacity:1; }

/* Container */
.share-box {
  position: fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-46%) scale(.9);
  z-index:1060;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:#ffffffc4;
  padding:14px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(8,18,36,0.12);
  max-width:420px;
  width:100%;
  box-sizing:border-box;
  font-family:"Poppins", sans-serif;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.68,-0.55,.27,1.55), transform .45s cubic-bezier(.68,-0.55,.27,1.55), visibility 0s linear .4s;
}
.share-box.active {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .35s cubic-bezier(.68,-0.55,.27,1.55), transform .45s cubic-bezier(.68,-0.55,.27,1.55), visibility 0s;
}

.share-box .share-header {
  width: 100%;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  padding: 2px 2px;
}

/* Icon wrapper (scoped) */
.share-box .wrapper {
  display: inline-flex;
  list-style: none;
  height: 120px;
  width: 100%;
  padding-top: 0;
  font-family: "Poppins", sans-serif;
  justify-content: center;
  margin: 0;
}

.share-box .wrapper .icon {
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px; /* base glyph size */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color:#222;
}

/* Normalize icon fonts within share modal wrapper (affects .bi elements) */
.share-box .wrapper .icon i.bi { font-size: 1em; line-height: 1; display:inline-block; width:1em; height:1em; }

/* Normalize ALL social icon sizes inside share modal */
.share-box .wrapper .icon i.bi::before{
  -webkit-mask-size: 1em; mask-size: 1em;
  width: 1em; height: 1em;
}

.share-box .wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  white-space: nowrap;
}

.share-box .wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.share-box .wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.share-box .wrapper .icon:hover span,
.share-box .wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

/* Brand hovers */
.share-box .wrapper .facebook:hover,
.share-box .wrapper .facebook:hover .tooltip,
.share-box .wrapper .facebook:hover .tooltip::before { background:#1877f2; color:#fff; }

.share-box .wrapper .x:hover,
.share-box .wrapper .x:hover .tooltip,
.share-box .wrapper .x:hover .tooltip::before { background:#000; color:#fff; }

.share-box .wrapper .whatsapp:hover,
.share-box .wrapper .whatsapp:hover .tooltip,
.share-box .wrapper .whatsapp:hover .tooltip::before { background:#25d366; color:#fff; }

.share-box .wrapper .instagram:hover,
.share-box .wrapper .instagram:hover .tooltip,
.share-box .wrapper .instagram:hover .tooltip::before { background:linear-gradient(to right,#833ab4,#fd1d1d,#fcb045); color:#fff; }

/* Extra message */
.share-box #shareExtra { font-size:11px; letter-spacing:.4px; }

/* Mobile refinements */
@media (max-width: 480px) {
  .share-box { max-width: 360px; padding: 12px 12px 13px; gap:10px; }
  .share-box .wrapper { height: 100px; flex-wrap: wrap; }
  .share-box .wrapper .icon { margin:8px; width:46px; height:46px; font-size:17px; }
  .share-box .share-header { font-size:13px; padding:2px 4px; }
  .share-box #shareExtra { font-size:10px; }
}

@media (prefers-color-scheme: dark){
  .share-box { background:#1e1e22d8; box-shadow:0 12px 30px rgba(0,0,0,.5); }
  .share-box .share-header { color: #c7c7c7; }
  .share-box .wrapper .icon { background:#27272c; box-shadow:0 10px 14px rgba(0,0,0,0.35); color:#c7c7c7; }
  .share-box .wrapper .tooltip { background:#2e2e33; box-shadow:0 10px 14px rgba(0,0,0,0.45); }
  .share-box .wrapper .tooltip::before { background:#2e2e33; }
}