/* ============================================================
   WJR FIXER — components.css
   Botões, links, fotos, cards, anéis e animação de entrada (reveal).
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
  padding:1.05em 1.7em; border-radius:100px;
  transition:.45s var(--ease);
  white-space:nowrap; cursor:pointer; position:relative;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn-primary{ background:var(--off); color:var(--ink); }
.btn-primary:hover{ background:var(--sand); }

.btn-ghost{ border:1px solid var(--off-40); color:var(--off); }
.btn-ghost:hover{ border-color:var(--sand); color:var(--sand); }

.on-light .btn-ghost{ border-color:rgba(23,23,23,.28); color:var(--ink); }
.on-light .btn-ghost:hover{ border-color:var(--sand-deep); color:var(--sand-deep); }
.on-light .btn-primary{ background:var(--ink); color:var(--off); }
.on-light .btn-primary:hover{ background:var(--sand-deep); color:var(--ink); }

/* text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:var(--fs-sm); color:var(--off);
  padding-bottom:3px; position:relative; width:fit-content;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--sand); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-arrow:hover{ color:var(--sand); }
.link-arrow:hover::after{ transform:scaleX(1); }
.link-arrow svg{ width:1em; height:1em; transition:transform .45s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* ---------- Photo treatments ---------- */
.ph{ position:relative; overflow:hidden; background:var(--ink-2); }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph-bw img{ filter:grayscale(100%) contrast(1.06) brightness(.9); }
.ph-cool img{ filter:saturate(.5) brightness(.8) contrast(1.06); }
.ph-cool::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(23,28,38,.28), rgba(23,23,23,.55));
  mix-blend-mode:multiply;
}
.ph-fade::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 35%, rgba(23,23,23,.85) 100%);
}

/* ---------- Cards ---------- */
.card{
  background:var(--ink-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.6rem,2.6vw,2.4rem);
  transition:.5s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--off-22); transform:translateY(-4px); }

/* ---------- Decorative thin circles ---------- */
.deco-circle{
  position:absolute; border:1px solid var(--line); border-radius:50%;
  pointer-events:none; z-index:0;
}

/* rotating ring signature */
.ring-spin{ animation:ringspin 64s linear infinite; }
@keyframes ringspin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .ring-spin{ animation:none; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* in-view at load: reveal instantly so visibility never depends on a transition finishing */
.reveal.show-now{ opacity:1 !important; transform:none !important; transition:none !important; }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.32s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}