#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* Magazine viewer styles */
.magazine-img {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  background-color: white;
}

/* Zoom wrappers (zoom value is applied via inline CSS variable) */
.flip-zoom {
  width: 100%;
  height: 100%;
  transform-origin: center top;
  transform: scale(var(--magazine-zoom, 1));
}

.scroll-zoom {
  transform-origin: center top;
  transform: scale(var(--magazine-zoom, 1));
}

/* Magazine container styles */
.magazine-container {
  transition: transform 0.3s ease;
  transform-origin: center center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-scroll {
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.magazine-scroll-container {
  transition: all 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Discrete zoom classes from 50% to 250% (step 10%) */
.zoom-50 { transform: scale(0.5); transform-origin: center top; }
.zoom-60 { transform: scale(0.6); transform-origin: center top; }
.zoom-70 { transform: scale(0.7); transform-origin: center top; }
.zoom-80 { transform: scale(0.8); transform-origin: center top; }
.zoom-90 { transform: scale(0.9); transform-origin: center top; }
.zoom-100 { transform: scale(1); transform-origin: center top; }
.zoom-110 { transform: scale(1.1); transform-origin: center top; }
.zoom-120 { transform: scale(1.2); transform-origin: center top; }
.zoom-130 { transform: scale(1.3); transform-origin: center top; }
.zoom-140 { transform: scale(1.4); transform-origin: center top; }
.zoom-150 { transform: scale(1.5); transform-origin: center top; }
.zoom-160 { transform: scale(1.6); transform-origin: center top; }
.zoom-170 { transform: scale(1.7); transform-origin: center top; }
.zoom-180 { transform: scale(1.8); transform-origin: center top; }
.zoom-190 { transform: scale(1.9); transform-origin: center top; }
.zoom-200 { transform: scale(2); transform-origin: center top; }
.zoom-210 { transform: scale(2.1); transform-origin: center top; }
.zoom-220 { transform: scale(2.2); transform-origin: center top; }
.zoom-230 { transform: scale(2.3); transform-origin: center top; }
.zoom-240 { transform: scale(2.4); transform-origin: center top; }
.zoom-250 { transform: scale(2.5); transform-origin: center top; }

/* Control polish */
.magazine-book .page { border-radius: 8px; overflow: hidden; }
.magazine-book .page-content { transition: transform 220ms ease, box-shadow 220ms ease; }
.magazine-book .page-content:hover { transform: translateY(-4px); }

/* Navigation buttons */
.rounded-full.w-12.h-12 { transition: transform 180ms ease, box-shadow 180ms ease; }
.rounded-full.w-12.h-12:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }

/* Page dots */
.flex.gap-1 .w-2.h-2 { width: 10px; height: 10px; }
.flex.gap-1 .w-2.h-2:hover { transform: scale(1.2); }

/* Placeholder style */
.page-unavailable { background: linear-gradient(180deg, #fff 0%, #fafafa 100%); border: 1px dashed rgba(0,0,0,0.06); }

/* Magazine fold and crease */
.magazine-book { position: relative; }
.magazine-book .flip-item { position: relative; }
.magazine-book::before {
  /* subtle crease down the center — made thinner for a more unified spread */
  content: '';
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  width: 1px;
  height: 96%;
  background: linear-gradient(180deg, rgba(0,0,0,0.035), rgba(0,0,0,0.01));
  pointer-events: none;
}

/* soft page shadow between spreads */
.magazine-book .page { 
  /* reduce outer shadow and tighten the gap between pages to feel like a single bound book */
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  margin: 0 6px;
}
.magazine-book .page.left { transform-origin: left center; }
.magazine-book .page.right { transform-origin: right center; }

/* Subtle page-turn animation */
.page-turn-anim { transition: transform 360ms cubic-bezier(.2,.9,.2,1); }

/* Floating toolbar */
.toolbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border: none;
  cursor: pointer;
  transition: transform 140ms ease, background 120ms ease;
}
.toolbar-btn:hover { transform: translateY(-3px) scale(1.04); }

/* Page tabs */
.page-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 36px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  color: #1f2937;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  z-index: 60;
  padding: 6px 8px;
  writing-mode: vertical-rl;
}

.page-tab.right-page-tab { right: -20px; transform: rotate(180deg) translateY(-50%); }
.page-tab.left-page-tab { left: -20px; transform: translateY(-50%); }
/* Side page tabs */
.page-unavailable { 
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  border: 1px dashed rgba(0,0,0,0.04);
  padding: 8px;
}

/* Fullscreen tweaks: allow the book to occupy most of the viewport while keeping readable margins */
.magazine-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
}
.magazine-fullscreen .magazine-book {
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 120px);
}
.magazine-fullscreen .flip-zoom { display:flex; align-items:center; justify-content:center; }

/* Programme page specific styles */
.programme-page .time-badge { background: linear-gradient(180deg, #fff7ed, #fff1e6); color: #92400e; }

/* Print styles to make Programme printable and clean */
@media print {
  body, html { background: white; }
  .rounded-3xl, .rounded-2xl, .rounded-xl { border-radius: 0 !important; }
  .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }
  .programme-page { padding: 0 !important; }
  .programme-page .p-8, .programme-page .p-6, .programme-page .p-12 { padding: 0.5rem !important; }
  .no-print { display: none !important; }
}


