/* COVER SHELL */
.fb-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.fb-shell:hover .fb-thumb {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 18px 48px rgba(220, 130, 160, 0.32);
}

.fb-thumb {
  width: 240px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s, box-shadow 0.22s;
}

.fb-thumb img {
  width: 100%;
  display: block;
}

.fb-label {
  color: #c05080;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* OVERLAY */
.fb-ovl {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.849);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.fb-ovl.on {
  display: flex;
}

/* CLOSE */
.fb-x {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 10001;
}

.fb-x:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* STAGE */
.fb-stage {
  display: flex;
  align-items: center;
  position: relative;
}

/* BOOK */
.fb-book {
  position: relative;
  width: min(76vw, 768px);
  height: min(53.8vw, 542.4px);
  overflow: hidden;
}

/* SLOTS */
.fb-slot {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.fb-sl {
  left: 0;
}

.fb-sr {
  right: 0;
}

.fb-slot img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* LEAF */
.fb-leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
  z-index: 10;
}

.fb-leaf.animate {
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* FACES */
.fb-lf,
.fb-lb {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}

.fb-lb {
  transform: rotateY(180deg);
}

.fb-lf img,
.fb-lb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  pointer-events: none;
}

/* NAV */
.fb-btn {
  background: rgba(255, 255, 255, 0.13);
  border: 2px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.fb-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.08);
}

.fb-btn:disabled {
  opacity: 0.22;
  cursor: default;
  transform: none !important;
}

/* COUNTER */
.fb-ctr {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.07em;
  white-space: nowrap;
}/*# sourceMappingURL=flip-book.css.map */