@import './custom-properties.css';

body {
  font-family: var(--ff-font-base);
  color: var(--ff-text-strong);
  line-height: 1.6;
  background: #050a13;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font-display);
  letter-spacing: -0.02em;
  color: #fff;
}

h1 { font-size: clamp(2.4rem, 2vw + 1.2rem, 3.4rem); }
h2 { font-size: clamp(2rem, 1.6vw + 1rem, 2.8rem); }
h3 { font-size: clamp(1.6rem, 1.4vw + 0.8rem, 2.2rem); }
h4 { font-size: clamp(1.4rem, 1.1vw + 0.6rem, 1.8rem); }
p, li { font-size: clamp(1rem, 0.6vw + 0.9rem, 1.2rem); }

.text-shadowed { text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
.text-gradient { background: var(--ff-grad-01); -webkit-background-clip: text; color: transparent; }
.text-glitch {
  position: relative;
  color: #fff;
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
}

.text-glitch::before { color: #ff7ad9; transform: translateX(-2px); animation: glitch 2s infinite; }
.text-glitch::after { color: #7cf5ff; transform: translateX(2px); animation: glitch 2s infinite reverse; }

.text-neon { color: #7cf5ff; text-shadow: 0 0 6px #7cf5ff, 0 0 18px #1b82ff; }
.text-3d { text-shadow: 2px 2px 0 #1b82ff, 4px 4px 0 rgba(0, 0, 0, 0.35); }

.letter-spacing-warmup { animation: spacing 1.8s ease forwards; }

.line-height-tight { line-height: 1.2; }
.line-height-cozy { line-height: 1.45; }
.line-height-relaxed { line-height: 1.75; }

@keyframes glitch {
  0% { clip: rect(24px, 9999px, 44px, 0); }
  20% { clip: rect(10px, 9999px, 16px, 0); }
  40% { clip: rect(70px, 9999px, 80px, 0); }
  60% { clip: rect(40px, 9999px, 60px, 0); }
  80% { clip: rect(12px, 9999px, 28px, 0); }
  100% { clip: rect(50px, 9999px, 70px, 0); }
}

@keyframes spacing {
  from { letter-spacing: -0.08em; }
  to { letter-spacing: 0.06em; }
}