/* ============================================================
   SACRED MANDALA — Tantric Awakening section
   Uses provided mandala PNG, cleaned to transparent background.
   UNIVERSAL OPACITY: large mandala 0.75, small mandala 0.50
   (except section-dark / deep-forest backgrounds)
   ============================================================ */

.section-intro-sacred {
  position: relative;
  overflow: visible;
}

.section-intro-sacred .container {
  position: relative;
  z-index: 1;
}

/* Right-side mandala — smaller and shifted lower so it supports the image */
.sacred-mandala-wrap {
  position: absolute;
  top: 64%;
  right: 0%;
  transform: translateY(-50%);
  width: min(320px, 42vw);
  height: min(320px, 42vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}

/* UNIVERSAL: large mandala opacity = 0.75 */
.sacred-mandala-wrap.visible {
  opacity: 0.75;
}

/* Top-left mandala — visible at top-left of Welcome section */
.sacred-mandala-wrap-sm {
  position: absolute;
  top: 2%;
  left: 2%;
  width: min(220px, 32vw);
  height: min(220px, 32vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}

/* UNIVERSAL: small mandala opacity = 0.50 */
.sacred-mandala-wrap-sm.visible {
  opacity: 0.50;
}

.sacred-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  animation: sacredMandalaSpin 95s linear infinite;
}

.sacred-mandala-img-sm {
  animation: sacredMandalaSpin 120s linear infinite reverse;
}

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

/* Sacred starburst — radiant ray canvas (Stripe-style)
   Lives inside the content section; rays extend below via overflow:visible. */
.sacred-starburst {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 3s ease 0.5s;
}

.sacred-starburst.visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .sacred-mandala-wrap {
    top: 67%;
    right: -8%;
    width: min(260px, 68vw);
    height: min(260px, 68vw);
  }

  /* Mobile: same universal opacity as desktop */
  .sacred-mandala-wrap.visible {
    opacity: 0.75;
  }

  .sacred-mandala-wrap-sm {
    display: block;
    top: 3%;
    left: 3%;
    width: min(200px, 55vw);
    height: min(200px, 55vw);
  }

  /* Mobile: same universal opacity as desktop */
  .sacred-mandala-wrap-sm.visible {
    opacity: 0.50;
  }
}

/* ============================================================
   THREE PILLARS — centered mandala overlay
   UNIVERSAL OPACITY: 0.75 (same as sacred-mandala-wrap)
   ============================================================ */
.section-pillars-sacred {
  position: relative;
  overflow: hidden;
}

.section-pillars-sacred .container {
  position: relative;
  z-index: 1;
}

.pillars-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 66vw);
  height: min(720px, 66vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

.pillars-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

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

@media (max-width: 900px) {
  .pillars-mandala-wrap {
    width: min(600px, 88vw);
    height: min(600px, 88vw);
    opacity: 0.75;
  }
}

@media (max-width: 520px) {
  .pillars-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.75;
    top: 0;
    transform: translate(-50%, 0);
  }

  /* Duplicate pillars mandala positioned lower in the section on mobile */

}

/* ============================================================
   BOOK A TANTRIC SESSION — centered mandala overlay
   ============================================================ */
.book-session-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 62vw);
  height: min(680px, 62vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.50;
}

.book-session-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 900px) {
  .book-session-mandala-wrap {
    width: min(560px, 80vw);
    height: min(560px, 80vw);
    opacity: 0.50;
  }
}

@media (max-width: 520px) {
  .book-session-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.45;
  }
}

/* ============================================================
   OFFERINGS SECTION MANDALAS
   Same mandala artwork, size family, and slow animation as Tantric Awakening.
   UNIVERSAL OPACITY: one = 0.75, two = 0.50
   ============================================================ */
.offerings-mandala-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.offerings-mandala-section > .container {
  position: relative;
  z-index: 1;
}

.offerings-mandala {
  position: absolute;
  width: min(360px, 46vw);
  height: min(360px, 46vw);
  pointer-events: none;
  z-index: 0;
}

.offerings-mandala-one {
  top: 10%;
  left: -8%;
  opacity: 0.75;
}

.offerings-mandala-two {
  right: -9%;
  bottom: 7%;
  opacity: 0.50;
}

.offerings-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  animation: sacredMandalaSpin 95s linear infinite;
}

.offerings-mandala-two .offerings-mandala-img {
  animation-direction: reverse;
}

@media (max-width: 1024px) {
  .offerings-mandala {
    width: min(320px, 44vw);
    height: min(320px, 44vw);
  }

  .offerings-mandala-one {
    top: 8%;
    left: -16%;
    opacity: 0.75;
  }

  .offerings-mandala-two {
    right: -17%;
    bottom: 12%;
    opacity: 0.50;
  }
}

@media (max-width: 768px) {
  .offerings-mandala {
    width: min(260px, 58vw);
    height: min(260px, 58vw);
  }

  .offerings-mandala-one {
    top: 3%;
    left: -28%;
    opacity: 0.75;
  }

  .offerings-mandala-two {
    right: -30%;
    bottom: 18%;
    opacity: 0.50;
  }
}

@media (max-width: 480px) {
  .offerings-mandala {
    width: min(220px, 70vw);
    height: min(220px, 70vw);
  }

  .offerings-mandala-one {
    top: 2%;
    left: -42%;
    opacity: 0.75;
  }

  .offerings-mandala-two {
    right: -44%;
    bottom: 24%;
    opacity: 0.50;
  }
}

/* ============================================================
   ABOUT ORIGIN — unique mandala positions
   Same size/animation, different placement from home page
   UNIVERSAL OPACITY: 0.75 / 0.50
   ============================================================ */
#aboutSacredMandala {
  top: 22%;
  left: -5%;
  transform: none;
  z-index: 10;
  opacity: 0.75;
}

#aboutSacredMandalaSmall {
  top: auto;
  left: auto;
  bottom: 5%;
  right: -6%;
}

#aboutSacredStarburst {
  /* Inherits same flush positioning as home page starburst */
}

/* ============================================================
   ABOUT TRAINING & LINEAGE — big mandala background
   Same as Three Pillars on home, positioned in right column area
   UNIVERSAL OPACITY: 0.75
   ============================================================ */
.training-mandala-section {
  position: relative;
  overflow: hidden;
}

.training-mandala-section > .container {
  position: relative;
  z-index: 1;
}

.training-mandala-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(720px, 50vw);
  height: min(720px, 50vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

.training-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 900px) {
  .training-mandala-wrap {
    width: min(500px, 70vw);
    height: min(500px, 70vw);
    opacity: 0.75;
  }
}

@media (max-width: 520px) {
  .training-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.75;
  }
}

/* ============================================================
   VARIED MANDALA SPACING — alt classes for different pages
   Same mandala types, slightly different positions so pages
   don't exactly copy the home page spacing.
   UNIVERSAL OPACITY: one = 0.75, two = 0.50
   ============================================================ */

/* --- Offerings page: Intro section (alt1) --- */
.offerings-mandala-section-alt1 .offerings-mandala-one {
  top: 14%;
  left: -6%;
  opacity: 0.75;
  display: none;
}
.offerings-mandala-section-alt1 .offerings-mandala-two {
  right: -11%;
  bottom: 4%;
  opacity: 0.50;
}

/* --- Offerings page: Sacred Intimacy section (alt2) --- */
.offerings-mandala-section-alt2 .offerings-mandala-one {
  top: 6%;
  left: -12%;
  opacity: 0.75;
}
.offerings-mandala-section-alt2 .offerings-mandala-two {
  right: -7%;
  bottom: 14%;
  opacity: 0.50;
}

/* --- Offerings page: Couples Journey section (alt3) --- */
.offerings-mandala-section-alt3 .offerings-mandala-one {
  top: 18%;
  left: -10%;
  opacity: 0.75;
}
.offerings-mandala-section-alt3 .offerings-mandala-two {
  right: -13%;
  bottom: 10%;
  opacity: 0.50;
}

/* --- Offerings page: Testimonial section (alt4) — single mandala --- */
.offerings-mandala-section-alt4 .offerings-mandala-one {
  top: -8%;
  right: -5%;
  left: auto;
  opacity: 0.75;
}

/* --- Connect page: Intro section (connect1) --- */
.offerings-mandala-section-connect1 .offerings-mandala-one {
  top: 8%;
  left: -9%;
  opacity: 0.75;
}
.offerings-mandala-section-connect1 .offerings-mandala-two {
  right: -6%;
  bottom: 10%;
  opacity: 0.50;
}

/* --- Offerings page: Tantric Ritual mandala positions --- */
#offeringsRitualMandala {
  top: 58%;
  right: -8%;
  transform: none;
  opacity: 0.75;
}
#offeringsRitualMandalaSmall {
  top: -3%;
  left: -3%;
  opacity: 0.50;
}

/* Responsive adjustments for alt mandalas */
@media (max-width: 768px) {
  .offerings-mandala-section-alt1 .offerings-mandala-one,
  .offerings-mandala-section-alt2 .offerings-mandala-one,
  .offerings-mandala-section-alt3 .offerings-mandala-one,
  .offerings-mandala-section-connect1 .offerings-mandala-one {
    left: -30%;
    top: 2%;
    opacity: 0.75;
    display: block;
  }
  .offerings-mandala-section-alt1 .offerings-mandala-two,
  .offerings-mandala-section-alt2 .offerings-mandala-two,
  .offerings-mandala-section-alt3 .offerings-mandala-two,
  .offerings-mandala-section-connect1 .offerings-mandala-two {
    right: -32%;
    bottom: 18%;
    opacity: 0.50;
  }
  .offerings-mandala-section-alt4 .offerings-mandala-one {
    right: -38%;
    top: -4%;
    opacity: 0.75;
  }
  #offeringsRitualMandala {
    right: -22%;
    top: 65%;
    opacity: 0.75;
  }
  #offeringsRitualMandalaSmall {
    opacity: 0.50;
  }
}

@media (max-width: 480px) {
  .offerings-mandala-section-alt1 .offerings-mandala-one,
  .offerings-mandala-section-alt2 .offerings-mandala-one,
  .offerings-mandala-section-alt3 .offerings-mandala-one,
  .offerings-mandala-section-connect1 .offerings-mandala-one {
    left: -40%;
    top: 1%;
    opacity: 0.75;
  }
  .offerings-mandala-section-alt1 .offerings-mandala-two,
  .offerings-mandala-section-alt2 .offerings-mandala-two,
  .offerings-mandala-section-alt3 .offerings-mandala-two,
  .offerings-mandala-section-connect1 .offerings-mandala-two {
    right: -42%;
    bottom: 22%;
    opacity: 0.50;
  }
  .offerings-mandala-section-alt4 .offerings-mandala-one {
    right: -48%;
    top: -6%;
    opacity: 0.75;
  }
  #offeringsRitualMandala {
    right: -30%;
    top: 68%;
    opacity: 0.75;
  }
  #offeringsRitualMandalaSmall {
    opacity: 0.50;
  }
}

/* Connect page: ensure form content is above mandala */
.training-mandala-section > .connect-grid {
  position: relative;
  z-index: 1;
}

/* ============================================================
   SCROLL PERFORMANCE OPTIMIZATIONS
   - Promote mandala images to GPU layers for smooth animation
   - Use content-visibility for off-screen sections
   - Avoid will-change on too many elements (causes memory bloat)
   ============================================================ */

/* GPU-accelerated compositing for animated mandalas */
.sacred-mandala-img,
.sacred-mandala-img-sm,
.pillars-mandala-img,
.offerings-mandala-img,
.training-mandala-img {
  transform: translateZ(0);
}

/* Content-visibility for sections without mandalas (saves rendering) */
.section-dark:not(.section-pillars-sacred) {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============================================================
   CONTENT BOX WHITE BACKGROUND — 15% opacity
   All content containers in mandala sections (except section-dark)
   get a subtle white wash so text remains readable over mandalas.
   ============================================================ */

/* Section-intro-sacred with mandalas (Origin Story, Tantric Ritual) */
.section-intro-sacred:not(.section-dark) .grid-2 > div {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 1.5rem;
}

/* Offerings mandala sections — content containers */
.offerings-mandala-section:not(.section-dark) .grid-2 > div,
.offerings-mandala-section:not(.section-dark) .quote-block {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 1.5rem;
}

/* Offerings mandala sections — centered text sections (no grid-2) */
.offerings-mandala-section:not(.section-dark) .container.text-center {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 2rem;
}

/* Training mandala sections — NOT dark */
.training-mandala-section:not(.section-dark) .grid-2 > div {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 1.5rem;
}

/* ============================================================
   CONNECT PAGE — Sacred Path section mandala
   ============================================================ */
.sacred-path-section {
  position: relative;
  overflow: hidden;
}

.sacred-path-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 62vw);
  height: min(680px, 62vw);
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
}

.sacred-path-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

/* Connect page bottom CTA mandala */
.connect-cta-section {
  position: relative;
  overflow: hidden;
}

.connect-cta-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 58vw);
  height: min(600px, 58vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.40;
}

.connect-cta-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite reverse;
}

@media (max-width: 520px) {
  .sacred-path-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.40;
  }
  .connect-cta-mandala-wrap {
    width: min(400px, 100vw);
    height: min(400px, 100vw);
    opacity: 0.35;
  }
}

/* ============================================================
   ABOUT PAGE — Sacred Values section mandalas
   Two centered mandalas like home page Pillars
   ============================================================ */
.sacred-values-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 66vw);
  height: min(720px, 66vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

.sacred-values-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 900px) {
  .sacred-values-mandala-wrap {
    width: min(600px, 88vw);
    height: min(600px, 88vw);
    opacity: 0.75;
  }
}

@media (max-width: 520px) {
  .sacred-values-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.75;
    top: 0;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   OFFERINGS PAGE — What to Expect section mandalas
   ============================================================ */
.what-to-expect-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 66vw);
  height: min(720px, 66vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

.what-to-expect-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 900px) {
  .what-to-expect-mandala-wrap {
    width: min(600px, 88vw);
    height: min(600px, 88vw);
    opacity: 0.75;
  }
}

@media (max-width: 520px) {
  .what-to-expect-mandala-wrap {
    width: min(420px, 105vw);
    height: min(420px, 105vw);
    opacity: 0.75;
    top: 0;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   OFFERINGS PAGE — CTA section mandalas
   ============================================================ */
.offerings-cta-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 58vw);
  height: min(600px, 58vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.50;
}

.offerings-cta-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 520px) {
  .offerings-cta-mandala-wrap {
    width: min(400px, 100vw);
    height: min(400px, 100vw);
    opacity: 0.40;
  }
}

/* ============================================================
   CONNECT PAGE — Sacred Path second mandala
   ============================================================ */

@media (max-width: 520px) {
}

/* ============================================================
   CONNECT PAGE — CTA section second mandala
   ============================================================ */

@media (max-width: 520px) {
}

/* ============================================================
   BLOG PAGE — Quote break section mandalas
   ============================================================ */
.blog-quote-mandala-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 58vw);
  height: min(600px, 58vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.50;
}

.blog-quote-mandala-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pillarsMandalaSpin 120s linear infinite;
}

@media (max-width: 520px) {
  .blog-quote-mandala-wrap {
    width: min(400px, 100vw);
    height: min(400px, 100vw);
    opacity: 0.40;
  }
}