/* =============================================
   THEME 1: Editorial Elegance
   Sticky Section Layout + CSS Text Scroll Animation
   Minimalistisch, Serif, viel Weissraum, gedaempfte Farben
   ============================================= */

/* ── Theme Variables ── */
[data-theme="editorial"] {
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface2: #f5f3ef;
  --border: #e8e3d8;
  --border-light: #f0ece4;
  --accent: #b8952a;
  --accent-light: #d4af50;
  --accent-dark: #8a6e1c;
  --text: #1a1714;
  --text2: #3d3830;
  --muted: #8a8278;
  --muted-light: #b8b0a4;
}

/* ── Scroll-Driven Animations (Sticky Sections) ── */
[data-theme="editorial"] section[id] {
  scroll-snap-align: start;
}

/* Text reveal on scroll */
[data-theme="editorial"] .fade-in,
[data-theme="editorial"] .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="editorial"] .fade-in.visible,
[data-theme="editorial"] .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky hero text effect */
[data-theme="editorial"] .hero-content h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.06em;
}

/* Section dividers get elegant animation */
[data-theme="editorial"] .section-divider {
  width: 40px;
  height: 1px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="editorial"] .visible .section-divider,
[data-theme="editorial"] .fade-up.visible .section-divider {
  width: 64px;
}

/* Team cards: elegant hover */
[data-theme="editorial"] .team-card {
  border: 1px solid var(--border-light);
  background: var(--surface);
}

/* Contact section: light bg */
[data-theme="editorial"] #kontakt {
  background: var(--bg);
}

/* Portfolio cards: subtle border */
[data-theme="editorial"] #portfolio-grid a {
  border: 1px solid var(--border-light);
}

/* Nav: light sidebar */
[data-theme="editorial"] nav {
  background: rgba(250, 249, 247, 0.96);
  border-right: 1px solid var(--border-light);
}

/* Smooth text clip animation for headings */
[data-theme="editorial"] h2 em {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll-triggered line animation */
@keyframes editorial-line-grow {
  from { width: 0; }
  to { width: 64px; }
}