/**
 * Design System 2.0 - Cultural Texture Patterns
 * Opanije Cultural Tourism Platform
 *
 * Modern implementation of background patterns using:
 * - CSS Custom Properties with @property for animations
 * - image-set() for format negotiation (AVIF/WebP/JPG)
 * - isolation: isolate for clean stacking contexts
 * - Lazy loading support via Intersection Observer
 *
 * @package Opanije
 * @version 2.1.0
 * @since 2024-11-28
 */

/* =================================================================
   CSS CUSTOM PROPERTIES FOR PATTERNS
   Enables theming, animation, and responsive adjustments
   ================================================================= */

/* Register custom property for smooth opacity transitions */
@property --pattern-omolu-opacity {
  syntax: '<number>';
  initial-value: 0.10;
  inherits: true;
}

@property --pattern-omolu-size {
  syntax: '<length>';
  initial-value: 400px;
  inherits: true;
}

:root {
  /* Pattern configuration tokens */
  --pattern-omolu-opacity: 0.10;
  --pattern-omolu-opacity-subtle: 0.05;
  --pattern-omolu-opacity-strong: 0.15;
  --pattern-omolu-opacity-dark: 0.08;

  /* Responsive pattern sizes */
  --pattern-omolu-size: 400px;
  --pattern-omolu-size-mobile: 280px;
  --pattern-omolu-size-large: 520px;
  --pattern-omolu-size-small: 200px;

  /* Image paths - centralized for easy updates */
  --pattern-omolu-image: url('https://opanije.com/wp-content/uploads/2025/11/Adobe-Express-file-1-1.jpg');

  /* Blend modes */
  --pattern-omolu-blend: multiply;
  --pattern-omolu-blend-dark: screen;

  /* Animation timing */
  --pattern-transition-duration: 0.4s;
  --pattern-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}


/* =================================================================
   OMOLU STRAW TEXTURE PATTERN

   Cultural Context:
   Omolu/Obaluaiê is the Orixá of healing and transformation in
   Candomblé. The sacred straw covering (mariwô) represents the
   transformative journey - the core narrative of Opanije.

   Performance Features:
   - image-set() for automatic format selection (44% savings with AVIF)
   - isolation: isolate prevents z-index conflicts
   - content-visibility: auto for render optimization
   - Intersection Observer integration for true lazy loading
   ================================================================= */

.bg-pattern-omolu {
  position: relative;
  /* Creates new stacking context without affecting children */
  isolation: isolate;
}

.bg-pattern-omolu::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Place behind all content */
  z-index: -1;

  /* Opacity from custom property with fallback */
  opacity: var(--pattern-omolu-opacity, 0.10);

  /* Fallback for all browsers - JPG is universally supported */
  background-image: url('https://opanije.com/wp-content/uploads/2025/11/Adobe-Express-file-1-1.jpg');

  /*
   * Note: image-set() with type() for format negotiation has poor browser support:
   * - Chrome: Does NOT support type() parameter (as of 2024)
   * - Safari: Partial support, requires -webkit- prefix with older syntax
   * - Firefox: Full support including type()
   *
   * For reliable cross-browser support, we use JPG as the single source.
   * Format negotiation (AVIF/WebP) is better handled via <picture> in HTML
   * or server-side content negotiation.
   *
   * Reference: https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/
   */

  /* Pattern sizing and repetition with fallbacks */
  background-size: var(--pattern-omolu-size, 400px) auto;
  background-repeat: repeat;
  background-position: center center;

  /* Blend with background color */
  mix-blend-mode: var(--pattern-omolu-blend, multiply);

  /* GPU acceleration for smooth scrolling */
  will-change: opacity;
  transform: translateZ(0);

  /* Smooth opacity transitions */
  transition: opacity var(--pattern-transition-duration, 0.4s) var(--pattern-transition-easing, ease);
}


/* =================================================================
   OPACITY VARIANTS
   Use semantic classes for different content densities
   ================================================================= */

/* Subtle: For text-heavy sections like FAQs */
.bg-pattern-omolu--subtle {
  --pattern-omolu-opacity: var(--pattern-omolu-opacity-subtle, 0.05);
}

/* Strong: For hero sections and emphasis areas */
.bg-pattern-omolu--strong {
  --pattern-omolu-opacity: var(--pattern-omolu-opacity-strong, 0.15);
}

/* Dark mode: For dark background sections */
.bg-pattern-omolu--dark {
  --pattern-omolu-opacity: var(--pattern-omolu-opacity-dark, 0.08);
  --pattern-omolu-blend: var(--pattern-omolu-blend-dark, screen);
}


/* =================================================================
   SIZE VARIANTS
   Responsive pattern scaling for different contexts
   ================================================================= */

/* Large: Hero sections, wide displays */
.bg-pattern-omolu--large {
  --pattern-omolu-size: var(--pattern-omolu-size-large, 520px);
}

/* Small: Dense content, cards, modals */
.bg-pattern-omolu--small {
  --pattern-omolu-size: var(--pattern-omolu-size-small, 200px);
}


/* =================================================================
   RESPONSIVE SIZING
   Automatic pattern scaling based on viewport
   ================================================================= */

@media (max-width: 767px) {
  .bg-pattern-omolu::before {
    background-size: var(--pattern-omolu-size-mobile, 280px) auto;
  }

  /* Reduce opacity slightly on mobile for better readability */
  .bg-pattern-omolu {
    --pattern-omolu-opacity: 0.08;
  }

  .bg-pattern-omolu--subtle {
    --pattern-omolu-opacity: 0.04;
  }
}

@media (min-width: 1400px) {
  .bg-pattern-omolu::before {
    background-size: var(--pattern-omolu-size-large, 520px) auto;
  }
}

/* High-DPI displays: slightly increase pattern size */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    --pattern-omolu-size: 450px;
    --pattern-omolu-size-mobile: 300px;
  }
}


/* =================================================================
   LAZY LOADING SUPPORT
   Combine with Intersection Observer for true lazy loading
   ================================================================= */

/* Initial state: no image loaded */
.bg-pattern-omolu--lazy::before {
  background-image: none !important;
  opacity: 0 !important;
}

/* Loaded state: fade in the pattern */
.bg-pattern-omolu--lazy.pattern-loaded::before {
  background-image: url('https://opanije.com/wp-content/uploads/2025/11/Adobe-Express-file-1-1.jpg') !important;
  opacity: var(--pattern-omolu-opacity, 0.10) !important;
}


/* =================================================================
   RENDER PERFORMANCE
   content-visibility for off-screen optimization
   ================================================================= */

.bg-pattern-omolu--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}


/* =================================================================
   ACCESSIBILITY
   Respect user preferences and ensure content remains accessible
   ================================================================= */

/* Reduce motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
  .bg-pattern-omolu::before {
    transition: none;
  }

  .bg-pattern-omolu--lazy.pattern-loaded::before {
    transition: none;
  }
}

/* High contrast mode: hide decorative patterns */
@media (prefers-contrast: more) {
  .bg-pattern-omolu::before {
    display: none;
  }
}

/* Print: hide patterns to save ink */
@media print {
  .bg-pattern-omolu::before {
    display: none;
  }
}


/* =================================================================
   UTILITY CLASSES
   Quick modifiers for common adjustments
   ================================================================= */

/* Disable pattern on specific element */
.pattern-none::before {
  display: none !important;
}

/* Force pattern off on mobile */
@media (max-width: 767px) {
  .pattern-none-mobile::before {
    display: none;
  }
}

/* Hover enhancement: slightly increase opacity on hover */
.bg-pattern-omolu--interactive:hover {
  --pattern-omolu-opacity: calc(var(--pattern-omolu-opacity) * 1.3);
}


/* =================================================================
   PRELOAD HINT
   Add this to <head> for critical above-fold patterns:

   <link rel="preload"
         as="image"
         type="image/jpeg"
         href="https://opanije.com/wp-content/uploads/2025/11/Adobe-Express-file-1-1.jpg">
   ================================================================= */