/* ============================================================
   af-button-3d.css — layered "tactile" button (AFLLC)
   ------------------------------------------------------------
   A flat button is one fill. This one stacks six thin layers so
   it reads as a physical object lit from above:

     L1 body     vertical gradient: a touch lighter at the top
     L2 sheen    soft light on the upper half (::before)
     L3 top edge 1px inner highlight along the top
     L4 low edge 1px inner shade along the bottom
     L5 rim      1px outline in a darker shade of the fill
     L6 shadow   two drop shadows: tight contact + soft ambient,
                 tinted with the brand ink, never neutral gray

   One light source (above), so every highlight sits on top and
   every shade sits below. Hover raises the button (bigger
   ambient shadow); press sinks it (shadows collapse, top edge
   turns into an inset shade).

   Every layer is its own custom property, so a variant only sets
   --btn-bg / --btn-fg / --btn-ink and the shades derive from it.
   Requires color-mix() (all evergreen browsers since 2023).

   Usage:  <a class="btn-3d" href="...">Label</a>          (on ivory)
           <a class="btn-3d btn-3d--paper" ...>          (on indigo panels)
           add btn-3d--glow to the one main CTA in a dark section
   Loaded by mu-plugins/af-buttons.php on inner pages; the homepage and
   /calibrate/ templates link it directly (they skip wp_head).
   Source of truth: Obsidian vault
   2. Areas/AFLLC/Marketing/assets/website-theme/andrewfolkler-child/
   ============================================================ */

.btn-3d {
  /* --- inputs: the only values a variant sets --- */
  --btn-bg:  #0A054D;              /* fill */
  --btn-fg:  #FEFFFE;              /* label */
  --btn-ink: #0A054D;              /* shadow tint */
  --btn-radius: 8px;

  /* --- derived shades --- */
  --btn-top:    color-mix(in oklab, var(--btn-bg), white 12%);
  --btn-bottom: color-mix(in oklab, var(--btn-bg), black 10%);
  --btn-edge:   color-mix(in oklab, var(--btn-bg), black 45%);

  /* --- the layers --- */
  --l-body:    linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  --l-sheen:   linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0));
  --l-topedge: inset 0 1px 0 rgb(255 255 255 / .22);
  --l-lowedge: inset 0 -1px 0 rgb(0 0 0 / .22);
  --l-rim:     0 0 0 1px var(--btn-edge);
  --l-contact: 0 1px 2px color-mix(in srgb, var(--btn-ink) 35%, transparent);
  --l-ambient: 0 4px 12px -2px color-mix(in srgb, var(--btn-ink) 30%, transparent);
  --l-glow:    0 0 0 transparent;                /* optional, see .btn-3d--glow */

  position: relative;
  isolation: isolate;               /* keeps the sheen above the fill, below the label */
  display: inline-block;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: 0.02em;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  background: var(--l-body);
  box-shadow: var(--l-topedge), var(--l-lowedge), var(--l-rim), var(--l-contact), var(--l-ambient), var(--l-glow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.btn-3d::before {
  content: "";
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: calc(var(--btn-radius) - 1px) calc(var(--btn-radius) - 1px) 2px 2px;
  background: var(--l-sheen);
  z-index: -1;
  pointer-events: none;
  transition: opacity 140ms ease;
}

/* raise */
.btn-3d:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  --l-ambient: 0 8px 20px -4px color-mix(in srgb, var(--btn-ink) 38%, transparent);
}
/* press: light now falls into the button, not off it */
.btn-3d:active {
  transform: translateY(1px);
  --l-topedge: inset 0 2px 3px rgb(0 0 0 / .28);
  --l-lowedge: inset 0 0 0 transparent;
  --l-contact: 0 0 0 transparent;
  --l-ambient: 0 1px 1px color-mix(in srgb, var(--btn-ink) 25%, transparent);
}
.btn-3d:active::before { opacity: 0; }
.btn-3d:focus-visible { outline: 2px solid var(--btn-ink); outline-offset: 3px; }

/* Ivory button for indigo panels. Drop shadows barely show on a
   dark ground, so the rim and gradient carry the depth. The
   gradient runs white to a faint indigo tint: the underside picks
   up the panel's color, and no new hue enters the palette. */
.btn-3d--paper {
  --btn-bg:  #FBF8F1;
  --btn-fg:  #0A054D;
  --btn-ink: #01000D;
  --btn-edge: #01000D;
  --btn-top:    #FFFFFF;
  --btn-bottom: color-mix(in oklab, #FFFFFF, #0A054D 13%);
  --l-topedge: inset 0 1px 0 rgb(255 255 255 / .9);
  --l-lowedge: inset 0 -1px 0 rgb(10 5 77 / .14);
  --l-sheen:   linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0));
}
.btn-3d--paper:focus-visible { outline-color: #FBF8F1; }

/* Optional soft glow for light buttons on dark panels: the faint
   light a bright surface spills onto the ground around it. It is
   added on top of the dark shadow, never instead of it, so the
   light still reads as coming from above. */
.btn-3d--glow       { --l-glow: 0 0 24px 2px rgb(251 248 241 / .10); }
.btn-3d--glow:hover { --l-glow: 0 0 28px 4px rgb(251 248 241 / .18); }
.btn-3d--glow:active{ --l-glow: 0 0 16px 0 rgb(251 248 241 / .08); }

@media (prefers-reduced-motion: reduce) {
  .btn-3d, .btn-3d::before { transition: none; }
  .btn-3d:hover, .btn-3d:active { transform: none; }
}