/* app-like.css - Native app feel for mobile */

/* ── Tap Reactions ── */
.app-tap,
.btn,
.bottom-nav-item,
.hamburger-link,
.exam-card,
.history-item,
.profile-info-card,
.qa-card,
.session-item {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
}

.app-tap:active,
.bottom-nav-item:active,
.hamburger-link:active {
    transform: scale(0.96);
    opacity: 0.85;
}

/* ── Page Transition Overlay (mobile only) ── */
.page-transition-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: var(--bg-page, #F0F4F8);
    z-index: 999999;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}
[data-theme="dark"] .page-transition-overlay {
    background-color: var(--dark-bg, #0F172A);
}
.page-transition-overlay.loaded {
    opacity: 0;
}

body.is-transitioning {
    overflow: hidden;
}

/* ── Scroll Reveal Animation ── */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@media (min-width: 769px) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Stagger children on mobile ── */
@media (max-width: 768px) {
    .stagger-children > * {
        opacity: 0;
        transform: translateY(16px);
        animation: staggerIn 0.4s ease forwards;
    }
    .stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
    .stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
    .stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
    .stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
    .stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
    .stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
    .stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
    .stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
    .stagger-children > *:nth-child(n+9) { animation-delay: 0.45s; }
}

@keyframes staggerIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card press effect on mobile ── */
@media (max-width: 768px) {
    .exam-card:active,
    .history-item:active,
    .session-item:active,
    .qa-card:active,
    .profile-info-card:active,
    .dash-card:active {
        transform: scale(0.97);
        transition-duration: 0.1s;
    }
}

/* ── Smooth header shrink on scroll ── */
.app-header {
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

/* ── Bottom nav active indicator ── */
.bottom-nav-item.active .nav-icon {
    transform: translateY(-2px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Floating elements subtle float ── */
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.float-gentle {
    animation: subtleFloat 3s ease-in-out infinite;
}

/* ── Skeleton pulse animation ── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Toast slide in from bottom on mobile ── */
@media (max-width: 768px) {
    .toast-container {
        bottom: 80px !important;
        top: auto !important;
        left: 16px !important;
        right: 16px !important;
    }
}

/* ── Modal slide up on mobile ── */
@media (max-width: 768px) {
    .confirm-dialog,
    .modal-box {
        animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Global button tap highlight removal ── */
button, a, .list-group-item {
    -webkit-tap-highlight-color: transparent;
}

/* ── Smooth focus styles for accessibility ── */
:focus-visible {
    outline: 2px solid #0EA5E9;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Prevent overscroll bounce on mobile ── */
@media (max-width: 768px) {
    html {
        overscroll-behavior-y: contain;
    }
}

/* ── Safe area padding for notch devices ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .app-header {
        padding-top: env(safe-area-inset-top);
    }
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}