/**
 * Custom Cursor Styles for MyPlanet Design Agency
 * Version: 2.0.0 - Minimalist Outline Design
 * GSAP-powered custom cursor with Font Awesome icons
 */

/* Hide default cursor on desktop */
@media (min-width: 768px) {
    body,
    a, button, input, textarea, select,
    .project-card-container,
    .tab, .content-item-link,
    .social-link, .social-icon {
        cursor: none !important;
    }
}

/* Main cursor container */
.mpd-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: normal;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* Cursor inner circle - Minimalist outline design (no blur) */
.mpd-cursor-inner {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: 1.5px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: width, height, border-color, opacity, transform;
    box-shadow: none;
}

/* Font Awesome icon inside cursor */
.mpd-cursor-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Text label for states that keep text (VIEW, DRAG) */
.mpd-cursor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    color: #000000;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.2s ease;
    font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Dark section - white outline */
.mpd-cursor[data-context="dark"] .mpd-cursor-inner {
    border-color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.05);
}

.mpd-cursor[data-context="dark"] .mpd-cursor-icon,
.mpd-cursor[data-context="dark"] .mpd-cursor-text {
    color: #FFFFFF;
}

/* ========== CURSOR STATES ========== */

/* Default state (24px, outline only) */
.mpd-cursor[data-state="default"] .mpd-cursor-inner {
    width: 24px;
    height: 24px;
    border-color: #000000;
}

/* Link hover (56px, purple fill on white bg, black fill on colored bg, arrow) */
.mpd-cursor[data-state="link"] .mpd-cursor-inner {
    width: 56px;
    height: 56px;
    background-color: #000000;
    border-color: #000000;
    border-width: 1.5px;
}

.mpd-cursor[data-state="link"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 18px;
}

/* Link hover on purple/pink elements - purple fill with white icon */
.mpd-cursor[data-state="link"][data-inverted="true"] .mpd-cursor-inner {
    background-color: #8B5CF6;
    border-color: #8B5CF6;
}

.mpd-cursor[data-state="link"][data-inverted="true"] .mpd-cursor-icon {
    color: #FFFFFF;
}

/* Button hover - default purple fill (for outline buttons) */
.mpd-cursor[data-state="button"] .mpd-cursor-inner {
    width: 56px;
    height: 56px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="button"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 18px;
}

/* Button hover on purple filled buttons - white/black cursor */
.mpd-cursor[data-state="button"][data-inverted="true"] .mpd-cursor-inner {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.mpd-cursor[data-state="button"][data-inverted="true"] .mpd-cursor-icon {
    color: #000000;
}

/* Button hover on purple filled buttons on dark bg - black cursor with white icon */
.mpd-cursor[data-state="button"][data-inverted="dark"] .mpd-cursor-inner {
    background-color: #000000;
    border-color: #000000;
}

.mpd-cursor[data-state="button"][data-inverted="dark"] .mpd-cursor-icon {
    color: #FFFFFF;
}

/* Project card (70px, purple outline, VIEW text) */
.mpd-cursor[data-state="project"] .mpd-cursor-inner {
    width: 70px;
    height: 70px;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="project"] .mpd-cursor-text {
    opacity: 1;
    color: #8B5CF6;
    font-size: 12px;
}

/* Form input (44px, light purple, edit icon) */
.mpd-cursor[data-state="input"] .mpd-cursor-inner {
    width: 44px;
    height: 44px;
    border-color: #A78BFA;
    border-width: 1.5px;
}

.mpd-cursor[data-state="input"] .mpd-cursor-icon {
    opacity: 1;
    color: #A78BFA;
    font-size: 16px;
}

/* Draggable/Slider (60px, purple, DRAG text) */
.mpd-cursor[data-state="draggable"] .mpd-cursor-inner {
    width: 60px;
    height: 60px;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="draggable"] .mpd-cursor-text {
    opacity: 1;
    color: #8B5CF6;
    font-size: 11px;
}

/* Service tab (56px, purple fill with white arrow) */
.mpd-cursor[data-state="service-tab"] .mpd-cursor-inner {
    width: 56px;
    height: 56px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="service-tab"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 16px;
}

/* Service tab on purple elements - same purple fill */
.mpd-cursor[data-state="service-tab"][data-inverted="true"] .mpd-cursor-inner {
    background-color: #8B5CF6;
    border-color: #8B5CF6;
}

.mpd-cursor[data-state="service-tab"][data-inverted="true"] .mpd-cursor-icon {
    color: #FFFFFF;
}

/* Social icon (44px, purple fill with white icon) */
.mpd-cursor[data-state="social"] .mpd-cursor-inner {
    width: 44px;
    height: 44px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="social"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 16px;
}

/* Image hover (60px, purple fill with white icon) */
.mpd-cursor[data-state="image"] .mpd-cursor-inner {
    width: 60px;
    height: 60px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="image"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 18px;
}

/* Accordion/FAQ hover (60px, purple fill with white text) */
.mpd-cursor[data-state="accordion"] .mpd-cursor-inner {
    width: 60px;
    height: 60px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="accordion"] .mpd-cursor-text {
    opacity: 1 !important;
    color: #FFFFFF !important;
    font-size: 11px;
}

/* Slider navigation (56px, purple fill with white arrow) */
.mpd-cursor[data-state="slider-nav"] .mpd-cursor-inner {
    width: 56px;
    height: 56px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="slider-nav"] .mpd-cursor-icon {
    opacity: 1;
    color: #FFFFFF;
    font-size: 18px;
}

/* Blog article (60px, purple fill with white "Read" text) */
.mpd-cursor[data-state="blog-article"] .mpd-cursor-inner {
    width: 60px;
    height: 60px;
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    border-width: 1.5px;
}

.mpd-cursor[data-state="blog-article"] .mpd-cursor-text {
    opacity: 1 !important;
    color: #FFFFFF !important;
    font-size: 11px;
}

/* Disabled state (30px, gray) */
.mpd-cursor[data-state="disabled"] .mpd-cursor-inner {
    width: 30px;
    height: 30px;
    border-color: #6B7280;
    opacity: 0.5;
}

/* Click effect - shrink slightly */
.mpd-cursor.clicking .mpd-cursor-inner {
    transform: scale(0.9);
}

/* Magnetic effect (animated via JS) */
.mpd-cursor.magnetic {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark section context - white outlines */
.mpd-cursor[data-context="dark"] .mpd-cursor[data-state="link"] .mpd-cursor-inner,
.mpd-cursor[data-context="dark"] .mpd-cursor[data-state="button"] .mpd-cursor-inner,
.mpd-cursor[data-context="dark"] .mpd-cursor[data-state="project"] .mpd-cursor-inner {
    border-color: #FFFFFF;
}

.mpd-cursor[data-context="dark"] .mpd-cursor[data-state="link"] .mpd-cursor-icon,
.mpd-cursor[data-context="dark"] .mpd-cursor[data-state="button"] .mpd-cursor-icon {
    color: #FFFFFF;
}

/* Contact section context (pink outlines) */
.mpd-cursor[data-context="contact"] .mpd-cursor-inner {
    border-color: #EC4899;
}

.mpd-cursor[data-context="contact"] .mpd-cursor-icon,
.mpd-cursor[data-context="contact"] .mpd-cursor-text {
    color: #EC4899;
}

/* Smooth animations */
.mpd-cursor,
.mpd-cursor-inner,
.mpd-cursor-icon,
.mpd-cursor-text {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide on mobile/tablet */
@media (max-width: 767px) {
    .mpd-cursor,
    .mpd-cursor-trail {
        display: none !important;
    }

    body,
    a, button, input, textarea, select {
        cursor: auto !important;
    }
}

/* Tablet - simplified version */
@media (min-width: 768px) and (max-width: 1024px) {
    .mpd-cursor-icon,
    .mpd-cursor-text {
        display: none;
    }

    .mpd-cursor[data-state="link"] .mpd-cursor-inner,
    .mpd-cursor[data-state="button"] .mpd-cursor-inner {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Performance optimizations */
.mpd-cursor,
.mpd-cursor-inner,
.mpd-cursor-icon {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Accessibility - respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mpd-cursor,
    .mpd-cursor-inner,
    .mpd-cursor-icon,
    .mpd-cursor-text {
        animation: none !important;
        transition: none !important;
    }
}

/* Print - hide cursor */
@media print {
    .mpd-cursor {
        display: none !important;
    }
}