/* ================================================================
   ВЯРА! – Book Flipper Widget CSS
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.vbf-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 40px 80px;
    overflow: hidden;
    position: relative;
}

/* Paper noise */
.vbf-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── Scene (centers book + controls vertically) ──────────────── */
.vbf-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    position: relative;
    z-index: 1;
}

/* ── Book wrapper ────────────────────────────────────────────── */
.vbf-book-wrap {
    position: relative;
    width:  var(--vbf-w);
    height: var(--vbf-h);
    /* default float */
    animation: vbf-float 5.5s ease-in-out infinite;
    /* 3-D perspective for child flips */
    perspective: 2000px;
    transform-style: preserve-3d;
    cursor: pointer;
    /* subtle drop shadow */
    filter: drop-shadow(0 24px 40px rgba(61,43,26,.20));
}

@keyframes vbf-float {
    0%,100% { transform: translateY(0)    rotate(-1.5deg); }
    50%      { transform: translateY(-18px) rotate(-1.5deg); }
}

/* Pause float while flipping */
.vbf-book-wrap.is-flipping {
    animation-play-state: paused;
}

/* ── Spine ───────────────────────────────────────────────────── */
.vbf-spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--vbf-sw);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--vbf-spine) 80%, #fff),
        var(--vbf-spine),
        color-mix(in srgb, var(--vbf-spine) 80%, #000)
    );
    border-radius: 3px 0 0 3px;
    box-shadow: inset -3px 0 8px rgba(0,0,0,.18);
    z-index: 50;
}

/* ── Front cover ─────────────────────────────────────────────── */
.vbf-cover--front {
    position: absolute;
    inset: 0;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    z-index: 1;
    box-shadow:
        4px 6px 20px rgba(0,0,0,.15),
        inset -2px 0 6px rgba(0,0,0,.08);
}
.vbf-cover--front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── CSS fallback cover ──────────────────────────────────────── */
.vbf-css-cover {
    width: 100%;
    height: 100%;
    background: #e8d9c4;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 22px 24px;
    position: relative;
}
.vbf-css-cover__noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
}
.vbf-css-cover__sub    { font-family:'Cormorant Garamond',serif; font-size:.6rem; letter-spacing:4px; color:#6b4e2e; text-transform:uppercase; margin-bottom:5px; }
.vbf-css-cover__author { font-family:'Special Elite',cursive; font-size:.75rem; color:#8b6f47; letter-spacing:2px; margin-bottom:14px; text-align:center; }
.vbf-css-cover__heart-wrap { position:relative; width:60%; padding-bottom:55%; margin-bottom:10px; }
.vbf-css-cover__kraft  { position:absolute; inset:0; background:linear-gradient(135deg,#c9a87a,#b8924e); border-radius:3px; }
.vbf-css-cover__heart  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72%; }
.vbf-css-cover__title  { font-family:'Special Elite',cursive; font-size:1.1rem; color:#8b6f47; letter-spacing:2px; }
.vbf-css-cover__flower { font-size:1.4rem; opacity:.7; }
.vbf-css-cover__tape   { width:60px; height:10px; background:rgba(232,168,124,.65); transform:rotate(-1deg); margin:4px 0 10px; }
.vbf-css-cover__year   { font-family:'Special Elite',cursive; font-size:.6rem; color:#6b4e2e; letter-spacing:3px; margin-top:auto; }

/* ── Pages stack ─────────────────────────────────────────────── */
.vbf-pages-stack {
    position: absolute;
    inset: 0;
    border-radius: 0 6px 6px 0;
    overflow: visible;
}

/* ── Single page ─────────────────────────────────────────────── */
.vbf-page {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    /* start flat (closed) */
    transform: rotateY(0deg);
    border-radius: 0 6px 6px 0;
    will-change: transform;
}

/* FLIPPED state — page is open to the left */
.vbf-page.is-flipped {
    transform: rotateY(-180deg);
    transition: transform var(--vbf-flip-ms) cubic-bezier(.645,.045,.355,1.000);
}

/* Flipping forward (closing) */
.vbf-page.is-flipping-out {
    transform: rotateY(-180deg);
    transition: transform var(--vbf-flip-ms) cubic-bezier(.645,.045,.355,1.000);
}

/* Flipping backward (opening) */
.vbf-page.is-flipping-in {
    transform: rotateY(0deg);
    transition: transform var(--vbf-flip-ms) cubic-bezier(.645,.045,.355,1.000);
}

/* Front face */
.vbf-page__front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    box-shadow: 2px 4px 14px rgba(0,0,0,.12);
}
.vbf-page__front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Back face */
.vbf-page__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    box-shadow: -2px 4px 14px rgba(0,0,0,.12);
}
.vbf-page__back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Plain paper back */
.vbf-page__back-plain {
    width: 100%;
    height: 100%;
    background: #f5efe5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* Page curl hint on hover */
.vbf-page__curl {
    position: absolute;
    bottom: 0; right: 0;
    width: 32px; height: 32px;
    background: linear-gradient(225deg, rgba(196,168,130,.4) 45%, transparent 46%);
    border-top-left-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s, width .3s, height .3s;
}
.vbf-book-wrap:hover .vbf-page__curl {
    opacity: 1;
    width: 44px;
    height: 44px;
}

/* ── Glossy light overlay on hover ──────────────────────────── */
.vbf-book-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.08) 0%,
        transparent 50%,
        rgba(0,0,0,.04) 100%
    );
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    transition: opacity .4s;
}
.vbf-book-wrap:hover::after { opacity: 1; }

/* ── Controls ────────────────────────────────────────────────── */
.vbf-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vbf-btn {
    background: none;
    border: 2px solid #c4a882;
    color: #8b6f47;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s, color .25s, border-color .25s;
    line-height: 1;
}
.vbf-btn:hover {
    background: #8b6f47;
    color: #f0e8dc;
    border-color: #8b6f47;
}
.vbf-btn:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.vbf-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vbf-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #c4a882;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .2s;
}
.vbf-dot:hover     { background: rgba(196,168,130,.5); }
.vbf-dot--active   { background: #8b6f47; border-color: #8b6f47; transform: scale(1.25); }

/* ── Tooltip hint ────────────────────────────────────────────── */
.vbf-hint {
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: .82rem;
    color: #9b7c55;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
}
.vbf-book-wrap:not(.has-flipped):hover .vbf-hint { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .vbf-section { padding: 40px 16px 60px; }
    .vbf-scene {
        --vbf-w: min(80vw, 300px) !important;
        --vbf-h: calc(min(80vw, 300px) * 1.38) !important;
    }
}