/**
 * Spatial Styles - Master Copy
 * Core 3D Cube Layout and Pass-Through Interaction Model
 * Version: 2.5 (Iframe Isolated)
 */

:root {
    --cube-size: 100vw;
    --cube-transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

#CubeCenter {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 5;
    pointer-events: auto;
}

#cube-container {
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d;
    position: relative;
    z-index: 10;
    perspective: 1000px; /* Moved here for closer proximity to cube */
}

#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: var(--cube-transition);
    transform: translateZ(-50vw);
    pointer-events: auto;
    /* Changed from none */
}

.cube-side {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    visibility: hidden;
    /* HIDDEN by default to prevent event interception */
    pointer-events: none;
}

/* PASS-THROUGH: Only the active side intercepts pointer events */
.cube-side.active-side {
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100;
}

/* SETTLED STATE: After rotation, detach the face as a full-screen overlay to enable perfect iOS scrolling */
#cube.is-settled {
    transform-style: flat !important;
    transform: none !important; /* Flatten the parent context */
    transition: none !important; /* Disable transitions when settled to prevent "double animation" */
}

#cube.is-settled .active-side {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: none !important; /* Remove all 3D depth and rotation */
    z-index: 9999;
    visibility: visible !important;
    transition: none !important; /* Prevent any local animation during detachment */
}

.cube-side.active-side {
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Match cube for unified movement */
}

/* 3D face positions */
.face-front {
    transform: rotateY(0deg) translateZ(50vw);
}

.face-back {
    transform: rotateY(180deg) translateZ(50vw);
}

.face-left {
    transform: rotateY(-90deg) translateZ(50vw);
}

.face-right {
    transform: rotateY(90deg) translateZ(50vw);
}

.face-top {
    transform: rotateX(90deg) translateZ(50vw);
}

.face-bottom {
    transform: rotateX(-90deg) translateZ(50vw);
}

/* Iframe Content Container */
.cube-side-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    display: block;
    /* Native scrolling inside iframe */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Optional: Fallback loading state */
.cube-side:empty::after {
    content: "Loading...";
    color: #444;
    font-family: sans-serif;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}