/* ============================================================================
 * polish.css — HOME FINISHING PASS
 * ---------------------------------------------------------------------------
 * Preserves the approved composition. This layer only improves hierarchy,
 * material, motion response, and the finish of the existing components.
 * ========================================================================== */


/* Flat monochrome paper, with enough microscopic variation to avoid looking
   like an empty browser canvas. No hue and no decorative colour field. */

   .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
      radial-gradient(
        ellipse at 40% 45%,
        transparent 52%,
        rgba(20, 18, 15, 0.022) 100%
      ),
      repeating-linear-gradient(
        0deg,
        rgba(20, 18, 15, 0.012) 0 1px,
        transparent 1px 5px
      );

    opacity: 0.52;
  }


  /* ============================================================================
   * NAVIGATION
   * ========================================================================== */

  .chrome__nav a {
    color: var(--ink);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 550;
    opacity: 1;
    letter-spacing: 0.16em;

    transition:
      color 180ms linear,
      letter-spacing 420ms var(--ease-out),
      transform 420ms var(--ease-out);
  }

  .chrome__nav a:hover,
  .chrome__nav a:focus-visible,
  .chrome__nav a[aria-current="true"] {
    color: var(--ink);
    letter-spacing: 0.22em;
    transform: translateY(-1px);
  }

  .chrome__nav a::after {
    background: var(--ink);
    transform-origin: center;
  }


  /* ============================================================================
   * HERO WORDMARK
   * ========================================================================== */

  .hero__wordmark {
    font:
      700
      clamp(
        3px,
        /* The drawing is 127 columns and the mono advance is 0.6em, so 78 was
           right for the mark ALONE (127 × 0.6 = 76.2, plus air). What it did
           not account for is home-flow.css growing the mark by `scale(1.24)`
           afterwards: 1.21 × --mark-w of actual ink, which ran past the left
           edge of the viewport. The divisor now carries the growth too —
           127 × 0.6 × 1.24 = 94.5, and 100 leaves the same slack 78 did. */
        min(calc(var(--mark-w) / 100), 1.38svh),
        17px
      )
      / 0.92
      var(--mono);
  }

  .hero__mark-drift {
    filter:
      drop-shadow(
        0
        18px
        22px
        rgba(20, 18, 15, 0.075)
      );
  }


  /* ============================================================================
   * WORDMARK REGISTRATION
   * ========================================================================== */

  .hero__mark-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;

    background:
      linear-gradient(
        180deg,
        transparent 0 44%,
        rgba(20, 18, 15, 0.07) 46%,
        transparent 49% 100%
      );

    mix-blend-mode: multiply;
  }

  .hero__mark-stage.is-glitching::after {
    animation:
      mark-registration-sweep
      150ms
      steps(2, jump-none)
      both;
  }

  .hero__mark-stage.is-world-shifting::after {
    animation:
      mark-registration-sweep
      900ms
      cubic-bezier(0.16, 1, 0.3, 1)
      both;
  }

  @keyframes mark-registration-sweep {
    0% {
      opacity: 0;
      transform: translateY(-15%);
    }

    35% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateY(18%);
    }
  }


  /* ============================================================================
   * HERO DETAILS
   * ========================================================================== */

  .hero__details {
    gap: clamp(18px, 2.2vh, 25px);
    margin-top: clamp(8px, 1.4vh, 18px);
    opacity: 1;

    transition:
      opacity 620ms 100ms var(--ease-out);
  }

  .is-booting .hero__details {
    opacity: 0;
  }


  /* ============================================================================
   * DISCIPLINES
   * ========================================================================== */

  .hero__disciplines {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .hero__disciplines li {
    transition:
      color 180ms linear,
      transform 360ms var(--ease-out);
  }

  .hero__disciplines li:hover {
    color: var(--ink);
    transform: translateY(-1px);
  }


  /* ============================================================================
   * DISCIPLINE CAROUSEL
   *
   * CHANGE ONLY:
   *
   * --discipline-speed: 16s;
   *
   * LOWER NUMBER = FASTER
   * HIGHER NUMBER = SLOWER
   *
   * 5s  = very fast
   * 8s  = fast
   * 12s = medium
   * 16s = slower
   * 25s = very slow
   * ========================================================================== */

  .hero__discipline-carousel {
    position: relative;

    width: min(60vw, 720px);
    max-width: 100%;

    overflow: hidden;

    -webkit-mask-image: none;
    mask-image: none;
  }


  /* ============================================================================
   * MOVING STRIP
   * ========================================================================== */

  .hero__discipline-track {
    /* ========================================================
       THIS IS THE ONLY SPEED CONTROL
       ======================================================== */

    --discipline-speed: 300s;

    display: flex !important;
    flex-flow: row nowrap !important;

    align-items: center;
    justify-content: flex-start;

    width: max-content !important;
    min-width: max-content !important;

    animation-name: discipline-carousel !important;
    animation-duration: var(--discipline-speed) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;

    will-change: transform;
  }


  /* ============================================================================
   * EACH DUPLICATED DISCIPLINE LIST
   * ========================================================================== */

  .hero__discipline-track .hero__disciplines {
    display: flex !important;

    flex: 0 0 auto !important;
    flex-flow: row nowrap !important;

    align-items: center;
    justify-content: flex-start;

    gap: clamp(30px, 3vw, 50px);

    padding-right: clamp(30px, 3vw, 50px);

    margin: 0;

    white-space: nowrap;

    font-size: clamp(12px, 1.05vw, 16px);

    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: var(--ink);
  }


  /* Keep every word on one line */

  .hero__discipline-track .hero__disciplines li {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }


  /* Second copy remains visible so the loop is seamless */

  .hero__discipline-track .hero__disciplines[aria-hidden="true"] {
    display: flex !important;
  }


  /* ============================================================================
   * ACTUAL CAROUSEL MOVEMENT
   * ========================================================================== */

  @keyframes discipline-carousel {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-50%, 0, 0);
    }
  }


  /* ============================================================================
   * HERO RECORD / STAT BUTTONS
   * ========================================================================== */

  .hero__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    width: min(50vw, 560px);
    max-width: 100%;

    gap: 9px;
    border: 0;

    transition:
      transform 620ms 160ms var(--ease-out),
      opacity 620ms 160ms var(--ease-out);
  }

  .is-booting .hero__pills {
    opacity: 0;
    transform: translateY(8px);
  }


  /* Prevent old pill animation behavior */

  .hero__pills
  .hero__pill-wrap {
    animation: none !important;
    translate: 0 !important;
  }

  .hero__pill-wrap + .hero__pill-wrap {
    border-left: 0;
  }


  /* ============================================================================
   * STAT BUTTON
   * ========================================================================== */

  .hero__pill,
  .hero__pill.glass,
  html[data-world] .hero__pill,
  html[data-world] .hero__pill.glass {
    position: relative;

    width: auto;
    min-height: 38px;

    display: inline-flex;
    align-items: baseline;

    gap: 9px;
    padding: 8px 14px;

    border: 1px solid var(--ink);
    border-radius: 11px;

    background: transparent;
    color: var(--ink);

    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    overflow: hidden;

    cursor: help;

    transform: none;

    transition:
      background-color 180ms linear,
      color 180ms linear;
  }

  .hero__pill::after {
    display: none;
  }


  /* Hover */

  .hero__pill-wrap:hover .hero__pill,
  .hero__pill:focus-visible,
  html[data-world] .hero__pill-wrap:hover .hero__pill,
  html[data-world] .hero__pill:focus-visible {
    border: 1px solid var(--ink);

    background: var(--ink);
    color: var(--field);

    box-shadow: none;

    transform: none;
  }

  .hero__pill-wrap:hover .hero__pill::after,
  .hero__pill:focus-visible::after {
    display: none;
  }


  /* ============================================================================
   * STAT NUMBERS
   * ========================================================================== */

  .hero__pill b,
  html[data-world] .hero__pill b {
    color: var(--ink);

    font:
      820
      clamp(13px, 1.05vw, 17px)
      / 0.95
      var(--display);

    letter-spacing: -0.025em;
  }


  /* ============================================================================
   * STAT LABELS
   * ========================================================================== */

  .hero__pill i,
  html[data-world] .hero__pill i {
    color: var(--ink);

    font:
      700
      clamp(7px, 0.52vw, 9px)
      / 1
      var(--mono);

    font-style: normal;

    letter-spacing: 0.16em;

    opacity: 0.72;
  }


  /* ============================================================================
   * PILL HOVER TYPE
   * ========================================================================== */

  .hero__pill-wrap:hover .hero__pill b,
  .hero__pill-wrap:hover .hero__pill i,
  .hero__pill:focus-visible b,
  .hero__pill:focus-visible i,
  html[data-world] .hero__pill-wrap:hover .hero__pill b,
  html[data-world] .hero__pill-wrap:hover .hero__pill i,
  html[data-world] .hero__pill:focus-visible b,
  html[data-world] .hero__pill:focus-visible i {
    color: var(--field);
  }


  /* ============================================================================
   * PILL TOOLTIP
   * ========================================================================== */

  .hero__pill-info {
    top: calc(100% + 9px);

    padding: 10px 12px;

    border-radius: 8px;
    border-color: var(--ink);

    background:
      rgba(251, 249, 245, 0.98);

    box-shadow:
      8px
      8px
      0
      color-mix(
        in srgb,
        var(--ink) 8%,
        transparent
      );

    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;

    transform: translateY(-5px);

    transition:
      opacity 180ms linear,
      transform 360ms var(--ease-out);
  }


  /* ============================================================================
   * DESKTOP POSITIONING
   * ========================================================================== */

  @media (min-width: 900px) {
    .hero__lockup {
      --inset: clamp(48px, 8vw, 136px);
    }

    .hero__details {
      margin-left: 44px;
    }
  }


  /* ============================================================================
   * MOBILE
   * ========================================================================== */

  @media (max-width: 720px) {

    .chrome__nav a {
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .chrome__nav a:hover,
    .chrome__nav a:focus-visible {
      letter-spacing: 0.15em;
    }

    /*
     * IMPORTANT:
     * There is intentionally NO animation-duration here.
     * Mobile uses the SAME --discipline-speed value as desktop.
     */
  }


  /* ============================================================================
   * LIQUID-GLASS READABILITY OVER THE LIVING WORLDS
   * ========================================================================== */

  html[data-world] .stage::before {
    opacity: 0.14;
    mix-blend-mode: multiply;
  }


  /* Excludes hover/focus/current so the world-accent hover color
     (.chrome__nav a:hover, styles/chrome.css) isn't cancelled — this rule's
     specificity otherwise beats that one and the nav link never visibly
     changed color on hover, on every world past "blank". */

  html[data-world] .chrome__nav a:not(:hover):not(:focus-visible):not([aria-current="true"]),
  html[data-world] .hero__wordmark,
  html[data-world] .hero__disciplines,
  html[data-world] .hero__pill b,
  html[data-world] .hero__pill i {
    color: #0d0d0c;
  }

  html[data-world] .chrome__nav a {
    text-shadow: none;
  }

  html[data-world] .hero__mark-stage::before {
    display: none;
  }

  html[data-world] .hero__mark-stage::after {
    border-radius:
      clamp(
        18px,
        2.2vw,
        34px
      );
  }


  /* The moving carousel remains completely transparent */

  html[data-world] .hero__discipline-carousel {
    box-sizing: border-box;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    box-shadow: none;
  }


  /* ============================================================================
   * LIVING WORLD PILLS
   * ========================================================================== */

  html[data-world] .hero__pill,
  html[data-world] .hero__pill.glass {
    border-radius: 11px;

    border:
      1px
      solid
      #0d0d0c;

    background: transparent;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    box-shadow: none;
  }

  html[data-world]
  .hero__pill-wrap:hover
  .hero__pill,
  html[data-world]
  .hero__pill:focus-visible {
    border-color: #0d0d0c;

    background: #0d0d0c;

    box-shadow: none;
  }


  /* ============================================================================
   * LIVING WORLD TOOLTIP
   * ========================================================================== */

  html[data-world] .hero__pill-info {
    color: #0d0d0c;

    border:
      1px
      solid
      rgba(255, 255, 255, 0.62);

    background:
      rgba(250, 248, 243, 0.78);

    -webkit-backdrop-filter:
      blur(24px)
      saturate(145%);

    backdrop-filter:
      blur(24px)
      saturate(145%);
  }


  /* ============================================================================
   * WORLD CHANGE RESPONSE
   * ========================================================================== */

  html[data-world]
  .hero__mark-stage.is-world-shifting::before {
    animation:
      glass-world-pulse
      900ms
      steps(9, end)
      both;
  }

  @keyframes glass-world-pulse {
    0% {
      opacity: 0.68;

      filter:
        contrast(1.28)
        saturate(0.7);
    }

    48% {
      opacity: 0.92;

      filter:
        contrast(1.08)
        saturate(1.25);
    }

    100% {
      opacity: 1;
      filter: none;
    }
  }


  /* ============================================================================
   * WORDMARK QUIET ZONE
   * ========================================================================== */

  .hero__mark-stage::before {
    display: block !important;

    inset:
      -15%
      -10%
      -13%;

    border: 0;
    border-radius: 48%;

    background:
      radial-gradient(
        ellipse at center,

        color-mix(
          in srgb,
          var(--field) 95%,
          transparent
        ) 0%,

        color-mix(
          in srgb,
          var(--field) 82%,
          transparent
        ) 54%,

        color-mix(
          in srgb,
          var(--field) 40%,
          transparent
        ) 68%,

        transparent 82%
      );

    box-shadow: none;

    filter: blur(20px);

    opacity: 1 !important;

    transform:
      translateZ(-40px) !important;
  }

  .hero__wordmark:not(.hero__wordmark--echo) {
    color: #0d0d0c;
    text-shadow: none;
  }


  /* ============================================================================
   * FINAL CAROUSEL GUARANTEE
   *
   * Keeps the carousel active and prevents other CSS files from overriding it.
   *
   * IMPORTANT:
   * SPEED STILL COMES FROM:
   *
   * --discipline-speed: 16s;
   *
   * near the top of the DISCIPLINE CAROUSEL section.
   * ========================================================================== */

  .hero__discipline-carousel {
    width: min(60vw, 720px) !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero__discipline-track {
    display: flex !important;

    flex-flow: row nowrap !important;

    width: max-content !important;
    min-width: max-content !important;

    animation-name: discipline-carousel !important;

    animation-duration:
      var(--discipline-speed) !important;

    animation-timing-function:
      linear !important;

    animation-iteration-count:
      infinite !important;

    animation-play-state:
      running !important;

    will-change: transform;
  }

  .hero__discipline-track .hero__disciplines {
    display: flex !important;

    flex: none !important;
    flex-wrap: nowrap !important;

    gap:
      clamp(
        30px,
        3vw,
        50px
      ) !important;

    padding-right:
      clamp(
        30px,
        3vw,
        50px
      ) !important;

    font-size:
      clamp(
        12px,
        1.05vw,
        16px
      ) !important;

    white-space: nowrap !important;
  }

  .hero__discipline-track
  .hero__disciplines[aria-hidden="true"] {
    display: flex !important;
  }

  .hero__discipline-track
  .hero__disciplines li {
    flex: none !important;
    white-space: nowrap !important;
  }

  .hero__pills {
    width: min(50vw, 560px) !important;
    max-width: 100% !important;
    justify-content: center;
  }


  /* ============================================================================
   * FINAL MOBILE OVERRIDE
   *
   * NO speed override here.
   * Mobile and desktop now use the same speed variable.
   * ========================================================================== */