/* ── Vinilo Pintao' — Global Styles ── */

:root {
  --color-background: #0A0A0A;
  --color-foreground: #FAFAFA;
  --color-surface: #1A1A2E;
  --color-surface-light: #2A2A3E;
  --color-muted: #A1A1AA;
  --color-purple-deep: #5B21B6;
  --color-purple-mid: #7C3AED;
  --color-purple-light: #A78BFA;
  --color-pink-accent: #EC4899;
  --font-body: 'Space Grotesk', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-foreground);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }

/* ── Torn paper edges ── */
.torn-edge-top {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20'%3E%3Cpath d='M0 20 Q50 0 100 15 Q150 5 200 18 Q250 2 300 16 Q350 8 400 19 Q450 1 500 14 Q550 6 600 17 Q650 3 700 15 Q750 7 800 18 Q850 2 900 16 Q950 9 1000 19 Q1050 4 1100 14 Q1150 8 1200 20' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20'%3E%3Cpath d='M0 20 Q50 0 100 15 Q150 5 200 18 Q250 2 300 16 Q350 8 400 19 Q450 1 500 14 Q550 6 600 17 Q650 3 700 15 Q750 7 800 18 Q850 2 900 16 Q950 9 1000 19 Q1050 4 1100 14 Q1150 8 1200 20' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ── Scroll animations ── */
[data-animate] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animations-enabled [data-animate] {
  opacity: 0;
  transform: translateY(30px);
}
.animations-enabled [data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Stagger list ── */
.stagger-list > :nth-child(1) { animation-delay: 0.05s; }
.stagger-list > :nth-child(2) { animation-delay: 0.10s; }
.stagger-list > :nth-child(3) { animation-delay: 0.15s; }
.stagger-list > :nth-child(4) { animation-delay: 0.20s; }
.stagger-list > :nth-child(5) { animation-delay: 0.25s; }
.stagger-list > :nth-child(6) { animation-delay: 0.30s; }
.stagger-list > :nth-child(7) { animation-delay: 0.35s; }
.stagger-list > :nth-child(8) { animation-delay: 0.40s; }

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--color-purple-light);
  outline-offset: 2px;
}

/* ── Iframe skeleton shimmer ── */
.iframe-skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-light) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Glow ── */
.glow-purple { box-shadow: 0 0 60px rgba(91, 33, 182, 0.3); }

/* ── Noise overlay ── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ── 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-width: 0;
}