/* ============================================================
   Цитат между секциите: думите изплуват от мъглата при скрол.
   --q-bg фон, --q-accent цвят на орнамента и на плътните думи.
   ============================================================ */

.pfx.quote { position: relative; padding-block: clamp(110px, 20vh, 240px); text-align: center; }
.pfx.quote .wrap { position: relative; }
.pfx.quote figure { margin-inline: auto; }
.pfx.quote .q-mark { display: block; width: 9px; height: 9px; margin: 0 auto 34px; border: 1px solid var(--q-accent, var(--room)); transform: rotate(45deg); }
.pfx.quote blockquote { max-width: 21ch; margin-inline: auto; border: 0; font-size: clamp(30px, 4.2vw, 64px); line-height: 1.16; letter-spacing: -.025em; font-weight: 200; font-style: italic; text-wrap: balance; quotes: none; }
.pfx.quote blockquote::before, .pfx.quote blockquote::after { content: none; display: none; }
.pfx.quote.is-long blockquote { max-width: 27ch; font-size: clamp(26px, 3.4vw, 52px); }
.pfx.quote .qw { display: inline-block; white-space: pre; will-change: opacity, filter, transform; }
.pfx.quote blockquote b { font-weight: 600; letter-spacing: -.03em; }
.pfx.quote figcaption { margin-top: 30px; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.pfx.quote.tone-dark { background: var(--q-bg, #0B0D0F); color: #fff; }
.pfx.quote.tone-light { background: var(--q-bg, transparent); }

/* орнамент: линии от центъра навън, три диаманта и голяма бледа кавичка отзад */
[data-js] .pfx .q-orn[data-rv='orn'] { opacity: 1; transform: none; }
.pfx .q-orn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 38px; color: var(--q-accent, var(--room)); }
.pfx .q-orn i { width: clamp(60px, 10vw, 150px); height: 1px; background: currentColor; transform: scaleX(0); transition: transform 1.6s var(--ease-io) .2s; }
.pfx .q-orn i.l { transform-origin: right; }
.pfx .q-orn i.r { transform-origin: left; }
.pfx .q-orn b { width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg) scale(0); transition: transform .8s var(--ease-out) 1s; }
.pfx .q-orn b.c { width: 11px; height: 11px; background: currentColor; transition-delay: .6s; }
.pfx .q-orn em { position: absolute; left: 50%; top: -.3em; z-index: -1; font-size: clamp(160px, 18vw, 280px); line-height: 1; font-style: italic; font-weight: 200; opacity: 0; transform: translate(-50%, 20px); transition: opacity 1.4s, transform 1.8s var(--ease-out); }
.pfx .q-orn[data-in] i { transform: scaleX(1); }
.pfx .q-orn[data-in] b { transform: rotate(45deg) scale(1); }
.pfx .q-orn[data-in] em { opacity: .1; transform: translate(-50%, 0); }
.pfx.quote.has-orn figure { position: relative; isolation: isolate; }
.pfx.quote.has-orn blockquote b { color: color-mix(in srgb, var(--q-accent, var(--room)) 70%, currentColor); }

/* цвете отстрани (видът и страната са според текста) */
.pfx.quote.has-flower { overflow-x: clip; }
.pfx.quote.has-flower .wrap { z-index: 1; }
.pfx.quote .q-flower { position: absolute; z-index: 0; top: 50%; width: clamp(200px, 26vw, 420px); height: auto; opacity: .75; transform: translateY(-50%); }
.pfx.quote .q-flower.left { left: clamp(-120px, -6vw, -40px); }
.pfx.quote .q-flower.right { right: clamp(-120px, -6vw, -40px); }

/* фини линии в тъмен цитат: наклонени черти, знаци за изрязване и нишка към следващата секция */
.pfx.quote.has-deco { z-index: 1; }
.pfx .q-deco { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.pfx .q-lines { position: absolute; inset: -10% -20%; background: repeating-linear-gradient(115deg, color-mix(in srgb, currentColor 7%, transparent) 0 1px, transparent 1px 80px); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%); animation: q-drift 46s linear infinite; animation-play-state: paused; }
.pfx.quote[data-vis] .q-lines { animation-play-state: running; }
@keyframes q-drift { to { transform: translate3d(178.75px, 0, 0); } }
.pfx .q-cm { position: absolute; width: 22px; height: 22px; opacity: .35; }
.pfx .q-cm::before, .pfx .q-cm::after { content: ''; position: absolute; background: currentColor; }
.pfx .q-cm::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.pfx .q-cm::after { top: 50%; left: 0; right: 0; height: 1px; }
.pfx .q-cm.tl { left: var(--pad); top: 40px; }
.pfx .q-cm.tr { right: var(--pad); top: 40px; }
.pfx .q-cm.bl { left: var(--pad); bottom: 40px; }
.pfx .q-cm.br { right: var(--pad); bottom: 40px; }
.pfx .q-thread { position: absolute; left: 50%; top: calc(100% - 13vh); z-index: 2; width: 1px; height: 24vh; background: var(--q-accent, var(--room)); transform-origin: top; pointer-events: none; }
.pfx .q-thread::after { content: ''; position: absolute; left: -4px; bottom: -4px; width: 9px; height: 9px; border: 1px solid var(--q-accent, var(--room)); transform: rotate(45deg); }

@media (max-width: 700px) {
  .pfx.quote .q-flower { width: 210px; opacity: .5; }
  .pfx.quote .q-flower.left { left: -80px; }
  .pfx.quote .q-flower.right { right: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .pfx .q-orn i, .pfx .q-orn b, .pfx .q-orn em { transition: none; }
  .pfx .q-orn i { transform: scaleX(1); }
  .pfx .q-orn b { transform: rotate(45deg) scale(1); }
  .pfx .q-orn em { opacity: .1; transform: translate(-50%, 0); }
  .pfx .q-lines { animation: none; }
}