/* ===================================================================
   MÉTODO CAMPEÃO — about_me.css
   Estilos exclusivos da página about_me.html.
   Depende de style.css (carregado antes) para tokens :root,
   nav, footer, botões e tipografia base.
   =================================================================== */

/* --- BACKGROUND CAROUSEL --- */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  animation: bgFade 120s linear infinite;
}

/*
  Ciclo: 8 imagens × 15 s = 120 s total.
  Cada slide:
    0 %     →  1.25 %  (0 s → 1.5 s)   fade-in
    1.25 %  → 11.25 %  (1.5 s → 13.5 s) hold
    11.25 % → 12.5 %   (13.5 s → 15 s)  fade-out
    12.5 %  → 100 %    (15 s → 120 s)   invisível

  Delays negativos fazem todos os slides estarem
  "já em progresso" desde o carregamento da página,
  cada um no seu slot correto do ciclo.
*/
@keyframes bgFade {
  0%     { opacity: 0; }
  1.25%  { opacity: 1; }
  11.25% { opacity: 1; }
  12.5%  { opacity: 0; }
  100%   { opacity: 0; }
}

.bg-slide:nth-child(1) {
  background-image: url('../images/about_me/IMG_9488.JPEG');
  animation-delay: 0s;
}
.bg-slide:nth-child(2) {
  background-image: url('../images/about_me/IMG_9498.JPEG');
  animation-delay: -105s;
}
.bg-slide:nth-child(3) {
  background-image: url('../images/about_me/IMG_9506.JPEG');
  animation-delay: -90s;
}
.bg-slide:nth-child(4) {
  background-image: url('../images/about_me/IMG_9524.JPEG');
  animation-delay: -75s;
}
.bg-slide:nth-child(5) {
  background-image: url('../images/about_me/IMG_9527.JPEG');
  animation-delay: -60s;
}
.bg-slide:nth-child(6) {
  background-image: url('../images/about_me/IMG_9533.JPEG');
  animation-delay: -45s;
}
.bg-slide:nth-child(7) {
  background-image: url('../images/about_me/IMG_9535.JPEG');
  animation-delay: -30s;
}
.bg-slide:nth-child(8) {
  background-image: url('../images/about_me/IMG_9536.JPEG');
  animation-delay: -15s;
}

/* --- OVERLAY DE CONTRASTE --- */

.page-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 13, 11, 0.72);
}

/* --- LAYOUT DA PÁGINA --- */

#about-page {
  min-height: 100vh;
  /* Compensa o header sticky de 64 px */
  padding-top: 64px;
}

.about-content {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: flex-start;
}

.about-inner {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: var(--sec-y) var(--pad-x);
}

/* --- TIPOGRAFIA DA PÁGINA --- */

.about-inner h1 {
  font: 700 var(--sz-h2lg) / 1.15 var(--serif);
  color: var(--accent);
  margin: 0 0 clamp(28px, 4vw, 48px);
  letter-spacing: -0.01em;
}

.about-inner p {
  font: 400 var(--sz-md) / 1.8 var(--sans);
  color: var(--text);
  margin: 0 0 1.4em;
  max-width: 65ch;
}

.about-inner p:last-child {
  margin-bottom: 0;
}

/* Parágrafos de uma linha (frases curtas de impacto) */
.about-inner p.short {
  font-size: var(--sz-lg);
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}

/* Frase de encerramento */
.about-inner p.closing {
  margin-top: clamp(32px, 5vw, 56px);
  font-size: var(--sz-lg);
  color: var(--accent);
  font-style: italic;
}

/* --- ACESSIBILIDADE — REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
  .bg-slide {
    animation: none;
    opacity: 0;
  }
  .bg-slide:first-child {
    opacity: 1;
  }
}

/* --- MOBILE (≤ 767 px) --- */

@media (max-width: 767px) {
  #about-page {
    /* Compensa o header sticky de 56 px no mobile */
    padding-top: 56px;
  }

  .about-content {
    min-height: calc(100vh - 56px);
  }

  .about-inner h1 {
    font-size: clamp(26px, 7vw, 40px);
  }

  .about-inner p {
    font-size: var(--sz-base);
    line-height: 1.75;
  }

  .about-inner p.short,
  .about-inner p.closing {
    font-size: var(--sz-md);
  }
}