/* ============================================================
   Цвете: десет вида от тънки линии (рисуват се на сървъра).
   Цъфтят малко преди да се покажат, после бавно се въртят.
   Цветът е --fl (по подразбиране цветът на стаята), дебелината --flw (в пиксели).
   Мястото и размерът на всяко цвете са в CSS на страницата (или в елемента, който го ползва).
   ============================================================ */

.fl { display: block; overflow: visible; pointer-events: none; color: var(--fl, var(--room, #E6C910)); --fs: 90ms; --fd: 0ms; }
/* дебелината е в пиксели на екрана: --u = единици от рисунката на 1 пиксел (слага го скриптът) */
.fl path, .fl circle, .fl ellipse { fill: none; stroke: currentColor; stroke-width: calc(var(--flw, 1.1) * var(--u, 1)); stroke-linecap: round; stroke-linejoin: round; }
.fl-spin { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--tw)); }
.fl[data-vis] .fl-spin { animation: fl-spin 150s linear infinite; }
@keyframes fl-spin { from { transform: rotate(var(--tw)); } to { transform: rotate(calc(var(--tw) + 360deg)); } }

/* листчета около центъра (гледани отгоре): разтварят се и се завъртат на мястото си */
.fl-p { transform-box: view-box; transform-origin: 0 0; transform: rotate(calc(var(--r) - 40deg)) scale(.12); opacity: 0;
  transition: transform 2.4s var(--ease-out) calc(var(--fd) + var(--i) * var(--fs)), opacity 1s ease calc(var(--fd) + var(--i) * var(--fs)); }
.fl-p path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-io) calc(var(--fd) + var(--i) * var(--fs)); }
.fl[data-open] .fl-p { transform: rotate(var(--r)) scale(1); opacity: 1; }
.fl[data-open] .fl-p path { stroke-dashoffset: 0; }
.fl-vein { stroke-opacity: .45; }
.fl-p.is-in path { stroke-opacity: .8; }
.fl-p.is-l1 path { stroke-opacity: .85; }
.fl-p.is-l2 path { stroke-opacity: .7; }
.fl-peony .fl-p, .fl-rose .fl-p { transform: rotate(calc(var(--r) - 70deg)) scale(.06); }
.fl-peony[data-open] .fl-p, .fl-rose[data-open] .fl-p { transform: rotate(var(--r)) scale(1); }
.fl-ring { stroke-opacity: .5; stroke-dasharray: .006 .014; opacity: 0; transition: opacity 2s ease calc(var(--fd) + 1.2s); }
.fl[data-open] .fl-ring { opacity: 1; }

/* тичинки, точки и сърцевина */
.fl-st { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--r)) scale(0); transition: transform 1.6s var(--ease-out) calc(var(--fd) + 700ms + var(--i) * 45ms); }
.fl-st circle, .fl-st ellipse { fill: currentColor; stroke: none; }
.fl[data-open] .fl-st { transform: rotate(var(--r)) scale(1); }
.fl-core { fill: currentColor !important; stroke: none !important; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1s var(--ease-out) calc(var(--fd) + .4s); }
.fl[data-open] .fl-core { transform: scale(1); }
.fl-dot { fill: currentColor !important; stroke: none !important; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .9s var(--ease-out) calc(var(--fd) + 500ms + var(--i) * 30ms); }
.fl[data-open] .fl-dot { transform: scale(1); }

/* линии, които се изрисуват (стъбла, дъги, сърцевини) */
.fl-d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io) calc(var(--fd) + var(--i, 0) * 160ms); }
.fl[data-open] .fl-d { stroke-dashoffset: 0; }
.fl-soft { stroke-opacity: .6; }
.fl-bold { stroke-width: calc(var(--flw, 1.1) * 2.2); }

/* видовете, гледани отстрани (лотос, лале, кала): листчетата тръгват затворени и се разтварят като ветрило */
.fl.is-side .fl-spin { transform-origin: 0 46px; transform: none; }
.fl.is-side[data-vis] .fl-spin { animation: fl-sway 11s ease-in-out infinite alternate; }
@keyframes fl-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.fl-lp { transform-box: view-box; transform-origin: var(--ox, 0px) var(--oy, 46px); transform: rotate(0deg) scale(.55, .2); opacity: 0; transition: transform 2.6s var(--ease-out) calc(var(--fd) + var(--i) * 140ms), opacity 1s ease calc(var(--fd) + var(--i) * 140ms); }
.fl-lp path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io) calc(var(--fd) + var(--i) * 140ms); }
.fl[data-open] .fl-lp { transform: rotate(var(--a)) scale(1); opacity: 1; }
.fl[data-open] .fl-lp path { stroke-dashoffset: 0; }

/* самостоятелното цвете (елементът „Цвете“): трите големини */
.fl.pfl { height: auto; opacity: .72; --flw: 1.25; }
.fl.pfl.is-l { width: clamp(300px, 34vw, 600px); }
.fl.pfl.is-m { width: clamp(230px, 24vw, 420px); }
.fl.pfl.is-s { width: clamp(130px, 12vw, 210px); opacity: .85; }
@media (max-width: 700px) {
  .fl.pfl.is-l { width: 74vw; opacity: .45; }
  .fl.pfl.is-m { width: 60vw; opacity: .45; }
}

/* докато върви зареждането с брояча, цветята чакат */
html.wi-on .fl .fl-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fl[data-vis] .fl-spin, .fl.is-side[data-vis] .fl-spin { animation: none; }
  .fl-p, .fl-p path, .fl-st, .fl-core, .fl-dot, .fl-d, .fl-lp, .fl-lp path, .fl-ring { transition: none !important; }
}

/* ---------- цвете от ръба на секцията (сватбите) ----------
   Секцията има .has-fl; цветето има .wfl и размер .is-l / .is-m / .is-s.
   Мястото (left / right / top / bottom) е в CSS на елемента или на страницата. */
.pfx.has-fl { position: relative; isolation: isolate; overflow-x: clip; }
.pfx .fl.wfl { position: absolute; z-index: -1; height: auto; max-width: none; opacity: .72; --flw: 1.25; }
.pfx .fl.wfl.is-l { width: clamp(300px, 34vw, 600px); }
.pfx .fl.wfl.is-m { width: clamp(230px, 24vw, 420px); }
.pfx .fl.wfl.is-s { width: clamp(130px, 12vw, 210px); opacity: .85; }
@media (max-width: 700px) {
  /* на телефон цветята надничат наполовина от ръба, за да не пречат на текста */
  .pfx .fl.wfl.is-l { width: 74vw; opacity: .45; }
  .pfx .fl.wfl.is-m { width: 60vw; opacity: .45; }
  .pfx .fl.wfl.is-s { display: none; }
}