/* Firma Beautiful Life nel footer (markup in src/partials/credit.html).
   Il drago ruota in 3D sull'asse verticale e sputa fuoco a pixel. */
.bl-credit-row { flex: 1 1 100%; order: 9; display: flex; justify-content: center; max-width: 1320px; margin: 12px auto 0; }
.bl-credit {
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px; margin: 0;
  color: inherit; font-family: "Chainprinter", "Courier New", monospace;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}
.bl-credit a { color: inherit; text-decoration: none; transition: color .3s; }
.bl-credit b { font-weight: inherit; color: #fff4fa; transition: color .3s; }
.bl-credit a:hover b, .bl-credit a:focus-visible b { color: #ff3aa8; }

/* "Boulevardier" tratteggiato: al passaggio (o al tocco/focus) compare la ricetta */
.bl-boul { position: relative; cursor: help; text-decoration: underline dashed 1px; text-underline-offset: 4px; outline-offset: 3px; }
.bl-boul:hover, .bl-boul:focus { color: #ff3aa8; }
.bl-ricetta {
  position: absolute; z-index: 20; left: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(17rem, 80vw);
  display: grid; gap: .3em; padding: .9em 1em; border: 1px solid #ff3aa8; border-radius: 2px;
  background: #1c1012; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,58,168,.25);
  color: #fff4fa; font-size: .95em; line-height: 1.35; letter-spacing: .04em; text-transform: none; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s, transform .25s, visibility .25s;
}
.bl-ricetta b { color: #ff3aa8; letter-spacing: .12em; text-transform: uppercase; }
.bl-ricetta i { font-style: normal; color: #ffd0ea; margin-top: .3em; }
.bl-boul:hover .bl-ricetta, .bl-boul:focus .bl-ricetta { opacity: 1; visibility: visible; transform: none; }
/* schermi stretti: la ricetta si allinea alla riga della firma, non alla parola (resta dentro lo schermo) */
@media (max-width: 640px) {
  .bl-credit { position: relative; }
  .bl-boul { position: static; }
  .bl-ricetta { left: 0; max-width: 100%; }
}

.bl-credit__stage { flex: none; display: inline-block; width: 4.4em; aspect-ratio: 144 / 62; perspective: 140px; }
.bl-drago { display: block; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; animation: blSpin 5s linear infinite; }
.bl-drago__body { fill: #fff4fa; }
.bl-drago__fire path { fill: #d90022; transform-box: fill-box; transform-origin: center; animation: blFire .9s ease-out infinite both; }
/* i pixel partono dalla bocca (in alto a sinistra) in sequenza */
.bl-drago__fire path:nth-child(6) { animation-delay: 0s; }
.bl-drago__fire path:nth-child(1) { animation-delay: .1s; }
.bl-drago__fire path:nth-child(7) { animation-delay: .16s; }
.bl-drago__fire path:nth-child(4) { animation-delay: .24s; }
.bl-drago__fire path:nth-child(8) { animation-delay: .32s; }
.bl-drago__fire path:nth-child(2) { animation-delay: .4s; }
.bl-drago__fire path:nth-child(5) { animation-delay: .48s; }
.bl-drago__fire path:nth-child(3) { animation-delay: .56s; }

@keyframes blSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes blFire {
  0%   { opacity: 0; transform: translate(-5px, -4px) scale(.3); fill: #ffe066; }
  20%  { opacity: 1; fill: #ffb000; }
  55%  { fill: #ff5a1f; }
  100% { opacity: 0; transform: translate(5px, 5px) scale(1.5); fill: #d90022; }
}
.bl-credit:hover .bl-drago { animation-duration: 1.6s; }
.bl-credit:hover .bl-drago__fire path { animation-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  .bl-drago, .bl-drago__fire path { animation: none !important; }
}