/**
 * BettyBloom Animation System
 * Premium mobile-first animations for all UI elements
 * 
 * IMPORTANT: This file ENHANCES existing styles. It does not replace them.
 * All existing functionality, colors, layouts, and components are preserved.
 */

/* ========================================================== */
/* 1. ANIMATION SYSTEM VARIABLES                              */
/* ========================================================== */

:root {
    /* Defines the safe areas provided by the device */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Push the body content down and up */
body {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* Fix the bottom nav so it sits ABOVE the Android navigation bar */
.bottom-nav {
    padding-bottom: calc(8px + var(--safe-bottom));
    height: calc(var(--nav-height) + var(--safe-bottom));
}

/* If you have a sticky header on the dashboard, push it down */
.dashboard-header {
    top: var(--safe-top);
}
:root {
    /* Animation speeds */
    --anim-speed-fast: 0.15s;
    --anim-speed-normal: 0.3s;
    --anim-speed-slow: 0.6s;
    --border-rotate-speed: 4s;
    --border-rotate-speed-fast: 2s;
    
    /* Glow intensity */
    --glow-intensity-subtle: 0.15;
    --glow-intensity-medium: 0.25;
    --glow-intensity-strong: 0.4;
    
    /* Easing functions */
    --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Gradient colors (complementary to existing brand) */
    --grad-pink: #e91e8c;
    --grad-magenta: #ff4081;
    --grad-purple: #9c27b0;
    --grad-blue: #2196f3;
    --grad-cyan: #00bcd4;
    --grad-orange: #ff9800;
    
    /* Existing compatibility variables */
    --anim-border-radius-sm: 10px;
    --anim-border-radius-md: 14px;
    --anim-border-radius-lg: 20px;
    --anim-border-radius-xl: 24px;
    --anim-border-radius-pill: 9999px;
}

/* ========================================================== */
/* 2. PROPERTY REGISTRATION (for animated angle)              */
/* ========================================================== */

@property --bb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ========================================================== */
/* 3. KEYFRAME ANIMATIONS                                     */
/* ========================================================== */

@keyframes bb-rotate-border {
    0% { --bb-angle: 0deg; }
    100% { --bb-angle: 360deg; }
}

@keyframes bb-ripple-expand {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes bb-soft-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 140, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(233, 30, 140, 0);
    }
}

@keyframes bb-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bb-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes bb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes bb-checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bb-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes bb-spin {
    to { transform: rotate(360deg); }
}

/* ========================================================== */
/* 4. UNIVERSAL SMOOTH TRANSITIONS                            */
/* ========================================================== */

/* Smooth transition for interactive elements (opt-in class) */
.bb-smooth {
    transition: 
        transform var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        border-color var(--anim-speed-normal) var(--ease-out-smooth),
        background-color var(--anim-speed-normal) var(--ease-out-smooth);
}

/* ========================================================== */
/* 5. ANIMATED GRADIENT BORDER SYSTEM                         */
/* ========================================================== */

/* Base class: adds animated gradient border to any element */
.bb-animated-border {
    position: relative;
    isolation: isolate;
}

.bb-animated-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--bb-angle),
        var(--grad-pink) 0deg,
        var(--grad-magenta) 60deg,
        var(--grad-purple) 120deg,
        var(--grad-blue) 180deg,
        var(--grad-cyan) 240deg,
        var(--grad-orange) 300deg,
        var(--grad-pink) 360deg
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: bb-rotate-border var(--border-rotate-speed) linear infinite;
    opacity: 0.9;
    pointer-events: none;
}

/* Soft glow halo around the border */
.bb-animated-border::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: inherit;
    filter: blur(12px);
    opacity: 0;
    z-index: -2;
    transition: opacity var(--anim-speed-normal) ease;
    pointer-events: none;
}

/* Enhanced glow on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    .bb-animated-border:hover::after {
        opacity: var(--glow-intensity-medium);
    }
    
    .bb-animated-border:hover::before {
        animation-duration: var(--border-rotate-speed-fast);
    }
}

/* ========================================================== */
/* 6. GLOW EFFECTS                                            */
/* ========================================================== */

.bb-glow {
    position: relative;
}

.bb-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 20px rgba(233, 30, 140, var(--glow-intensity-medium));
    opacity: 0;
    transition: opacity var(--anim-speed-normal) ease;
    pointer-events: none;
    z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
    .bb-glow:hover::after {
        opacity: 1;
    }
}

/* Static glow (always visible) */
.bb-glow-static {
    box-shadow: 0 4px 20px rgba(233, 30, 140, var(--glow-intensity-subtle));
}

/* ========================================================== */
/* 7. RIPPLE EFFECT                                           */
/* ========================================================== */

/* Ripple container - any clickable element */
.bb-ripple-host {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    /* Ensure children above the ripple */
    isolation: isolate;
}

/* Ripple element (created by JS) */
.bb-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.35) 40%,
        transparent 70%
    );
    transform: scale(0);
    pointer-events: none;
    animation: bb-ripple-expand var(--anim-speed-slow) var(--ease-out-smooth) forwards;
    z-index: 0;
}

/* Ripple for dark backgrounds */
.bb-ripple-host.bb-ripple-dark .bb-ripple {
    background: radial-gradient(
        circle,
        rgba(233, 30, 140, 0.4) 0%,
        rgba(233, 30, 140, 0.2) 40%,
        transparent 70%
    );
}

/* Ensure content sits above ripple */
.bb-ripple-host > * {
    position: relative;
    z-index: 1;
}

/* ========================================================== */
/* 8. PRESS EFFECT                                            */
/* ========================================================== */

.bb-press {
    transition: transform var(--anim-speed-fast) var(--ease-out-smooth);
}

.bb-press:active {
    transform: scale(0.97);
}

/* Larger press for cards */
.bb-press-card:active {
    transform: scale(0.98);
}

/* ========================================================== */
/* 9. HOVER ELEVATION                                         */
/* ========================================================== */

.bb-lift {
    transition: 
        transform var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .bb-lift:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
}

/* ========================================================== */
/* 10. BUTTON ENHANCEMENTS                                    */
/* ========================================================== */

/* Enhance existing .btn-base with smooth transitions */
.btn {
    transition: 
        transform var(--anim-speed-fast) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        filter var(--anim-speed-normal) var(--ease-out-smooth);
    will-change: transform;
}

/* Auto-add ripple host to buttons with .btn class */
.btn.bb-ripple-host {
    /* ensures ripple works well inside existing buttons */
    overflow: hidden;
}

/* Primary buttons: hover lift + press */
.btn-primary {
    position: relative;
    isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(233, 30, 140, 0.28);
    }
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--anim-speed-fast);
}

/* Disabled buttons - no animation */
.btn:disabled,
.btn.disabled {
    animation: none !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================================== */
/* 11. CARD ANIMATION SYSTEM                                  */
/* ========================================================== */

/* Level 1: Subtle - for ordinary info cards */
.bb-card-subtle {
    transition: 
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        transform var(--anim-speed-normal) var(--ease-out-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .bb-card-subtle:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
        transform: translateY(-1px);
    }
}

/* Level 2: Interactive - for clickable cards */
.bb-card-interactive {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: 
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        transform var(--anim-speed-normal) var(--ease-out-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .bb-card-interactive:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(233, 30, 140, 0.12);
    }
}

.bb-card-interactive:active {
    transform: scale(0.98);
    transition-duration: var(--anim-speed-fast);
}

/* Level 3: Featured - important content */
.bb-card-featured {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.bb-card-featured::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--bb-angle),
        var(--grad-pink) 0deg,
        var(--grad-magenta) 90deg,
        var(--grad-purple) 180deg,
        var(--grad-blue) 270deg,
        var(--grad-pink) 360deg
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: bb-rotate-border var(--border-rotate-speed) linear infinite;
    opacity: 0.85;
    pointer-events: none;
}

/* Level 4: Premium/Hero - highest importance */
.bb-card-premium {
    position: relative;
    isolation: isolate;
    overflow: visible;
    box-shadow: 
        0 4px 20px rgba(233, 30, 140, 0.12),
        0 0 40px rgba(233, 30, 140, 0.08);
}

.bb-card-premium::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--bb-angle),
        var(--grad-pink) 0deg,
        var(--grad-magenta) 45deg,
        var(--grad-purple) 90deg,
        var(--grad-blue) 135deg,
        var(--grad-cyan) 180deg,
        var(--grad-orange) 225deg,
        var(--grad-magenta) 270deg,
        var(--grad-pink) 360deg
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: bb-rotate-border var(--border-rotate-speed) linear infinite;
    opacity: 0.95;
    pointer-events: none;
}

.bb-card-premium::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: inherit;
    filter: blur(16px);
    opacity: var(--glow-intensity-subtle);
    z-index: -2;
    animation: bb-soft-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* ========================================================== */
/* 12. INPUT FIELD ENHANCEMENTS                               */
/* ========================================================== */

/* Smooth focus transitions on all inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    transition: 
        border-color var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        background-color var(--anim-speed-normal) var(--ease-out-smooth);
}

/* Enhanced focus state with soft glow */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 
        0 0 0 3px rgba(233, 30, 140, 0.12),
        0 0 20px rgba(233, 30, 140, 0.08);
}

/* Password wrapper focus enhancement */
.password-wrapper:focus-within {
    transition: box-shadow var(--anim-speed-normal) ease;
}

/* ========================================================== */
/* 13. ALERT / MESSAGE ANIMATIONS                             */
/* ========================================================== */

.alert {
    animation: bb-slide-up var(--anim-speed-normal) var(--ease-out-smooth);
}

/* Success state */
.alert-success {
    position: relative;
}

.alert-success::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #16a34a;
    border-radius: 3px 0 0 3px;
    animation: bb-checkmark 0.4s var(--ease-spring) backwards;
}

/* Error state */
.alert-error {
    position: relative;
}

.alert-error {
    animation: bb-slide-up var(--anim-speed-normal) var(--ease-out-smooth),
               bb-shake 0.4s var(--ease-out-smooth) 0.2s;
}

/* ========================================================== */
/* 14. MODAL / DROPDOWN ANIMATIONS                            */
/* ========================================================== */

.bb-modal-overlay {
    animation: bb-fade-in var(--anim-speed-normal) var(--ease-out-smooth);
}

.bb-modal {
    animation: bb-scale-in var(--anim-speed-normal) var(--ease-spring);
}

/* ========================================================== */
/* 15. LOADING STATES                                         */
/* ========================================================== */

.bb-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(233, 30, 140, 0.2);
    border-top-color: var(--primary, #e91e8c);
    border-radius: 50%;
    animation: bb-spin 0.7s linear infinite;
}

/* Button loading state (preserves existing behavior) */
.btn.bb-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.bb-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bb-spin 0.7s linear infinite;
}

/* ========================================================== */
/* 16. UTILITY ANIMATIONS                                     */
/* ========================================================== */

.bb-fade-in {
    animation: bb-fade-in var(--anim-speed-normal) var(--ease-out-smooth);
}

.bb-slide-up {
    animation: bb-slide-up var(--anim-speed-normal) var(--ease-out-smooth);
}

.bb-scale-in {
    animation: bb-scale-in var(--anim-speed-normal) var(--ease-spring);
}

/* Staggered entrance for lists/grids */
.bb-stagger > * {
    animation: bb-slide-up var(--anim-speed-normal) var(--ease-out-smooth) backwards;
}

.bb-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.bb-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.bb-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.bb-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.bb-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.bb-stagger > *:nth-child(6) { animation-delay: 0.30s; }
.bb-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.bb-stagger > *:nth-child(8) { animation-delay: 0.40s; }

/* ========================================================== */
/* 17. PRESERVE EXISTING AUTHS (do not override)              */
/* ========================================================== */

/* Existing .auth-card keeps its styling, but we add subtle entrance */
.auth-card {
    animation: bb-scale-in var(--anim-speed-slow) var(--ease-out-smooth);
}

/* Existing .auth-form button gets ripple ready */
.auth-form .btn-primary {
    position: relative;
    overflow: hidden;
}

/* Existing cycle card gets premium treatment (uses existing .cycle-card) */
.cycle-card:not(.empty) {
    /* Border rotation already handled in dashboard.css - we just add glow */
    box-shadow: 
        var(--shadow-md, 0 4px 20px rgba(0,0,0,0.06)),
        0 0 30px rgba(233, 30, 140, 0.08);
    transition: 
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth),
        transform var(--anim-speed-normal) var(--ease-out-smooth);
}

/* Existing .action-btn.primary - ripple ready */
.action-btn.primary {
    position: relative;
    overflow: hidden;
}

/* Existing .checkin-card gets interactive treatment */
.checkin-card {
    transition: 
        transform var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth);
}

/* Existing .overview-item gets lift */
.overview-item {
    transition: 
        transform var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth);
}

/* Existing .learn-card gets interactive feel */
.learn-card {
    transition: 
        transform var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth);
}

/* ========================================================== */
/* 18. NAV ITEM ANIMATIONS                                    */
/* ========================================================== */

.nav-item {
    position: relative;
    transition: 
        color var(--anim-speed-normal) var(--ease-out-smooth),
        transform var(--anim-speed-fast) var(--ease-out-smooth);
}

.nav-item:active {
    transform: scale(0.92);
}

/* Nav icon subtle scale on active state change */
.nav-item.active .nav-icon {
    animation: bb-scale-in var(--anim-speed-normal) var(--ease-spring);
}

/* ========================================================== */
/* 19. ONBOARDING PROGRESS ANIMATION                          */
/* ========================================================== */

.progress-fill {
    transition: width var(--anim-speed-slow) var(--ease-out-smooth);
}

/* Option cards get ripple-ready */
.option-card {
    transition: 
        transform var(--anim-speed-fast) var(--ease-out-smooth),
        border-color var(--anim-speed-normal) var(--ease-out-smooth),
        background-color var(--anim-speed-normal) var(--ease-out-smooth),
        box-shadow var(--anim-speed-normal) var(--ease-out-smooth);
}

.option-card:active {
    transform: scale(0.97);
}

/* ========================================================== */
/* 20. RESPONSIVE ADJUSTMENTS                                 */
/* ========================================================== */

/* Reduce animation intensity on very small screens for performance */
@media (max-width: 360px) {
    :root {
        --border-rotate-speed: 6s;
    }
    
    .bb-card-premium::after {
        filter: blur(10px);
    }
}

/* ========================================================== */
/* 21. REDUCED MOTION SUPPORT                                 */
/* ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .bb-animated-border::before,
    .bb-card-featured::before,
    .bb-card-premium::before,
    .cycle-card:not(.empty)::before,
    .action-btn.primary::before {
        animation: none !important;
        background: linear-gradient(135deg, #e91e8c, #9c27b0);
    }
    
    .bb-card-premium::after,
    .nav-item.active .nav-icon {
        animation: none !important;
    }
    
    .bb-ripple {
        display: none !important;
    }
    
    /* Preserve hover/active feedback but without motion */
    .bb-press:active,
    .btn-primary:active,
    .bb-card-interactive:active,
    .option-card:active {
        transform: none;
        opacity: 0.85;
    }
}

/* ========================================================== */
/* 22. ACCESSIBILITY - FOCUS VISIBILITY                       */
/* ========================================================== */

/* Ensure keyboard focus remains visible */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary, #e91e8c);
    outline-offset: 2px;
}

/* Remove default outline only when our custom focus is active */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================================== */
/* 23. PRINT SAFETY                                           */
/* ========================================================== */

@media print {
    .bb-animated-border::before,
    .bb-card-featured::before,
    .bb-card-premium::before,
    .bb-card-premium::after,
    .bb-ripple {
        display: none !important;
    }
}