/* The configurator landing (/zaprojektuj, the mockup „Landing page konfiguratora”), in the cool tone of the designer
   it leads to. */

@layer pages {
  /* 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. Unlike the other pages, this mockup rounds its photo. */
  body > .kl:has(> .kl__configurator) {
    background-color: var(--paper);
    background-image: var(--atmosphere-configurator);
    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 {
    --tone: var(--link);
    --tone-strong: var(--link-hover);
    --tone-pale: color-mix(in srgb, var(--link) 30%, transparent);
    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: var(--text-2xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--tone); }
  .kl__configurator-title {
    max-width: 16ch;
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(var(--heading-2xl), 11cqw, 3.5rem);
    line-height: 1.04;
    letter-spacing: var(--tracking-tight);
    text-wrap: pretty;
    color: var(--ink);
  }
  .kl__configurator-lead { max-width: 46ch; margin: 14px 0 0; font-size: var(--text-xl); 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%,
      color-mix(in srgb, var(--paper) 95%, transparent) 0%,
      color-mix(in srgb, var(--paper) 45%, transparent) 28%,
      transparent 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. A drawing of a gold charm
     with a teal tassel: the colours of the object, not of the shop's style. */
  .kl__bead-charm {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    opacity: 0;
    transform: scale(.4);
    transition: opacity var(--duration-slow) var(--ease-standard), transform 480ms var(--ease-spring); /* literal: the charm's settle is timed with the beads' travel (bead_field/layout.js) */
  }
  .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%; } /* literal: the gold of the drawn charm */
  .kl__bead-charm-disc {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #fff5d3 0%, #e0b451 55%, #a97c26 100%); /* literal: the gold of the drawn charm */
    box-shadow: 0 6px 14px -6px rgb(168 124 39 / .6); /* literal: the gold of the drawn charm */
  }
  .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); } /* literal: the teal of the drawn tassel */
  .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: color-mix(in srgb, var(--paper) 35%, transparent);
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    white-space: nowrap;
    color: var(--ink);
    transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  }
  .kl__bead-field-cta:hover { border-color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, transparent); }
  /* 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: var(--text-base); line-height: 1; } /* literal: the arrow of the generic face, see above */

  .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(--line);
    border-radius: var(--radius-sheet);
    box-shadow: var(--shadow-xl);
  }
  .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; }
  }
}