/* ═══════════════════════════════════════════════════════════════
   DARE — орнаменты: кружево, банты, жемчуг, бирка, строчка.
   Файлы лежат в assets/orn/, цвета берутся из tokens.css.

   Почему цвет задаётся маской, а не картинкой.
   Внешний SVG, подключённый как background-image, не наследует
   цвет текста — currentColor внутри него остаётся чёрным. Поэтому
   орнамент подключается как mask-image (маска-трафарет), а красит
   его background-color. Любой орнамент можно перекрасить одной
   строкой: --orn-color: var(--cherry).

   Все элементы декоративные: в разметке им нужен aria-hidden="true",
   курсор и клики сквозь них не проходят.
   ═══════════════════════════════════════════════════════════════ */

/* Общий механизм маски. Отдельного :root здесь нет — по правилу
   проекта переменные уровня страницы живёт только в tokens.css. */
.orn-lace-top,
.orn-lace-bottom,
.orn-lace-corner,
.orn-divider,
.orn-pearls,
.orn-tag,
.orn-stitch,
.orn-sparkle,
.orn-bow {
  --orn-color: var(--blush);
  background-color: var(--orn-color);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Браузер без масок не должен показывать цветной прямоугольник
   вместо орнамента — прячем декор целиком, вёрстка не страдает. */
@supports not ((-webkit-mask-image: url("../assets/orn/bow.svg")) or (mask-image: url("../assets/orn/bow.svg"))) {
  .orn-lace-top,
  .orn-lace-bottom,
  .orn-lace-corner,
  .orn-divider,
  .orn-pearls,
  .orn-tag,
  .orn-stitch,
  .orn-sparkle,
  .orn-bow { display: none; }
}

/* ── Кружевная кайма по краю блока ────────────────────────────────
   Родителю нужен position: relative. Кайма бесшовная: повторяется
   по горизонтали любой ширины. Высота — переменной --orn-h.
   .orn-lace-top   — пришита к верхнему краю, фестоны свисают внутрь;
   .orn-lace-bottom — свисает под нижний край, как оборка (родителю
   нужен overflow: visible).                                      */
.orn-lace-top,
.orn-lace-bottom {
  --orn-h: 42px;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--orn-h);
  z-index: 2;
  -webkit-mask: url("../assets/orn/lace-border.svg") 0 0 / auto 100% repeat-x;
          mask: url("../assets/orn/lace-border.svg") 0 0 / auto 100% repeat-x;
}

.orn-lace-top { top: 0; }

.orn-lace-bottom {
  top: 100%;   /* кайма начинается ровно от нижнего края блока */
  transform: scaleY(1);
}

/* Кайма внутри блока, фестонами вверх — для «подола» секции,
   когда наружу выпускать нельзя (например у блока есть overflow). */
.orn-lace-bottom--inside {
  top: auto;
  bottom: 0;
  transform: scaleY(-1);
}

/* Мелкое кружево — для узких мест: карточек, полосок, бейджей. */
.orn-lace-top--fine,
.orn-lace-bottom--fine {
  --orn-h: 24px;
  -webkit-mask-image: url("../assets/orn/lace-border-fine.svg");
          mask-image: url("../assets/orn/lace-border-fine.svg");
}

/* ── Кружевной уголок рамки ───────────────────────────────────────
   Ставится в угол карточки или блока-рамки. По умолчанию левый
   верхний; остальные три угла — модификаторами поворота.        */
.orn-lace-corner {
  --orn-size: 92px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--orn-size);
  height: var(--orn-size);
  -webkit-mask: url("../assets/orn/lace-corner.svg") center / contain no-repeat;
          mask: url("../assets/orn/lace-corner.svg") center / contain no-repeat;
}
.orn-lace-corner--tr { left: auto; right: 0; transform: scaleX(-1); }
.orn-lace-corner--bl { top: auto; bottom: 0; transform: scaleY(-1); }
.orn-lace-corner--br { top: auto; left: auto; right: 0; bottom: 0; transform: scale(-1); }

/* ── Лента-разделитель между секциями ─────────────────────────────
   Два слоя маски: сам бант с лентой по центру в своих пропорциях
   плюс тонкая линия, продолжающая ленту до краёв секции. Волна в
   SVG гаснет к краям, поэтому стыка не видно.                    */
.orn-divider {
  --orn-h: 34px;
  --orn-color: var(--blush-deep);
  display: block;
  width: 100%;
  height: var(--orn-h);
  -webkit-mask:
    url("../assets/orn/ribbon-divider.svg") center center / auto 100% no-repeat,
    linear-gradient(#000, #000) center center / 100% 1.5px no-repeat;
          mask:
    url("../assets/orn/ribbon-divider.svg") center center / auto 100% no-repeat,
    linear-gradient(#000, #000) center center / 100% 1.5px no-repeat;
}

/* ── Нить жемчуга ─────────────────────────────────────────────────
   Горизонтальная линия любой длины: жемчужины стыкуются бесшовно.
   Годится как подчёркивание заголовка или граница блока.        */
.orn-pearls {
  --orn-h: 16px;
  --orn-color: var(--silver);
  display: block;
  width: 100%;
  height: var(--orn-h);
  -webkit-mask: url("../assets/orn/pearl-string.svg") left center / auto 100% repeat-x;
          mask: url("../assets/orn/pearl-string.svg") left center / auto 100% repeat-x;
}

/* ── Тканевая бирка ───────────────────────────────────────────────
   Вешается в угол карточки товара. Родителю нужен position:
   relative. Наклон делает её похожей на настоящую пришитую бирку. */
.orn-tag {
  --orn-w: 104px;
  --orn-color: var(--ink);
  position: absolute;
  top: 12px;
  right: 10px;   /* внутри карточки: вынос наружу задаётся на месте */
  width: var(--orn-w);
  aspect-ratio: 160 / 96;
  transform: rotate(-7deg);
  transform-origin: top right;
  -webkit-mask: url("../assets/orn/tag-dare.svg") center / contain no-repeat;
          mask: url("../assets/orn/tag-dare.svg") center / contain no-repeat;
}

/* ── Вертикальная строчка-стежки ──────────────────────────────────
   Линия навигации: тянется на любую высоту, стык не виден.      */
.orn-stitch {
  --orn-w: 7px;
  --orn-color: var(--cherry);
  display: block;
  width: var(--orn-w);
  height: 100%;
  min-height: 48px;
  -webkit-mask: url("../assets/orn/stitch-line.svg") center top / 100% auto repeat-y;
          mask: url("../assets/orn/stitch-line.svg") center top / 100% auto repeat-y;
}

/* ── Искра-страз ──────────────────────────────────────────────────
   Точечный акцент: у цены, у кнопки, у фото. Размер — переменной. */
.orn-sparkle {
  --orn-size: 20px;
  display: inline-block;
  width: var(--orn-size);
  height: var(--orn-size);
  vertical-align: middle;
  -webkit-mask: url("../assets/orn/sparkle.svg") center / contain no-repeat;
          mask: url("../assets/orn/sparkle.svg") center / contain no-repeat;
}

/* ── Бант ─────────────────────────────────────────────────────────
   Крупный акцент: на обложке, над заголовком, на карточке.      */
.orn-bow {
  --orn-w: 120px;
  display: inline-block;
  width: var(--orn-w);
  aspect-ratio: 200 / 140;
  -webkit-mask: url("../assets/orn/bow.svg") center / contain no-repeat;
          mask: url("../assets/orn/bow.svg") center / contain no-repeat;
}

/* ── Фестончатый низ секции ───────────────────────────────────────
   Блок заканчивается не прямой линией, а кружевным краем. Работает
   маской по самому блоку вместе с его фоном и картинкой.
   Без поддержки масок край останется ровным — пустоты не будет,
   поэтому правило и лежит внутри @supports.                      */
.orn-scallop-bottom {
  --orn-scallop-h: 44px;
  /* запас сверх высоты фестонов: иначе последняя строка текста
     попадает в вырезанную зону и обрезается маской */
  padding-bottom: calc(var(--orn-scallop-h) + 1rem);
}

@supports ((-webkit-mask-image: url("../assets/orn/scallop-mask.svg")) or (mask-image: url("../assets/orn/scallop-mask.svg"))) {
  .orn-scallop-bottom {
    -webkit-mask:
      linear-gradient(#000, #000) top left / 100% calc(100% - var(--orn-scallop-h) + 1px) no-repeat,
      url("../assets/orn/scallop-mask.svg") bottom left / auto var(--orn-scallop-h) repeat-x;
            mask:
      linear-gradient(#000, #000) top left / 100% calc(100% - var(--orn-scallop-h) + 1px) no-repeat,
      url("../assets/orn/scallop-mask.svg") bottom left / auto var(--orn-scallop-h) repeat-x;
  }
}

/* ── Телефон ──────────────────────────────────────────────────────
   На узком экране крупное кружево превращается в кашу: кайма
   переключается на мелкий рисунок, а декор становится компактнее.
   Порог 640 px — тот же, что у остальной вёрстки проекта.        */
@media (max-width: 640px) {
  .orn-lace-top,
  .orn-lace-bottom {
    --orn-h: 22px;
    -webkit-mask-image: url("../assets/orn/lace-border-fine.svg");
            mask-image: url("../assets/orn/lace-border-fine.svg");
  }
  .orn-lace-top--fine,
  .orn-lace-bottom--fine { --orn-h: 15px; }

  .orn-lace-corner  { --orn-size: 56px; }
  .orn-divider      { --orn-h: 24px; }
  .orn-pearls       { --orn-h: 11px; }
  .orn-tag          { --orn-w: 78px; top: 8px; right: -6px; }
  .orn-stitch       { --orn-w: 5px; }
  .orn-sparkle      { --orn-size: 15px; }
  .orn-bow          { --orn-w: 84px; }
  .orn-scallop-bottom { --orn-scallop-h: 26px; }
}

/* Печать: орнаменты — украшение экрана, на бумаге они съедают тонер. */
@media print {
  .orn-lace-top,
  .orn-lace-bottom,
  .orn-lace-corner,
  .orn-divider,
  .orn-pearls,
  .orn-stitch,
  .orn-sparkle,
  .orn-bow { display: none; }
}