/* InviteNoma — декоративные слои шаблонов.
   Паттерны нарисованы SVG в data-URI и красятся токеном темы,
   поэтому не тянут за собой картинок и работают на любой палитре. */

.decor-layer {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--e-out) .4s;
}
html.is-open .decor-layer { opacity: 1; }

/* --- сузани: волнистая линия с кругами --- */
[data-decor="suzani"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='1' opacity='0.16'%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3Cpath d='M60 40c8 10 8 30 0 40-8-10-8-30 0-40Z'/%3E%3Cpath d='M20 60c8-8 20-8 28 0M72 60c8-8 20-8 28 0'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='110' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --- жемчуг: сетка мягких точек --- */
[data-decor="pearl"] .decor-layer {
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-gold-soft) 55%, transparent) 0 2px, transparent 2px);
  background-size: 26px 26px;
  opacity: 0;
}
html.is-open [data-decor="pearl"] .decor-layer,
html.is-open .decor-layer { opacity: .55; }

/* --- ботаника: веточки --- */
[data-decor="botanical"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%236F8C79' stroke-width='1.1' opacity='0.22'%3E%3Cpath d='M20 120C40 90 45 55 40 20'/%3E%3Cpath d='M40 100c-12-4-18-12-20-22M40 78c12-4 18-12 20-22M40 56c-12-4-18-12-20-22'/%3E%3Cpath d='M120 130c-16-24-20-52-16-80'/%3E%3Cpath d='M106 106c10-3 14-10 16-18M106 84c-10-3-14-10-16-18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* --- гранат --- */
[data-decor="pomegranate"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23C25B3E' stroke-width='1.1' opacity='0.20'%3E%3Ccircle cx='65' cy='72' r='24'/%3E%3Cpath d='M65 48V34l-8-6M65 34l8-6'/%3E%3Cpath d='M53 72a12 12 0 0 1 24 0M65 60v24'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='112' cy='112' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 190px 190px;
}

/* --- звёзды для тёмной темы --- */
[data-decor="stars"] .decor-layer {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(216,185,120,.55) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(216,185,120,.40) 0 1px, transparent 1.4px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.35) 0 1px, transparent 1.4px);
  background-size: 180px 180px, 120px 120px, 220px 220px;
}

/* --- цветочный --- */
[data-decor="floral"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C98B86' stroke-width='1' opacity='0.24'%3E%3Cg transform='translate(60 60)'%3E%3Cellipse rx='6' ry='14'/%3E%3Cellipse rx='6' ry='14' transform='rotate(60)'/%3E%3Cellipse rx='6' ry='14' transform='rotate(120)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3Ccircle cx='16' cy='18' r='2.5'/%3E%3Ccircle cx='104' cy='100' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* --- исламская геометрия --- */
[data-decor="islamic"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231E5C8A' stroke-width='1' opacity='0.18'%3E%3Cpath d='M50 6 94 50 50 94 6 50Z'/%3E%3Cpath d='M50 22 78 50 50 78 22 50Z'/%3E%3Cpath d='M6 50h88M50 6v88'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* --- мрамор --- */
[data-decor="marble"] .decor-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' opacity='0.06'%3E%3Cpath d='M-20 120C60 90 120 160 200 130s140 40 220 10'/%3E%3Cpath d='M-20 260C70 230 130 300 210 270s140 30 210 0'/%3E%3Cpath d='M120 -20c20 90-30 140 10 220s0 140-20 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
}

/* --- акварельные пятна --- */
[data-decor="watercolor"] .decor-layer {
  background-image:
    radial-gradient(ellipse 220px 160px at 12% 18%, color-mix(in srgb, var(--c-gold-soft) 45%, transparent), transparent 70%),
    radial-gradient(ellipse 260px 180px at 88% 32%, color-mix(in srgb, var(--c-rose) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 240px 200px at 30% 88%, color-mix(in srgb, var(--c-sage) 28%, transparent), transparent 72%);
  filter: blur(6px);
}

/* --- плёночное зерно --- */
[data-decor="grain"] .decor-layer {
  background-image: url("../img/noise.svg");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0;
}
html.is-open [data-decor="grain"] .decor-layer { opacity: .55; }

/* --- икат/хан-атлас --- */
[data-decor="ikat"] .decor-layer {
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg opacity='0.14'%3E%3Cpath d='M80 10c14 22 14 44 0 66-14-22-14-44 0-66Z' fill='%23C8127C'/%3E%3Cpath d='M80 84c12 20 12 40 0 60-12-20-12-40 0-60Z' fill='%23E8A02A'/%3E%3Cpath d='M10 80c22-14 44-14 66 0-22 14-44 14-66 0Z' fill='%232E8B72'/%3E%3Cpath d='M84 80c20-12 40-12 60 0-20 12-40 12-60 0Z' fill='%23C8127C'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
}

[data-decor="none"] .decor-layer { display: none; }

@media (prefers-reduced-motion: reduce) {
  .decor-layer { transition: none; }
}