/* ============================================================
   EMPORIO EDILE — Icone 3D layered (tilt parallax)
   Markup: <span class="tilt-icon" data-tilt><?= ee_icon('chiave') ?></span>
   SVG:    app/views/front/_icons.php  ·  Engine: assets/js/tilt.js
   ============================================================ */

:where(.tilt-icon){
  display:inline-grid;
  place-items:center;
  width:92px;
  height:92px;
  border-radius:22px;
  background:var(--navy-900,#0B1230);
  --icon-line:#FFB400;
  --icon-fill:rgba(255,180,0,.14);
  --icon-accent:#FFC233;
  position:relative;
  transform-style:preserve-3d;
  perspective:600px;
  transition:box-shadow .25s ease;
  will-change:transform;
}

:where(.tilt-icon) svg{
  width:60%;
  height:60%;
  display:block;
  overflow:visible;
  transform-style:preserve-3d;
  pointer-events:none;
}

/* Livelli di profondità (parallasse gestito da tilt.js) */
.i-layer{
  transition:transform .18s ease-out;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Glow giallo soffuso on hover */
.tilt-icon::after{
  content:"";
  position:absolute;
  inset:-16%;
  z-index:-1;
  border-radius:30px;
  background:radial-gradient(circle at 50% 38%, rgba(255,180,0,.38), rgba(255,180,0,0) 68%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.tilt-icon:hover{
  box-shadow:
    0 0 0 1px rgba(255,180,0,.28),
    0 6px 18px rgba(255,180,0,.22),
    0 16px 44px rgba(255,180,0,.20);
}
.tilt-icon:hover::after{opacity:1}

/* Variante chiara: tile bianco, tratto blu, accento giallo */
.tilt-icon--light{
  background:#FFFFFF;
  border:1px solid var(--line,#E3E7F1);
  --icon-line:#20309C;
  --icon-fill:rgba(32,48,156,.10);
  --icon-accent:#FFB400;
}
.tilt-icon--light:hover{
  box-shadow:
    0 0 0 1px rgba(255,180,0,.35),
    0 6px 18px rgba(255,180,0,.25),
    0 16px 44px rgba(11,18,48,.12);
}

/* Accessibilità: niente animazioni se l'utente le riduce
   (tilt.js si disattiva da solo: qui spegniamo anche le transizioni CSS) */
@media (prefers-reduced-motion: reduce){
  .tilt-icon,
  .i-layer{transition:none}
}