/* Cluelessly Active - Custom Styles */

/* Smooth page transitions */
.view-enter {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bottom sheet slide up */
.sheet-enter {
    animation: slideUp 0.3s ease-out;
}

.sheet-exit {
    animation: slideDown 0.2s ease-in forwards;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Timer ring */
.timer-ring {
    transform: rotate(-90deg);
}

.timer-ring-circle {
    transition: stroke-dashoffset 1s linear;
}

/* Pulse animation for active states */
.pulse-dot {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

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

/* Safe area padding for PWA */
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Bottom nav height spacing */
.pb-nav { padding-bottom: 5rem; }

/* Onboarding dots */
.dot-active {
    width: 24px;
    border-radius: 12px;
    background-color: #A8BFA3;
}

/* Calendar day cell */
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.calendar-day:hover {
    background-color: #F4F7F3;
}

.calendar-day.today {
    font-weight: 700;
    border: 2px solid #A8BFA3;
}

.calendar-day.period {
    background-color: #F6E8E6;
    color: #D8A7A1;
}

.calendar-day.selected {
    background-color: #A8BFA3;
    color: white;
}

/* Toast animations */
.toast-enter {
    animation: toastIn 0.3s ease-out;
}

.toast-exit {
    animation: toastOut 0.2s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

/* Progress bar fill */
.progress-fill {
    transition: width 0.5s ease-out;
}

/* Habit checkbox animation */
.habit-check {
    transition: all 0.2s ease;
}

.habit-check.checked {
    background-color: #A8BFA3;
    border-color: #A8BFA3;
}

/* Chart canvas */
.chart-container {
    position: relative;
    width: 100%;
}

/* Splash screen */
.splash-bg {
    background-color: #F5F1E8;
}

.splash-fade-in {
    animation: splashFadeIn 0.8s ease-out;
}

@keyframes splashFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.splash-bounce {
    animation: splashBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes splashBounce {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

.splash-slide-up {
    animation: splashSlideUp 0.6s ease-out 0.3s both;
}

.splash-slide-up-delay {
    animation: splashSlideUp 0.6s ease-out 0.5s both;
}

@keyframes splashSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.splash-dot {
    animation: splashDotPulse 1.2s ease-in-out infinite;
}

@keyframes splashDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* Active nav item */
.nav-item.active svg {
    color: #A8BFA3;
}

.nav-item.active span {
    color: #A8BFA3;
    font-weight: 600;
}