/* ============================================================
   mko.run — stylesheet
   Clean, typographic. No framework. No build step.
   Standards: CLAUDE.md
   ============================================================ */


/* --- Fonts — outside @layer (browser requirement) ---------- */

@font-face {
  font-family: 'Poppins';
  src: url('../webfonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../webfonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../webfonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../webfonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../webfonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* --- Layer order — later = higher priority ----------------- */
/* a11y is last: overrides everything without !important       */

@layer reset, base, components, a11y;


/* ============================================================
   LAYER: reset
   ============================================================ */

@layer reset {

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

  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}


/* ============================================================
   LAYER: base
   ============================================================ */

@layer base {

  :root {
    color-scheme: light dark; /* aktiviert light-dark() in allen Properties */

    --c-accent: #ffe7a3;
    --c-accent-2: #f74239;

    --c-bg: #2f1c1c;
    --c-text: #ededea;
    --c-muted: #a89a8a;
    --c-link: #ededea;

    --f-sans: 'Poppins', system-ui, -apple-system, sans-serif;

    --fs-handle: 0.75rem;
    --fs-name: clamp(2.25rem, 6vw, 4rem);
    --fs-setup: clamp(1rem, 2.4vw, 1.3rem);
    --fs-punch: clamp(1.1rem, 2.75vw, 1.5rem);
    --fs-links: 0.8rem;

    --sp-xs: 0.375rem;
    --sp-s: 0.75rem;
    --sp-m: 1.5rem;
    --sp-l: 3rem;
    --sp-xl: 5rem;

    --max-w: 680px;
    --pad-x: clamp(1.5rem, 6vw, 3rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --c-bg: #1e1010;
      --c-text: #ededea;
      --c-muted: #8a7a6a;
      --c-link: #ededea;
    }
  }

  body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-sans);
    font-weight: 400;
    line-height: 1.5;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* stack main + footer vertically */
    align-items: center;
    justify-content: center;
    padding: var(--sp-l) var(--pad-x) 0;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  a {
    color: inherit;
  }
}


/* ============================================================
   LAYER: components
   ============================================================ */

@layer components {

  /* --- Video Overlay --------------------------------------- */
  /* ::before auf body — kein extra HTML-Element nötig.        */
  /* light-dark() wählt automatisch je nach prefers-color-     */
  /* scheme den ersten (light) oder zweiten (dark) Wert.       */

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2; /* über Video (-3), unter Canvas (-1) */
    background: light-dark(
      rgba(47, 28, 28, 0.75),  /* light: passend zu #2f1c1c */
      rgba(30, 16, 16, 0.85)   /* dark:  passend zu #1e1010 */
    );
    pointer-events: none;
  }


  /* --- Canvas --------------------------------------------- */

  #canvas {
    position: fixed;
    inset: 0;
    z-index: -1; /* über Overlay (-2), unter Content (auto) */
    pointer-events: none;
    opacity: 0.06;
  }


  /* --- Video ---------------------------------------------- */

  .video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3; /* unterste Hintergrundebene */
  }


  /* --- Layout ---------------------------------------------- */

  @scope (.layout) {
    :scope {
      width: 100%;
      max-width: var(--max-w);
    }
  }


  /* --- Card ------------------------------------------------ */
  /* @scope: .handle, .name, .link etc. are scoped to .card.   */
  /* Short, readable names — no BEM prefix needed.             */

  @scope (.card) {
    :scope {
      width: 100%;
      /* fill layout width up to max-w */
      display: flex;
      flex-direction: column;
      gap: var(--sp-l);
    }

    .identity {
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
    }

    .handle {
      display: block;
      font-size: var(--fs-handle);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-accent);
      user-select: none;
    }

    .name {
      font-size: var(--fs-name);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.08;

      /* 1.12em is relative to the h1's own font-size, so it scales with clamp() */
      .initial {
        font-size: 1.12em;
      }
    }

    .tagline-row {
      display: flex;
      align-items: center;
      /* logo vertically centered against the two tagline lines */
      gap: var(--sp-m);
    }

    .logo {
      flex: 0 0 auto;
      width: clamp(80px, 15vw, 112px);
      height: auto;
    }

    .tagline {
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
      padding-inline-start: var(--sp-m);
      border-inline-start: 2px solid var(--c-accent);
    }

    .setup {
      display: block;
      font-size: var(--fs-setup);
      font-weight: 300;
      color: var(--c-muted);
      line-height: 1.5;
    }

    .punch {
      display: block;
      font-size: var(--fs-punch);
      font-weight: 600;
      line-height: 1.4;
    }

    .links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-s) var(--sp-m);
    }

    .link {
      font-size: var(--fs-links);
      font-weight: 400;
      letter-spacing: 0.04em;
      text-decoration: none;
      color: var(--c-link);
      position: relative;
      padding-block-end: 2px;

      &::after {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        background-color: var(--c-accent);
        transition: width 0.2s ease;
      }

      &:hover,
      &:focus-visible {
        color: var(--c-accent);
        outline: none;

        &::after {
          width: 100%;
        }
      }

      &:focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 3px;
        border-radius: 1px;
      }
    }
  }


  /* --- Responsive ----------------------------------------- */

  @media (max-width: 640px) {
    /* layout is always column — no override needed */

    @scope (.card) {
      :scope {
        gap: var(--sp-m);
      }
    }
  }


  /* --- Imprint --------------------------------------------- */

  @scope (.imprint) {
    :scope {
      width: 100%;
      max-width: var(--max-w);
      margin-inline: auto;
      padding: var(--sp-l) 0 var(--sp-m);
      border-block-start: 1px solid color-mix(in srgb, var(--c-muted) 25%, transparent);
      font-size: 0.75rem;
      color: var(--c-muted);
      font-style: normal;
      /* override <address> default italic */
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-s) var(--sp-l);
    }

    address {
      font-style: normal;
      line-height: 1.7;
    }

    .imprint-contact {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--sp-s);
      align-content: start;
      line-height: 1.7;
    }

    dt {
      color: var(--c-muted);
      opacity: 0.7;
    }

    a {
      color: inherit;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        color: var(--c-accent);
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
        border-radius: 1px;
      }
    }
  }

}


/* ============================================================
   LAYER: a11y — highest priority, no !important needed
   ============================================================ */

@layer a11y {
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
    }

    /* autoplay-Video und Canvas ausblenden */
    .video,
    #canvas {
      display: none;
    }
  }
}