/* ==========================================================================
   Featuriz flame · animation + link styles
   © Featuriz Technologies · Estd 2009 · https://featuriz.in
   Needs the flame SVG INLINED in the page (not <img>), or page CSS can't reach it.
   ========================================================================== */

/* ---- Colours (override on any parent, e.g. .site-footer { --fz-a:#0a7; }) ----
   --fz-a  outer tongue   default ember  #e8350c
   --fz-b  middle tongue  default orange #ff8a00
   --fz-c  inner tongue   default gold   #ffc21a
   --fz-size  height of the flame         default 1.5em (follows the footer font size)
   --fz-amp   motion strength (1 = normal, 0 = still)
   --fz-glow  hover glow colour                                              */

/* Black flame: add class "fz-black" next to "fz-flame" on the <svg>.
   Motion only, colour stays black. */
.fz-flame.fz-black { --fz-a: #000; --fz-b: #000; --fz-c: #000; }

/* Lets --fz-amp ease smoothly on hover (older browsers simply snap) */
@property --fz-amp { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---- The flame (SVG side) ---- */
.fz-flame {
  display: block;
  height: var(--fz-size, 1.5em);   /* scales with the surrounding text */
  width: auto;
  overflow: visible;
  transition: transform .35s ease, filter .35s ease;
}
.fz-flame path {
  transform-box: fill-box;          /* each tongue pivots from its own base */
  will-change: transform;
}
.fz-flame .fz-t1 { transform-origin: 21% 100%; animation: fz-sway-1 6.0s ease-in-out infinite, fz-heat 5s ease-in-out infinite;        }
.fz-flame .fz-t2 { transform-origin: 29% 100%; animation: fz-sway-2 3.6s ease-in-out infinite, fz-heat 5s ease-in-out infinite -1.7s; }
.fz-flame .fz-t3 { transform-origin: 20% 100%; animation: fz-sway-3 1.9s ease-in-out infinite, fz-heat 5s ease-in-out infinite -3.4s; }

/* Colour: ember -> orange -> gold, each tongue offset in time so heat "travels" */
@keyframes fz-heat {
  0%, 100% { fill: var(--fz-a, #e8350c); }
  33%      { fill: var(--fz-b, #ff8a00); }
  66%      { fill: var(--fz-c, #ffc21a); }
}
/* Motion: slow outer, medium middle, fast inner = reads as fire, not a wobble */
@keyframes fz-sway-1 {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(calc(2.4deg * var(--fz-amp, 1))) scale(1.015); }
  65%      { transform: rotate(calc(-1.8deg * var(--fz-amp, 1))) scale(.99); }
}
@keyframes fz-sway-2 {
  0%, 100% { transform: rotate(0) scaleY(1); }
  25%      { transform: rotate(calc(-3deg * var(--fz-amp, 1))) scaleY(1.03); }
  60%      { transform: rotate(calc(2.6deg * var(--fz-amp, 1))) scaleY(.98); }
}
@keyframes fz-sway-3 {
  0%, 100% { transform: rotate(0) scale(1); }
  20%      { transform: rotate(calc(6deg * var(--fz-amp, 1))) scale(1.1); }
  50%      { transform: rotate(calc(-5deg * var(--fz-amp, 1))) scale(.94); }
  75%      { transform: rotate(calc(3deg * var(--fz-amp, 1))) scale(1.06); }
}

/* ---- The link (HTML side): put class "fz-credit" on your <a> ---- */
.fz-credit {
  --fz-amp: 1;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;              /* keep "Crafted by Featuriz" + flame on one line */
  vertical-align: middle;
  margin-inline: .75em;             /* breathing room from neighbouring text (e.g. the copyright line) */
  color: inherit;
  text-decoration: none;
  transition: --fz-amp .4s ease;
}
.fz-credit:hover, .fz-credit:focus-visible { --fz-amp: 1.8; }
.fz-credit:hover .fz-flame,
.fz-credit:focus-visible .fz-flame {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 6px var(--fz-glow, rgba(255, 138, 0, .65)));
}
.fz-credit:focus-visible {
  outline: 2px solid var(--fz-b, #ff8a00);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---- Accessibility: no motion = still, correctly coloured flame ---- */
@media (prefers-reduced-motion: reduce) {
  .fz-flame path { animation: none !important; }
  .fz-flame, .fz-credit { transition: none; }
  .fz-credit:hover .fz-flame, .fz-credit:focus-visible .fz-flame { transform: none; }
}