/* ==========================================================================
   Featuriz F mark · 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-b:#14B8A6; }) ----
   --fz-a  upper leaf   default Flame Blue #1A8CFF
   --fz-b  lower leaf   default Leaf Teal  #0E9F8E  (use #14B8A6 on dark footers)
   --fz-size  height of the mark          default 1.5em (follows the footer font size)
   --fz-amp   motion strength (1 = normal, 0 = still)
   --fz-glow  hover glow colour
   Brand rule: leave the two leaf colours as they are, except teal on dark and black/white one-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; }

/* 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: 20% 100%; animation: fz-sway-1 5.0s ease-in-out infinite; }
.fz-flame .fz-t2 { transform-origin: 35% 100%; animation: fz-sway-2 3.2s ease-in-out infinite; }

/* Motion: slow upper leaf, quicker lower leaf = reads as fire, not a wobble. Colours never change. */
@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); }
}

/* ---- 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(26, 140, 255, .6)));
}
.fz-credit:focus-visible {
  outline: 2px solid var(--fz-a, #1A8CFF);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---- Accessibility: no motion = still, correctly coloured mark ---- */
@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; }
}