/* ============================================================
   Ornamentation - Arabic geometric + Persian floral patterns
   ============================================================ */

:root {
  /* Arabic eight-point star lattice (subtle global texture) */
  --pat-geo: 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='%23b8954e' stroke-width='1' stroke-opacity='0.85'%3E%3Cpath d='M50 10L90 50L50 90L10 50Z'/%3E%3Cpath d='M22 22L78 22L78 78L22 78Z'/%3E%3Cpath d='M0 -40L40 0L0 40L-40 0Z'/%3E%3Cpath d='M-28 -28L28 -28L28 28L-28 28Z'/%3E%3Cpath d='M100 -40L140 0L100 40L60 0Z'/%3E%3Cpath d='M72 -28L128 -28L128 28L72 28Z'/%3E%3Cpath d='M0 60L40 100L0 140L-40 100Z'/%3E%3Cpath d='M-28 72L28 72L28 128L-28 128Z'/%3E%3Cpath d='M100 60L140 100L100 140L60 100Z'/%3E%3Cpath d='M72 72L128 72L128 128L72 128Z'/%3E%3C/g%3E%3C/svg%3E");

  /* Persian floral diaper (richer, for accent sections) - gold line-art */
  --pat-persian: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23caa64a' stroke-width='1' stroke-opacity='0.9'%3E%3Cpath d='M30 30C33 24 33 18 30 13C27 18 27 24 30 30Z'/%3E%3Cpath d='M30 30C36 27 42 27 47 30C42 33 36 33 30 30Z'/%3E%3Cpath d='M30 30C33 36 33 42 30 47C27 42 27 36 30 30Z'/%3E%3Cpath d='M30 30C24 27 18 27 13 30C18 33 24 33 30 30Z'/%3E%3Ccircle cx='30' cy='30' r='1.6'/%3E%3Cpath d='M0 0C3 -6 3 -12 0 -17C-3 -12 -3 -6 0 0Z'/%3E%3Cpath d='M0 0C6 -3 12 -3 17 0C12 3 6 3 0 0Z'/%3E%3Cpath d='M0 0C3 6 3 12 0 17C-3 12 -3 6 0 0Z'/%3E%3Cpath d='M0 0C-6 -3 -12 -3 -17 0C-12 3 -6 3 0 0Z'/%3E%3Cpath d='M60 0C63 -6 63 -12 60 -17C57 -12 57 -6 60 0Z'/%3E%3Cpath d='M60 0C66 -3 72 -3 77 0C72 3 66 3 60 0Z'/%3E%3Cpath d='M60 0C63 6 63 12 60 17C57 12 57 6 60 0Z'/%3E%3Cpath d='M60 0C54 -3 48 -3 43 0C48 3 54 3 60 0Z'/%3E%3Cpath d='M0 60C3 54 3 48 0 43C-3 48 -3 54 0 60Z'/%3E%3Cpath d='M0 60C6 57 12 57 17 60C12 63 6 63 0 60Z'/%3E%3Cpath d='M60 60C57 54 57 48 60 43C63 48 63 54 60 60Z'/%3E%3Cpath d='M60 60C54 57 48 57 43 60C48 63 54 63 60 60Z'/%3E%3C/g%3E%3C/svg%3E");

  /* Fine girih line for borders */
  --pat-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cg fill='none' stroke='%23caa64a' stroke-width='1' stroke-opacity='0.6'%3E%3Cpath d='M0 6L6 0L12 6L18 0L24 6L30 0L36 6'/%3E%3Cpath d='M0 12L6 6L12 12L18 6L24 12L30 6L36 12'/%3E%3C/g%3E%3C/svg%3E");
}

/* Global texture is handled by the layered .bg-atmos system (background.css)
   so the pattern can breathe, drift, and fade behind text. */

/* Sections that should NOT show the texture sit on opaque panels already.
   Dark sections get a Persian overlay instead. */
.persian-bg { position: relative; isolation: isolate; }
.persian-bg::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--pat-persian);
  background-size: 132px 132px;
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.persian-bg.dense::before { opacity: 0.16; background-size: 96px 96px; }

/* Ornamental divider - gold star flanked by rules */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: var(--accent); margin: 0 auto;
}
.ornament::before, .ornament::after {
  content: ''; height: 1px; width: clamp(40px, 12vw, 120px);
  background: linear-gradient(90deg, transparent, var(--accent-deep));
}
.ornament::after { background: linear-gradient(90deg, var(--accent-deep), transparent); }
.ornament svg { opacity: 0.9; }

/* Glass surface utility - used sparingly */
.glass {
  background: rgba(246, 242, 233, 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.glass-dark {
  background: rgba(14, 31, 26, 0.42);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(217, 189, 118, 0.22);
}

/* Decorative corner brackets for framed elements */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--accent); opacity: 0.7;
}
.framed::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.framed::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }