/* covers-3d.css — dependency-free CSS-3D book covers for GTAVI INSIDER (library.html)
   Built by covers-3d.js: wraps an <img> in .cg3d-scene > .cg3d-idle > .cg3d-book
   and appends .cg3d-spine / .cg3d-pages / .cg3d-sheen for depth. No deps, no JS animation. */

.cg3d-scene {
  display: block;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  --cg3d-t: 34px; /* book thickness */
}

.cg3d-idle { transform-style: preserve-3d; }

.cg3d-book {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.8,.3,1);
}

.cg3d-book > img.cg3d-face {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  backface-visibility: hidden;
}

/* Left spine — dark neon-noir gradient */
.cg3d-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--cg3d-t) / -2);
  width: var(--cg3d-t);
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, #060310 0%, #2b1440 35%, #131022 60%, #050309 100%);
  box-shadow: inset 0 0 14px rgba(0,0,0,.75);
  pointer-events: none;
}

/* Right page block — thin paper stripes */
.cg3d-pages {
  position: absolute;
  top: 2px; bottom: 2px;
  right: calc(var(--cg3d-t) / -2);
  width: calc(var(--cg3d-t) - 2px);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #efe9da 0 2px, #c9c1ad 2px 3px);
  pointer-events: none;
}

/* Light sheen sweeping the front cover as the pointer moves */
.cg3d-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,.30) 48%,
    rgba(255,255,255,.06) 52%,
    transparent 65%);
  background-size: 230% 100%;
  background-position: var(--cg3d-sx, 50%) 0;
  opacity: var(--cg3d-so, 0);
  transition: opacity .3s ease;
  mix-blend-mode: screen;
}

/* Slow idle sway while the book is on screen (class added by IntersectionObserver) */
.cg3d-scene.cg3d-on .cg3d-idle { animation: cg3d-sway 16s ease-in-out infinite; }
.cg3d-scene.cg3d-on .cg3d-book { filter: drop-shadow(0 26px 34px rgba(0,0,0,.45)); }

@keyframes cg3d-sway {
  0%, 100% { transform: rotateY(-9deg); }
  50%      { transform: rotateY(9deg); }
}

/* Honor reduced motion: static covers, no sway, no tilt (JS also skips tilt) */
@media (prefers-reduced-motion: reduce) {
  .cg3d-scene.cg3d-on .cg3d-idle { animation: none; }
  .cg3d-scene.cg3d-on .cg3d-book { filter: none; }
}