/**
 * HİSSİYAD — Global UX Refinements v1.0
 * Premium micro-interactions, depth, touch feedback, page transitions
 *
 * Rules:
 *   - GPU-friendly: only transform, opacity, box-shadow, filter
 *   - Timing: 150ms–220ms for micro, 300ms for page
 *   - Dark mode: all effects respect [data-theme="dark"]
 *   - Mobile: :active states instead of :hover for touch
 *   - No layout thrashing, no forced repaints
 */

/* ═══════════════════════════════════════════
   1. PAGE LOAD TRANSITION
   ═══════════════════════════════════════════ */
body {
    opacity: 0;
    animation: uxPageFadeIn .4s ease .05s forwards;
}
@keyframes uxPageFadeIn {
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════
   2. AVATAR HOVER EFFECTS
   ═══════════════════════════════════════════ */

/* Profile avatar (large) */
.profile-avatar,
.author-avatar-large {
    transition: transform .2s ease, box-shadow .2s ease;
}
.profile-avatar:hover,
.author-avatar-large:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,.15), 0 0 0 3px rgba(180,128,82,.2);
}

/* Nav avatar */
.nav-user img {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav-user:hover img {
    transform: scale(1.1);
    border-color: #d4a574;
    box-shadow: 0 2px 10px rgba(180,128,82,.25);
}

/* Comment & card avatars */
.comment-avatar img,
.nd-avatar,
.post-author-avatar img,
.follower-avatar img {
    transition: transform .18s ease;
}
.comment-avatar img:hover,
.nd-avatar:hover,
.post-author-avatar img:hover,
.follower-avatar img:hover {
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════
   3. VERIFIED / FOUNDER BADGE GLOW
   ═══════════════════════════════════════════ */
.badge-verified,
.badge-founder,
.badge-premium,
.badge-creator,
[class*="badge-"] img {
    transition: filter .2s ease, transform .2s ease;
}
.badge-verified:hover,
.badge-founder:hover,
.badge-premium:hover,
.badge-creator:hover {
    filter: drop-shadow(0 0 6px rgba(180,128,82,.6)) drop-shadow(0 0 12px rgba(180,128,82,.3));
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════
   4. BUTTON PRESS FEEDBACK (scale down)
   ═══════════════════════════════════════════ */
.nav-cta,
.cookie-btn,
.footer-nl-btn,
.btn-primary,
.btn-copper,
.compose-btn,
button[type="submit"],
.follow-btn,
.edit-btn {
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-cta:active,
.cookie-btn:active,
.footer-nl-btn:active,
.btn-primary:active,
.btn-copper:active,
.compose-btn:active,
button[type="submit"]:active,
.follow-btn:active,
.edit-btn:active {
    transform: scale(.97) !important;
}

/* ═══════════════════════════════════════════
   5. CARD HOVER DEPTH
   ═══════════════════════════════════════════ */
.feed-card,
.article-card,
.post-card,
.writer-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.feed-card:hover,
.article-card:hover,
.post-card:hover,
.writer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}
[data-theme="dark"] .feed-card:hover,
[data-theme="dark"] .article-card:hover,
[data-theme="dark"] .post-card:hover,
[data-theme="dark"] .writer-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
}

/* ═══════════════════════════════════════════
   6. IMAGE LAZY-LOAD FADE IN
   ═══════════════════════════════════════════ */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity .35s ease;
}
img[loading="lazy"].ux-loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}
/* Fallback: if image is already loaded (cached), show immediately */
img[loading="lazy"] {
    animation: uxImgFade .35s ease .1s forwards;
}
@keyframes uxImgFade {
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════
   7. SCROLL REVEAL ANIMATION
   ═══════════════════════════════════════════ */
.ux-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
}
.ux-reveal.ux-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   8. NAV SCROLL SHADOW ENHANCE
   ═══════════════════════════════════════════ */
nav.ux-scrolled {
    box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] nav.ux-scrolled {
    box-shadow: 0 1px 12px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════
   9. LINK HOVER UNDERLINE REFINEMENT
   ═══════════════════════════════════════════ */
.footer-section ul li a,
.cookie-text a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .25s ease, color .25s ease, padding-left .25s ease;
}
.footer-section ul li a:hover,
.cookie-text a:hover {
    background-size: 100% 1px;
}

/* ═══════════════════════════════════════════
   10. INTERACTIVE ELEMENT FOCUS RING
   ═══════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(180,128,82,.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════
   11. MOBILE TOUCH FEEDBACK
   ═══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch */
    .profile-avatar:hover,
    .author-avatar-large:hover {
        transform: none;
        box-shadow: none;
    }
    .nav-user:hover img {
        transform: none;
        box-shadow: none;
        border-color: var(--copper, #B48052);
    }
    .feed-card:hover,
    .article-card:hover,
    .post-card:hover,
    .writer-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* Touch active states */
    .feed-card:active,
    .article-card:active,
    .post-card:active {
        transform: scale(.985);
        opacity: .92;
        transition: transform .1s ease, opacity .1s ease;
    }

    a:active,
    button:active {
        opacity: .7;
        transition: opacity .08s ease;
    }

    /* Tap highlight */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(180,128,82,.12);
    }
}

/* ═══════════════════════════════════════════
   12. STAT COUNTER HOVER (profile stats)
   ═══════════════════════════════════════════ */
.stat-item,
.profile-stat {
    transition: transform .15s ease;
    cursor: default;
}
.stat-item:hover,
.profile-stat:hover {
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   13. SOCIAL LINK PILLS HOVER
   ═══════════════════════════════════════════ */
.social-link-pill {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-link-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════
   14. TAB INDICATOR TRANSITION
   ═══════════════════════════════════════════ */
.tabs a,
.profile-tabs a,
.tab-item {
    transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* ═══════════════════════════════════════════
   15. SKELETON SHIMMER (reusable)
   ═══════════════════════════════════════════ */
.ux-skeleton {
    background: linear-gradient(90deg,
        rgba(0,0,0,.04) 25%,
        rgba(0,0,0,.07) 50%,
        rgba(0,0,0,.04) 75%
    );
    background-size: 200% 100%;
    animation: uxShimmer 1.5s ease infinite;
    border-radius: 6px;
}
[data-theme="dark"] .ux-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 75%
    );
    background-size: 200% 100%;
}
@keyframes uxShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════
   16. SMOOTH SCROLLBAR (webkit)
   ═══════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(180,128,82,.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(180,128,82,.35);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(180,128,82,.25);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(180,128,82,.4);
}

/* ═══════════════════════════════════════════
   17. SELECTION COLOR
   ═══════════════════════════════════════════ */
::selection {
    background: rgba(180,128,82,.2);
    color: inherit;
}
[data-theme="dark"] ::selection {
    background: rgba(212,165,116,.25);
}

/* ═══════════════════════════════════════════
   18. LOADING SPINNER — Global utility
   ═══════════════════════════════════════════ */
.ux-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.ux-spinner::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(180,128,82,.25);
    border-top-color: #B48052;
    border-radius: 50%;
    animation: uxSpin .6s linear infinite;
}
.ux-spinner-lg::after {
    width: 28px;
    height: 28px;
    border-width: 3px;
}
@keyframes uxSpin {
    to { transform: rotate(360deg); }
}

/* Button loading state */
button.ux-loading,
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
button.ux-loading::after,
.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: uxSpin .6s linear infinite;
}
[data-theme="dark"] button.ux-loading::after {
    border-color: rgba(180,128,82,.3);
    border-top-color: #d4a574;
}

/* Full-page overlay spinner */
.ux-page-loader {
    position: fixed;
    inset: 0;
    background: rgba(26,21,18,.4);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.ux-page-loader.active {
    opacity: 1;
    visibility: visible;
}
.ux-page-loader::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(180,128,82,.2);
    border-top-color: #B48052;
    border-radius: 50%;
    animation: uxSpin .6s linear infinite;
}

/* ═══════════════════════════════════════════
   19. FORM VALIDATION — Field states
   ═══════════════════════════════════════════ */
.ux-field-error input,
.ux-field-error textarea,
.ux-field-error select,
input.ux-invalid,
textarea.ux-invalid,
select.ux-invalid {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 2px rgba(211,47,47,.12);
}
.ux-field-error input:focus,
.ux-field-error textarea:focus,
input.ux-invalid:focus,
textarea.ux-invalid:focus {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 3px rgba(211,47,47,.15);
}
.ux-error-msg {
    color: #d32f2f;
    font-size: .8rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: uxFadeSlide .2s ease;
}
.ux-error-msg::before {
    content: '⚠';
    font-size: .75rem;
}
.ux-success-msg {
    color: #2e7d32;
    font-size: .8rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: uxFadeSlide .2s ease;
}
.ux-success-msg::before {
    content: '✓';
    font-weight: 700;
}
@keyframes uxFadeSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast notification (global) */
.ux-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: #1A1512;
    color: white;
    padding: .8rem 1.8rem;
    border-radius: 12px;
    font-size: .88rem;
    font-family: 'Inter', sans-serif;
    z-index: 99998;
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    max-width: 90vw;
    text-align: center;
}
.ux-toast.show {
    transform: translateX(-50%) translateY(0);
}
.ux-toast.ux-toast-success {
    background: #2e7d32;
}
.ux-toast.ux-toast-error {
    background: #c62828;
}
[data-theme="dark"] .ux-toast {
    background: #2a2420;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════
   20. REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body {
        opacity: 1 !important;
        animation: none !important;
    }
    .ux-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}