/* ==========================================================
   EDUK HOMEPAGE 3D CUBE
   Bootstrap 5 version
   ========================================================== */

.eduk-cube-wrap {
    --cube-size: 300px;
    --cube-half: 150px;

    position: relative;
    width: var(--cube-size);
    height: var(--cube-size);
    max-width: 100%;
    margin: 0 auto;
    perspective: 1500px;
}


/* ==========================================================
   CUBE
   ========================================================== */

.eduk-cube {
    position: relative;
    width: var(--cube-size);
    height: var(--cube-size);
    transform-style: preserve-3d;
    animation: edukCubeRotate 32s linear infinite;
}


/* Pause while visitor is interacting with cube */

.eduk-cube:hover,
.eduk-cube:focus-within {
    animation-play-state: paused;
}


/* ==========================================================
   CUBE FACES
   ========================================================== */

.eduk-cube-face {
    position: absolute;
    inset: 0;
    width: var(--cube-size);
    height: var(--cube-size);
    overflow: hidden;
    backface-visibility: hidden;
}


/* Front */

.eduk-cube-front {
    transform: translateZ(var(--cube-half));
}


/* Back */

.eduk-cube-back {
    transform: rotateY(180deg) translateZ(var(--cube-half));
}


/* Left */

.eduk-cube-left {
    transform:
        rotateY(-90deg)
        translateX(calc(var(--cube-half) * -1));

    transform-origin: left;
}


/* Right */

.eduk-cube-right {
    transform:
        rotateY(90deg)
        translateX(var(--cube-half));

    transform-origin: right;
}


/* Top */

.eduk-cube-top {
    transform:
        rotateX(-90deg)
        translateY(calc(var(--cube-half) * -1));

    transform-origin: top;
}


/* Bottom */

.eduk-cube-bottom {
    transform:
        rotateX(90deg)
        translateY(var(--cube-half));

    transform-origin: bottom;
}


/* ==========================================================
   ROTATION
   Keeps your existing pause / turn / pause behaviour
   ========================================================== */

@keyframes edukCubeRotate {

    0% {
        transform: rotateY(0deg);
    }

    24% {
        transform: rotateY(0deg);
    }

    30% {
        transform: rotateY(90deg);
    }

    49% {
        transform: rotateY(90deg);
    }

    55% {
        transform: rotateY(180deg);
    }

    72% {
        transform: rotateY(180deg);
    }

    76% {
        transform: rotateY(270deg);
    }

    96% {
        transform: rotateY(270deg);
    }

    99.999% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}


/* ==========================================================
   COMMON FACE STYLING
   ========================================================== */

.eduk-cube-panel {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}


/* ==========================================================
   FRONT - ADVANCED EDI
   ========================================================== */

.eduk-cube-advanced {
    background: #fff;
    color: #666;
    border: 2px solid maroon;
    text-align: left;
}

.eduk-cube-advanced h2 {
    margin: 0;
    padding: 6px;
    color: maroon;
    font-size: 18px;
    font-weight: 700;
}

.eduk-cube-advanced img {
    width: 90px;
    float: right;
    padding-top: 10px;
}


/* ==========================================================
   BACK - NEXT OPEN COURSES
   ========================================================== */

.eduk-cube-courses {
    background: #0066ff;
    color: #fff;
    text-align: left;
    font-size: 14px;
}

.eduk-cube-courses h3 {
    margin-top: 0;
    color: #fff;
    text-align: center;
    font-weight: 700;
}

.eduk-cube-courses p {
    margin-bottom: 0;
}

.eduk-cube-courses a {
    color: #fff;
    font-weight: 700;
}

.eduk-cube-courses a:hover,
.eduk-cube-courses a:focus {
    color: #fff;
    text-decoration: underline;
}

.eduk-cube-course-date {
    float: right;
    white-space: nowrap;
}

.eduk-cube-courses hr {
    border-color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   LEFT - E-LEARNING
   ========================================================== */

.eduk-cube-elearning {
    background:
        #fff
        url("/images/elearnscreen2.jpg")
        center / cover no-repeat;

    color: #000;
    text-align: center;
}

.eduk-cube-elearning p {
    padding-top: 30px;
}

.eduk-cube-elearning-list {
    font-size: 12px;
    line-height: 1.2;
}


/* ==========================================================
   RIGHT - FREE EVENTS
   ========================================================== */

.eduk-cube-events {
    background: #fff;
    color: #666;
    border: 2px solid maroon;
    text-align: left;
}

.eduk-cube-events h2 {
    margin: 0;
    padding: 6px;
    color: maroon;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.eduk-cube-events-image {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto 10px;
}

.eduk-cube-events p {
    margin-bottom: 0;
}

.eduk-cube-event-date {
    float: right;
    white-space: nowrap;
}


/* ==========================================================
   TOP AND BOTTOM
   These complete the physical cube but contain no content
   ========================================================== */

.eduk-cube-top,
.eduk-cube-bottom {
    background: #fff;
}


/* ==========================================================
   CUBE SHADOW
   ========================================================== */

.eduk-cube-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;

    background: rgba(0, 0, 0, 0.45);

    box-shadow:
        0 0 30px 30px rgba(0, 0, 0, 0.45);

    transform:
        translateX(-50%)
        rotateX(90deg)
        translateZ(-250px);

    pointer-events: none;
}


/* ==========================================================
   ACCESSIBILITY - REDUCED MOTION

   Visitors who have requested reduced motion get a
   stationary cube rather than continuous rotation.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .eduk-cube {
        animation: none;
        transform: rotateY(0deg);
    }

}


/* ==========================================================
   RESPONSIVE

   On screens narrower than the cube, scale the complete
   component down rather than allowing it to overflow.
   ========================================================== */

@media (max-width: 350px) {

    .eduk-cube-wrap {
        transform: scale(0.85);
        transform-origin: top center;
        margin-bottom: -45px;
    }

}


/* Hide the decorative shadow on smaller devices */

@media (max-width: 767.98px) {

    .eduk-cube-shadow {
        display: none;
    }

}