@property --biin-mood-warmth {
  syntax: "<color>";
  inherits: true;
  initial-value: #eadcc8;
}

@property --biin-mood-earth {
  syntax: "<color>";
  inherits: true;
  initial-value: #e3d1ba;
}

@property --biin-mood-edge {
  syntax: "<color>";
  inherits: true;
  initial-value: #ede1d2;
}

.biin-color-section {
  min-height: 640px;
  height: clamp(640px, 75svh, 760px);
  scroll-margin-top: 72px;
  border-block: 0;
  color-scheme: light;
  color: #292d24;
  font-family: var(--font-biin-ar);
  background:
    radial-gradient(ellipse 54% 76% at 49% 42%, #faf5ed 0%, rgb(250 245 237 / 0) 100%),
    radial-gradient(ellipse 56% 76% at 3% 52%, var(--biin-mood-edge) 0%, transparent 100%),
    radial-gradient(ellipse 58% 75% at 97% 56%, var(--biin-mood-warmth) 0%, transparent 100%),
    linear-gradient(115deg, #f2ebe3 0%, var(--biin-mood-earth) 30%, #f5ede2 52%, var(--biin-mood-earth) 76%, #f2ebe3 100%);
  transition: --biin-mood-warmth 820ms ease, --biin-mood-earth 820ms ease, --biin-mood-edge 820ms ease;
}

.biin-color-section::before {
  background: linear-gradient(to bottom, #f2ebe3 0%, transparent 17%, transparent 77%, #f2ebe3 100%);
  background-color: transparent;
  opacity: 1;
  transition: none;
}

.biin-color-section::after {
  z-index: 2;
  height: 12%;
  background: linear-gradient(to bottom, transparent, #f2ebe3);
}

.biin-color-section .contours {
  opacity: .42;
  transform: translate3d(0, var(--biin-line-offset, 0px), 0);
  transition: transform 160ms linear;
}

.biin-color-section.is-entered .contours { animation: none; }
.biin-color-section .contours svg { width: 100%; height: 100%; transform: none; }
.biin-color-section .contours path {
  stroke: #424636;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: none;
  transition: none;
}

.biin-color-section.is-entered .contours .signature-line--upper {
  animation: biin-customizer-signature-draw 1.85s cubic-bezier(.22, .66, .2, 1) .1s both;
}
.biin-color-section.is-entered .contours .signature-line--lower {
  animation: biin-customizer-signature-draw 1.85s cubic-bezier(.22, .66, .2, 1) .32s both;
}

.biin-color-section.is-paused .contours path { animation-play-state: paused; }

@keyframes biin-customizer-signature-draw {
  to { stroke-dashoffset: 0; }
}

.biin-color-section .wordmark {
  top: 10%;
  right: 5%;
  left: 20%;
  color: var(--ghost-color);
  font-family: var(--font-biin-ar);
  font-size: clamp(148px, 16vw, 288px);
  font-weight: 300;
  opacity: 1;
}

.biin-color-section .product-stage {
  top: 2%;
  right: -2%;
  bottom: 1%;
  left: 22%;
}

.biin-color-section #product-canvas {
  transform: scale(1.055);
  transform-origin: 50% 54%;
}

.biin-color-section .content-panel {
  top: 50%;
  left: clamp(40px, 5.5vw, 96px);
  width: min(390px, 29vw);
  transform: translateY(-50%);
}

.biin-color-section .section-copy { margin-bottom: 34px; }
.biin-color-section .brand-mark {
  margin-bottom: 16px;
  color: rgb(41 45 36 / .66);
  font-family: var(--font-biin-en);
  font-size: 11px;
  letter-spacing: 0;
}

.biin-color-section h1 {
  color: #292d24;
  font-size: clamp(48px, 4.4vw, 70px);
  font-weight: 300;
  line-height: 1.12;
}

.biin-color-section .intro {
  margin-top: 11px;
  color: #554b3e;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
}

.biin-color-section .color-controls { gap: 22px; }
.biin-color-section legend {
  margin-bottom: 10px;
  color: #323428;
  font-size: 14px;
  font-weight: 500;
}
.biin-color-section .selected-color-name {
  color: #665949;
  font-size: 12px;
}
.biin-color-section .swatch-row { gap: 7px; }
.biin-color-section .swatch {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
}
.biin-color-section .swatch::before {
  width: 28px;
  height: 28px;
  border-color: rgb(41 45 36 / .3);
  box-shadow: 0 3px 10px rgb(41 45 36 / .13);
}
.biin-color-section .swatch::after { inset: 1px; }
.biin-color-section .swatch[aria-pressed="true"]::after { border-color: #424636; }
.biin-color-section .swatch:focus-visible::after {
  border-color: #424636;
  box-shadow: 0 0 0 3px rgb(66 70 54 / .18);
}

.biin-color-section .model-link {
  min-height: 46px;
  margin-top: 31px;
  padding: 11px 23px;
  gap: 14px;
  border: 1px solid rgb(112 88 65 / .2);
  border-radius: 5px;
  background: #705841;
  color: #f2ebe3;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  backdrop-filter: none;
  filter: none;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.biin-color-section .model-link:hover,
.biin-color-section .model-link:focus-visible {
  background: #424636;
  border-color: rgb(66 70 54 / .28);
  color: #f2ebe3;
}
.biin-color-section .model-link span:last-child { transition: transform 250ms ease; }
.biin-color-section .model-link:hover span:last-child,
.biin-color-section .model-link:focus-visible span:last-child { transform: translateX(-4px); }

.biin-color-section.is-customizing .product-stage { cursor: grab; touch-action: none; }
.biin-color-section.is-orbiting .product-stage { cursor: grabbing; }
.biin-color-section .product-stage:focus-visible { outline: 2px solid #705841; outline-offset: -7px; }

.biin-color-section .loading-state { color: #424636; }
.biin-color-section .loading-track { background: rgb(66 70 54 / .22); }
.biin-color-section .loading-track > span { background: #424636; }

@media (max-width: 1100px) and (min-width: 701px) {
  .biin-color-section { min-height: 630px; height: min(78svh, 740px); }
  .biin-color-section .content-panel { width: min(340px, 34vw); }
  .biin-color-section .product-stage { left: 25%; }
}

@media (max-width: 700px) {
  .biin-color-section {
    height: auto;
    min-height: 0;
    background:
      radial-gradient(ellipse 90% 49% at 48% 43%, #faf5ed 0%, transparent 100%),
      radial-gradient(ellipse 78% 42% at -18% 28%, var(--biin-mood-edge), transparent 100%),
      radial-gradient(ellipse 78% 42% at 118% 64%, var(--biin-mood-warmth), transparent 100%),
      linear-gradient(120deg, #f2ebe3, var(--biin-mood-earth) 34%, #f5ede2 58%, #f2ebe3);
  }
  .biin-color-section .section-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    height: auto;
    padding: 33px 20px 40px;
  }
  .biin-color-section .content-panel { display: contents; }
  .biin-color-section .section-copy {
    grid-row: 1;
    margin: 0;
    padding-inline: 2px;
  }
  .biin-color-section h1 { font-size: clamp(39px, 10.8vw, 48px); }
  .biin-color-section .intro { margin-top: 7px; font-size: 14px; }
  .biin-color-section .product-stage {
    position: relative;
    grid-row: 2;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: calc(100% + 40px);
    height: clamp(320px, 40svh, 390px);
    min-height: 0;
    margin-inline: -20px;
  }
  .biin-color-section .product-frame { width: 100%; height: 100%; margin: 0; }
  .biin-color-section #product-canvas { transform: scale(1.075); }
  .biin-color-section .loading-state { top: 55%; left: 50%; transform: translateX(-50%); }
  .biin-color-section .color-controls {
    grid-row: 3;
    gap: 15px;
    margin-top: 4px;
    padding-inline: 2px;
  }
  .biin-color-section legend { margin-bottom: 5px; font-size: 13px; }
  .biin-color-section .swatch-row { gap: 6px; }
  .biin-color-section .swatch { flex-basis: 42px; width: 42px; height: 42px; }
  .biin-color-section .swatch::before { width: 27px; height: 27px; }
  .biin-color-section .model-link { grid-row: 4; justify-self: start; margin: 19px 2px 0; }
  .biin-color-section .wordmark {
    top: 19%;
    right: -28%;
    left: -28%;
    font-size: clamp(108px, 31vw, 154px);
    opacity: 1;
  }
  .biin-color-section .contours { opacity: .36; }
  .biin-color-section .contours svg { height: 65%; }
  .biin-color-section .contours path { stroke-width: 1.25; }
}

@media (max-width: 380px) {
  .biin-color-section .section-inner { padding-inline: 16px; }
  .biin-color-section .product-stage { width: calc(100% + 32px); margin-inline: -16px; }
  .biin-color-section .swatch-row { gap: 3px; }
  .biin-color-section .swatch { flex-basis: 39px; width: 39px; height: 39px; }
  .biin-color-section .swatch::before { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .biin-color-section .contours path { stroke-dashoffset: 0; }
  .biin-color-section.is-entered .contours .signature-line--upper,
  .biin-color-section.is-entered .contours .signature-line--lower { animation: none; }
  .biin-color-section .contours { transform: none; transition: none; }
}
.biin-color-section.reduce-motion .contours path { stroke-dashoffset: 0; }
.biin-color-section.reduce-motion.is-entered .contours .signature-line--upper,
.biin-color-section.reduce-motion.is-entered .contours .signature-line--lower { animation: none; }
.biin-color-section.reduce-motion .contours { transform: none; transition: none; }