/*
 * Micro-interactions & Dopamine Effects
 */

/* ── Button spring press ──────────────────────────── */
.wishly-btn--primary:active,
.wishly-btn--secondary:active {
    transform: scale(0.95);
    transition: transform 0.1s var(--w-ease-spring);
}

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

/* ── Product card rarity glow backgrounds ─────────── */
.wishly-product-card__image--common {
    background: linear-gradient(135deg, rgba(156,163,175,0.08) 0%, rgba(156,163,175,0.02) 100%);
}

.wishly-product-card__image--uncommon {
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(6,182,212,0.06) 100%);
}

.wishly-product-card__image--rare {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(124,58,237,0.08) 100%);
}

.wishly-product-card__image--epic {
    background: linear-gradient(135deg, rgba(139,92,246,0.2) 0%, rgba(236,72,153,0.1) 100%);
}

.wishly-product-card__image--legendary {
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(239,68,68,0.1) 100%);
    position: relative;
}

.wishly-product-card__image--legendary::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(245,158,11,0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(239,68,68,0.1) 0%, transparent 50%);
    animation: wishly-gradient-shift 4s ease infinite;
    background-size: 200% 200%;
}

/* ── Product emoji enhanced display ───────────────── */
.wishly-product-card__emoji {
    font-size: 4rem;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.15));
    transition: transform 0.4s var(--w-ease-spring);
    display: inline-block;
}

.wishly-product-card:hover .wishly-product-card__emoji {
    transform: scale(1.15) translateY(-4px);
}

/* ── Badge sparkle on hover ───────────────────────── */
.wishly-badge {
    transition: all var(--w-transition-fast);
    position: relative;
    overflow: hidden;
}

.wishly-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.wishly-badge:hover::after,
.wishly-badge--legendary::after {
    left: 125%;
}

.wishly-badge--legendary::after {
    animation: wishly-badge-shine 3s ease-in-out infinite;
}

@keyframes wishly-badge-shine {
    0%, 100% { left: -75%; }
    50% { left: 125%; }
}

/* ── Achievement badge hover effects ──────────────── */
.wishly-achievement-badge--unlocked:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: var(--w-shadow-glow);
}

.wishly-achievement-badge--unlocked::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--w-gradient-primary);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.wishly-achievement-badge--unlocked:hover::after {
    opacity: 0.3;
}

/* ── Stat card hover bounce ───────────────────────── */
.wishly-stat-card {
    transition: all 0.3s var(--w-ease-spring);
}

.wishly-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--w-shadow-md);
}

.wishly-stat-card:hover .wishly-stat-card__icon {
    transform: scale(1.1);
    transition: transform 0.3s var(--w-ease-spring);
}

/* ── XP gain flash ────────────────────────────────── */
@keyframes wishly-xp-flash {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}

.wishly-xp-popup {
    position: fixed;
    font-size: var(--w-text-lg);
    font-weight: 800;
    color: var(--w-accent);
    pointer-events: none;
    z-index: 9998;
    animation: wishly-xp-flash 1s var(--w-ease-out) forwards;
    text-shadow: 0 0 20px var(--w-accent-glow);
}

/* ── Progress bar glow pulse ──────────────────────── */
.wishly-xp-bar__fill {
    position: relative;
    overflow: hidden;
}

.wishly-xp-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: wishly-progress-shine 2s ease-in-out infinite;
}

@keyframes wishly-progress-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ── Chest / Mystery Box ──────────────────────────── */
.wishly-chest {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--w-space-6);
    position: relative;
    cursor: pointer;
    perspective: 600px;
}

.wishly-chest__box {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.3s var(--w-ease-spring);
}

.wishly-chest:hover .wishly-chest__box {
    transform: scale(1.05);
}

.wishly-chest__body {
    width: 100%;
    height: 70%;
    position: absolute;
    bottom: 0;
    border-radius: var(--w-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.wishly-chest__body--bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); }
.wishly-chest__body--silver { background: linear-gradient(135deg, #c0c0c0, #808080); }
.wishly-chest__body--gold { background: linear-gradient(135deg, #ffd700, #daa520); }
.wishly-chest__body--legendary { background: linear-gradient(135deg, #7c3aed, #ec4899); }

.wishly-chest__lid {
    width: 110%;
    height: 40%;
    position: absolute;
    top: 5%;
    left: -5%;
    border-radius: var(--w-radius-lg) var(--w-radius-lg) 0 0;
    transform-origin: bottom left;
    transition: transform 0.6s var(--w-ease-spring);
    z-index: 2;
}

.wishly-chest__lid--bronze { background: linear-gradient(135deg, #daa520, #cd7f32); }
.wishly-chest__lid--silver { background: linear-gradient(135deg, #d8d8d8, #c0c0c0); }
.wishly-chest__lid--gold { background: linear-gradient(135deg, #ffec8b, #ffd700); }
.wishly-chest__lid--legendary { background: linear-gradient(135deg, #a78bfa, #7c3aed); }

/* Chest opening animation */
.wishly-chest--opening .wishly-chest__lid {
    transform: rotateX(-110deg);
}

.wishly-chest__glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.wishly-chest__glow--bronze { background: radial-gradient(circle, rgba(205,127,50,0.4), transparent 70%); }
.wishly-chest__glow--silver { background: radial-gradient(circle, rgba(192,192,192,0.4), transparent 70%); }
.wishly-chest__glow--gold { background: radial-gradient(circle, rgba(255,215,0,0.5), transparent 70%); }
.wishly-chest__glow--legendary { background: radial-gradient(circle, rgba(124,58,237,0.5), transparent 70%); }

.wishly-chest--opening .wishly-chest__glow {
    opacity: 1;
    animation: wishly-pulse-glow 1s ease-in-out;
}

/* Chest reward reveal */
.wishly-chest__reward {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0);
    opacity: 0;
    font-size: var(--w-text-2xl);
    font-weight: 800;
    color: var(--w-rarity-legendary);
    text-align: center;
    white-space: nowrap;
    transition: all 0.5s var(--w-ease-spring) 0.3s;
    z-index: 3;
}

.wishly-chest--opening .wishly-chest__reward {
    transform: translateX(-50%) translateY(-30px) scale(1);
    opacity: 1;
}

/* ── Daily reward card ceremony ───────────────────── */
.wishly-daily-reward {
    text-align: center;
    position: relative;
}

.wishly-daily-reward__icon {
    font-size: 3rem;
    margin-bottom: var(--w-space-4);
    display: inline-block;
    transition: transform 0.3s var(--w-ease-spring);
}

.wishly-daily-reward:hover .wishly-daily-reward__icon {
    transform: scale(1.2) rotate(10deg);
}

.wishly-daily-reward--claimed .wishly-daily-reward__icon {
    animation: wishly-bounce 0.6s var(--w-ease-out);
}

/* ── Journey map styles ───────────────────────────── */
.wishly-journey-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
}

.wishly-journey-map svg {
    width: 100%;
    height: 100%;
}

.wishly-journey-map__path {
    fill: none;
    stroke: var(--w-accent);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    opacity: 0.4;
}

.wishly-journey-map__path--active {
    opacity: 1;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 6px var(--w-accent-glow));
}

.wishly-journey-map__stop {
    cursor: pointer;
    transition: transform 0.3s var(--w-ease-spring);
}

.wishly-journey-map__stop:hover {
    transform: scale(1.3);
}

.wishly-journey-map__stop--visited circle {
    fill: var(--w-accent);
    filter: drop-shadow(0 0 8px var(--w-accent-glow));
}

.wishly-journey-map__stop--current circle {
    fill: var(--w-success);
    filter: drop-shadow(0 0 10px rgba(16,185,129,0.5));
}

.wishly-journey-map__stop--upcoming circle {
    fill: var(--w-bg-tertiary);
    stroke: var(--w-border-secondary);
    stroke-width: 1;
}

.wishly-journey-map__label {
    font-size: 10px;
    fill: var(--w-text-secondary);
    font-family: var(--w-font-sans);
    text-anchor: middle;
}

/* ── Animated plane along path ────────────────────── */
@keyframes wishly-fly-path {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

.wishly-journey-map__plane {
    offset-rotate: auto;
    animation: wishly-fly-path 8s linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ── Hover ripple for interactive elements ────────── */
.wishly-ripple {
    position: relative;
    overflow: hidden;
}

.wishly-ripple__wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    transform: scale(0);
    animation: wishly-ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes wishly-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Nav XP pill bounce on update ─────────────────── */
.wishly-nav__xp-pill--updated {
    animation: wishly-bounce 0.6s var(--w-ease-out);
}

/* ── Toast slide-in enhancement ───────────────────── */
.wishly-toast--achievement {
    border-left: 4px solid var(--w-rarity-legendary);
    background: linear-gradient(135deg, var(--w-bg-card) 0%, rgba(245,158,11,0.08) 100%);
}