/* Bank transfer — hero (Figma Vertical_Section 153:14345) */

.bank-transfer-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 6vw, 65px);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--padding);
  padding-block: clamp(40px, 8vw, 60px);
  box-sizing: border-box;
  background: var(--color-blue);
  /* Allow shader shell glow / feather to blend past the section box */
  overflow-x: clip;
  overflow-y: visible;
}

body.page-under-nav-hero .bank-transfer-hero {
  --app-hero-top-pull: clamp(16px, 3.5vw, 44px);
  margin-top: calc(-1 * var(--app-hero-top-pull));
  padding-top: calc(var(--navbar-height) + var(--section-stack-padding-y));
}

.bank-transfer-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--max-width);
  text-align: center;
}

/* Figma Hero 120 / 110 — responsive clamp */
.bank-transfer-hero__title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.5rem, 5vw + 1.25rem, 7.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--color-black);
}

/* Regular/Main 32 */
.bank-transfer-hero__subtitle {
  margin: 0;
  max-width: min(920px, 100%);
  font-size: clamp(1.125rem, 1.5vw + 0.75rem, var(--font-main));
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-black);
}

body.page-under-nav-hero .bank-transfer-hero .hero__cta-primary {
  direction: ltr;
}

/* Load.svg — scaled to 20px in the primary CTA */
.bank-transfer-hero .hero__cta-primary .hero__action-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Unicorn Studio — Shader frame: feathered mask + soft edge blend into hero blue */
.bank-transfer-hero__shader-shell {
  --shader-edge-soft: clamp(28px, 5vw, 72px);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1330px;
  margin-inline: auto;
  border-radius: 25px;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
  /* Alpha feather so WebGL fades before the hard box edge */
  -webkit-mask-image: radial-gradient(
    ellipse 96% 94% at 50% 50%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 96% 94% at 50% 50%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* Outer halo same as page bg — bridges any seam after masking */
  filter: drop-shadow(0 0 var(--shader-edge-soft) rgba(193, 214, 241, 0.72));
}

.bank-transfer-hero__shader-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  /* Pull perimeter toward hero blue so transition feels blurred / atmospheric */
  box-shadow: inset 0 0 clamp(48px, 8vw, 120px) clamp(24px, 4vw, 64px) var(--color-blue);
}

.bank-transfer-hero__shader {
  position: relative;
  z-index: 0;
  width: 100%;
  height: clamp(240px, 42vw, 583px);
  min-height: 240px;
  display: block;
  border-radius: 25px;
  overflow: hidden;
  background: rgba(250, 253, 252, 0.2);
}

.bank-transfer-hero__shader canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 900px) {
  body.page-under-nav-hero .bank-transfer-hero {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bank-transfer-hero__shader-shell {
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
  }

  .bank-transfer-hero__shader-shell::after {
    box-shadow: inset 0 0 32px 16px var(--color-blue);
  }

  .bank-transfer-hero__shader {
    background: var(--color-bg);
  }
}