/* Acabamento de movimento. Carregado após os estilos da composição. */
:root {
  --motion-ease: cubic-bezier(.16, .75, .25, 1);
  --hero-y: 0px;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.header.is-scrolled, .header:has(.menu-toggle[aria-expanded="true"]) {
  background: rgb(34 40 45 / 94%);
  backdrop-filter: blur(14px);
  border-bottom-color: #ffffff20;
}
#inicio {padding-top: 76px}
#inicio .portrait-stage {clip-path: none}
#inicio .hero-copy {animation: none}
#inicio .hero-visual {transform: translate3d(0, var(--hero-y), 0)}
#inicio .bench-image {animation: none; transform: scale(1.025)}
.motion-enabled .header {animation: nav-arrival .8s .05s both}
.motion-enabled #inicio .portrait-stage {animation: cover-arrival 1.2s both}
.motion-enabled #inicio .bench-image {
  animation: image-settle 1.8s var(--motion-ease) both,
    image-breathe 15s 1.8s ease-in-out infinite alternate;
}
.motion-enabled #inicio .eyebrow {animation: detail-arrival .7s .12s both}
.motion-enabled #inicio h1 .line {overflow: hidden; display: block}
.motion-enabled #inicio h1 .line b {
  display: block;
  animation: title-arrival 1.05s .26s var(--motion-ease) both;
}
.motion-enabled #inicio h1 .line:nth-child(2) b {animation-delay: .4s}
.motion-enabled #inicio h1 .line:nth-child(3) b {animation-delay: .54s}
.motion-enabled #inicio .hero-intro {animation: detail-arrival .75s .72s both}
.motion-enabled #inicio .hero-actions {animation: detail-arrival .75s .88s both}

@keyframes nav-arrival {from {opacity: 0} to {opacity: 1}}
@keyframes cover-arrival {from {opacity: .15} to {opacity: 1}}
@keyframes image-settle {from {transform: scale(1.12)} to {transform: scale(1.025)}}
@keyframes image-breathe {from {transform: scale(1.025)} to {transform: scale(1.065)}}
@keyframes title-arrival {
  from {transform: translate3d(0, 115%, 0)}
  to {transform: translate3d(0, 0, 0)}
}
@keyframes detail-arrival {
  from {opacity: 0; transform: translateY(13px)}
  to {opacity: 1; transform: translateY(0)}
}

.title-mask {overflow: hidden; padding-bottom: .1em}
.title-content {display: block}
.motion-enabled .reveal-ready {
  opacity: 0;
  transform: translateY(19px);
  transition: opacity .7s var(--motion-ease), transform .8s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .reveal-ready.visible {opacity: 1; transform: none}
.motion-enabled .title-mask.reveal-ready {opacity: 1; transform: none}
.motion-enabled .title-mask .title-content {
  transform: translateY(115%);
  transition: transform .95s var(--motion-ease);
}
.motion-enabled .title-mask.visible .title-content {transform: none}
.motion-enabled .reveal-photo.reveal-ready {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 96%);
  transition: clip-path 1.1s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .reveal-photo.visible {clip-path: inset(0)}
.motion-enabled .reveal-team.reveal-ready {transform: translateY(22px)}
.motion-enabled .reveal-team.visible {transform: none}
.team-card {overflow: hidden}
.team-card img {
  transition: transform .8s var(--motion-ease), filter .7s;
  transform-origin: 50% 36%;
}
.team-info h3 {transition: color .3s}
.house-facts dd {min-width: 2ch}

/* Transições de ação e feedback de teclado têm o mesmo peso do hover. */
.button, .text-link, .team-book, .booking-unit {
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.button span, .text-link span {display: inline-block; transition: transform .3s}
.button:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.desktop-nav a, footer > a:not(.footer-name) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 0 1px;
  transition: background-size .3s;
}
.desktop-nav a::after {display: none}
.service-price {transition: transform .3s, color .3s}
.service-tabs button {transition: color .25s}
#servicos .service-row {transition: background .25s}
.track-hint {font-variant-numeric: tabular-nums}
@media (hover: hover) and (pointer: fine) {
  .button:hover span, .text-link:hover span {transform: translate(3px, -2px)}
  .desktop-nav a:hover, footer > a:not(.footer-name):hover {background-size: 100% 1px}
  .team-card:hover img {transform: scale(1.025); filter: saturate(1)}
  .team-card:hover .team-info h3 {color: #fff}
  #servicos .service-row:hover .service-price {transform: translateX(-3px)}
  .gallery figure img {transition: transform 1s var(--motion-ease)}
  .gallery figure:hover img {transform: scale(1.035)}
}
.team-track.dragging .team-card {transition: none}
.team-track.dragging img {transform: none}
.motion-paused .cut-belt {animation-play-state: paused}

@media (max-width: 760px) {
  #inicio {padding-top: 66px}
  #inicio .hero-visual {margin-top: 0}
  #inicio .eyebrow {margin-top: 12px}
  .motion-enabled #inicio h1 .line:first-child,
  .motion-enabled #inicio h1 .line:nth-child(2) {display: inline-block}
  #inicio .hero-actions {flex-wrap: wrap}
}

/* A preferência do sistema e o botão de pausa interrompem os movimentos. */
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto !important}
  html:not(.motion-user-enabled) *, html:not(.motion-user-enabled) *::before, html:not(.motion-user-enabled) *::after {animation: none !important; transition: none !important}
  html:not(.motion-user-enabled) #inicio .hero-visual {transform: none}
  html:not(.motion-user-enabled) .reveal-ready, html:not(.motion-user-enabled) .title-content {opacity: 1 !important; transform: none !important; clip-path: none !important}
}
.motion-paused .reveal-ready, .motion-paused .title-content {
  opacity: 1; transform: none; clip-path: none;
}


/* A fotografia continua por trás da navegação transparente. */
@media(min-width:761px) {
  #inicio {padding-top:0}
  #inicio .hero-copy {padding-top:126px}
  #inicio .portrait-stage {height:clamp(661px,calc(78svh + 76px),936px)}
}
@media(max-width:760px) {
  #inicio {padding-top:0}
  #inicio .portrait-stage {height:clamp(411px,calc(105vw + 66px),621px)}
  #inicio .eyebrow {margin-top:78px}
  .header:not(.is-scrolled) {background:linear-gradient(#22282cf5,#22282c00)}
}