/* ============================================================
   Reserve CTA treatment — applied site-wide
   ------------------------------------------------------------
   Goal: make the Reserve button stand out from the rest of the
   page without adding a generic web "glow".

   Two states:
   - DARK contexts (the topnav, walnut/black backdrops): use the
     gilt-edged shimmer treatment (study option 04). The button
     itself is the lit object — gilt frame + slow shimmer.
   - LIGHT contexts (paper hero, page bodies, footers): same
     shimmer + a small handwritten "→ here, please" marginalia
     note tucked to the right of (or under) the button.

   Light-paper instances opt in by adding data-cta="reserve" to
   the <a class="btn solid">. The note is rendered via ::after
   so we don't need to touch markup beyond the data attribute.

   Dark-context buttons (notably .topnav .btn.solid) get the
   shimmer automatically and DO NOT get the marginalia note.
   ============================================================ */

/* ---------- Shimmer (study option 04) ---------- */
@keyframes __reserve-cta-sheen {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 100%; }
}

/* Apply the gilt-edged shimmer treatment to:
   - Topnav reserve buttons (any .topnav .btn.solid)
   - Anything explicitly marked data-cta="reserve" or data-cta="primary"
   "primary" covers Submit a paper, Become a speaker, Sponsorship
   enquiries, etc. — the other major CTAs that should match the Reserve
   button's visual weight. The handwritten marginalia note (the
   "— here, please" curl) is reserved for data-cta="reserve" only. */
.topnav .btn.solid,
.btn.solid[data-cta="reserve"],
.btn.solid[data-cta="primary"] {
  background-size: 240% 240% !important;
  background-position: 100% 0;
  animation: __reserve-cta-sheen 5.2s ease-in-out infinite;
  border-color: rgba(40, 18, 2, 0.7);
  /* Gilt-on-paper frame (creates the "lit object" feel without
     a fuzzy outer glow). The 3px paper ring is what makes it
     read as a framed nameplate against either bg. */
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 200, 0.7),
    inset 0 -1px 0 rgba(40, 18, 2, 0.6),
    0 0 0 1px rgba(201, 154, 74, 0.45),
    0 0 0 3px rgba(244, 236, 218, 1),
    0 0 0 4px rgba(201, 154, 74, 0.35),
    0 8px 18px rgba(40, 28, 8, 0.28),
    0 14px 26px rgba(40, 28, 8, 0.18);
}

/* On the DARK topnav backdrop the paper-coloured frame is what
   makes the button stand out — keep it bright (warm cream) so
   the brass plate sits inside a halo of "lit page" against the
   walnut chrome. The outer drops are still darker for grounding. */
.topnav .btn.solid {
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 200, 0.7),
    inset 0 -1px 0 rgba(40, 18, 2, 0.6),
    0 0 0 1px rgba(201, 154, 74, 0.55),
    0 0 0 3px rgba(244, 236, 218, 0.95),
    0 0 0 4px rgba(201, 154, 74, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 14px 26px rgba(0, 0, 0, 0.30);
}

/* Hover keeps the shimmer paused-feeling — translate up a touch. */
.btn.solid[data-cta="reserve"]:hover,
.btn.solid[data-cta="primary"]:hover,
.topnav .btn.solid:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ---------- Marginalia note (light-paper instances only) ----------
   The note sits on a wrapping <span class="reserve-cta-wrap"> so
   we have a stable anchor regardless of the surrounding flex
   container. The wrapper is inline-flex so the note doesn't
   stretch the line height of its parent. */

.reserve-cta-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}

/* The note: a hand-drawn arrow + a Caveat scribble.
   Positioned to the LEFT of the button so the reader sees the
   note FIRST and the eye flows naturally toward the button. The
   scribble arrows in the SVG curl up-right toward x=144 — when
   the SVG sits left of the button, the arrow heads are already
   pointing at the button (right edge of SVG). No mirror needed.
   On smaller screens the note falls below the button. */
.reserve-cta-wrap .reserve-note {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  pointer-events: none;
  z-index: 1;
  font-family: 'Caveat', cursive;
  color: #5C3618;
  opacity: 0.9;
}
.reserve-cta-wrap .reserve-note svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.reserve-cta-wrap .reserve-note .scribble {
  fill: none;
  stroke: #5C3618;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.reserve-cta-wrap .reserve-note .note-text {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  fill: #5C3618;
  opacity: 0.92;
}

/* Hide the marginalia inside dark chrome (topnav). */
.topnav .reserve-cta-wrap .reserve-note,
[data-reserve-cta-context="dark"] .reserve-cta-wrap .reserve-note {
  display: none;
}

/* On narrow screens, drop the note under the button instead of
   beside it (so the layout doesn't crash sideways). */
@media (max-width: 880px) {
  .reserve-cta-wrap .reserve-note {
    position: relative;
    left: auto;
    top: auto;
    transform: rotate(-2deg) translateY(4px);
    margin-left: 12px;
    width: 200px;
  }
}

/* Reduced motion — kill the shimmer. The frame stays. */
@media (prefers-reduced-motion: reduce) {
  .topnav .btn.solid,
  .btn.solid[data-cta="reserve"],
  .btn.solid[data-cta="primary"] {
    animation: none;
    background-position: 50% 50%;
  }
}