@layer base, tokens, animations,  components, utilities;
@layer tokens {
  @font-face {
    font-family: Troubleside;
    src: url("https://cdn.jsdelivr.net/gh/chytanka/chytanka.github.io/src/assets/fonts/Troubleside.ttf");
    font-display: swap;
  }
  :root {
    --ratio: 257 / 364;
    --t: 0.133333334s;
    --min-card-width: 192px;
    --accent: oklch(from #ffd60a l c h);
    --surface: oklch(from #166496 0.12 min(c, 0.0512) h);
    --avarage-l: 0.48;
    --avarage-l-2: 0.36;
    --avarage-base: oklch(from #ffd60a var(--avarage-l) 0.0192 h);
    --text: white;
    --radius: 0.5rem;
    --border-size: 0.25rem;
    background: var(--surface);
    color: var(--text);
    font-size: clamp(0.875rem, 0.8214285714rem + 0.2380952381vw, 1rem) !important;
    line-height: 1.3;
    font-family: Arial, sans-serif;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --avarage-l: 0.72;
      --avarage-l-2: 0.6;
      --accent: oklch(from #166496 l c h);
      --surface: oklch(from #ffd60a 1 min(c, 0.0256) h);
      --avarage-base: oklch(from #ffd60a 0.48 0.0192 h);
      --text: black;
    }
  }
  @property --item-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
  @property --item-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
}
@layer animations {
  @-webkit-keyframes shrink-top {
    0% {
      --item-scale: 0.5;
      --item-angle: -60deg;
      transform-origin: top;
    }
  }
  @keyframes shrink-top {
    0% {
      --item-scale: 0.5;
      --item-angle: -60deg;
      transform-origin: top;
    }
  }
  @-webkit-keyframes shrink-bottom {
    0% {
      --item-scale: 0.5;
      --item-angle: 60deg;
      transform-origin: bottom;
    }
  }
  @keyframes shrink-bottom {
    0% {
      --item-scale: 0.5;
      --item-angle: 60deg;
      transform-origin: bottom;
    }
  }
}
@layer base {
  body,
figure {
    margin: 0;
  }

  img {
    width: 100%;
    height: auto;
  }

  *,
*::before,
*::after {
    box-sizing: border-box;
  }
}
@layer components {
  h1 {
    color: var(--accent);
    font-family: Troubleside;
    margin: 1rem 0 0;
  }

  main {
    padding: 2rem;
  }

  section {
    margin-bottom: 2rem;
    position: relative;
    perspective: 4000px;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));
  }
  section header {
    grid-column: 1/-1;
  }

  article {
    --deg: 0.8deg;
    --y: 0;
    --avarage: oklch(from var(--avarage-color) var(--avarage-l) 0.0192 h);
    --shadow-color: oklch(
    	from var(--avarage, var(--avarage-base)) var(--avarage-l-2) c h
    );
    --shadow-distance: var(--border-size);
    border: var(--border-size) solid var(--avarage, var(--avarage-base));
    border-radius: var(--radius);
    background-color: var(--avarage, var(--avarage-base));
    background-image: radial-gradient(oklch(from var(--shadow-color) l c h) 1px, transparent 0px);
    background-repeat: repeat;
    background-size: 7px 7px;
    background-position: center;
    box-shadow: 1px 1px var(--surface), var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
    opacity: min(var(--item-scale), 0.8);
    transform: rotate(var(--deg)) translateY(var(--y)) scale(var(--item-scale)) rotateX(var(--item-angle));
    transition: all var(--t) ease-in-out;
    will-change: transform;
    transform-style: preserve-3d;
  }
  article:hover {
    --deg: 0 !important;
    --y: -1.25ch;
    --shadow-distance: calc(var(--border-size) * 2);
    opacity: 1;
  }

  @supports (animation-timeline: view()) {
    article {
      animation: shrink-top both ease-in-out, shrink-bottom both ease-in-out reverse;
      animation-timeline: view(block);
      animation-range: entry, exit;
    }
  }
  figure img {
    aspect-ratio: var(--ratio);
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: calc(var(--radius) - var(--border-size));
  }

  figure figcaption {
    font-family: Troubleside;
    margin: 1ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-word;
    line-height: 1;
  }
}
@layer utilities {
  article:nth-child(2n) {
    --deg: -0.8deg;
  }

  article:nth-child(2n+1) {
    --deg: -0.6deg;
  }

  article:nth-child(3n) {
    --deg: 0.6deg;
  }

  article:nth-child(4n+2) {
    --deg: -0.75deg;
  }

  article:nth-child(5n) {
    --deg: 0.25deg;
  }

  article:nth-child(6n+3) {
    --deg: -0.3deg;
  }

  article:nth-child(7n) {
    --deg: 0.9deg;
  }

  /* Glow effect for recently updated files */
  article.recently-updated {
    position: relative;
    box-shadow: 
      0 0 0 3px var(--accent),
      0 0 20px rgba(255, 214, 10, 0.4),
      1px 1px var(--surface), 
      var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
    animation: edge-pulse 2s ease-in-out infinite;
  }

  /* Sparkle badge for new content */
  article.recently-updated::after {
    content: '✨';
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 1.5rem;
    z-index: 10;
    animation: sparkle-spin 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    pointer-events: none;
  }

  @media (max-width: 768px) {
    article.recently-updated::after {
      font-size: 1.25rem;
      top: -8px;
      right: -8px;
    }
  }

  @keyframes edge-pulse {
    0%, 100% {
      box-shadow: 
        0 0 0 3px var(--accent),
        0 0 20px rgba(255, 214, 10, 0.4),
        1px 1px var(--surface), 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
    }
    50% {
      box-shadow: 
        0 0 0 3px var(--accent),
        0 0 30px rgba(255, 214, 10, 0.6),
        1px 1px var(--surface), 
        var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
    }
  }

  @keyframes sparkle-spin {
    0%, 100% {
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(-10deg) scale(1.1);
    }
    50% {
      transform: rotate(10deg) scale(1);
    }
    75% {
      transform: rotate(-10deg) scale(1.1);
    }
  }
}