/* CSS Variables from theme system (injected at runtime) */
/* See packages/shared/src/themes/ for theme definitions */

@keyframes drawPath {
  0% {
    stroke-dashoffset: 1600;
  }
  50% {
    stroke-dashoffset: 800;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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

:root {
  --transition: all 0.2s ease-in-out;
}

/* Base styles */
html,
body {
  font-family: var(--typography-font-family);
  color: var(--color-primary);
  background-color: var(--color-background);
  line-height: var(--typography-line-height-md);
  transition: var(--transition);
}

/* Container */
.container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl);
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition);
  font-weight: var(--typography-font-weight-semibold);
  display: inline-block;

  &:not(:has(img)) {
    border-bottom: 3px solid var(--color-link);
  }
}

a:hover {
  border-bottom-color: transparent;
}

/* Overview */
.overview {
  .content {
    display: inline-block;

    .entry {
      display: inline-block;

      &:not(:last-child):after {
        content: '•';
        color: var(--color-secondary);
        display: inline-block;
        margin: 0 var(--spacing-xs);
      }
    }

    .fluency {
      color: var(--color-secondary);
      margin-left: var(--spacing-xs);
    }
  }
}

/* Experience */
.experience {
  .content {
    .intro {
      display: flex;
      align-items: flex-start;
      flex-direction: row-reverse;
      gap: var(--spacing-sm);
    }

    .logo {
      width: 50px;
      height: 50px;
      border-radius: var(--border-radius-md);
      filter: grayscale(100%);
      mix-blend-mode: multiply;
      transition: var(--transition);

      &:hover {
        filter: none;
        mix-blend-mode: normal;
      }
    }

    .position-company {
      flex: 1;
    }

    .position {
      font-size: var(--typography-font-size-md);
      font-weight: var(--typography-font-weight-bold);
      margin-bottom: var(--spacing-xs);
    }

    .summary {
      color: var(--color-secondary);
      margin-left: var(--spacing-xs);

      &:not(:last-child):after {
        content: '•';
        color: var(--color-secondary);
        display: inline-block;
        margin: 0 var(--spacing-xs);
      }
    }

    .company {
      font-weight: 500;
      color: var(--color-accent);
      margin-bottom: var(--spacing-xs);
    }

    .highlights {
      list-style-position: outside;
      margin-left: var(--spacing-md);

      li {
        margin-bottom: var(--spacing-sm);
      }
    }
  }

  .has-position {
    margin-bottom: var(--spacing-lg);
  }
}

/* Skills */
.skills {
  .content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .entry {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-md);
    font-size: 0.85rem;
  }
}

/* Splash */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  min-width: 100vw;
  padding: var(--spacing-2xl) var(--spacing-sm);
  background: var(--color-accent) url('/kitchen.webp');
  background-size: cover;
  background-position: center;
  color: var(--color-light);
  letter-spacing: 0.2rem;
  text-align: center;

  /* Button */
  .button {
    padding: var(--spacing-sm) var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
    background-color: var(--color-accent);
    color: var(--color-light);
    border-radius: var(--border-radius-md);
    border-bottom: 0 none;
    border: 3px solid var(--color-accent);
    text-transform: uppercase;
    transition: var(--transition);
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: transparent;
      border: 3px solid var(--color-accent);
    }
  }

  /* SVG animation */
  .logo-wrapper {
    width: 100%;
    max-width: 230px;
    margin-bottom: var(--spacing-lg);
  }

  .anucreative {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: drawPath 4s ease-out infinite;
    mix-blend-mode: overlay;
  }
}