/* ══════════════════════════════════════════════════════════════
   PREMIUM ISLAMIC GEOMETRIC BACKGROUND SYSTEM (QUATREFOIL)
   Shared Visual Identity — Durus Al Madinah & Peak Experiences
   
   Architecture:
   • Layer 1 — Large Moroccan Pointed Quatrefoil (180px × 200px)
   • Layer 2 — Fine Pointed Quatrefoil Lattice (90px × 100px)
   • Embossed/Carved effect: Highlight line + shadow line
   
   All colors are strictly from the shared brand palette:
   #C9A646  (gold), #D4B86A (gold-soft), #F5E6C8 (beige)
   No new colors. Absolutely no stars.
══════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────── */

/* Layer 1 — slow opacity breath (very subtle) */
@keyframes islamic-breath {
  0%,  100% { opacity: 0.95; }
  50%        { opacity: 0.7; }
}

/* Layer 2 — ultra-slow gentle float */
@keyframes islamic-float {
  0%,  100% { transform: translateY(0px); }
  50%        { transform: translateY(-1.5px); }
}

/* ── Base Islamic Background Class ──────────────────────── */

.bg-islamic {
  background-color: var(--beige, #F5E6C8);
  position: relative;
  isolation: isolate;
}

/* Remove old background images */
.bg-islamic {
  background-image: none !important;
}

.bg-islamic::before,
.bg-islamic::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ── Layer 1: Large Moroccan Pointed Quatrefoil Trellis (180px × 200px) ── */
.bg-islamic::before {
  /*
    Pointed Quatrefoil Trellis — matching user screenshot.
    Gold line + white shadow line to simulate carved stone.
  */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cdefs%3E%3Cpattern id='qf1' width='180' height='200' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Gold Shadow Lines --%3E%3Cg stroke='%23C9A646' stroke-width='1.0' opacity='0.22'%3E%3Cpath d='M 90,0 C 100,0 120,16 120,36 C 120,56 144,84 180,100 C 144,116 120,144 120,164 C 120,184 100,200 90,200 C 80,200 60,184 60,164 C 60,144 36,116 0,100 C 36,84 60,56 60,36 C 60,16 80,0 90,0 Z'/%3E%3Cpath d='M 0,-100 C 10,-100 30,-84 30,-64 C 30,-44 54,-16 90,0 C 54,16 30,44 30,64 C 30,84 10,100 0,100 C -10,100 -30,84 -30,64 C -30,44 -54,16 -90,0 C -54,-16 -30,-44 -30,-64 C -30,-84 -10,-100 0,-100 Z'/%3E%3Cpath d='M 180,-100 C 190,-100 210,-84 210,-64 C 210,-44 234,-16 270,0 C 234,16 210,44 210,64 C 210,84 190,100 180,100 C 170,100 150,84 150,64 C 150,44 126,16 90,0 C 126,-16 150,-44 150,-64 C 150,-84 170,-100 180,-100 Z'/%3E%3C/g%3E%3C!-- White Highlight Lines (offset by 0.6px to create carved stone 3D bevel look) --%3E%3Cg stroke='%23FFFFFF' stroke-width='0.55' opacity='0.45' transform='translate(0.6, 0.6)'%3E%3Cpath d='M 90,0 C 100,0 120,16 120,36 C 120,56 144,84 180,100 C 144,116 120,144 120,164 C 120,184 100,200 90,200 C 80,200 60,184 60,164 C 60,144 36,116 0,100 C 36,84 60,56 60,36 C 60,16 80,0 90,0 Z'/%3E%3Cpath d='M 0,-100 C 10,-100 30,-84 30,-64 C 30,-44 54,-16 90,0 C 54,16 30,44 30,64 C 30,84 10,100 0,100 C -10,100 -30,84 -30,64 C -30,44 -54,16 -90,0 C -54,-16 -30,-44 -30,-64 C -30,-84 -10,-100 0,-100 Z'/%3E%3Cpath d='M 180,-100 C 190,-100 210,-84 210,-64 C 210,-44 234,-16 270,0 C 234,16 210,44 210,64 C 210,84 190,100 180,100 C 170,100 150,84 150,64 C 150,44 126,16 90,0 C 126,-16 150,-44 150,-64 C 150,-84 170,-100 180,-100 Z'/%3E%3C/g%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='200' fill='url(%23qf1)'/%3E%3C/svg%3E");
  background-size: 180px 200px;
  background-repeat: repeat;
  opacity: 0.85;
  animation: islamic-breath 22s ease-in-out infinite;
  will-change: opacity;
}

/* ── Layer 2: Medium pointed ogee lattice (90px × 100px) ── */
.bg-islamic::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='100' viewBox='0 0 90 100'%3E%3Cdefs%3E%3Cpattern id='qf2' width='90' height='100' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Gold Shadow Lines --%3E%3Cg stroke='%23C9A646' stroke-width='0.7' opacity='0.16'%3E%3Cpath d='M 45,0 C 50,0 60,8 60,18 C 60,28 72,42 90,50 C 72,58 60,72 60,82 C 60,92 50,100 45,100 C 40,100 30,92 30,82 C 30,72 18,58 0,50 C 18,42 30,28 30,18 C 30,8 40,0 45,0 Z'/%3E%3Cpath d='M 0,-50 C 5,-50 15,-42 15,-32 C 15,-22 27,-8 45,0 C 27,8 15,22 15,32 C 15,42 5,50 0,50 C -5,50 -15,42 -15,32 C -15,22 -27,8 -45,0 C -27,-8 -15,-22 -15,-32 C -15,-42 -5,-50 0,-50 Z'/%3E%3Cpath d='M 90,-50 C 95,-50 105,-42 105,-32 C 105,-22 117,-8 135,0 C 117,8 105,22 105,32 C 105,42 95,50 90,50 C 85,50 75,42 75,32 C 75,22 63,8 45,0 C 63,-8 75,-22 75,-32 C 75,-42 85,-50 90,-50 Z'/%3E%3C/g%3E%3C!-- White Highlight Lines --%3E%3Cg stroke='%23FFFFFF' stroke-width='0.45' opacity='0.32' transform='translate(0.5, 0.5)'%3E%3Cpath d='M 45,0 C 50,0 60,8 60,18 C 60,28 72,42 90,50 C 72,58 60,72 60,82 C 60,92 50,100 45,100 C 40,100 30,92 30,82 C 30,72 18,58 0,50 C 18,42 30,28 30,18 C 30,8 40,0 45,0 Z'/%3E%3Cpath d='M 0,-50 C 5,-50 15,-42 15,-32 C 15,-22 27,-8 45,0 C 27,8 15,22 15,32 C 15,42 5,50 0,50 C -5,50 -15,42 -15,32 C -15,22 -27,8 -45,0 C -27,-8 -15,-22 -15,-32 C -15,-42 -5,-50 0,-50 Z'/%3E%3Cpath d='M 90,-50 C 95,-50 105,-42 105,-32 C 105,-22 117,-8 135,0 C 117,8 105,22 105,32 C 105,42 95,50 90,50 C 85,50 75,42 75,32 C 75,22 63,8 45,0 C 63,-8 75,-22 75,-32 C 75,-42 85,-50 90,-50 Z'/%3E%3C/g%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='90' height='100' fill='url(%23qf2)'/%3E%3C/svg%3E");
  background-size: 90px 100px;
  background-repeat: repeat;
  opacity: 0.8;
  animation: islamic-float 26s ease-in-out infinite;
  will-change: transform;
}

/* ── Ambient Radial Glow Wash (Strictly existing colors) ── */
.bg-islamic {
  background-image:
    radial-gradient(ellipse 72% 60% at 75% 45%, rgba(201,166,70,0.045) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 20% 75%, rgba(212,184,106,0.035) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 10%, rgba(201,166,70,0.025) 0%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ── Dark Islamic Variant (Pointed Quatrefoil) ── */

.bg-dark-islamic {
  background-color: var(--dark, #1A1410);
  position: relative;
  isolation: isolate;
}

.bg-dark-islamic {
  background-image:
    radial-gradient(ellipse 65% 55% at 70% 50%, rgba(201,166,70,0.03) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 25% 70%, rgba(212,184,106,0.02) 0%, transparent 60%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bg-dark-islamic::before,
.bg-dark-islamic::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-dark-islamic::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cdefs%3E%3Cpattern id='qfd1' width='180' height='200' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23C9A646' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cpath d='M 90,0 C 100,0 120,16 120,36 C 120,56 144,84 180,100 C 144,116 120,144 120,164 C 120,184 100,200 90,200 C 80,200 60,184 60,164 C 60,144 36,116 0,100 C 36,84 60,56 60,36 C 60,16 80,0 90,0 Z'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='200' fill='url(%23qfd1)'/%3E%3C/svg%3E");
  background-size: 180px 200px;
  opacity: 0.8;
  animation: islamic-breath 22s ease-in-out infinite;
}

.bg-dark-islamic::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='100' viewBox='0 0 90 100'%3E%3Cdefs%3E%3Cpattern id='qfd2' width='90' height='100' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23C9A646' stroke-width='0.55' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'%3E%3Cpath d='M 45,0 C 50,0 60,8 60,18 C 60,28 72,42 90,50 C 72,58 60,72 60,82 C 60,92 50,100 45,100 C 40,100 30,92 30,82 C 30,72 18,58 0,50 C 18,42 30,28 30,18 C 30,8 40,0 45,0 Z'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='90' height='100' fill='url(%23qfd2)'/%3E%3C/svg%3E");
  background-size: 90px 100px;
  opacity: 0.7;
  animation: islamic-float 28s ease-in-out infinite;
}

/* ── Cream Islamic Variant (Alternate sections) ── */

.bg-islamic-cream {
  background-color: var(--cream, #FBF6EA);
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201,166,70,0.02) 0%, transparent 70%) !important;
  position: relative;
  isolation: isolate;
}

.bg-islamic-cream::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'%3E%3Cdefs%3E%3Cpattern id='qfc1' width='180' height='200' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23C9A646' stroke-width='0.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cpath d='M 90,0 C 100,0 120,16 120,36 C 120,56 144,84 180,100 C 144,116 120,144 120,164 C 120,184 100,200 90,200 C 80,200 60,184 60,164 C 60,144 36,116 0,100 C 36,84 60,56 60,36 C 60,16 80,0 90,0 Z'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='200' fill='url(%23qfc1)'/%3E%3C/svg%3E");
  background-size: 180px 200px;
  opacity: 0.75;
  animation: islamic-breath 20s ease-in-out infinite 4s;
}

.bg-islamic-cream::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='100' viewBox='0 0 90 100'%3E%3Cdefs%3E%3Cpattern id='qfc2' width='90' height='100' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%23D4B86A' stroke-width='0.45' stroke-linecap='round' stroke-linejoin='round' opacity='0.12'%3E%3Cpath d='M 45,0 C 50,0 60,8 60,18 C 60,28 72,42 90,50 C 72,58 60,72 60,82 C 60,92 50,100 45,100 C 40,100 30,92 30,82 C 30,72 18,58 0,50 C 18,42 30,28 30,18 C 30,8 40,0 45,0 Z'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='90' height='100' fill='url(%23qfc2)'/%3E%3C/svg%3E");
  background-size: 90px 100px;
  opacity: 0.6;
  animation: islamic-float 32s ease-in-out infinite 2s;
}

/* Ensure content sits above layers */
.bg-islamic > *:not(.islamic-layer3) {
  position: relative;
  z-index: 1;
}

.bg-dark-islamic > * {
  position: relative;
  z-index: 1;
}

.bg-islamic-cream > * {
  position: relative;
  z-index: 1;
}

/* ── Reduced Motion Respect ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-islamic::before,
  .bg-islamic::after,
  .bg-dark-islamic::before,
  .bg-dark-islamic::after,
  .bg-islamic-cream::before,
  .bg-islamic-cream::after {
    animation: none !important;
  }
}