/* The configurator landing (/zaprojektuj) on its own blue gradient. */

  /* ——— Configurator landing (/zaprojektuj, the mockup „Landing page konfiguratora”) ——— */

  /* One responsive column at every width: at most 1180px of content between 28px margins, its heading sized by the
     column's width (container query units). The page lies on a pale blue haze over the top 75vh of the window, on
     white; the mockup's tints of the brand sky that the tokens do not carry are named here. Unlike the other pages,
     this mockup rounds its photo. */
  body > .kl:has(> .kl__configurator) {
    --configurator-haze: #d9eaf6;
    --configurator-glow: #e4f0f8;
    --configurator-edge: #dcebf5;
    background-color: var(--paper);
    background-image:
      radial-gradient(1100px 520px at 50% -10%, var(--configurator-haze) 0%, transparent 68%),
      radial-gradient(700px 360px at 92% 2%, var(--configurator-glow) 0%, transparent 70%),
      linear-gradient(180deg, var(--sky) 0%, var(--mist) 46%, transparent 100%);
    background-size: 100% 75vh;
    background-repeat: no-repeat;
  }
  /* overflow-x: clip — a bead drifting past the edge of the field never widens the page. */
  .kl__configurator { container-type: inline-size; overflow-x: clip; line-height: normal; }
  .kl__configurator-in { max-width: calc(1180px + 2 * 28px); margin: 0 auto; padding: 0 28px; }

  .kl__configurator-intro { display: flex; flex-direction: column; align-items: center; padding: 30px 0 12px; text-align: center; }
  .kl__configurator-kicker { margin: 0; font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase; color: var(--link); }
  .kl__configurator-title {
    max-width: 16ch;
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.125rem, 11cqw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-wrap: pretty;
    color: var(--ink);
  }
  .kl__configurator-lead { max-width: 46ch; margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; color: var(--ink-soft); }

  /* The bead field (bead_field_controller.js): a 640 × 330 stage at most, „Rozpocznij projekt” at a third of its
     height, the beads under it. Scattered, every bead drifts and turns in place and now and then catches the light;
     the field adds .kl__bead-field--assembled while the beads form the bracelet, and the charm fades in under it and
     sways. The script places the beads with inline transforms and animations; the pieces are styled here. */
  .kl__bead-field { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 330; margin: 30px auto 20px; }
  .kl__bead-field-beads { position: absolute; inset: 0; pointer-events: none; }
  .kl__bead-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
  .kl__bead { position: absolute; left: 0; top: 0; will-change: transform; }
  .kl__bead-drift, .kl__bead-gem { width: 100%; height: 100%; }
  .kl__bead-gem { position: relative; }
  .kl__bead-gem svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .kl__bead-sparkle {
    position: absolute;
    left: -14%;
    top: -14%;
    width: 128%;
    height: 128%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .45) 28%, rgb(255 255 255 / 0) 62%);
  }
  /* The charm hangs from its ring by the top edge; the script puts that edge at the bottom of the bracelet. As in the
     mockup, it swings from the top of its box, whose left edge lies on the field's axis. */
  .kl__bead-charm {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    opacity: 0;
    transform: scale(.4);
    transition: opacity 320ms ease, transform 480ms cubic-bezier(.18, .86, .24, 1);
  }
  .kl__bead-field--assembled .kl__bead-charm {
    opacity: 1;
    transform: none;
    /* bead_field_controller.js sets the delay from the beads' travel (CHARM_APPEAR_DELAY_MS in bead_field/layout.js). */
    transition-delay: var(--kl-bead-charm-delay, 616ms);
    animation: kl-charm-sway 3.4s ease-in-out infinite;
  }
  .kl__bead-charm-ring { width: 13px; height: 13px; margin-bottom: 2px; border: 2px solid #cfa23f; border-radius: 50%; }
  .kl__bead-charm-disc {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #fff5d3 0%, #e0b451 55%, #a97c26 100%);
    box-shadow: 0 6px 14px -6px rgb(168 124 39 / .6);
  }
  .kl__bead-charm-tassel { display: flex; gap: 1.5px; margin-top: 2px; }
  .kl__bead-charm-tassel > span { width: 2px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, #5fc4c4, #3aa0a4); }
  .kl__bead-charm-tassel > span:nth-child(2), .kl__bead-charm-tassel > span:nth-child(4) { height: 23px; }
  .kl__bead-charm-tassel > span:nth-child(3) { height: 26px; }

  /* „Rozpocznij projekt”: a glass pill on an ink hairline, over the beads. */
  .kl__bead-field-cta {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 38px;
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--ink);
    transition: border-color 220ms ease, background 220ms ease;
  }
  .kl__bead-field-cta:hover { border-color: var(--ink); background: rgb(255 255 255 / .7); }
  /* Outfit has no arrow: the mockup's stack falls back to the generic sans-serif face, not to the system UI face that
     follows Outfit in the tokens (a thinner arrow with a solid head). */
  .kl__bead-field-cta-arrow { font-family: "Outfit", sans-serif; font-size: .9375rem; line-height: 1; }

  .kl__configurator-showcase { display: flex; flex-direction: column; gap: 28px; padding: 12px 0 56px; }
  .kl__configurator-figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--configurator-edge);
    border-radius: 24px;
    box-shadow: 0 24px 60px -34px rgb(40 90 130 / .4);
  }
  .kl__configurator-img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: 58% 50%; }

  @keyframes kl-bead-drift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(2.6px, -2.2px); }
    50% { transform: translate(.6px, 2.8px); }
    75% { transform: translate(-2.6px, .4px); }
    100% { transform: translate(0, 0); }
  }
  @keyframes kl-bead-turn {
    0% { transform: rotate(-3.5deg); }
    50% { transform: rotate(3.5deg); }
    100% { transform: rotate(-3.5deg); }
  }
  @keyframes kl-bead-sparkle {
    0%, 86%, 100% { opacity: 0; }
    91% { opacity: .9; }
    96% { opacity: .15; }
  }
  @keyframes kl-charm-sway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }

  /* Reduced motion: the charm appears without swinging (the script keeps the beads still and skips their travel). */
  @media (prefers-reduced-motion: reduce) {
    .kl__bead-charm, .kl__bead-field--assembled .kl__bead-charm { transition: none; animation: none; }
  }