/* Eldov-Win Theme — v2.
 *
 * Eigener Look, getrennt vom Industrie-Glas-Theme der Schwester-Site
 * w-make.com. Hier: dunkel, monospace-Akzente, magenta-grüne Anklänge,
 * viel Hairline. Wer hier landet, soll sofort wissen: das ist die
 * Spielwiese, nicht die Auftragsarbeit.
 */

:root {
  /* Palette — bewusst kühler und tiefer als v1, damit AI-Bilder
   * (mit viel Schwarz-Anteil) sich ohne Filter einfügen. */
  --bg: #0a0a10;
  --bg-deep: #050508;
  --bg-glow: #11111a;
  --panel: #14141e;
  --panel-2: #1a1a26;
  --fg: #e7e7ee;
  --fg-dim: #b8b8c8;
  --muted: #6e6e85;
  --muted-2: #4a4a5c;
  --hairline: #232333;
  --hairline-2: #1d1d2a;
  --accent: #e84a8f;          /* Magenta */
  --accent-2: #39ff14;        /* Terminal-Grün */
  --accent-warm: #ffb86b;     /* Bernstein für Status */
  --accent-blue: #6cb8ff;     /* Selten — für Links/Info */
  --danger: #ff5c5c;

  /* Typografie */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  --font-serif: "Newsreader", ui-serif, Georgia, serif;

  /* Spacing & Layout */
  --max-w: 72rem;            /* 1152px */
  --max-w-narrow: 56rem;     /* 896px */
  --radius: 4px;
  --radius-lg: 10px;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@layer base {
  /* Schmaler Hairline-Scrollbar */
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 8px;
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--accent); }

  /* Selection */
  ::selection {
    background: color-mix(in oklab, var(--accent) 30%, transparent);
    color: var(--fg);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* ASCII-Box mit Hairline + Eck-Akzenten */
  .ascii-box {
    position: relative;
    border: 1px solid var(--hairline);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    padding: 1.5rem 1.5rem 1.25rem;
    transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
  }
  .ascii-box:hover {
    border-color: color-mix(in oklab, var(--accent) 50%, var(--hairline));
  }
  .ascii-box::before,
  .ascii-box::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--accent);
    pointer-events: none;
  }
  .ascii-box::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid;
    border-left: 1px solid;
  }
  .ascii-box::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid;
    border-right: 1px solid;
  }

  /* Status-Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .badge::before {
    content: "■";
    color: var(--muted);
    font-size: 0.55rem;
  }
  .badge--live::before { color: var(--accent-2); animation: pulse 2s ease-in-out infinite; }
  .badge--warm::before { color: var(--accent-warm); }
  .badge--muted::before { color: var(--muted); }
  .badge--accent::before { color: var(--accent); }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  /* Section-Heading mit Label und Hairline */
  .section-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .section-heading__label {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .section-heading__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Stack-Pill */
  .stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-dim);
    background: color-mix(in oklab, var(--panel) 80%, transparent);
    transition: all 180ms var(--ease-out);
  }
  .stack-pill:hover {
    border-color: var(--accent);
    color: var(--fg);
    background: color-mix(in oklab, var(--accent) 8%, var(--panel));
  }
  .stack-pill svg { width: 0.85rem; height: 0.85rem; opacity: 0.7; }

  /* Headline-Glitch */
  .headline-glitch {
    position: relative;
    display: inline-block;
  }
  .headline-glitch::before,
  .headline-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .headline-glitch::before {
    color: var(--accent);
    transform: translate(-2px, 0);
    mix-blend-mode: screen;
    opacity: 0.55;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    animation: glitch-x 4s steps(2) infinite;
  }
  .headline-glitch::after {
    color: var(--accent-2);
    transform: translate(2px, 0);
    mix-blend-mode: screen;
    opacity: 0.55;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    animation: glitch-x 4s steps(2) infinite reverse;
  }

  @keyframes glitch-x {
    0%, 95%, 100% { transform: translate(0, 0); }
    96% { transform: translate(-3px, 1px); }
    97% { transform: translate(2px, -1px); }
    98% { transform: translate(-2px, 0); }
    99% { transform: translate(3px, 1px); }
  }

  /* Tilt-Card — leichter 3D-Hover */
  .tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
    transition: transform 380ms var(--ease-out), border-color 220ms var(--ease-out);
  }
  .tilt-card:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(8px);
  }
  .tilt-card .tilt-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in oklab, var(--accent) 18%, transparent) 0%,
      transparent 60%);
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
  }
  .tilt-card:hover .tilt-shine { opacity: 1; }

  /* Marquee-Tag-Liste */
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 180ms var(--ease-out);
    cursor: pointer;
  }
  .tag:hover { color: var(--fg); border-color: var(--hairline); }
  .tag--active { color: var(--accent); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }

  /* Cursor-Blink */
  @keyframes blink {
    50% { opacity: 0; }
  }
  .cursor-blink { animation: blink 1.05s steps(2) infinite; }

  /* Type-In Animation */
  @keyframes typeIn {
    from { width: 0; }
    to { width: 100%; }
  }
  .type-in { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent); animation: typeIn 1.6s steps(40, end) forwards, blink 1s steps(2) 1.6s forwards; }

  /* Scroll-Progress-Bar */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: var(--scroll, 0%);
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    z-index: 100;
    transition: width 80ms linear;
  }

  /* Hero-Image als Background mit Tilt-Pointer */
  .hero-bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    opacity: var(--hero-opacity, 0.16);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 0%, transparent 75%);
    pointer-events: none;
  }

  /* Hero-Banner — full-bleed oben */
  .hero-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
  }

  /* Glow-Text */
  .glow-text {
    text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 40%, transparent);
  }
}
