/* The 2015 bicycle in 2026 CSS: no Stylus, no vendor prefixes, no hover-only.
   It rides on hover, on keyboard focus and on tap. Same geometry as 2015. */

@font-face {
  font-family: Limelight;
  src: url("../fonts/Limelight-latin.woff2") format("woff2");
  font-display: swap;
}

/* A typed property can be animated: one keyframe list drives the glow. */
@property --neon {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.bike {
  --frame: oklch(0.64 0.26 29);
  --rim: oklch(0.5 0.27 315);
  --steel: oklch(0.82 0 0);

  position: relative;
  inline-size: 450px;
  block-size: 484px;
  overflow: hidden;
  background: url("../2015/bicycle/images/desert.jpg");
  filter: grayscale(1);
  transition: filter 1s;
  animation: road 3.5s linear infinite paused;
  outline: none;

  & :is(.tube, .saddle, .stem, .bars, .wheel, .title) {
    position: absolute;
  }

  /* Frame tubes: one rule, each tube sets only where it goes. */
  & .tube {
    block-size: 10px;
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    inline-size: var(--length);
    rotate: var(--angle, 0deg);
    background: var(--frame);
    border-radius: 5px;
  }
  & .top       { --x: 104px; --y: 267px; --length: 229px; --angle: -12deg; transform-origin: right; }
  & .down      { --x: 165px; --y: 325px; --length: 170px; --angle: -40deg; }
  & .seat-tube { --x: 72px;  --y: 335px; --length: 131px; --angle: 41deg; }
  & .stay      { --x: 50px;  --y: 336px; --length: 99px;  --angle: -101deg; block-size: 6px; }
  & .chain     { --x: 104px; --y: 378px; --length: 85px; }
  & .fork      { --x: 273px; --y: 324px; --length: 118px; --angle: 74deg; }

  & .saddle {
    inset: 287px auto auto 76px;
    inline-size: 30px;
    block-size: 25px;
    background: black;
    border-radius: 20px;

    &::after {
      content: "";
      position: absolute;
      inset: 0 auto auto 20px;
      inline-size: 40px;
      block-size: 15px;
      background: inherit;
      border-end-end-radius: 15px;
    }
  }

  & .stem {
    inset: 262px auto auto 319px;
    inline-size: 10px;
    block-size: 10px;
    background: var(--steel);
  }
  & .bars {
    inset: 257px auto auto 319px;
    inline-size: 50px;
    block-size: 10px;
    rotate: -20deg;
    transform-origin: left;
    background: linear-gradient(to right, var(--steel) 50%, black 50%);
    border-radius: 20px;
  }

  & .wheel {
    inset-block-start: 314px;
    inline-size: 140px;
    aspect-ratio: 1;
    border: 10px solid black;
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px var(--rim);
    /* The hub and six spokes are gradients, not six elements:
       each line through the centre makes two spokes. */
    --spoke: transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0;
    background:
      radial-gradient(circle, black 5px, transparent 5.5px),
      linear-gradient(0deg, var(--spoke)),
      linear-gradient(60deg, var(--spoke)),
      linear-gradient(120deg, var(--spoke));
    animation: spin 1s linear infinite paused;
  }
  & .back  { inset-inline-start: 35px; }
  & .front { inset-inline-start: 278px; }

  & .title {
    inset: 0 0 auto;
    box-sizing: border-box;
    block-size: 111px;
    margin: 0;
    padding-block-start: 30px;
    font: 2rem/1.2 Limelight, sans-serif;
    text-align: center;
    color: black;
    rotate: 3deg;
    transform-origin: left;
    transition: color 0.1s, rotate 0.3s, background-color 0.3s;
  }

  &:is(:hover, :focus) {
    filter: none;
    animation-play-state: running;

    & .wheel {
      animation-play-state: running;
    }

    & .title {
      rotate: 0deg;
      color: white;
      background: oklch(0 0 0 / 0.7);
      text-shadow: 0 0 80px white, 0 0 30px oklch(0.6 0.25 145), 0 0 6px oklch(0.5 0.3 264);
    }
    & .css {
      color: oklch(0.65 0.29 29);
      text-shadow: 0 0 80px red, 0 0 30px oklch(0.5 0.2 27), 0 0 6px oklch(0.4 0.16 27);
    }
    & .flicker {
      opacity: calc(0.4 + 0.6 * var(--neon));
      text-shadow: 0 0 calc(80px * var(--neon)) currentColor;
      animation: flicker 10s linear infinite;
    }
    & .slow {
      animation-duration: 11s;
    }
  }

  &:focus-visible {
    outline: 3px solid var(--frame);
    outline-offset: -3px;
  }

  @media (prefers-reduced-motion: reduce) {
    &,
    & * {
      animation: none !important;
    }
  }
}

@keyframes road {
  to {
    background-position-x: -800px;
  }
}

/* 2015 needed 11 generated keyframes, rotating 36° at a time. */
@keyframes spin {
  to {
    rotate: 1turn;
  }
}

@keyframes flicker {
  0%, 18%, 23%, 31%, 37%, 44%, 46%, 49%, 51%, 58%, 61%, 68%, 71%, 85%, 96%, 100% { --neon: 1; }
  19%, 22%, 32%, 36%, 45%, 50%, 59%, 60%, 69%, 70%, 86%, 95% { --neon: 0; }
}