/* Acabamento visual e movimento. Assinatura: as fotos em arco se abrem de baixo para cima. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
::selection{background:#c1a581;color:#24211f}
.hero a:focus-visible,.hero button:focus-visible,.site-header a:focus-visible,.site-header button:focus-visible,.treatments button:focus-visible,.testimonials a:focus-visible,.testimonials button:focus-visible,.invitation a:focus-visible,.site-footer a:focus-visible{outline-color:#e1bf93}
.hero-line{display:block;overflow:hidden;padding:0 .08em .14em 0;margin-bottom:-.14em}
.hero-line>span{display:block}

/* Textura fina nas áreas escuras, para o carvão não parecer um fundo chapado. */
.testimonials,.site-footer{position:relative}
.hero:before,.treatments:before,.testimonials:before,.invitation:before,.site-footer:before{content:'';position:absolute;inset:0;background:url('assets/grain.webp') 0 0/160px;opacity:.38;pointer-events:none}

/* Arco de linha fina que repete a órbita do retrato principal. */
.care-visual:before{content:'';position:absolute;inset:-12px 6px 14px -12px;border:1px solid #c1a58166;border-radius:208px 208px 4px 4px;transform:rotate(1.4deg);pointer-events:none}

.treatment-card:before{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--x,50%) var(--y,50%),#c1a58124,transparent 72%);opacity:0;transition:opacity .35s;pointer-events:none}
.treatment-card:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.review-card{transition:border-color .3s,background .3s,transform .4s var(--ease-out)}
.site-header{transition:box-shadow .3s}.site-header.scrolled{box-shadow:0 10px 30px #0000002e}
.button-primary,.header-contact{position:relative;overflow:hidden}
.button svg{transition:transform .3s var(--ease-out)}
.text-link svg{transition:transform .3s var(--ease-out)}

@media(hover:hover){
 .treatment-card:hover:before{opacity:1}.treatment-card:hover:after{transform:scaleX(1)}
 .treatment-card-bottom svg{transition:transform .3s var(--ease-out)}.treatment-card:hover .treatment-card-bottom svg{transform:translate(3px,-3px)}
 .review-card:hover{border-color:#a98a68;background:#3d342d;transform:translateY(-4px)}
 .button:hover svg:last-child,.text-link:hover svg{transform:translate(3px,-3px)}
 .button-primary:after,.header-contact:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#fff5e640,transparent);transform:skewX(-18deg);pointer-events:none}
 .button-primary:hover:after,.header-contact:hover:after{left:125%;transition:left .85s var(--ease-out)}
}

@keyframes arch-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes line-rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes settle{from{transform:translateX(-50%) scale(1.09)}to{transform:translateX(-50%) scale(1)}}
@keyframes soft-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes rule-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes orbit-in{from{opacity:0;transform:rotate(-1deg)}to{opacity:1;transform:rotate(3deg)}}
@keyframes seal-in{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes tag-in{from{opacity:0;translate:-22px 0}to{opacity:1;translate:0 0}}
@keyframes draw{from{stroke-dashoffset:170}to{stroke-dashoffset:0}}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes drift{from{translate:0 26px}to{translate:0 -26px}}

@media(prefers-reduced-motion:no-preference){
 /* Abertura: texto primeiro, depois o arco, por fim os detalhes. */
 .hero-copy,.hero-visual{animation:none}
 .hero-copy .eyebrow{animation:soft-rise .7s var(--ease-out) .1s backwards}
 .hero .small-line{transform-origin:left;animation:rule-grow .9s var(--ease-out) .2s backwards}
 .hero-line>span{animation:line-rise 1.05s var(--ease-out) .2s backwards}
 .hero-line:nth-child(2)>span{animation-delay:.32s}.hero-line:nth-child(3)>span{animation-delay:.44s}
 .hero-description{animation:soft-rise .8s var(--ease-out) .7s backwards}
 .hero-copy .button{animation:soft-rise .8s var(--ease-out) .82s backwards}
 .hero-secondary,.hero-note,.hero-review{animation:soft-rise .8s var(--ease-out) .95s backwards}
 .hero-photo{animation:arch-open 1.5s var(--ease-out) .25s backwards}
 .hero-photo-editorial>img{animation:settle 2.1s var(--ease-out) .25s backwards}
 .hero-orbit{animation:orbit-in 1.4s var(--ease-out) .85s backwards}
 .round-seal{animation:seal-in .8s var(--ease-out) 1.15s backwards,float 6s ease-in-out 2s infinite}
 .experience-tag{animation:tag-in .9s var(--ease-out) 1.05s backwards}
 .photo-signature{animation:soft-rise .9s var(--ease-out) 1.2s backwards}
 .scroll-cue span:last-child{animation:cue 2.6s ease-in-out 2s infinite}

 /* Rolagem: cada foto se abre quando o bloco entra na tela. */
 .reveal.visible .about-photo,.reveal.visible .care-visual>img,.reveal.visible .journey-photo,.reveal.visible .studio-room,.reveal.visible .studio-detail{animation:arch-open 1.3s var(--ease-out) backwards}
 .reveal.visible .journey-card--offset .journey-photo{animation-delay:.22s}.reveal.visible .studio-detail{animation-delay:.3s}
 .care-visual:before{opacity:0;transition:opacity 1s .6s}.reveal.visible.care-visual:before{opacity:1}
 .js-ready .care-steps li,.js-ready .journey-timeline li{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s var(--ease-out)}
 .js-ready .reveal.visible .care-steps li,.js-ready .reveal.visible .journey-timeline li{opacity:1;transform:none}
 .js-ready .care-steps li:nth-child(2),.js-ready .journey-timeline li:nth-child(2){transition-delay:.14s}
 .js-ready .care-steps li:nth-child(3),.js-ready .journey-timeline li:nth-child(3){transition-delay:.28s}
 .treatment-card:nth-child(2){animation-delay:.05s}.treatment-card:nth-child(3){animation-delay:.1s}.treatment-card:nth-child(4){animation-delay:.15s}.treatment-card:nth-child(5){animation-delay:.2s}.treatment-card:nth-child(n+6){animation-delay:.25s}
 .invitation-flower,.faq-flower{stroke-dasharray:170;stroke-dashoffset:170}
 .reveal.visible .invitation-flower,.reveal.visible .faq-flower{animation:draw 2.2s ease-out .25s forwards}
 dialog[open]::backdrop{animation:fade-in .3s}
}
@media(prefers-reduced-motion:no-preference) and (min-width:851px){
 @supports(animation-timeline:view()){
  .about-caption,.care-photo-caption,.journey-card--offset{animation:drift linear both;animation-timeline:view()}
 }
}
@media(prefers-reduced-motion:no-preference){
 @supports(interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
 }
}

@media(max-width:850px){.round-seal{width:98px;height:98px}}
@media(max-width:600px){.care-photo-caption{padding:12px 15px;gap:10px}.care-photo-caption p{font-size:18px}}

/* Enquadramento das fotos trocadas pelo painel */
.journey-photo--normal img,.journey-photo--normal:hover img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.journey-photo--normal:hover img{transform:scale(1.035)}
img.foco-topo{object-position:50% 8%!important}img.foco-centro{object-position:50% 50%!important}img.foco-base{object-position:50% 92%!important}

/* Página 404 */
.not-found{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:24px;background:var(--charcoal);color:var(--warm-white);position:relative}
.not-found .brand{width:240px;height:auto;margin:0 auto 22px;background:transparent}.not-found .brand img{position:static;width:100%;filter:url(#logo-cutout);mix-blend-mode:normal}.not-found h1{font-size:clamp(40px,8vw,62px);color:var(--warm-white);margin-bottom:16px}.not-found h1 em{color:#d6ad9e}.not-found p{color:#d1c3b8;font-size:15px;margin-bottom:28px}
.not-found .button-primary{background:var(--champagne);border-color:var(--champagne);color:#201a16}