/* ============================================================================
   ACAD-KIT (sampler copy) — button + frame primitives from
   src/app/academy/academy-house-kit.css. This page lives under public/ and
   can't import Next.js app source, so this is a synced copy of that file's
   BASE BUTTON / GEM CTA / WARM FRAME sections only (not the "world feel"
   section, which needs --font-academy-* vars this page doesn't define).
   Re-copy from the source file if the house kit's button styling changes.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BASE BUTTON  —  gilded honey-wood carved button. Secondary-CTA default.
   --------------------------------------------------------------------------- */
.acad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center; cursor: pointer;
  min-height: 48px;
  position: relative; overflow: hidden;
  border: none; border-radius: 3px;
  touch-action: manipulation;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 150ms ease;
  background: linear-gradient(180deg, #f0d182 0%, #dfbd68 42%, #c9974a 100%);
  color: #2d2116;
  box-shadow:
    inset 0 0 0 1px rgba(122, 83, 40, 0.55),
    inset 0 2px 1px rgba(255, 244, 214, 0.65),
    inset 0 -6px 10px rgba(94, 61, 22, 0.35),
    0 3px 0 #8a5f22,
    0 6px 14px rgba(74, 48, 16, 0.35);
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.4);
}
@media (hover: hover) {
  .acad-btn:hover { filter: brightness(1.06); }
}
.acad-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 0 0 1px rgba(122, 83, 40, 0.55),
    inset 0 2px 5px rgba(94, 61, 22, 0.4),
    0 1px 0 #8a5f22;
  filter: brightness(0.96);
}
.acad-btn:focus-visible {
  outline: 3px solid #d8b55c;
  outline-offset: 2px;
}
.acad-btn:disabled, .acad-btn[disabled] {
  opacity: 0.55; cursor: not-allowed; transform: none;
  box-shadow: none; filter: grayscale(0.4) brightness(0.85);
}

/* ----------------------------------------------------------------------------
   GEM CTA  —  faceted amber/gold gem. Add `acad-gem` to a `.acad-btn`.
   The ONE hero action on a surface.
   --------------------------------------------------------------------------- */
.acad-btn.acad-gem {
  border: none; border-radius: 0;
  background-color: transparent;
  clip-path: polygon(12% 0, 88% 0, 100% 28%, 100% 72%, 88% 100%, 12% 100%, 0 72%, 0 28%);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 10%, rgba(255, 255, 255, 0.03) 24%, transparent 34%),
    linear-gradient(180deg, transparent 33%, rgba(94, 61, 22, 0.16) 33.5%, transparent 34.5%, transparent 63%, rgba(94, 61, 22, 0.18) 63.5%, transparent 64.5%),
    linear-gradient(180deg, transparent 34%, rgba(255, 255, 255, 0.22) 35%, transparent 36%, transparent 64%, rgba(255, 255, 255, 0.14) 65%, transparent 66%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0 11%, transparent 11%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.24) 0 11%, transparent 11%),
    linear-gradient(45deg, rgba(94, 61, 22, 0.22) 0 11%, transparent 11%),
    linear-gradient(315deg, rgba(94, 61, 22, 0.2) 0 11%, transparent 11%),
    radial-gradient(80% 55% at 50% 120%, rgba(94, 61, 22, 0.32), transparent 60%),
    linear-gradient(180deg, #ffe9b0 0%, #e2bd55 48%, #b9873d 100%);
  box-shadow: none;
  color: #241b13;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55);
  filter: drop-shadow(0 5px 7px rgba(74, 48, 16, 0.4)) drop-shadow(0 0 14px rgba(226, 189, 85, 0.55));
}
.acad-btn.acad-gem::before {
  content: ""; position: absolute; top: 10%; left: 16%;
  width: 22%; height: 24%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.28) 40%, transparent 68%);
  filter: blur(0.3px);
}
.acad-btn.acad-gem::after {
  content: ""; position: absolute; inset: 0; clip-path: inherit;
  opacity: 1; pointer-events: none; background: none;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 244, 214, 0.55),
    inset 0 3px 2px rgba(255, 255, 255, 0.5),
    inset 0 -12px 16px rgba(94, 61, 22, 0.28),
    inset 0 0 16px rgba(226, 189, 85, 0.4);
}
@media (hover: hover) {
  .acad-btn.acad-gem:hover {
    filter: drop-shadow(0 5px 7px rgba(74, 48, 16, 0.4)) drop-shadow(0 0 20px rgba(226, 189, 85, 0.7)) brightness(1.06);
  }
}
.acad-btn.acad-gem:active {
  transform: translateY(2px); box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(74, 48, 16, 0.4)) drop-shadow(0 0 12px rgba(226, 189, 85, 0.5)) brightness(0.96);
}

/* ----------------------------------------------------------------------------
   WARM FRAME  —  parchment-fill panel with a gilt border.
   --------------------------------------------------------------------------- */
.acad-frame {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f5ead4 0%, #efe0bf 100%);
  border: 1px solid #b9aa91;
  box-shadow:
    inset 0 0 0 3px rgba(216, 181, 92, 0.35),
    0 14px 40px rgba(74, 48, 16, 0.22);
  color: #241b13;
}

.acad-frame--dark {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.74), rgba(10, 7, 4, 0.5));
  border: 1px solid rgba(216, 181, 92, 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(216, 181, 92, 0.16),
    inset 0 1px rgba(255, 244, 214, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .acad-btn, .acad-btn.acad-gem { transition: none; }
}