/* Bruna Pazinato · abertura e passagem */

/* abertura do ato */

.abertura{

  position: relative;
  isolation: isolate;
  min-height: var(--abertura-altura, clamp(520px, 90svh, 1060px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 3vh) var(--gutter) clamp(1.6rem, 4vh, 3.4rem);
  overflow: hidden;
  background: var(--ink);
}

.abertura__titulo{
  position: relative;
  z-index: 2;
  margin-top: 0;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(2.9rem, 12vw, 11rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--paper);
}

.abertura__nota{
  position: relative;
  z-index: 2;
  margin-top: clamp(1.2rem, 3vh, 2.4rem);
  font-size: clamp(.63rem, .8vw, .78rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.abertura__frase{
  position: relative;
  z-index: 2;
  margin-top: clamp(1.3rem, 3.2vh, 2.6rem);

  white-space: nowrap;
  font-family: var(--font-name);
  font-size: clamp(.98rem, 1.45vw, 1.4rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--paper-70);
}

/* entrada da abertura */

.js .abertura__titulo,
.js .abertura__frase,
.js .abertura__nota{ opacity: 0; }

.js.is-ready .abertura__titulo    { animation: riseIn  1.5s var(--ease)      .55s both; }
.js.is-ready .abertura__nota      { animation: fadeUp  1.3s var(--ease)      1.15s both; }
.js.is-ready .abertura__frase     { animation: fadeUp  1.4s var(--ease)      1.25s both; }

/* a fotografia do ato */

.abertura__figura{
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;

  left: var(--foto-borda, 44%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) calc(var(--foto-fade, 24%) * .4), #000 var(--foto-fade, 24%));
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) calc(var(--foto-fade, 24%) * .4), #000 var(--foto-fade, 24%));
}

.abertura__foto{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foto-pos, 50% 30%);
  filter: contrast(1.04) saturate(.92) brightness(var(--foto-brilho, .9));
  transform: scale(1.03);
}

.abertura__veu{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,   var(--ink) 0%, rgba(11,11,12,0) 40%),
    linear-gradient(to right, rgba(11,11,12,.55), rgba(11,11,12,0) 20%);
}

.js .abertura__figura{ opacity: 0; }
.js.is-ready .abertura__figura{ animation: fadeIn 1.8s var(--ease-soft) .35s both; }

@media (max-width: 700px){

  .abertura__frase{ white-space: normal; max-width: 24ch; }

  .abertura__figura{
    left: 0;
    aspect-ratio: auto;
  }

  .abertura__veu{
    background:
      linear-gradient(to top,   var(--ink) 2%, rgba(11,11,12,.12) 48%),
      linear-gradient(to right, rgba(11,11,12,.7), rgba(11,11,12,.22) 52%);
  }
}

/* passagem para o próximo ato */

.passagem{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: clamp(2.2rem, 6vh, 4.4rem) var(--gutter) clamp(2.2rem, 6vh, 4rem);
  border-top: 1px solid var(--paper-12);
  background: var(--ink);
}

.passagem__link{
  display: block;
}

.passagem__link--proximo{
  justify-self: end;
  text-align: right;
}

.passagem__rotulo{
  display: block;
  margin-bottom: .9em;
  font-family: var(--font-sans);
  font-size: clamp(.58rem, .68vw, .7rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--paper-45);
  transition: color .5s var(--ease);
}

.passagem__link--proximo .passagem__rotulo{ color: var(--coral); }

.passagem__nome{
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(1.1rem, 1.7vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper-70);
  transition: color .5s var(--ease), transform .7s var(--ease);
}

.passagem__link--proximo .passagem__nome{
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  color: var(--paper);
}

.passagem__link:hover .passagem__nome,
.passagem__link:focus-visible .passagem__nome{ color: var(--paper); }

.passagem__link--proximo:hover .passagem__nome,
.passagem__link--proximo:focus-visible .passagem__nome{ transform: translateX(-.22em); }

@media (max-width: 700px){
  .passagem{
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vh, 3rem);
  }
  .passagem__link--proximo{
    justify-self: start;
    text-align: left;
  }
}

/* movimento reduzido */

@media (prefers-reduced-motion: reduce){
  .js .abertura__titulo,
  .js .abertura__nota{ opacity: 1; }
}