@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────


	OPEX Management Consultancy Service

	About:  Empowering students, professionals, and organizations through Lean, Risk, and Continuity—delivered via training, advisory, and strategic execution.

	We’re a principle-led management consultancy specializing in Lean Six Sigma, Business Continuity, and Integrated Risk Solutions—delivered through structured training, strategic implementation, and value-driven advisory.

	Whether you're a student, professional, or enterprise leader, our programs foster advancement through measurable results, practical application, and transformation-ready thinking.

	From certification training and feasibility analysis to safety-aligned optimization and technical strategy—we equip learners and leaders to navigate complexity with confidence and purpose.
	
	Author: Ricardo Pablo Rabang. Principal Consultant, ricardo.rabang@opex.ph

	Developer: Cross-Functional Advisor | Strategic Design & Technical Oversight, tech@opex.ph

	animate.css

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
Section	:	Motion System Root
Purpose	:	Define reusable timing and easing variables
─────────────────────────────────────────────────────────────────── */
:root {
    --motion-duration-fast: 0.3s;
    --motion-duration-medium: 0.6s;
    --motion-duration-slow: 1s;
    --motion-ease: ease-in-out;
}


/* ────────────────────────────────────────────────────────────────
Section	:	Accessibility/Reduced Motion
Purpose	:	Suppress motion for sensitive users or mobile fallback
─────────────────────────────────────────────────────────────────── */
/*
Purpose	:	Disables scroll smoothing, transitions, and animations for motion-sensitive users
*/
.mobile-reduce-motion {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ────────────────────────────────────────────────────────────────
Section	:	Fade Animations
Purpose	:	Gentle opacity transitions for entrance/exit
─────────────────────────────────────────────────────────────────── */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in var(--motion-duration-medium) var(--motion-ease);
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fade-out var(--motion-duration-medium) var(--motion-ease);
}


/* ────────────────────────────────────────────────────────────────
Section	:	Slide Animations
Purpose	:	Directional entrance transitions
─────────────────────────────────────────────────────────────────── */
@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slide-in-left var(--motion-duration-medium) var(--motion-ease);
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slide-in-right var(--motion-duration-medium) var(--motion-ease);
}


/* ────────────────────────────────────────────────────────────────
Section	:	Preloader Animation
Purpose	:	Fade out loading overlay after delay
─────────────────────────────────────────────────────────────────── */
@keyframes preloader-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}


/*
A subtle shadow: box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); This creates a light, barely noticeable shadow.

A medium shadow: box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); This is a more noticeable, but still clean, shadow.

A hard shadow: box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); This creates a strong, distinct shadow.
*/

.page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgb(var(--anti-flash-white)) url("../assets/img/pageload-spinner-v2.gif") no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: preloader-fade var(--motion-duration-fast) var(--motion-ease) 2s forwards;
    /* Updated shadow with higher opacity
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); */
    box-shadow: 0 0 50px 20px rgb(var(--oxford-blue));
}

.preloader-complete {
    animation-delay: 0.1s !important;
}