/* ═══════════════════════════════════════════════
   SCROLL REVEAL + MICRO-INTERACTIONS
   Ispirato ai principi Anthropic Skills:
   "One well-orchestrated page load with staggered
    reveals creates more delight than scattered
    micro-interactions"
   ═══════════════════════════════════════════════ */

/* ── Reveal base ── */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.sr.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger delays per card grid ── */
.sr-d1 { transition-delay: 0.08s; }
.sr-d2 { transition-delay: 0.16s; }
.sr-d3 { transition-delay: 0.24s; }
.sr-d4 { transition-delay: 0.32s; }
.sr-d5 { transition-delay: 0.40s; }
.sr-d6 { transition-delay: 0.48s; }

/* ── Slide variants ── */
.sr-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-left.visible,
.sr-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Scale-in per icone/avatar ── */
.sr-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sr-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════
   GRAIN TEXTURE — Atmosphere & Depth
   "Create atmosphere and depth rather than
    defaulting to solid colors"
   ═══════════════════════════════════════════════ */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════
   ENHANCED HOVER — Depth & Polish
   ═══════════════════════════════════════════════ */

/* Card lift con ombra progressiva */
.card-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(21, 36, 53, 0.12),
              0 4px 12px rgba(21, 36, 53, 0.06);
}

/* Link underline reveal animation */
.link-reveal {
  position: relative;
  display: inline-block;
}
.link-reveal::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--oro, #B8D44A);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-reveal:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION — Accessibilita'
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sr, .sr-left, .sr-right, .sr-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card-lift {
    transition: none;
  }
  .link-reveal::after {
    transition: none;
  }
}