/* 
   hero-style.css
*/

/* ============================================
   UTILITIES
   ============================================ */

/* --- Hero Section Outer Container --- */
.merlin-hero {
  position: relative !important;
  border-radius: 0 !important; 
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: #f5f7f6; /* Base background color */
  overflow: hidden !important; /* Clips the overflowing circles */
  isolation: isolate; /* Safely creates stacking context without z-index */
  padding-bottom: 120px !important; /* Space for the wave to avoid covering content */
}

/* Layer 1: Sage Green Blob on the Left (Relative to columns) */
.merlin-hero .wp-block-columns::before {
  content: "";
  position: absolute;
  bottom: 0; /* Aligned to the very bottom */
  left: -400px;
  width: 900px;
  height: 900px;
  background: rgba(121, 152, 129, 0.15); /* Soft sage green overlay */
  border-radius: 50%; /* Perfect circle, half hidden off the left edge */
  z-index: 11; /* Lowest layer, under the new circle */
  pointer-events: none;
}

/* Layer 1.5: Light Green 800px Circle (Relative to columns) */
.merlin-hero .wp-block-columns::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%; /* Moved right by 5% */
  transform: translate(-33%, -64%);
  width: 1100px;
  height: 1100px;
  background: #e9f0ed75; /* Lighter layered circle */
  border-radius: 50%; /* Perfect circle */
  z-index: 12; /* Placed ABOVE the white wave (10) */
  pointer-events: none;
}

/* Layer 2: White S-Curve Wave Divider */
.merlin-hero::after {
  content: "";
  position: absolute;
  bottom: -1px; /* Prevent 1px sub-pixel rendering gap at the bottom */
  left: 0;
  width: 100%;
  height: 180px; /* Height of the wave */
  /* SVG Path: Low on left, curves high in middle, medium on right */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,120 L0,90 C400,90 400,10 750,10 C1000,10 1100,50 1200,50 L1200,120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 10; /* Changed from 1 to 10 to ensure it covers the image */
  pointer-events: none;
}

/* Ensure inner content sits above background shapes */
.merlin-hero .wp-block-columns {
  position: relative;
  /* Removed unified z-index to break stacking context and allow precise interleaving */
}

/* Left Column (Text): Always on Top */
.merlin-hero .wp-block-columns .wp-block-column:first-child {
  position: relative;
  z-index: 20; 
}

/* Right Column (Image): Below the White Wave */
.merlin-hero .wp-block-columns .wp-block-column:last-child {
  position: relative;
  z-index: 5; /* Lower than white wave (10) so the wave cuts the image */
}

/* --- Hero Image Layout --- */
.merlin-hero-image {
  position: relative !important;
  border-radius: 0 0 30% 30% !important; /* Bottom-left and bottom-right are 30% */
  z-index: 0 !important; /* Stacking context for the underlay glow */
}

/* Glowing accent circle peeking from the left */
.merlin-hero-image::before {
  content: "";
  position: absolute;
  top: 25%;
  left: -30px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(232, 240, 237, 0.4); /* #E8F0ED faded */
  box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.5); /* Softer white glow */
  z-index: 20; /* Placed over the image */
  pointer-events: none;
}

/* Top and Left glow/halo overlay over the image */
.merlin-hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Seamless left fade into background */
    linear-gradient(90deg, 
      #f5f7f6 0%, 
      rgba(245, 247, 246, 0.8) 10%, 
      rgba(245, 247, 246, 0.3) 25%, 
      transparent 45%
    ),
    /* Top glow */
    radial-gradient(100% 60% at top center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%),
    /* Bottom glow */
    radial-gradient(100% 40% at bottom center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%); 
  pointer-events: none;
  z-index: 10;
}

.merlin-hero-image img {
  border-radius: 0 0 30% 30% !important;
}