/* ═══════════════════════════════════════════════
   SkillExplorer – style.css
   Lokale Fonts, Theme-Farben, Animationen
   (Tailwind CDN übernimmt den Rest)
   ═══════════════════════════════════════════════ */

/* ── Font: Inter (lokal, DSGVO-konform) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

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

/* ── Sprach-Toggle ── */
[data-lang="de"] .lang-en { display: none !important; }
[data-lang="en"] .lang-de { display: none !important; }

/* ── Theme-Farben (Tailwind-Erweiterungen) ── */
.text-apple-blue              { color: #FF6B00; }
.bg-apple-blue                { background-color: #FF6B00; }
.hover\:bg-apple-blue-dark:hover { background-color: #E05E00; }

/* ── Responsive Display-Schriftgrößen ── */
.display-xl {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.display-lg {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.display-md {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ══ NEUE MODERNE STYLES ══ */

/* ── Gradient-Text (Orange → Amber) ── */
.gradient-orange {
  background: linear-gradient(135deg, #FF6B00 0%, #FF9500 60%, #FFBD00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero Glow-Hintergrund ── */
.hero-bg {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,
      rgba(255, 107, 0, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 80% 60%,
      rgba(255, 149, 0, 0.04) 0%, transparent 55%);
}

/* ── macOS App-Schatten ── */
.app-shadow {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 16px rgba(0,0,0,0.08),
    0 24px 48px rgba(0,0,0,0.12),
    0 48px 96px rgba(0,0,0,0.1);
}

/* ── Slider ── */
.slider-track {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Feature-Cards ── */
.feature-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6B00, #FF9500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 3px 3px 0 0;
}

.feature-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.feature-card:hover::after {
  transform: scaleX(1);
}

/* ── Buttons mit Glow ── */
.btn-glow {
  transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}
.btn-glow:hover {
  box-shadow: 0 6px 28px rgba(255, 107, 0, 0.38);
  transform: translateY(-1px);
}
.btn-glow:active {
  transform: translateY(0);
}

/* ── Section-Label mit Akzentlinie ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #FF6B00, #FF9500);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Fade-up Scroll-Animation ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
}

.fade-up.is-visible {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.2s; }
.fade-up:nth-child(4) { animation-delay: 0.3s; }
.fade-up:nth-child(5) { animation-delay: 0.4s; }

/* ── Badge Pill ── */
.badge-pill {
  background: rgba(255, 107, 0, 0.08);
  border: 1px solid rgba(255, 107, 0, 0.2);
  color: #CC5500;
}

/* ── Nav-Link Hover-Underline ── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: #FF6B00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
}