/* ============================================================
   Flying Fries — Design Tokens
   Single source of truth for colors, radii, shadows,
   transitions, keyframes, and utility classes.
   ============================================================ */

/* --- Palette --- */
:root {
    --ff-bg:          #ffffff;
    --ff-bg-warm:     #faf9f6;
    --ff-text:        #252525;
    --ff-text-muted:  #6b6b6b;
    --ff-gold:        #C2991E;
    --ff-blue:        #0F76EF;
    --ff-green:       #247657;
    --ff-red:         #C0392B;
    --ff-border:      #e5e2dc;
    --ff-dark:        #252525;

    /* --- Border radius --- */
    --ff-radius-sm:    5px;   /* badges */
    --ff-radius-md:    8px;   /* thumbnails, secondary buttons */
    --ff-radius-lg:   10px;   /* cards, CTA, gallery hero, footer */
    --ff-radius-xl:   12px;   /* aurora button */
    --ff-radius-popup: 14px;  /* modals */

    /* --- Shadows (rest) --- */
    --ff-shadow-card:      0 2px 12px rgba(0, 0, 0, 0.03);
    --ff-shadow-img:       0 4px 16px rgba(0, 0, 0, 0.06);
    --ff-shadow-popup:     0 24px 80px rgba(0, 0, 0, 0.2);

    /* --- Shadows (hover) --- */
    --ff-shadow-img-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --ff-shadow-thumb-hover: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* --- Transitions --- */
    --ff-transition-fast:   0.2s ease;   /* hover buttons/links */
    --ff-transition-mid:    0.35s ease;  /* shadows, header scroll */
    --ff-transition-slow:   0.5s ease;   /* image scale, expansions */
    --ff-transition-reveal: 0.55s ease;  /* fade-in scroll reveal */

    /* --- Dimensions --- */
    --ff-header-height: 66px;

    /* --- Z-index layers --- */
    --ff-z-header:    1000;
    --ff-z-menu:      9000;
    --ff-z-backdrop:  99996;
    --ff-z-gallery:   99997;
    --ff-z-popup-bg:  99998;
    --ff-z-popup:     99999;
    --ff-z-lightbox-bg: 100000;
    --ff-z-lightbox:    100001;
}


/* ============================================================
   Keyframes
   ============================================================ */

/* Aurora button — flowing gradient */
@keyframes auroraFlow {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

/* Aurora button — organic blob movement */
@keyframes auroraBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, 15px) scale(1.2); }
    66%      { transform: translate(-20px, 5px) scale(0.9); }
}

@keyframes auroraBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-30px, -10px) scale(1.15); }
    66%      { transform: translate(25px, -5px) scale(0.85); }
}

@keyframes auroraBlob3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50%      { transform: translate(20px, 10px) scale(1.3); opacity: 1; }
}

/* Aurora button — shimmer band on hover */
@keyframes auroraShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Popup entrance */
@keyframes ffSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Home hero — star twinkle */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Home hero — soft glow pulse */
@keyframes glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.15); }
}

/* Page load fade-in (existing, preserved) */
@keyframes fadeInAnimation {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================================================
   Product title fonts
   Usage: <h1 class="product-title product-title--{titleFont}">
   The titleFont value comes from the DB column products.titleFont
   ============================================================ */

.product-title {
    font-family: 'Futura', 'Trebuchet MS', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: normal;
    text-transform: uppercase;
    line-height: 1.1;
}

.product-title .subtitle {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ff-text-muted);
    margin-top: 0.3em;
}

/* Quasar — tall, narrow, techy */
.product-title--rajdhani {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 3px;
}
.product-title--rajdhani .subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

/* The Scrapyard Monster — blocky, industrial */
.product-title--russo-one {
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    letter-spacing: 1px;
}
.product-title--russo-one .subtitle {
    font-family: 'Russo One', sans-serif;
    font-size: 0.95rem;
}

/* XF-11 — elegant, editorial */
.product-title--playfair {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: 0.5px;
    text-transform: none;
}
.product-title--playfair .subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

/* Gabriel BK160-TR — clean, geometric */
.product-title--dm-sans {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: 0;
}
.product-title--dm-sans .subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
}

/* MI-24P Hind — military stencil, soviet vibe */
.product-title--saira-stencil {
    font-family: 'Saira Stencil One', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    letter-spacing: 2px;
}
.product-title--saira-stencil .subtitle {
    font-family: 'Saira Stencil One', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 1px;
}


/* ============================================================
   Utility classes
   ============================================================ */

/* Scroll reveal — add .fade-in to sections, JS adds .visible */
.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--ff-transition-reveal), transform var(--ff-transition-reveal);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover lift — for cards, images, interactive elements */
.hoverable {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hoverable:hover {
    transform: translateY(-2px);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hoverable:hover {
        transform: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}