/* ==========================================================================
   HOME - CALLS TO ACTION
   One button for the whole page: a lacquered plaque with a fine gilt inner
   frame (::before) and a gold diamond either side of the label - the same
   diamonds that mark the lineage timeline. On hover gold leaf rises from
   the bottom like ink soaking into paper, the diamonds open outward and the
   plaque lifts. The fill is a transformed layer (::after), so the hover
   never repaints the button.

   .cta--on-ink    gold hairline plaque on the ink sections (hall, guardian)
   .cta--on-paper  solid ink plaque on the paper sections (lineage, contact)

   Placement (margins, full width in the form) stays with each section's CSS.
   ========================================================================== */

.cta {
  --cta-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --cta-track: 0.34em;
  --cta-gold-leaf: linear-gradient(180deg, oklch(0.8 0.1 85), oklch(0.66 0.105 78) 55%, oklch(0.56 0.1 70));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  padding: 1.2rem 2.25rem;
  overflow: hidden;
  border: 1px solid var(--cta-edge);
  background: var(--cta-bg);
  box-shadow: var(--cta-shadow, none);
  color: var(--cta-fg);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--cta-track);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  z-index: auto;
  transition:
    color 0.55s var(--cta-ease),
    border-color 0.55s var(--cta-ease),
    box-shadow 0.55s var(--cta-ease),
    transform 0.55s var(--cta-ease);
}

/* The gilt inner frame, above the fill. */
.cta::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 1;
  border: 1px solid var(--cta-frame);
  pointer-events: none;
  transition: border-color 0.55s var(--cta-ease);
}

/* The fill, waiting below. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-gold-leaf);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--cta-ease);
}

/* Label flanked by two diamonds. Tracking adds space after the last letter,
   so the closing diamond's gap is shortened by it to keep the label centred. */
.cta-label {
  display: inline-flex;
  align-items: center;
}

.cta-label::before,
.cta-label::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0.85;
  transform: rotate(45deg);
  transition: transform 0.6s var(--cta-ease);
}

.cta-label::before { margin-right: 1.1em; }
.cta-label::after { margin-left: calc(1.1em - var(--cta-track)); }

.cta:hover .cta-label::before,
.cta:focus-visible .cta-label::before {
  transform: translateX(-4px) rotate(45deg);
}

.cta:hover .cta-label::after,
.cta:focus-visible .cta-label::after {
  transform: translateX(4px) rotate(45deg);
}

.cta:hover,
.cta:focus-visible {
  color: var(--cta-fill-fg);
  border-color: var(--cta-fill);
  box-shadow: var(--cta-shadow-hover, none);
  transform: translateY(-2px);
}

.cta:hover::before,
.cta:focus-visible::before {
  border-color: oklch(0.21 0.018 58 / 0.35);
}

.cta:hover::after,
.cta:focus-visible::after {
  transform: scaleY(1);
}

.cta:active {
  transform: translateY(0);
}

.cta:focus-visible {
  outline: 1px solid var(--cta-ring);
  outline-offset: 5px;
}

.cta:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cta:disabled::after {
  transform: scaleY(0);
}

.cta:disabled:hover {
  color: var(--cta-fg);
  transform: none;
}

/* ---------- on the ink: a gold hairline plaque ---------- */

.cta--on-ink {
  --cta-bg: linear-gradient(180deg, oklch(0.75 0.088 80 / 0.07), oklch(0.75 0.088 80 / 0.02));
  --cta-fg: oklch(0.82 0.085 82);
  --cta-edge: oklch(0.75 0.088 80 / 0.7);
  --cta-frame: oklch(0.75 0.088 80 / 0.3);
  --cta-fill: oklch(0.75 0.088 80);
  --cta-fill-fg: oklch(0.17 0.012 62);
  --cta-ring: oklch(0.75 0.088 80);
  --cta-shadow-hover: 0 14px 30px -16px oklch(0.75 0.088 80 / 0.45);
}

/* ---------- on the paper: an ink plaque ---------- */

.cta--on-paper {
  --cta-bg: linear-gradient(180deg, oklch(0.28 0.022 58), oklch(0.19 0.016 56));
  --cta-fg: oklch(0.86 0.07 84);
  --cta-edge: oklch(0.17 0.014 56);
  --cta-frame: oklch(0.75 0.088 80 / 0.42);
  --cta-fill: oklch(0.6 0.1 74);
  --cta-fill-fg: oklch(0.17 0.012 62);
  --cta-ring: oklch(0.5 0.095 70);
  --cta-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 10px 22px -14px oklch(0.21 0.018 58 / 0.7);
  --cta-shadow-hover:
    inset 0 1px 0 oklch(1 0 0 / 0.2),
    0 18px 30px -16px oklch(0.4 0.08 65 / 0.6);
}

/* A full-width button keeps its label in the middle. */
.btn-ink--wide.cta {
  display: flex;
}

@media (max-width: 480px) {
  .cta {
    --cta-track: 0.26em;
    padding: 1.05rem 1.6rem;
    font-size: 0.7rem;
  }
}

/* The narrowest phones: tighter tracking and gaps so the longest label
   (View Full Biography) stays inside the column. */
@media (max-width: 380px) {
  .cta {
    --cta-track: 0.16em;
    padding-inline: 1.1rem;
  }

  .cta-label::before { margin-right: 0.8em; }
  .cta-label::after { margin-left: calc(0.8em - var(--cta-track)); }
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta::before,
  .cta::after,
  .cta-label::before,
  .cta-label::after {
    transition: none;
  }

  .cta:hover,
  .cta:focus-visible {
    transform: none;
  }
}