/**
 * BIGG BOSS TELUGU - REACTIVE MICRO-ANIMATIONS & INTERACTION SUITE
 * 
 * Crafted for premium responsiveness, tactile micro-feedback, and fluid 60fps performance.
 * Utilizes GPU acceleration (transform, opacity) exclusively to ensure zero layout thrashing.
 */

/* ==========================================================================
   1. KEYFRAME DEFINITIONS
   ========================================================================== */

/* Shimmer beam across primary buttons & badges */
@keyframes bbt-shimmer-sweep {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(250%) rotate(25deg); }
}

/* Subtle breathing glow for live elements */
@keyframes bbt-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5), 0 2px 8px rgba(234, 88, 12, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(234, 88, 12, 0), 0 4px 16px rgba(234, 88, 12, 0.4);
        transform: scale(1.05);
    }
}

/* Green live pulse for voting lines open */
@keyframes bbt-pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        transform: scale(1.08);
    }
}

/* Flame flicker accent */
@keyframes bbt-flame-flicker {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.6)); }
    50% { filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.85)); }
}

/* Animated stripe for live vote bars */
@keyframes bbt-stripe-move {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

/* Ambient floating background glow */
@keyframes bbt-ambient-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(25px, -20px, 0) scale(1.08); }
    100% { transform: translate3d(-15px, 15px, 0) scale(0.96); }
}

/* Tactile button bounce on click */
@keyframes bbt-click-pop {
    0% { transform: scale(1); }
    40% { transform: scale(0.95); }
    80% { transform: scale(1.03); }
    100% { transform: scale(1); }
}


/* ==========================================================================
   2. REACTIVE CARD HOVER EFFECTS (GPU-Accelerated)
   ========================================================================== */

/* Universal interactive cards across Home, Voting, News, Contestants */
.bbt-vote-card,
.bbt-home-grid-card,
.bbt-discovery-news-card,
.bbt-dcontestant-card,
.bbt-guide-card,
.bbt-pred-item,
.bbt-bento-subcard,
.bbt-author-box-card,
.bbt-related-card {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
    will-change: transform, box-shadow;
}

/* Smooth lift and colored ambient glow */
.bbt-vote-card:hover,
.bbt-home-grid-card:hover,
.bbt-discovery-news-card:hover,
.bbt-dcontestant-card:hover,
.bbt-guide-card:hover,
.bbt-pred-item:hover,
.bbt-related-card:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(234, 88, 12, 0.35);
}

/* Card image subtle zoom */
.bbt-card-img-wrap,
.bbt-dnews-thumb-wrap,
.bbt-dcontestant-img-wrap,
.bbt-home-grid-img-wrap {
    overflow: hidden;
}

.bbt-card-img-wrap img,
.bbt-dnews-img,
.bbt-dcontestant-img,
.bbt-home-grid-img {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}

.bbt-vote-card:hover .bbt-card-img-wrap img,
.bbt-discovery-news-card:hover .bbt-dnews-img,
.bbt-dcontestant-card:hover .bbt-dcontestant-img,
.bbt-home-grid-card:hover .bbt-home-grid-img {
    transform: scale(1.05) translateZ(0);
    filter: brightness(1.04);
}


/* ==========================================================================
   3. SHIMMER & LIGHT-SHEEN EFFECTS (High-CTR CTAs)
   ========================================================================== */

/* Shimmer beam passing through primary action buttons */
.bbt-vote-btn,
.bbt-btn-patron-cta,
.bbt-modal-action-btn,
.bbt-shc-btn,
.bbt-nsc-primary,
.bbt-story-download-btn,
.bbt-rcc-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.25s ease;
}

/* Shimmer light sweep pseudo-element */
.bbt-vote-btn::after,
.bbt-btn-patron-cta::after,
.bbt-modal-action-btn::after,
.bbt-shc-btn::after,
.bbt-nsc-primary::after,
.bbt-story-download-btn::after,
.bbt-rcc-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg) translateX(-200%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bbt-vote-btn:hover::after,
.bbt-btn-patron-cta:hover::after,
.bbt-modal-action-btn:hover::after,
.bbt-shc-btn:hover::after,
.bbt-nsc-primary:hover::after,
.bbt-story-download-btn:hover::after,
.bbt-rcc-btn:hover::after {
    opacity: 1;
    animation: bbt-shimmer-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Tactile Active Press State (Spring response) */
.bbt-vote-btn:active,
.bbt-btn-patron-cta:active,
.bbt-modal-action-btn:active,
.bbt-shc-btn:active,
.bbt-nsc-btn:active,
.bbt-rcc-btn:active,
.bbt-story-download-btn:active {
    transform: scale(0.96) translateZ(0);
}


/* ==========================================================================
   4. LIVE STATUS & PULSE MICRO-ANIMATIONS
   ========================================================================== */

/* Red/Orange live badges */
.bbt-pulse-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ea580c;
    animation: bbt-pulse-glow 2s infinite ease-in-out;
    vertical-align: middle;
}

/* Green anti-spam / live status dot */
.bbt-pulse-dot-green {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    animation: bbt-pulse-green 2s infinite ease-in-out;
    vertical-align: middle;
}

/* Subtle logo flame glow */
.bbt-logo-highlight {
    animation: bbt-flame-flicker 3s infinite ease-in-out;
}

/* Ambient glow drift on voting and hero banners */
.bbt-voting-glow-bg-1,
.bbt-voting-glow-bg-2 {
    animation: bbt-ambient-drift 12s infinite ease-in-out alternate;
}
.bbt-voting-glow-bg-2 {
    animation-delay: -6s;
    animation-duration: 16s;
}


/* ==========================================================================
   5. PROGRESS BARS & VOTING ANIMATIONS
   ========================================================================== */

/* Smooth fluid fill with subtle gloss stripes */
.bbt-vote-progress-fill {
    position: relative;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.12) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.12) 75%,
        transparent 75%,
        transparent
    );
    background-size: 30px 30px;
    animation: bbt-stripe-move 2.5s linear infinite;
}

/* Risk meter pills subtle hover pop */
.bbt-risk-name-pill {
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bbt-risk-name-pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}


/* ==========================================================================
   6. INTERACTIVE REACTION PILLS & EMOJIS
   ========================================================================== */

/* Sentiment buttons bounce on hover */
.bbt-sentiment-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                border-color 0.2s ease;
}

.bbt-sentiment-btn:hover {
    transform: scale(1.15) translateY(-2px);
}

.bbt-sentiment-btn:active {
    transform: scale(0.9);
}

.bbt-sentiment-emoji {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bbt-sentiment-btn:hover .bbt-sentiment-emoji {
    transform: rotate(10deg) scale(1.15);
}

/* Star rating interactive glow */
.bbt-star {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    cursor: pointer;
}

.bbt-star:hover,
.bbt-star.hovered {
    transform: scale(1.3);
    color: #f59e0b !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

/* Share pills micro bounce */
.bbt-modal-share-pill {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.bbt-modal-share-pill:hover {
    transform: translateY(-3px) scale(1.04);
}


/* ==========================================================================
   7. NAVIGATION & HEADER INTERACTION
   ========================================================================== */

/* Desktop navigation link underline animation */
.bbt-main-nav a {
    position: relative;
    transition: color 0.2s ease;
}

.bbt-main-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ea580c, #f59e0b);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bbt-main-nav a:hover::after,
.bbt-main-nav a.current::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ==========================================================================
   8. SCROLL REVEAL ENTRANCES (IntersectionObserver)
   ========================================================================== */

/* Elements waiting for scroll entry */
.bbt-reveal-init {
    opacity: 0;
    transform: translateY(22px) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Elements animated into view */
.bbt-reveal-in {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* Stagger delay classes for child cards */
.bbt-delay-1 { transition-delay: 0.06s; }
.bbt-delay-2 { transition-delay: 0.12s; }
.bbt-delay-3 { transition-delay: 0.18s; }
.bbt-delay-4 { transition-delay: 0.24s; }


/* Button click ripple circle */
.bbt-ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: bbt-ripple-anim 0.6s linear;
    pointer-events: none;
}

@keyframes bbt-ripple-anim {
    to {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* ==========================================================================
   9. ACCESSIBILITY / PREFERS-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;
    }

    .bbt-reveal-init {
        opacity: 1 !important;
        transform: none !important;
    }

    .bbt-pulse-dot,
    .bbt-pulse-dot-green,
    .bbt-vote-progress-fill,
    .bbt-voting-glow-bg-1,
    .bbt-voting-glow-bg-2 {
        animation: none !important;
    }
}