/* ==========================================================================
   Calls to action: two keys, one primary and one secondary.

   Each is a key: a cap sitting on a base, with a small locator light like the
   light switch's. Come near and your print spreads across it from exactly where
   you are, and the letters roll outward from the one under your finger.
   Press and the cap drops onto its base.

   Primary  (.cta--primary):   lit. Acid cap, deep green base, a printed dot.
   Secondary (.cta--secondary): unlit. Dark cap; its light comes on as you near it.

   Markup:  <a class="cta cta--primary" href="#work">
              <span data-cta-label>See the work</span>
              <span data-cta-arrow aria-hidden="true">↓</span>   (optional)
            </a>
   scripts/cta.js builds the rest (letters, light, ridges). Without it the
   keys still look and press the same; only the print and the roll are missing.
   ========================================================================== */

@property --cta-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

.cta {
  /* Local colours, so the keys work on every page, Woodberg included */
  --cta-acid: #c6f432;
  --cta-on-acid: #0f0e0c;
  --cta-text: #ece7dc;
  --cta-text-rgb: 236 231 220;
  --cta-glow: 198 244 50;
  --cta-cap: #1d1b17;
  --cta-cap-base: #050504;
  --cta-lit-base: #6f8a17;
  --cta-off-light: #4a463c;
  --cta-roll-in: var(--cta-acid);
  --cta-ridge: rgb(var(--cta-glow) / 0.22);
  --cta-base: 4px;
  --cta-dur: 340ms;
  --cta-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cta-press: 90ms;
  --cta-lh: 20px;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 4px; /* room for the base; lift and press keep the key's footprint the same */
  padding: 0 24px 0 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 500 14px/var(--cta-lh) var(--f-body, "Geist", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--cta-press) var(--cta-ease),
    box-shadow var(--cta-press) var(--cta-ease),
    background-color var(--cta-press) var(--cta-ease),
    border-color var(--cta-press) var(--cta-ease),
    color var(--cta-press) var(--cta-ease);
}
.cta:focus-visible { outline: 2px solid var(--accent-text, var(--cta-acid)); outline-offset: 4px; }

/* ---------- Primary: lit ---------- */
.cta--primary {
  --cta-ridge: rgb(15 14 12 / 0.16);
  --cta-roll-in: currentColor;
  background-color: var(--cta-acid);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 55%);
  color: var(--cta-on-acid);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 var(--cta-base) 0 var(--cta-lit-base),
    0 calc(var(--cta-base) + 4px) 14px rgb(0 0 0 / 0.35);
}
.cta--primary:active { --cta-ridge: rgb(15 14 12 / 0.4); }

/* ---------- Secondary: unlit ---------- */
.cta--secondary {
  border-color: rgb(var(--cta-text-rgb) / 0.1);
  background-color: var(--cta-cap);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 60%);
  color: var(--cta-text);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 var(--cta-base) 0 var(--cta-cap-base),
    0 calc(var(--cta-base) + 4px) 14px rgb(0 0 0 / 0.45);
}
.cta--secondary.is-on { border-color: rgb(var(--cta-glow) / 0.35); }
.cta--secondary:active { --cta-ridge: rgb(var(--cta-glow) / 0.75); }

/* ---------- The locator light ---------- */
.cta__led {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color var(--cta-press) var(--cta-ease), box-shadow var(--cta-press) var(--cta-ease);
}
.cta--primary .cta__led { background: var(--cta-on-acid); opacity: 0.75; }
.cta--secondary .cta__led { background: var(--cta-off-light); box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.08); }
.cta--secondary.is-on .cta__led { background: var(--cta-acid); box-shadow: 0 0 6px rgb(var(--cta-glow) / 0.9), 0 0 14px rgb(var(--cta-glow) / 0.45); }
.cta--secondary:active .cta__led { box-shadow: 0 0 10px rgb(var(--cta-glow) / 1), 0 0 22px rgb(var(--cta-glow) / 0.6); }

/* ---------- Lift and press. The base shrinks as the cap comes down. ---------- */
.cta.is-on { transform: translateY(-1px); --cta-base: 5px; }
.cta:active { transform: translateY(3px); --cta-base: 1px; transition-duration: 40ms; }

/* ---------- The rolling letters ---------- */
.cta__roll { display: inline-flex; height: var(--cta-lh); overflow: hidden; }
.cta__ch {
  position: relative;
  display: inline-block;
  white-space: pre;
  /* --d is how far this letter is from the one under your finger */
  transition: transform var(--cta-dur) var(--cta-ease) calc(var(--d, 0) * var(--cta-step, 14ms));
}
.cta__ch::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--cta-roll-in);
}
.cta.is-on .cta__ch { transform: translateY(-100%); }
/* Arrows roll the way they point */
.cta__roll--down .cta__ch::after { top: -100%; }
.cta.is-on .cta__roll--down .cta__ch { transform: translateY(100%); }
.cta__roll--left { width: 1ch; }
.cta__roll--left .cta__ch::after { top: 0; left: 100%; }
.cta.is-on .cta__roll--left .cta__ch { transform: translateX(-100%); }

/* ---------- The print ---------- */
.cta__ridges {
  position: absolute;
  inset: -12px;
  z-index: -1;
  pointer-events: none;
  background: repeating-radial-gradient(circle at var(--x, 50%) var(--y, 50%),
    var(--cta-ridge) 0 1.2px, transparent 1.8px 5px);
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--cta-r) * 0.5), transparent var(--cta-r));
          mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--cta-r) * 0.5), transparent var(--cta-r));
  filter: url(#cta-warp);
  transition: --cta-r 800ms var(--cta-ease);
}
.cta.is-on .cta__ridges { --cta-r: 340px; }

/* ---------- Light mode (Woodberg's footer stays dark, so it opts out) ---------- */
[data-theme="light"] .cta:not(.cta--on-dark) {
  --cta-text: #20221d;
  --cta-text-rgb: 32 34 29;
  --cta-glow: 75 101 0;
  --cta-lit-base: #8fb021;
}
[data-theme="light"] .cta--primary:not(.cta--on-dark) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 var(--cta-base) 0 var(--cta-lit-base),
    0 calc(var(--cta-base) + 4px) 12px rgb(0 0 0 / 0.1);
}
[data-theme="light"] .cta--secondary:not(.cta--on-dark) {
  --cta-roll-in: #4b6500;
  --cta-ridge: rgb(75 101 0 / 0.28);
  border-color: #cdd0c7;
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff, #eef0ea);
  box-shadow:
    inset 0 1px 0 #fff,
    0 var(--cta-base) 0 #c4c8bc,
    0 calc(var(--cta-base) + 4px) 12px rgb(0 0 0 / 0.08);
}
[data-theme="light"] .cta--secondary:not(.cta--on-dark) .cta__led { background: #d5d8cf; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.15); }
[data-theme="light"] .cta--secondary.is-on:not(.cta--on-dark) .cta__led { background: #7fa300; box-shadow: 0 0 6px rgb(127 163 0 / 0.7); }
[data-theme="light"] .cta--secondary.is-on:not(.cta--on-dark) { border-color: #9fb85a; }

/* ---------- Reduce motion: nothing travels; light and colour still change ---------- */
/* Screen readers get the label once, as plain words */
.cta__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}