/* "Tvoj plan za 21 dan": 3D knjiga sa spiralom (stranica knjige + pop-up) */

.mbb {
  --bw: 420px;
  --bh: calc(var(--bw) / 1.5);
  --bt: calc(var(--bw) * 0.042);
  --rx: 56deg;
  --rz: -30deg;
  --shift: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  perspective: calc(var(--bw) * 4.6);
  perspective-origin: 50% 35%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mbb-scene,
.mbb-float,
.mbb-book,
.mbb-leaf,
.mbb-coils {
  transform-style: preserve-3d;
}

.mbb-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotateX(var(--rx)) rotateZ(var(--rz)) scale3d(var(--zoom, 1), var(--zoom, 1), var(--zoom, 1));
  transition: transform 2.2s cubic-bezier(0.55, 0.05, 0.2, 1);
}

.mbb-float {
  position: absolute;
  inset: 0;
  animation: mbb-float 6.5s ease-in-out infinite;
}

.mbb.is-still .mbb-float { animation: none; }

@keyframes mbb-float {
  0%, 100% { transform: translateZ(calc(var(--bt) * 1.2)); }
  50% { transform: translateZ(calc(var(--bt) * 2.4)); }
}

.mbb-book {
  position: absolute;
  left: calc(var(--bw) / -2);
  top: calc(var(--bh) / -2);
  width: var(--bw);
  height: var(--bh);
  transform: translateX(var(--shift));
  transition: transform 1.1s cubic-bezier(0.5, 0.05, 0.2, 1);
}

.mbb.is-open { --shift: calc(var(--bw) / 2); }

/* Senka na "stolu" ostaje dole dok knjiga lebdi */
.mbb-ground {
  position: absolute;
  left: calc(var(--bw) / -2 - var(--bw) * 0.08);
  top: calc(var(--bh) / -2 - var(--bh) * 0.06);
  width: calc(var(--bw) * 1.16);
  height: calc(var(--bh) * 1.14);
  border-radius: 6%;
  background: rgba(0, 0, 0, 0.62);
  filter: blur(calc(var(--bw) * 0.045));
  transform: translateX(var(--shift)) translateZ(-1px);
  transition: transform 1.1s cubic-bezier(0.5, 0.05, 0.2, 1), width 1.1s cubic-bezier(0.5, 0.05, 0.2, 1), left 1.1s cubic-bezier(0.5, 0.05, 0.2, 1);
  animation: mbb-ground 6.5s ease-in-out infinite;
}

.mbb.is-open .mbb-ground {
  left: calc(var(--bw) * -1.5 - var(--bw) * 0.06);
  width: calc(var(--bw) * 2.12);
}

.mbb.is-still .mbb-ground { animation: none; }

@keyframes mbb-ground {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.62; }
}

/* Blok strana: ivice sa linijama papira */
.mbb-edge {
  position: absolute;
  background-color: #efece5;
}

.mbb-edge-r,
.mbb-edge-l {
  top: 0;
  width: var(--top, var(--bt));
  height: var(--bh);
  transform-origin: 0 50%;
  background-image: repeating-linear-gradient(90deg, #f7f5f0 0 1px, #d9d4c9 1px 1.7px);
}

.mbb-edge-r { left: var(--bw); transform: rotateY(-90deg); }
.mbb-edge-l { left: 0; transform: rotateY(-90deg); background-color: #e2ded5; }

.mbb-edge-b,
.mbb-edge-t {
  left: 0;
  width: var(--bw);
  height: var(--top, var(--bt));
  transform-origin: 50% 0;
  background-image: repeating-linear-gradient(0deg, #f7f5f0 0 1px, #d9d4c9 1px 1.7px);
}

.mbb-edge-b { top: var(--bh); transform: rotateX(90deg); }
.mbb-edge-t { top: 0; transform: rotateX(90deg); background-color: #e2ded5; }

/* Zadnja korica i vrh bloka (desna strana kad se prelista sve iz uzorka) */
.mbb-base,
.mbb-rest {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bw);
  height: var(--bh);
  overflow: hidden;
}

.mbb-base { background: #f4f2ee; transform: translateZ(0); }

.mbb-rest {
  background: #fbfaf7;
  transform: translateZ(var(--rest-z));
}

/* Listovi */
.mbb-leaf {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bw);
  height: var(--bh);
  transform-origin: 0 50%;
  transform: translateZ(var(--z)) rotateY(var(--ry, 0deg));
  transition: transform 1s cubic-bezier(0.42, 0.03, 0.22, 1);
}

/* Samo podizanje strane, bez okretanja (miš ili nagoveštaj), ide brže */
.mbb-leaf.is-lift { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.35, 1); }

.mbb-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fbfaf7;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mbb-back { transform: rotateY(180deg); }

.mbb-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Rupe za spiralu i senka u pregibu */
.mbb-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle calc(var(--bw) * 0.0072) at 50% 50%, #2a2622 88%, transparent 100%) calc(var(--bw) * 0.012) 0 / calc(var(--bw) * 0.024) calc(var(--bh) / var(--coils)) repeat-y,
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 9%);
}

.mbb-back::before {
  background:
    radial-gradient(circle calc(var(--bw) * 0.0072) at 50% 50%, #2a2622 88%, transparent 100%) calc(100% - var(--bw) * 0.012) 0 / calc(var(--bw) * 0.024) calc(var(--bh) / var(--coils)) repeat-y,
    linear-gradient(270deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 9%);
}

.mbb-leaf.is-cover .mbb-front::before {
  background:
    radial-gradient(circle calc(var(--bw) * 0.0072) at 50% 50%, #2a2622 88%, transparent 100%) calc(var(--bw) * 0.012) 0 / calc(var(--bw) * 0.024) calc(var(--bh) / var(--coils)) repeat-y;
}

/* Sjaj korice */
.mbb-leaf.is-cover .mbb-front::after {
  content: "";
  position: absolute;
  inset: -10% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 58%);
  mix-blend-mode: soft-light;
  transform: translateX(-70%);
}

.mbb.is-sheen .mbb-leaf.is-cover .mbb-front::after {
  animation: mbb-sheen 2.6s cubic-bezier(0.5, 0, 0.3, 1) both;
}

@keyframes mbb-sheen {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}

/* Senčenje lista dok se okreće */
.mbb-leaf.is-turning .mbb-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 70%);
  animation: mbb-turn-shade 1s ease-in-out both;
}

@keyframes mbb-turn-shade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Spirala: metalne navojke kroz rupe */
.mbb-coils { position: absolute; inset: 0; pointer-events: none; }

.mbb-coil {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  border-color: #f2f4f7 #c3c8cf #6c727a #9aa0a8;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

/* Završni panel posle uzorka strana */
.mbb-rest-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 8% 12%;
  text-align: center;
  color: #1f3f52;
  font-family: Manrope, sans-serif;
  font-size: calc(var(--bw) * 0.034);
  line-height: 1.35;
  background:
    radial-gradient(circle at 18% 22%, rgba(221, 177, 34, 0.18), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(213, 110, 189, 0.16), transparent 40%),
    #fbfaf7;
}

.mbb-rest-panel strong {
  font-family: Lexend, sans-serif;
  font-weight: 800;
  font-size: 2.1em;
  line-height: 1;
  color: #4484a5;
}

.mbb-dots { display: inline-flex; gap: 0.45em; }
.mbb-dots i { width: 0.7em; height: 0.7em; border-radius: 50%; display: block; }
.mbb-dots i:nth-child(1) { background: #ddb122; }
.mbb-dots i:nth-child(2) { background: #d56ebd; }
.mbb-dots i:nth-child(3) { background: #769c3a; }

/* Ulazak na scenu. Providnost ide na koren, nikad na scenu: opacity ispod 1 na elementu
   sa preserve-3d spljošti knjigu u ravnu sliku dok traje pojavljivanje. */
.mbb { opacity: 0; transition: opacity 0.9s ease; }
.mbb.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mbb-scene,
  .mbb-book,
  .mbb-ground,
  .mbb-leaf { transition: none !important; }
  .mbb-float,
  .mbb-ground { animation: none !important; }
}