/* ============================================================================
   EVSA JAMHERO - ADAPTIVE MARQUEE SYSTEM
   ============================================================================
   
   Desktop/tablet: 48/52 split with two vertical marquees (adaptive fit: 100%→70%→collapse).
   Mobile: one horizontal marquee.
  Assets: src/assets/images/MockUps/*.svg only.
   
   A responsive hero section featuring:
   - Desktop/Tablet: 48% text (left) / 52% marquees (right) with two vertical counter-flowing marquees
   - Adaptive scaling: starts at 100%, shrinks to 70% min; if insufficient, collapses to single marquee
   - Mobile: Single horizontal marquee with all products, stacked layout
   - EVSA media tokens with glassmorphic effects (Navy+Green gradient, no copper in frames)
   - Seamless infinite CSS animations with inline JS for baseline sizing only
   - Full accessibility (ARIA, reduced-motion, keyboard nav)
   
   Author: EVSA Development Team
   Version: 2.0.0 (JamHero)
   Last Updated: October 2025
   ============================================================================ */


/* ============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================================
   All tunables centralized here for easy customization.
   Mobile overrides defined in @media queries below.
   ============================================================================ */

:root {
  /* ===== Desktop/Tablet Marquee Settings (ENLARGED +18% for Greater Prominence) ===== */
  --card-scale-target: 1.18;           /* Target scale: +18% larger than v1.3 base */
  --card-scale: 1.0;                   /* Current adaptive scale (modified by breakpoints) */
  --card-scale-min: 0.70;              /* Minimum scale before collapse (30% max reduction) */
  
  --row-h: clamp(235px, 48vh, 450px);  /* Row height +18% (was 200-380px) */
  --gap: 36px;                         /* Gap increased proportionally */
  --duration: 20s;                     /* Right marquee scroll speed */
  --n: 6;                              /* Number of unique items per marquee */
  
  /* ===== Hero Layout ===== */
  --hero-h: clamp(750px, 96vh, 1200px); /* Height increased for larger tokens */
  --marquee-gutter: clamp(10px, 2.2vw, 28px); /* Proportionally scaled gutter */
  
  /* ===== Dynamic Token Sizing ===== */
  --token-baseline: clamp(260px, 42vh, 400px); /* Base token +18% (was 220-340px) */
  --scale-factor: 1.18;                /* Updated scale factor for JS calculation */
}

/* Hide horizontal marquee by default (shown only on mobile ≤768px) */
.hmarquee {
  display: none;
}

/* ============================================================================
   GLOBAL RESETS & BASE STYLES
   ============================================================================ */

/* Use border-box for intuitive box model (padding/border included in width) */
* { 
  box-sizing: border-box; 
}

/* Prevent horizontal scrolling globally (especially important for mobile) */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;  /* Critical for marquee containment */
}


/* ============================================================================
   HERO SECTION - DESKTOP/TABLET LAYOUT
   ============================================================================
   48/52 grid split: Text on left (48%), marquees on right (52%)
   Image-forward design with adaptive "never overlap" protection
   Subtle gradient background for depth
   ============================================================================ */

.hero {
  position: relative;  /* Establish stacking context */
  width: 100%;
  min-height: 100vh;  /* Ensure hero is tall enough to be visible */
  display: flex;  /* Changed to flex to center the surface */
  align-items: center;  /* Vertically center surface */
  justify-content: center;  /* Horizontally center surface */
  padding: clamp(24px, 4vh, 64px) 0;  /* Vertical padding for breathing room */

  /* Page background color - matches site neutral color */
  background: var(--color-white);  /* Neutral light background (R:222, G:221, B:223) */

  color: #fff;  /* White text on dark background */
}

/* Hero Surface: Centered rounded container with gradient background */
.hero-surface {
  position: relative;
  width: min(98vw, 1600px);  /* Minimal outer gutters - nearly full page width (was 92vw, 1280px) */
  margin-inline: auto;  /* Center horizontally */

  /* Rounded corners that scale with viewport */
  border-radius: clamp(16px, 2.5vw, 32px);

  /* Minimal internal padding - drastically reduced for tight spacing */
  padding: clamp(6px, 1.25vw, 18px);

  /* Clip media/backgrounds to rounded shape */
  overflow: hidden;

  /* Grid layout for content (preserved from original .hero) */
  display: grid;
  grid-template-columns: 48fr 52fr;  /* 48% text, 52% marquees for image-forward design */
  height: var(--hero-h);  /* Responsive height via clamp() */

  /* Layered radial gradients for atmospheric depth (moved from .hero) */
  background:
    radial-gradient(circle at 20% 30%, rgba(26,25,72,0.4), transparent 50%),  /* Navy accent top-left */
    radial-gradient(circle at 80% 70%, rgba(11,63,34,0.3), transparent 50%),  /* Green accent bottom-right */
    #0f1223;  /* Base dark background */

  /* Soft shadow for depth */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ===== Left Column: Text Content ===== */
.hero__left {
  display: flex;
  align-items: center;  /* Vertically center content */
  padding: 0.5rem 0.75rem;  /* Minimal padding - drastically reduced (was 2rem 3rem 2rem 4rem) */
}

.hero__content {
  max-width: 600px;  /* Optimal reading width */
}

/* Main headline */
.hero__title {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);  /* Responsive: 40-56px */
  font-weight: 700;
  line-height: 1.15;  /* Tight for impact */
  margin: 0 0 1.5rem 0;
  color: #fff;
}

/* Solid copper highlight on key phrase */
.hero__title .highlight {
  background: linear-gradient(135deg, var(--evsa-copper), #d4873f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== ROTATING WORD CYCLER ===== */
.hero-rotator {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.25em; /* Breathing room between line 2 text and the keyword box */
}

/* English hero line-break: hidden in ES, shown in EN via html[lang="en"] */
.hero-title-en-break { display: none; }
html[lang="en"] .hero-title-en-break { display: inline; }

.hero-rotator__word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, var(--evsa-copper), #d4873f);
  padding: 0.05em 0.3em;
  border-radius: 6px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  line-height: 1.25;
  text-transform: none; /* Prevent any inherited capitalize/uppercase */
}

.hero-rotator__word.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.hero-rotator__word.exiting {
  opacity: 0;
  transform: translateY(-40%);
}

/* Subtitle/description text */
.hero__subtitle {
  font-family: var(--font-heading);  /* Match title typeface for cohesion */
  font-weight: 400;  /* Lighter weight for hierarchy contrast */
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);  /* Responsive: 17-20px */
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 2rem 0;
  letter-spacing: 0.01em;
}

/* CTA button container */
.hero__cta {
  display: flex;
  gap: 1rem;  /* Space between buttons */
  flex-wrap: wrap;  /* Stack on very narrow screens */
}


/* ============================================================================
   BUTTON STYLES
   ============================================================================
   Two variants: Primary (copper gradient) and Secondary (glass effect)
   ============================================================================ */

/* Base button styles */
.btn {
  padding: 0.875rem 2rem;  /* 14px 32px */
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;  /* Smooth hover effects */
  display: inline-block;
  border: none;
  cursor: pointer;
}

/* Primary button: Copper gradient (main CTA) - Hero specific */
.hero .btn-primary {
  background: linear-gradient(135deg, var(--evsa-copper), #d4873f);
  color: #fff;
  box-shadow: 0 4px 20px rgba(198,113,41,0.3);  /* Warm glow */
}

.hero .btn-primary:hover {
  transform: translateY(-2px);  /* Lift on hover */
  box-shadow: 0 6px 30px rgba(198,113,41,0.5);  /* Intensify glow */
}

/* Secondary button: Glassmorphic (secondary CTA) - Hero specific */
.hero .btn-secondary {
  background: rgba(255,255,255,0.1);  /* Semi-transparent white */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);  /* Glass blur effect */
}

.hero .btn-secondary:hover {
  background: rgba(255,255,255,0.15);  /* Slightly more opaque */
  border-color: rgba(255,255,255,0.35);  /* Brighter border */
  transform: translateY(-2px);  /* Lift on hover */
}

/* ============================================================================
   RIGHT COLUMN: VERTICAL MARQUEES (Desktop/Tablet)
   ============================================================================
   Two side-by-side marquees with counter-flow animation
   ============================================================================ */

.hero__right {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* Contain marquees */
  /* Right gutter + safe area for devices with notches */
  padding-inline-end: calc(var(--marquee-gutter) + env(safe-area-inset-right));
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Container for two marquees side-by-side */
.marquee-container {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two equal columns */
  gap: clamp(12px, 2vw, 20px);    /* Responsive gap */
  height: 100%;
  width: 100%;
}


/* ============================================================================
   ADAPTIVE RESPONSIVE SCALING - "NEVER OVERLAP" PROTECTION
   ============================================================================
   Intelligent scaling based on Right Column Width (RCW = 55% of viewport)
   
   System ensures marquees NEVER:
   - Overlap each other
   - Touch column edges (preserves gutters)
   - Clip shadows/halos
   
   Strategy:
   1. Start at 100% scale (full size)
   2. Scale down smoothly 100% → 70% as viewport narrows
   3. If still insufficient at 70%, collapse to ONE marquee
   4. Single marquee can scale back up to fit available space
   
   Breakpoints calculated from:
   Required RCW = (2 × token_width + inter_gap + side_padding) / 0.55
   ============================================================================ */

/* ===== RCW ≥ ~900px (viewport >2100px): Two Marquees @ 100% ===== */
/* Full enlarged size (260-400px tokens), both marquees visible */
/* No media query needed - this is the default state defined in :root */

/* ===== Viewport 1900-2100px: Two Marquees @ 95% ===== */
@media (max-width: 2100px) {
  :root {
    --card-scale: 0.95;  /* 95% scale (gentle reduction) */
    --row-h: clamp(223px, 46vh, 428px);  /* 95% of base */
    --token-baseline: clamp(247px, 40vh, 380px);  /* 95% scaled */
    --gap: 34px;  /* Proportionally reduced */
    --token-pad: clamp(9px, 2.1vw, 27px);  /* Scaled padding */
  }
}

/* ===== Viewport 1700-1899px: Two Marquees @ 90% ===== */
@media (max-width: 1899px) {
  :root {
    --card-scale: 0.9;  /* 90% scale */
    --row-h: clamp(212px, 43vh, 405px);  /* 90% of base */
    --token-baseline: clamp(234px, 38vh, 360px);  /* 90% scaled */
    --gap: 32px;
    --token-pad: clamp(9px, 2vw, 25px);
  }
}

/* ===== Viewport 1500-1699px: Two Marquees @ 85% ===== */
@media (max-width: 1699px) {
  :root {
    --card-scale: 0.85;  /* 85% scale */
    --row-h: clamp(200px, 41vh, 383px);  /* 85% of base */
    --token-baseline: clamp(221px, 36vh, 340px);  /* 85% scaled */
    --gap: 31px;
    --token-pad: clamp(9px, 1.9vw, 24px);
  }
}

/* ===== Viewport 1350-1499px: Two Marquees @ 80% ===== */
@media (max-width: 1499px) {
  :root {
    --card-scale: 0.8;  /* 80% scale */
    --row-h: clamp(188px, 38vh, 360px);  /* 80% of base */
    --token-baseline: clamp(208px, 34vh, 320px);  /* 80% scaled */
    --gap: 29px;
    --token-pad: clamp(8px, 1.8vw, 22px);
  }
}

/* ===== Viewport 1200-1349px: Two Marquees @ 75% ===== */
@media (max-width: 1349px) {
  :root {
    --card-scale: 0.75;  /* 75% scale */
    --row-h: clamp(176px, 36vh, 338px);  /* 75% of base */
    --token-baseline: clamp(195px, 32vh, 300px);  /* 75% scaled */
    --gap: 27px;
    --token-pad: clamp(8px, 1.7vw, 21px);
  }
}

/* ===== Viewport 1050-1199px: Two Marquees @ 70% (MIN) ===== */
@media (max-width: 1199px) {
  :root {
    --card-scale: 0.7;  /* 70% scale - MINIMUM for two marquees */
    --row-h: clamp(165px, 34vh, 315px);  /* 70% of base */
    --token-baseline: clamp(182px, 29vh, 280px);  /* 70% scaled */
    --gap: 25px;
    --token-pad: clamp(7px, 1.5vw, 20px);
  }
}

/* ===== Viewport < 1050px: COLLAPSE to ONE Marquee @ 85% ===== */
@media (max-width: 1049px) {
  :root {
    /* Single marquee can use larger scale since it has full RCW */
    --card-scale: 0.85;  /* 85% scale for single marquee (more prominent) */
    --row-h: clamp(200px, 41vh, 383px);
    --token-baseline: clamp(221px, 36vh, 340px);
    --gap: 31px;
    --token-pad: clamp(9px, 1.9vw, 24px);
  }
  
  /* Maintain grid for hero-surface */
  .hero-surface {
    grid-template-columns: 45fr 55fr;  /* Maintain 45/55 split */
  }

  .hero__left {
    padding: 0.75rem 1rem;
    overflow: visible;  /* Prevent subtitle clipping */
  }

  .hero__content {
    max-width: 100%;  /* Let content use full column width on tablet */
  }

  .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
  }

  /* Collapse to single marquee */
  .marquee-container {
    grid-template-columns: 1fr;  /* Single column */
  }

  .marquee--left {
    display: none;  /* Hide left marquee to prevent overlap */
  }

  .marquee--right {
    padding: 2rem 1rem;  /* Centered padding for single marquee */
  }
}

/* ============================================================================
   MOBILE BREAKPOINT (≤768px) - PHONE REALM
   ============================================================================
   Major layout shift:
   - Stack hero vertically (text on top, marquee below)
   - Hide vertical marquees completely
   - Show single horizontal marquee with all 12 products
   - Compact scale with generous card spacing
   - Edge fades inside page padding
   - Add adaptive padding with safe-area support
   - Prevent horizontal scroll (track animates via transform only)
   
   MOBILE POLISH (v1.4.1 - October 2025):
   ======================================
   A) Bottle Card Alignment Fix:
      - Vertical ratio cards (3x4, e.g. bottles) use object-position: center bottom
      - Ensures bottles sit naturally on ground shadow without floating
      - All cards maintain square-ish frame with proper bleed for glow/shadow
   
   B) No Hyphenation in Headlines:
      - Headings set to hyphens: none + word-break: normal
      - Prevents awkward splits like "em-/paque" in Spanish text
      - Words wrap cleanly between spaces only (natural line breaks)
      - Title has lang="es" attribute for proper language handling
   
   MOBILE ASSET NORMALIZATION (v1.4.2 - October 2025):
   ===================================================
   C) Oversized PNG Prevention:
      - Global 6% safe inset (94% width/height) prevents products touching frame
      - Per-asset scale overrides for oversized PNGs (e.g., bottles @ 86%)
      - Selector pattern: li:has(img[src*="filename"]) targets specific products
      - Maintains object-fit: contain + center-bottom alignment
      - Ensures cap/labels never clip, base stays grounded
   
   Asset Normalization Workflow (for designers):
   1. Trim PNG transparent margins symmetrically
   2. Pad to square 1:1 canvas with 2-4% safe margin
   3. Center-bottom artwork on canvas (base touches bottom)
   4. Export: sRGB, lossless alpha, 2× density (retina)
   5. Add per-asset override if PNG still oversized after normalization
   
   Rationale: Mobile-specific refinements ensure visual consistency across
   all cards, prevent frame overflow, and maintain professional typography.
   ============================================================================ */

@media (max-width: 768px) {
  
  /* ===== Mobile-Specific Variables (ENLARGED +10% from v1.3) ===== */
  :root {
    /* Horizontal marquee dimensions - larger for greater impact */
    --w-mobile: clamp(175px, 48vw, 240px);  /* Token width +10% (was 160-220px) */
    --h-mobile: clamp(175px, 48vw, 240px);  /* Token height (square, maintains aspect) */
    --gap-mobile: 30px;            /* Increased spacing for breathing room (+7%) */
    --duration-mobile: 42s;        /* Slower scroll for larger cards */
    --n-mobile: 12;                /* 12 unique items (both marquees combined) */
    
    /* Layout spacing */
    --bleed-mobile: 22px;          /* Increased vertical bleed for larger shadows/glows (+10%) */
    --page-pad-x: clamp(4px, 1.5vw, 7px);  /* Minimal horizontal padding - drastically reduced (was 16-28px) */
    --page-pad-y: clamp(3px, 1vh, 6px);  /* Minimal vertical padding - drastically reduced (was 12-24px) */
    
    /* PROD FIX: Unified spacing for CTA-to-marquee gap (prototype matching) */
    --cta-block-mb: clamp(12px, 2.4vh, 20px);    /* Bottom margin of text/CTA block */
    --marquee-top-gap: clamp(12px, 2.4vh, 20px); /* Top margin of marquee wrapper */
    /* Target visual gap: 16-28px on 360-430px wide phones */
  }
  
  /* ===== Mobile Hero Layout: Stacked ===== */
.hero {
    height: auto;  /* Let content determine height */
    min-height: auto;  /* PROD FIX: Remove 100vh constraint to allow natural positioning */
    padding: clamp(16px, 3vh, 32px) 0;  /* Reduced vertical padding on mobile */
    width: 100%;
    max-width: 100vw;  /* Never exceed viewport */
    overflow-x: hidden;  /* Critical: prevent horizontal scroll */
  }

  /* Mobile surface adjustments */
  .hero-surface {
    grid-template-columns: 1fr;  /* Single column */
    grid-template-rows: auto auto;  /* Text row + marquee row */
    width: min(98vw, 100%);  /* Minimal outer gutters on mobile - nearly full width (was 96vw) */
    height: auto;  /* Let content determine height on mobile */
    padding: clamp(5px, 1vw, 12px);  /* Minimal padding - drastically reduced (was 20-48px) */
    border-radius: clamp(12px, 2vw, 24px);  /* Smaller radius on mobile */
  }
  
  /* ===== Mobile Text Content with Safe Areas ===== */
  .hero__left {
    /* Adaptive padding respects device notches/rounded corners */
    padding-block-start: calc(var(--page-pad-y) * 2);  /* Extra top space */
    padding-block-end: 0;  /* PROD FIX: Remove bottom padding (handled by .hero__content) */
    padding-inline-start: calc(var(--page-pad-x) + env(safe-area-inset-left));  /* iOS/Android safe area */
    padding-inline-end: calc(var(--page-pad-x) + env(safe-area-inset-right));
    min-height: auto;
    width: 100%;
    overflow-wrap: break-word;  /* Graceful text wrapping */
  }
  
  .hero__content {
    max-width: 100%;
    width: 100%;
    margin-bottom: var(--cta-block-mb);  /* PROD FIX: Unified spacing control */
  }
  
  /* ===== Mobile Typography: Character-Based Widths ===== */
  /* Constraining by characters ensures optimal readability */
  .hero__title {
    max-width: 32ch;  /* 32 character max per line (headlines) */
    font-size: clamp(2rem, 8vw, 2.75rem);  /* 32-44px responsive */
    overflow-wrap: break-word;  /* Allow wrapping */
    word-wrap: break-word;      /* Legacy support */
    hyphens: none;              /* MOBILE FIX: Prevent hyphenation in ES (no "em-/paque") */
    word-break: normal;         /* Keep words intact, break only at spaces */
  }

  .hero-rotator__word {
    padding: 0.02em 0.2em;
    border-radius: 4px;
  }

  .hero__subtitle {
    max-width: 100%;
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
  }
  
  .hero__cta {
    max-width: 100%;
    flex-wrap: wrap;
  }
  
  /* Ensure buttons fit on mobile */
  .hero__cta .btn {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    max-width: 100%;
  }
  
  .hero__right {
    height: auto;
    width: 100%;
    max-width: 100vw;
    /* PROD FIX: Use unified spacing variables for prototype matching */
    margin-block-start: var(--marquee-top-gap);  /* Top gap from CTA block */
    padding-block-start: 0;  /* Remove padding (handled by margin) */
    padding-block-end: calc(var(--page-pad-y) * 1.5);
    padding-inline: 0;
    overflow-x: hidden;  /* Critical: prevent horizontal scroll from marquee */
    overflow-y: visible;  /* Allow vertical bleed for shadows */
    position: relative;
  }
  
  /* Hide desktop vertical marquees on mobile */
  .marquee-container {
    display: none;
  }
  
  /* ===== HORIZONTAL MARQUEE (Mobile Only) =====
     Complex technique combining:
     1. Full-width breakout (extends to screen edges)
     2. Vertical bleed (space for shadows) - SELF-CONTAINED, no external gap
     3. Internal padding (keeps cards inset)
     4. Horizontal edge fades (mask-image)
     ============================================= */
  .hmarquee {
    display: block;
    
    /* FULL-WIDTH BREAKOUT TECHNIQUE:
       Extends element edge-to-edge even when parent has padding.
       Works by positioning at 50% then negative margin pulls it back. */
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;  /* PROD FIX: No extra top margin (gap controlled by parent) */
    
    /* HEIGHT WITH VERTICAL BLEED:
       Tokens + bleed (top + bottom) for shadows/glows
       This prevents shadow/glow clipping at top/bottom edges */
    height: calc(var(--h-mobile) + 2 * var(--bleed-mobile));
    padding-block: var(--bleed-mobile);  /* Breathing room top/bottom for glow */
    
    /* CONTAINMENT:
       overflow: hidden clips the wide track horizontally
       but vertical bleed still shows thanks to parent overflow-y: visible */
    overflow: hidden;
    
    /* INTERNAL PADDING:
       Re-applies padding inside the full-width container
       so cards don't touch screen edges */
    padding-inline-start: calc(var(--page-pad-x) + env(safe-area-inset-left));
    padding-inline-end: calc(var(--page-pad-x) + env(safe-area-inset-right));
    
    /* EDGE FADES:
       Horizontal gradient mask creates "infinite tape" effect
       Fades from transparent → solid → transparent */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  
  /* ===== Horizontal Track (Animated Element) ===== */
  .hmarquee__track {
  display: grid;
    grid-auto-flow: column;  /* Items in a row */
    grid-auto-columns: var(--w-mobile);  /* Each column 110px wide */
    column-gap: var(--gap-mobile);  /* 20px between items */
  align-items: center;
    
    /* ANIMATION:
       Smooth infinite scroll using CSS transform (hardware accelerated)
       Duration: 35s for 12 items (slower than desktop for easier viewing) */
    animation: scroll-x var(--duration-mobile) linear infinite;
    will-change: transform;  /* Hint to browser for optimization */
    
    /* Reset list styles */
    margin: 0;
    padding: 0;
    list-style: none;
    
    /* WIDTH:
       max-content = as wide as needed for all items
       Doesn't affect parent layout thanks to overflow: hidden */
  position: relative;
    width: max-content;
  }
  
  .hmarquee li {
    width: var(--w-mobile);
    height: var(--h-mobile);
    min-width: var(--w-mobile);
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
  }
  
  /* Pause on hover/tap */
  .hmarquee:hover .hmarquee__track,
  .hmarquee:active .hmarquee__track {
    animation-play-state: paused;
  }
  
  /* Mobile token sizing with containment - enlarged +10% from v1.3 */
  .hmarquee .evsa-token {
    width: var(--w-mobile);
    height: var(--h-mobile);
    min-width: var(--w-mobile);
    min-height: var(--h-mobile);
    max-width: var(--w-mobile);
    max-height: var(--h-mobile);
    box-shadow: 0 13px 31px rgba(0,0,0,.33);  /* +10% scaled shadow (was 12px/28px) */
    flex-shrink: 0;
  }
  
  .hmarquee .evsa-token > img {
    /* MOBILE SAFE INSET: 6% margin prevents tall products from touching frame edges */
    max-width: calc(94% - 2 * var(--token-pad));   /* 6% safe inset (3% each side) */
    max-height: calc(94% - 2 * var(--token-pad));  /* 6% safe inset (3% top/bottom) */
    width: 94%;   /* Constrain to 94% of available space */
    height: 94%;  /* Maintains square-ish proportions */
    filter:
      brightness(1.15)
      contrast(1.08)
      saturate(1.12)
      drop-shadow(0 9px 15px rgba(0,0,0,.23));  /* +10% scaled shadow (was 8px/14px) */
    -webkit-transform: translateZ(0);  /* Force GPU compositing for crisp rendering on iOS */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* iOS WebKit: disable backdrop-filter on mobile to prevent image quality degradation */
  .hmarquee .evsa-token::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  /* MOBILE FIX: Vertical ratio cards (bottles) aligned center-bottom for natural grounding */
  .hmarquee .ratio-3x4 > img {
    object-position: center bottom;  /* Bottle sits on ground shadow naturally */
  }
  
  /* ===== MOBILE ASSET NORMALIZATION: Per-Asset Scale Overrides ===== */
  /* Individual product scale adjustments for optimal mobile fit.
     Targets oversized SVGs (e.g., bottle with large canvas) that would
     exceed the token frame even with the 6% safe inset.
     Format: [data-asset="filename"] selector for maintainability */
  
  /* Bottle products: Scale down 8% to prevent cap clipping */
  .hmarquee li:has(img[src*="SleeveBottle"]) .evsa-token > img,
  .hmarquee li:has(img[src*="Bottle"]) .evsa-token > img {
    width: 86%;   /* 94% base × 0.92 scale = 86.48% ≈ 86% */
    height: 86%;
    max-width: calc(86% - 2 * var(--token-pad));
    max-height: calc(86% - 2 * var(--token-pad));
  }
  
  /* Ensure glow layer doesn't expand bounds */
  .hmarquee .evsa-token .isotipo {
    pointer-events: none;
    contain: layout style;
  }
}

/* ============================================================================
   HORIZONTAL SCROLL ANIMATION (Mobile)
   ============================================================================
   
   SEAMLESS LOOP MATH:
   Distance = n × (width + gap) - final_gap
   
   With 12 items, 110px width, 20px gap:
   Distance = 12 × (110 + 20) - 20
            = 12 × 130 - 20
            = 1560 - 20
            = 1540px
   
   Animation scrolls EXACTLY this distance, so when it resets:
   - Set B is now where Set A started
   - User sees no jump, perfect seamless loop
   
   Direction: RIGHT to LEFT (standard scrolling direction)
   ============================================================================ */
@keyframes scroll-x {
  0%   { transform: translateX(0); }  /* Start position */
  100% { transform: translateX(calc(-1 * (var(--n-mobile) * (var(--w-mobile) + var(--gap-mobile)) - var(--gap-mobile)))); }
}

/* Additional mobile-specific overflow prevention */
@media (max-width: 768px) {
  html {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
    position: relative;
  }
}

.marquee {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 2rem 1rem;
}

/* Smooth transition when baseline is calculated */
.marquee:not(.baseline-ready) .marquee__track {
  opacity: 0.85;  /* Increased from 0.7 to reduce grey cast during loading */
}

.marquee.baseline-ready .marquee__track {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Counter-flow animation for left marquee (scrolls down) */
.marquee--left .marquee__track {
  animation-name: scroll-down;
  animation-duration: calc(var(--duration) * 0.9); /* Slightly faster for parallax effect */
}

@keyframes scroll-down {
  0%   { transform: translateY(calc(-1 * (var(--n) * (var(--row-h) + var(--gap))))); }
  100% { transform: translateY(0); }
}

.marquee__mask {
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee__track {
  display: grid;
  grid-auto-rows: var(--row-h);
  gap: var(--gap);
  animation: scroll var(--duration) linear infinite;
  will-change: transform;
}

/* Seamless distance = scroll by half (one full set) */
@keyframes scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-1 * (var(--n) * (var(--row-h) + var(--gap))))); }
}

.marquee li { 
  list-style: none; 
  margin: 0; 
  padding: 0;
  display: grid;
  place-items: center;
}

/* Pause on hover for both marquees */
.marquee:hover .marquee__track { 
  animation-play-state: paused;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee--left .marquee__track,
  .marquee--right .marquee__track,
  .hmarquee__track {
    animation: none !important;
  }

  .hero-rotator,
  .hero-rotator__word {
    transition: none !important;
  }
}

/* ============================================================================
   EVSA MEDIA TOKEN - SIGNATURE DESIGN ELEMENT
   ============================================================================
   
   BRAND COLOR SYSTEM (Updated: October 2025)
   ==========================================
   
   EVSA Frame uses ONLY Navy + Green (sustainability-forward palette)
   
   Token Colors:
   - --evsa-navy:   #1A1948  (Dominant Blue - primary brand color)
   - --evsa-green:  #0B3F22  (Sustainability Green - secondary brand color)
   - --evsa-copper: #C67129  (Heritage Orange - ACCENTS ONLY, NOT in frames)
   - --evsa-light:  #DEDDDF  (Neutral Light - glass/backgrounds)
   
   Color Usage Rules:
   ✓ Frame/Halo Gradient:  Navy + Green ONLY
   ✓ Glass Panel:          Neutral (--evsa-light derived, no color cast)
   ✓ Inner Glows:          Soft navy/green tints only
   ✓ Backgrounds:          Navy base + green accents
   ✗ Copper in Frame:      NEVER (copper reserved for CTAs, hover states)
   
   Rationale: Simplified, sustainability-focused visual identity that
   emphasizes EVSA's environmental commitment through the green accent.
   
   Last Updated: October 2025
   Documentation: See README.md → "Brand Colors & Token Theme"
   
   ---
   
   Token Structure (bottom to top):
   1. Conic gradient background (halo: navy → green, 50/50 balance)
   2. ::before - Glass panel (neutral, subtle blur)
   3. ::after - Ground shadow (neutral elliptical gradient)
   4. <img> - Product image with drop-shadow
   5. .isotipo - Subtle radial glow (navy/green tints only)
   
   ============================================================================ */

:root{
  /* EVSA Brand Colors - Official Palette */
  --evsa-navy:#1A1948;    /* Dominant Blue (primary) - used in frame gradients */
  --evsa-green:#0B3F22;   /* Sustainability Green (secondary) - used in frame gradients */
  --evsa-copper:#C67129;  /* Heritage Orange (accent) - CTAs/buttons ONLY, NOT in frames */
  --evsa-light:#DEDDDF;   /* Neutral Light - glass panels, subtle backgrounds */

  /* Token Dimensions (Scaled up +18% for enlarged cards) */
  --token-radius: 21px;  /* Inner panel border radius (+18% from 18px) */
  --token-pad: clamp(10px, 1.4vw, 17px); /* Halo/glass ring thickness (+18% scaled) */
}

.evsa-token{
  position: relative;
  display: grid;
  place-items: center;
  width: var(--token-baseline);
  height: var(--token-baseline);
  min-width: var(--token-baseline);
  min-height: var(--token-baseline);
  max-width: var(--row-h);
  max-height: var(--row-h);
  margin-inline: auto;
  border-radius: calc(var(--token-radius) + var(--token-pad));
  padding: var(--token-pad);
  
  /* FRAME HALO: Navy + Green ONLY (no copper)
     Conic gradient creates smooth rotation from navy → green → navy
     50/50 balance emphasizes both brand colors equally */
  background:
    conic-gradient(from 180deg,
      var(--evsa-navy), var(--evsa-green), var(--evsa-navy));
  
  /* Proportionally scaled shadow for enlarged tokens (+18%) */
  box-shadow: 0 17px 38px rgba(0,0,0,.36);  /* +18% scaled from 14px/32px */
  isolation:isolate;
  transition: width 0.2s ease, height 0.2s ease;
}

/* Panel interior tipo "glass" - reduced opacity to avoid dimming */
.evsa-token::before{
  content:""; position:absolute; inset: var(--token-pad);
  border-radius: var(--token-radius);
  background: rgba(255,255,255,.03);  /* Reduced from .05 to prevent grey veil */
  border: 1px solid rgba(255,255,255,.12);  /* Reduced from .16 for subtlety */
  backdrop-filter: blur(3px);  /* Reduced from 5px to maintain clarity */
  z-index:0;
}

/* Sombra elíptica interna (peso visual) - softened to avoid dimming */
.evsa-token::after{
  content:""; position:absolute; left:16%; right:16%;
  bottom: calc(var(--token-pad) + 5px);
  height:12%; border-radius:50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.18), transparent 70%);  /* Reduced from .32 */
  z-index:0;
}

/* Contenido del token - scaled proportionally for enlarged tokens (+18%) */
.evsa-token > img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: calc(var(--token-baseline) - 2.6 * var(--token-pad));
  max-height: calc(var(--token-baseline) - 2.6 * var(--token-pad));
  display: block;
  object-fit: contain;
  filter:
    brightness(1.15)      /* +15% brightness to remove grey cast */
    contrast(1.08)        /* +8% contrast for clarity */
    saturate(1.12)        /* +12% saturation for vibrant colors */
    drop-shadow(0 12px 19px rgba(0,0,0,.25));  /* +18% scaled shadow (was 10px/16px) */
  border-radius: calc(var(--token-radius) - 2px);
  -webkit-transform: translateZ(0);  /* Force GPU compositing for crisp SVG rendering */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
/* Modos de ajuste */
.evsa-token.cover  > img{ object-fit: cover; }
.evsa-token.contain> img{ object-fit: contain; }

/* Proporciones universales */
.ratio-3x4  { aspect-ratio: 3 / 4; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio:16 / 9; }

/* Inner glow layer - Navy + Green tints ONLY (no copper) - scaled for enlarged tokens */
.evsa-token .isotipo{
  position:absolute; inset: var(--token-pad);
  border-radius: var(--token-radius);
  
  /* Dual radial gradients for subtle depth (proportionally scaled +18%):
     - Navy accent (top-right): adds dominant brand presence
     - Green accent (bottom-left): reinforces sustainability theme
     Gradient sizes scaled to match enlarged tokens */
  background:
    radial-gradient(342px 342px at 75% 25%, rgba(26,25,72,.06), transparent 60%),   /* Navy glow (+18% from 290px) */
    radial-gradient(260px 260px at 25% 75%, rgba(11,63,34,.05), transparent 60%);  /* Green glow (+18% from 220px) */
  
  mix-blend-mode: screen;  /* Additive blending for soft glow effect */
  z-index:0; 
  pointer-events:none;
}