/* ════════════════════════════════════════════════════════════
   logo.css — floating "shadolldev" letter word
   ════════════════════════════════════════════════════════════ */

/* ── Letter outer (physics position) ────────────────────── */
/*
 * JS writes transform: translate(Xpx, Ypx) every frame.
 * Size must match DEFAULTS.LOGO_LETTER_SIZE (36px).
 */
.logo-letter {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  will-change: transform;
  pointer-events: none;
  z-index: 9;
}

/* ── Letter body (scale transition + appear animation) ───── */
.logo-letter__body {
  width: 100%;
  height: 100%;
  scale: 0;
  opacity: 0;
  color: rgba(255, 255, 255, 0.22);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.06));
  transition:
    scale    0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity  0.3s ease,
    color    0.3s ease,
    filter   0.3s ease;
}

.logo-letter__body[data-state="alive"] {
  scale: 1;
  opacity: 1;
}

.logo-letter__body svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Ejected state — brighter, glowing ──────────────────── */
/*
 * The class is on the outer .logo-letter so the body
 * inherits a new filter/color via the transition.
 */
.logo-letter--ejected .logo-letter__body {
  color: rgba(255, 255, 255, 0.72);
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
  scale: 1.12;
}

/* ── Debug hit-count label ───────────────────────────────── */
.logo-letter__debug {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.logo-letter--show-debug .logo-letter__debug {
  display: block;
}

/* ── Hit flash animation ─────────────────────────────────── */
@keyframes logo-letter-hit {
  0%   { scale: 1;    }
  40%  { scale: 1.5;  }
  100% { scale: 1;    }
}

.logo-letter__body--hit {
  animation: logo-letter-hit 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Ejected letters get a slightly larger hit pop */
.logo-letter--ejected .logo-letter__body--hit {
  animation: logo-letter-hit-ejected 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes logo-letter-hit-ejected {
  0%   { scale: 1.12; }
  40%  { scale: 1.65; }
  100% { scale: 1.12; }
}