/*

 Theme Name:   Hulyx

 Template:     tikswipe

 Version:      2.8.9

 Description:  Version Native MP4 - GPU Optimized (Color Variables Centralized)

*/

:root {

    color-scheme: light;

    /* --- ACCENTS (HIGHLIGHTS) --- */

    --h-accent-2:        #ff3b30;

    --h-accent-main:     #00eaff;

    --h-accent-gold:     #f4c025;

    --h-accent-green:    #00ff88;

    --h-accent-3:        #ff4fa3;

    --h-accent-red:      #ff3b30;

    /* --- TYPOGRAPHY --- */

    --h-font-global:     'Montserrat', sans-serif;

    

    /* Variantes avec opacité */

    

    --h-accent-main-glow: rgba(0, 234, 255, 0.3);

    --h-accent-gold-glow: rgba(244, 192, 37, 0.25);

    /* --- FONDS & SURFACES --- */

    --h-bg-main:          #000000;

    --h-bg-surface:       #0a0a0a;

    --h-bg-card:          #111111;

    --h-bg-overlay:       rgba(0, 0, 0, 0.7);

    --h-bg-elevated:      rgba(255, 255, 255, 0.06);

    --h-bg-inset:         rgba(255, 255, 255, 0.04);

    /* --- BORDURES & LIGNES --- */

    --h-border-subtle:    rgba(255, 255, 255, 0.05);

    --h-border-active:    rgba(255, 255, 255, 0.1);

    --h-border-medium:    rgba(255, 255, 255, 0.15);

    /* --- TEXTE --- */

    --h-text-primary:     #ffffff;

    --h-text-secondary:   rgba(255, 255, 255, 0.7);

    --h-text-muted:       rgba(255, 255, 255, 0.4);

    --h-text-dim:         #666666;

    --h-text-placeholder: rgba(255, 255, 255, 0.3);

    --h-footer-height: 60px;

    /* --- Z-INDEX MAP --- */

    --z-footer:        19;

    --z-overlay:       calc(var(--z-hud) + 1);

    --z-tutorial:      20;

    --z-video-shell:   1;

    --z-hud:           15;

    --z-modal:         100;

    --z-popup:         var(--z-modal);

}

:focus-visible {

    outline: 2px solid var(--h-accent, #00eaff);

    outline-offset: 2px;

}

:focus:not(:focus-visible) {

    outline: none;

}

body.hulyx-color-active #hulyx-video-viewport video,

    body.hulyx-color-active .swiper-slide video,

    body.hulyx-color-active .tikswipe-video-container video {

        filter: grayscale(0%) saturate(120%) hue-rotate(9deg) contrast(120%) brightness(110%) !important;

        transition: filter 0.4s ease-in-out;

}

*::-webkit-scrollbar { display: none !important; }

* { scrollbar-width: none !important; }

/**

 * HULYX UI NORMALIZATION & VIEWPORT

 */

.swiper.hulyx-main-swiper {

    position: relative;

    overflow: hidden; 

}

/**

 * Hulyx Scroll UI CSS

 * Version: 1.1.1 - GPU Optimization

 */

.hulyx-nav-btn {

    pointer-events: auto !important;

    background: var(--h-bg-overlay);

    border: 1px solid var(--h-border-active);

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, border-color 0.2s;

    padding: 12px;

    outline: none;

}

.hulyx-nav-btn:hover {

    background: var(--h-accent-main-glow);

    border-color: var(--h-accent-main);

    transform: scale(1.15) translateZ(0);

}

.hulyx-nav-btn:active {

    transform: scale(0.95);

}

@media (max-width: 767.98px) {

}

/* 1. Base & Shells */

body.hulyx-locked { 

    overflow: hidden !important; 

    touch-action: none; 

}

.hulyx-video-shell video { 

    width: 100%; 

    height: 100%; 

    object-fit: cover; 

    transform: translateZ(0); 

}

/* 2. Navigation & Footer Sync (Z-index Fix) */

#tikswipe-footer-nav, 

.tikswipe-footer-nav, 

#hulyx-footer-nav { 

    z-index: 17 !important; 

    position: fixed !important; 

    pointer-events: auto !important; 

}

/* 3. Mobile Viewport Normalization (60px Footer) */

@media (max-width: 767.98px) {

    .swiper, 

    .swiper-container, 

    .tikswipe-video-container,

    #hulyx-video-viewport { 

        height: calc(100svh - var(--h-footer-height)) !important; 

        max-height: calc(100svh - var(--h-footer-height)) !important; 

    }

}

/* --- QUALITY TOGGLE SD/HD --- */

.h-menu-header-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

    border-bottom: 1px solid var(--h-border-subtle);

    padding-bottom: 8px;

}

.h-quality-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 9px;

    font-weight: 900;

    padding: 3px 6px;

    background: var(--h-border-subtle);

    border-radius: 12px;

    user-select: none;

    transition: opacity 0.3s, transform 0.3s 0.3s ease;

}

.h-quality-btn .toggle-track {

    width: 22px;

    height: 12px;

    background: var(--h-bg-card);

    border-radius: 10px;

    position: relative;

    border: 1px solid var(--h-border-active);

}

.h-quality-btn .toggle-knob {

    width: 8px;

    height: 8px;

    background: var(--h-text-dim);

    border-radius: 50%;

    position: absolute;

    top: 1px;

    left: 1px;

    transition: opacity 0.3s, transform 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.h-quality-btn.is-hd .toggle-track { background: var(--h-accent-2); border-color: var(--h-accent-2); }

.h-quality-btn.is-hd .toggle-knob { left: 11px; background: var(--h-text-primary);  box-shadow: none !important; }

.h-quality-btn.is-hd .label-hd { color: var(--h-text-primary); }

.h-quality-btn:not(.is-hd) .label-sd { color: var(--h-text-primary); }

.h-quality-btn span { color: var(--h-text-muted); transition: color 0.2s; }

/**

 * Hulyx RPG HUD - Low Z Architecture (Max 20)

 */

#menu-header-navigation, #menu-mobile-icon {

    display: none !important;

}

.swiper-slide {

    position: relative !important;

    display: flex !important;

    justify-content: center !important;

    align-items: flex-start !important;

    width: 100% !important;

    flex-shrink: 0 !important;
    overflow: hidden !important;

    background: transparent !important;

}

.swiper-slide > *:not(.hulyx-video-shell) {

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none;

}

.hulyx-video-shell {

    position: relative !important;

    background: var(--h-bg-main);

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    z-index: var(--z-video-shell);

    width: 100%;

    height: 100%;

    flex-shrink: 0;

}

@media (min-width: 768px) {

    #hulyx-tutorial-overlay, .h-auth-overlay-system {

        z-index: var(--z-hud) !important; 

    }

}

@media (max-width: 767.98px) {

    #hulyx-tutorial-overlay, .h-auth-overlay-system {

        z-index: var(--z-hud) !important; 

    }

}

.hulyx-native-video {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    touch-action: manipulation;

}

/* PC : Viewport 9:16 Centré */

@media (min-width: 768px) {

    .hulyx-video-shell {

        height: 100% !important;

        aspect-ratio: 9 / 16 !important;

        box-shadow: none;

    }

    .hulyx-native-video {

        object-fit: contain !important;

    }

}

/* MOBILE : Full Screen Crop */

@media (max-width: 767.98px) {

    .hulyx-video-shell {

        width: 100% !important;

        height: 100% !important;

        aspect-ratio: auto !important;

        position: relative;

        overflow: hidden;

        background: #000;

    }

    .hulyx-native-video {

        object-fit: contain !important;

    }

}

/* v4.101: LANDSCAPE AUTO-ROTATION — FULL-BLEED 16:9 CROP (no backdrop).


   UNIVERSAL (desktop 9:16 rail + mobile full-screen portrait).


   The slide is tagged data-ratio by _tagAspectRatio (hulyx-scroll-manager.js);


   --rot-w/--rot-h = shell dims SWAPPED so the rotated element's bounding box == the


   shell exactly, and object-fit:cover crops the source to exactly 16:9. No side bars,


   no blurred-thumbnail backdrop (backdrop removed entirely in v4.101). Exact 16:9


   sources show uncropped; wider/taller landscapes get a plain feed-style cover crop. */



.swiper-slide[data-ratio="landscape"] .hulyx-native-video {

    position: absolute;

    left: 50%;

    top: 50%;

    width: var(--rot-w, 100%) !important;

    height: var(--rot-h, 100%) !important;

    object-fit: cover !important;

    transform: translate(-50%, -50%) rotate(90deg);

    z-index: 1;

}

/* --- LOGO & HEADER VISIBILITY --- */

.site-header {

    position: fixed !important; 

    top: 0px !important; 

    left: 50% !important;

    width: 90% !important;

    max-width: min(100vw, calc(100vh * 9 / 16)) !important;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px !important;

    background: transparent !important; 

    z-index: calc(var(--z-hud) + 3) !important; 

    opacity: 0;

    pointer-events: none;

transform: translateX(-50%) translateY(-100%);


    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);


}

.site-header.header-visible {

    opacity: 1;

    transform: translateX(-50%) translateY(0);

    pointer-events: auto;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%) !important;

}

@media (max-width: 767.98px) {

    .site-header {

        width: 100% !important;

        max-width: none !important;

        left: 0 !important;

        transform: translateY(-100%) !important;

    }

    .site-header.header-visible {

        transform: translateY(0) !important;

    }

}

.logo, .custom-logo, .custom-logo-link {

    display: inline-block;

    visibility: visible !important;

    opacity: 1 !important;

    width: auto !important;

}

/* --- GESTION OPACITÉ FOOTER (Gris à Blanc) --- */

#hulyx-footer-nav .hulyx-nav-item .hulyx-icon-wrap {

    opacity: 0.6;

    transition: opacity 0.3s ease;

}

#hulyx-footer-nav .hulyx-nav-item.active .hulyx-icon-wrap, 

.is-active .hulyx-icon-wrap {

    opacity: 1 !important;

}

.custom-logo {

    padding: 10px !important;

    margin-top: 40px !important;

}

#menu-mobile-icon, .h-nav-tutorial-item, .hulyx-arrows-stack {

    display: none !important;

}

@media (max-width: 767.98px) {

    .custom-logo {

       display:none !important;

    }

}

/* --- CONFIGURATION FOOTER PC --- */

@media (min-width: 768px) {

    #hulyx-footer-nav {

        position: fixed !important;

        top: 50% !important;

        bottom: auto !important;

        left: calc(50% + (100svh * 9 / 16 / 2) + 40px) !important;

        transform: translateY(-50%) !important;

        width: 70px !important;

        height: auto !important;

        flex-direction: column !important;

        justify-content: center !important;

        gap: 30px !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        z-index: 17 !important;

    }

    .h-nav-tutorial-item {

        display: flex !important;

        order: -1 !important; 

    }

    #hulyx-footer-nav .hulyx-nav-item {

        width: 50px !important;

        height: 50px !important;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #hulyx-footer-nav .hulyx-icon-wrap {

        transform: rotate(0deg) !important; 

    }

}

.hulyx-nav-item:hover {

    background-color: rgba(255,255,255,0.15);

}

/* --- TIK SWIPE UI CLEANUP --- */

#switch-to-grid, .nav-item, .enlight-content,

.swiper-button-next, .swiper-button-prev, .swiper-button-disabled, 

.single-content-infos, .copy-link, .comment-icon, 

.comment-closed, .add-to-fav, .add-fav {

    display: none !important;

}

/* --- UI COMPONENTS --- */

.slide-bg { background-color: rgba(0, 0, 0, 0) !important; }

.video-item video, .video-player { opacity: 0 !important; pointer-events: none !important; }

/* --- GESTION DES FILTRES COULEUR / B&W --- */

/* État par défaut : Couleur naturelle (grayscale désactivé) */

.swiper-slide video, 

#hulyx-video-viewport video,

.hulyx-video-shell video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(0%); 

    transform: translateZ(0);

    will-change: opacity;

    transition: filter 0.5s ease-in-out, opacity 0.4s ease;

}

.hulyx-native-video {

    filter: grayscale(0%);

    transform: translateZ(0);

    will-change: opacity;

    transition: filter 0.5s ease-in-out, opacity 0.4s ease;

}

/* État activé par le bouton : Noir et Blanc (B&W) */

body.hulyx-color-active .swiper-slide video,

body.hulyx-color-active #hulyx-video-viewport video,

body.hulyx-color-active .tikswipe-video-container video,

body.hulyx-color-active .hulyx-native-video {

     filter: grayscale(0%) saturate(130%) hue-rotate(6deg) contrast(125%) brightness(105%) !important;

}

#hulyx-video-viewport { 

    position: fixed; inset: 0; width: 100vw; height: 100svh; 

    z-index: -2 !important; background: var(--h-bg-main); overflow: hidden; 

}

/* Voice Companion scroll speed edge glow — matches metronome colors */
#hulyx-video-viewport.vc-glow-purple,
#hulyx-video-viewport.vc-glow-green,
#hulyx-video-viewport.vc-glow-yellow,
#hulyx-video-viewport.vc-glow-orange,
#hulyx-video-viewport.vc-glow-red {
    animation: vcEdgeGlow 2.5s ease-in-out forwards;
}
#hulyx-video-viewport.vc-glow-purple {
    box-shadow: inset 80px 0 120px -40px rgba(156,39,176,0.7),
                inset -80px 0 120px -40px rgba(156,39,176,0.7);
}
#hulyx-video-viewport.vc-glow-green {
    box-shadow: inset 80px 0 120px -40px rgba(76,175,80,0.7),
                inset -80px 0 120px -40px rgba(76,175,80,0.7);
}
#hulyx-video-viewport.vc-glow-yellow {
    box-shadow: inset 80px 0 120px -40px rgba(255,193,7,0.7),
                inset -80px 0 120px -40px rgba(255,193,7,0.7);
}
#hulyx-video-viewport.vc-glow-orange {
    box-shadow: inset 80px 0 120px -40px rgba(255,152,0,0.7),
                inset -80px 0 120px -40px rgba(255,152,0,0.7);
}
#hulyx-video-viewport.vc-glow-red {
    box-shadow: inset 80px 0 120px -40px rgba(211,47,47,0.7),
                inset -80px 0 120px -40px rgba(211,47,47,0.7);
}
@keyframes vcEdgeGlow {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }


    15%  { opacity: 1; }

    70%  { opacity: 1; }

    100% { opacity: 0; }

}

/**

 * Swiper Viewport Constraint

 */

.swiper {

    width: 100vw;

    height: 100svh;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

}

@media (min-width: 768px) {

    .swiper {

        width: calc(100svh * 9 / 16) !important; 

        margin: 0 auto !important;

        left: 0 !important;

        right: 0 !important;

        transform: none !important;

        box-shadow: none; 

    }

}

.swiper-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 1;

    display: flex;

    flex-direction: column;

    box-sizing: border-box !important;

}

.site-header .custom-logo { display: none !important; }

/* Hide timeline bar completely */

#hulyx-timeline-wrapper {

    display: none !important;

}

/* Black & White filter */

body.hulyx-bw-active #hulyx-video-viewport video,

body.hulyx-bw-active .swiper-slide video,

body.hulyx-bw-active .tikswipe-video-container video,

body.hulyx-bw-active .hulyx-native-video {

    filter: grayscale(100%) !important;

}

@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}

@keyframes goonit-particle-drift {

    0%, 100% { transform: translate(0, 0); }

    25% { transform: translate(5px, -8px); }

    50% { transform: translate(-3px, 5px); }

    75% { transform: translate(7px, 3px); }

}

/* === MENU BG LOCK: physical event-absorbing barrier === */

/* When ANY footer menu overlay is open, a full-screen transparent layer (z-index:10,

   above the video feed at z:-2, below all menu shells at z:14+) intercepts EVERY wheel/touch/pointer

   event so the background feed can NEVER scroll. Menu cards (z >= 14) sit above and work normally. */