/**
 * Forum Press Zone - Whimsy & Delight Styles
 *
 * Delightful animations, celebrations, and personality
 * that make the forum experience memorable and joyful.
 *
 * @package ForumPressZone
 */

/* ============================================
   Animation Variables & Timing Functions
   ============================================ */
:root {
    /* Spring-like easing for playful feel */
    --presszone-forum-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --presszone-forum-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --presszone-forum-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --presszone-forum-ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* Timing */
    --presszone-forum-duration-fast: 150ms;
    --presszone-forum-duration-normal: 250ms;
    --presszone-forum-duration-slow: 400ms;

    /* Celebration Colors */
    --presszone-forum-confetti-1: #ff6b6b;
    --presszone-forum-confetti-2: #4ecdc4;
    --presszone-forum-confetti-3: #ffe66d;
    --presszone-forum-confetti-4: #95e1d3;
    --presszone-forum-confetti-5: #f38181;
    --presszone-forum-confetti-6: #aa96da;
}

/* ============================================
   Button Hover Effects
   ============================================ */
.presszone-forum-btn {
    transition:
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring),
        box-shadow var(--presszone-forum-duration-normal) var(--presszone-forum-ease-smooth),
        background var(--presszone-forum-duration-fast) ease;
    position: relative;
    overflow: hidden;
}

.presszone-forum-btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.presszone-forum-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 50ms;
}

.presszone-forum-btn--primary:hover {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.presszone-forum-btn--secondary:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Button ripple effect */
.presszone-forum-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s, opacity 0.3s;
}

.presszone-forum-btn:active::after {
    transform: scale(2.5);
    opacity: 1;
    transition: transform 0s, opacity 0s;
}

/* ============================================
   Category Collapse/Expand Animation
   ============================================ */
.presszone-forum-category__forums {
    overflow: hidden;
    transition:
        max-height var(--presszone-forum-duration-slow) var(--presszone-forum-ease-smooth),
        opacity var(--presszone-forum-duration-normal) ease;
}

.presszone-forum-category--collapsed .presszone-forum-category__forums {
    max-height: 0 !important;
    opacity: 0;
}

.presszone-forum-category__toggle {
    transition: transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-category--collapsed .presszone-forum-category__toggle,
.presszone-forum-category__toggle[aria-expanded="false"] {
    transform: rotate(-90deg);
}

.presszone-forum-category__header:hover .presszone-forum-category__toggle {
    color: var(--presszone-forum-primary);
}

/* ============================================
   Forum Row Hover Effects
   ============================================ */
.presszone-forum-forum-row {
    position: relative;
    transition:
        background var(--presszone-forum-duration-normal) ease,
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-forum-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--presszone-forum-primary);
    transform: scaleY(0);
    transition: transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-forum-row:hover {
    background: var(--presszone-forum-primary-dim);
}

.presszone-forum-forum-row:hover::before {
    transform: scaleY(1);
}

.presszone-forum-forum-row:hover .presszone-forum-forum-row__title a {
    color: var(--presszone-forum-primary);
}

/* ============================================
   Avatar Hover Effects
   ============================================ */
.presszone-forum-user-panel__avatar img,
.presszone-forum-postbit__avatar img,
.presszone-forum-forum-row__lastpost-avatar img,
.presszone-forum-thread-row__lastpost-info img {
    transition:
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring),
        box-shadow var(--presszone-forum-duration-normal) ease;
}

.presszone-forum-user-panel__avatar:hover img,
.presszone-forum-postbit__avatar:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--presszone-forum-primary), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Avatar ring pulse on hover */
.presszone-forum-postbit__avatar {
    position: relative;
}

.presszone-forum-postbit__avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--presszone-forum-primary);
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity var(--presszone-forum-duration-normal) ease,
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-postbit__avatar:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   Sticky Badge Wobble Animation
   ============================================ */
@keyframes presszone-forum-wobble {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

.presszone-forum-badge--sticky {
    display: inline-flex;
    align-items: center;
    animation: presszone-forum-wobble 2s ease-in-out infinite;
    animation-play-state: paused;
}

.presszone-forum-thread-row:hover .presszone-forum-badge--sticky {
    animation-play-state: running;
}

/* ============================================
   Reaction Pop Animation
   ============================================ */
@keyframes presszone-forum-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes presszone-forum-pop-in {
    0% {
        transform: scale(0.8) translateY(10px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.presszone-forum-reaction {
    animation: presszone-forum-pop var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
    transition: transform var(--presszone-forum-duration-fast) var(--presszone-forum-ease-spring);
}

.presszone-forum-reaction:hover {
    transform: scale(1.15);
}

/* Reaction picker animation */
.presszone-forum-reaction-picker {
    animation: presszone-forum-pop-in var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    gap: 4px;
    background: var(--presszone-forum-surface);
    padding: 8px 12px;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--presszone-forum-border);
    margin-bottom: 8px;
    z-index: 100;
}

.presszone-forum-reaction-picker button {
    background: none;
    border: none;
    font-size: 24px;
    padding: 4px;
    cursor: pointer;
    transition: transform var(--presszone-forum-duration-fast) var(--presszone-forum-ease-spring);
    border-radius: 50%;
}

.presszone-forum-reaction-picker button:hover {
    transform: scale(1.3);
    background: var(--presszone-forum-surface-2);
}

/* New reaction added feedback */
.presszone-forum-reaction--added {
    animation: presszone-forum-pop 0.5s var(--presszone-forum-ease-spring);
}

/* ============================================
   Reply Form Focus Animation
   ============================================ */
@keyframes presszone-forum-glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px var(--presszone-forum-primary-dim);
    }

    50% {
        box-shadow: 0 0 0 5px var(--presszone-forum-primary-dim), 0 0 20px var(--presszone-forum-primary-glow);
    }
}

.presszone-forum-textarea:focus,
.presszone-forum-new-thread-form .presszone-forum-input:focus {
    animation: presszone-forum-glow-pulse 2s ease-in-out infinite;
}

.presszone-forum-reply-form {
    transition:
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring),
        box-shadow var(--presszone-forum-duration-normal) ease;
}

.presszone-forum-reply-form:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

/* ============================================
   Empty State Animations
   ============================================ */
@keyframes presszone-forum-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.presszone-forum-empty,
.presszone-forum-error {
    position: relative;
}

.presszone-forum-empty__icon,
.presszone-forum-error__icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    animation: presszone-forum-float 3s ease-in-out infinite;
}

.presszone-forum-empty p,
.presszone-forum-error p {
    font-size: 16px;
    color: var(--presszone-forum-text-secondary);
}

/* ============================================
   Loading Skeleton Animation
   ============================================ */
@keyframes presszone-forum-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.presszone-forum-skeleton {
    background: linear-gradient(90deg,
            var(--presszone-forum-surface-2) 25%,
            var(--presszone-forum-surface-3) 50%,
            var(--presszone-forum-surface-2) 75%);
    background-size: 200% 100%;
    animation: presszone-forum-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--presszone-forum-radius);
}

.presszone-forum-skeleton--text {
    height: 16px;
    width: 60%;
    margin-bottom: 8px;
}

.presszone-forum-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.presszone-forum-skeleton--line {
    height: 12px;
    margin-bottom: 6px;
}

.presszone-forum-skeleton--line:nth-child(odd) {
    width: 80%;
}

.presszone-forum-skeleton--line:nth-child(even) {
    width: 65%;
}

/* ============================================
   Confetti Celebration
   ============================================ */
@keyframes presszone-forum-confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes presszone-forum-confetti-sway {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(15px);
    }

    75% {
        transform: translateX(-15px);
    }
}

.presszone-forum-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.presszone-forum-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation:
        presszone-forum-confetti-fall 3s linear forwards,
        presszone-forum-confetti-sway 0.5s ease-in-out infinite;
}

.presszone-forum-confetti--1 {
    background: var(--presszone-forum-confetti-1);
}

.presszone-forum-confetti--2 {
    background: var(--presszone-forum-confetti-2);
}

.presszone-forum-confetti--3 {
    background: var(--presszone-forum-confetti-3);
}

.presszone-forum-confetti--4 {
    background: var(--presszone-forum-confetti-4);
}

.presszone-forum-confetti--5 {
    background: var(--presszone-forum-confetti-5);
}

.presszone-forum-confetti--6 {
    background: var(--presszone-forum-confetti-6);
}

/* Confetti shapes */
.presszone-forum-confetti--circle {
    border-radius: 50%;
}

.presszone-forum-confetti--square {
    border-radius: 2px;
}

.presszone-forum-confetti--rect {
    width: 6px;
    height: 14px;
    border-radius: 2px;
}

/* ============================================
   Success Toast Animation
   ============================================ */
@keyframes presszone-forum-toast-in {
    0% {
        transform: translateY(100%) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes presszone-forum-toast-out {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-20px) scale(0.8);
        opacity: 0;
    }
}

.presszone-forum-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.presszone-forum-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--presszone-forum-surface);
    border-radius: var(--presszone-forum-radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--presszone-forum-border);
    animation: presszone-forum-toast-in var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
    pointer-events: auto;
}

.presszone-forum-toast--success {
    border-left: 4px solid var(--presszone-forum-success);
}

.presszone-forum-toast--error {
    border-left: 4px solid var(--presszone-forum-error);
}

.presszone-forum-toast--hiding {
    animation: presszone-forum-toast-out var(--presszone-forum-duration-normal) var(--presszone-forum-ease-smooth) forwards;
}

.presszone-forum-toast__icon {
    font-size: 24px;
}

.presszone-forum-toast__message {
    font-size: 15px;
    color: var(--presszone-forum-text);
    font-weight: 500;
}

/* ============================================
   Scroll Progress Indicator
   ============================================ */
.presszone-forum-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--presszone-forum-primary), #6366f1);
    z-index: 9999;
    transition: width 50ms linear;
}

/* ============================================
   Keyboard Shortcuts Modal
   ============================================ */
@keyframes presszone-forum-modal-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.presszone-forum-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--presszone-forum-duration-fast) ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.presszone-forum-shortcuts-modal {
    background: var(--presszone-forum-surface);
    border-radius: var(--presszone-forum-radius-lg);
    padding: 32px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: presszone-forum-modal-in var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-shortcuts-modal h2 {
    margin: 0 0 24px;
    font-size: 20px;
    color: var(--presszone-forum-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.presszone-forum-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.presszone-forum-shortcut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--presszone-forum-border);
}

.presszone-forum-shortcut:last-child {
    border-bottom: none;
}

.presszone-forum-shortcut__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: var(--presszone-forum-surface-2);
    border: 1px solid var(--presszone-forum-border);
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    color: var(--presszone-forum-text);
    box-shadow: 0 2px 0 var(--presszone-forum-border);
}

.presszone-forum-shortcut__desc {
    color: var(--presszone-forum-text-secondary);
    font-size: 14px;
}

.presszone-forum-shortcuts-modal__close {
    margin-top: 24px;
    width: 100%;
    padding: 12px;
    background: var(--presszone-forum-surface-2);
    border: 1px solid var(--presszone-forum-border);
    border-radius: var(--presszone-forum-radius);
    color: var(--presszone-forum-text);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--presszone-forum-duration-fast) ease;
}

.presszone-forum-shortcuts-modal__close:hover {
    background: var(--presszone-forum-primary-dim);
    border-color: var(--presszone-forum-primary);
    color: var(--presszone-forum-primary);
}

/* ============================================
   Post Submission Success
   ============================================ */
.presszone-forum-post--new {
    animation: presszone-forum-pop-in 0.5s var(--presszone-forum-ease-spring);
    background: linear-gradient(90deg, var(--presszone-forum-primary-dim), transparent);
}

/* ============================================
   Thread Row Hover Enhancement
   ============================================ */
.presszone-forum-thread-row {
    transition:
        background var(--presszone-forum-duration-fast) ease,
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-thread-row:hover {
    background: var(--presszone-forum-primary-dim);
}

.presszone-forum-thread-row__link {
    transition: color var(--presszone-forum-duration-fast) ease;
}

/* ============================================
   Login Panel Enhancement
   ============================================ */
.presszone-forum-login-panel {
    transition: transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring);
}

.presszone-forum-login-panel:hover {
    transform: translateY(-2px);
}

.presszone-forum-login-notice {
    transition:
        transform var(--presszone-forum-duration-normal) var(--presszone-forum-ease-spring),
        box-shadow var(--presszone-forum-duration-normal) ease;
}

.presszone-forum-login-notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Stats Panel Enhancement
   ============================================ */
.presszone-forum-stats-list__value {
    transition: transform var(--presszone-forum-duration-fast) var(--presszone-forum-ease-spring);
}

.presszone-forum-stats-list li:hover .presszone-forum-stats-list__value {
    transform: scale(1.1);
}

/* ============================================
   Emoji Reaction Wiggle Animation
   ============================================ */
@keyframes presszone-forum-emoji-wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-10deg);
    }

    80% {
        transform: rotate(5deg);
    }
}

.presszone-forum-reaction:hover {
    animation: presszone-forum-emoji-wiggle 0.5s ease-in-out;
}

/* ============================================
   Multi-Quote Active State
   ============================================ */
.presszone-forum-post-action--active {
    background: var(--presszone-forum-primary-dim) !important;
    color: var(--presszone-forum-primary) !important;
    border-radius: var(--presszone-forum-radius);
}

.presszone-forum-post-action--multiquote.presszone-forum-post-action--active::after {
    content: ' ✓';
}

/* ============================================
   Enhanced Focus Indicators
   ============================================ */
.presszone-forum-btn:focus-visible,
.presszone-forum-post-action:focus-visible,
.presszone-forum-reaction:focus-visible,
a:focus-visible {
    outline: 2px solid var(--presszone-forum-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   Reduced Motion Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .presszone-forum-confetti-container,
    .presszone-forum-scroll-progress {
        display: none !important;
    }

    .presszone-forum-btn:hover,
    .presszone-forum-forum-row:hover,
    .presszone-forum-reply-form:focus-within {
        transform: none !important;
    }
}

/* ============================================
   Print Styles - Hide Whimsy
   ============================================ */
@media print {

    .presszone-forum-confetti-container,
    .presszone-forum-toast-container,
    .presszone-forum-scroll-progress,
    .presszone-forum-shortcuts-overlay {
        display: none !important;
    }
}