/* Copyright (c) 2024 by Ryan Mulligan (https://codepen.io/hexagoncircle/pen/KwPpdBZ) */
:root {
    --space: 1rem;
    --bg: #09090b;
    --fg: #e3e3e3;
    --surface-1: #101012;
    --surface-2: #27272a;
    --surface-3: #52525b;
    --ease-out: cubic-bezier(0.5, 1, 0.89, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  }
  
  * {
    box-sizing: border-box;
  }
  
  height,
  body {
    height: 100%;
  }
  
  body {
    display: grid;
    color: var(--fg);
    background: var(--bg);
    padding: var(--space);
    min-height: 100vh;
  }
  
  main {
    display: grid;
    grid-template-columns: repeat(var(--count, 1), 1fr);
    gap: var(--space);
    margin: auto;
    inline-size: min(var(--max, 15rem), 100%);
  
    @media (min-width: 25rem) {
      --count: 2;
      --max: 30rem;
    }
  
    @media (min-width: 45rem) {
      --count: 4;
      --max: 60rem;
    }
  }
  
  .card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-areas: "card";
    place-items: center;
    aspect-ratio: 4/5;
    border: 1px solid var(--surface-2);
    isolation: isolate;
    transition: border-color 200ms var(--ease-out);
    user-select: none;
  
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at bottom left,
        transparent 55%,
        var(--surface-1)
      );
      pointer-events: none;
      box-shadow: var(--bg) -0.5cqi 0.5cqi 2.5cqi inset;
      transition: opacity 900ms var(--ease-out);
    }
  
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      aspect-ratio: 1;
      background: radial-gradient(circle, var(--bg), transparent 65%);
      opacity: 0;
      transition: opacity 800ms var(--ease-out);
    }
  
    > * {
      grid-area: card;
    }
  
    svg {
      position: relative;
      z-index: 1;
      width: 30%;
      height: auto;
      color: var(--surface-3);
      transition: 300ms var(--ease-out);
      transition-property: color, scale;
    }
  
    button {
      opacity: 0;
    }
  
    &:focus-within {
      outline: 5px auto Highlight;
      outline: 5px auto -webkit-focus-ring-color;
    }
  
    &:where(:hover, :focus-within) {
      border-color: var(--active-color, var(--fg));
      transition: border-color 800ms var(--ease-in-out);
    }
  
    &:where(:hover, :focus-within) svg {
      color: var(--active-color, var(--fg));
      scale: 1.1;
      transition: 300ms var(--ease-in-out);
    }
  
    &:where(:hover, :focus-within)::before {
      opacity: 0;
    }
  
    &:where(:hover, :focus-within)::after {
      opacity: 1;
    }
  }