/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --brand-ink: #151b28;
  --brand-accent: #0f766e;
  --brand-accent-soft: #e0f2f1;
}

body {
  font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
}

body.font-\[\'Space_Grotesk\'\] {
  font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
}

.font-\[\'Fraunces\'\] {
  font-family: "Fraunces", "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
}

.page-fade {
  animation: pageFade 0.45s ease-out both;
}

.panel-rise {
  animation: panelRise 0.55s ease-out both;
}

.stagger > * {
  animation: panelRise 0.6s ease-out both;
}

.stagger > *:nth-child(2) {
  animation-delay: 0.05s;
}

.stagger > *:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ocr-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #94a3b8;
  box-shadow: 10px 0 0 #cbd5f5, 20px 0 0 #e2e8f0;
  animation: ocrPulse 1.2s ease-in-out infinite;
}

.ocr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  --ocr-loading-gap: 20px;
  --ocr-loading-gap-leading: 38px;
  min-height: 96px;
  white-space: nowrap;
}

.ocr-loading.hidden {
  display: none;
}

.ocr-loading .ocr-pulse-pair:first-child {
  margin-right: var(--ocr-loading-gap-leading);
}

.ocr-loading .ocr-pulse-pair:last-child {
  margin-left: var(--ocr-loading-gap);
}

.ocr-pulse-large {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #94a3b8;
  box-shadow: 16px 0 0 #cbd5f5, 32px 0 0 #e2e8f0;
  animation: ocrPulse 1.2s ease-in-out infinite;
}

.ocr-pulse-pair {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #94a3b8;
  box-shadow: 16px 0 0 #cbd5f5;
  animation: ocrPulsePair 1.2s ease-in-out infinite;
}

@keyframes ocrPulse {
  0% {
    box-shadow: 10px 0 0 #cbd5f5, 20px 0 0 #e2e8f0;
  }
  50% {
    box-shadow: 10px 0 0 #94a3b8, 20px 0 0 #cbd5f5;
  }
  100% {
    box-shadow: 10px 0 0 #cbd5f5, 20px 0 0 #e2e8f0;
  }
}

@keyframes ocrPulsePair {
  0% {
    box-shadow: 16px 0 0 #cbd5f5;
  }
  50% {
    box-shadow: 16px 0 0 #94a3b8;
  }
  100% {
    box-shadow: 16px 0 0 #cbd5f5;
  }
}

.app-background {
  display: none !important;
}