/* Apple-style polish over the builder's layout (2026-11-11).
   Rules from the apple-design skill: instant press feedback, a translucent header the page
   scrolls under, size-specific tracking, one critically damped spring for everything that
   settles, and gentler fallbacks for reduced motion, transparency, and high contrast. */

:root {
  /* Critically damped spring (damping 1.0, response 0.4 s), sampled for CSS. */
  --bsd-spring: linear(0, 0.06, 0.186, 0.329, 0.466, 0.584, 0.682, 0.76, 0.821, 0.868, 0.903,
      0.929, 0.949, 0.963, 0.973, 0.981, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 1);
  --bsd-spring-time: 600ms;
}

/* Dropdown menus: a dark frosted material. The header bar stays solid black because the logo
   file carries its own black box (a frosted bar needs a transparent copy of the logo). */
.block-header-item__dropdown {
  background-color: rgba(0, 0, 0, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* Type: tighten tracking and leading as size grows; body text stays as built. */
.page__blocks h1,
.bsd-clips h2 {
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.page__blocks h2,
.page__blocks h3 {
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.page__blocks h4,
.page__blocks h5,
.bsd-clips h3 {
  letter-spacing: -0.01em;
}

/* Buttons: respond on press, settle back with the spring. */
.grid-button,
.form__button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--bsd-spring-time) var(--bsd-spring);
}
.grid-button:active,
.form__button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

/* Clips: rise into place once, staggered by column (site-additions.js adds .is-in). */
.bsd-clip {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--bsd-spring-time) var(--bsd-spring),
    transform var(--bsd-spring-time) var(--bsd-spring);
  transition-delay: calc(var(--bsd-col, 0) * 60ms);
}
.bsd-clip.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bsd-clip {
    transform: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
  .grid-button,
  .form__button,
  .grid-button:active,
  .form__button:active {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .block-header-item__dropdown {
    background-color: #000 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .block-header-item__dropdown {
    background-color: #000 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid #fff;
  }
}