/* ====== Magic Slide 4 (Inside 3D) Core ====== */

.gdk-ms-inside-scene {
    display: grid;
    height: calc(var(--sh, 100) * 1vh) !important;
    width: 100%;
    overflow: hidden;
    perspective: var(--p, 50em) !important;
    position: relative;

    /* Environment Defaults */
    --bg-center: #1a202c;
    --bg-edge: #000;

    /* Dynamic Background */
    background: var(--bg-final, none) !important;
}

/* Side Masks Control - Colored Overlay */
.gdk-ms-inside-scene:after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background: linear-gradient(90deg,
            var(--mask-color, #000) 0%,
            transparent 15%,
            transparent 85%,
            var(--mask-color, #000) 100%);
    opacity: var(--mask-opacity, 0);
    transition: opacity 0.3s ease;
}

.gdk-ms-inside-a3d {
    display: grid;
    place-self: center;
    transform-style: preserve-3d;
    transform:
        rotateX(calc(var(--rx, -15) * 1deg)) translateZ(calc(var(--cz, 20) * 1em)) rotateY(calc((var(--ry, 0) + var(--ry-offset, 0)) * 1deg)) rotateZ(calc(var(--rz, 0) * 1deg)) !important;
    transition: transform 0.1s linear;
}

.gdk-ms-inside-a3d.gdk-is-stepping {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.gdk-ms-inside-card {
    --ba: calc(1turn / var(--n));
    grid-area: 1/1;
    width: var(--card-w, 15em) !important;
    height: var(--card-h, 21em) !important;
    object-fit: cover !important;
    border-radius: var(--card-radius, 1em) !important;
    backface-visibility: var(--card-backface, visible) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);

    transform:
        rotateY(calc(var(--i) * var(--ba))) translateZ(calc(-1 * (0.5 * var(--card-w, 15em) + var(--gap, 2em)) / tan(0.5 * var(--ba)))) translateY(calc(var(--y, 0) * 1em)) !important;

    transition: filter 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.gdk-ms-inside-card:hover {
    filter: brightness(1.2) contrast(1.1);
    border-color: rgba(34, 211, 238, 0.8);
    z-index: 10;
}

/* Controls Panel Styling */
.gdk-ms-inside-controls {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(10, 15, 25, 0.85);
    backdrop-filter: blur(15px);
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7);
    min-width: 150px;
}

.gdk-ms-inside-playback {
    display: flex;
    justify-content: center;
    gap: var(--nav-gap, 8px) !important;
}

.gdk-ms-inside-btn {
    background: var(--nav-bg, rgba(255, 255, 255, 0.1)) !important;
    color: var(--nav-color, #ffffff) !important;
    border: 1px solid var(--nav-border, rgba(255, 255, 255, 0.15)) !important;
    cursor: pointer;
    width: var(--nav-btn-size, 40px) !important;
    height: var(--nav-btn-size, 40px) !important;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--nav-icon-size, 18px) !important;
}

.gdk-ms-inside-btn:hover {
    background: var(--nav-bg-hover, rgba(34, 211, 238, 0.4)) !important;
    border-color: var(--nav-border-hover, #22d3ee) !important;
    color: var(--nav-color-hover, #22d3ee) !important;
    transform: translateY(-2px);
}

.gdk-ms-inside-btn i {
    font-family: eicons !important;
    font-style: normal;
    line-height: 1;
    display: inline-block !important;
    /* Ensure visibility */
    color: inherit !important;
}

.gdk-hidden {
    display: none !important;
}

.gdk-ms-inside-btn.is-active {
    background: var(--nav-bg-hover, rgba(34, 211, 238, 0.6)) !important;
    border-color: var(--nav-border-hover, #22d3ee) !important;
}