:root {
  --ink: #034;
  --canvas: #fff;
  --gradient: linear-gradient(167deg, #eeffbe 23%, #22d7ff 116%);
  --transition-duration: 0.2s;
}

* {
  box-sizing: border-box;
}

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Onest", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.background {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow: hidden;
  overscroll-behavior: none;
  
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: calc(100vmax * sqrt(2));;
    height: calc(100vmax * sqrt(2));;
    transform: translate(-50%, -50%) rotate(var(--spin));
    background: var(--gradient);
    animation: spin 6s linear infinite;
  }
}

@keyframes spin {
  from { --spin: 0deg; }
  to { --spin: 360deg; }
}

.card {
  --card-padding: 1.5rem;
  position: fixed;
  inset: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    '.     logo'
    'bio   bio'
    'links links';
  max-height: 100%;
  padding: var(--card-padding);
  font-size: 0.875rem;
  gap: var(--card-padding);
  border-radius: 0.25rem;
  background: var(--canvas);
  overflow: auto;

  @media (width >= 30rem) and (height >= 45rem),
         (width >= 38rem)
  {
    position: relative;
    inset: auto;
    max-width: 24rem;
    margin: auto;
  }

  @media (height >= 24rem) {
    --card-padding: 2rem;
    font-size: 1rem;
  }

  @media (width >= 30rem) {

    @media (width >= 38rem) and (height < 45rem) {
      grid-template-rows: auto;
      grid-template-areas: 'logo bio links';
      max-width: none;
      aspect-ratio: 3.5 / 2;

      @media (height < 24rem) {
        aspect-ratio: auto;
      }
    }

    @media (height >= 45rem) {
      grid-template-columns: auto 1fr auto;
      grid-template-rows: 1fr auto;
      grid-template-areas:
        'logo ... links'
        'bio  bio bio';
      aspect-ratio: 2 / 3.5;
    }
  }
}

.logo {
  grid-area: logo;
  margin: 0;
  display: block;
}

.bio {
  grid-area: bio;
  align-self: end;
  display: grid;
  justify-items: start;
  align-items: end;
  gap: 0.75rem;
  line-height: 1.4;

  @media (width >= 30rem) and (height < 45rem) {
    align-self: start;
    max-width: 18rem;
    margin-top: 2rem;
  }

  p {
    margin: 0;
  }
}

.bio__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.link {
  position: relative;
  z-index: 0;
  display: inline-block;
  vertical-align: bottom;
  font-weight: 600;
  text-decoration: none;
  color: inherit;

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -0.1em -0.15em 0;
    background: var(--gradient);
    transform: scaleY(0.1);
    transform-origin: bottom;
    transition: transform var(--transition-duration) ease;
  }
}

.link:focus-visible,
.link:hover {

  &::after {
    transform: scaleY(1);
  }
}

.social {
  --icon-size: 1.5rem;
  --icon-padding: 1rem;
  --icon-total-size: calc(var(--icon-size) + var(--icon-padding) * 2);
  --dot-offset: 0%;
  grid-area: links;
  position: relative;
  z-index: 0;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  border-radius: 4rem;
  background: var(--ink);
  overflow: hidden;

  @media (height < 24rem) {
    --icon-padding: 0.75rem;
  }

  @media (width >= 30rem) and (height >= 45rem),
         (width >= 38rem) and (height < 45rem)    
  {
    flex-direction: column;
    border-radius: 0 0 4rem 4rem;
    margin-top: calc(var(--card-padding) * -1);
  }

  &:has(:is(:hover, :focus-visible)) .social__item:not(:is(:hover, :focus-visible)) { opacity: 0.4; }
  &:has(> :nth-child(1):is(:hover, :focus-visible)) { --dot-offset: 100%; }
  &:has(> :nth-child(2):is(:hover, :focus-visible)) { --dot-offset: 200%; }
  &:has(> :nth-child(3):is(:hover, :focus-visible)) { --dot-offset: 300%; }
  &:has(> :nth-child(4):is(:hover, :focus-visible)) { --dot-offset: 400%; }
  &:has(> :nth-child(5):is(:hover, :focus-visible)) { --dot-offset: 500%; }

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 100%;
    width: var(--icon-total-size);
    height: var(--icon-total-size);
    border-radius: var(--icon-total-size);
    background: var(--gradient);
    translate: var(--dot-offset) 0;
    scale: 0.9;
    rotate: var(--spin);
    transition: translate var(--transition-duration) ease;
    animation: spin 2s linear infinite;
  
    @media (width >= 30rem) and (height >= 45rem),
           (width >= 38rem) and (height < 45rem)    
    {
      top: auto;
      right: auto;
      bottom: 100%;
      left: 0;
      translate: 0 var(--dot-offset);
    }
  
  }
}

.social__item {
  display: grid;
  padding: var(--icon-padding);
}

.social__icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--canvas);
  transition: var(--transition-duration) ease;
  transition-property: color, opacity;

  .social__item:focus-visible &,
  .social__item:hover & {
    color: var(--ink);
  }
}