/* ============================================================
   Book One teaser — a quiet, gilded companion to the primary navigation.

   Theme-driven. Every colour reads a custom property and each theme sets those
   properties in one block below. This file previously hardcoded a deep green
   face with no theme handling at all, so the banner stayed dark green on the
   warm brown Desert page and on the white Light page.

   The book itself keeps its literal colours: it is a picture of a real object,
   like the mascot, so it does not repaint per theme. Only the shadow it casts
   and the surface it sits on follow the theme.

   Adding a theme means adding one block of --eb-* values. Nothing below has to
   be touched, and no theme can be missed silently.
   ============================================================ */

/* ---- dark: the brand theme, and the fallback for anything unlisted ---- */
:root {
  --eb-face: linear-gradient(115deg, rgba(18, 44, 38, .93), rgba(10, 27, 23, .92));
  --eb-border: rgba(230, 184, 97, .28);
  --eb-wash: rgba(245, 208, 140, .2);
  --eb-sheen: rgba(245, 208, 140, .055);
  --eb-shadow: 0 22px 52px -28px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .055) inset;
  --eb-accent-glow: 0 0 18px rgba(230, 184, 97, .2);
  --eb-cta-ink: #1a0f00;
  --eb-cta-glow: rgba(230, 184, 97, .65);
  --eb-book-shadow: rgba(0, 0, 0, .34);
  --eb-book-spine: #1c3c32;
  --eb-close: rgba(250, 245, 232, .62);
  --eb-close-hover-bg: rgba(255, 255, 255, .07);
}

/* ---- light. A white surface with a neutral hairline and a soft lift, which
        is how every other card behaves on this theme. The CTA keeps the gold
        gradient but takes cream ink, matching .btn-primary in styles.css. ---- */
html[data-theme="light"] {
  --eb-face: linear-gradient(115deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .94));
  --eb-border: rgba(0, 0, 0, .09);
  --eb-wash: rgba(168, 123, 46, .07);
  --eb-sheen: rgba(168, 123, 46, .04);
  --eb-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(0, 0, 0, .18);
  --eb-accent-glow: none;
  --eb-cta-ink: #faf5e8;
  --eb-cta-glow: rgba(168, 123, 46, .3);
  --eb-book-shadow: rgba(0, 0, 0, .22);
  --eb-book-spine: rgba(0, 0, 0, .3);
  --eb-close: rgba(24, 24, 27, .5);
  --eb-close-hover-bg: rgba(0, 0, 0, .05);
}

/* ---- desert. The page canvas is warm brown, so the banner face is brown too.
        A green bar on this page was the bug. ---- */
html[data-theme="default"] {
  --eb-face: linear-gradient(115deg, rgba(63, 43, 25, .93), rgba(31, 20, 10, .92));
  --eb-border: rgba(230, 184, 77, .28);
  --eb-wash: rgba(240, 202, 110, .2);
  --eb-sheen: rgba(240, 202, 110, .055);
  --eb-shadow: 0 22px 52px -28px rgba(18, 11, 3, .9), 0 1px 0 rgba(245, 230, 204, .06) inset;
  --eb-accent-glow: 0 0 18px rgba(230, 184, 77, .22);
  --eb-cta-ink: #1a0f00;
  --eb-cta-glow: rgba(230, 184, 77, .6);
  --eb-book-shadow: rgba(18, 11, 3, .4);
  --eb-book-spine: #4a341f;
  --eb-close: rgba(245, 230, 204, .62);
  --eb-close-hover-bg: rgba(245, 230, 204, .08);
}

.ebook-claim-banner {
  position: fixed;
  z-index: 99;
  top: calc(var(--nav-top, 14px) + 70px);
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  color: var(--cream, #faf5e8);
  transform: translate(-50%, 0);
  opacity: 1;
  transition:
    opacity .28s ease,
    transform .42s var(--ease-smooth),
    visibility 0s linear 0s;
  animation: ebookCompanionIn .62s var(--ease-pop) .12s both;
}

/* Keep the fixed companion clear of both the navigation and the first hero
   content on small screens. The extra space collapses when the banner closes. */
.has-ebook-banner .hero { padding-top: 178px; }

.ebook-claim-banner.is-scrolled-away {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -18px) scale(.985);
  transition-delay: 0s, 0s, .42s;
}

.ebook-claim-banner__inner {
  position: relative;
  min-height: 58px;
  padding: 8px 52px 8px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--eb-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% -90%, var(--eb-wash), transparent 52%),
    var(--eb-face);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--eb-shadow);
}

.ebook-claim-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, var(--eb-sheen) 48%, transparent 72%);
}

.ebook-claim-banner__book {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 54px;
  margin: -5px 0 -5px -8px;
  perspective: 420px;
  filter: drop-shadow(8px 10px 8px var(--eb-book-shadow));
  transform: rotate(-2deg);
}

.ebook-claim-banner__pages,
.ebook-claim-banner__cover {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 32px;
  height: 51px;
  border-radius: 1px 4px 4px 1px;
  transform: rotateY(-12deg);
  transform-origin: left center;
}

.ebook-claim-banner__pages {
  left: 8px;
  top: 3px;
  background: repeating-linear-gradient(90deg, #d6c9aa 0 1px, #f8eed5 1px 3px);
}

.ebook-claim-banner__cover {
  z-index: 1;
  overflow: hidden;
  background: #f7f0db;
  box-shadow: -2px 2px 0 var(--eb-book-spine), 5px 7px 12px -7px rgba(0,0,0,.9);
}

.ebook-claim-banner__cover::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.42), transparent);
}

.ebook-claim-banner__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ebook-claim-banner__copy {
  position: relative;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--cream, #faf5e8);
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.ebook-claim-banner__copy em {
  color: var(--gold, #e6b861);
  font-style: normal;
  text-shadow: var(--eb-accent-glow);
}

.ebook-claim-banner__cta {
  position: relative;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--eb-cta-ink);
  /* De-bevelled to match .btn-primary in styles.css: the white inset line, the
     dark inset line and the 0 2px 0 lip underneath are the banned raised-plastic
     recipe. Gold gradient plus its own glow, nothing moulded. */
  background: linear-gradient(180deg, var(--gold-2, #f5d08c) 0%, var(--gold-deep, #b6812f) 100%);
  box-shadow: 0 12px 30px -10px var(--eb-cta-glow);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  will-change: transform;
  transition: transform .24s var(--ease-bounce), box-shadow .2s ease;
}

.ebook-claim-banner__cta svg {
  transition: transform .28s var(--ease-bounce);
}
.ebook-claim-banner__cta-short { display: none; }

.ebook-claim-banner__cta::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -35%;
  width: 25%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.68);
  filter: blur(2px);
  transition: left .55s var(--ease-smooth);
}

.ebook-claim-banner__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -10px var(--eb-cta-glow);
}
.ebook-claim-banner__cta:hover::after { left: 118%; }
.ebook-claim-banner__cta:hover svg { transform: translateX(3px); }
/* settles back to rest on press rather than sinking into a lip that no longer exists */
.ebook-claim-banner__cta:active { transform: translateY(0); box-shadow: 0 8px 20px -10px var(--eb-cta-glow); }
.ebook-claim-banner__cta:focus-visible,
.ebook-claim-banner__close:focus-visible { outline: 2px solid var(--gold, #f5d08c); outline-offset: 3px; }

.ebook-claim-banner__close {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--eb-close);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 19px;
  transform: translateY(-50%);
  transition: color .2s ease, background .2s ease;
}

.ebook-claim-banner__close:hover { color: var(--cream, #faf5e8); background: var(--eb-close-hover-bg); }

@keyframes ebookCompanionIn {
  from { opacity: 0; transform: translate(-50%, -14px) scale(.98); }
}

@media (max-width: 820px) {
  .has-ebook-banner .hero { padding-top: 188px; }
  .ebook-claim-banner { top: calc(var(--nav-top, 14px) + 70px); width: calc(100vw - 24px); }
  .ebook-claim-banner__inner { min-height: 62px; padding: 8px 46px 8px 14px; gap: 10px; }
  .ebook-claim-banner__copy { max-width: 52%; font-size: 14px; }
  .ebook-claim-banner__cta { min-height: 44px; padding: 10px 13px; font-size: 11px; }
  .ebook-claim-banner__close { right: 6px; width: 38px; height: 38px; }
  .ebook-claim-banner__book { flex-basis: 36px; width: 36px; height: 49px; margin-left: -7px; }
  .ebook-claim-banner__pages,
  .ebook-claim-banner__cover { width: 29px; height: 46px; }
}

@media (max-width: 430px) {
  .has-ebook-banner .hero { padding-top: 194px; }
  .ebook-claim-banner__copy { min-width: 0; max-width: none; flex: 1 1 auto; font-size: 12.5px; line-height: 1.25; }
  .ebook-claim-banner__cta { gap: 6px; padding-inline: 11px; font-size: 10.5px; }
  .ebook-claim-banner__cta-full { display: none; }
  .ebook-claim-banner__cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .ebook-claim-banner,
  .ebook-claim-banner__cta,
  .ebook-claim-banner__cta svg { animation: none; transition: none; }
  .ebook-claim-banner__cta::after { display: none; }
  .ebook-claim-banner.is-scrolled-away { transform: translate(-50%, 0); }
}