/* Morella CD Animation v1.4.0 */

/* ── SHORTCODE WRAPPER ───────────────────────────── */
.morella-cd-wrap { width: 100%; position: relative; }

.mcd-scene {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2000px;
    perspective-origin: 50% 50%;
    overflow: visible;
    min-height: 360px;
}

.mcd-scaler {
    transform-style: preserve-3d;
    transform-origin: center center;
}

.mcd-shifter {
    transform-style: preserve-3d;
    animation: mcd-shift-open 30s ease-in-out infinite;
}

.mcd-rotator {
    transform-style: preserve-3d;
    width: 568px; height: 504px;
    animation: mcd-y-rotate 30s ease-in-out infinite;
}

.mcd-tilter {
    transform-style: preserve-3d;
    width: 568px; height: 504px;
    transform: rotateX(10deg);
}

.mcd-box {
    position: relative;
    transform-style: preserve-3d;
    width: 568px; height: 504px;
}

.morella-cd-wrap figure {
    position: absolute;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    backface-visibility: hidden;
}

.mcd-group-cover {
    position: absolute; top: 0; left: 0;
    width: 568px; height: 504px;
    transform-style: preserve-3d;
    animation: mcd-case-slide 30s ease-in-out infinite;
}

/* Case slides LEFT as cover opens, uncovering the CD that sits at world center.
   Synced with mcd-open-cover: cover opens 0-10%, holds 10-24%, closes 24-33%. */
@keyframes mcd-case-slide {
    0%    { transform: translateX(0px); }
    10%   { transform: translateX(-320px); } /* case slid left, CD uncovered */
    24%   { transform: translateX(-320px); } /* hold */
    33%   { transform: translateX(0px); }    /* case returns, covers CD again */
    100%  { transform: translateX(0px); }
}

/* FRONT PANEL */
.mcd-front-group {
    position: absolute; top: 0; left: 0;
    width: 568px; height: 504px;
    transform-style: preserve-3d;
    transform-origin: left center;
    animation: mcd-open-cover 30s ease-in-out infinite;
}
.mcd-front { top:0; left:0; width:568px; height:504px; box-shadow:rgba(0,0,0,.7) 20px 40px 80px -8px; }
.mcd-front-spine-t { top:0; left:0; width:568px; height:4px; transform-origin:center top; transform:rotateX(90deg) translateY(-4px) translateZ(-1px); }
.mcd-front-spine-b { top:500px; left:0; width:568px; height:4px; transform-origin:center bottom; transform:rotateX(-90deg) translateY(4px); }
.mcd-slot-1 { top:0; left:564px; width:4px; height:504px; background:#111; transform-origin:right center; transform:rotateY(90deg) translateX(4px); }
.mcd-inside-l { top:0; left:0; width:568px; height:504px; transform:rotateY(180deg) translateZ(4px); filter:brightness(.75); }
.mcd-crease-1a { background:#fff; top:8px; left:54px; width:1.2px; height:488px; opacity:.1; transform:rotateY(180deg) translateZ(4.5px); }
.mcd-crease-1b { background:#000; top:8px; left:52.8px; width:1.2px; height:488px; opacity:.2; transform:rotateY(180deg) translateZ(4.5px); }

/* BACK PANEL */
.mcd-back-group {
    position: absolute; top:0; left:0;
    width:568px; height:504px;
    transform-style: preserve-3d;
    transform: translateZ(-24px) rotateY(-1.2deg);
}
.mcd-group-cd {
    position: absolute;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateX(0px);
    animation: mcd-cd-slide 30s ease-in-out infinite;
}
.mcd-cd { top:6px; left:32px; width:494px; height:494px; border-radius:50%; box-shadow:rgba(0,0,0,.5) 6px 12px 20px -4px; transform:translateZ(2px); animation:mcd-cd-spin 8s linear infinite; }
.mcd-cd-inset-shadow { top:207px; left:235px; width:88px; height:88px; border-radius:50%; box-shadow:rgba(0,0,0,.5) 1px 4px 6px 6px inset; transform:translateZ(1.5px); }
.mcd-cd-silver {
    top:6px; left:32px; width:494px; height:494px; border-radius:50%;
    background: conic-gradient(from 0deg, rgba(255,255,255,.07), rgba(255,255,255,.18), rgba(255,255,255,.04), rgba(255,255,255,.14), rgba(255,255,255,.07));
    transform:translateZ(1px);
    animation:mcd-shine-rotate 4s linear infinite;
}
.mcd-inside-r { top:0; left:0; width:568px; height:504px; transform:translateZ(4px); filter:brightness(.75); }
.mcd-crease-2a { background:#000; top:8px; left:54px; width:1.2px; height:488px; opacity:.2; transform:translateZ(4.5px); }
.mcd-crease-2b { background:#fff; top:8px; left:52.8px; width:1.2px; height:488px; opacity:.1; transform:translateZ(4.5px); }
.mcd-back-spine-t { top:0; left:0; width:568px; height:4px; transform-origin:center top; transform:rotateZ(180deg) rotateX(-90deg) translateY(-4px); }
.mcd-back-spine-b { top:500px; left:0; width:568px; height:4px; transform-origin:center bottom; transform:rotateZ(180deg) rotateX(90deg) translateY(4px); }
.mcd-slot-2 { top:0; left:564px; width:4px; height:504px; background:#111; transform-origin:right center; transform:rotateZ(180deg) rotateY(-90deg) translateX(4px); }
.mcd-back { top:0; left:0; width:568px; height:504px; box-shadow:rgba(0,0,0,.7) -20px 40px 80px -8px; transform:rotateY(180deg) translateZ(0); }

/* SPINE */
.mcd-spine-group { position:absolute; transform-style:preserve-3d; }
.mcd-spine { top:0; left:0; width:24px; height:504px; transform-origin:left center; transform:rotateY(-90deg) translateX(-24px) translateZ(1px); }
.mcd-spine-spine-t { top:0; left:0; width:24px; height:2px; transform-origin:center top; transform:rotateX(90deg) rotateZ(90deg) translateX(-12px) translateY(11px); }
.mcd-spine-spine-b { top:500px; left:0; width:24px; height:2px; transform-origin:center bottom; transform:rotateZ(90deg) rotateY(90deg) translateX(12px) translateY(12px) translateZ(2px); }
.mcd-inside-c { top:0; left:0; width:24px; height:504px; transform-origin:left center; transform:rotateY(90deg); filter:brightness(.2); }

/* ── KEYFRAME ANIMATIONS ─────────────────────────── */
@keyframes mcd-shift-open {
    0%   { transform:translateX(0); }
    6%   { transform:translateX(300px); }
    27%  { transform:translateX(300px); }
    35%  { transform:translateX(0); }
    100% { transform:translateX(0); }
}
@keyframes mcd-y-rotate {
    0%   { transform:rotateY(0deg); }
    33%  { transform:rotateY(0deg); }
    55%  { transform:rotateY(-180deg); }
    67%  { transform:rotateY(-180deg); }
    90%  { transform:rotateY(-360deg); }
    100% { transform:rotateY(-360deg); }
}
@keyframes mcd-open-cover {
    0%   { transform:rotateY(0deg); }
    10%  { transform:rotateY(-162deg); }
    24%  { transform:rotateY(-162deg); }
    33%  { transform:rotateY(0deg); }
    100% { transform:rotateY(0deg); }
}
/* CD counteracts parent mcd-group-cover sliding -320px (mcd-case-slide)
   by moving +320px, so it stays at world position 0 (center) while the
   case slides away to the left. The case reveals the CD from right to left
   as it slides away. Opacity controls visibility during the sequence. */
@keyframes mcd-cd-slide {
    0%    { transform: translateX(0px);   opacity: 0; } /* case covers CD, CD invisible */
    10%   { transform: translateX(320px); opacity: 1; } /* case slid -320px, CD +320px = world 0, visible */
    24%   { transform: translateX(320px); opacity: 1; } /* CD visible at world center */
    32%   { transform: translateX(0px);   opacity: 0; } /* case returned, CD hidden again */
    100%  { transform: translateX(0px);   opacity: 0; } /* hidden through rotation */
}

@keyframes mcd-cd-spin {
    from { transform:translateZ(2px) rotateZ(0deg); }
    to   { transform:translateZ(2px) rotateZ(360deg); }
}
@keyframes mcd-shine-rotate {
    from { transform:translateZ(1px) rotateZ(0deg); }
    to   { transform:translateZ(1px) rotateZ(-360deg); }
}

/* ── GALLERY TRIGGER THUMBNAIL ───────────────────── */
/* Sits BELOW the WooCommerce gallery — not inside FlexSlider */

.mcd-trigger-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.15s ease;
    background: #0c0c14;
    position: relative;
    width: 74px;
    min-height: 74px;
}
.mcd-trigger-wrap:hover { border-color: #ff8c42; transform: scale(1.04); }
.mcd-trigger-wrap:focus { outline: 2px solid #ff8c42; outline-offset: 2px; }

#mcd-gallery-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    width: 100%;
}

.mcd-trigger-img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.mcd-trigger-icon-only {
    width: 28px; height: 28px;
    color: rgba(255,255,255,0.8);
}
.mcd-trigger-icon-only svg { width:100%; height:100%; }

.mcd-trigger-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.mcd-trigger-wrap:hover .mcd-trigger-label { color: #ff8c42; }

/* ── MODAL ───────────────────────────────────────── */

#mcd-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}
#mcd-modal[style*="flex"] { display: flex !important; }

.mcd-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.mcd-modal-box {
    position: relative;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 55%, #0c0c16 0%, #000 100%);
    border-radius: 10px;
    width: min(92vw, 960px);
    height: min(85vh, 700px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
    overflow: visible;
}

.mcd-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    border: 2px solid #555;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.mcd-modal-close:hover { background: #ff4444; border-color: #ff4444; }

.mcd-modal-inner {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mcd-modal-inner .mcd-scene {
    min-height: unset;
    width: 100%;
    height: 100%;
}

/* ── MODAL TABS ──────────────────────────────────── */

.mcd-modal-tabs {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    display: flex;
    gap: 4px;
    padding-bottom: 8px;
}

.mcd-tab {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    border-radius: 6px 6px 0 0;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.mcd-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
.mcd-tab--active {
    background: #0c0c14;
    border-color: rgba(255,255,255,0.2);
    border-bottom-color: #0c0c14;
    color: #fff;
}
.mcd-tab-count {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 4px;
}

/* ── MODAL PANELS ────────────────────────────────── */

.mcd-modal-panel {
    display: none;
    flex: 1;
    width: 100%;
    min-height: 0; /* critical — allows flex child to shrink below content size */
    align-items: center;
    justify-content: center;
}
.mcd-modal-panel--active { display: flex; }

/* ── BOOKLET VIEWER ──────────────────────────────── */

.mcd-booklet-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0; /* allow shrink in flex context */
    padding: 20px;
    gap: 16px;
    box-sizing: border-box;
}

.mcd-booklet-pages {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.mcd-booklet-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: mcd-fade-in 0.25s ease;
}

.mcd-booklet-page img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

@keyframes mcd-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.mcd-booklet-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.mcd-booklet-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcd-booklet-btn:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.mcd-booklet-btn:disabled { opacity: 0.3; cursor: default; }

.mcd-booklet-counter {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    min-width: 80px;
    text-align: center;
}