/* Dude Bikes — logo intro animation styles */
.logo-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #111010;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity .6s ease;
}
.logo-intro.li-done { opacity: 0; pointer-events: none; }

.li-logo {
  width: min(62vw, 560px);
  opacity: 0;
  transform: translateX(60px) skewX(-8deg);
  filter: drop-shadow(0 0 0 rgba(255,205,0,0));
}
.logo-intro.li-play .li-logo {
  animation: li-slam .55s cubic-bezier(.2,.9,.2,1) .95s forwards,
             li-settle .8s ease 1.55s forwards;
}
@keyframes li-slam {
  0%   { opacity: 0; transform: translateX(140px) skewX(-14deg); }
  60%  { opacity: 1; transform: translateX(-8px) skewX(2deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes li-settle {
  from { transform: translateX(0) scale(1); }
  to   { transform: translateX(0) scale(1); } /* holds; filter eases below */
}
.logo-intro.li-play .li-logo { animation-fill-mode: forwards; }

/* the yellow mark glows hot as it lands, then cools to clean ink on light */
.logo-intro.li-play .li-logo { animation: li-slam .55s cubic-bezier(.2,.9,.2,1) .95s forwards, li-cool .9s ease 1.6s forwards; }
@keyframes li-cool {
  from { filter: drop-shadow(0 0 26px rgba(255,205,0,.85)) brightness(1.25); }
  to   { filter: drop-shadow(0 0 0 rgba(255,205,0,0)) brightness(1); }
}

/* speed lines: yellow streaks racing left→right, like a bike passing */
.li-speedlines { position: absolute; inset: 0; overflow: hidden; }
.li-speedlines span {
  position: absolute;
  top: calc(12% + (var(--sl) * 5.4%) % 76%);
  left: -30%;
  width: 26%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffcd00 60%, transparent);
  opacity: 0;
  transform: translateX(0) scaleX(.4);
}
.logo-intro.li-play .li-speedlines span {
  animation: li-streak .7s cubic-bezier(.6,0,.9,.4) forwards;
  animation-delay: calc(var(--sl) * 55ms);
}
@keyframes li-streak {
  0%   { opacity: 0; transform: translateX(0) scaleX(.4); }
  25%  { opacity: .95; }
  100% { opacity: 0; transform: translateX(480%) scaleX(1.6); }
}
/* a few thicker lines for depth */
.li-speedlines span:nth-child(3n) { height: 3px; opacity: .9; }
.li-speedlines span:nth-child(4n) { top: calc(20% + (var(--sl) * 7.1%) % 60%); }

/* landing flash */
.li-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,205,0,.28), transparent 60%);
  opacity: 0;
}
.logo-intro.li-play .li-flash { animation: li-flash .5s ease 1.45s forwards; }
@keyframes li-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
}

/* pause: freeze every animation in place */
.logo-intro.li-paused *,
.logo-intro.li-paused { animation-play-state: paused !important; }

/* keyboard hint */
.li-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .1em; color: rgba(232,232,225,.45);
  font-family: "Inter", sans-serif;
}

/* mini mode: the same animation inline over the header logo */
.logo-intro.li-mini {
  position: absolute;
  left: 50%; top: 50%;
  width: 300px; height: 130px;
  transform: translate(-50%, -50%);
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(17,16,16,.35);
  overflow: hidden;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  animation: li-mini-in .25s ease;
}
@keyframes li-mini-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.9); } }
.logo-intro.li-mini .li-logo { width: 78%; height: auto; position: relative; opacity: 0; }
.logo-intro.li-mini.li-play .li-logo {
  animation: li-slam .55s cubic-bezier(.2,.9,.2,1) .5s forwards,
             li-cool .9s ease 1.1s forwards;
}
.logo-intro.li-mini .li-flash {
  background: radial-gradient(circle at 50% 50%, rgba(255,205,0,.3), transparent 65%);
}
.logo-intro.li-mini.li-play .li-flash { animation: li-flash .5s ease 1s forwards; }
.logo-intro.li-mini .li-speedlines span {
  top: calc(15% + (var(--sl) * 5%) % 70%);
  width: 34%;
}
.logo-intro.li-mini.li-play .li-speedlines span {
  animation: li-streak .6s cubic-bezier(.6,0,.9,.4) forwards;
  animation-delay: calc(var(--sl) * 40ms);
}
.logo-intro.li-mini.li-done { opacity: 0; transition: opacity .3s ease; }