/* ============================================================
   About
   ============================================================ */

html, body { width: 100%; height: 100%; overflow: hidden; }

/* ---- Background photo (Ken Burns) ---- */
@keyframes kenburns-bg {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.bg-photo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  filter: grayscale(0.55) brightness(0.32) saturate(0.5);
  transform-origin: center center;
  animation: kenburns-bg 24s ease-in-out infinite alternate;
}
.bg-photo picture { display: block; width: 100%; height: 100%; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.bg-photo::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.52);
}
.bg-scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.22) 3px, rgba(0,0,0,0.22) 4px
  );
}

/* ---- Copy ---- */
#about-content {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 40px 140px;
}
#about-block { max-width: 600px; width: 100%; text-align: center; }
#about-eyebrow {
  font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.2); margin-bottom: 30px;
}
#about-text {
  font-size: 21px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.8);
}
#about-text .word { display: inline-block; margin-right: 0.28em; }
/* Highlighted words are bold from the start so the layout never shifts; only
   colour is animated. */
#about-text .hl-word { font-weight: 700; }
#about-text .hl-word .punc { color: rgba(255,255,255,0.8); }

/* ---- Phrase overlay ---- */
#phrase-overlay {
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.7em; pointer-events: none;
}
.phr {
  font-size: clamp(24px, 4.5vw, 64px);
  font-weight: 800; color: #fff200;
  opacity: 0; transform: translateY(24px);
  text-align: center; letter-spacing: 0.08em;
  line-height: 1.15; text-transform: uppercase;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.phr.visible { opacity: 1; transform: translateY(0); }

/* ---- Footer pinned (page does not scroll) ---- */
#site-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 20; padding: 18px 40px;
}

@media (max-width: 768px) {
  #about-content { padding: 80px 28px 120px; }
  #about-text { font-size: 15px; line-height: 1.7; }
  #about-eyebrow { margin-bottom: 22px; }
  .phr { font-size: clamp(18px, 7vw, 40px); letter-spacing: 0.05em; }
  #site-footer { padding: 20px 24px; }
}