/* 
   PORTAFOLIO BYHUGIOK - MAIN STYLESHEET
   Modularized Architecture
*/

@import 'modules/_variables.css';
@import 'modules/_reset.css';
@import 'modules/_layout.css';
@import 'modules/_cursor.css';
@import 'modules/_header.css';
@import 'modules/_components.css';
@import 'modules/_footer.css';
@import 'modules/_hero.css';
@import 'modules/_responsive.css';

/* =========================================
   FINAL FIXES / CURSOR + HERO
========================================= */

/* Cursor custom */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    mix-blend-mode: exclusion;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition:
        width 0.2s ease,
        height 0.2s ease,
        opacity 0.18s ease;
    will-change: left, top, width, height, opacity;
}

#custom-cursor.is-visible {
    opacity: 1;
}

#custom-cursor.is-hover {
    width: 28px;
    height: 28px;
}

/* Solo ocultar cursor normal en desktop cuando el script lo active */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor label,
html.has-custom-cursor summary,
html.has-custom-cursor [role="button"] {
    cursor: none !important;
}

@media (hover: none), (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }

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

/* Hero controls */
.hero-visual {
    position: relative;
}

.hero-interaction-blocker {
    pointer-events: none !important;
}

.hero-playback-toggle,
.hero-sound-toggle {
    position: absolute;
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.hero-playback-toggle img,
.hero-sound-toggle img {
    pointer-events: none;
}

/* Iconos según estado */
.hero-playback-toggle .playback-icon-play,
.hero-sound-toggle .sound-icon-on {
    display: none;
}

.hero-playback-toggle.is-paused .playback-icon-play {
    display: block;
}

.hero-playback-toggle.is-paused .playback-icon-pause {
    display: none;
}

.hero-playback-toggle.is-playing .playback-icon-pause {
    display: block;
}

.hero-playback-toggle.is-playing .playback-icon-play {
    display: none;
}

.hero-sound-toggle.is-muted .sound-icon-off {
    display: block;
}

.hero-sound-toggle.is-muted .sound-icon-on {
    display: none;
}

.hero-sound-toggle.is-unmuted .sound-icon-on {
    display: block;
}

.hero-sound-toggle.is-unmuted .sound-icon-off {
    display: none;
}