/*
Theme Name: StreetHustle V4 Pro Atelier
Theme URI: https://streethustle.cz
Author: StreetHustle Atelier Ostrava
Description: Profesionální prémiová šablona verze 4 pro underground streetwear e-shop a audio vault s Tailwind a custom designem.
Version: 4.2.0
Requires at least: 6.0
Tested up to: 6.5
Text Domain: streethustle-v4
*/

/* STREAMING_CHUNK:Configuring root variables and theme resets... */
:root {
--bg-primary: #030303;
--bg-surface: #08080a;
--bg-card: #09090b;
--text-main: #f4f4f5;
--text-muted: #a1a1aa;
--accent-indigo: #6366f1;
--border-color: #27272a;
}

*, ::before, ::after {
box-sizing: border-box;
border-color: var(--border-color);
}

html, body {
margin: 0;
padding: 0;
background-color: var(--bg-primary);
color: var(--text-main);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
scroll-behavior: smooth;
overscroll-behavior-x: none;
}

/* STREAMING_CHUNK:Styling scrollbars and selection... */
::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
background: #030303;
}

::-webkit-scrollbar-thumb {
background: #18181b;
border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
background: #27272a;
}

::selection {
background: #ffffff;
color: #000000;
}

/* STREAMING_CHUNK:Defining animations and marquee effects... */
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}

.marquee-track-optimized {
display: flex;
width: max-content;
animation: marquee 25s linear infinite;
will-change: transform;
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

.animate-float-custom {
animation: float 6s ease-in-out infinite;
}

/* STREAMING_CHUNK:Styling interactive UI components and drawers... */
.hamburger-open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}

.hamburger-open span:nth-child(2) {
opacity: 0;
}

.hamburger-open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}

#mobileMenu, #cartDrawer {
will-change: transform;
}

#mobileMenu.open, #cartDrawer.open {
transform: translateX(0);
}

#mobileOverlay.open, #cartOverlay.open {
display: block;
opacity: 1;
}

/* STREAMING_CHUNK:Typography helpers and utility polish... */
.font-display {
font-family: 'Bebas Neue', sans-serif;
}

.font-mono-custom {
font-family: 'JetBrains Mono', monospace;
}

/* =========================================
   CRIME MARQUEE
   ========================================= */

.crime-marquee {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    /*
       prostor pro dvě pásky
    */
    padding-top: 38px;
    padding-bottom: 38px;
}


/* =========================================
   HLAVNÍ MARQUEE
   ========================================= */

.crime-marquee .marquee-track-optimized {
    position: relative;

    z-index: 3;

    color: rgba(161, 161, 170, 0.9);
}


/* =========================================
   CRIME TAPE
   ========================================= */

.crime-tape {

    position: absolute;

    left: -3%;

    width: 106%;

    height: 23px;

    z-index: 5;

    overflow: hidden;

    /*
       BÍLÁ + ČERVENÁ
    */
    background:
        repeating-linear-gradient(
            125deg,

            rgba(242, 242, 238, 0.82) 0px,
            rgba(242, 242, 238, 0.82) 42px,

            rgba(181, 28, 38, 0.82) 42px,
            rgba(181, 28, 38, 0.82) 70px,

            rgba(242, 242, 238, 0.82) 70px,
            rgba(242, 242, 238, 0.82) 112px
        );

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 1px rgba(255,255,255,0.45),
        inset 0 -1px rgba(0,0,0,0.18);

    /*
       jemně nepravidelné okraje
    */
    clip-path: polygon(
        0% 9%,
        10% 5%,
        20% 8%,
        30% 4%,
        40% 7%,
        50% 3%,
        60% 7%,
        70% 4%,
        80% 8%,
        90% 4%,
        100% 7%,

        100% 94%,
        90% 98%,
        80% 94%,
        70% 97%,
        60% 93%,
        50% 98%,
        40% 94%,
        30% 97%,
        20% 93%,
        10% 97%,
        0% 93%
    );
}


/* =========================================
   HORNÍ PÁSKA
   ========================================= */

.crime-tape-top {

    top: 5px;

    transform:
        rotate(-0.7deg);
}


/* =========================================
   SPODNÍ PÁSKA
   ========================================= */

.crime-tape-bottom {

    bottom: 5px;

    transform:
        rotate(0.7deg);
}


/* =========================================
   TEXT NA PÁSCE
   ========================================= */

.crime-tape-static {

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: space-around;

    width: 100%;

    height: 100%;

    /*
       ŽÁDNÁ ANIMACE
       ŽÁDNÝ TRANSFORM
    */
}


.crime-tape-static span {

    flex: 0 0 auto;

    padding: 0 32px;

    color: #090909;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.13em;

    line-height: 1;

    white-space: nowrap;

    text-transform: uppercase;

    text-shadow:
        0 1px rgba(255,255,255,0.35);
}


/* =========================================
   TEXTURA PÁSKY
   ========================================= */

.crime-tape::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        repeating-linear-gradient(
            0deg,

            transparent 0px,

            rgba(255,255,255,0.12) 1px,

            transparent 2px,

            transparent 5px
        );

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================
   LEHKÝ ODLESK
   ========================================= */

.crime-tape::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    background:
        linear-gradient(
            105deg,

            transparent 0%,

            rgba(255,255,255,0.18) 40%,

            transparent 65%
        );

    opacity: 0.35;

    pointer-events: none;
}


/* =========================================
   MOBIL
   ========================================= */

@media (max-width: 640px) {

    .crime-marquee {

        padding-top: 32px;
        padding-bottom: 32px;
    }

    .crime-tape {

        height: 20px;
    }

    .crime-tape-static span {

        padding: 0 18px;

        font-size: 7px;

        letter-spacing: 0.10em;
    }

}


/* =========================================
   DŮLEŽITÉ:
   ŽÁDNÁ ANIMACE PÁSKY
   ========================================= */

/*
   intentionally empty

   Páska je statická.
   Pohybuje se pouze:
   .marquee-track-optimized
*/