/* ============================================================
   PETAL VECTOR LAYER — Positioning & Scaling

   Load AFTER style.css:
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/vectors.css">

   KEY FIX: style.css has `img { max-width: 100% }` which caps
   vector images at their container width, preventing bleed.
   We override with max-width:none and use vw units for sizing
   so vectors scale fluidly with the viewport.
   ============================================================ */


/* ——————————————————————————————————————————————————————————
   VECTOR LAYER BASE — Positioning system for petal SVGs

   Each section has its own coordinate space.
   Vectors are position:absolute within their .section parent.
   Use data-parallax-speed on the element for JS scroll offset.
   ————————————————————————————————————————————————————————— */

.vector-layer {
  position: absolute;

  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.vector-layer svg,
.vector-layer img {
  position: absolute;
}

/* Content above vector layer */
.section > .container {
  position: relative;
  z-index: 1;
}


/* ——————————————————————————————————————————————————————————
   BASE OVERRIDES
   ————————————————————————————————————————————————————————— */

.vector-layer img,
.vector-layer svg {
  /* Kill the global img { max-width: 100% } from style.css.
     Without this, no vector can exceed its container width
     and you get hard crop edges instead of atmospheric bleed. */
  max-width: none !important;
  will-change: transform;
}


/* ——————————————————————————————————————————————————————————
   HERO SECTION — 1440 × 2160

   petal-left:   1440×1080  off-black→blue→tint→fuscia-tint
                 Massive blur (stdDeviation 137). Origin bottom-left,
                 sweeps up and right. Needs to cover the entire
                 upper portion of the hero.

   petal-right:  1440×1080  Same palette, 150° rotation.
                 Overlaps petal-left, emphasis upper-right.
                 Slightly transparent to let left show through.
   ————————————————————————————————————————————————————————— */

.section--hero .vector-layer img:nth-child(1) {
  /* petal-left — GPU-accelerated blur (was SVG stdDeviation 137)
     viewBox expanded 400px on each side for blur breathing room,
     offset CSS position to compensate */
  top: -17.857vw;
  left: -32.857vw;
  width: calc(100vw * (2240 / 1440));
  height: auto;
  z-index: 1;
  filter: blur(67px);
  transform: translateZ(0);
}

.section--hero .vector-layer img:nth-child(2) {
  /* petal-right — GPU-accelerated blur (was SVG stdDeviation 68) */
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 1;
  filter: blur(28px);
  transform: translateZ(0);
}


/* ——————————————————————————————————————————————————————————
   FEATURES SECTION — 1440 × 3640

   petal-a:  943×880   orange→fuscia, 40% opacity
   petal-b:  780×1264  orange→fuscia, 40% opacity, tall
   petal-c:  739×1928  off-black→blue→orange-tints, full opacity
   petal-d:  327×1336  off-black→blue→orange-tints, 56% opacity

   These petals already carry their own opacity in the SVG
   (via the `opacity` attribute on the <g> element).
   They create the warm ambient wash behind feature cards.
   ————————————————————————————————————————————————————————— */

.section--features .vector-layer img:nth-child(1) {
  /* petal-a — top-left warm glow */
  top: -450px;
  left: -10vw;
  width: 65vw;
  height: auto;
}

.section--features .vector-layer img:nth-child(2) {
  /* petal-b — left side, tall warm accent, staggered below a */
  top: 20%;
  left: -15vw;
  width: 55vw;
  height: auto;
}

.section--features .vector-layer img:nth-child(3) {
  /* petal-c — right side, the dominant blue-to-orange orb */
  top: 25%;
  right: -18vw;
  left: auto;
  width: 65vw;
  height: auto;
  opacity: 0.5;
}

.section--features .vector-layer img:nth-child(4) {
  /* petal-d — right edge, narrow accent */
  top: 1300px;
  right: -5vw;
  left: auto;
  width: 28vw;
  height: auto;
}



/* ——————————————————————————————————————————————————————————
   FOOTER SECTION — 1440 × 926

   petal-a:  1440×926   off-black→fuscia→orange→orange-tint
                        This is the BIG one (175px blur!).
                        Full-width hot gradient rising from bottom.

   petal-b:  1267×693   off-black→fuscia→orange→orange-tint
                        Overlapping counter-shape, bottom-right.

   Anchored to bottom since the gradient rises from the base.
   ————————————————————————————————————————————————————————— */

.section--footer .vector-layer img:nth-child(1) {
  bottom: 0;
  left: -10vw;
  top: auto;
  width: 120vw;
  height: auto;
  opacity: 0.55;
}

.section--footer .vector-layer img:nth-child(2) {
  bottom: -8vw;
  right: -10vw;
  top: auto;
  left: auto;
  width: 95vw;
  height: auto;
  opacity: 0.5;
}


/* ——————————————————————————————————————————————————————————
   RESPONSIVE

   Strategy: as viewport narrows, scale vectors UP so the
   blurred gradients maintain atmospheric full-coverage.
   A petal that's too small becomes a visible blob instead
   of a seamless ambient wash.

   vw units already scale naturally, but on narrow screens
   the vectors need to be proportionally wider to maintain
   edge-to-edge coverage since their aspect ratios are wide.
   ————————————————————————————————————————————————————————— */

@media (max-width: 1024px) {
  /* Hero vectors use object-fit: cover — no overrides needed */

  /* Features: widen to maintain coverage */
  .section--features .vector-layer img:nth-child(1) { width: 85vw; left: -20vw; }
  .section--features .vector-layer img:nth-child(2) { width: 75vw; left: -25vw; }
  .section--features .vector-layer img:nth-child(3) { width: 85vw; right: -30vw; }
  .section--features .vector-layer img:nth-child(4) { width: 45vw; right: -15vw; }

  /* Footer: push wider */
  .section--footer .vector-layer img:nth-child(1) { width: 160vw; left: -25vw; }
  .section--footer .vector-layer img:nth-child(2) { width: 130vw; right: -25vw; }
}

@media (max-width: 768px) {
  /* Hero vectors use object-fit: cover — no overrides needed */

  /* Features: uniform wide coverage */
  .section--features .vector-layer img:nth-child(1) { width: 120vw; left: -35vw; }
  .section--features .vector-layer img:nth-child(2) { width: 110vw; left: -40vw; }
  .section--features .vector-layer img:nth-child(3) { width: 120vw; right: -45vw; }
  .section--features .vector-layer img:nth-child(4) { width: 70vw; right: -25vw; }

  /* Footer */
  .section--footer .vector-layer img:nth-child(1) { width: 220vw; left: -45vw; }
  .section--footer .vector-layer img:nth-child(2) { width: 180vw; right: -45vw; }
}


/* ——————————————————————————————————————————————————————————
   BENTO BACKGROUND VECTORS — Features Section
   4 petal gradients creating atmospheric depth
   ————————————————————————————————————————————————————————— */

.bento-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.bento-bg img {
  position: absolute;
  filter: blur(40px);
  will-change: transform;
  transform-origin: center;
}

/* Petal 1: left-petal.svg, bottom-right anchor */
.bento-bg__petal-1 {
  width: 48vw;
  height: auto;
  right: -25vw;
  bottom: -800px;
  transform: rotate(-44.97deg) translateZ(0);
  opacity: 0.4;
}

/* Petal 2: right-petal.svg, bottom-left anchor */
.bento-bg__petal-2 {
  width: 94vw;
  height: auto;
  left: -70vw;
  top: calc(75% + 400px);
  transform: rotate(180deg) translateZ(0);
  opacity: 0.4;
}

/* Petal 3: half-moon.svg, far bottom-left */
.bento-bg__petal-3 {
  width: 90vw;
  height: auto;
  left: -60vw;
  top: 200px;
  transform: rotate(-150deg) translateZ(0);
  filter: blur(39px);
  opacity: 0.5;
}

/* Petal 4: right-petal.svg, top-right anchor (flipped) */
.bento-bg__petal-4 {
  width: 125vw;
  height: auto;
  left: calc(50vw + 500px);
  top: 350px;
  transform: rotate(57.79deg) scaleY(-1) translateZ(0);
  opacity: 0.4;
}

/* Content sits above vectors */
.section--features .brokerage__pin-wrapper {
  position: relative;
  z-index: 3;
}