/* The book: six CSS faces in a preserve-3d box.
   No render is used as a texture — the supplied artwork had misspelt editor names and a
   garbled spine baked in, so every face is rebuilt from the flyer's wording. The only raster
   is the textless chip crop; the disc behind it is CSS so its edge stays crisp under rotation.
   Loaded only by the sign-in and receipt pages. */

.bookstage {
  --bk-w: 232px;  --bk-h: 332px;  --bk-d: 38px;   /* all even: 50% of each is an integer, so no
                                                     face lands on a half device-pixel (seams) */
  --bk-u: 1.184;                                  /* type scale knob = W / 196, the size the copy was calibrated at */

  --bk-navy-1: #1b3f74; --bk-navy-2: #16335f; --bk-navy-3: #12294d;
  --bk-navy-4: #0d2044; --bk-navy-5: #0a182f;
  --gilt-1: #f7e9bb; --gilt-2: #e2c273; --gilt-3: #b8912f;
  --gilt-4: #7c5a1c; --gilt-5: #4a340d;

  position: relative;
  width: 292px; height: 416px;
  perspective: 1430px;              /* on the stage, never a perspective() inside the box */
  perspective-origin: 50% 38%;      /* eye above centre, so the head of the book shows */
  pointer-events: none;             /* the halo must not eat clicks meant for the form */
  flex: none;
}

.bk-glow {
  position: absolute; inset: -6% -4% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(206, 247, 158, 0.055), rgba(206, 247, 158, 0) 70%);
}

.bk-float, .bk-spin { position: absolute; transform-style: preserve-3d; }
.bk-float { inset: 0; }
.bk-spin {
  width: var(--bk-w); height: var(--bk-h);
  left: 50%; top: 50%;
  margin: calc(var(--bk-h) / -2) 0 0 calc(var(--bk-w) / -2);
  transform: rotateX(-6deg) rotateY(24deg);   /* the resting pose; JS opts into the spin */
  pointer-events: auto; cursor: grab;
  touch-action: pan-y;                        /* keep vertical scrolling on touch */
  -webkit-user-select: none; user-select: none;
  will-change: transform;
}
.bk-spin.is-drag { cursor: grabbing; }

.bk-face {
  position: absolute; left: 50%; top: 50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  overflow: hidden;                            /* safe: a face is flat, not a 3D context */
  -webkit-font-smoothing: antialiased;
}

.bk-front, .bk-back { width: var(--bk-w); height: var(--bk-h); }
.bk-spine, .bk-fore { width: var(--bk-d); height: var(--bk-h); }
.bk-top, .bk-bot    { width: var(--bk-w); height: var(--bk-d); }

.bk-front { transform: translate(-50%, -50%) translateZ(calc(var(--bk-d) / 2)); }
.bk-back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--bk-d) / 2)); }
.bk-spine { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--bk-w) / 2)); }
.bk-fore  { transform: translate(-50%, -50%) rotateY(90deg)  translateZ(calc(var(--bk-w) / 2)); }
.bk-top   { transform: translate(-50%, -50%) rotateX(90deg)  translateZ(calc(var(--bk-h) / 2)); }
.bk-bot   { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--bk-h) / 2)); }

/* ---------- cloth ---------- */
.bk-front, .bk-back {
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 90% at 30% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    linear-gradient(118deg, var(--bk-navy-1) 0%, var(--bk-navy-2) 36%, var(--bk-navy-3) 72%, var(--bk-navy-4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -22px 34px -18px rgba(0,0,0,.55);
}
.bk-back {   /* literal darker stops, never filter: brightness — that would flatten the 3D box */
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(118deg, #17356a 0%, #122a52 40%, #0e2244 76%, var(--bk-navy-5) 100%);
}
.bk-spine {
  background: linear-gradient(90deg, var(--bk-navy-5) 0%, #10264a 26%, #16325c 50%, #102549 76%, var(--bk-navy-5) 100%);
  box-shadow: inset 3px 0 4px -2px rgba(0,0,0,.6), inset -3px 0 4px -2px rgba(0,0,0,.6);
}

/* ---------- gilt page block ---------- */
.bk-fore, .bk-top, .bk-bot {
  box-shadow: inset 0 0 0 2.5px #14305a,          /* board overhang, also hides any face seam */
              inset 0 0 7px 3px rgba(0,0,0,.55);
}
.bk-fore {
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.15) 0 .5px, rgba(0,0,0,.12) .5px 1.25px, rgba(255,255,255,0) 1.25px 2.5px),
    linear-gradient(to bottom, var(--gilt-1) 0%, var(--gilt-2) 20%, #cfa953 52%, var(--gilt-3) 84%, var(--gilt-4) 100%),
    linear-gradient(to right, var(--gilt-4) 0%, var(--gilt-2) 26%, var(--gilt-1) 50%, var(--gilt-3) 76%, var(--gilt-4) 100%);
}
.bk-top {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 .5px, rgba(0,0,0,.11) .5px 1.25px, rgba(255,255,255,0) 1.25px 2.5px),
    linear-gradient(to bottom, var(--gilt-1) 0%, var(--gilt-2) 38%, #f0dc9e 60%, var(--gilt-3) 88%, var(--gilt-4) 100%),
    linear-gradient(to right, var(--gilt-3) 0%, #eed79a 24%, var(--gilt-1) 44%, var(--gilt-2) 68%, var(--gilt-4) 100%);
}
.bk-bot {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 .5px, rgba(0,0,0,.17) .5px 1.25px, rgba(255,255,255,0) 1.25px 2.5px),
    linear-gradient(to bottom, var(--gilt-4) 0%, #8a6520 30%, var(--gilt-3) 58%, #5e4211 100%),
    linear-gradient(to right, var(--gilt-5) 0%, #8a6520 30%, #a8853a 52%, #6b4d16 80%, var(--gilt-5) 100%);
}

/* ---------- cover copy, drawn at 2x and scaled down so Chrome bakes a sharp texture ---------- */
.bk-copy {
  position: absolute; left: 0; top: 0;
  width: calc(var(--bk-w) * 2); height: calc(var(--bk-h) * 2);
  transform: scale(.5); transform-origin: 0 0;
  font-synthesis: none;
  color: #fff;
}
.bk-copy > * { position: absolute; }

.bk-band {
  left: 29%; width: 48%; top: 2.6%; height: 8%;
  display: flex; align-items: center; justify-content: center; border-radius: 2px;
  background: linear-gradient(180deg, #f4f5f6, #d9dcdf 55%, #b9bec3);
  color: #0b2a5c; font-size: calc(17px * var(--bk-u)); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.bk-band b { font-weight: 700; }
.bk-band span { font-weight: 600; }

.bk-disc {
  left: 3%; width: 94%; top: 11.6%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(38,74,128,.92) 0%, rgba(19,42,80,.86) 46%, rgba(11,26,54,.55) 78%, rgba(11,26,54,0) 100%);
}

.bk-title {
  left: 5%; width: 90%; top: 16%;
  text-align: center; text-transform: uppercase; line-height: 1.06;
  transform: scaleX(.87);            /* Segoe UI has no width axis; fake the condensed cut */
  transform-origin: 50% 50%;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.bk-title .t1, .bk-title .t3 { display: block; font-weight: 600; letter-spacing: .05em; }
.bk-title .t1 { font-size: calc(21px * var(--bk-u)); }
.bk-title .t2 { display: block; font-weight: 700; letter-spacing: .035em; font-size: calc(32px * var(--bk-u)); margin: calc(2px * var(--bk-u)) 0; }
.bk-title .t3 { font-size: calc(19px * var(--bk-u)); margin-top: calc(3px * var(--bk-u)); }

.bk-art {
  left: 14%; width: 72%; top: 45%; height: auto;
  display: block; border-radius: 3px;
  opacity: .97;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 58%, transparent 100%);
}

.bk-strap {
  left: 11%; width: 78%; top: 69.5%;
  text-align: center; text-transform: uppercase; font-weight: 600;
  font-size: calc(14px * var(--bk-u)); letter-spacing: .06em; line-height: 1.32;
  color: #eaf1fb; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bk-eds {
  left: 13%; width: 74%; top: 81%;
  text-align: center; font-size: calc(16px * var(--bk-u)); line-height: 1.38; color: #dfe8f5;
}
.bk-eds b { display: block; font-weight: 600; font-size: calc(13px * var(--bk-u)); letter-spacing: .12em; color: #b9c9e0; margin-bottom: calc(3px * var(--bk-u)); }

/* sheen lives INSIDE the flat front face; a coplanar 7th face would z-flicker */
.bk-sheen {
  position: absolute; inset: -10% -60%; pointer-events: none;
  background: linear-gradient(102deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.05) 53%, rgba(255,255,255,0) 66%);
  opacity: .85;
}

/* ---------- back and spine copy ---------- */
.bk-blurb {
  position: absolute; left: 11%; right: 11%; top: 20%;
  font-size: calc(7.6px * var(--bk-u)); line-height: 1.5; color: #e6edf8;
  text-align: left;
}
.bk-pub {
  position: absolute; left: 0; right: 0; bottom: 7%;
  text-align: center; font-size: calc(7px * var(--bk-u)); letter-spacing: .04em; color: #cfdcef;
}
.bk-pub b { font-weight: 700; }

.bk-spine-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(9px * var(--bk-u)) 0;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.bk-spine-t {
  text-transform: uppercase; font-weight: 700;
  font-size: calc(7.4px * var(--bk-u)); letter-spacing: .04em; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.bk-spine-e { text-transform: uppercase; font-size: calc(6px * var(--bk-u)); letter-spacing: .06em; color: #c3d2e6; }

/* ---------- shadow ---------- */
.bk-shadow {
  position: absolute; left: 50%; bottom: 8px; width: 242px; height: 32px;
  transform: translateX(-50%) scaleX(.98);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.40) 42%, rgba(0,0,0,.13) 68%, rgba(0,0,0,0) 100%);
  opacity: .34;
}

/* ---------- motion, added by book.js so the global reduced-motion rule cannot collapse it ---------- */
@keyframes bk-spin   { from { transform: rotateX(-6deg) rotateY(0deg); }
                       to   { transform: rotateX(-6deg) rotateY(360deg); } }
@keyframes bk-float  { from { transform: translate3d(0, 6px, 0); }
                       to   { transform: translate3d(0, -6px, 0); } }
@keyframes bk-sheen  { 0%   { transform: translateX(0);     opacity: .85; }
                       12%  { transform: translateX(150%);  opacity: 0; }
                       88%  { transform: translateX(-150%); opacity: 0; }
                       100% { transform: translateX(0);     opacity: .85; } }
@keyframes bk-shadow { 0%   { transform: translateX(-50%) scaleX(1);   opacity: .34; }
                       25%  { transform: translateX(-50%) scaleX(.80); opacity: .42; }
                       50%  { transform: translateX(-50%) scaleX(.36); opacity: .55; }
                       75%  { transform: translateX(-50%) scaleX(.80); opacity: .42; }
                       100% { transform: translateX(-50%) scaleX(1);   opacity: .34; } }

.bk-live .bk-spin   { animation: bk-spin 18s linear -1200ms infinite; }
.bk-live .bk-float  { animation: bk-float 7.3s cubic-bezier(.45,0,.55,1) infinite alternate; }
.bk-live .bk-sheen  { animation: bk-sheen 18s linear -1200ms infinite; }
.bk-live .bk-shadow { animation: bk-shadow 9s linear -600ms infinite; }

/* ---------- small static variant, for the receipt ---------- */
.bookstage--still {
  --bk-w: 132px; --bk-h: 188px; --bk-d: 22px; --bk-u: .673;
  width: 172px; height: 244px;
  perspective: 810px;
}
.bookstage--still .bk-shadow { width: 138px; height: 20px; opacity: .28; }
.bookstage--still .bk-strap, .bookstage--still .bk-eds { display: none; }

/* ---------- reduced motion: must beat the global *{animation-duration:.01ms!important} ---------- */
@media (prefers-reduced-motion: reduce) {
  .bookstage .bk-spin, .bookstage .bk-float,
  .bookstage .bk-sheen, .bookstage .bk-shadow { animation: none !important; }
  .bookstage .bk-spin   { transform: rotateX(-6deg) rotateY(24deg) !important; }
  .bookstage .bk-float  { transform: none !important; }
  .bookstage .bk-sheen  { transform: translateX(-18%) !important; opacity: .7 !important; }
  .bookstage .bk-shadow { transform: translateX(-50%) scaleX(.98) !important; opacity: .34 !important; }
}

@media (max-width: 1365px) {   /* measured: below 1366 the text column hits its floor and the book spills */
  .bookstage:not(.bookstage--still) { display: none; }
}
@media print { .bookstage { display: none !important; } }