/* ==========================================================================
   === PUBLIC UI: ZINE CORE DESIGN SYSTEM & NOISE OVERLAY ===
   ========================================================================== */

@import "tailwindcss";

:root {
  --color-yellow: #fbbf24;
  --color-pink: #f43f5e;
  --color-purple: #a855f7;
  --color-cyan: #4cd7f6;
  --color-primary: #ffc174;
  --color-secondary: #4cd7f6;
  --color-tertiary: #ffbbbe;
  --color-paper: #f8fafc;
  --color-ink: #0f172a;
  --color-bg-dark: #0b1326;
  --color-surface: #0b1326;
  --color-surface-container: #171f33;
  --color-surface-high: #222a3d;

  --zine-font-marker: 'Permanent Marker', cursive;
  --zine-font-anton: 'Anton', sans-serif;
  --zine-font-sans: 'DM Sans', -apple-system, sans-serif;
  --zine-font-mono: 'JetBrains Mono', monospace;
}

/* Retro Zine Neo-Brutalist Utilities */
.duct-tape {
  background-color: #cbd5e1;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);
  clip-path: polygon(2% 0, 98% 2%, 100% 98%, 0 100%);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.brutal-shadow {
  box-shadow: 8px 8px 0px 0px #000000;
}

.brutal-shadow-sm {
  box-shadow: 4px 4px 0px 0px #000000;
}

.paper-tear {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 95% 100%, 90% calc(100% - 5px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 3px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 2px), 45% 100%, 40% calc(100% - 7px), 35% 100%, 30% calc(100% - 4px), 25% 100%, 20% calc(100% - 9px), 15% 100%, 10% calc(100% - 5px), 5% 100%, 0 calc(100% - 10px));
}

/* Noise & Grain Overlay */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Stop-Motion Keyframe Animations */
@keyframes shake-light {
  0% { transform: rotate(-2.5deg) translate(0, 0); }
  25% { transform: rotate(-2deg) translate(1px, -1px); }
  50% { transform: rotate(-3deg) translate(-1px, 1px); }
  75% { transform: rotate(-2.2deg) translate(0.5px, 0.5px); }
  100% { transform: rotate(-2.5deg) translate(0, 0); }
}

body {
  background-color: var(--color-bg-dark);
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
  color: #dae2fd;
  font-family: var(--zine-font-sans);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Torn Paper Edge Clip-Path Utilities */
.torn-edge-top {
  clip-path: polygon(0% 0%, 5% 4px, 10% 0%, 15% 5px, 20% 1px, 25% 6px, 30% 0%, 35% 5px, 40% 1px, 45% 6px, 50% 0%, 55% 5px, 60% 1px, 65% 6px, 70% 0%, 75% 5px, 80% 1px, 85% 6px, 90% 0%, 95% 4px, 100% 0%, 100% 100%, 0% 100%);
}

.torn-edge-bottom {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 96px, 90% 100%, 85% 95px, 80% 100%, 75% 95px, 70% 100%, 65% 95px, 60% 100%, 55% 95px, 50% 100%, 45% 95px, 40% 100%, 35% 95px, 30% 100%, 25% 95px, 20% 100%, 15% 95px, 10% 100%, 5% 96px, 0% 100%);
}

.torn-paper-card {
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
  border: 4px solid #000;
  box-shadow: 8px 8px 0 #000;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
  border: 2px solid #090d16;
}
::-webkit-scrollbar-thumb:hover {
  background: #fbbf24;
}

/* Responsive Grid & Layout Utilities */
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Multiline Text Truncation Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   === MODERN SKELETON SHIMMER UI EFFECT ===
   ========================================================================== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s infinite ease-in-out;
  border-radius: 4px;
  display: block;
}

.skeleton-shimmer-paper {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s infinite ease-in-out;
  border-radius: 4px;
  display: block;
}

.skeleton-card {
  background: #f8fafc;
  border: 4px solid #000;
  border-radius: 2px;
  padding: 16px;
  box-shadow: 8px 10px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}