/* ═══════════════════════════════════════════════════════════
   SACHSENBOARDERS — Custom Styles v2.0
   Custom Properties | Accessibility | Reduced Motion | Print
   ═══════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────── */
:root {
  --color-orange: #FF6B35;
  --color-orange-hover: #FF5722;
  --color-creme: #F9F6F0;
  --color-dark: #1A1A1A;
  --color-dark-soft: #2A2A2A;
  --color-white: #FFFFFF;
  --color-blue-surf: #2563EB;
  --color-green-bike: #16A34A;
  --color-sky-snow: #93C5FD;
  --font-display: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.12);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.2);
  --transition-fast: 150ms ease;
  --transition-smooth: 300ms ease;
  --transition-slow: 700ms ease;
}

/* ── Base ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Focus Visible (Accessibility) ─────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Screen Reader Only ────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip to Content ───────────────────────────────────── */
#skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--color-orange);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: top var(--transition-fast);
}
#skip-to-content:focus {
  top: 16px;
}

/* ── Arty Text Stroke ──────────────────────────────────── */
.border-text {
  -webkit-text-stroke: 2px var(--color-creme);
  color: transparent;
}

/* ── Blob Animation ────────────────────────────────────── */
@keyframes blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.blob-anim {
  animation: blob 10s infinite alternate;
}

/* ── Wave Animation ────────────────────────────────────── */
@keyframes wave-bob {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-15px) rotate(-5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.wave-anim {
  animation: wave-bob 4s ease-in-out infinite;
}

/* ── Button Pulse Micro-Animation ──────────────────────── */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(255,107,53,0); }
}
.btn-cta {
  animation: btn-pulse 2s infinite;
}

/* ── Card Hover Lift ───────────────────────────────────── */
.article-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  will-change: transform;
}
.article-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover);
}

/* ── GPU Compositing for Animated Elements ─────────────── */
.blob-anim,
.wave-anim {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Mobile Performance ───────────────────────────────── */
@media (max-width: 767px) {
  .blob-anim {
    animation-duration: 25s !important; /* Slow down on mobile */
  }
  .wave-anim {
    animation-duration: 8s !important;
  }
  /* Reduce filter complexity on mobile */
  .blur-3xl {
    --tw-blur: blur(40px); /* Reduced from 64px */
  }
  /* Prevent horizontal scroll from overflow-visible SVGs */
  .overflow-visible {
    max-width: 100vw;
  }
  /* Disable mix-blend-difference on mobile (destroys readability) */
  .mix-blend-difference {
    mix-blend-mode: normal;
  }
}

/* ── Stripe Pattern ────────────────────────────────────── */
.stripe-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-dark),
    var(--color-dark) 10px,
    var(--color-dark-soft) 10px,
    var(--color-dark-soft) 20px
  );
}

/* ── Images ────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Chat UI ───────────────────────────────────────────── */
.chat-container {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,107,53,0.2);
}
.chat-message.admin { border-left: 4px solid var(--color-orange); }
.chat-message.user  { border-left: 4px solid var(--color-dark); }

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .blob-anim,
  .wave-anim,
  .btn-cta {
    animation: none !important;
  }
}

/* ── Print Styles ──────────────────────────────────────── */
@media print {
  body {
    background: var(--color-white) !important;
    color: #000 !important;
  }
  nav,
  #mobile-menu,
  #skip-to-content,
  .chat-container,
  .blob-anim,
  .btn-cta,
  footer {
    display: none !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ── Selection ─────────────────────────────────────────── */
::selection {
  background: var(--color-orange);
  color: var(--color-white);
}
::-moz-selection {
  background: var(--color-orange);
  color: var(--color-white);
}