/* ============================================================
   pkgbook.css — cycling CAQA training-package book cover that
   loops through every training package, one by one, inside the
   "Why CAQA Resources" cinematic band (over brand-art.mp4).
   Matches the rendered-shelf book aesthetic: gold Fraunces
   wordmark, jewel-tone cover, gold emblem, warm edge glow.
   ============================================================ */
.cine-pkgbook{
  position:absolute; right:6.5%; top:50%; transform:translateY(-50%);
  z-index:3; width:clamp(188px,20vw,244px);
  display:flex; flex-direction:column; align-items:center; gap:15px;
  pointer-events:none;
}
/* soft dark halo so the featured book always reads over the busy shelf video */
.cine-pkgbook::before{
  content:""; position:absolute; inset:-24% -30% -16%;
  background:radial-gradient(58% 56% at 50% 46%, rgba(4,7,16,.72), rgba(4,7,16,0) 72%);
  z-index:-1;
}
.pb-stage{ perspective:1500px; width:100%; }
.pb-book{
  --cov:#26346E; --cov2:#182456; --gold:#E7C24A;
  position:relative; width:100%; aspect-ratio:1/1.44;
  border-radius:5px 9px 9px 5px;
  background:linear-gradient(150deg,var(--cov),var(--cov2));
  border-left:7px solid rgba(0,0,0,.28);
  box-shadow:
    0 34px 60px -14px rgba(0,0,0,.62),
    0 0 40px 1px rgba(233,196,106,.26),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 42px 0 46px -40px rgba(255,255,255,.18);
  transform:rotateY(-15deg) rotateX(1.5deg); transform-origin:center;
  padding:20px 18px 17px; display:flex; flex-direction:column; color:#fff;
  transition:opacity .48s ease, transform .48s cubic-bezier(.4,0,.2,1),
    background .48s ease, box-shadow .48s ease;
  will-change:opacity,transform;
}
/* thin luminous gold rule just inside the spine edge */
.pb-book::after{
  content:""; position:absolute; left:7px; top:11px; bottom:11px; width:1.5px;
  background:linear-gradient(180deg,transparent,rgba(233,196,106,.55),transparent);
}
.cine-pkgbook.swapping .pb-book{
  opacity:0; transform:rotateY(-30deg) rotateX(1.5deg) translateX(-10px) scale(.985);
}
.cine-pkgbook.swapping .pb-caption{ opacity:.18; }

.pb-brand{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-size:clamp(22px,2.4vw,27px); line-height:1; letter-spacing:.01em;
  color:var(--gold); text-shadow:0 1px 12px rgba(233,196,106,.35);
}
.pb-title{
  margin-top:7px; font-family:"Montserrat",system-ui,sans-serif;
  font-size:12.5px; line-height:1.3; font-weight:600; letter-spacing:.015em;
  color:rgba(255,255,255,.93); min-height:2.5em;
}
.pb-title em{ font-style:normal; color:var(--gold); margin-right:5px; }
.pb-emblem{ flex:1; display:grid; place-items:center; padding:8px 0 4px; }
.pb-emblem svg{
  width:clamp(46px,5.6vw,60px); height:auto;
  filter:drop-shadow(0 2px 10px rgba(233,196,106,.42));
}
.pb-bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.pb-code{
  font-family:"Share Tech Mono",ui-monospace,monospace;
  font-size:clamp(18px,2.1vw,23px); font-weight:700; letter-spacing:.14em;
  color:var(--gold); line-height:1;
}
.pb-tag{
  font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); text-align:right; line-height:1.35;
}
.pb-caption{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.82); text-align:center; max-width:220px; min-height:2.4em;
  transition:opacity .48s ease;
}

@media (max-width:820px){
  /* stack the band on mobile: copy, then the cycling book */
  .cine-artband.cine-artband-v2{ flex-direction:column; }
  .cine-pkgbook{
    position:relative; right:auto; top:auto; transform:none;
    margin:32px auto 0; width:min(216px,62%);
  }
  .cine-pkgbook::before{ inset:-14% -22%; }
}
@media (prefers-reduced-motion:reduce){
  .pb-book{ transition:opacity .3s ease, background .3s ease; transform:rotateY(-15deg); }
  .cine-pkgbook.swapping .pb-book{ transform:rotateY(-15deg); }
}