/* Abertura da home: contador e cortina importados da previa aprovada. */
@font-face {
  font-family: "Bianca Intro Oswald";
  src: url("../fonts/oswald-700-latin.665f37b2d0e8.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html.page-intro-locked { overflow: hidden; }
html.page-intro-locked body { padding-right: var(--page-intro-scrollbar, 0px); }
html[data-photo-intro="pending"]:not([data-page-curtain-ready])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--cor-fundo);
}

.photo-intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  pointer-events: auto;
  transform: translateY(0);
  transition: transform var(--page-reveal-ms, 650ms) cubic-bezier(.22, 1, .36, 1);
}

.photo-intro-caption {
  position: absolute;
  inset: auto max(24px, 2.2222vw) max(24px, 2.2222vw);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: "Bianca Intro Oswald", Impact, sans-serif;
  font-size: clamp(22px, 1.9444vw, 36px);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transition: opacity 150ms ease;
}

.photo-intro-counter {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-size: clamp(80px, 8.3333vw, 160px);
  line-height: .8;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.photo-intro-percent, .photo-intro-surname { color: var(--cor-titulo-trajetoria); }
.photo-intro-percent { font-size: .45em; margin-left: .09em; }
.photo-intro-curtain.is-cleared .photo-intro-caption { opacity: 0; }

.photo-intro-phrases {
  position: absolute;
  inset: 80px max(24px, 5vw) max(160px, 16vh);
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.photo-intro-phrase {
  max-width: 18ch;
  margin: 0;
  color: var(--cor-titulo-trajetoria);
  font-family: "Bianca Intro Oswald", Impact, sans-serif;
  font-size: clamp(36px, 6.5vw, 108px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  animation: photo-intro-phrase var(--phrase-duration, 650ms) ease both;
}
.photo-intro-phrase.photo-intro-phrase--closing {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(18px, 5.5vw, 108px);
}
.photo-intro-part--light { color: #fff; }
.photo-intro-skip {
  position: absolute;
  top: max(24px, 2.2222vw);
  right: max(24px, 2.2222vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: clamp(224px, 22vw, 320px);
  max-width: calc(100% - 48px);
  min-height: 60px;
  padding: 16px 24px;
  border: 1px solid var(--cor-titulo-trajetoria);
  border-radius: 0;
  background: transparent;
  color: var(--cor-titulo-trajetoria);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.photo-intro-skip-arrow {
  position: relative;
  flex: 0 0 22px;
  height: 16px;
  transition: transform 160ms ease;
}
.photo-intro-skip-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  border-top: 1px solid currentColor;
}
.photo-intro-skip-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.photo-intro-skip:hover { background: #e3533614; }
.photo-intro-skip:hover .photo-intro-skip-arrow { transform: translateX(3px); }
.photo-intro-skip:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 4px; }
.photo-intro-curtain.is-cleared .photo-intro-phrases,
.photo-intro-curtain.is-cleared .photo-intro-skip { visibility: hidden; }
@keyframes photo-intro-phrase {
  0% { opacity: 0; transform: translateY(10px); }
  18%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 650px) {
  .photo-intro-skip { width: 224px; min-height: 52px; padding: 14px 18px; font-size: 12px; }
  .photo-intro-phrases { inset: 76px 24px 148px; }
  .photo-intro-phrase { font-size: clamp(32px, 8.5vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-intro-phrase { animation: none; }
  .photo-intro-skip, .photo-intro-skip-arrow { transition: none; }
}

html[data-photo-intro="pending"] .hero-profile picture {
  opacity: 0;
  transform: translateY(3%) scale(1.045);
  filter: blur(12px);
  transform-origin: 50% 100%;
}

html[data-photo-intro="revealing"] .hero-profile picture {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transform-origin: 50% 100%;
  transition: opacity 550ms cubic-bezier(.16, 1, .3, 1),
    filter 550ms cubic-bezier(.16, 1, .3, 1),
    transform var(--page-reveal-ms, 650ms) cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity, filter;
}

html[data-photo-intro="revealing"] .photo-intro-curtain {
  transform: translateY(-100%);
  will-change: transform;
}
html[data-photo-intro="complete"] .hero-profile picture {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (max-width: 650px) {
  .photo-intro-caption { flex-wrap: wrap; gap: 24px; }
  .photo-intro-counter { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-intro-curtain,
  html[data-photo-intro="pending"]:not([data-page-curtain-ready])::before { display: none; }
  html.page-intro-locked { overflow: auto; }
  html[data-photo-intro] .hero-profile picture {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media print {
  .photo-intro-curtain,
  html[data-photo-intro="pending"]:not([data-page-curtain-ready])::before { display: none; }
}