/* Typography */
h1, h2, h3, h4, .tag {
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

h1, h2 {
  font-weight: 540;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-cream);
  text-shadow:
    0 0 4px  rgba(254, 222, 185, 0.6),
    0 0 15px rgba(238, 35,   36, 0.5),
    0 0 35px rgba(170, 31,   35, 0.4),
    0 0 70px rgba(170, 31,   35, 0.2);
}

h1 { font-size: var(--text-xxl); margin-bottom: var(--space-md); }
h2 { font-size: var(--text-xl);  margin-bottom: var(--space-lg); }

p, li {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-cream-dim);
  max-width: 65ch;
}

.tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin-bottom: var(--space-sm);
  opacity: 0.9;
  color: var(--color-cream-dim);
}

/* Logo */
.logo-container {
  position: absolute;
  bottom: var(--margin-y);
  right: var(--margin-x);
  width: clamp(100px, 12vw, 180px);
  z-index: 10;
}

.logo {
  width: 100%;
  height: auto;
}

/* Slide number */
.slide-number {
  position: absolute;
  top: var(--margin-y);
  left: var(--margin-x);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  font-family: var(--font-sans);
  font-weight: 500;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 20;
  opacity: 0.9;
}

/* Lists as structured data blocks */
ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

li strong {
  display: block;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--color-cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.5rem;
}

/* Emphasis */
em.vivid { color: var(--color-amber); font-style: normal; }

/* View transition styles */
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { to   { opacity: 0; } }
@keyframes slide-from-right { from { transform: translateX(4vw); opacity: 0; } }
@keyframes slide-to-left    { to   { transform: translateX(-4vw); opacity: 0; } }

::view-transition-old(root) {
  animation: 300ms ease both fade-out, 300ms ease both slide-to-left;
}

::view-transition-new(root) {
  animation: 400ms ease both fade-in, 400ms ease both slide-from-right;
}

/* ── Preloader Screen ────────────────────────────────────────────── */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: all;
  opacity: 1;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), visibility 800ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: clamp(2rem, 6vh, 4.5rem); /* Elevates progress bar and percent above native system status bars globally */
  visibility: visible;
}

/* Esconder e remover interação física do preloader quando carregado */
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Container do preloader que engloba a porcentagem e a barra */
.preloader__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Área da porcentagem (canto inferior esquerdo) */
.preloader__meta {
  padding: 0 var(--margin-x);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

/* Tipografia da porcentagem: sem serifa do sistema para evitar FOUT, refinada e leve (referência: scroll-hint label e tamanho) */
.preloader__percent {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Clean, instant system sans stack */
  font-size: var(--text-xs); /* Elegant size matching the scroll button label */
  font-weight: 400; /* Lightweight elegance matching the scroll button label */
  color: var(--color-cream);
  letter-spacing: 0.02em; /* Proportionally reduced letter-spacing for clean system-ui rendering */
  line-height: 1.0;
  display: inline-block;
  font-variant-numeric: tabular-nums; /* Largura fixa nos algarismos para evitar trepidações */
}

/* Contêiner da barra de progresso (sem cor de fundo) */
.preloader__bar-container {
  width: 100%;
  height: 2px; /* Traço extremamente fino e elegante */
  position: relative;
  overflow: hidden;
}

/* A barra de progresso em si, em tom de creme da identidade */
.preloader__bar {
  width: 100%;
  height: 100%;
  background-color: var(--color-cream);
  transform: scaleX(0);
  transform-origin: left center;
  /* Removed CSS transition for perfect lockstep synchronization with JS walking percentage */
}

/* Ajustes finos de escala responsiva */
@media (max-width: 900px) {
  .preloader__percent {
    font-size: 0.875rem; /* Exactly matches mobile scroll-hint label size */
  }
}