/* Base resets */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overscroll-behavior: none; }

/* Page transitions */
.page-enter { animation: pageEnter 0.3s ease-out forwards; }
.page-exit { animation: pageExit 0.2s ease-in forwards; }

@keyframes pageEnter {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pageExit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-20px); }
}

/* Bounce animation for buttons */
.btn-bounce:active { transform: scale(0.95); }
.btn-bounce { transition: transform 0.1s ease; }

/* Pulse animation for streak fire */
.fire-pulse { animation: firePulse 2s ease-in-out infinite; }
@keyframes firePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Completion celebration */
.celebrate { animation: celebrate 0.6s ease-out; }
@keyframes celebrate {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Slide up animation */
.slide-up { animation: slideUp 0.3s ease-out forwards; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade in animation with stagger support */
.fade-in { animation: fadeIn 0.4s ease-out forwards; opacity: 0; }
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Card shimmer loading */
.shimmer {
    background: linear-gradient(90deg, #1B2B34 25%, #243840 50%, #1B2B34 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Streak day circle */
.streak-day {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
}

/* YouTube responsive embed */
.video-container {
    position: relative;
    padding-bottom: 80%; /* Taller aspect ratio for shorts */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    border-radius: 16px;
}

/* Bottom nav safe area */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Confetti particles */
.confetti-particle {
    position: fixed;
    pointer-events: none;
    animation: confettiFall 1.5s ease-out forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Modal overlay */
.modal-overlay {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

/* Avatar selection ring */
.avatar-selected {
    box-shadow: 0 0 0 3px #FF9600;
}

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Drag & Drop */
.drag-item {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.drag-active .drag-item {
    transition: transform 0.15s ease;
}
.drag-clone {
    border-radius: 16px;
    transition: none !important;
    animation: none !important;
}
.drag-handle {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}