/**
 * va-book.css — vaMicrosites 3D Book Plugin
 * Docs: /Docs/Features/3dBook.md
 *
 * WHY: Namespaced to va-book-* to prevent CSS collisions with any site stylesheet.
 * All geometry is driven by CSS custom properties injected by BookCoverComponent as a
 * per-instance nonce-backed <style> block in {{Page:Head}}. Every microsite value comes
 * from its appsettings.json Book3d* settings, so no microsite-specific CSS class is needed
 * here. The var() fallbacks below serve only as a last-resort if the head style is missing.
 *
 * Design reference: tameyourstorm (shiny glass halo + floating idle animation).
 * Extended with depth-shadow and face quality from junction/yourhumanworth.
 */

/* ─── Container ──────────────────────────────────────────────────────────── */

.va-book-container {
    perspective:        var(--va-book-perspective, 2500px);
    width:              var(--va-book-width, 360px);
    height:             var(--va-book-height, 540px);
    position:           relative;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transform-style:    preserve-3d;
    z-index:            50;
    cursor:             grab;
    pointer-events:     auto;
    margin:             0 auto;
    /* WHY: drop-shadow gives the floating book depth against both light and dark backgrounds. */
    filter:             drop-shadow(0 30px 60px rgba(2, 6, 23, 0.5));
}

/* WHY: Shiny glass halo overlay — the tameyourstorm "best" visual effect.
   The glow color is configurable per microsite via --va-book-glow so each site
   retains its distinctive ambient light (white glass, pink, crimson, terracotta, etc.). */
.va-book-container::after {
    content:        "";
    position:       absolute;
    inset:          -18px;
    background:     radial-gradient(circle at 50% 40%, var(--va-book-glow, rgba(255,255,255,0.22)), transparent 60%);
    z-index:        -1;
    filter:         blur(12px);
    pointer-events: none;
}

/* ─── Float animation ────────────────────────────────────────────────────── */

/* WHY: CSS custom properties resolve on the animated element so the same shared
   @keyframes drives different idle angles per microsite — no per-site keyframe needed. */
@keyframes va-book-float {
    0%   { transform: rotateY(var(--va-book-ry0,  30deg)) rotateX(var(--va-book-rx0,  10deg)) translateY(0); }
    50%  { transform: rotateY(var(--va-book-ry50, 25deg)) rotateX(var(--va-book-rx50, 15deg)) translateY(var(--va-book-lift, -20px)); }
    100% { transform: rotateY(var(--va-book-ry0,  30deg)) rotateX(var(--va-book-rx0,  10deg)) translateY(0); }
}

/* ─── Book element ───────────────────────────────────────────────────────── */

.va-book {
    width:              var(--va-book-width,  360px);
    height:             var(--va-book-height, 540px);
    position:           absolute;
    transform-style:    preserve-3d;
    /* WHY: Initial static transform matches the animation start frame so there is no
       jump when the animation begins playing on page load. */
    transform:          rotateY(var(--va-book-ry0, 30deg));
    transition:         transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change:        transform;
    pointer-events:     none;
}

/* WHY: Animation lives on --idle so hover can suppress it cleanly via the rule below
   without also suppressing the transition on the base .va-book element. */
.va-book--idle {
    animation: va-book-float 8s ease-in-out infinite;
}

/* WHY: Wrapped in @media (hover: hover) so the pause only fires on devices with a
   true pointer (desktop mouse). Touch-only devices keep the idle animation intact. */
@media (hover: hover) {
    .va-book-container:hover .va-book--idle {
        animation:  none !important;
        transition: none !important;
    }
}

/* WHY: Honour the OS reduced-motion preference so the book stays still
   for users who need to avoid motion. */
@media (prefers-reduced-motion: reduce) {
    .va-book--idle {
        animation: none;
    }
}

/* WHY: On phones, force the 3D book to use the available viewport width (with small side
   padding) while preserving each microsite's configured width:height ratio via
   --va-book-aspect-ratio from BookCoverComponent. This removes left/right crop on narrow screens
   without requiring per-microsite CSS overrides. */
@media (max-width: 768px) {
    .va-book-container {
        /* WHY: On narrow phones the book should visually span the available viewport width with only
           a small side gutter, independent of desktop baseline Book3dWidth values. */
        --va-book-mobile-width: calc(100vw - 24px);
        --va-book-width: var(--va-book-mobile-width);
        --va-book-height: calc(var(--va-book-mobile-width) * var(--va-book-aspect-ratio, 1.5));
    }
}

/* ─── Shared face base ───────────────────────────────────────────────────── */

.va-book__face {
    position:               absolute;
    box-sizing:             border-box;
    backface-visibility:    hidden;
}

/* ─── Front cover ────────────────────────────────────────────────────────── */

.va-book__face--front {
    width:      var(--va-book-width,  360px);
    height:     var(--va-book-height, 540px);
    left:       50%;
    top:        50%;
    /* WHY: translate(-50%,-50%) centres the face in 3D space before the depth push. */
    transform:  translate(-50%, -50%) translateZ(calc(var(--va-book-depth, 50px) / 2));
}

.va-book__face--front img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    border-radius:      2px 4px 4px 2px;
    /* WHY: Inset left shadow mimics the page-spine shadow visible on real books. */
    box-shadow:         inset 4px 0 12px rgba(0, 0, 0, 0.2),
                        0 18px 35px rgba(2, 6, 23, 0.45);
    pointer-events:     none;
    user-select:        none;
    -webkit-user-drag:  none;
}

/* ─── Back cover ─────────────────────────────────────────────────────────── */

.va-book__face--back {
    width:          var(--va-book-width,  360px);
    height:         var(--va-book-height, 540px);
    left:           50%;
    top:            50%;
    transform:      translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--va-book-depth, 50px) / 2));
    background:     linear-gradient(135deg, var(--va-book-spine-color, #1e293b), var(--va-book-spine-dark, #0f172a));
    border-radius:  4px 2px 2px 4px;
    box-shadow:     -10px 10px 50px rgba(0, 0, 0, 0.3),
                    inset 0 0 20px var(--va-book-spine-hl, rgba(255, 255, 255, 0.08));
}

/* ─── Right (page edges) ─────────────────────────────────────────────────── */

.va-book__face--right {
    width:      calc(var(--va-book-depth, 50px) + 1px);
    height:     var(--va-book-height, 540px);
    left:       50%;
    top:        50%;
    transform:  translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--va-book-width, 360px) / 2));
    background: linear-gradient(90deg,
                    #e2e2e2 0%,
                    #f7f7f7 20%,
                    var(--va-book-page-color, #f0f0f0) 40%,
                    #f7f7f7 60%,
                    #e2e2e2 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.12);
}

/* ─── Left (spine) ───────────────────────────────────────────────────────── */

.va-book__face--left {
    width:              calc(var(--va-book-depth, 50px) + 1px);
    height:             var(--va-book-height, 540px);
    left:               50%;
    top:                50%;
    transform:          translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--va-book-width, 360px) / 2));
    background:         linear-gradient(180deg, var(--va-book-spine-color, #1e293b), var(--va-book-spine-dark, #0f172a));
    color:              #fff;
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    text-orientation:   mixed;
    writing-mode:       vertical-rl;
    padding:            24px 0;
    box-shadow:         inset 5px 0 14px rgba(0, 0, 0, 0.3);
}

.va-book__spine-title {
    font-weight:    700;
    font-size:      14px;
    white-space:    nowrap;
    letter-spacing: 0.1em;
}

.va-book__spine-author {
    font-weight:    400;
    font-size:      11px;
    color:          rgba(255, 255, 255, 0.65);
    white-space:    nowrap;
}

/* ─── Top and bottom (page edges) ────────────────────────────────────────── */

.va-book__face--top,
.va-book__face--bottom {
    width:      var(--va-book-width, 360px);
    height:     calc(var(--va-book-depth, 50px) + 1px);
    left:       50%;
    top:        50%;
    background: linear-gradient(90deg, #e2e2e2 0%, #f7f7f7 50%, #e2e2e2 100%);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.va-book__face--top {
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--va-book-height, 540px) / 2));
}

.va-book__face--bottom {
    transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--va-book-height, 540px) / 2));
}