/* ============================================================
   FLAVOR PLATFORM - Advanced Animations & Micro-interactions v2
   ============================================================ */

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.fp-page-enter {
    animation: fpPageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ============================================================
   STAGGERED REVEAL
   ============================================================ */
.fp-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    animation: fpStaggerIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fp-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fp-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.fp-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.fp-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.fp-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.fp-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.fp-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.fp-stagger > *:nth-child(8) { animation-delay: 0.4s; }
.fp-stagger > *:nth-child(9) { animation-delay: 0.45s; }
.fp-stagger > *:nth-child(10) { animation-delay: 0.5s; }
.fp-stagger > *:nth-child(11) { animation-delay: 0.55s; }
.fp-stagger > *:nth-child(12) { animation-delay: 0.6s; }

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

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.fp-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-reveal.visible { opacity: 1; transform: translateY(0); }

.fp-reveal-delay-1 { transition-delay: 0.1s; }
.fp-reveal-delay-2 { transition-delay: 0.2s; }
.fp-reveal-delay-3 { transition-delay: 0.3s; }
.fp-reveal-delay-4 { transition-delay: 0.4s; }

.fp-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fp-fade-up.visible { opacity: 1; transform: translateY(0); }

.fp-fade-in { opacity: 0; transition: opacity 0.6s ease; }
.fp-fade-in.visible { opacity: 1; }

.fp-scale-in {
    opacity: 0; transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fp-scale-in.visible { opacity: 1; transform: scale(1); }

/* ============================================================
   LIKE ANIMATION
   ============================================================ */
.fp-heart-burst { position: relative; display: inline-flex; }

.fp-heart-burst::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.fp-heart-burst.burst::after {
    animation: fpHeartBurst 0.5s ease-out;
}

@keyframes fpHeartBurst {
    0% { opacity: 1; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2); }
}

.fp-heart-anim { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fp-heart-anim.liked { animation: fpHeartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes fpHeartPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ============================================================
   LOADING STATES
   ============================================================ */
.fp-skeleton {
    background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: fpShimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.fp-skeleton-text { height: 16px; margin-bottom: 8px; }
.fp-skeleton-text:last-child { width: 60%; }
.fp-skeleton-text.short { width: 40%; }
.fp-skeleton-text.medium { width: 70%; }
.fp-skeleton-title { height: 24px; margin-bottom: 12px; width: 80%; }
.fp-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.fp-skeleton-image { width: 100%; padding-top: 56.25%; }
.fp-skeleton-rect { border-radius: 12px; }

@keyframes fpShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Spinner */
.fp-spinner {
    width: 24px; height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: fpSpin 0.7s linear infinite;
}
.fp-spinner.lg { width: 40px; height: 40px; border-width: 4px; }

@keyframes fpSpin { to { transform: rotate(360deg); } }

/* Dots loading */
.fp-dots-loading { display: flex; gap: 6px; align-items: center; }
.fp-dots-loading span {
    width: 6px; height: 6px; border-radius: 50%; background: #2563eb;
    animation: fpDotBounce 1.4s ease-in-out infinite both;
}
.fp-dots-loading span:nth-child(1) { animation-delay: -0.32s; }
.fp-dots-loading span:nth-child(2) { animation-delay: -0.16s; }

@keyframes fpDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   RIPPLE EFFECT
   ============================================================ */
.fp-ripple { position: relative; overflow: hidden; }

.fp-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: fpRipple 0.6s linear;
    pointer-events: none;
}

@keyframes fpRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   BUTTON EFFECTS
   ============================================================ */
.fp-press { transition: transform 0.1s ease; }
.fp-press:active { transform: scale(0.97); }

.fp-glow { position: relative; }
.fp-glow::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    opacity: 0; z-index: -1; filter: blur(12px);
    transition: opacity 0.3s ease;
}
.fp-glow:hover::after { opacity: 0.3; }

/* ============================================================
   FLOATING & PULSE
   ============================================================ */
.fp-float { animation: fpFloat 3s ease-in-out infinite; }
@keyframes fpFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.fp-pulse { animation: fpPulse 2s ease-in-out infinite; }
@keyframes fpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================================
   IMAGE LOADING
   ============================================================ */
.fp-img-load { opacity: 0; transition: opacity 0.4s ease; }
.fp-img-load.loaded { opacity: 1; }

.fp-img-progressive { filter: blur(20px); transition: filter 0.5s ease; }
.fp-img-progressive.loaded { filter: blur(0); }

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.fp-reading-progress {
    position: fixed;
    top: var(--fp-header-height, 60px);
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    z-index: 999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ============================================================
   TOOLTIP
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 12px; background: #1a1a2e; color: #fff;
    font-size: 0.75rem; border-radius: 6px; white-space: nowrap;
    opacity: 0; visibility: hidden; transition: all 0.2s ease;
    pointer-events: none; z-index: 100;
}
[data-tooltip]:hover::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ============================================================
   CONFETTI
   ============================================================ */
@keyframes fpConfetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-300px) rotate(720deg); opacity: 0; }
}

.fp-confetti-piece {
    position: fixed;
    width: 8px; height: 8px; border-radius: 2px;
    animation: fpConfetti 1.5s ease-out forwards;
    z-index: 9999; pointer-events: none;
}

/* ============================================================
   NOTIFICATION SLIDE
   ============================================================ */
.fp-notif-slide {
    animation: fpNotifSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fpNotifSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.fp-count-up { display: inline-block; transition: all 0.3s ease; }

/* ============================================================
   SHIMMER TEXT
   ============================================================ */
.fp-shimmer {
    background: linear-gradient(90deg, #1a1a2e 0%, #2563eb 50%, #1a1a2e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fpTextShimmer 3s ease-in-out infinite;
}
@keyframes fpTextShimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ============================================================
   FOCUS STYLES (Accessibility)
   ============================================================ */
.fp-focus-ring:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fp-reveal, .fp-fade-up, .fp-fade-in, .fp-scale-in, .fp-stagger > * {
        opacity: 1 !important; transform: none !important;
    }
}