@charset "UTF-8";

/* =========================================
   BASE & TYPOGRAPHY ("POP B&W")
   ========================================= */
body {
    background-color: #FFFFFF;
    color: #000000;
    /* Primary: Jost (Geometric Sans) - for that "Supreme" / Fashion Brand look */
    font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

/* Serif accents (Italic) */
.font-serif-italic {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
}

/* Strong Headlines */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* =========================================
   COMPONENTS
   ========================================= */

/* Sharp Borders (Pop style) */
.border-sharp {
    border: 2px solid #000;
}

.border-b-sharp {
    border-bottom: 2px solid #000;
}

.border-t-sharp {
    border-top: 2px solid #000;
}

/* Product Card (Like reference) */
.product-card {
    position: relative;
    border: 2px solid #000;
    padding: 24px;
    background: #FFF;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0px #000;
}

/* Highlighter Effect (Yellow/Red accent if needed, but keeping B&W mostly) */
.highlight-marker {
    background: linear-gradient(transparent 60%, #FDEF0A 60%);
    display: inline;
}

/* =========================================
   ANIMATIONS
   ========================================= */

/* Slide Up (Sharp) */
.reveal-slide {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-slide.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mask Reveal (Swipe) */
.reveal-wipe {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: clip-path;
}

.reveal-wipe.active {
    clip-path: inset(0 0 0 0);
}

/* Stagger Text */
.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.reveal-text.active .word {
    opacity: 1;
    transform: translateY(0);
}