/*
 * Best Lift — animations.css
 * Purpose: Preloader, scroll-hero, Before & After slider, control panel transitions
 * Phase ref: Phase 2-3
 *
 * Only the Digital Elevator Control Panel's structural/sticky styling is
 * implemented here so far (needed for index.php to render correctly).
 * The CSS/SVG preloader (2.3), scroll-driven hero parallax (2.4), and
 * Before & After slider (3.7) are separate upcoming slices — their
 * keyframes/transitions get added to this same file without touching
 * the control panel rules below.
 */

/* ---------------------------------------------------------------------
 * Digital Elevator Control Panel
 * Desktop: sticky vertical bar on the right edge.
 * Mobile:  bottom-fixed horizontal bar (touch-friendly).
 * ------------------------------------------------------------------- */
.elevator-control-panel {
    position: fixed;
    z-index: var(--z-control-panel);
    display: flex;
    background: var(--color-primary);
    box-shadow: var(--shadow-md);

    /* Mobile: bottom bar */
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-around;
}

.elevator-control-panel__btn {
    flex: 1;
    text-align: center;
    padding: var(--space-xs) 0;
    color: var(--color-text-on-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
}

.elevator-control-panel__btn:hover,
.elevator-control-panel__btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
    .elevator-control-panel {
        /* Desktop: vertical sidebar, right edge, vertically centered */
        top: 50%;
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
        flex-direction: column;
        width: var(--control-panel-width);
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    .elevator-control-panel__btn {
        padding: var(--space-sm) 0;
    }
}

/* main.js's IntersectionObserver adds/removes this as the visitor scrolls
   past each floor's section (#gf, #1f, #2f, #3f). */
.elevator-control-panel__btn.is-active {
    background: var(--color-accent);
}

/* ---------------------------------------------------------------------
 * Elevator Rise Preloader (2.3)
 * Injected entirely by animations.js (no markup added to header.php) —
 * a full-viewport overlay with an SVG car rising in a shaft, faded out
 * once window "load" fires.
 * ------------------------------------------------------------------- */
.bl-preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-midnight);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.bl-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bl-preloader__shaft {
    position: relative;
    width: 60px;
    height: 160px;
    border-left: 2px dashed rgba(248, 249, 250, 0.25);
    border-right: 2px dashed rgba(248, 249, 250, 0.25);
    overflow: hidden;
}

.bl-preloader__car {
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
    animation: bl-rise 1.2s ease-in-out infinite;
}

@keyframes bl-rise {
    0% {
        bottom: -60px;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        bottom: 160px;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* animations.js already skips injecting the preloader entirely when
       reduced motion is preferred — this is just a double-safety net. */
    .bl-preloader__car {
        animation: none;
        bottom: 50px;
        opacity: 1;
    }
}

/* =====================================================================
 * v37 CLASSIC — Header + Footer motion (replaces the v36 block).
 * Subtle only: logo fade-in, footer columns fade up once.
 * (Nav underline / hover transitions live in main.css.)
 * ===================================================================== */

@keyframes bl-logo-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.site-header__logo img {
    animation: bl-logo-enter 0.6s ease 0.5s backwards;
}

/* Mobile drawer: links fade in one after another */
@keyframes bl-drawer-item {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

.site-nav.is-open .site-nav__list li {
    animation: bl-drawer-item 0.35s ease backwards;
}
.site-nav.is-open .site-nav__list li:nth-child(1) { animation-delay: 0.05s; }
.site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 0.10s; }
.site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 0.15s; }
.site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 0.20s; }
.site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 0.25s; }
.site-nav.is-open .site-nav__list li:nth-child(6) { animation-delay: 0.30s; }

/* Footer columns: fade up when scrolled into view (main.js initReveal
   adds .js-reveal to <html> and .is-visible per column; with no JS
   nothing is hidden) */
.site-footer__col[data-reveal] {
    transition: opacity 0.7s ease var(--reveal-delay, 0s), transform 0.7s ease var(--reveal-delay, 0s);
}

.js-reveal .site-footer__col[data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
}

/* Respect OS-level reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-header__logo img,
    .site-nav.is-open .site-nav__list li {
        animation: none;
    }

    .site-nav__list li a,
    .site-nav__list li a::after,
    .lang-toggle,
    .site-footer__links li a,
    .site-footer__col[data-reveal] {
        transition: none;
    }

    .js-reveal .site-footer__col[data-reveal]:not(.is-visible) {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
 * v40 — hero slide text rises in each time a slide becomes active
 * ===================================================================== */
@keyframes bl-hero-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.hero__slide.is-active .hero__slide-content > * {
    animation: bl-hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero__slide.is-active .hero__slide-content > :nth-child(2) { animation-delay: 0.12s; }
.hero__slide.is-active .hero__slide-content > :nth-child(3) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active .hero__slide-content > * {
        animation: none;
    }
}

/* =====================================================================
 * v41 — hero: slow zoom on the active photo + dot progress bars
 * ===================================================================== */
@keyframes bl-hero-zoom {
    from { scale: 1; }
    to   { scale: 1.07; }
}

@keyframes bl-dot-fill {
    from { width: 0; }
    to   { width: 100%; }
}

.hero__slide.is-active .hero__slide-image {
    animation: bl-hero-zoom 9s ease-out forwards;
}

.hero__dot.is-active .hero__dot-fill {
    animation: bl-dot-fill var(--hero-rotate, 6000ms) linear forwards;
}

.hero__slider.is-paused .hero__dot-fill {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active .hero__slide-image {
        animation: none;
    }

    .hero__dot.is-active .hero__dot-fill {
        animation: none;
        width: 100%;
    }
}