/* ═══════════════════════════════════════════════
   ABL MAGAZINE WHEEL — wheel.css
   ═══════════════════════════════════════════════ */

.ablmw-root {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #04050d;
  padding: 48px 0 32px;
  user-select: none;
  -webkit-user-select: none;
}

/* ── SCENE ── */
.ablmw-scene {
  position: relative;
  width: 100%;
  height: 480px;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CAROUSEL RING ── */
.ablmw-carousel {
  position: relative;
  width: 220px;
  height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.16,1,0.3,1);
  cursor: grab;
}
.ablmw-carousel.grabbing { cursor: grabbing; }

/* ── EACH MAGAZINE ITEM ── */
.ablmw-item {
  position: absolute;
  width: 220px;
  height: 320px;
  top: 0; left: 0;
  transform-style: preserve-3d;
  /* JS sets transform */
  transition: transform 0.72s cubic-bezier(0.16,1,0.3,1), opacity 0.55s;
}

.ablmw-cover-link {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  pointer-events: none; /* only active on center item — JS toggles */
}
.ablmw-item.is-active .ablmw-cover-link { pointer-events: auto; }

/* ── COVER BOOK ── */
.ablmw-cover {
  position: relative;
  width: 220px;
  height: 320px;
  transform-style: preserve-3d;
  border-radius: 3px 8px 8px 3px;
  box-shadow: -6px 6px 40px rgba(0,0,0,.9), 2px 0 8px rgba(0,0,0,.5);
}

/* SPINE */
.ablmw-spine {
  position: absolute;
  left: -18px; top: 0;
  width: 18px; height: 320px;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
  border-radius: 3px 0 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(-90deg) translateX(-9px);
  transform-origin: right center;
  backface-visibility: hidden;
  overflow: hidden;
}
.ablmw-spine-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  max-height: 280px;
  text-overflow: ellipsis;
}

/* FRONT FACE */
.ablmw-front {
  position: absolute;
  inset: 0;
  border-radius: 3px 8px 8px 3px;
  overflow: hidden;
  background: #0a0a1e;
}

/* Cover image */
.ablmw-cover-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: transform 0.5s ease;
}
.ablmw-item.is-active .ablmw-cover-img {
  transform: scale(1.04);
}

/* Gradient overlay */
.ablmw-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.1) 35%,
      rgba(0,0,0,.05) 55%,
      rgba(0,0,0,.75) 78%,
      rgba(0,0,0,.96) 100%
    );
}

/* Top section */
.ablmw-cover-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 10px 12px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ablmw-masthead {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 3px;
}
.ablmw-sub {
  font-size: 7px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ablmw-barcode {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin-top: 4px;
}
.ablmw-barcode::before {
  content: '||||| ||| || |||| ||| || |||||';
  font-size: 6px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.2);
}

/* Category label */
.ablmw-cover-cat {
  position: absolute;
  top: 72px; left: 10px;
  background: #ff2247;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}

/* Bottom section */
.ablmw-cover-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 12px 12px;
}
.ablmw-cover-headline {
  font-family: 'Georgia', serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.ablmw-cover-date {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ── LEFT EDGE LIGHT EFFECT ── */
.ablmw-front::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 12px; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ── PAGE CURL (center mag only) ── */
.ablmw-item.is-active .ablmw-cover::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 60%);
  border-radius: 0 0 8px 0;
  pointer-events: none;
  z-index: 3;
}

/* ── FLOOR REFLECTION ── */
.ablmw-floor {
  position: absolute;
  bottom: -160px; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom,
    rgba(4,5,13,.65) 0%,
    rgba(4,5,13,.95) 100%
  );
  pointer-events: none;
  z-index: 5;
}



/* ── ACTIVE LABEL ── */
.ablmw-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding: 0 16px;
  flex-wrap: wrap;
  text-align: center;
}
.ablmw-label-cat {
  font-family: 'Georgia', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}
.ablmw-label-count {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  letter-spacing: 1px;
}
.ablmw-label-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff2247;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,34,71,.3);
  transition: color .2s, border-color .2s;
}
.ablmw-label-link:hover {
  color: #ffd166;
  border-color: rgba(255,209,102,.4);
}

/* ── AMBIENT GLOW UNDER CENTER MAG ── */
.ablmw-scene::after {
  content: '';
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 40px;
  background: radial-gradient(ellipse, rgba(255,34,71,.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── MOBILE ── */
@media (max-width: 600px) {
  .ablmw-scene {
    height: 360px;
    perspective: 900px;
  }
  .ablmw-carousel,
  .ablmw-item,
  .ablmw-cover { width: 170px; height: 248px; }
  .ablmw-masthead { font-size: 12px; letter-spacing: 3px; }
  .ablmw-cover-headline { font-size: 10.5px; }
  .ablmw-cover-top { padding: 8px 10px 6px; }
  .ablmw-cover-bottom { padding: 0 10px 10px; }
  .ablmw-cover-cat { font-size: 7px; top: 58px; }
  .ablmw-spine { left: -14px; width: 14px; }
  .ablmw-scene::after { bottom: 30px; }
}

@media (max-width: 380px) {
  .ablmw-carousel,
  .ablmw-item,
  .ablmw-cover { width: 148px; height: 216px; }
  .ablmw-scene { height: 310px; perspective: 750px; }
  .ablmw-masthead { font-size: 10px; letter-spacing: 2.5px; }
}