/* ============================================================
   CASUALIZZE — Link & hover dynamics
   Canonical, reusable link behaviours. Each link TYPE has its own
   hover so the motion communicates what the link does. Calm motion
   (token durations, no bounce); all respect prefers-reduced-motion.

   Use:
     .cz-link        running-text link (semibold + underline reveal)
     .cz-nav-link    nav / menu link   (Verde-Lagoa wipe wash)
     .cz-link-cta    link-action       (wipe wash + sliding arrow)
     .cz-link-quiet  on dark/photo     (opacity 70% → 100%)
   ============================================================ */

/* --- Running text: semibold, ink underline reveals from the left --- */
.cz-link {
  position: relative;
  display: inline;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--c-ink), var(--c-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.cz-link:hover { background-size: 100% 1.5px; }

/* --- Nav / menu: Verde-Lagoa wash wipes in from the left --- */
.cz-nav-link {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  cursor: pointer; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.cz-nav-link > span { position: relative; z-index: 1; }
.cz-nav-link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  height: 1.5em; /* faixa na altura do texto */
  background: var(--accent-wash);
  transform: translateY(-50%) translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
}
.cz-nav-link:hover::before,
.cz-nav-link:focus-visible::before { transform: translateY(-50%) translateX(0); }
.cz-nav-link:hover { color: var(--accent); }
.cz-nav-link[data-active="true"] { color: var(--accent); font-weight: var(--fw-semibold); }

/* --- Link-action: same wipe + the arrow slides --- */
.cz-link-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  cursor: pointer; color: var(--accent); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.cz-link-cta > span { position: relative; z-index: 1; }
.cz-link-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  height: 1.5em; /* faixa na altura do texto */
  background: var(--accent-wash);
  transform: translateY(-50%) translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
}
.cz-link-cta:hover::before,
.cz-link-cta:focus-visible::before { transform: translateY(-50%) translateX(0); }
.cz-link-cta .cz-arw { transition: transform var(--dur-base) var(--ease-out); }
.cz-link-cta:hover .cz-arw { transform: translateX(4px); }

/* --- Quiet (on ink / over photography): opacity lift --- */
.cz-link-quiet {
  color: var(--c-paper); opacity: 0.72; cursor: pointer; text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cz-link-quiet:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cz-link, .cz-nav-link::before, .cz-link-cta::before, .cz-link-cta .cz-arw { transition: none; }
}