/**
 * Fronteam — Smooth Page Transitions
 * Entry animations, exit fades, video continuity, View Transitions API
 */

/* ================================= */
/* PREVENT WHITE FLASH BETWEEN PAGES */
/* ================================= */

html {
    background-color: #0a0a0f;
}

/* ================================= */
/* VIEW TRANSITIONS API (modern)     */
/* ================================= */

@view-transition {
    navigation: auto;
}

/* Nav and video stay in place - no animation */
.top-nav {
    view-transition-name: main-nav;
}
.image-side,
.video-side {
    view-transition-name: hero-video;
}

/* Content area transitions */
.page-content {
    view-transition-name: page-content;
}

/* Animate old content out */
::view-transition-old(page-content) {
    animation: ft-vt-out 0.15s ease-out forwards;
}

/* Animate new content in */
::view-transition-new(page-content) {
    animation: ft-vt-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Keep nav/video static during transition */
::view-transition-old(main-nav),
::view-transition-new(main-nav),
::view-transition-old(hero-video),
::view-transition-new(hero-video) {
    animation: none;
}

@keyframes ft-vt-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes ft-vt-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ================================= */
/* KEYFRAMES                         */
/* ================================= */

@keyframes ft-slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ft-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ft-scaleUp {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================= */
/* HIDE CONTENT UNTIL ANIMATED       */
/* ================================= */

/*
 * Content starts hidden. The .ft-in class (added by JS)
 * triggers the stagger animation that reveals it.
 * Fallback: if JS fails, content shows after 1.5s.
 */
.page-content > *,
.page-content > .content > * {
    opacity: 0;
    animation: ft-fallback 0s 1.5s forwards;
}

/* Loading spinner always visible */
.page-content .loading-container,
.page-content > .loading-container {
    opacity: 1 !important;
    animation: none !important;
}

@keyframes ft-fallback {
    to { opacity: 1; }
}

/* Footer & quote hidden until animated */
.shared-footer {
    opacity: 0;
    animation: ft-fallback 0s 1.5s forwards;
}

.image-quote {
    opacity: 0;
    animation: ft-fallback 0s 1.5s forwards;
}

/* ================================= */
/* SPLIT-LAYOUT: CONTENT ENTRY       */
/* ================================= */

/* Direct children of page-content */
.page-content.ft-in > * {
    animation: ft-slideUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--ft-i, 0) * 70ms + 100ms);
}

/* Nested .content wrapper (support page) */
.page-content.ft-in > .content > * {
    animation: ft-slideUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--ft-i, 0) * 70ms + 100ms);
}

/* Cards & forms: scale-up instead of slide */
.page-content.ft-in form,
.page-content.ft-in .contact-info,
.page-content.ft-in .important-notice,
.page-content.ft-in > .content > form,
.page-content.ft-in > .content > .contact-info {
    animation-name: ft-scaleUp;
    animation-duration: 0.5s;
}

/* ================================= */
/* FOOTER & QUOTE ENTRY              */
/* ================================= */

.shared-footer.ft-in {
    animation: ft-fadeIn 0.4s ease-out forwards;
    animation-delay: 0.55s;
}

.image-quote.ft-in {
    animation: ft-fadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

/* ================================= */
/* HOME PAGE ENTRY                   */
/* ================================= */

.content-side.ft-home-in > * {
    animation: ft-slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--ft-i, 0) * 80ms + 80ms);
}

/* ================================= */
/* EXIT TRANSITION (JS fallback)     */
/* ================================= */

.ft-exiting {
    pointer-events: none;
}

.ft-exiting .page-content,
.ft-exiting .shared-footer {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    opacity: 0 !important;
    transform: translateY(-8px);
    animation: none !important;
}

.ft-exiting .page-content *,
.ft-exiting .shared-footer * {
    animation: none !important;
}

/* Home page exit */
.ft-exiting.content-side > * {
    transition: opacity 0.15s ease-out;
    opacity: 0 !important;
    animation: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .page-content > *,
    .page-content > .content > *,
    .shared-footer,
    .image-quote {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .page-content.ft-in > *,
    .page-content.ft-in > .content > *,
    .shared-footer.ft-in,
    .image-quote.ft-in,
    .content-side.ft-home-in > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}