/* Decorative gradient bars inside `.media-frame__surface` or `.apple-pay-pros__visual` (after the img).
 * Outer = corner quadrant in % of surface (parallax target); inner bar uses % + min() for size
 * and % transform-origin so rotation pivots on the correct corner. */

.gradient_element_green_bottom_right,
.gradient_element_cyan_bottom_left,
.gradient_element_blue_dark_bottom_left,
.gradient_element_blue_top_right,
.gradient_element_pink_top_left,
.gradient_element_pink_bottom_left,
.gradient_element_refer_mockup_bottom_right,
.gradient_element_apple_pros_tl_1,
.gradient_element_apple_pros_tl_2,
.gradient_element_apple_pros_tl_3 {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  overflow: visible;
}

/* Shared inner bar: width from surface via outer; height scales off outer so % chain works */
.gradient_element_green_bottom_right > .gradient_element__bar,
.gradient_element_cyan_bottom_left > .gradient_element__bar,
.gradient_element_blue_dark_bottom_left > .gradient_element__bar,
.gradient_element_blue_top_right > .gradient_element__bar,
.gradient_element_pink_top_left > .gradient_element__bar,
.gradient_element_pink_bottom_left > .gradient_element__bar,
.gradient_element_refer_mockup_bottom_right > .gradient_element__bar,
.gradient_element_apple_pros_tl_1 > .gradient_element__bar,
.gradient_element_apple_pros_tl_2 > .gradient_element__bar,
.gradient_element_apple_pros_tl_3 > .gradient_element__bar {
  position: absolute;
  display: block;
  border-radius: 0;
}

/* --- Bottom-right — green → cyan --- */
.gradient_element_green_bottom_right {
  top: 50%;
  right: -50%;
  width: 52%;
  height: 58%;
}

.gradient_element_green_bottom_right > .gradient_element__bar {
  top: 0%;
  right: 0%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(30deg);
  transform-origin: 100% 0%;
  background: linear-gradient(
    165deg,
    var(--color-cyan-light) 0%,
    var(--color-blue) 100%
  );
  box-shadow: 0 0 100px rgba(162, 184, 129, 0.45);
}

/* --- Bottom-left — cyan → blue --- */
.gradient_element_cyan_bottom_left {
  top: 50%;
  left: -50%;
  width: 52%;
  height: 58%;
}

.gradient_element_cyan_bottom_left > .gradient_element__bar {
  top: 0%;
  left: 0%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(-30deg);
  transform-origin: 0% 0%;
  background: linear-gradient(
    165deg,
    var(--color-green) 0%,
    var(--color-cyan-light) 100%
  );
  box-shadow: 0 0 100px rgba(148, 172, 204, 0.5);
}

/* --- Bottom-left — blue-dark → pink-dark (Smart wallet Purchase mockup) --- */
.gradient_element_blue_dark_bottom_left {
  top: 50%;
  left: -50%;
  width: 52%;
  height: 58%;
}

.gradient_element_blue_dark_bottom_left > .gradient_element__bar {
  top: 0%;
  left: 0%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(-30deg);
  transform-origin: 0% 0%;
  background: linear-gradient(
    165deg,
    var(--color-blue-dark) 30%,
    var(--color-pink-dark) 61%
  );
  box-shadow: 0 0 100px rgba(148, 172, 204, 0.55);
}

/* --- Top-right — blue → pink --- */
.gradient_element_blue_top_right {
  bottom: 0%;
  right: 0%;
  width: 52%;
  height: 58%;
}

.gradient_element_blue_top_right > .gradient_element__bar {
  right: -120%;
  bottom: 50%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(-30deg);
  transform-origin: 100% 100%;
  background: linear-gradient(
    165deg,
    var(--color-blue) 0%,
    var(--color-pink) 100%
  );
  box-shadow: 0 0 100px rgba(148, 172, 204, 0.55);
}

/* --- Top-left — pink → green --- */
.gradient_element_pink_top_left {
  bottom: 0%;
  left: 0%;
  width: 52%;
  height: 58%;
}

.gradient_element_pink_top_left > .gradient_element__bar {
  left: -120%;
  bottom: 50%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(30deg);
  transform-origin: 0% 100%;
  background: linear-gradient(
    165deg,
    var(--color-pink) 0%,
    var(--color-green) 100%
  );
  box-shadow: 0 0 100px rgba(173, 143, 182, 0.4);
}

/* --- Bottom-left — pink → green (Installments how mockup) --- */
.gradient_element_pink_bottom_left {
  top: 50%;
  left: -50%;
  width: 52%;
  height: 58%;
}

.gradient_element_pink_bottom_left > .gradient_element__bar {
  top: 0%;
  left: 0%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(-30deg);
  transform-origin: 0% 0%;
  background: linear-gradient(
    165deg,
    var(--color-pink) 0%,
    var(--color-green) 100%
  );
  box-shadow: 0 0 100px rgba(173, 143, 182, 0.4);
}

/* Refer-a-friend CodeReferral mockup — bottom-right (Figma 155:18506) */
.gradient_element_refer_mockup_bottom_right {
  top: 50%;
  right: -50%;
  width: 52%;
  height: 58%;
}

.gradient_element_refer_mockup_bottom_right > .gradient_element__bar {
  top: 0%;
  right: 0%;
  width: min(100%, 280px);
  height: min(280%, 1300px);
  transform: rotate(30deg);
  transform-origin: 100% 0%;
  background: linear-gradient(
    12deg,
    var(--color-pink-dark) 29%,
    var(--color-green-dark) 62%
  );
  box-shadow: 0 0 100px rgba(148, 172, 204, 0.55);
}

/*
 * Apple Pay pros — top-left corner peek (Figma 130:6342).
 * Smart-wallet cubes use a huge bar + `left: -120%` on a large surface; here the clip is ~300px tall,
 * so that math hid the bar entirely. Use a smaller outer + milder offset + fixed bar size so the
 * diagonal slice crosses the top-left rounded corner inside `.apple-pay-pros__visual`.
 */
.gradient_element_apple_pros_tl_1,
.gradient_element_apple_pros_tl_2,
.gradient_element_apple_pros_tl_3 {
  top: 0;
  left: 0;
  width: min(52%, 200px);
  height: 48%;
  min-height: 120px;
}

.gradient_element_apple_pros_tl_1 > .gradient_element__bar,
.gradient_element_apple_pros_tl_2 > .gradient_element__bar,
.gradient_element_apple_pros_tl_3 > .gradient_element__bar {
  top: -55%;
  left: 20%;
  width: clamp(72px, 38%, 132px);
  height: clamp(360px, 95%, 280px);
  transform: rotate(34deg);
  transform-origin: 0 0;
}

.gradient_element_apple_pros_tl_1 > .gradient_element__bar {
  background: linear-gradient(
    165deg,
    var(--color-cyan-light) 0%,
    var(--color-green-dark) 62%
  );
  box-shadow: 0 0 52px rgba(148, 172, 204, 0.5);
}

.gradient_element_apple_pros_tl_2 > .gradient_element__bar {
  background: linear-gradient(
    165deg,
    var(--color-pink-dark) 29%,
    var(--color-green-dark) 62%
  );
  box-shadow: 0 0 52px rgba(173, 143, 182, 0.48);
}

.gradient_element_apple_pros_tl_3 > .gradient_element__bar {
  background: linear-gradient(
    165deg,
    var(--color-blue) 0%,
    var(--color-pink) 62%
  );
  box-shadow: 0 0 52px rgba(148, 172, 204, 0.48);
}

@media (max-width: 768px) {
  .gradient_element_green_bottom_right,
  .gradient_element_cyan_bottom_left,
  .gradient_element_blue_dark_bottom_left,
  .gradient_element_blue_top_right,
  .gradient_element_pink_top_left,
  .gradient_element_pink_bottom_left,
  .gradient_element_refer_mockup_bottom_right,
  .gradient_element_apple_pros_tl_1,
  .gradient_element_apple_pros_tl_2,
  .gradient_element_apple_pros_tl_3 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient_element_green_bottom_right,
  .gradient_element_cyan_bottom_left,
  .gradient_element_blue_dark_bottom_left,
  .gradient_element_blue_top_right,
  .gradient_element_pink_top_left,
  .gradient_element_pink_bottom_left,
  .gradient_element_refer_mockup_bottom_right,
  .gradient_element_apple_pros_tl_1,
  .gradient_element_apple_pros_tl_2,
  .gradient_element_apple_pros_tl_3 {
    will-change: auto;
  }
}