/* ============================================================
   HAMS OF RICHMOND — "O FIO / Hair Becomes Name" (v2)
   Camada de elevação: mais clean, menos poluído, surreal.
   Carregada DEPOIS de style.css — override por ordem de origem.
   ============================================================ */

:root{
  --bone-mute:#C9C2B4;                 /* corpo de texto: osso rebaixado (~85%) */
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(1.25rem,5vw,4.5rem);
}

/* ---------- corpo de texto mais calmo ---------- */
body{color:var(--bone-mute);font-size:1.09rem;line-height:1.65}
.body-copy p{max-width:62ch;color:var(--bone-mute)}
p{color:var(--bone-mute)}

/* ---------- DESCLUTTER: mata efeitos concorrentes ---------- */
.cursor-light{display:none!important}
.about-watermark{display:none!important}
.ticker--small{display:none!important}
/* vinheta estática (sem "respirar") */
.vignette{animation:none!important;opacity:.5!important;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(0,0,0,.62) 100%)!important}
/* grão estático via div (o canvas #grain é removido pelo JS) */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* section-line "cortada" repetida some — o fio-condutor costura ---------- */
.section::before{display:none!important}
/* foil vira ouro estático em todo lugar (o único gesto de luz é o masthead) */
.foil{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--gold)!important;animation:none!important}
.btn-sheen{display:none!important}          /* sem varredura nos botões */
/* progress bar do topo some (ruído) — o fio já dá a sensação de progresso */
.progress{display:none!important}

/* ---------- respiração: mais espaço por seção ---------- */
.section{padding-block:clamp(6rem,12vw,10rem)}
.wrap{max-width:1180px;padding-inline:var(--gutter)}
.eyebrow{color:var(--bronze);letter-spacing:.28em;font-size:.72rem;margin-bottom:1.75rem}

/* ---------- tipografia colossal e confiante ---------- */
.h2{font-size:clamp(2.2rem,6vw,5.5rem);line-height:.96;letter-spacing:-.025em;font-weight:500;margin-bottom:2.5rem}
.ghost-i{-webkit-text-stroke:1px var(--gold);color:transparent}
.h2 .ghost-i{-webkit-text-stroke-width:1.1px}

/* masthead sem reveal de linha (entrada suave própria) */
html.js .masthead.rl .line-inner{transform:none!important;transition:none!important}
.hero .masthead{opacity:1;transition:opacity .9s var(--ease-soft)}

/* ============================================================
   MIRROR EMERGENCE — fotos que surgem do preto quente
   ============================================================ */
html.js .hero-photo img,
html.js .about-photo img,
html.js .tcard-photo img,
html.js .srow-photo img,
html.js .gtile img,
html.js .ritual-photo img,
html.js .loc-facade img{
  transform:scale(1.06);
  filter:brightness(.4) saturate(.72) contrast(1.02);
  transition:transform 1.15s var(--ease-soft),filter 1.15s var(--ease-soft);
}
html.js .hero.settled .hero-photo img,
html.js .about-photo.is-in img,
html.js .tcard.is-in .tcard-photo img,
html.js .srow.open .srow-photo img,
html.js .gtile.is-in img,
html.js .ritual.is-in .ritual-photo img,
html.js .loc-facade.is-in img{
  transform:scale(1);
  filter:none;
}
/* mata o duotone dourado e o hover→cor (agora tudo é "emerge") */
img.duo{filter:brightness(.4) saturate(.72) contrast(1.02)}
img.duo.developed,a:hover img.duo,figure:hover img.duo,.tcard:hover img.duo{filter:none}
/* neutraliza clip-path do .wipe — vira emerge suave */
html.js .wipe{clip-path:none!important}
html.js .wipe img{transform:scale(1.06)}
html.js .wipe.is-in img{transform:scale(1)}
/* luz quente por cima das fotos-herói */
.hero-photo::after,.ritual-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 40%,transparent 0%,rgba(10,9,8,.28) 46%,var(--void) 82%)}

/* ============================================================
   THREAD — o fio-condutor de 1px que costura a página
   ============================================================ */
.thread{position:fixed;top:0;left:clamp(10px,3.5vw,46px);width:26px;height:100vh;z-index:70;
  pointer-events:none}
.thread path{fill:none;stroke:var(--gold);stroke-width:1;opacity:.55}
@media (prefers-reduced-motion:reduce){.thread path{stroke-dasharray:none!important;stroke-dashoffset:0!important}}
@media (max-width:900px){.thread{left:6px;width:12px;opacity:.6}}

/* ============================================================
   HERO
   ============================================================ */
.hero-content{position:relative;z-index:4}
.masthead{font-weight:600;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(2.9rem,8.6vw,8.2rem)}
.hero-crest{filter:brightness(1) saturate(1) drop-shadow(0 0 20px rgba(201,164,92,.35));margin-bottom:1.6rem}
.hero-sub{color:var(--bone-mute);max-width:34ch}
/* CTA único mais elegante */
.hero-ctas .btn-gold{letter-spacing:.08em}
.hero-ctas .btn-gold:hover{background:rgba(166,57,42,.16);border-color:var(--lacquer);color:var(--bone)}

/* ---------- ticker único, lento, discreto ---------- */
.ticker{border-color:rgba(122,92,46,.22);padding:1rem 0;opacity:.9}
.tk{font-size:clamp(1.6rem,5vw,3.4rem);-webkit-text-stroke:1px var(--bronze);opacity:.7}
.tk b{color:var(--bronze);-webkit-text-stroke:0;opacity:.9}

/* ============================================================
   Componentes: acalmar e refinar
   ============================================================ */
/* stats: números grandes, sem faixa carregada */
.stats{border:0;background:none;gap:1px}
.stat{background:none;border-top:1px solid var(--line-gold);padding:1.6rem 1.4rem 0}
.stat-value{font-size:clamp(2rem,3.4vw,3rem);color:var(--gilt)}
.stat-label{color:var(--bronze)}

/* services: cada linha "pende" de um filete fino; preço tabular */
.srow{border-top:1px solid rgba(122,92,46,.28)}
.srow-leader{background-image:none;border-bottom:1px dotted rgba(122,92,46,.3);height:0}
.srow-price{font-variant-numeric:tabular-nums lining-nums}
.srow-name{font-weight:500}

/* ritual: fundo navy, sem foil na quote */
.ritual-quote{color:var(--gold)}
.steam{display:none!important}

/* barbers: filete inferior, sem moldura pesada */
.tcard-photo{border:0;border-bottom:1px solid var(--line-gold)}
.tcard-role{color:var(--bronze)}

/* reviews: cards mais silenciosos; estrelas já preenchidas */
.reviews{background:var(--void)}
.review-card{background:var(--smoke);border:1px solid rgba(122,92,46,.22)}
.review-card .star{fill:var(--gilt);stroke:none}
.google-rating{border-color:rgba(122,92,46,.3)}

/* booking: telefone herói, mock discreto */
.booking{background:var(--navy)}
.book-mock{opacity:.72}
.book-phone{color:var(--gilt)}

/* location: mapa mais fino */
.mline{stroke-width:1;opacity:.7}
.mline.thames{stroke:#1b2333;stroke-width:10;filter:none;opacity:.9}
.mdot{fill:var(--lacquer)}
.mdot-halo{stroke:var(--lacquer)}

/* finale: relíquia flutuante */
.finale-head{font-weight:500}
.footer-banner{color:var(--gold)}

/* footer / callbar */
.footer{border-top:1px solid var(--line-gold)}
.footer-crest{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.callbar-call{background:rgba(201,164,92,.06)}
.callbar-call:active{background:rgba(166,57,42,.2)}

/* reduced-motion: congela tudo que ainda se mexe */
@media (prefers-reduced-motion:reduce){
  .footer-crest{animation:none!important}
}