/* Composição com espaços reservados: os retratos nunca atravessam uns aos outros. */
.hero{height:980px}
.hero-stage{height:690px;isolation:isolate}
.hero-copy{width:43%;top:100px;transform:translateY(calc(var(--progress) * -25px));opacity:calc(1 - var(--progress) * .65)}
.hero-copy h1{font-size:clamp(64px,6.4vw,102px);letter-spacing:-4px}
.hero-copy h1 em{letter-spacing:-3px}
.hero-photos{inset:65px 5.5% auto auto;width:43%;height:470px;display:grid;grid-template-columns:57% 35%;grid-template-rows:53% 40%;column-gap:8%;row-gap:7%;perspective:none}
.hero-photos .hero-photo{position:relative;inset:auto;width:100%;height:100%;min-width:0;z-index:auto;transform-origin:center;box-shadow:0 20px 45px #0002;will-change:transform}
.hero-photos .photo-front{grid-column:1;grid-row:1/3;transform:translateY(calc(var(--progress) * -12px)) rotate(calc(-3deg + var(--progress) * 3deg));z-index:2}
.hero-photos .photo-back{grid-column:2;grid-row:1;transform:translateY(calc(10px - var(--progress) * 10px)) rotate(calc(4deg - var(--progress) * 4deg))}
.hero-photos .photo-small{grid-column:2;grid-row:2;transform:translateY(calc(5px - var(--progress) * 5px)) rotate(calc(3deg - var(--progress) * 3deg))}
.hero-photo img{object-fit:cover}
.hero-photos .photo-front img{object-position:50% 40%}
.hero-photos .photo-small img{object-position:50% 45%}
.hero-photo figcaption{left:10px;bottom:11px;font-size:7px;letter-spacing:.8px}
.photo-note{left:0;right:auto;top:calc(100% + 30px);font-size:22px;transform:rotate(-3deg)}
.hero-bottom{bottom:30px}
@media(min-width:1500px){.hero{height:1080px}.hero-stage{height:780px}.hero-photos{top:75px;height:540px}.hero-copy{top:125px}}
@media(min-width:701px) and (max-width:1000px){.hero-photos{top:90px;height:410px;width:45%;right:4%}.hero-copy{left:5%;width:43%;top:100px}.hero-copy h1{font-size:7vw;letter-spacing:-3px}.hero-intro{font-size:8px;letter-spacing:1px}.hero-description{max-width:240px}.hero-stage{height:660px}.hero-photo figcaption{font-size:6px;left:8px;bottom:9px}}
@media(max-width:700px){.hero{height:1050px}.hero-stage{height:800px}.hero-copy{left:24px;right:24px;top:30px;width:auto;transform:translateY(calc(var(--progress) * -20px));opacity:calc(1 - var(--progress) * .7)}.hero-copy h1{font-size:clamp(55px,11.5vw,78px);letter-spacing:-3px}.hero-copy h1 em{letter-spacing:-2.5px}.hero-intro{margin-bottom:20px}.hero-description{margin:20px 0 16px;max-width:280px}.hero-photos{inset:350px 7% auto;width:86%;height:330px;grid-template-columns:57% 35%;grid-template-rows:53% 40%;column-gap:8%;row-gap:7%}.hero-photo figcaption{font-size:6px;left:8px;bottom:9px;letter-spacing:.4px}.hero-photos .photo-small figcaption{font-size:5px}.photo-note{top:calc(100% + 18px);font-size:18px}.hero-bottom{bottom:22px}}
@media(max-width:390px){.hero-copy h1{font-size:51px}.hero-photos{top:340px;height:300px}.hero-stage{height:760px}.hero{height:1010px}.hero-copy{left:20px;right:20px}.hero-description{max-width:260px}}
@media(prefers-reduced-motion:reduce){.hero{height:790px}.hero-stage{position:relative;top:0}.hero-photos .hero-photo{transform:none;will-change:auto}.hero-copy{transform:none;opacity:1}@media(max-width:700px){.hero{height:800px}}}

/* No celular, a abertura acompanha a página sem trecho preso na rolagem. */
@media(max-width:700px){
 .hero{height:auto}
 .hero-stage{position:relative;top:auto}
 .hero-copy{transform:none;opacity:1}
 .hero-photos .hero-photo{will-change:auto}
}

/* Entrada por lados opostos, seguida de uma flutuação curta e independente da rolagem. */
@media(prefers-reduced-motion:no-preference){
 .hero-photos .hero-photo{
  animation:hero-photo-enter 1.2s cubic-bezier(.16,1,.3,1) var(--arrival-delay) both,
            hero-photo-float var(--float-time) ease-in-out calc(var(--arrival-delay) + 1.2s) infinite;
 }
 .hero-photos .photo-front{--enter-x:-110px;--arrival-delay:.1s;--float-time:7.5s;--float-x:1px;--float-y:-6px}
 .hero-photos .photo-back{--enter-x:100px;--arrival-delay:.26s;--float-time:8.5s;--float-x:2px;--float-y:-5px}
 .hero-photos .photo-small{--enter-x:100px;--arrival-delay:.42s;--float-time:6.8s;--float-x:-1px;--float-y:5px}
}
@keyframes hero-photo-enter{
 from{opacity:0;translate:var(--enter-x) 14px}
 to{opacity:1;translate:0 0}
}
@keyframes hero-photo-float{
 0%,100%{translate:0 0}
 50%{translate:var(--float-x) var(--float-y)}
}