/* 
 * Phase 8: Experiential UI Styles
 * Powering FOMO Toasts, 3D Tilt, Voice Search, and Cinema Scroll
*/

/* --- 5. FOMO Toasts --- */
.fomo-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.fomo-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 10px 20px 10px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    transform: translateY(50px) scale(0.9);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fomo-card.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.fomo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.fomo-content {
    font-size: 0.85rem;
    line-height: 1.2;
    color: #333;
}

/* --- 8. Voice Voice Pulse --- */
.pulse-mic {
    animation: micPulse 1s infinite alternate;
    background: rgba(255,0,0,0.1);
    border-radius: 50%;
}
@keyframes micPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    100% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
}

/* --- 7. Tilt 3D Properties --- */
.tilt-card-3d {
    transform-style: preserve-3d;
    will-change: transform;
}
.tilt-card-3d .card-img-top {
    transform: translateZ(30px);
}
.tilt-card-3d .card-title {
    transform: translateZ(40px);
}
.tilt-card-3d .btn {
    transform: translateZ(50px);
}

/* --- 6. Spin Wheel Gamification --- */
.fortune-wheel-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
.fortune-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    background: conic-gradient(
        #ff5e5e 0 60deg, 
        #ffc107 60deg 120deg, 
        #28a745 120deg 180deg, 
        #17a2b8 180deg 240deg, 
        #6f42c1 240deg 300deg, 
        #fd7e14 300deg 360deg
    );
    position: relative;
    overflow: hidden;
}
.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #333;
    z-index: 10;
}
.pop-anim {
    animation: popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popUp {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}



/* --- 2. Stories --- */
.story-bubbles-wrap {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px;
    scroll-behavior: smooth;
}
.story-bubbles-wrap::-webkit-scrollbar { display: none; }
.story-bubble {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
}
.story-ring {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    transition: transform 0.2s;
}
.story-bubble:hover .story-ring { transform: scale(1.05); }
.story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}
.story-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* --- 1. SVG Map --- */
.interactive-map-area path {
    fill: rgba(13, 110, 253, 0.2);
    stroke: rgba(255,255,255,0.8);
    stroke-width: 2;
    transition: all 0.3s;
    cursor: pointer;
}
.interactive-map-area path:hover {
    fill: rgba(13, 110, 253, 0.8);
    filter: drop-shadow(0 0 10px rgba(13, 110, 253, 0.8));
    transform: translateY(-2px);
}

/* Float Anim */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}