/* ===================================================
   VINTAGE/NOSTALGIC HAZE THEME
   Warm, Film Photography, Golden Hour Aesthetic
   Using Open Props Design Tokens
   =================================================== */

/* ==================
   CSS CUSTOM PROPERTIES WITH OPEN PROPS
   ================== */

[data-theme="vintage-light"] {
  /* Open Props Colors - Warm Palette */
  --theme-primary: var(--orange-8);
  --theme-primary-hover: var(--orange-9);
  --theme-secondary: var(--stone-8);
  --theme-accent: var(--amber-7);
  
  /* Backgrounds using Open Props */
  --theme-bg: var(--sand-1);
  --theme-surface: var(--sand-2);
  --theme-surface-2: var(--sand-3);
  --theme-surface-hover: var(--sand-4);
  
  /* Text using Open Props */
  --theme-text: var(--stone-11);
  --theme-text-secondary: var(--stone-10);
  --theme-text-tertiary: var(--stone-9);
  --theme-text-muted: var(--stone-8);
  
  /* Borders & Effects */
  --theme-border-color: var(--stone-6);
  --theme-border-subtle: var(--stone-4);
  --theme-shadow: var(--shadow-3);
  --theme-shadow-strong: var(--shadow-4);
  --theme-glow: rgba(251, 146, 60, 0.15);
  
  /* Accents */
  --theme-success: var(--green-7);
  --theme-warning: var(--yellow-7);
  --theme-error: var(--red-7);
  
  /* Typography using Open Props */
  --theme-font-primary: var(--font-serif);
  --theme-font-body: var(--font-sans);
  --theme-font-mono: var(--font-mono);
}

[data-theme="vintage-dark"] {
  /* Open Props Colors - Dark Warm Palette */
  --theme-primary: var(--orange-6);
  --theme-primary-hover: var(--orange-7);
  --theme-secondary: var(--stone-6);
  --theme-accent: var(--amber-5);
  
  /* Backgrounds */
  --theme-bg: var(--stone-12);
  --theme-surface: var(--stone-11);
  --theme-surface-2: var(--stone-10);
  --theme-surface-hover: var(--stone-9);
  
  /* Text */
  --theme-text: var(--sand-1);
  --theme-text-secondary: var(--sand-2);
  --theme-text-tertiary: var(--sand-3);
  --theme-text-muted: var(--sand-4);
  
  /* Borders & Effects */
  --theme-border-color: var(--stone-8);
  --theme-border-subtle: var(--stone-9);
  --theme-shadow: var(--shadow-5);
  --theme-shadow-strong: var(--shadow-6);
  --theme-glow: rgba(251, 146, 60, 0.2);
  
  /* Accents */
  --theme-success: var(--green-6);
  --theme-warning: var(--yellow-6);
  --theme-error: var(--red-6);
  
  /* Typography */
  --theme-font-primary: var(--font-serif);
  --theme-font-body: var(--font-sans);
  --theme-font-mono: var(--font-mono);
}

/* ==================
   BODY & BACKGROUND
   ================== */

[data-theme^="vintage"] body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font-body);
  overflow-x: hidden;
  position: relative;
}

/* Ensure all direct children of body sit above backgrounds */
[data-theme^="vintage"] body > *:not(.site-header):not(.lightbox):not(.header-peek-indicator) {
  position: relative;
  z-index: 10;
}

/* Animated Background Layers */
[data-theme="vintage-light"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  background: 
    radial-gradient(circle at 20% 30%, rgba(251, 146, 60, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(217, 119, 6, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, var(--sand-1) 0%, var(--sand-2) 50%, var(--sand-1) 100%);
  animation: goldenDrift 25s ease-in-out infinite;
  pointer-events: none;
}

[data-theme="vintage-dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  background: 
    radial-gradient(circle at 30% 40%, rgba(251, 146, 60, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(217, 119, 6, 0.38) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(245, 158, 11, 0.32) 0%, transparent 50%),
    linear-gradient(180deg, var(--stone-12) 0%, #1a1614 50%, var(--stone-12) 100%);
  animation: emberGlow 30s ease-in-out infinite;
  pointer-events: none;
}

/* Floating Light Orbs - Vintage Light */
[data-theme="vintage-light"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  background: 
    radial-gradient(circle 120px at 15% 20%, rgba(251, 191, 36, 0.65) 0%, transparent 100%),
    radial-gradient(circle 80px at 85% 80%, rgba(245, 158, 11, 0.55) 0%, transparent 100%),
    radial-gradient(circle 100px at 60% 40%, rgba(217, 119, 6, 0.5) 0%, transparent 100%),
    radial-gradient(circle 60px at 40% 90%, rgba(251, 146, 60, 0.6) 0%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.05) 1px, rgba(0,0,0,.05) 2px),
    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0,0,0,.05) 1px, rgba(0,0,0,.05) 2px);
  opacity: 1.0;
  animation: bokeFloat 35s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Floating Embers - Vintage Dark */
[data-theme="vintage-dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  background: 
    radial-gradient(circle 100px at 25% 30%, rgba(251, 146, 60, 0.7) 0%, transparent 100%),
    radial-gradient(circle 70px at 75% 70%, rgba(245, 158, 11, 0.6) 0%, transparent 100%),
    radial-gradient(circle 90px at 50% 15%, rgba(217, 119, 6, 0.55) 0%, transparent 100%),
    radial-gradient(circle 50px at 80% 40%, rgba(251, 191, 36, 0.65) 0%, transparent 100%),
    radial-gradient(circle 60px at 30% 85%, rgba(245, 158, 11, 0.5) 0%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,.06) 1px, rgba(0,0,0,.06) 2px),
    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0,0,0,.06) 1px, rgba(0,0,0,.06) 2px);
  opacity: 1.0;
  animation: emberFloat 40s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ==================
   LINK STYLES
   ================== */

[data-theme="vintage-light"] a {
  color: #c2410c;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(194, 65, 12, 0.3);
}

[data-theme="vintage-light"] a:hover {
  color: #9a3412;
  border-bottom-color: #9a3412;
  background: rgba(194, 65, 12, 0.08);
}

[data-theme="vintage-light"] a:visited {
  color: #92400e;
  border-bottom-color: rgba(146, 64, 14, 0.3);
}

[data-theme="vintage-light"] a:active {
  color: #7c2d12;
  background: rgba(194, 65, 12, 0.15);
}

[data-theme="vintage-dark"] a {
  color: #fb923c;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(251, 146, 60, 0.4);
}

[data-theme="vintage-dark"] a:hover {
  color: #fcd34d;
  border-bottom-color: #fcd34d;
  background: rgba(251, 146, 60, 0.12);
  text-shadow: 0 0 8px rgba(251, 146, 60, 0.3);
}

[data-theme="vintage-dark"] a:visited {
  color: #f59e0b;
  border-bottom-color: rgba(245, 158, 11, 0.4);
}

[data-theme="vintage-dark"] a:active {
  color: #fbbf24;
  background: rgba(251, 146, 60, 0.2);
  text-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
}

/* Keyframe Animations */
@keyframes goldenDrift {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  25% { 
    transform: translate(3%, -2%) scale(1.05);
    opacity: 0.95;
  }
  50% { 
    transform: translate(-2%, 3%) scale(1.02);
    opacity: 0.9;
  }
  75% { 
    transform: translate(2%, 1%) scale(1.03);
    opacity: 0.95;
  }
}

@keyframes emberGlow {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  20% { 
    transform: translate(-2%, 3%) scale(1.03);
    opacity: 0.92;
  }
  40% { 
    transform: translate(3%, -2%) scale(1.05);
    opacity: 0.88;
  }
  60% { 
    transform: translate(-1%, 2%) scale(1.02);
    opacity: 0.9;
  }
  80% { 
    transform: translate(2%, -1%) scale(1.04);
    opacity: 0.94;
  }
}

@keyframes bokeFloat {
  0%, 100% { 
    transform: translate(0, 0);
    filter: blur(0px);
  }
  20% { 
    transform: translate(-15px, -25px);
    filter: blur(1px);
  }
  40% { 
    transform: translate(20px, 15px);
    filter: blur(0.5px);
  }
  60% { 
    transform: translate(-10px, 20px);
    filter: blur(1.5px);
  }
  80% { 
    transform: translate(15px, -15px);
    filter: blur(0.8px);
  }
}

@keyframes emberFloat {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg);
    filter: blur(0px);
  }
  25% { 
    transform: translate(-20px, -30px) rotate(2deg);
    filter: blur(1px);
  }
  50% { 
    transform: translate(25px, 20px) rotate(-2deg);
    filter: blur(0.5px);
  }
  75% { 
    transform: translate(-15px, 25px) rotate(1deg);
    filter: blur(1.2px);
  }
}

/* ==================
   HEADER & NAVIGATION
   ================== */

[data-theme="vintage-light"] .site-header {
  background: rgba(255, 250, 245, 0.92);
  backdrop-filter: blur(var(--blur-2)) saturate(180%);
  border-bottom: 1px solid var(--theme-border-color);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="vintage-dark"] .site-header {
  background: rgba(28, 25, 23, 0.92);
  backdrop-filter: blur(var(--blur-2)) saturate(180%);
  border-bottom: 1px solid var(--theme-border-color);
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .site-header {
  position: fixed !important;
  z-index: 1000 !important;
}

[data-theme^="vintage"] .header-peek-indicator {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
  box-shadow: 0 var(--size-2) var(--size-4) var(--theme-glow);
}

[data-theme^="vintage"] .header-peek-indicator:hover {
  box-shadow: 0 var(--size-3) var(--size-6) var(--theme-glow);
  transform: translateY(var(--size-1));
}

[data-theme^="vintage"] .nav-link {
  color: var(--theme-text-secondary);
  font-family: var(--theme-font-body);
  font-weight: var(--font-weight-6);
  letter-spacing: var(--font-letterspacing-1);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .nav-link:hover {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
  box-shadow: 0 0 var(--size-4) var(--theme-glow);
}

[data-theme^="vintage"] .nav-link:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: var(--size-1);
  border-color: var(--theme-primary);
}

[data-theme^="vintage"] .nav-link.active {
  color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
  background: var(--theme-surface);
}

[data-theme^="vintage"] .hamburger-line {
  background: var(--theme-text);
}

[data-theme^="vintage"] .hamburger-menu:hover .hamburger-line {
  background: var(--theme-primary);
}

/* ==================
   TYPOGRAPHY
   ================== */

[data-theme^="vintage"] h1,
[data-theme^="vintage"] h2,
[data-theme^="vintage"] h3,
[data-theme^="vintage"] h4 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme^="vintage"] .xalpheria-title {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
  text-shadow: var(--shadow-1);
}

[data-theme^="vintage"] .xalpheria-title .char {
  color: var(--theme-text);
  transition: color var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .xalpheria-title .char:hover {
  color: var(--theme-primary);
}

[data-theme^="vintage"] p {
  color: var(--theme-text-secondary);
  line-height: var(--font-lineheight-4);
}

[data-theme^="vintage"] .intro {
  color: var(--theme-text-secondary);
}

/* ==================
   CAROUSEL & MEDIA
   ================== */

[data-theme^="vintage"] .release-carousel {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-4);
}

[data-theme^="vintage"] .cover-art {
  border: 2px solid var(--theme-border-subtle);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3), 0 var(--size-4) var(--size-8) var(--theme-glow);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .cover-art:hover {
  box-shadow: var(--shadow-5), 0 var(--size-6) var(--size-10) var(--theme-glow);
  transform: scale(1.02);
}

[data-theme^="vintage"] .carousel-nav button {
  background: var(--theme-surface);
  color: var(--theme-primary);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  cursor: pointer;
}

[data-theme^="vintage"] .carousel-nav button:hover {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
  box-shadow: var(--shadow-3), 0 0 var(--size-4) var(--theme-glow);
  transform: scale(1.15);
}

[data-theme^="vintage"] .carousel-nav button:active {
  transform: scale(1.05);
  box-shadow: var(--shadow-1);
}

/* ==================
   BUTTONS & INTERACTIVE ELEMENTS
   ================== */

[data-theme^="vintage"] .nav,
[data-theme^="vintage"] .download,
[data-theme^="vintage"] .cyber-btn {
  background: linear-gradient(180deg, var(--theme-surface-2) 0%, var(--theme-surface) 100%);
  color: var(--theme-text);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .nav:hover,
[data-theme^="vintage"] .download:hover,
[data-theme^="vintage"] .cyber-btn:hover {
  background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
  color: white;
  border-color: var(--theme-primary-hover);
  box-shadow: var(--shadow-3), 0 0 var(--size-5) var(--theme-glow);
  transform: translateY(calc(-1 * var(--size-1)));
}

[data-theme^="vintage"] .nav:focus-visible,
[data-theme^="vintage"] .download:focus-visible,
[data-theme^="vintage"] .cyber-btn:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: var(--size-1);
}

[data-theme^="vintage"] .theme-toggle {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  color: var(--theme-primary);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  cursor: pointer;
}

[data-theme^="vintage"] .theme-toggle:hover {
  background: var(--theme-surface-hover);
  border-color: var(--theme-primary);
  box-shadow: var(--shadow-3), 0 0 var(--size-3) var(--theme-glow);
  transform: scale(1.1) rotate(15deg);
}

[data-theme^="vintage"] .theme-toggle:active {
  transform: scale(1.05) rotate(0deg);
}

/* ==================
   FOOTER
   ================== */

[data-theme^="vintage"] footer {
  color: var(--theme-text-tertiary);
  border-top: 1px solid var(--theme-border-color);
}

[data-theme^="vintage"] .footer-links {
  border-top: 1px solid var(--theme-border-color);
}

[data-theme^="vintage"] .email-link,
[data-theme^="vintage"] .coffee-link {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .email-link:hover,
[data-theme^="vintage"] .coffee-link:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--theme-primary);
  transform: translateY(calc(-1 * var(--size-1)));
}

[data-theme^="vintage"] .email-text,
[data-theme^="vintage"] .coffee-text {
  color: var(--theme-text-secondary);
}

/* ==================
   RADIO PLAYER
   ================== */

[data-theme^="vintage"] .radio-player {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-4);
}

[data-theme^="vintage"] .radio-header {
  background: linear-gradient(180deg, var(--theme-surface-2), var(--theme-surface));
  border-bottom: 1px solid var(--theme-border-color);
}

[data-theme^="vintage"] .radio-title {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .now-playing-text {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .track-title {
  color: var(--theme-primary);
}

[data-theme^="vintage"] .radio-controls button {
  background: var(--theme-surface-2);
  color: var(--theme-primary);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  cursor: pointer;
}

[data-theme^="vintage"] .radio-controls button:hover {
  background: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
  box-shadow: var(--shadow-3);
  transform: translateY(calc(-1 * var(--size-px)));
}

[data-theme^="vintage"] .radio-controls button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

[data-theme^="vintage"] .play-pause-btn {
  background: var(--theme-primary);
  color: white;
}

[data-theme^="vintage"] .play-pause-btn:hover {
  background: var(--theme-primary-hover);
}

[data-theme^="vintage"] .seek-bar,
[data-theme^="vintage"] .volume-slider {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--radius-round);
}

[data-theme^="vintage"] .seek-bar-fill,
[data-theme^="vintage"] .volume-fill {
  background: var(--theme-primary);
}

[data-theme^="vintage"] .track-info {
  color: var(--theme-text-tertiary);
}

/* ==================
   LIGHTBOX
   ================== */

[data-theme^="vintage"] .lightbox {
  background: rgba(28, 25, 23, 0.95);
  backdrop-filter: blur(var(--blur-3));
  z-index: 99999 !important;
}

[data-theme^="vintage"] .lightbox-content {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

[data-theme^="vintage"] .lightbox-album {
  border: 2px solid var(--theme-border-subtle);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-4);
}

[data-theme^="vintage"] .lightbox-info h2,
[data-theme^="vintage"] .release-lightbox-title {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .lightbox-close,
[data-theme^="vintage"] .release-lightbox-close {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-round);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .lightbox-close:hover,
[data-theme^="vintage"] .release-lightbox-close:hover {
  background: var(--theme-error);
  color: white;
  transform: rotate(90deg) scale(1.1);
}

/* ==================
   FORMS & INPUT
   ================== */

[data-theme^="vintage"] input[type="text"],
[data-theme^="vintage"] input[type="email"],
[data-theme^="vintage"] textarea {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: inset var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] input[type="text"]:focus,
[data-theme^="vintage"] input[type="email"]:focus,
[data-theme^="vintage"] textarea:focus {
  border-color: var(--theme-primary);
  box-shadow: inset var(--shadow-2), 0 0 0 2px var(--theme-glow);
  outline: 2px solid var(--theme-primary);
  outline-offset: 1px;
}

[data-theme^="vintage"] input:invalid,
[data-theme^="vintage"] textarea:invalid {
  border-color: var(--theme-error);
}

[data-theme^="vintage"] input:valid:not(:placeholder-shown),
[data-theme^="vintage"] textarea:valid:not(:placeholder-shown) {
  border-color: var(--theme-success);
}

[data-theme^="vintage"] input::placeholder,
[data-theme^="vintage"] textarea::placeholder {
  color: var(--theme-text-muted);
}

[data-theme^="vintage"] .submit-btn {
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-primary-hover));
  color: white;
  border: none;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .submit-btn:hover {
  box-shadow: var(--shadow-4), 0 0 var(--size-5) var(--theme-glow);
  transform: translateY(calc(-1 * var(--size-1)));
}

/* ==================
   GUESTBOOK
   ================== */

[data-theme^="vintage"] .guestbook-entry {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-left: var(--size-1) solid var(--theme-primary);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

[data-theme^="vintage"] .guestbook-entry:hover {
  box-shadow: var(--shadow-3);
  border-left-color: var(--theme-primary-hover);
}

[data-theme^="vintage"] .entry-name {
  color: var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .entry-date {
  color: var(--theme-text-muted);
}

[data-theme^="vintage"] .entry-message {
  color: var(--theme-text-secondary);
}

/* ==================
   MUSINGS & BLOG
   ================== */

[data-theme^="vintage"] .musings-container,
[data-theme^="vintage"] .notes-container {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .note-content {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .note-content h1,
[data-theme^="vintage"] .note-content h2,
[data-theme^="vintage"] .note-content h3 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .note-content a {
  color: var(--theme-primary);
  transition: color var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .note-content a:hover {
  color: var(--theme-primary-hover);
}

[data-theme^="vintage"] .note-content code {
  background: var(--theme-surface-2);
  color: var(--theme-primary);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--radius-1);
}

[data-theme^="vintage"] .note-content pre {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: inset var(--shadow-2);
}

[data-theme^="vintage"] .note-content blockquote {
  border-left: var(--size-1) solid var(--theme-primary);
  background: var(--theme-surface-2);
  color: var(--theme-text-tertiary);
}

[data-theme^="vintage"] .back-nav a {
  background: var(--theme-surface);
  color: var(--theme-primary);
  border: 1px solid var(--theme-border-color);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .back-nav a:hover {
  background: var(--theme-primary);
  color: white;
}

/* ==================
   LINKS PAGE
   ================== */

[data-theme^="vintage"] .links-container h2 {
  color: var(--theme-text);
  border-bottom: 2px solid var(--theme-border-color);
}

[data-theme^="vintage"] .link-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  position: relative;
  overflow: hidden;
}

[data-theme^="vintage"] .link-card:hover {
  box-shadow: var(--shadow-4), 0 0 var(--size-5) var(--theme-glow);
  border-color: var(--theme-primary);
  transform: translateY(calc(-1 * var(--size-2)));
}

[data-theme^="vintage"] .link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--theme-glow), transparent);
  transition: left var(--ease-3) var(--speed-3);
}

[data-theme^="vintage"] .link-card:hover::before {
  left: 100%;
}

[data-theme^="vintage"] .link-card h3 {
  color: var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .link-card p {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .link-card a {
  color: var(--theme-primary);
  transition: color var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .link-card a:hover {
  color: var(--theme-primary-hover);
}

[data-theme^="vintage"] .site-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 var(--size-3) var(--theme-glow));
}

/* ==================
   GALLERY
   ================== */

[data-theme^="vintage"] .gallery-container {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  position: relative;
  z-index: 10;
}

[data-theme^="vintage"] .gallery-item {
  position: relative;
  z-index: 1;
}

[data-theme^="vintage"] .gallery-image,
[data-theme^="vintage"] .gallery-grid img {
  border: 2px solid var(--theme-border-subtle);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  background: var(--theme-surface-2);
  position: relative;
  z-index: 1;
  opacity: 1 !important;
}

[data-theme^="vintage"] .gallery-grid img:hover {
  box-shadow: var(--shadow-4), 0 0 var(--size-4) var(--theme-glow);
  transform: scale(1.02);
  border-color: var(--theme-primary);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ==================
   PROJECTS PAGE
   ================== */

[data-theme^="vintage"] .category-title {
  color: var(--theme-text);
  border-bottom: 2px solid var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .license-info,
[data-theme^="vintage"] .collection-info {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-left: var(--size-1) solid var(--theme-primary);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

[data-theme^="vintage"] .license-info {
  border-left-color: var(--theme-primary);
}

[data-theme^="vintage"] .collection-info {
  border-left-color: var(--theme-accent);
}

[data-theme^="vintage"] .usage-guide {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .usage-guide h2 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .guide-card {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .guide-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(calc(-1 * var(--size-1)));
}

[data-theme^="vintage"] .guide-card h3 {
  color: var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .faq {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .faq h2 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .faq-item {
  border-top: 1px solid var(--theme-border-subtle);
}

[data-theme^="vintage"] .faq-item h3 {
  color: var(--theme-primary);
}

[data-theme^="vintage"] .faq-item p {
  color: var(--theme-text-secondary);
}

/* ==================
   WHO WE BACK PAGE
   ================== */

[data-theme^="vintage"] .who-we-back {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-4);
}

[data-theme^="vintage"] .who-we-back h2 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .section-heading {
  color: var(--theme-text);
  border-bottom: 2px solid var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .partner-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .partner-card:hover {
  box-shadow: var(--shadow-4);
  border-color: var(--theme-primary);
  transform: translateY(calc(-1 * var(--size-1)));
}

[data-theme^="vintage"] .partner-card.featured {
  border: 2px solid var(--theme-primary);
  background: linear-gradient(135deg, var(--theme-surface), var(--theme-surface-2));
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .partner-card.featured:hover {
  box-shadow: var(--shadow-5), 0 0 var(--size-6) var(--theme-glow);
}

[data-theme^="vintage"] .partner-header h3 {
  color: var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .partner-type {
  color: var(--theme-text);
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-color);
}

[data-theme^="vintage"] .partner-description {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .venue-details,
[data-theme^="vintage"] .services {
  color: var(--theme-primary);
  background: var(--theme-surface-2);
  border-left-color: var(--theme-primary);
}

[data-theme^="vintage"] .partner-links {
  border-top: 1px solid var(--theme-border-subtle);
}

[data-theme^="vintage"] .partner-links a {
  color: var(--theme-primary);
  transition: color var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .partner-links a:hover {
  color: var(--theme-primary-hover);
}

[data-theme^="vintage"] .who-we-back-footer {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-color);
  box-shadow: var(--shadow-2);
}

[data-theme^="vintage"] .who-we-back-footer p {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .soundcloud-player {
  background: var(--theme-surface);
  border: 2px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

/* ==================
   COLLECTIVE PAGE
   ================== */

[data-theme^="vintage"] .collective-section h2 {
  color: var(--theme-text);
  border-bottom: 2px solid var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .release-card,
[data-theme^="vintage"] .video-card,
[data-theme^="vintage"] .member-card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
}

[data-theme^="vintage"] .release-card:hover,
[data-theme^="vintage"] .video-card:hover,
[data-theme^="vintage"] .member-card:hover {
  box-shadow: var(--shadow-4);
  border-color: var(--theme-primary);
  transform: translateY(calc(-1 * var(--size-1)));
}

[data-theme^="vintage"] .release-info h3,
[data-theme^="vintage"] .video-info h3,
[data-theme^="vintage"] .member-info h3 {
  color: var(--theme-primary);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .release-meta,
[data-theme^="vintage"] .video-meta,
[data-theme^="vintage"] .member-role {
  color: var(--theme-text-tertiary);
}

[data-theme^="vintage"] .member-bio {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .placeholder-artwork {
  background: var(--theme-surface-2);
  border: 2px dashed var(--theme-border-color);
}

[data-theme^="vintage"] .event-entry {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

[data-theme^="vintage"] .event-header h3 {
  color: var(--theme-text);
  font-family: var(--theme-font-primary);
}

[data-theme^="vintage"] .event-date {
  color: var(--theme-primary);
}

[data-theme^="vintage"] .event-description {
  color: var(--theme-text-secondary);
}

[data-theme^="vintage"] .photo-grid img {
  border: 2px solid var(--theme-border-subtle);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  transition: all var(--ease-3) var(--speed-2);
  position: relative;
  z-index: 1;
}

[data-theme^="vintage"] .photo-grid img:hover {
  box-shadow: var(--shadow-4);
  transform: scale(1.02);
}

/* ==================
   UTILITY CLASSES
   ================== */

[data-theme^="vintage"] .coming-soon {
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border-color);
  color: var(--theme-text-tertiary);
}

[data-theme^="vintage"] .hint {
  color: var(--theme-text-muted);
}

/* ==================
   ACCESSIBILITY & ANIMATIONS
   ================== */

/* Focus indicators for all interactive elements */
[data-theme^="vintage"] a:focus-visible,
[data-theme^="vintage"] button:focus-visible,
[data-theme^="vintage"] input:focus-visible,
[data-theme^="vintage"] textarea:focus-visible,
[data-theme^="vintage"] select:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: var(--size-1);
}

/* Remove outline for mouse users, keep for keyboard */
[data-theme^="vintage"] *:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [data-theme^="vintage"] *,
  [data-theme^="vintage"] *::before,
  [data-theme^="vintage"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Static backgrounds for reduced motion */
  [data-theme="vintage-light"] body::before {
    animation: none;
    transform: none;
  }
  
  [data-theme="vintage-dark"] body::before {
    animation: none;
    transform: none;
  }
  
  [data-theme="vintage-light"] body::after {
    animation: none;
    transform: none;
    filter: none;
    opacity: 0.3;
  }
  
  [data-theme="vintage-dark"] body::after {
    animation: none;
    transform: none;
    filter: none;
    opacity: 0.4;
  }
}

/* Smooth animations for users who prefer motion */
@media (prefers-reduced-motion: no-preference) {
  [data-theme^="vintage"] * {
    transition-timing-function: var(--ease-3);
    transition-duration: var(--speed-2);
  }
  
  /* Subtle film grain animation */
  [data-theme^="vintage"] body::after {
    animation: grain 8s steps(10) infinite;
  }
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [data-theme^="vintage"] {
    --theme-border-color: var(--theme-text);
    --theme-shadow: none;
  }
  
  [data-theme^="vintage"] body::after {
    display: none;
  }
}

/* ==================
   PRINT STYLES
   ================== */

@media print {
  [data-theme^="vintage"] {
    /* Use light theme colors for printing */
    --theme-bg: white;
    --theme-text: black;
    --theme-primary: #d97706;
  }
  
  /* Remove decorative elements */
  [data-theme^="vintage"] body::after,
  [data-theme^="vintage"] .film-grain,
  [data-theme^="vintage"] .header-peek-indicator,
  [data-theme^="vintage"] .theme-toggle,
  [data-theme^="vintage"] .hamburger-menu {
    display: none !important;
  }
  
  /* Simplify shadows for print */
  [data-theme^="vintage"] * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure links are visible */
  [data-theme^="vintage"] a {
    color: #d97706;
    text-decoration: underline;
  }
  
  /* Show URLs after links */
  [data-theme^="vintage"] a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Page breaks */
  [data-theme^="vintage"] h1,
  [data-theme^="vintage"] h2,
  [data-theme^="vintage"] h3 {
    page-break-after: avoid;
  }
  
  [data-theme^="vintage"] img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }
}

/* ==================
   SELECTION COLORS
   ================== */

[data-theme="vintage-light"] ::selection {
  background: var(--orange-8);
  color: white;
}

[data-theme="vintage-dark"] ::selection {
  background: var(--orange-6);
  color: var(--stone-12);
}

/* ==================
   SCROLLBAR STYLING
   ================== */

[data-theme="vintage-light"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="vintage-light"] ::-webkit-scrollbar-track {
  background: var(--sand-2);
  border-left: 1px solid var(--stone-6);
}

[data-theme="vintage-light"] ::-webkit-scrollbar-thumb {
  background: var(--stone-7);
  border: 2px solid var(--sand-2);
  border-radius: var(--radius-2);
}

[data-theme="vintage-light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--orange-8);
}

[data-theme="vintage-dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="vintage-dark"] ::-webkit-scrollbar-track {
  background: var(--stone-12);
  border-left: 1px solid var(--stone-9);
}

[data-theme="vintage-dark"] ::-webkit-scrollbar-thumb {
  background: var(--stone-9);
  border: 2px solid var(--stone-12);
  border-radius: var(--radius-2);
}

[data-theme="vintage-dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--orange-6);
}

/* Firefox scrollbar */
[data-theme="vintage-light"] * {
  scrollbar-color: var(--stone-7) var(--sand-2);
  scrollbar-width: thin;
}

[data-theme="vintage-dark"] * {
  scrollbar-color: var(--stone-9) var(--stone-12);
  scrollbar-width: thin;
}