/* ==========================================================================
   CSS Variables & Typography
   ========================================================================== */
:root {
   --font-heading: 'Trade Gothic', 'Arial', sans-serif;
   --font-body: 'Montserrat', sans-serif;

   /* Amandau Brand Colors */
   --color-primary: #FF6A00;        /* Naranja Principal */
   --color-primary-light: #FF9200;  /* Pyta'iju - Naranja Claro */
   --color-purple: #984A7A;         /* Tumby - Morado */
   --color-blue: #4370BB;           /* Tovy - Azul */
   --color-yellow: #EFB706;         /* Sa'iju - Amarillo */
   --color-red: #E64835;            /* Pytá - Rojo */
   --color-aqua: #05B8AD;           /* Sa'yki - Aqua */
   --color-pistacho: #853c28;       /* Tono Pistacho/Tierra */

   /* Base Colors */
   --color-artisan: #4A2C19;        /* Marrón - Texto */
   --color-cream: #FFFBF5;          /* Crema - Fondo */
   --color-white: #FFFFFF;
}

html {
   scroll-behavior: smooth;
}

body {
   overflow-x: hidden;
   font-family: var(--font-body);
   color: var(--color-artisan);
}

/* Typography System */
h1, h2, h3, h4, h5, h6,
.font-heading,
.tree-btn {
   font-family: var(--font-heading);
   font-weight: 700;
}

p, span, a, button, input, label {
   font-family: var(--font-body);
}

/* ==========================================================================
   GLASSMORPHISM SYSTEM — Cross-browser compatible backdrop effects
   Works reliably in all browsers (Chrome, Safari, Firefox, Edge)
   ========================================================================== */

/* Premium Glass Base — Use this for all glassmorphic elements */
.premium-glass {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(2px) saturate(180%);
   -webkit-backdrop-filter: blur(2px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

/* Glass variants: Light (Medium blur) */
.glass-light {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(8px) saturate(160%);
   -webkit-backdrop-filter: blur(5px) saturate(160%);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
}

/* Glass variants: Medium (Strong blur) */
.glass-medium {
   background: rgba(255, 255, 255, 0.18);
   backdrop-filter: blur(8px) saturate(170%);
   -webkit-backdrop-filter: blur(8px) saturate(170%);
   border: 1px solid rgba(255, 255, 255, 0.22);
   box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.07);
}

/* Glass variants: Strong (Very strong blur) */
.glass-strong {
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(12px) saturate(190%);
   -webkit-backdrop-filter: blur(12px) saturate(190%);
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.12);
}

/* Dark Glass — For darker backgrounds */
.glass-dark {
   background: rgba(74, 44, 25, 0.15);
   backdrop-filter: blur(10px) saturate(150%);
   -webkit-backdrop-filter: blur(10px) saturate(150%);
   border: 1px solid rgba(74, 44, 25, 0.2);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Brand Glass — Orange-tinted frosted glass */
.glass-brand {
   background: rgba(255, 106, 0, 0.08);
   backdrop-filter: blur(8px) saturate(170%);
   -webkit-backdrop-filter: blur(8px) saturate(170%);
   border: 1px solid rgba(255, 106, 0, 0.2);
   box-shadow: 0 6px 20px 0 rgba(255, 106, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   GLASSMORPHISM USAGE GUIDE
   ═══════════════════════════════════════════════════════════════════

   These classes include all necessary prefixes (-webkit-) for full
   cross-browser compatibility (Chrome, Safari, Firefox, Edge, etc).

   NEVER use Tailwind's backdrop-blur utilities alone - always use
   these CSS classes instead for consistent appearance.

   QUICK REFERENCE:
   ──────────────────────────────────────────────────────────────
   .premium-glass    → Main glass effect (10px blur, strong)
                       Use for: Main content boxes, modals, cards

   .glass-light      → Subtle effect (5px blur, light)
                       Use for: Breadcrumbs, small UI elements

   .glass-medium     → Balanced effect (8px blur, medium)
                       Use for: Headers, navigation, secondary boxes

   .glass-strong     → Maximum effect (12px blur, very strong)
                       Use for: Overlays, dramatic UI elements

   .glass-dark       → Dark frosted glass (brown-tinted)
                       Use for: Dark backgrounds, mobile menu backdrops

   .glass-brand      → Orange-tinted glass
                       Use for: Brand-related elements, accent boxes

   EXAMPLE USAGE:
   ──────────────────────────────────────────────────────────────
   <!-- Before (❌ Inconsistent in Chrome/Safari) -->
   <div class="bg-white/40 backdrop-blur-3xl border border-white/60">

   <!-- After (✅ Perfect in all browsers) -->
   <div class="premium-glass">

   ═══════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   Unified Master Scroll Sequence (GSAP Required Logic)
   ========================================================================== */
.master-scroll-container {
   position: relative;
   width: 100%;
}

.master-canvas-wrapper {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   z-index: 1; /* Below UI layers */
   background-color: #FFF6EC; /* Cream base */
}

.sequence-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   opacity: 0; /* GSAP tracking controls this */
}

.sequence-canvas:first-of-type {
   opacity: 1; /* First canvas always visible */
}

/* UI Scroll Sections Overlaid */
.ui-scroll-blocks {
   position: relative;
   z-index: 10;
   margin-top: -100vh; /* Critical: drag it up to overlap the sticky canvas background */
}

/* Initial Offsets for GSAP Animations */
.left-slide { transform: translateX(-150px) scale(0.95); opacity: 0; }
.right-slide { transform: translateX(150px) scale(0.95); opacity: 0; }
.bottom-slide { transform: translateY(150px) scale(0.95); opacity: 0; }

/* UI Layer fade in controlled by scroll-sequence.js */
.ui-layer {
   /* Default: visible */
   opacity: 1;
   /* Can be overridden by JS when uiLayerStartFrame is set */
}

/* Custom Animations */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 15s linear infinite;
}

/* Catalog Styles */
.product-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}
.filter-pill {
    transition: all 0.2s ease;
}
.filter-pill.active {
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.05);
}
.search-input:focus {
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
}
.price-tag {
    font-family: var(--font-heading);
    font-weight: 800;
}

/* Banner Marquee */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* ─── Product Card ─────────────────────────────────────────── */
.product-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image wrapper: fixed square area so all cards align */
.product-card .card-img-wrap {
    height: 220px;
    padding: 24px;
}
.product-card .card-img {
    max-height: 170px;
    max-width: 100%;
}

/* Title: capped at 3 lines, never overflows */
.product-card .card-title {
    font-size: 1.15rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/* Modal Refinements */
#product-modal h2 {
    font-size: 3rem !important;
    line-height: 1;
}
#product-modal p {
    font-size: 1rem !important;
}

#footer {
    border-top: none !important;
    outline: none !important;
}

#footer::before {
    content: none !important;
}