/* ============================================================
   SOPHIA GOMES TATTOO v2 — motion layer
   Camada adicional só de comportamento/animação, separada dos
   tokens visuais em style.css. Pensada pra ser removível: apagar
   este arquivo + motion.js volta o site ao comportamento da v1.
   ============================================================ */

/* ---------- header: estado ao rolar ---------- */
.site-header{
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  background: rgba(20,19,18,.98);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}

/* ---------- traço fino: desenhado via stroke-dashoffset (JS calcula o comprimento) ---------- */
.fineline-flourish path{
  will-change: stroke-dashoffset;
}

/* ---------- hero: brilho ambiente sutil ---------- */
.hero{ isolation:isolate; }
.hero::before{
  content:'';
  position:absolute;
  inset:-20% -10%;
  background: radial-gradient(circle at 30% 30%, rgba(166,129,58,.16), transparent 60%);
  pointer-events:none;
  z-index:0;
  animation: sg-drift 20s ease-in-out infinite alternate;
}
.hero .container{ position:relative; z-index:1; }
@keyframes sg-drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(3%,4%) scale(1.08); }
}

/* ---------- imagens: zoom suave no hover ---------- */
.portfolio-grid .ph img.real,
.compare-grid .ph img.real,
.hero .ph img.real{
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.portfolio-grid .ph:hover img.real,
.compare-grid .ph:hover img.real{
  transform: scale(1.06);
}

/* ---------- respeita preferência de movimento reduzido (reforço; a regra global já existe em style.css) ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; }
}

/* ---------- transição nativa entre páginas (progressive enhancement, sem custo se o navegador não suportar) ---------- */
@view-transition{
  navigation: auto;
}