/* Kairos SaaS Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Toast animations */
@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.toast-slide {
    animation: slideIn 0.25s ease-out forwards;
}

/* Thermal receipt print format */
@media print {
    body * {
        visibility: hidden;
    }
    #print-receipt-section, #print-receipt-section * {
        visibility: visible;
    }
    #print-receipt-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm;
        margin: 0;
        padding: 10px;
        font-family: monospace;
    }
}

/* ==========================================================================
   CSS Cross-Document View Transitions (Level 2)
   MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition
   ========================================================================== */

/* 1. Opt-in all same-origin navigations to Cross-Document View Transitions */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* 2. Persistent View Transition Names (Shared elements across landing pages) */
.landing-header,
header#mainHeader,
body > header {
    view-transition-name: main-navigation;
}

.brand-logo-img {
    view-transition-name: brand-logo;
}

.session-active-banner {
    view-transition-name: session-banner;
}

.desktop-header-cta {
    view-transition-name: header-cta;
}

.active-nav-link,
header nav a.border-b-2 {
    view-transition-name: active-nav-link;
}

/* 3. Layering & Group Animation for Persistent Elements */
::view-transition-group(main-navigation) {
    z-index: 100;
}
::view-transition-group(session-banner) {
    z-index: 110;
}
::view-transition-group(brand-logo) {
    z-index: 120;
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-group(header-cta) {
    z-index: 120;
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-group(active-nav-link) {
    z-index: 120;
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. Luxury Default Cross-Document Root Page Transition (Lift & Fade) */
@keyframes vt-page-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.995);
    }
}

@keyframes vt-page-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

::view-transition-old(root) {
    animation: 0.22s cubic-bezier(0.4, 0, 1, 1) both vt-page-fade-out;
}

::view-transition-new(root) {
    animation: 0.32s cubic-bezier(0.16, 1, 0.3, 1) both vt-page-fade-in;
}

/* 5. Directional Slide Animations (via forward & backward types) */
@keyframes vt-slide-left-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-35px);
    }
}

@keyframes vt-slide-left-in {
    from {
        opacity: 0;
        transform: translateX(45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes vt-slide-right-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(35px);
    }
}

@keyframes vt-slide-right-in {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

:root[data-transition-direction="forward"]::view-transition-old(root),
html:active-view-transition-type(forward) ::view-transition-old(root) {
    animation: 0.24s cubic-bezier(0.4, 0, 1, 1) both vt-slide-left-out;
}
:root[data-transition-direction="forward"]::view-transition-new(root),
html:active-view-transition-type(forward) ::view-transition-new(root) {
    animation: 0.32s cubic-bezier(0.16, 1, 0.3, 1) both vt-slide-left-in;
}

:root[data-transition-direction="backward"]::view-transition-old(root),
html:active-view-transition-type(backward) ::view-transition-old(root) {
    animation: 0.24s cubic-bezier(0.4, 0, 1, 1) both vt-slide-right-out;
}
:root[data-transition-direction="backward"]::view-transition-new(root),
html:active-view-transition-type(backward) ::view-transition-new(root) {
    animation: 0.32s cubic-bezier(0.16, 1, 0.3, 1) both vt-slide-right-in;
}

/* 6. Accessibility (Respect prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}