/* =============================================================================
   RESET & ELEMENTOR WRAPPER NEUTRALIZER
   layout/css/base/reset.css

   Purpose:
   1. Universal box-sizing reset
   2. Neutralize Elementor wrapper divs still present in header.php/footer.php HTML
      (these divs no longer have Elementor CSS, so we make them transparent pass-throughs)
   3. HTML/Body base resets for video background transparency
   4. Video background system (all pages)
   5. Footer visibility control

   Load order: This file MUST load before all other project stylesheets.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Box-Sizing Reset
   ----------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   2. Elementor Wrapper Neutralizer

   The HTML still contains Elementor wrapper divs from the original WordPress
   template (header.php / footer.php). Without Elementor's CSS these are just
   unstyled divs, but we explicitly make them full-width pass-throughs to
   prevent any browser default or inherited styles from constraining width.
   ----------------------------------------------------------------------------- */

.site-main,
.page-content,
.elementor,
.elementor-inner,
.elementor-section-wrap,
.elementor-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-element-populated {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Push content below fixed navbar + fill available space */
.site-main {
    padding-top: 70px;
    flex: 1 0 auto;
}

@media (max-width: 768px) {
    .site-main {
        padding-top: 80px;
    }
}

/* Background overlays - make them invisible */
.elementor-background-overlay {
    display: none;
}

/* Elementor alignment utility classes (still used in HTML) */
.elementor-align-center {
    text-align: center;
}

.elementor-align-left {
    text-align: left;
}

.elementor-align-right {
    text-align: right;
}


/* -----------------------------------------------------------------------------
   3. HTML / Body / #page Resets

   Transparent background so our video/particle layers show through.
   No transforms that could break fixed positioning.
   ----------------------------------------------------------------------------- */

html,
body {
    transform: none;
    perspective: none;
    will-change: auto;
    background: transparent;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#page {
    transform: none;
    perspective: none;
    will-change: auto;
    background: transparent;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* =============================================
   4. VIDEO BACKGROUND SYSTEM (all pages)
   Fixed fullscreen video with crossfade
   ============================================= */

.video-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: #000;
}

.video-background-container.video-background-internal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.video-crossfade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out;
}

.video-crossfade.active {
    opacity: 1;
    z-index: 3;
}

.video-crossfade.fade-out {
    opacity: 0;
    z-index: 2;
}

.video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-poster-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.video-background-container.mobile-mode .video-poster-fallback {
    opacity: 1;
    z-index: 3;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.video-background-container.mobile-mode .video-crossfade,
.video-background-container.mobile-mode .video-background-overlay {
    display: none;
}

/* Image slideshow mode (alternative to video) */
.image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out;
    will-change: opacity, transform;
    transform: scale(1);
}

.image-slide.active {
    opacity: 1;
    z-index: 3;
}

.image-slide.fade-out {
    opacity: 0;
    z-index: 2;
}

/* Ken Burns — subtle pan & zoom while slide is visible */
.image-slide.kb-0.active { animation: kb-drift-0 14s ease-in-out forwards; }
.image-slide.kb-1.active { animation: kb-drift-1 14s ease-in-out forwards; }
.image-slide.kb-2.active { animation: kb-drift-2 14s ease-in-out forwards; }
.image-slide.kb-3.active { animation: kb-drift-3 14s ease-in-out forwards; }

/* Zoom in + drift right-down */
@keyframes kb-drift-0 {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.08) translate(1.2%, 0.8%); }
}

/* Zoom in + drift left-up */
@keyframes kb-drift-1 {
    0%   { transform: scale(1.06) translate(0.8%, 0.5%); }
    100% { transform: scale(1)    translate(-0.5%, -0.3%); }
}

/* Zoom out + drift right-up */
@keyframes kb-drift-2 {
    0%   { transform: scale(1.08) translate(-0.6%, 0.4%); }
    100% { transform: scale(1.01) translate(0.8%, -0.5%); }
}

/* Zoom in + drift left-down */
@keyframes kb-drift-3 {
    0%   { transform: scale(1)    translate(0.4%, -0.3%); }
    100% { transform: scale(1.07) translate(-1%, 0.6%); }
}

.video-mobile-indicator {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 9999;
    display: none;
}

/* Video Pause/Play Button */
.video-pause-btn {
    position: fixed;
    top: 70px;
    left: 12px;
    z-index: 999;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 50%;
    color: rgba(200, 185, 150, 0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0;
}

.video-pause-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(218, 165, 32, 0.6);
    color: #DAA520;
    transform: scale(1.1);
}

.video-pause-btn.paused {
    color: rgba(218, 165, 32, 0.8);
    border-color: rgba(218, 165, 32, 0.5);
}

@media (max-width: 768px) {
    .video-pause-btn {
        display: none !important;
    }
}


/* =============================================
   5. FOOTER - Hide Elementor footer, show custom footer
   ============================================= */

.elementor-459,
.elementor-element-6bd0133,
.elementor-element-5e7c61d3,
#colophon > .footer-width-fixer {
    display: none !important;
}

#colophon {
    display: none !important;
}

footer,
.footer-width-fixer {
    background: transparent;
}