/* Vado Barber Club — camada de animações. Carrega depois de style.css */
::selection{background:var(--yellow);color:#111}

/* barra de progresso + cursor-anel */
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
.ring{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--yellow);border-radius:50%;pointer-events:none;z-index:110;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.ring.on{opacity:.85}
.ring.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:#f8df2226}

/* header que gruda e encolhe */
header{position:sticky;top:0;z-index:50;background:#111210b8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:height .35s,background .35s}
body.scrolled header{height:68px;background:#111210ee}
nav a{position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* botões: brilho que atravessa + ímã */
.button{position:relative;overflow:hidden;transition:transform .2s,background .2s,translate .25s ease-out}
.button::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff70 50%,transparent 70%);translate:-130% 0;transition:translate .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.button:hover::after{translate:130% 0}
.button span{transition:transform .3s}
.button:hover span{transform:translate(4px,-4px)}

/* títulos: linhas mascaradas que sobem */
.ln,.ln>i{display:block;font-style:normal}
.ln{overflow:hidden;padding:.1em 0 .06em;margin:-.1em 0 -.06em}
.rvh .ln>i{translate:0 118%;transition:translate 1.05s cubic-bezier(.2,.9,.2,1) calc(var(--l)*.12s)}
.rvh.in .ln>i{translate:0 0}
h1.rvh .ln>i{transition-delay:calc(var(--l)*.12s + .25s)}
h2 .ln>span{color:#8d9187}
.gallery-section h2 .ln>span{color:#74786b}
#equipe h2 .ln>span{color:var(--yellow)}

/* entrada do hero (uma coreografia só) */
@keyframes up{from{opacity:0;translate:0 46px}}
.hero .eyebrow{animation:up .9s cubic-bezier(.2,.8,.2,1) .1s both}
.hero .intro{animation:up .9s cubic-bezier(.2,.8,.2,1) .85s both}
.hero .actions{animation:up .9s cubic-bezier(.2,.8,.2,1) 1s both}
.hero .hero-bottom{animation:up .9s cubic-bezier(.2,.8,.2,1) 1.15s both}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--hx,70%) var(--hy,40%),#f8df2216,transparent 60%);pointer-events:none}
.eyebrow i{animation:pulse 2s infinite}
@keyframes pulse{from{box-shadow:0 0 0 0 #f8df2299}to{box-shadow:0 0 0 11px #f8df2200}}

/* moeda 3D reage ao mouse e gira no clique */
@keyframes coinIn{from{scale:.15;opacity:0;rotate:0 1 0 -200deg}}
@keyframes spin{from{rotate:0 1 0 0deg}to{rotate:0 1 0 720deg}}
.coin{cursor:pointer;translate:calc(var(--px,0)*18px) calc(var(--py,0)*14px);transition:translate .45s ease-out;animation:float 7s ease-in-out infinite,coinIn 1.5s cubic-bezier(.2,.9,.2,1) .2s both}
.coin.spin{animation:float 7s ease-in-out infinite,spin 1.2s cubic-bezier(.3,.8,.3,1)}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at var(--sx,30%) var(--sy,20%),#ffffff66,transparent 48%);mix-blend-mode:overlay;pointer-events:none}
@keyframes orb1{to{transform:rotateX(65deg) rotateZ(330deg)}}
@keyframes orb2{to{transform:rotateY(65deg) rotateZ(390deg)}}
.orbit{animation:orb1 40s linear infinite;transition:translate .6s ease-out}
.orbit-two{animation-name:orb2;animation-duration:55s}
.orbit-one{translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-20px)}
.orbit-two{translate:calc(var(--px,0)*-12px) calc(var(--py,0)*-10px)}
.orbit::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 16px var(--yellow)}
.floating-tag{transition:translate .5s ease-out;animation:up 1s cubic-bezier(.2,.8,.2,1) 1.4s both}
.tag-one{translate:calc(var(--px,0)*34px) calc(var(--py,0)*26px)}
.tag-two{translate:calc(var(--px,0)*-30px) calc(var(--py,0)*-22px)}

/* faixa amarela em loop */
.ticker .track{display:flex;align-items:center;width:max-content;animation:mq 26s linear infinite}
.ticker .track>*{flex:none;margin-right:30px}
.ticker:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-25%)}}

/* revelações no scroll */
.rv{opacity:0}
.rv.in{opacity:1;animation:up .95s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*90ms) both}
.rvc .cut{clip-path:inset(0 0 100% 0);scale:1.3;transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) calc(var(--i)*.15s),scale 1.8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.15s),transform .3s}
.rvc.in .cut{clip-path:inset(0);scale:1}
.rvc figcaption{opacity:0;transition:opacity .8s .7s}
.rvc.in figcaption{opacity:1}

/* cartões: inclinação 3D + luz que segue o mouse */
.barber,.plan{will-change:transform}
.barber{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.barber:hover{transform:perspective(900px) translateY(-7px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.portrait-photo{transition:scale .7s cubic-bezier(.2,.8,.2,1)}
.barber:hover .portrait-photo,.barber:hover .initials{scale:1.07}
.portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#f8df2250,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.barber:hover .portrait::after{opacity:1}
.barber-caption>b{transition:rotate .35s cubic-bezier(.2,.8,.2,1)}
.barber:hover .barber-caption>b{rotate:45deg}
.plan{position:relative;overflow:hidden;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s}
.plan:hover{border-color:var(--yellow)}
.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),#ffffff22,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.plan:hover::before{opacity:1}
.plan>*{position:relative}

/* serviços */
.service{position:relative;transition:translate .35s cubic-bezier(.2,.8,.2,1),color .3s}
.service::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.service:hover{translate:12px 0;color:#fff}
.service:hover::after{transform:scaleX(1)}
summary span{display:inline-block;font-size:22px;line-height:1;transition:rotate .35s cubic-bezier(.2,.8,.2,1)}
details[open] summary span{rotate:45deg}
details[open] #all-services .service{animation:up .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*45ms) both}

/* galeria */
.cut{will-change:transform}
.gallery figure{will-change:translate}

/* perfil (dialog) */
@keyframes dlg{from{opacity:0;transform:translateY(40px) scale(.93);filter:blur(8px)}}
@keyframes fade{from{opacity:0}}
dialog[open]{animation:dlg .5s cubic-bezier(.2,.9,.2,1)}
dialog[open]::backdrop{animation:fade .45s}
dialog[open]>*:not(.close){animation:up .7s cubic-bezier(.2,.8,.2,1) calc(var(--d,0)*70ms + .15s) both}
.close{transition:rotate .35s,color .2s}
.close:hover{rotate:90deg;color:var(--yellow)}

@media(max-width:600px){body.scrolled header{height:64px}.ring{display:none}}