/* Sistema de movimento Milão: entradas, hovers e transições. Tudo sob prefers-reduced-motion: no-preference. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;z-index:60;pointer-events:none}

@media(prefers-reduced-motion:no-preference){
  /* Aparecer ao rolar: o estado inicial é aplicado só quando o JS ativa a classe .motion. */
  html.motion [data-reveal]:not(.in){opacity:0}

  /* Entrada do hero ao carregar. */
  html.motion .topline,html.motion .site-header{animation:fade-in .8s var(--ease-out) both}
  html.motion .hero-copy h1{animation:rise 1.1s var(--ease-out) .08s both}
  html.motion .hero-copy>p{animation:rise 1s var(--ease-out) .24s both}
  html.motion .hero-copy .actions{animation:rise 1s var(--ease-out) .38s both}
  html.motion .hero-media{animation:arch-in 1.3s var(--ease-out) .12s both}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  @keyframes arch-in{from{opacity:0;clip-path:inset(16% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
  @keyframes inset-in{from{opacity:0;scale:.92}to{opacity:1;scale:1}}

  /* Botões: preenchimento que varre da esquerda, leve elevação e retorno ao pressionar. */
  body :is(.button,.text-link,.footer-link,.rail-controls button:not(:disabled),.concern-list>button>i){position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  body :is(.button,.text-link,.footer-link,.rail-controls button:not(:disabled),.concern-list>button>i)::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--sweep,var(--olive));transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
  body :is(.button,.text-link,.footer-link,.rail-controls button:not(:disabled)):is(:hover,:focus-visible)::before,body .concern-list>button:is(:hover,:focus-visible)>i::before{transform:scaleX(1);transform-origin:left}
  body .button{--sweep:var(--deep)}
  body .button:hover{background:var(--olive);transform:translateY(-2px);box-shadow:0 8px 20px #2733221f}
  body .button.light{--sweep:#e3d7be}
  body .button.light:hover{background:var(--ivory)}
  body .text-link:hover,body .rail-controls button:not(:disabled):hover{background:transparent}
  body :is(.dark .text-link,.protocol-grid article:first-child .text-link,.footer-link){--sweep:var(--ivory)}
  body :is(.dark .text-link,.protocol-grid article:first-child .text-link):hover{background:transparent}
  body .footer-link:hover{background:transparent}
  body .concern-list>button:hover>i,body .concern-list>button:focus-visible>i{background:transparent;color:#fff;border-color:var(--olive)}
  body :is(.button,.text-link,.footer-link):active{transform:translateY(0) scale(.985);box-shadow:none}

  /* Cartões: elevação, imagem que respira e frame que acompanha. */
  .treatment-card,.protocol-grid>article,.team-grid>article,.experience-card,.quote-stack>article,.commitments>div{transition:transform .6s var(--ease-out),translate .6s var(--ease-out),border-color .4s,box-shadow .5s var(--ease-out)}
  .protocol-grid>article:hover,.team-grid>article:hover,.experience-card:hover,.quote-stack>article:hover{translate:0 -6px}
  .commitments>div:hover{translate:0 -4px}
  .media-label,.media>img{transition:transform 1.1s var(--ease-out)}
  :is(.treatment-card,.body-feature,.team-grid>article,.protocol-grid>article,.space-gallery .media,.experience-photo):hover .media-label{transform:scale(1.04)}
  :is(.treatment-card,.body-feature,.team-grid>article,.protocol-grid>article,.space-gallery .media,.experience-photo):hover .media>img,:is(.space-gallery .media,.experience-photo):hover>img{transform:scale(1.06)}
  .concern-list>button{transition-timing-function:var(--ease-out);transition-duration:.55s}
  .concern-photo{transition:transform .8s var(--ease-out)}
  .concern-list>button:hover .concern-photo{transform:scale(.985)}
  .main-nav a:after{transition:transform .5s var(--ease-out)}
  .header-cta{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .wordmark{transition:opacity .3s}.wordmark:hover{opacity:.78}
  .plus:before,.plus:after{transition:transform .45s var(--ease-out)}
  .faq-list details[open]>p{animation:none}
  .faq-list summary{transition:color .3s,padding-left .45s var(--ease-out)}
  .faq-list summary:hover{padding-left:8px;color:var(--deep)}

  /* Diálogo e menu móvel. */
  dialog[open]{animation:dialog-in .6s var(--ease-out)}
  dialog[open]::backdrop{animation:fade-in .45s ease-out}
  @keyframes dialog-in{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
  .main-nav.open{animation:fade-in .35s var(--ease-out)}
  .main-nav.open a{animation:rise-sm .55s var(--ease-out) both}
  .main-nav.open a:nth-child(2){animation-delay:.05s}.main-nav.open a:nth-child(3){animation-delay:.1s}.main-nav.open a:nth-child(4){animation-delay:.15s}.main-nav.open a:nth-child(5){animation-delay:.2s}
  @keyframes rise-sm{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.scroll-progress{transition:none}}