/**
 * SE Social Media Icons
 * @package     SE Social Media Icons
 * @version     1.0.0
 * @copyright   (C) 2026 SE Extensions. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ========================================================================
   Container
   ======================================================================== */

.se-social-icons-wrap {
    padding: var(--se-mod-padding, 0);
    margin: var(--se-mod-margin, 0);
}

.se-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--se-justify, center);
    flex-direction: var(--se-direction, row);
    gap: var(--se-gap, 10px);
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ========================================================================
   Icon Base
   ======================================================================== */

.se-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    color: var(--se-icon-color, #333) !important;
    background-color: var(--se-bg-color, transparent);
    border: var(--se-border-width, 0) solid var(--se-border-color, transparent);
    border-radius: var(--se-border-radius, 0);
    padding: var(--se-padding, 0);
    font-size: var(--se-icon-size, 24px);
    line-height: 1;
    transition: all var(--se-transition-speed, 0.3s) ease;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

.se-social-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--se-icon-size, 24px);
    height: var(--se-icon-size, 24px);
    font-size: var(--se-icon-size, 24px);
    line-height: 1;
    transition: color var(--se-transition-speed, 0.3s) ease;
}

.se-social-icon:hover,
.se-social-icon:focus {
    color: var(--se-icon-hover-color, #000) !important;
    background-color: var(--se-bg-hover-color, transparent);
    border-color: var(--se-border-hover-color, transparent);
    opacity: var(--se-hover-opacity, 1);
    text-decoration: none !important;
    outline: none;
}

.se-social-icon:hover i,
.se-social-icon:focus i {
    color: var(--se-icon-hover-color, #000) !important;
}

/* ========================================================================
   Labels
   ======================================================================== */

.se-social-label {
    font-size: calc(var(--se-icon-size, 24px) * 0.58);
    font-weight: 500;
    white-space: nowrap;
}

/* ========================================================================
   Hover Effects
   ======================================================================== */

/* Grow */
.se-social-icon.se-hover-grow:hover {
    transform: scale(1.2);
}

/* Shrink */
.se-social-icon.se-hover-shrink:hover {
    transform: scale(0.85);
}

/* Pulse */
@keyframes se-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.se-social-icon.se-hover-pulse:hover {
    animation: se-pulse 0.6s ease-in-out;
}

/* Bounce */
@keyframes se-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-8px); }
    60%      { transform: translateY(-3px); }
}
.se-social-icon.se-hover-bounce:hover {
    animation: se-bounce 0.5s ease;
}

/* Rotate */
.se-social-icon.se-hover-rotate:hover {
    transform: rotate(360deg);
}

/* Wobble */
@keyframes se-wobble {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(-12deg); }
    30%  { transform: rotate(10deg); }
    45%  { transform: rotate(-8deg); }
    60%  { transform: rotate(5deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}
.se-social-icon.se-hover-wobble:hover {
    animation: se-wobble 0.6s ease;
}

/* Float */
.se-social-icon.se-hover-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Sink */
.se-social-icon.se-hover-sink:hover {
    transform: translateY(3px);
}

/* Shadow */
.se-social-icon.se-hover-shadow:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Glow */
.se-social-icon.se-hover-glow:hover {
    box-shadow: 0 0 12px var(--se-icon-hover-color, var(--se-icon-color, #333)),
                0 0 24px var(--se-icon-hover-color, var(--se-icon-color, #333));
}

/* ========================================================================
   Entrance Animations
   ======================================================================== */

/* Shared hidden state */
.se-social-icon.se-entrance-fadeIn,
.se-social-icon.se-entrance-slideUp,
.se-social-icon.se-entrance-slideDown,
.se-social-icon.se-entrance-slideLeft,
.se-social-icon.se-entrance-slideRight,
.se-social-icon.se-entrance-scaleUp,
.se-social-icon.se-entrance-stagger {
    opacity: 0;
    will-change: opacity, transform;
}

/* Visible state (class added by JS) */
.se-social-icon.se-entrance-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Fade In */
.se-social-icon.se-entrance-fadeIn {
    transition: opacity var(--se-entrance-duration, 0.5s) ease;
}

/* Slide Up */
.se-social-icon.se-entrance-slideUp {
    transform: translateY(20px);
    transition: opacity var(--se-entrance-duration, 0.5s) ease,
                transform var(--se-entrance-duration, 0.5s) ease;
}

/* Slide Down */
.se-social-icon.se-entrance-slideDown {
    transform: translateY(-20px);
    transition: opacity var(--se-entrance-duration, 0.5s) ease,
                transform var(--se-entrance-duration, 0.5s) ease;
}

/* Slide Left */
.se-social-icon.se-entrance-slideLeft {
    transform: translateX(-20px);
    transition: opacity var(--se-entrance-duration, 0.5s) ease,
                transform var(--se-entrance-duration, 0.5s) ease;
}

/* Slide Right */
.se-social-icon.se-entrance-slideRight {
    transform: translateX(20px);
    transition: opacity var(--se-entrance-duration, 0.5s) ease,
                transform var(--se-entrance-duration, 0.5s) ease;
}

/* Scale Up */
.se-social-icon.se-entrance-scaleUp {
    transform: scale(0.3);
    transition: opacity var(--se-entrance-duration, 0.5s) ease,
                transform var(--se-entrance-duration, 0.5s) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Stagger (same as fade in but with per-icon delay) */
.se-social-icon.se-entrance-stagger {
    transform: translateY(15px);
    transition: opacity var(--se-entrance-duration, 0.5s) ease var(--se-entrance-delay, 0s),
                transform var(--se-entrance-duration, 0.5s) ease var(--se-entrance-delay, 0s);
}

/* ========================================================================
   Sticky / Fixed Position
   ======================================================================== */

.se-social-icons-wrap.se-sticky {
    pointer-events: none;
}

.se-social-icons-wrap.se-sticky .se-social-icons {
    pointer-events: auto;
}

/* Auto-switch to vertical when pinned to left/right edges */
.se-social-icons-wrap.se-sticky-middle-left .se-social-icons,
.se-social-icons-wrap.se-sticky-middle-right .se-social-icons {
    flex-direction: column;
}

/* ========================================================================
   Accessibility
   ======================================================================== */

.se-social-icon:focus-visible {
    outline: 2px solid var(--se-icon-color, #333);
    outline-offset: 3px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .se-social-icon,
    .se-social-icon i {
        transition: none !important;
        animation: none !important;
    }
    .se-social-icon.se-entrance-fadeIn,
    .se-social-icon.se-entrance-slideUp,
    .se-social-icon.se-entrance-slideDown,
    .se-social-icon.se-entrance-slideLeft,
    .se-social-icon.se-entrance-slideRight,
    .se-social-icon.se-entrance-scaleUp,
    .se-social-icon.se-entrance-stagger {
        opacity: 1;
        transform: none;
    }
}