/* ═══════════════════════════════════════════════════
   BEAUTY.CSS — Image Blending & Visual Polish
   Reflective Learning Studio
   Removes hard image edges, adds depth and softness
═══════════════════════════════════════════════════ */

/* ── 1. HERO IMAGE — desktop: subtle soft edge only ── */
@media (min-width: 961px) {
  .hero-right {
    position: relative;
    overflow: hidden;
  }
  .hero-right::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      /* Left edge — very gentle fade into text column */
      linear-gradient(to right,
        rgba(242,236,224,0.35) 0%,
        rgba(242,236,224,0.08) 10%,
        transparent 24%
      ),
      /* Bottom edge — barely there */
      linear-gradient(to top,
        rgba(242,236,224,0.18) 0%,
        transparent 18%
      ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

/* ── 2. PAGE HERO IMAGES (About, Services, Portfolio, Contact) ── */
.page-hero-right {
  position: relative;
  overflow: hidden;
}
.page-hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Bottom — dissolves into page content below */
    linear-gradient(to top,
      rgba(242,236,224,1) 0%,
      rgba(242,236,224,0.7) 18%,
      transparent 45%
    ),
    /* Left edge */
    linear-gradient(to right,
      rgba(242,236,224,0.4) 0%,
      transparent 22%
    ),
    /* Right edge */
    linear-gradient(to left,
      rgba(242,236,224,0.2) 0%,
      transparent 18%
    ),
    /* Top edge */
    linear-gradient(to bottom,
      rgba(242,236,224,0.15) 0%,
      transparent 14%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── 3. LAILAA PORTRAIT PHOTOS — soft floating dissolve ── */
/* Story section portrait */
.story-left > div {
  -webkit-mask-image:
    linear-gradient(to bottom, black 0%, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, black 0%, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}

/* About/Testimonials CTA portrait */
.photo-cta-img {
  position: relative;
  overflow: hidden;
}
.photo-cta-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(27,58,45,0.6) 0%,
      transparent 35%
    ),
    linear-gradient(to top,
      rgba(27,58,45,0.3) 0%,
      transparent 30%
    ),
    linear-gradient(to bottom,
      rgba(27,58,45,0.2) 0%,
      transparent 20%
    );
  pointer-events: none;
  z-index: 1;
}

/* Hero profile image (index.html - Lailaa main hero) */
.hero-right img {
  -webkit-mask-image:
    linear-gradient(to bottom, black 0%, black 78%, rgba(0,0,0,0.1) 100%),
    linear-gradient(to left, transparent 0%, black 8%, black 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, black 0%, black 78%, rgba(0,0,0,0.1) 100%),
    linear-gradient(to left, transparent 0%, black 8%, black 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 100%);
  mask-composite: intersect;
}

/* ── 4. INTRO BAND — RIVER IMAGE (homepage right panel) ── */
.intro-band-img {
  position: relative;
  overflow: hidden;
}
.intro-band-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Left edge — where it meets the text column */
    linear-gradient(to right,
      rgba(250,247,242,1) 0%,
      rgba(250,247,242,0.5) 14%,
      transparent 36%
    ),
    /* Top and bottom softening */
    linear-gradient(to bottom,
      rgba(250,247,242,0.4) 0%,
      transparent 20%,
      transparent 75%,
      rgba(250,247,242,0.5) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── 5. CONTACT IMAGE — stacked stones ── */
.contact-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Right edge — dissolves toward form */
    linear-gradient(to left,
      rgba(242,236,224,0.8) 0%,
      rgba(242,236,224,0.3) 18%,
      transparent 42%
    ),
    /* Top and bottom */
    linear-gradient(to bottom,
      rgba(242,236,224,0.2) 0%,
      transparent 18%,
      transparent 70%,
      rgba(242,236,224,0.4) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── 6. PHILOSOPHY / DARK SECTIONS ── */
.philosophy-img::after {
  background:
    linear-gradient(to right,
      rgba(27,58,45,0.8) 0%,
      rgba(27,58,45,0.3) 28%,
      transparent 55%
    ),
    linear-gradient(to top,
      rgba(27,58,45,0.4) 0%,
      transparent 30%
    ) !important;
}

/* ── 7. PORTFOLIO CARD VISUALS — cards with images ── */
.card-visual {
  position: relative;
  overflow: hidden;
}
.card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Bottom dark fade for text legibility */
    linear-gradient(to top,
      rgba(27,58,45,0.55) 0%,
      rgba(27,58,45,0.1) 40%,
      transparent 65%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── 8. FEATURED PROJECT IMAGE — classroom ── */
.featured-img {
  position: relative;
  overflow: hidden;
}
.featured-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      transparent 55%,
      rgba(27,58,45,0.5) 100%
    ),
    linear-gradient(to top,
      rgba(27,58,45,0.6) 0%,
      transparent 40%
    ) !important;
  pointer-events: none;
  z-index: 1;
}

/* ── 9. IMAGE BREAK SECTIONS (seeds/nature) ── */
.image-break img {
  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.8) 12%,
      black 35%,
      black 70%,
      rgba(0,0,0,0.7) 88%,
      rgba(0,0,0,0) 100%
    );
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.8) 12%,
      black 35%,
      black 70%,
      rgba(0,0,0,0.7) 88%,
      rgba(0,0,0,0) 100%
    );
}

/* ── 10. BLOG ARTICLE HERO IMAGE ── */
.article-hero-img::after {
  background:
    linear-gradient(to bottom,
      rgba(242,236,224,0.1) 0%,
      transparent 20%,
      transparent 52%,
      rgba(242,236,224,0.95) 92%,
      rgba(242,236,224,1) 100%
    ) !important;
}

/* ── 11. CTA BAND ── */
.cta-band-img::after {
  background:
    linear-gradient(to top,
      rgba(27,58,45,0.85) 0%,
      rgba(27,58,45,0.4) 35%,
      transparent 65%
    ),
    linear-gradient(to right,
      rgba(27,58,45,0.3) 0%,
      transparent 30%
    ),
    linear-gradient(to left,
      rgba(27,58,45,0.2) 0%,
      transparent 25%
    ) !important;
}

/* ── 12. TESTIMONIALS / RATES CTA IMAGE ── */
.rates-cta-img::after,
.services-cta-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(27,58,45,0.88) 0%,
      rgba(27,58,45,0.5) 40%,
      transparent 68%
    ),
    linear-gradient(to top,
      rgba(27,58,45,0.4) 0%,
      transparent 35%
    );
  z-index: 1;
  pointer-events: none;
}

/* ── 13. ABOUT HERO JOY PHOTO (story section) ── */
.story-left img {
  -webkit-mask-image:
    linear-gradient(to bottom,
      black 0%,
      black 70%,
      transparent 100%
    ),
    linear-gradient(to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      black 0%,
      black 70%,
      transparent 100%
    ),
    linear-gradient(to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  mask-composite: intersect;
}

/* ── 14. GRAIN TEXTURE on cream sections (very subtle) ── */
.intro-statement,
.story,
.differentiators,
.beyond-studio {
  position: relative;
}
.intro-statement::before,
.story::before,
.differentiators::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
  z-index: 0;
}

/* ── 15. SERVICES PAGE HERO ── */
.services-hero-img,
.page-hero-img {
  position: relative;
  overflow: hidden;
}
.services-hero-img::after,
.page-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      transparent 45%,
      rgba(242,236,224,0.9) 100%
    ),
    linear-gradient(to right,
      rgba(242,236,224,0.3) 0%,
      transparent 25%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── 16. PORTFOLIO HERO ── */
.portfolio-hero-img {
  position: relative;
  overflow: hidden;
}
.portfolio-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(27,58,45,0.7) 0%,
      rgba(27,58,45,0.2) 30%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── MOBILE: simplify heavy gradients ── */
@media (max-width: 960px) {
  .hero-right::after,
  .page-hero-right::after {
    background:
      linear-gradient(to bottom,
        transparent 0%,
        transparent 60%,
        rgba(242,236,224,0.9) 88%,
        rgba(242,236,224,1) 100%
      ) !important;
  }
  .intro-band-img::after {
    background:
      linear-gradient(to bottom,
        transparent 55%,
        rgba(250,247,242,0.95) 100%
      ) !important;
  }
  /* Simplify mask on mobile for performance */
  .story-left img,
  .hero-right img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}