/* =========================================================
   Блок «Создай своё» — в стилистике сайта
   ========================================================= */
.create { background: var(--black); padding-bottom: calc(5rem * var(--sc)); }
.create__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(5rem * var(--sc)); }
.create__left { display: flex; flex-direction: column; gap: calc(3rem * var(--sc)); }
.create__lead { color: var(--wheat); max-width: 32rem; }
.create__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.create__step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.create__step:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.create__step-num { font-family: var(--ff-serif); font-size: 1.5rem; line-height: 1.1; color: var(--wheat); }
.create__step-title { font-family: var(--ff-serif); font-weight: 300; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.03em; }
.create__step-text { margin-top: 0.3em; font-size: 0.875rem; color: var(--dim); }
@media (min-width: 992px) {
  .create__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(3rem * var(--sc)); }
  .create__left { grid-column: span 4; }
  .create__right { grid-column: 6 / span 7; }
}

/* Форма */
.cform { display: flex; flex-direction: column; gap: calc(2rem * var(--sc)); }
.cform__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cform__label { color: var(--wheat); }
.cform__count { font-size: 0.875rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.cform__textarea {
  display: block; width: 100%; min-height: 13rem; resize: vertical; margin: 0;
  padding: calc(1.5rem * var(--sc));
  background: var(--black-light); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); outline: none;
  font: 400 1.125rem/1.5 var(--ff-sans);
  transition: border-color 0.3s ease-in-out;
}
.cform__textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.cform__textarea:focus { border-color: var(--wheat); }
.cform__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cform__examples-label { font-size: 0.875rem; color: var(--dim); margin-right: 0.25rem; }
.cform__chip, .cform__action {
  font: 400 0.875rem/1 var(--ff-sans); color: var(--wheat); cursor: pointer;
  padding: 0.55rem 0.95rem; border-radius: 100vw;
  background: transparent; border: 1px solid rgba(246, 232, 191, 0.2);
  transition: background-color 200ms, color 200ms, border-color 200ms, opacity 200ms;
}
.cform__chip:hover, .cform__action:hover:not(:disabled) { background: var(--wheat); border-color: var(--wheat); color: var(--black); }
.cform__action:disabled { opacity: 0.35; cursor: not-allowed; }
.cform__action--accent { border-color: var(--wheat); }
.cform__action--danger { color: #e0674f; border-color: rgba(224, 103, 79, 0.45); }
.cform__action--danger:not(:disabled):hover { background: rgba(224, 103, 79, 0.12); border-color: #e0674f; }

/* Загрузка фото */
/* Отправка и статус */
.cform__submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn--solid { background: var(--wheat); border-color: var(--wheat); color: var(--black); padding: 0.9rem 1.6rem; }
.btn--solid:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.cform__submit { font: 500 1.125rem/1 var(--ff-sans); }
.cform__submit:disabled { cursor: wait; opacity: 0.75; }
.cform__submit.is-busy .btn__icon {
  width: 0.9rem; height: 0.9rem; border: 2px solid rgba(24, 24, 24, 0.3); border-top-color: var(--black);
  border-radius: 50%; animation: wheelSpin 0.7s linear infinite;
}
.cform__submit.is-busy .btn__icon svg { display: none; }
.cform__status { flex: 1 1 14rem; font-size: 0.875rem; color: var(--dim); min-height: 1.3em; }
.cform__status.is-error { color: #ff8a7a; }
.cform__status.is-success { color: var(--wheat); }

/* Результат */
.cform__result {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--black-light); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius);
  color: var(--dim); font-size: 0.875rem; text-align: center;
}
.cform__placeholder { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; }
.cform__placeholder-wheel { width: 5em; height: 3em; color: rgba(246, 232, 191, 0.5); }
.cform__placeholder-wheel .wheel { color: inherit; }
.cform__image { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; animation: cformIn 0.6s ease-out; }
@keyframes cformIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.cform__loader { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 60%; color: var(--wheat); }
.cform__loader-bar { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.cform__loader-bar::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: var(--wheat); animation: cformBar 1.4s ease-in-out infinite;
}
@keyframes cformBar { to { left: 100%; } }
.cform__result.is-loading {
  background: linear-gradient(110deg, #1d1d1d 30%, #262522 50%, #1d1d1d 70%) 0 0 / 250% 100%;
  animation: cformShimmer 1.8s linear infinite;
}
@keyframes cformShimmer { to { background-position: -250% 0; } }
.cform__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cform__note { font-size: 0.875rem; color: var(--dim); max-width: 40rem; }
@media (max-width: 479px) {
  .cform__submit { width: 100%; }
  .cform__action { flex: 1 1 calc(50% - 0.5rem); text-align: center; }
}

/* Просмотр визуализации с увеличением */
.czoom { position: fixed; inset: 0; z-index: 10001; display: none; flex-direction: column; background: rgba(24, 24, 24, 0.97); }
.czoom.is-open { display: flex; }
.czoom__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--pp); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.czoom__title { font-family: var(--ff-serif); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; }
.czoom__ui { display: flex; gap: 0.4rem; }
.czoom__ui button {
  min-width: 2.6rem; height: 2.6rem; padding: 0 0.8rem; border-radius: 100vw;
  border: 1px solid rgba(246, 232, 191, 0.2); background: transparent; color: var(--wheat);
  font-size: 1rem; cursor: pointer; transition: background-color 200ms, color 200ms;
}
.czoom__ui button:hover { background: var(--wheat); color: var(--black); }
.czoom__stage { flex: 1; display: grid; place-items: center; overflow: hidden; padding: 1rem; }
.czoom__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); cursor: grab; user-select: none; touch-action: none; }
.czoom__img.is-dragging { cursor: grabbing; }
html.cz-open, html.cz-open body { overflow: hidden; }

/* Видео в шапке и лоадере */
.hero--home video.hero__media { opacity: 1; }
video.loader__bg { object-fit: cover; }