/* === Root Colors - Majenda Theme === */
:root {
    --background: #5fc005;      /* Majenda main background */
    --text: #FFFFFF;            /* White text */
    --highlight: #8be6c6;       /* Yellow highlights / accents */
    --secondary: #da9cbc;       /* Slightly lighter for cards */
    --accent-bg: rgba(208, 68, 68, 0.1); /* semi-transparent overlay for modals etc. */
}

/* === Body === */
body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Young Serif', serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    margin: 0;
    color: var(--highlight); /* Important headings yellow */
}

/* === Paragraphs & Text === */
p, li, span, div {
    font-family: 'Young Serif', serif;
    color: var(--text);
}


/* === Accent / Decorative Text === */
.signature { font-family: 'Sacramento', cursive; color: var(--highlight); }
.decorative { font-family: 'Meddon', cursive; color: var(--highlight); }
.bold-display { font-family: 'Black Ops One', system-ui; color: var(--highlight); }
.titles { font-family: 'Monoton', sans-serif; color: var(--highlight); }
.nixie { font-family: 'Nixie One', system-ui; color: var(--highlight); }
.playwrite-gb { font-family: 'Playwrite GB J Guides', cursive; color: var(--text); }
.playwrite-gb-italic { font-family: 'Playwrite GB J Guides', cursive; font-style: italic; color: var(--highlight); }
.playwrite-ie { font-family: 'Playwrite IE', cursive; font-optical-sizing: auto; color: var(--text); }

/* === Custom Animations === */
@keyframes maskReveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
.animate-mask { animation: maskReveal 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards; }

@keyframes shimmerLine {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(400%); opacity: 0; }
}
.shimmer-strand {
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--highlight), transparent);
    animation: shimmerLine 3s infinite ease-in-out;
}

/* === Page System === */
.page-node { display: none; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; transform: translateY(20px); }
.page-node.active { display: block; opacity: 1; transform: translateY(0); }

/* === Editorial Cards === */
.product-card {
    transition: all 0.7s cubic-bezier(0.15, 0, 0.15, 1);
    background: var(--secondary);
    color: var(--text);
    border-radius: 12px;
    overflow: hidden;
}
.product-card:hover { transform: translateY(-15px); }
.product-card .img-wrap img { transition: transform 2s ease; filter: grayscale(20%); }
.product-card:hover .img-wrap img { transform: scale(1.08); filter: grayscale(0%); }

/* === UI Elements === */
.btn-editorial {
    position: relative;
    padding: 1rem 3rem;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    border: 1px solid var(--highlight);
    transition: all 0.4s ease;
    display: inline-block;
    cursor: pointer;
    font-family: 'Black Ops One', system-ui;
    color: var(--highlight);
    background: transparent;
}
.btn-editorial:hover {
    background: var(--highlight);
    color: var(--background);
    letter-spacing: 0.5em;
}

.filter-pill {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    opacity: 0.4;
    transition: opacity 0.3s;
    color: var(--text);
}
.filter-pill.active { opacity: 1; color: var(--highlight); font-weight: 700; }

.modal-blur {
    position: fixed; inset: 0; background: var(--accent-bg);
    backdrop-filter: blur(20px); z-index: 10000;
    display: none; align-items: center; justify-content: center;
    padding: 2rem;
}
.modal-blur.active { display: flex; }

/* === Text Effects === */
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; }

.parallax-bg { background-attachment: fixed; background-position: center; background-size: cover; }
.animate-mask {
    opacity: 0;
    transform: translateY(20px);
    animation: maskReveal 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes maskReveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.logo-text {
    font-family: 'Playwrite GB J Guides', cursive; /* Use your custom font */
    font-size: 2rem; /* Adjust for desktop */
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #33ff00; /* Yellow for logo */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.3); /* subtle shadow for depth */
}

.logo-text:hover {
    color: #FFFFFF; /* Optional hover change to white */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    transform: scale(1.05);
}