/* ЭкоДом · Орнаменты
 * Стили использования SVG-орнаментов: бордюр, медальоны, разделители, фон-паттерн.
 * SVG используют currentColor → цвет задаём через CSS color. */

/* ============ БОРДЮР БІТПЕС (верхний и нижний) ============ */
.border-strip {
  position: relative;
  width: 100%;
  height: 22px;
  color: var(--color-gold);
  background-image: url('../assets/ornaments/bitpes-border.svg');
  background-repeat: repeat-x;
  background-size: auto 22px;
  background-position: center;
  opacity: 0.75;
  z-index: 5;
}

.border-strip--top {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--color-graphite);
  border-bottom: 1px solid var(--color-border-gold);
}

.border-strip--bottom {
  background-color: transparent;
  margin: var(--space-12) 0 var(--space-6);
  opacity: 0.55;
}

/* ============ ФОНОВЫЙ ПАТТЕРН СУЛЫ ============ */
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: url('../assets/ornaments/suly-pattern.svg');
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.05;
  color: var(--color-gold);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

.section--principles::before,
.section--final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/ornaments/suly-pattern.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.04;
  color: var(--color-gold);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* ============ РАЗДЕЛИТЕЛЬ ҚОС-МҮЙІЗ ============ */
.ornament-divider {
  position: relative;
  margin: var(--space-16) auto var(--space-12);
  width: min(360px, 80%);
  height: 40px;
  color: var(--color-gold);
  background-image: url('../assets/ornaments/qos-muyiz-divider.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
}

/* ============ МЕДАЛЬОН ҚОШҚАР-МҮЙІЗ ============ */
.medallion {
  position: relative;
  color: var(--color-gold);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.medallion--large {
  width: clamp(280px, 32vw, 440px);
  aspect-ratio: 1;
}

.medallion--small {
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1;
  margin: 0 auto var(--space-6);
}

.medallion__inner {
  position: absolute;
  inset: 0;
  background-image: url('../assets/ornaments/kosqar-medallion.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 24px oklch(72% 0.13 85 / 0.35));
  animation: gentle-rotate 80s linear infinite;
}

.medallion__ring {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px dashed var(--color-border-gold);
  opacity: 0.4;
  animation: counter-rotate 120s linear infinite;
}

@keyframes gentle-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counter-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ============ УГЛОВЫЕ ОРНАМЕНТЫ КАРТОЧЕК ============ */
.corner-frame {
  position: relative;
}

.corner-frame::before,
.corner-frame::after,
.corner-frame > .corner-frame__bl,
.corner-frame > .corner-frame__br {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: var(--color-gold);
  opacity: 0.7;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.corner-frame::before {
  top: 8px; left: 8px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}

.corner-frame::after {
  top: 8px; right: 8px;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
}

.corner-frame > .corner-frame__bl {
  bottom: 8px; left: 8px;
  border-bottom: 1.5px solid var(--color-gold);
  border-left: 1.5px solid var(--color-gold);
  opacity: 0.7;
}

.corner-frame > .corner-frame__br {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid var(--color-gold);
  border-right: 1.5px solid var(--color-gold);
  opacity: 0.7;
}

.corner-frame:hover::before,
.corner-frame:hover::after,
.corner-frame:hover > .corner-frame__bl,
.corner-frame:hover > .corner-frame__br {
  opacity: 1;
}

/* ============ УГЛЫ ФОТО О ФЕРМЕ ============ */
.about__photo-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border-color: var(--color-gold);
  opacity: 0.7;
}

.about__photo-corner--tl { top: -2px;    left: -2px;    border-top: 1.5px solid; border-left: 1.5px solid; }
.about__photo-corner--tr { top: -2px;    right: -2px;   border-top: 1.5px solid; border-right: 1.5px solid; }
.about__photo-corner--bl { bottom: -2px; left: -2px;    border-bottom: 1.5px solid; border-left: 1.5px solid; }
.about__photo-corner--br { bottom: -2px; right: -2px;   border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* ============ ИКОНКИ ПРИНЦИПОВ (стилизованные) ============ */
.principle__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient-gold-soft);
  border: 1px solid var(--color-border-gold);
  margin-bottom: var(--space-5);
  position: relative;
}

.principle__icon::after {
  content: '';
  width: 24px;
  height: 24px;
  background-color: var(--color-gold);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.principle__icon--wheat::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2c-1 3-1 5 0 7 1-2 1-4 0-7zM6 7c0 3 2 5 4 6 0-3-2-5-4-6zm12 0c0 3-2 5-4 6 0-3 2-5 4-6zM6 13c0 3 2 5 4 6 0-3-2-5-4-6zm12 0c0 3-2 5-4 6 0-3 2-5 4-6zm-6 9V8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2c-1 3-1 5 0 7 1-2 1-4 0-7zM6 7c0 3 2 5 4 6 0-3-2-5-4-6zm12 0c0 3-2 5-4 6 0-3 2-5 4-6zM6 13c0 3 2 5 4 6 0-3-2-5-4-6zm12 0c0 3-2 5-4 6 0-3 2-5 4-6zm-6 9V8'/%3E%3C/svg%3E");
}

.principle__icon--milk::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M8 2h8v3l-1 2v13a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V7L8 5V2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M8 2h8v3l-1 2v13a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V7L8 5V2z'/%3E%3C/svg%3E");
}

.principle__icon--hands::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M4 11V7a2 2 0 0 1 4 0v6m0-4v8a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v-4l3-3a2 2 0 0 0 0-3l-3 3V7a2 2 0 0 0-4 0v6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'%3E%3Cpath d='M4 11V7a2 2 0 0 1 4 0v6m0-4v8a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v-4l3-3a2 2 0 0 0 0-3l-3 3V7a2 2 0 0 0-4 0v6'/%3E%3C/svg%3E");
}

.principle__icon--check::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}