/* ========== LOADER ========== */
    .loader {
      position: fixed;
      inset: 0;
      background: var(--light);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
    }

    .loader::after {
      content: '';
      position: absolute;
      inset: 0;
      background: #F5F5F0;
      background-size: 800px;
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }

    .loader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 52px;
      position: relative;
      z-index: 2;
    }

    /* Building grid — 3 cols x 4 rows of blocks forming the K */
    .loader-grid {
      display: grid;
      grid-template-columns: repeat(3, 32px);
      grid-template-rows: repeat(4, 32px);
      gap: 4px;
      position: relative;
    }

    .loader-block {
      width: 32px;
      height: 32px;
      position: relative;
      overflow: hidden;
    }

    .loader-block-inner {
      width: 100%;
      height: 100%;
      background: var(--black);
      transform: translateY(120%) scale(0.8);
      opacity: 0;
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease;
    }

    .loader-block.built .loader-block-inner {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .loader-block.orange .loader-block-inner {
      background: var(--orange);
    }

    .loader-block.empty .loader-block-inner {
      display: none;
    }

    /* Shimmer sweep only on the orange block */
    .loader-block.orange .loader-block-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.25) 50%,
        transparent 60%
      );
      transform: translateX(-100%);
      animation: block-shimmer 0.6s 0.15s ease-out forwards;
    }

    @keyframes block-shimmer {
      to { transform: translateX(100%); }
    }

    /* Dust particles that fly out when a block lands */
    .loader-dust {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(10, 10, 10, 0.25);
      pointer-events: none;
      z-index: 10;
    }

    @keyframes dust-fly {
      0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
      100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
    }

    /* Brand text (empty, kept for structure) */
    .loader-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .loader-brand.visible {
      opacity: 1;
      transform: translateY(0);
    }


    /* Top progress line */
    .loader-line-track {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: rgba(0, 0, 0, 0.06);
      overflow: hidden;
      z-index: 100000;
    }

    .loader-line {
      height: 100%;
      background: linear-gradient(90deg, var(--orange), var(--orange-light));
      width: 0%;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Bottom wordmark — JS sets font-size so the text fills 100vw edge-to-edge */
    .loader-wordmark {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      line-height: 0.85;
      pointer-events: none;
      z-index: 100000;
      overflow: hidden;
      color: var(--black);
    }
    .loader-wordmark span {
      display: block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-weight: 600;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      white-space: nowrap;
      text-align: center;
      font-size: 10vw; /* provisional until JS measures */
    }

    /* ──── DARK VARIANT ──── Toggle by adding/removing .dark on #loader */
    .loader.dark {
      background: #000000;
    }
    .loader.dark::after {
      display: none;
    }
    .loader.dark .loader-block:not(.orange) .loader-block-inner {
      background: #ffffff;
    }
    /* Orange keystone stays orange — brand accent survives both themes */
    .loader.dark .loader-dust {
      background: rgba(255, 255, 255, 0.3);
    }
    .loader.dark .loader-line-track {
      background: rgba(255, 255, 255, 0.1);
    }
    .loader.dark .loader-wordmark {
      color: rgba(255,255,255,0.03);
    }