/* Standalone so the intro can finish even when the application cannot load.
   Fallback colors match src/index.css; no external font or image is required. */
/* Important declarations in earlier layers beat Tailwind's important [hidden]
   reset. Keep the HTML attribute so a missing stylesheet fails open. */
@layer bf-intro {
  html[data-intro="active"] #bf-intro { display: grid !important; }

  @media (prefers-reduced-motion: reduce) {
    html[data-intro="active"] #bf-intro { display: none !important; }
  }
}

#bf-intro {
  display: none;
}

html[data-intro="active"] #bf-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  place-items: center;
  overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  color: var(--color-fg, #0b221a);
  font-family: Montserrat, system-ui, sans-serif;
  animation: bf-intro-exit 1900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-theme="dark"] #bf-intro {
  background: var(--color-bg, #0a0d12);
  color: var(--color-fg, #f6f6f4);
}

.bf-intro-lockup {
  display: grid;
  grid-template-columns: 72px auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 22px;
  padding: 24px;
}

.bf-intro-mark {
  --intro-shift: calc(clamp(44px, 10vw, 64px) * 1.4 + 10px);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--color-bf-green, #2e8b57);
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  animation: bf-intro-mark 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bf-intro-name {
  font-size: clamp(44px, 10vw, 64px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.1;
  animation: bf-intro-name 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bf-intro-caption {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-align: center;
  animation: bf-intro-caption 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bf-intro-mark {
  0% { opacity: 0; transform: translateX(var(--intro-shift)) scale(0.72) rotate(-12deg); }
  24% { opacity: 1; transform: translateX(var(--intro-shift)) scale(1) rotate(0deg); }
  62%, 100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
}

@keyframes bf-intro-name {
  0%, 28% { opacity: 0; transform: translateY(24px); }
  65%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes bf-intro-caption {
  0%, 48% { opacity: 0; transform: translateY(12px); }
  80%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes bf-intro-exit {
  0%, 82% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-intro="active"] #bf-intro { animation: none; }
  .bf-intro-mark, .bf-intro-name, .bf-intro-caption { animation: none; }
}