/* Bitle, sistema di animazioni riutilizzabile
   Tutte le animazioni sono disattivate da prefers-reduced-motion (vedi base.njk). */

/* Scarabeo mascotte: colore ereditato via currentColor sugli <svg><use> */
.beetle { display: inline-block; color: var(--forest); }
.beetle svg, svg.beetle { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Hero "debug" scuro ------------------------------------------------ */
.hero-debug {
  position: relative;
  background: var(--dark);
  color: #fff;
  border-radius: 24px;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 4rem;
}
.hero-debug .mesh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 22% 20%, rgba(127,200,67,.30), transparent 45%),
    radial-gradient(circle at 82% 82%, rgba(67,157,58,.34), transparent 45%);
  filter: blur(12px);
  animation: bitle-drift 8s ease-in-out infinite alternate;
}
@keyframes bitle-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-18px,14px) scale(1.15); }
}
.hero-debug .scan {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 14px var(--lime);
  opacity: .55;
  animation: bitle-scan 5s linear infinite;
}
@keyframes bitle-scan { 0% { top: 0; } 100% { top: 100%; } }

/* Terminale ---------------------------------------------------------- */
.term {
  position: relative;
  background: #06100b;
  border: 1px solid rgba(127,200,67,.28);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.5rem;
  font-family: var(--mono);
  font-size: .92rem;
  line-height: 1.9;
  color: var(--lime);
  box-shadow: 0 0 44px rgba(127,200,67,.12);
}
.term .dots { margin-bottom: .8rem; }
.term .dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.term .line { white-space: nowrap; }
.term .ok { color: #fff; }
.term .cursor { display: inline-block; width: 9px; height: 15px; background: var(--lime); vertical-align: -2px; animation: bitle-blink 1s step-end infinite; }
@keyframes bitle-blink { 50% { opacity: 0; } }

/* Scarabeo che cammina sul bordo del terminale */
.term .beetle {
  position: absolute; right: 16px; bottom: -16px;
  width: 46px; height: 46px; color: var(--lime);
  filter: drop-shadow(0 0 10px var(--lime));
  animation: bitle-walk 7s ease-in-out infinite;
}
@keyframes bitle-walk {
  0%   { transform: translateX(0) rotate(90deg); }
  50%  { transform: translateX(-140px) rotate(90deg); }
  100% { transform: translateX(0) rotate(90deg); }
}

/* Micro-interazioni -------------------------------------------------- */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Bento portfolio ---------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 96px; gap: 14px; }
.bento .cell {
  border-radius: 16px; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Jura', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--forest); text-decoration: none;
  transition: transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.bento .cell:hover { transform: translateY(-4px); background: var(--lime); color: #08210a; box-shadow: var(--shadow-md); }
.bento .cell.big {
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(135deg, var(--lime), var(--forest)); color: #fff;
  position: relative; overflow: hidden; font-size: 1.4rem;
}
.bento .cell.big:hover { color: #fff; }
.bento .cell.big .beetle {
  position: absolute; right: -8px; bottom: -8px; width: 92px; height: 92px;
  color: rgba(255,255,255,.9); animation: bitle-wiggle 2.4s ease-in-out infinite;
}
@keyframes bitle-wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .cell.big { grid-column: span 2; }
}