/* ==== Lightbox ==== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(12, 10, 9, 0.9);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8);
  animation: lb-in var(--dur) var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  background: var(--surface);
}
.lightbox-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; border-radius: var(--r-full); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ==== Scroll reveal ==== */
html.js-reveal .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ==== Midnight Pro motion ==== */
/* Soft breathing glow on the primary CTAs — paused when the tab is hidden by
   the browser, killed entirely under reduced motion below */
.offer-card .buy-btn { animation: cta-glow 2.8s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 6px 24px rgba(245, 197, 24, 0.24); }
  50% { box-shadow: 0 6px 34px rgba(245, 197, 24, 0.5); }
}

/* Countdown seconds box ticks with a heartbeat */
#cd-s { animation: cd-tick 1s ease-in-out infinite; }
@keyframes cd-tick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Staggered reveal — motion-effects.js sets --reveal-delay per element */
html.js-reveal .reveal { transition-delay: var(--reveal-delay, 0ms); }

/* Book-cover tilt (driven by motion-effects.js on desktop pointers only) */
.hero-cover .zoom-btn {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--dur) var(--ease-out);
}

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js-reveal .reveal { opacity: 1; transform: none; }
  .sticky-cta { transition: none; }
}