/* Retrato e tipografia em planos CSS 3D. Somente o hero é alterado. */
.hero.has-portrait .hero-large-type {
  top: 22%; left: 4%; width: 92%;
  font-size: clamp(140px, 19.2vw, 320px);
  font-weight: 500; line-height: .86; letter-spacing: -.075em;
  color: rgba(94, 62, 90, .33);
  align-items: flex-start;
  transform: translate3d(calc(var(--depth-x) * -5px), calc(var(--depth-scroll) * -.25), -35px) rotateY(calc(var(--depth-x) * -.45deg));
}
.hero.has-portrait .hero-large-type .word-first { transform: none; }
.hero.has-portrait .hero-large-type .word-last { transform: translateX(48%); }
.hero.has-portrait .hero-visual {
  top: 16%; right: 6%; width: 43%; height: 84%;
  transform: translate3d(calc(var(--depth-x) * 10px), calc(var(--depth-scroll) + var(--depth-y) * 5px), 35px) rotateX(calc(var(--depth-y) * -1deg)) rotateY(calc(var(--depth-x) * 1.8deg));
  transform-style: preserve-3d;
}
.hero.has-portrait .portrait-photo {
  inset: 0; display: block; background: none;
  filter: drop-shadow(9px 12px 18px rgba(49,30,50,.09));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 77%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 77%, transparent 100%);
}
.portrait-image { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.hero.has-portrait .hero-visual-glow { inset: 16% -4% 4%; opacity: .65; }
.hero.has-portrait .halo { opacity: .35; }
.hero.has-portrait .hero-photo-label { display: none; }
.hero.has-portrait .hero-content { width: min(540px, 43%); margin-top: clamp(285px, 36vh, 350px); padding-bottom: 85px; }
/* Reveal transform must not replace the perspective transform of the name. */
.js .hero.has-portrait .hero-large-type { animation: heroNameReveal 1.2s var(--ease) both; }
.portrait-image { animation: heroPortraitReveal 1.4s var(--ease) both; }
@keyframes heroNameReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroPortraitReveal { from { opacity: 0; transform: translateY(16px) scale(1.015); } to { opacity: 1; transform: none; } }
@media (min-width: 1700px) {
  .hero.has-portrait .hero-visual { right: 9%; width: 39%; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .hero.has-portrait .hero-content { width: 48%; margin-top: 285px; }
  .hero.has-portrait .hero-content h1 { font-size: 61px; }
  .hero.has-portrait .hero-visual { right: 2%; width: 47%; top: 20%; height: 80%; }
}
@media (max-width: 850px) {
  .hero.has-portrait { min-height: 900px; }
  .hero.has-portrait .hero-large-type { top: 21%; left: 4%; width: 92%; font-size: 23vw; line-height: .92; }
  .hero.has-portrait .hero-large-type .word-last { transform: translateX(34%); }
  .hero.has-portrait .hero-visual { right: 10%; top: 17%; width: 58%; height: 530px; }
  .hero.has-portrait .hero-content { width: 100%; max-width: 650px; margin-top: 490px; padding-bottom: 62px; }
  .hero.has-portrait .hero-photo-label { display: none; }
}
@media (max-width: 600px) {
  .hero.has-portrait { min-height: max(860px, 100svh); }
  .hero.has-portrait .hero-large-type { top: 23%; left: 3%; width: 94%; font-size: clamp(77px, 22.4vw, 133px); letter-spacing: -.065em; line-height: 1.18; color: rgba(94,62,90,.42); }
  .hero.has-portrait .hero-large-type .word-last { transform: translateX(0); font-size: 1.3em; line-height: .85; }
  .hero.has-portrait .hero-visual { top: 16.4%; right: 1%; width: 70%; height: 420px; }
  .hero.has-portrait .portrait-image { object-fit: cover; }
  .hero.has-portrait .portrait-photo { -webkit-mask-image: linear-gradient(#000 0%, #000 73%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 73%, transparent 100%); }
  .hero.has-portrait .hero-content { margin-top: 448px; padding-bottom: 68px; }
  .hero.has-portrait .hero-content h1 { font-size: clamp(47px, 12.6vw, 69px); }
  .hero.has-portrait .hero-bottom-note { bottom: 24px; }
}
@media (max-width: 374px) {
  .hero.has-portrait .hero-visual { height: 390px; }
  .hero.has-portrait .hero-content { margin-top: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.has-portrait .hero-visual, .hero.has-portrait .hero-large-type { transform: none; }
  .hero.has-portrait .hero-large-type, .portrait-image { animation: none; opacity: 1; }
}