/**
 * GOQUEER Emoji Reactions
 *
 * Borderless, icon-forward. Per-reaction hover animations.
 *
 * @package GOQUEER
 * @since 2.3.0
 */

/* ──────────────────────────────────────────────
   Reaction Bar
   ────────────────────────────────────────────── */

.gq-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 0 4px;
}

.gqrc-modal-video-container > .gq-reactions {
    margin-top: 0;
    padding: 10px 0 2px;
}

/* ──────────────────────────────────────────────
   Reaction Button — no border, transparent
   ────────────────────────────────────────────── */

.gq-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s ease;
    position: relative;
}

.gq-reaction-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.gq-reaction-btn:active .gq-reaction-icon {
    transform: scale(0.85);
}

.gq-reaction-btn:focus-visible {
    outline: 1px solid var(--gqrc-accent-electric, #61FF70);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────
   Color per reaction
   ────────────────────────────────────────────── */

.gq-reaction-btn[data-emoji="heart"]   { --gq-c: #FF4D6A; }
.gq-reaction-btn[data-emoji="pride"]   { --gq-c: #A855F7; }
.gq-reaction-btn[data-emoji="meh"]     { --gq-c: #A0A0A0; }
.gq-reaction-btn[data-emoji="sad"]     { --gq-c: #5B9BD5; }
.gq-reaction-btn[data-emoji="dislike"] { --gq-c: #E74C3C; }

/* ──────────────────────────────────────────────
   Icon — big, colorful, animated on hover
   ────────────────────────────────────────────── */

.gq-reaction-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--gq-c);
    opacity: 0.55;
    transition: opacity 0.2s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.25s ease;
    transform-origin: center bottom;
}

.gq-reaction-btn:hover .gq-reaction-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--gq-c));
}

/* ── Per-icon hover animations ── */

/* Heart: pulse / throb */
@keyframes gqHeartPulse {
    0%, 100% { transform: scale(1.1); }
    50%      { transform: scale(1.3); }
}
.gq-reaction-btn[data-emoji="heart"]:hover .gq-reaction-icon {
    animation: gqHeartPulse 0.6s ease infinite;
}

/* Pride: rainbow gradient + shimmer */
@keyframes gqPrideShimmer {
    0%   { transform: scale(1.15); filter: drop-shadow(0 0 8px #A855F7) hue-rotate(0deg); }
    50%  { transform: scale(1.2);  filter: drop-shadow(0 0 10px #FF6EB4) hue-rotate(90deg); }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 8px #A855F7) hue-rotate(0deg); }
}
.gq-reaction-btn[data-emoji="pride"]:hover .gq-reaction-icon {
    background: linear-gradient(135deg, #FF0018, #FFA52C, #FFFF41, #008018, #0000F9, #86007D);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gqPrideShimmer 1.5s ease infinite;
}

/* Meh: slow tilt side to side */
@keyframes gqMehTilt {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    50%      { transform: scale(1.1) rotate(12deg); }
}
.gq-reaction-btn[data-emoji="meh"]:hover .gq-reaction-icon {
    animation: gqMehTilt 1s ease infinite;
}

/* Sad: droop down */
@keyframes gqSadDroop {
    0%, 100% { transform: scale(1.1) translateY(0); }
    50%      { transform: scale(1.05) translateY(3px); }
}
.gq-reaction-btn[data-emoji="sad"]:hover .gq-reaction-icon {
    animation: gqSadDroop 0.8s ease infinite;
}

/* Dislike: shake no */
@keyframes gqDislikeShake {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    20%      { transform: scale(1.15) rotate(-15deg); }
    40%      { transform: scale(1.1) rotate(12deg); }
    60%      { transform: scale(1.15) rotate(-10deg); }
    80%      { transform: scale(1.1) rotate(6deg); }
}
.gq-reaction-btn[data-emoji="dislike"]:hover .gq-reaction-icon {
    animation: gqDislikeShake 0.5s ease infinite;
}

/* ──────────────────────────────────────────────
   Hover Label (from data-label)
   ────────────────────────────────────────────── */

.gq-reaction-icon {
    position: relative;
    display: inline-block;
}

.gq-reaction-icon::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    font-family: var(--gqrc-font-mono, 'JetBrains Mono', 'Fira Code', monospace) !important;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gq-c);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-text-fill-color: var(--gq-c);
}

.gq-reaction-btn:hover .gq-reaction-icon::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────────────
   Count
   ────────────────────────────────────────────── */

.gq-reaction-count {
    font-family: var(--gqrc-font-mono, 'JetBrains Mono', 'Fira Code', monospace);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 12px;
    text-align: center;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.gq-reaction-count[data-zero="1"] {
    display: none;
}

.gq-reaction-btn:hover .gq-reaction-count {
    opacity: 0.8;
}

/* ──────────────────────────────────────────────
   Reacted State
   ────────────────────────────────────────────── */

.gq-reaction-btn.gq-reacted .gq-reaction-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--gq-c));
}

.gq-reaction-btn.gq-reacted .gq-reaction-count {
    color: var(--gq-c);
    opacity: 1;
}

/* ──────────────────────────────────────────────
   Click Animation
   ────────────────────────────────────────────── */

@keyframes gqReactionPop {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.5); }
    40%  { transform: scale(0.85); }
    60%  { transform: scale(1.2); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.gq-reaction-btn.gq-just-reacted .gq-reaction-icon {
    animation: gqReactionPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ──────────────────────────────────────────────
   AJAX Pending
   ────────────────────────────────────────────── */

.gq-reaction-btn.gq-reacting {
    opacity: 0.4;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────── */

@media (max-width: 480px) {
    .gq-reactions {
        gap: 4px;
        padding: 8px 0 4px;
    }

    .gq-reaction-btn {
        padding: 6px 8px;
        gap: 5px;
    }

    .gq-reaction-icon {
        font-size: 19px;
    }

    .gq-reaction-count {
        font-size: 11px;
    }
}