@layer reset, base, layout, components, motion;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: dark;
    font-family:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    line-height: 1.5;
    text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  body,
  h1,
  p {
    margin: 0;
  }

  body {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    overflow-x: hidden;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

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

@layer base {
  :root {
    --page-bg: oklch(0.145 0.036 265);
    --surface: oklch(0.205 0.038 265 / 0.72);
    --surface-strong: oklch(0.245 0.045 265 / 0.86);
    --surface-hover: oklch(0.285 0.06 265 / 0.92);
    --border: oklch(0.72 0.12 245 / 0.24);
    --border-strong: oklch(0.78 0.16 230 / 0.42);
    --text: oklch(0.965 0.012 250);
    --muted: oklch(0.77 0.035 250);
    --accent: oklch(0.76 0.16 210);
    --accent-strong: oklch(0.82 0.18 180);
    --shadow: 0 1.25rem 4rem oklch(0.08 0.03 265 / 0.42);
    --ring: oklch(0.84 0.18 185);
    --radius-large: 2rem;
    --radius-medium: 1.25rem;
    --content-size: min(100% - 2rem, 42rem);
    --avatar-size: clamp(5.5rem, 19vi, 7.25rem);
  }

  body {
    min-block-size: 100svb;
    color: var(--text);
    background:
      radial-gradient(
        circle at 20% 10%,
        oklch(0.62 0.19 245 / 0.26),
        transparent 28rem
      ),
      radial-gradient(
        circle at 80% 0%,
        oklch(0.77 0.18 165 / 0.22),
        transparent 25rem
      ),
      linear-gradient(
        145deg,
        oklch(0.11 0.04 270),
        var(--page-bg) 48%,
        oklch(0.13 0.045 230)
      );
  }

  body::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image:
      linear-gradient(oklch(1 0 0 / 0.035) 0.0625rem, transparent 0.0625rem),
      linear-gradient(90deg, oklch(1 0 0 / 0.035) 0.0625rem, transparent 0.0625rem);
    background-size: 3rem 3rem;
    mask-image: radial-gradient(circle at center, black, transparent 72%);
  }

  :focus-visible {
    outline: 0.1875rem solid var(--ring);
    outline-offset: 0.25rem;
  }
}

@layer layout {
  main {
    display: grid;
    min-block-size: 100svb;
    place-items: center;
    padding-inline: 1rem;
  }

  section {
    position: relative;
    isolation: isolate;
    inline-size: var(--content-size);
    padding-block: clamp(1.5rem, 5vb, 2.5rem);
    padding-inline: clamp(1rem, 4vi, 2rem);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-large);
    background:
      linear-gradient(180deg, oklch(1 0 0 / 0.08), transparent),
      var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(1.35rem);
  }

  section::before {
    position: absolute;
    inset-block-start: -0.0625rem;
    inset-inline: 14%;
    block-size: 0.0625rem;
    content: "";
    background: linear-gradient(
      90deg,
      transparent,
      var(--accent),
      var(--accent-strong),
      transparent
    );
  }

  header {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    text-align: center;
  }

  nav[aria-label="Personal links"] {
    display: grid;
    gap: 0.9rem;
    margin-block-start: clamp(1.5rem, 4vb, 2.25rem);
  }

  nav[aria-label="Social profiles"] {
    display: flex;
    justify-content: center;
    margin-block-start: 0.35rem;
  }
}

@layer components {
  header > a:first-child {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    transform: translateY(-200%);
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 999rem;
    background: var(--text);
    color: var(--page-bg);
    font-weight: 800;
  }

  header > a:first-child:focus-visible {
    transform: translateY(0);
  }

  header img {
    inline-size: var(--avatar-size);
    aspect-ratio: 1;
    border: 0.1875rem solid oklch(1 0 0 / 0.82);
    border-radius: 999rem;
    object-fit: cover;
    box-shadow:
      0 0 0 0.5rem oklch(0.78 0.16 220 / 0.14),
      0 0 4rem oklch(0.78 0.16 220 / 0.32);
  }

  header p:first-of-type {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.35rem;
    padding-block: 0.35rem;
    padding-inline: 0.75rem;
    border: 0.0625rem solid var(--border);
    border-radius: 999rem;
    background: oklch(1 0 0 / 0.055);
    color: var(--accent-strong);
    font-size: clamp(0.75rem, 2.4vi, 0.875rem);
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  h1 {
    font-size: clamp(2rem, 9vi, 4rem);
    line-height: 0.95;
    letter-spacing: -0.075em;
    text-wrap: balance;
  }

  header p:last-of-type {
    color: var(--muted);
    font-size: clamp(1rem, 3vi, 1.125rem);
    font-weight: 650;
  }

  nav[aria-label="Social profiles"] a {
    display: inline-grid;
    inline-size: 2.9rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0.0625rem solid var(--border);
    border-radius: 999rem;
    background: var(--surface-strong);
    color: var(--text);
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease,
      transform 180ms ease;
  }

  nav[aria-label="Social profiles"] a:is(:hover, :focus-visible) {
    border-color: var(--border-strong);
    background: var(--accent);
    color: oklch(0.12 0.04 250);
    transform: translateY(-0.125rem);
  }

  svg {
    inline-size: 1.35rem;
    aspect-ratio: 1;
    fill: currentColor;
  }

  nav[aria-label="Personal links"] a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-block-size: 5rem;
    overflow: hidden;
    padding-block: 1rem;
    padding-inline: 1rem;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-medium);
    background:
      linear-gradient(135deg, oklch(1 0 0 / 0.07), transparent 60%),
      var(--surface-strong);
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  nav[aria-label="Personal links"] a::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0.25rem;
    content: "";
    background: linear-gradient(var(--accent), var(--accent-strong));
    opacity: 0;
    transition: opacity 180ms ease;
  }

  nav[aria-label="Personal links"] a:is(:hover, :focus-visible) {
    border-color: var(--border-strong);
    background:
      linear-gradient(135deg, oklch(1 0 0 / 0.1), transparent 60%),
      var(--surface-hover);
    box-shadow: 0 1rem 2.5rem oklch(0.08 0.035 265 / 0.34);
    transform: translateY(-0.1875rem);
  }

  nav[aria-label="Personal links"] a:is(:hover, :focus-visible)::before {
    opacity: 1;
  }

  nav[aria-label="Personal links"] a > span:first-child {
    display: inline-grid;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0.0625rem solid var(--border);
    border-radius: 1rem;
    background: oklch(1 0 0 / 0.06);
    font-size: 1.25rem;
  }

  nav[aria-label="Personal links"] a > span:nth-child(2) {
    display: grid;
    gap: 0.15rem;
    text-align: start;
  }

  strong {
    font-size: clamp(1rem, 3vi, 1.125rem);
    line-height: 1.2;
  }

  small {
    color: var(--muted);
    font-size: clamp(0.82rem, 2.5vi, 0.92rem);
    font-weight: 650;
  }

  nav[aria-label="Personal links"] a > span:last-child {
    color: var(--accent-strong);
    font-size: 1.2rem;
    font-weight: 900;
    transition: transform 180ms ease;
  }

  nav[aria-label="Personal links"] a:is(:hover, :focus-visible) > span:last-child {
    transform: translate(0.15rem, -0.15rem);
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    section {
      animation: enter 520ms ease both;
    }

    @keyframes enter {
      from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }

  @media (max-width: 34rem) {
    section {
      padding-inline: 0.9rem;
    }

    nav[aria-label="Personal links"] a {
      gap: 0.75rem;
      min-block-size: 4.65rem;
    }

    nav[aria-label="Personal links"] a > span:first-child {
      inline-size: 2.45rem;
      border-radius: 0.85rem;
    }
  }
}