/* ==========================================================================
   Assinaturas (protótipo): topo que vira arco, fio de latão
   e foto que vira página.
   ==========================================================================*/

/* --- Topo que vira arco ---------------------------------------------------
   O banner fica preso enquanto a página rola e se fecha no formato das
   divisórias da clínica. Os valores (--t, --x, --b, --r, --p) vêm do JS. */
.hero-arco__moldura, .hero-arco__legenda { display: none; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .hero-arco { height: 185vh; background: var(--cream); }
  .hero-arco__palco { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .hero-arco .hero {
    height: 100%;
    min-height: 0;
    clip-path: inset(var(--t, 0px) var(--x, 0px) var(--b, 0px) round var(--r, 0px) var(--r, 0px) 0 0);
    will-change: clip-path;
  }
  .hero-arco .hero::after { opacity: calc(1 - var(--p, 0)); }
  .hero-arco .hero__conheca, .hero-arco .hero__aside { opacity: calc(1 - var(--p, 0) * 4); }
  .hero-arco .hero__slides { transform: scale(calc(1 + var(--p, 0) * .06)); transform-origin: 50% 60%; }

  .hero-arco__moldura {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(var(--at) - 16px);
    bottom: var(--ab);
    width: calc(var(--aw) + 32px);
    transform: translateX(-50%);
    border: 1px solid var(--gold-soft);
    border-bottom: 0;
    border-radius: var(--arch);
    opacity: var(--mo, 0);
    pointer-events: none;
  }
  .hero-arco__legenda {
    display: block;
    position: absolute;
    top: calc(var(--at) + (100vh - var(--at) - var(--ab)) * .55);
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--text-soft);
    white-space: nowrap;
    opacity: var(--mo, 0);
    transform: translateY(calc((1 - var(--mo, 0)) * 14px));
    pointer-events: none;
  }
  .hero-arco__legenda::before {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    margin-bottom: 18px;
    background: var(--gold);
  }
  .hero-arco__legenda--esq { right: calc(50% + var(--aw) / 2 + 72px); text-align: right; }
  .hero-arco__legenda--esq::before { margin-left: auto; }
  .hero-arco__legenda--dir { left: calc(50% + var(--aw) / 2 + 72px); }
}

/* --- Fio de latão ---------------------------------------------------------- */
main { position: relative; }
.fio {
  position: absolute;
  top: 0; left: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.fio path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-linecap: round; }
.fio__ponta { fill: var(--gold); transition: opacity .4s; }
.fio__halo { fill: var(--gold); opacity: .22; transition: opacity .4s; }
.cta__symbol, .cta .eyebrow { transition: opacity 1.6s var(--ease), color 1.2s var(--ease); }
.cta.is-tocado .cta__symbol { opacity: .34; }
.cta.is-tocado .eyebrow { color: var(--gold); }

/* --- Foto que vira página (home → Tratamentos) ---------------------------- */
::view-transition-group(foto-tratamento) {
  animation-duration: .95s;
  animation-timing-function: cubic-bezier(.65, 0, .2, 1);
}
::view-transition-old(foto-tratamento),
::view-transition-new(foto-tratamento) {
  height: 100%;
  object-fit: cover;
  animation-duration: .95s;
}

/* --- Transição entre páginas em arco ----------------------------------------
   A página nova sobe dentro de um arco e se abre até ocupar a tela; a anterior
   recua um pouco e escurece. O cabeçalho fica parado (view-transition-name
   "cabecalho", em refino.css). Vale para todas as páginas que carregam este
   arquivo; com movimento reduzido, refino.css desliga as transições. */
::view-transition-old(root) {
  animation: arcoSai 1s cubic-bezier(.7, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: arcoEntra 1s cubic-bezier(.7, 0, .2, 1) both;
}
@keyframes arcoEntra {
  from { clip-path: inset(100% 0 0 0 round 50% 50% 0 0); transform: translateY(6vh); }
  55%  { clip-path: inset(18% 0 0 0 round 50% 50% 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0 0 0 0); transform: none; }
}
@keyframes arcoSai {
  to { transform: translateY(-7vh) scale(.985); filter: brightness(.82); }
}