/*!
 Theme Name: Rubrum
 Theme URI:
 Author: Dev Team
 Author URI:
 Description: Rubrum is a blank canvas for your ideas and it makes the block editor your best brush.
 Requires at least: 6.6
 Tested up to: 6.8.3
 Requires PHP: 8.0
 Version: 6.8
 Text Domain: rubrum
*/


/** Add your custom styles here **/


body.home {
    background-color: #000 !important;
    color: #FFF !important;
}

/** Page - Home **/

@media (min-width: 720px) {
    .card-issues {
        aspect-ratio: 3 / 2 !important;
        padding: 140px 140px 50px !important;
    }
}
@media (max-width: 719.98px) {
    .cover-issues {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .card-issues {
        aspect-ratio: 3 / 2 !important;
        padding: 120px 120px 40px !important;
    }
}
@media (max-width: 575.98px) {
    .group-issues {
        gap: 30px !important;
    }
    .cover-issues {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    .card-issues {
        aspect-ratio: unset !important;
        background: #dddddd url('/wp-content/uploads/bg_briefcase.webp') no-repeat center;
        background-size: cover;
        border: 2px solid black;
        border-radius: 8px;
        padding: 30px 30px !important;
    }
    .card-issues img.wp-block-cover__image-background {
        display: none !important;
    }
}


/** Animate **/
.block-editor .animate-helper {
    display: none;
}

/* 1. Wrapper: Centers the animation and handles the "sticky" behavior */
.cover-animate-container {
    position: sticky !important;
    position: -webkit-sticky;
    top: 0;
    height: 100vh; /* Takes up full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.scroll-track {
    height: 200vh; /* The distance the user scrolls during the animation */
}

/* 2. Main Container: Scales based on Window Height */
.animate-container {
    display: flex;
    /* Height is primary; width follows aspect ratio */
    height: 70vh;
    max-height: 672px;
    max-width: 95vw; /* Prevents it from being wider than the screen on mobile */
    aspect-ratio: 1080 / 672;
    position: relative;
    background: transparent url('/wp-content/uploads/animate-room.webp') no-repeat 50% 0%;
    background-size: contain; /* Changed from 100% for better scaling */
    z-index: 1;
    transition: all 0.33s ease-in-out;
    transform-style: preserve-3d;
}
@media (max-width: 1399.98px) {
    .animate-container {
        height: 65vh;
    }
    .scroll-track {
        height: 250vh;
    }
}
@media (max-width: 991.98px) {
    .animate-container {
        height: 56vw;
    }
}
@media (max-width: 575.98px) {
    .scroll-track {
        height: 200vh;
    }
}

/* 3. Character (Norris-2) - Using percentages for scaling */
.animate-container::before {
    content: "";
    display: block;
    width: 24%;
    height: 69.94%;
    position: absolute;
    top: 26%;
    left: 22.2%;
    opacity: 1;
    background-image: url('/wp-content/uploads/norris-2.webp');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 6;
}

/* 4. Door Frame */
.animate-container::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('/wp-content/uploads/animate-door-frame.webp');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 7;
    pointer-events: none;
}

/* 5. Doors - Shared fluid styles */
.animate-door-left,
.animate-door-right {
    width: 27.77%; /* 300/1080 */
    height: auto;
    position: absolute;
    top: 5.9%;
    z-index: 80;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    backface-visibility: hidden;
}
.animate-door-left {
    left: 22.3%; /* Calculated to align with frame */
    transform-origin: left center;
}
.animate-door-right {
    right: 22.2%;
    transform-origin: right center;
}

/* 6. Door Backsides (Open state images) */
.animate-door-left:after,
.animate-door-right:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}
.animate-door-left:after { background-image: url('/wp-content/uploads/door-left-open.webp'); }
.animate-door-right:after { background-image: url('/wp-content/uploads/door-right-open.webp'); }

/* 7. Sign and Character 1 */
.animate-door-sign {
    position: absolute;
    top: 2.3%;
    left: calc(50% - 13.25%);
    width: 26.5%;
    transform: translateZ(80px);
    z-index: 99;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.animate-door-sign.is-faded {
    opacity: 0;
    visibility: hidden;
}
.animate-norris-1 {
    position: absolute;
    top: 15.2%;
    left: 7%;
    width: 24%;
    z-index: 999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.animate-norris-1.is-faded {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 1079.98px) {
    .animate-norris-1 {
        top: 15.2%;
        left: 7%;
    }
    .animate-door-left,
    .animate-door-right {
        width: 27.9%;
        top: 5.7%;
    }
    .animate-door-left {
        left: 22.3%;
    }
    .animate-door-right {
        right: 22.1%;
    }
}

/* 8. Responsive Headings */
.main-heading-container {
    position: relative;
    min-height: 180px;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}
.main-heading-1, .main-heading-2 {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
}
.main-heading-2 {
    opacity: 0; /* Hidden by default */
}
@media (min-width: 1600px) {
    h1.main-heading-two {
        font-size: 75px;
    }
}
@media (max-width: 1599.98px) {
    h1.main-heading-two {
        font-size: clamp(28px, 4.375vw, 70px);
    }
    h2.main-heading-one {
        font-size: clamp(21px, 3.25vw, 52px);
    }
}

/* Helper for images inside containers to stay fluid */
.animate-container img,
.animate-door-sign img,
.animate-norris-1 img {
    width: 100%;
    height: auto;
    display: block;
}

/** Hiding animation on mobile - DISABLE --
@media (min-width: 1080px) {
    .cover-mobile-main-1,
    .cover-mobile-main-2 {
        display: none !important;
    }
}
@media (max-width: 1079.98px) {
    .animate-helper,
    .scroll-track {
        display: none !important;
    }
}
**/

footer a {
    text-decoration: none !important;
}
footer a:hover {
    text-decoration: underline !important;
}