/* Low-Poly Background System
 * Matches business card aesthetic with dark geometric facets
 * Author: Portfolio Generator
 * Version: 1.0
 */

/* CSS Variables for Brand Palette */
:root {
  --bg-0: #0D0D0D;   /* Darkest base */
  --bg-1: #111111;   /* Very dark facets */
  --bg-2: #151515;   /* Dark facets */
  --bg-3: #1B1B1B;   /* Medium-dark facets */
  --bg-4: #222222;   /* Medium facets */
  --bg-5: #2A2A2A;   /* Lightest facets */
  --accent: #0FA47F; /* Primary teal */
  
  /* Utility variables */
  --lowpoly-opacity: 1;
  --vignette-opacity: 0.6;
}

/* Base Low-Poly Background Class */
.bg-lowpoly {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgOnJvb3Qgew0KICAgICAgICAtLWJnLTA6ICMwRDBEMEQ7DQogICAgICAgIC0tYmctMTogIzExMTExMTsNCiAgICAgICAgLS1iZy0yOiAjMTUxNTE1Ow0KICAgICAgICAtLWJnLTM6ICMxQjFCMUI7DQogICAgICAgIC0tYmctNDogIzIyMjIyMjsNCiAgICAgICAgLS1iZy01OiAjMkEyQTJBOw0KICAgICAgICAtLWFjY2VudDogIzBGQTQ3RjsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIA0KICA8IS0tIEJhc2UgYmFja2dyb3VuZCAtLT4NCiAgPHJlY3Qgd2lkdGg9IjE5MjAiIGhlaWdodD0iMTA4MCIgZmlsbD0idmFyKC0tYmctMCkiLz4NCiAgDQogIDwhLS0gTG93LXBvbHkgdHJpYW5ndWxhciBmYWNldHMgLS0+DQogIDxnPg0KICAgIDwhLS0gUm93IDEgLS0+DQogICAgPHBvbHlnb24gcG9pbnRzPSIwLDAgMjQwLDAgMTIwLDE4MCIgZmlsbD0idmFyKC0tYmctMSkiLz4NCiAgICA8cG9seWdvbiBwb2ludHM9IjI0MCwwIDQ4MCwwIDM2MCwxODAiIGZpbGw9InZhcigtLWJnLTIpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSI0ODAsMCA3MjAsMCA2MDAsMTgwIiBmaWxsPSJ2YXIoLS1iZy0xKSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iNzIwLDAgOTYwLDAgODQwLDE4MCIgZmlsbD0idmFyKC0tYmctMykiLz4NCiAgICA8cG9seWdvbiBwb2ludHM9Ijk2MCwwIDEyMDAsMCAxMDgwLDE4MCIgZmlsbD0idmFyKC0tYmctMikiLz4NCiAgICA8cG9seWdvbiBwb2ludHM9IjEyMDAsMCAxNDQwLDAgMTMyMCwxODAiIGZpbGw9InZhcigtLWJnLTQpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSIxNDQwLDAgMTY4MCwwIDE1NjAsMTgwIiBmaWxsPSJ2YXIoLS1iZy0xKSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMTY4MCwwIDE5MjAsMCAxODAwLDE4MCIgZmlsbD0idmFyKC0tYmctMykiLz4NCiAgICANCiAgICA8IS0tIFJvdyAyIC0tPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMCwwIDEyMCwxODAgMCwxODAiIGZpbGw9InZhcigtLWJnLTIpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSIxMjAsMTgwIDI0MCwwIDM2MCwxODAiIGZpbGw9InZhcigtLWJnLTMpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSIzNjAsMTgwIDQ4MCwwIDYwMCwxODAiIGZpbGw9InZhcigtLWJnLTQpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSI2MDAsMTgwIDcyMCwwIDg0MCwxODAiIGZpbGw9InZhcigtLWJnLTIpIi8+DQogICAgPHBvbHlnb24gcG9pbnRzPSI4NDAsMTgwIDk2MCwwIDEwODAsMTgwIiBmaWxsPSJ2YXIoLS1iZy01KSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMTA4MCwxODAgMTIwMCwwIDEzMjAsMTgwIiBmaWxsPSJ2YXIoLS1iZy0zKSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMTMyMCwxODAgMTQ0MCwwIDE1NjAsMTgwIiBmaWxsPSJ2YXIoLS1iZy0yKSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMTU2MCwxODAgMTY4MCwwIDE4MDAsMTgwIiBmaWxsPSJ2YXIoLS1iZy00KSIvPg0KICAgIDxwb2x5Z29uIHBvaW50cz0iMTgwMCwxODAgMTkyMCwwIDE5MjAsMTgwIiBmaWxsPSJ2YXIoLS1iZy0xKSIvPg0KICAgIERvdGhlciByb3dzIG9mIGZhY2V0cyBjb250aW51ZS4uLiBdDQogIDwvZz4NCjwvc3ZnPg==');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--lowpoly-opacity);
  position: relative;
}

/* Accent variant with subtle teal glow */
.bg-lowpoly-accent {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgOnJvb3Qgew0KICAgICAgICAtLWJnLTA6ICMwRDBEMEQ7DQogICAgICAgIC0tYmctMTogIzExMTExMTsNCiAgICAgICAgLS1iZy0yOiAjMTUxNTE1Ow0KICAgICAgICAtLWJnLTM6ICMxQjFCMUI7DQogICAgICAgIC0tYmctNDogIzIyMjIyMjsNCiAgICAgICAgLS1iZy01OiAjMkEyQTJBOw0KICAgICAgICAtLWFjY2VudDogIzBGQTQ3RjsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDwhLS0gU3VidGxlIGFjY2VudCBnbG93IGZvciB0b3AtbGVmdCBhcmVhIC0tPg0KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iYWNjZW50R2xvdyIgY3g9IjI1JSIgY3k9IjI1JSIgcj0iNTAlIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnZhcigtLWFjY2VudCk7c3RvcC1vcGFjaXR5OjAuMDgiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdHlsZT0ic3RvcC1jb2xvcjp2YXIoLS1hY2NlbnQpO3N0b3Atb3BhY2l0eTowLjA1Ii8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnZhcigtLWFjY2VudCk7c3RvcC1vcGFjaXR5OjAiLz4NCiAgICA8L3JhZGlhbEdyYWRpZW50Pg0KICA8L2RlZnM+DQpbVHJpYW5ndWxhciBmYWNldHMgY29udGludWUuLi5dDQo8L3N2Zz4=');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: var(--lowpoly-opacity);
  position: relative;
}

/* Radial vignette overlay for depth */
.bg-lowpoly::after,
.bg-lowpoly-accent::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.1) 70%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: var(--vignette-opacity);
  pointer-events: none;
  z-index: -1;
}

/* Fallback for older browsers */
@supports not (background: url("data:image/svg+xml;base64,")) {
  .bg-lowpoly,
  .bg-lowpoly-accent {
    background-image: url('../public/img/lowpoly-dark-1920.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Performance and Accessibility */
@media (prefers-reduced-motion: reduce) {
  .bg-lowpoly,
  .bg-lowpoly-accent {
    background-attachment: scroll;
  }
}

/* Enhanced variant with subtle parallax (gated behind .enhanced class) */
.enhanced .bg-lowpoly,
.enhanced .bg-lowpoly-accent {
  background-attachment: fixed;
  transform: translateZ(0); /* Enable GPU acceleration */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .enhanced .bg-lowpoly,
  .enhanced .bg-lowpoly-accent {
    background-attachment: scroll;
    transform: none;
    will-change: auto;
  }
}

/* Utility Classes */
.bg-lowpoly-muted {
  --lowpoly-opacity: 0.7;
}

.bg-lowpoly-subtle {
  --lowpoly-opacity: 0.5;
}

.bg-lowpoly-strong {
  --lowpoly-opacity: 1;
}

.vignette-light {
  --vignette-opacity: 0.3;
}

.vignette-strong {
  --vignette-opacity: 0.8;
}

.no-vignette::after {
  display: none;
}

/* Hero overlay for accessible contrast */
.hero-overlay {
  position: relative;
  z-index: 1;
}

.hero-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 13, 13, 0.8) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.4) 100%
  );
  z-index: -1;
}

/* Text contrast helpers - WCAG AA+ compliant */
.text-contrast-high {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.text-contrast-medium {
  color: #f0f0f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bg-lowpoly,
  .bg-lowpoly-accent {
    background-attachment: scroll; /* Fixed backgrounds can be problematic on mobile */
  }
}

/* Print styles */
@media print {
  .bg-lowpoly,
  .bg-lowpoly-accent {
    background: var(--bg-0) !important;
  }
  
  .bg-lowpoly::after,
  .bg-lowpoly-accent::after {
    display: none !important;
  }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: light) {
  :root {
    --bg-0: #f8f9fa;
    --bg-1: #e9ecef;
    --bg-2: #dee2e6;
    --bg-3: #ced4da;
    --bg-4: #adb5bd;
    --bg-5: #6c757d;
  }
  
  .text-contrast-high {
    color: #212529;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  }
  
  .text-contrast-medium {
    color: #495057;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  }
}

/* Custom palette overrides (uncomment and modify as needed) */
/*
:root {
  --bg-0: #0D0D0D;
  --bg-1: #111111;
  --bg-2: #151515;
  --bg-3: #1B1B1B;
  --bg-4: #222222;
  --bg-5: #2A2A2A;
  --accent: #0FA47F;
}
*/

/* Facet density adjustments (modify SVG viewBox and polygon count in actual files) */
/* For denser facets: Use smaller triangles, more polygons */
/* For sparser facets: Use larger triangles, fewer polygons */