/*
======================================================================
KICKOFF PRO CHILD - Animations & Micro-interactions
Premium Thai Football Portal - Subtle Premium Animations
======================================================================
*/

/* =====================================================================
   1. CSS CUSTOM PROPERTIES - Animation Tokens
   ===================================================================== */

:root {
    /* Animation Durations */
    --kp-duration-fast: 150ms;
    --kp-duration-normal: 200ms;
    --kp-duration-slow: 300ms;
    
    /* Animation Easings */
    --kp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --kp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --kp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =====================================================================
   2. CARD HOVER EFFECTS - 轻微上浮 + 阴影加深
   ===================================================================== */

.kp-card,
.kp-match-card,
.kp-league-card,
.kp-team-card,
.kp-stat-card,
.kp-live-card,
.kp-upcoming-card,
.kp-schedule-card,
.kp-standings-wrapper,
.kp-scorers-wrapper,
.kp-sidebar-widget {
    transition: 
        transform var(--kp-duration-normal) var(--kp-ease-out),
        box-shadow var(--kp-duration-normal) var(--kp-ease-out),
        border-color var(--kp-duration-fast) var(--kp-ease-out);
}

.kp-card:hover,
.kp-match-card:hover,
.kp-league-card:hover,
.kp-team-card:hover,
.kp-stat-card:hover,
.kp-live-card:hover,
.kp-upcoming-card:hover,
.kp-schedule-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

/* Subtle scale for cards */
.kp-card:hover,
.kp-live-card:hover,
.kp-upcoming-card:hover {
    transform: translateY(-4px) scale(1.01);
}

/* League card special effect */
.kp-league-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* =====================================================================
   3. BUTTON INTERACTIONS - 按压反馈 + 渐变加深
   ===================================================================== */

.kp-btn,
.kp-btn-primary,
.kp-btn-secondary,
.kp-btn-outline,
.kp-btn-pill,
.kp-btn-pill-primary,
.kp-btn-hero,
.kp-btn-live,
.kp-btn-watch {
    position: relative;
    overflow: hidden;
    transition: 
        transform var(--kp-duration-fast) var(--kp-ease-out),
        box-shadow var(--kp-duration-normal) var(--kp-ease-out),
        background var(--kp-duration-fast) var(--kp-ease-out),
        opacity var(--kp-duration-fast) var(--kp-ease-out);
}

/* Button Hover */
.kp-btn:hover {
    transform: translateY(-2px);
}

.kp-btn-primary:hover,
.kp-btn-pill-primary:hover,
.kp-btn-hero:hover,
.kp-btn-live:hover {
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
}

/* Button Active/Press */
.kp-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 80ms;
}

.kp-btn-primary:active,
.kp-btn-pill-primary:active,
.kp-btn-hero:active,
.kp-btn-live:active {
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
    background: linear-gradient(135deg, #92400E 0%, #B45309 100%);
}

/* Button Focus State */
.kp-btn:focus-visible {
    outline: 2px solid var(--kp-primary);
    outline-offset: 2px;
}

/* Ripple Effect Container */
.kp-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.kp-btn:active::after {
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: width 0s, height 0s, opacity 0s;
}

/* =====================================================================
   4. TAB SWITCHING - 渐变过渡
   ===================================================================== */

.kp-tab,
.kp-league-tab,
.kp-league-tab,
.kp-date-tab,
.kp-date-btn,
.kp-filter-btn,
.kp-sort-btn {
    transition: 
        all var(--kp-duration-fast) var(--kp-ease-out),
        background var(--kp-duration-fast) var(--kp-ease-out),
        color var(--kp-duration-fast) var(--kp-ease-out),
        border-color var(--kp-duration-fast) var(--kp-ease-out),
        box-shadow var(--kp-duration-fast) var(--kp-ease-out);
}

/* Tab Background Transition */
.kp-tab.active,
.kp-league-tab.active,
.kp-date-tab.active,
.kp-date-btn.active,
.kp-filter-btn.active,
.kp-sort-btn.active {
    background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* Tab Hover */
.kp-tab:hover:not(.active),
.kp-league-tab:hover:not(.active),
.kp-date-tab:hover:not(.active),
.kp-date-btn:hover:not(.active),
.kp-filter-btn:hover:not(.active),
.kp-sort-btn:hover:not(.active) {
    border-color: #D97706;
    color: #D97706;
    background: rgba(217, 119, 6, 0.08);
}

/* Underline Animation for Nav */
.kp-nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--kp-duration-normal) var(--kp-ease-out);
}

.kp-nav-menu a:hover::after,
.kp-nav-menu a.active::after {
    width: 24px;
}

/* =====================================================================
   5. SCROLL ANIMATIONS - 滚动渐入
   ===================================================================== */

/* Fade In Up Animation */
@keyframes kpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kp-animate-fade-in-up {
    animation: kpFadeInUp 0.5s var(--kp-ease-out) forwards;
    opacity: 0;
}

/* Fade In Animation */
@keyframes kpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kp-animate-fade-in {
    animation: kpFadeIn 0.4s var(--kp-ease-out) forwards;
}

/* Scale In Animation */
@keyframes kpScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.kp-animate-scale-in {
    animation: kpScaleIn 0.4s var(--kp-ease-spring) forwards;
}

/* Slide In From Left */
@keyframes kpSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes kpSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered Animation Delays */
.kp-stagger-1 { animation-delay: 0.1s; }
.kp-stagger-2 { animation-delay: 0.2s; }
.kp-stagger-3 { animation-delay: 0.3s; }
.kp-stagger-4 { animation-delay: 0.4s; }
.kp-stagger-5 { animation-delay: 0.5s; }

/* Intersection Observer Based Animation */
.kp-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.6s var(--kp-ease-out),
        transform 0.6s var(--kp-ease-out);
}

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

/* =====================================================================
   6. LIVE MATCH EFFECTS - 直播微动效
   ===================================================================== */

/* Live Pulse Animation */
@keyframes kpLivePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

.kp-live-dot {
    animation: kpLivePulse 1.5s ease-in-out infinite;
}

.kp-live-indicator .kp-live-dot {
    animation: kpLivePulse 1.2s ease-in-out infinite;
}

/* Score Bounce for Live */
@keyframes kpScoreBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-3px);
    }
    75% {
        transform: translateY(1px);
    }
}

.kp-live-score.is-live .kp-score-num,
.kp-live-score-display .kp-live-score-num {
    animation: kpScoreBounce 2s ease-in-out infinite;
}

/* Breathing Glow for Live Badge */
@keyframes kpBreathingGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.2);
    }
}

.kp-live-badge {
    animation: kpBreathingGlow 2s ease-in-out infinite;
}

/* Ticker Scroll */
@keyframes kpTickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.kp-ticker-track {
    animation: kpTickerScroll 40s linear infinite;
}

.kp-ticker-bar:hover .kp-ticker-track {
    animation-play-state: paused;
}

/* =====================================================================
   7. HEADER SCROLL EFFECTS - 导航栏滚动压缩
   ===================================================================== */

.kp-header {
    transition: 
        padding var(--kp-duration-normal) var(--kp-ease-out),
        box-shadow var(--kp-duration-normal) var(--kp-ease-out);
}

.kp-header.is-scrolled {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.kp-header-inner {
    transition: padding var(--kp-duration-normal) var(--kp-ease-out);
}

/* Sticky Ticker */
.kp-ticker-bar {
    transition: height var(--kp-duration-normal) var(--kp-ease-out);
}

/* =====================================================================
   8. CAROUSEL / SLIDER ANIMATIONS
   ===================================================================== */

/* Hero Slide Transition */
.kp-hero-slide {
    opacity: 0;
    transition: opacity 0.5s var(--kp-ease-out);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.kp-hero-slide.active {
    opacity: 1;
    position: relative;
}

/* Carousel Dot Transition */
.kp-hero-dot {
    transition: 
        all var(--kp-duration-normal) var(--kp-ease-out),
        width var(--kp-duration-normal) var(--kp-ease-spring);
}

/* =====================================================================
   9. FORM INPUT FOCUS EFFECTS
   ===================================================================== */

.kp-input,
.kp-search-input,
.kp-select,
.kp-textarea {
    transition: 
        border-color var(--kp-duration-fast) var(--kp-ease-out),
        box-shadow var(--kp-duration-fast) var(--kp-ease-out),
        width var(--kp-duration-normal) var(--kp-ease-out);
}

.kp-input:focus,
.kp-search-input:focus,
.kp-select:focus,
.kp-textarea:focus {
    border-color: #D97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

/* Search Box Expand on Focus */
.kp-search-box:focus-within {
    transform: scale(1.02);
}

.kp-search-box:focus-within .kp-search-input {
    width: 280px;
    border-color: #D97706;
}

/* =====================================================================
   10. TABLE ROW HOVER EFFECTS
   ===================================================================== */

.kp-standings-table tbody tr,
.kp-scorers-list li,
.kp-scorer-item {
    transition: 
        background var(--kp-duration-fast) var(--kp-ease-out),
        transform var(--kp-duration-fast) var(--kp-ease-out);
}

.kp-standings-table tbody tr:hover td,
.kp-scorer-item:hover {
    background: rgba(217, 119, 6, 0.06);
}

.kp-scorer-item:hover {
    transform: translateX(4px);
}

/* =====================================================================
   11. SMOOTH SCROLL
   ===================================================================== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   12. LOADING STATES
   ===================================================================== */

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

.kp-skeleton {
    background: linear-gradient(
        90deg,
        #F1F5F9 25%,
        #E2E8F0 50%,
        #F1F5F9 75%
    );
    background-size: 200% 100%;
    animation: kpShimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.kp-skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.kp-skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 12px;
}

.kp-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* =====================================================================
   13. BACK TO TOP BUTTON
   ===================================================================== */

.kp-back-to-top {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 
        all var(--kp-duration-normal) var(--kp-ease-out),
        opacity var(--kp-duration-normal) var(--kp-ease-out),
        visibility var(--kp-duration-normal) var(--kp-ease-out);
    z-index: 998;
}

.kp-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kp-back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
}

.kp-back-to-top:active {
    transform: translateY(0) scale(0.95);
}

@media (max-width: 768px) {
    .kp-back-to-top {
        bottom: 80px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* =====================================================================
   14. MOBILE BOTTOM NAV ANIMATIONS
   ===================================================================== */

.kp-mobile-bottom-nav a {
    transition: 
        color var(--kp-duration-fast) var(--kp-ease-out),
        transform var(--kp-duration-fast) var(--kp-ease-out);
}

.kp-mobile-bottom-nav a:hover {
    transform: translateY(-2px);
}

.kp-mobile-bottom-nav a:active {
    transform: translateY(0) scale(0.95);
}

/* Icon Bounce on Tap */
@keyframes kpIconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.kp-mobile-bottom-nav a:active i {
    animation: kpIconBounce 0.3s ease;
}

/* =====================================================================
   15. SOCIAL SHARE BUTTONS
   ===================================================================== */

.kp-share-btn,
.kp-footer-social a {
    transition: 
        transform var(--kp-duration-fast) var(--kp-ease-out),
        box-shadow var(--kp-duration-fast) var(--kp-ease-out),
        background var(--kp-duration-fast) var(--kp-ease-out);
}

.kp-share-btn:hover,
.kp-footer-social a:hover {
    transform: translateY(-4px);
}

.kp-share-btn.line:hover {
    box-shadow: 0 6px 16px rgba(0, 185, 0, 0.35);
}

.kp-share-btn.facebook:hover {
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
}

.kp-share-btn.twitter:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   16. PREFERS REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kp-live-dot,
    .kp-ticker-track,
    .kp-hero-slide {
        animation: none;
    }
    
    .kp-card:hover,
    .kp-match-card:hover,
    .kp-btn:hover {
        transform: none;
    }
}

/* =====================================================================
   17. PRINT STYLES - Remove animations
   ===================================================================== */

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   18. CUSTOM SCROLLBAR
   ===================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F8FAFC;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
    transition: background var(--kp-duration-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #F8FAFC;
}

/* =====================================================================
   19. IMAGE LOADING EFFECTS
   ===================================================================== */

.kp-team-emblem img,
.kp-league-icon img,
.kp-team-card-logo img {
    transition: 
        opacity var(--kp-duration-normal) var(--kp-ease-out),
        transform var(--kp-duration-normal) var(--kp-ease-out);
}

.kp-team-emblem img,
.kp-league-icon img,
.kp-team-card-logo img {
    opacity: 0;
}

.kp-team-emblem img.loaded,
.kp-league-icon img.loaded,
.kp-team-card-logo img.loaded {
    opacity: 1;
}

/* =====================================================================
   20. CHAMPION / TOP POSITION EFFECTS
   ===================================================================== */

@keyframes kpChampionGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(217, 119, 6, 0.2);
    }
    50% {
        box-shadow: 0 0 16px rgba(217, 119, 6, 0.4);
    }
}

.kp-pos-badge.champion,
.kp-pos-mini.champion {
    animation: kpChampionGlow 3s ease-in-out infinite;
}

/* =====================================================================
   21. MATCH CARD LIVE BORDER ANIMATION
   ===================================================================== */

@keyframes kpLiveBorder {
    0%, 100% {
        border-left-color: #D97706;
    }
    50% {
        border-left-color: #FBBF24;
    }
}

.kp-match-card.is-live {
    animation: kpLiveBorder 2s ease-in-out infinite;
}