/* 05-fx.css: entrance splash, cursor, reveal, nav state, progress, beam, skeletons. */
/* Pixel-Dither Entrance Boot Splash */
    .entrance-splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 0.4s ease;
    }

    .entrance-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
    }

    .entrance-center {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      user-select: none;
    }

    .entrance-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-mono);
      font-size: clamp(22px, 4.5vw, 40px);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.02em;
    }

    .entrance-icon {
      width: clamp(30px, 5vw, 46px);
      height: auto;
      aspect-ratio: 1;
      display: inline-flex;
      color: #ffffff;
    }

    .entrance-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .entrance-caret {
      color: var(--color-mid-grey);
      animation: blink 0.8s infinite;
    }

    .entrance-sub {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      color: var(--color-mid-grey);
      text-transform: uppercase;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

/* Custom Difference Cursor */
    @media (hover: hover) and (pointer: fine) {
      .js body { cursor: none; }
      .cursor__ball {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        mix-blend-mode: difference;
        pointer-events: none;
        will-change: transform;
      }
      .cursor__ball--big {
        width: 32px;
        height: 32px;
        margin-top: -16px;
        margin-left: -16px;
        border: 1px solid #ffffff;
        transition: width 0.2s, height 0.2s, border-color 0.2s;
      }
      .cursor__ball--small {
        width: 6px;
        height: 6px;
        margin-top: -3px;
        margin-left: -3px;
        background: #ffffff;
      }
      .cursor-active .cursor__ball--big {
        width: 48px;
        height: 48px;
        margin-top: -24px;
        margin-left: -24px;
        border-color: var(--cursor-hover-color);
      }
      .cursor-active .cursor__ball--small {
        background: var(--cursor-hover-color);
      }
    }

    @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
      .cursor__ball { display: none !important; }
    }

/* Scroll Reveal System (progressive enhancement, active only with .js) */
    .js [data-reveal] {
      opacity: 0;
    }

    .js [data-reveal].is-visible {
      opacity: 1;
      animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }

    @keyframes revealUp {
      from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .js [data-reveal] {
        opacity: 1;
      }
      .js [data-reveal].is-visible {
        animation: none;
      }
    }

    /* Active section link in navigation */
    .nav-link.is-active {
      background: #ffffff;
      border-color: #ffffff;
      color: #000000;
    }

    .header.is-capsule .nav-link.is-active {
      background: #111111;
      border-color: #111111;
      color: #ffffff;
    }

    .mobile-menu__link.is-active {
      text-decoration: underline;
    }

    ::selection {
      background: #ffffff;
      color: #000000;
    }

    :focus-visible {
      outline: 1px solid #ffffff;
      outline-offset: 3px;
    }

    /* Scroll progress hairline */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 200;
      width: 100%;
      height: 2px;
      pointer-events: none;
    }

    .scroll-progress__bar {
      display: block;
      width: 100%;
      height: 100%;
      background: #ffffff;
      transform-origin: 0 50%;
      transform: scaleX(0);
    }

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

    /* Border beam on cards (hover only, static arc where @property is missing) */
    .repo-card, .system-card, .featured-project {
      position: relative;
    }

    .repo-card:hover::before, .system-card:hover::before, .featured-project:hover::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 1;
      border-radius: inherit;
      padding: 1px;
      --beam-angle: 0deg;
      background: conic-gradient(from var(--beam-angle), transparent 0 70%, rgba(255, 255, 255, 0.9) 82%, transparent 94%);
      -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
      mask-composite: exclude;
      animation: beamSpin 2.4s linear infinite;
      pointer-events: none;
    }

    @keyframes beamSpin {
      to { --beam-angle: 360deg; }
    }

    @media (prefers-reduced-motion: reduce) {
      .repo-card:hover::before, .system-card:hover::before, .featured-project:hover::before {
        display: none;
      }
    }

    .skeleton-card {
      border: 1px solid var(--color-muted);
      padding: var(--spacing-m);
      background: #050505;
      height: 380px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .skeleton-box {
      background: #151515;
    }