/* "Designed & built by Fortimark" — a quiet gold signature in the footer of every page.
   In the app the entrance (rook fades up, letters rise out of the line) runs when the footer scrolls
   into view; everything here is the resting state, a slow glint, and the hover response. */
.fm-credit {
  --fm-gold: #d9a520;
  --fm-gold-hi: #ffe9a8;
  --fm-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-block: .5rem;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.fm-credit:focus-visible { border-radius: 4px; outline: 1px solid var(--fm-gold); outline-offset: 6px; }

.fm-credit-rook { display: inline-flex; flex: none; }

.fm-credit-mark {
  display: block;
  width: auto;
  height: 24px;
  opacity: .92;
  transform-origin: 50% 100%;
  transition: transform .7s var(--fm-ease), opacity .4s ease;
}

.fm-credit-text {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  line-height: 1;
  white-space: nowrap;
}

.fm-credit-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
  transition: color .4s ease;
}

.fm-credit-name {
  position: relative;
  display: inline-flex;
  overflow: hidden; /* letters rise from below this line */
  padding-block: .28rem;
  font-family: Montserrat, Inter, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fm-gold);
}

.fm-credit-letter { display: inline-block; }

/* A soft glint crosses the wordmark every few seconds. */
.fm-credit-glyph {
  display: inline-block;
  animation: fm-glint 7s ease-in-out infinite;
  animation-delay: calc(2s + var(--i) * .09s);
}

/* Hairline that draws under the wordmark on hover. */
.fm-credit-name::after {
  content: '';
  position: absolute;
  left: 0;
  right: .3em;
  bottom: 0;
  height: 1px;
  background: var(--fm-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--fm-ease);
}

/* Small arrow that slides in on hover. */
.fm-credit::after {
  content: '';
  width: .62rem;
  height: .62rem;
  margin-left: -.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23d9a520' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10 10 2M4.5 2H10v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-6px, 4px);
  transition: opacity .4s ease, transform .6s var(--fm-ease);
}

@media (hover: hover) {
  .fm-credit:hover .fm-credit-mark { opacity: 1; transform: translateY(-2px) rotate(-7deg); }
  .fm-credit:hover .fm-credit-label { color: rgba(255, 255, 255, .78); }
  .fm-credit:hover .fm-credit-name::after { transform: scaleX(1); transform-origin: left; }
  .fm-credit:hover .fm-credit-glyph {
    animation: fm-glint-fast .9s ease-in-out both;
    animation-delay: calc(var(--i) * .04s);
  }
  .fm-credit:hover::after { opacity: 1; transform: translate(0, -1px); }
}
.fm-credit:focus-visible .fm-credit-name::after { transform: scaleX(1); }

@keyframes fm-glint {
  0%, 12%, 100% { color: var(--fm-gold); text-shadow: none; }
  6% { color: var(--fm-gold-hi); text-shadow: 0 0 10px rgba(255, 214, 110, .55); }
}
@keyframes fm-glint-fast {
  0%, 100% { color: var(--fm-gold); text-shadow: none; }
  45% { color: var(--fm-gold-hi); text-shadow: 0 0 10px rgba(255, 214, 110, .6); }
}

@media (max-width: 380px) {
  .fm-credit { gap: .55rem; }
  .fm-credit-text { gap: .5rem; }
  .fm-credit-label { font-size: .62rem; letter-spacing: .12em; }
  .fm-credit-name { font-size: .74rem; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-credit-glyph { animation: none !important; }
  .fm-credit-mark, .fm-credit-name::after, .fm-credit::after { transition: none; }
}