/* ==========================================================================
   Little Fight NYC — credit mark (animated tugboat)
   Canonical source: agency-ops/templates/lifi-credit/
   Drop-in, dependency-free, no JS. Inherits colour via currentColor so it
   reverses on any ground. All motion stops under prefers-reduced-motion.
   Every class is lfc- prefixed to guarantee no collision with host CSS.
   ========================================================================== */

.lfc {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-height: 44px;
  padding: 0.25em 0.15em;
  color: inherit;
  /* Host page may set --lfc-size (any length) to scale the whole mark. */
  font-size: var(--lfc-size, 1em);
  /* Stated, not inherited: several host footers set link weight to 700-800,
     which would otherwise render "Made by" heavier than the brand name. */
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.lfc-boat {
  position: relative;
  display: block;
  flex: none;
  width: 3.1em;
  height: 2.2em;
}

/* Hull + beacon bob together on the waterline. */
.lfc-hull {
  position: absolute;
  bottom: 0.28em;
  left: 50%;
  width: 2.2em;
  transform: translateX(-50%);
  transform-origin: 50% 92%;
  animation: lfc-bob 5.2s ease-in-out infinite;
}

.lfc-mark {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* The one signal: an orange running light. Brand law — the boat is neutral,
   only the light is orange. */
.lfc-beacon {
  position: absolute;
  top: -0.16em;
  left: 0.64em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--lfc-signal, #f97316);
  box-shadow: 0 0 0.5em 0.06em rgb(249 115 22 / 0.55);
  animation: lfc-beacon 2.6s ease-in-out infinite;
}

/* Two wave bands scrolling at different speeds — the water moves, not the boat. */
.lfc-sea {
  position: absolute;
  inset: auto 0 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0.8em;
  opacity: 0.75;
}

/* Both waves stack on the same waterline. Without position they are in-flow
   block siblings, so the front wave lands a full box below the clipped .lfc-sea
   and never renders — only the faint back wave shows. */
.lfc-wave {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lfc-wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  animation: lfc-drift 3.6s linear infinite;
}

.lfc-wave--back path {
  stroke-width: 0.9;
  opacity: 0.42;
  animation-duration: 6s;
  animation-direction: reverse;
}

.lfc-text {
  white-space: nowrap;
}

.lfc-name {
  font-weight: 600;
}

.lfc:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes lfc-bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-2.2deg);
  }
  50% {
    transform: translateX(-50%) translateY(-0.09em) rotate(2.2deg);
  }
}

@keyframes lfc-beacon {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes lfc-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-16px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .lfc:hover .lfc-hull {
    animation-duration: 2.6s;
  }
  .lfc:hover .lfc-wave path {
    animation-duration: 1.8s;
  }
  .lfc:hover .lfc-wave--back path {
    animation-duration: 3s;
  }
  .lfc:hover .lfc-name {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfc-hull,
  .lfc-beacon,
  .lfc-wave path,
  .lfc:hover .lfc-hull,
  .lfc:hover .lfc-wave path {
    animation: none;
  }
  .lfc-hull {
    transform: translateX(-50%) rotate(-1.5deg);
  }
  .lfc-beacon {
    opacity: 1;
  }
}

/* Little Fight NYC credit — the closing line of the CC Films footer. */
.site-credit {
  --lfc-size: 11px;
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.55);
}

/* The footer gives every link a gold underline rule; the credit is a mark, not
   a footer link, so it opts out. */
.site-credit .lfc {
  border-bottom: 0;
}

.site-credit .lfc:hover {
  color: rgb(255 255 255 / 0.92);
}