/* ===== INTERACTIVE REPORT PREVIEW ===== */
.interactive-report-wrapper {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    perspective: 1500px;
}

.report-flip-container {
    width: 100%;
    position: relative;
    z-index: 10;
}

.report-flipper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.report-front, .report-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(200, 155, 148, 0.15);
    overflow: hidden;
    background: white;
}

.report-front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

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

/* ===== E-BOOK BIFOLD ===== */
.bifold-container {
    width: 100%;
    max-width: 24rem; /* Closed width */
    aspect-ratio: 156 / 214; /* 156mm x 214mm physical cover dimensions */
    margin: 0 auto 5rem; /* 5rem bottom margin to make space for absolute controls */
    position: relative;
    perspective: 2500px;
    z-index: 10;
    transition: transform 0.5s ease-out; /* For jumping to center smoothly if possible */
}

/* Lightbox Modal / Opened State styles are injected via JS transforms */

.bifold-flap-right {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    border-radius: 0 1rem 1rem 0;
    box-shadow: inset 1px 0 5px rgba(0,0,0,0.05), 10px 10px 25px rgba(0,0,0,0.15);
    z-index: 10;
    padding: 1rem 1rem 1rem 0; /* protective margin */
    transition: box-shadow 0.4s ease;
}

.bifold-flap-left {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-style: preserve-3d;
    z-index: 30;
    cursor: pointer;
}

.bifold-container.is-open .bifold-flap-left {
    transform: rotateY(-180deg);
    pointer-events: none;
}

.bifold-front-face {
    position: absolute;
    inset: 0;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0 1rem 1rem 0;
    background: white;
}

.bifold-back-face {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fff;
    border-radius: 1rem 0 0 1rem;
    box-shadow: inset -1px 0 5px rgba(0,0,0,0.05), -10px 10px 25px rgba(0,0,0,0.15);
    padding: 1rem 0 1rem 1rem;
    pointer-events: auto; /* Re-enable pointer events since parent gets pointer-events: none when open */
    transition: box-shadow 0.4s ease;
}

/* Option B: Hide center fold shadows dynamically when panning */
.interactive-report-wrapper.is-zoomed .bifold-flap-right,
.interactive-report-wrapper.is-zoomed .bifold-back-face {
    box-shadow: inset 0 0 0 transparent, 0 0 0 transparent !important;
}

.image-slice-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
}

.slice-left {
    position: absolute;
    top: 0; left: 0;
    width: 200%;
    height: 100%;
}

.slice-right {
    position: absolute;
    top: 0; right: 0;
    width: 200%;
    height: 100%;
}

/* Hover effects for inactive covers */
.interactive-report-wrapper:not(.is-open) .cover-design,
.interactive-report-wrapper:not(.is-open) .envelope-front {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, filter 0.6s ease;
}
.interactive-report-wrapper:not(.is-open):hover .cover-design,
.interactive-report-wrapper:not(.is-open):hover .envelope-front {
    transform: scale(1.02) translateY(-6px);
    filter: brightness(1.06) drop-shadow(0 15px 25px rgba(4, 47, 46, 0.2));
}

.cover-design {
    width: 100%;
    height: 100%;
    background-image: url('http://ufrdn1.nio.ngg.local:4310/wp-content/uploads/2026/05/Premium_Cover_Gem.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px 1rem 1rem 3px;
    position: relative;
    box-shadow: 
        inset 4px 0 10px rgba(0,0,0,0.7), /* darker spine shadow */
        inset -1.5px 0 3px rgba(255,255,255,0.5), /* stronger right edge highlight */
        -3px 5px 5px rgba(172, 172, 172, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Base metallic shine (passive) */
.cover-design::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    animation: metallicShine 6s infinite;
    z-index: 10;
    pointer-events: none;
}
@keyframes metallicShine {
    0% { left: -150%; }
    20% { left: 250%; }
    100% { left: 250%; }
}

/* Dynamic Page-Flip Lighting overlay */
.cover-design::before {
    content: '';
    position: absolute;
    inset: 0;
    /* This gradient simulates a dramatic reflection and deep shadow */
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.4) 0%, 
        rgba(0, 0, 0, 0.0) 25%, 
        rgba(255, 255, 255, 0.6) 45%, 
        rgba(255, 255, 255, 0.0) 65%, 
        rgba(0, 0, 0, 0.7) 100%
    );
    background-size: 300% 100%;
    /* Start with the reflection on the far right (closed state) */
    background-position: 95% 0%;
    transition: background-position 1s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 11;
    pointer-events: none;
}

/* When the cover rotates open (-180deg), shift the gradient across the surface */
.bifold-container.is-open .bifold-flap-left .cover-design::before {
    background-position: 0% 0%; /* Moves shadow over the surface */
}

.report-pan-area {
    position: relative;
    width: 100%;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
    touch-action: none; 
}

.spotlight-overlay {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    z-index: 5;
}

.hotspot-marker {
    position: absolute;
    /* Dimensions and position mapped directly via inline styles now */
    border: 1.5px solid transparent; /* Invisible by default */
    background: transparent;
    color: #C89B94; /* Pink outline color for SVG */
    cursor: crosshair;
    z-index: 10;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}

.hotspot-marker:hover, .hotspot-marker:active {
    border: 1.5px solid rgba(200, 155, 148, 0.4);
    background: transparent;
    border-radius: 4px;
}

.hotspot-tooltip {
    display: none !important; /* Managed globally via JS now to prevent overflow */
}

/* Global tooltip container */
:root {
    --tooltip-offset-length: 24px;
}

.hotspot-tooltip-global {
    position: fixed;
    z-index: 350;
    pointer-events: none;
    transition: top 0.1s ease, left 0.1s ease;
}

/* Main box management section (centering) */
.hotspot-tooltip-global[data-align="left"],
.hotspot-tooltip-global[data-align="right"] {
    transform: translateY(-50%);
}
.hotspot-tooltip-global[data-align="top"],
.hotspot-tooltip-global[data-align="bottom"] {
    transform: translateX(-50%);
}

/* Base style for leader line (hidden at width: 0 initially) */
.hotspot-tooltip-global::before {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Line setup & Line anchors relative to the box */
/* setup X */
.hotspot-tooltip-global[data-align="left"]::before,
.hotspot-tooltip-global[data-align="right"]::before {
    top: 50%;
    transform: translateY(-50%);
    height: 1px; 
    width: 0;   
}
/* If box is left of marker -> anchor line to its right side */
.hotspot-tooltip-global[data-align="left"]::before {
    right: calc(var(--tooltip-offset-length) * -1);
    left: auto;
}
/* If box is right of marker -> anchor line to its left side */
.hotspot-tooltip-global[data-align="right"]::before {
    left: calc(var(--tooltip-offset-length) * -1);
    right: auto;
}
/* setup Y */
.hotspot-tooltip-global[data-align="top"]::before,
.hotspot-tooltip-global[data-align="bottom"]::before {
    left: 50%; 
    transform: translateX(-50%); 
    width: 1px; 
    height: 0;
}
/* If box is top of marker -> anchor line to its bottom side */
.hotspot-tooltip-global[data-align="top"]::before {
    bottom: calc(var(--tooltip-offset-length) * -1);
    top: auto;
}
/* If box is bottom of marker -> anchor line to its top side */
.hotspot-tooltip-global[data-align="bottom"]::before {
    top: calc(var(--tooltip-offset-length) * -1);
    bottom: auto;
}
/* Draw the line active state */
.hotspot-tooltip-global[data-align="left"].is-drawing-active::before,
.hotspot-tooltip-global[data-align="right"].is-drawing-active::before {
    width: var(--tooltip-offset-length);
}
.hotspot-tooltip-global[data-align="top"].is-drawing-active::before,
.hotspot-tooltip-global[data-align="bottom"].is-drawing-active::before {
    height: var(--tooltip-offset-length);
}

/* Inner content block (holds visual box style) */
.hotspot-tooltip-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    color: #334155;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.5);
    
    /* Initially hidden and shrunk for pop effect */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Slight slide direction based on alignment */
.hotspot-tooltip-global[data-align="right"] .hotspot-tooltip-content {
    transform: scale(0.95) translateX(-8px);
}
.hotspot-tooltip-global[data-align="left"] .hotspot-tooltip-content {
    transform: scale(0.95) translateX(8px);
}

/* Full visibility when active, occurs AFTER the line draws (0.3s delay) */
.hotspot-tooltip-global.is-drawing-active .hotspot-tooltip-content {
    opacity: 1;
    transform: scale(1) translateX(0);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, 
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.report-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: white;
    border: 1px solid rgba(4,47,46,0.1);
    color: rgba(4,47,46,0.7);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.2s;
    outline: none;
}

.report-controls button:hover {
    color: #042f2e;
    border-color: rgba(4,47,46,0.2);
    transform: translateY(-2px);
}

/* ===== REPORT PREVIEW CARD ===== */
.report-preview {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 1rem;
    border: 1px solid rgba(200,155,148,.25);
    background: linear-gradient(135deg, white 0%, #fdf8f7 100%);
    overflow: hidden;
    padding: 1.5rem;
    transition: all .5s;
}
.report-preview:hover {
    box-shadow: 0 20px 50px rgba(200,155,148,.15);
    transform: translateY(-4px);
}
.report-preview .corner-mark {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
}
.report-preview .corner-mark.tl { top: 1rem; left: 1rem; border-top: 1.5px solid rgba(200,155,148,.4); border-left: 1.5px solid rgba(200,155,148,.4); }
.report-preview .corner-mark.tr { top: 1rem; right: 1rem; border-top: 1.5px solid rgba(200,155,148,.4); border-right: 1.5px solid rgba(200,155,148,.4); }
.report-preview .corner-mark.bl { bottom: 1rem; left: 1rem; border-bottom: 1.5px solid rgba(200,155,148,.4); border-left: 1.5px solid rgba(200,155,148,.4); }
.report-preview .corner-mark.br { bottom: 1rem; right: 1rem; border-bottom: 1.5px solid rgba(200,155,148,.4); border-right: 1.5px solid rgba(200,155,148,.4); }

/* ===== PULL-OUT ENVELOPE ===== */
.pullout-container {
    width: 100%;
    margin: 0 auto 5rem;
    position: relative;
    z-index: 10;
    transition: transform 0.5s ease-out;
    perspective: 2500px;
}

.pullout-container.is-gemfolio {
    aspect-ratio: 2 / 3;
    max-width: 20rem;
}

.pullout-container.is-precious-metal {
    aspect-ratio: 1 / 1.4142;
    max-width: 24rem;
}

/* Pullout Lightbox scales and translates are managed dynamically via JS */

.document-insert {
    position: absolute;
    top: 1.5%;
    left: 2.5%;
    right: 2.5%;
    bottom: 2%;
    transform: translateY(-12%); /* Peeking out vertically */
    background: white;
    border-radius: 6px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 10;
    overflow: hidden;
}

.pullout-container.is-open .document-insert {
    transform: translateY(0);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.envelope-front {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    z-index: 20;
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pullout-container.is-open .envelope-front {
    transform: translateY(110%) rotateX(-15deg) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

.pullout-container:hover .envelope-front {
    transform: translateY(2%); /* Subtle hover drop to reveal more document */
}