/* Custom Assets & General Pattern System */

/* Ocultar scrollbar mantendo funcionalidade */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sl-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sl-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sl-accent);
}

/* Base Body Styles 
   Tailwind trata a maioria, mas aqui refina-se o antialiasing e seleção
*/
::selection {
    background: var(--sl-accent);
    color: #fff;
}

/* Pattern Xadrez Global (ex: para seção Human Moments) */
.bg-pattern-xadrez {
    background-color: var(--sl-bg);
    background-image: radial-gradient(var(--sl-primary) 1px, transparent 1px),
        radial-gradient(var(--sl-accent) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    /* A opacidade do pattern em si no prompt dizia '3% como textura'.
       Como no CSS puro isso mistura tudo, aplicamos com mix-blend ou before nas views */
}

/* Shapes Geométricos Estáticos (Para usar via classes .shape-trapezio, etc) */
.shape-trapezio {
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

.shape-triangulo {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Utility Animations css text */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

/* Soft vignette overlay helper - usado nas fotos de ingredientes */
.vignette-overlay {
    background: radial-gradient(circle, transparent 60%, rgba(39, 46, 24, 0.4) 100%);
}

/* Base overrides para interações em tipografia */
.underline-anim {
    position: relative;
    display: inline-block;
}

.underline-anim::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline-anim:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Ajustes Typography Clamp globais caso Tailwind não resolva */
h1,
h2,
h3,
.font-imbue {
    font-weight: 300;
    /* base weight */
}

strong,
b {
    font-weight: 500;
}