/* ==============================================
   INTEGRATION BANNER — SECTION STYLES
   ============================================== */

/* ── BANNER / VISUAL SECTION ── */
.banner {
  padding: 296px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
 /* background:
    radial-gradient(ellipse 65% 55% at 15% 60%, rgba(57,113,192,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 85% 25%, rgba(57,113,192,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 90%, rgba(94,141,207,0.06) 0%, transparent 55%),
    linear-gradient(155deg, #f8faff 0%, #ecf2fc 45%, #f3f7fe 100%);*/
  background-size: 100% 100%, 100% 100%, 100% 100%, 300% 300%;
  animation: bannerGradShift 18s ease-in-out infinite;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 35% at 50% 45%, rgba(57,113,192,0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: bannerGlow 9s ease-in-out infinite;
  z-index: 0;
}

.banner > * { position: relative; z-index: 1; }

@keyframes bannerGradShift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 50%; }
  50%  { background-position: 0% 0%, 0% 0%, 0% 0%, 100% 50%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 50%; }
}

@keyframes bannerGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* ==============================================
   SCROLL-TRIGGERED ENTRANCE
   ============================================== */

.banner            { animation-play-state: paused; }
.banner::before    { animation-play-state: paused; }

.banner-subtitle {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1);
}

.wave-fill-area,
.wave-main-line,
.wave-ghost-line,
.wave-dot            { animation-play-state: paused; }

.col-bar             { animation-play-state: paused; }

.banner-dot-1,
.banner-dot-2,
.banner-dot-3        { animation-play-state: paused; }

.banner-deco-dots,
.banner-chart-img,
.banner-bar-chart,
.banner-column-chart {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.banner-bar-chart    { transition-delay: 0.15s; }
.banner-column-chart { transition-delay: 0.25s; }
.banner-chart-img    { transition-delay: 0.1s;  }
.banner-deco-dots    { transition-delay: 0.05s; }

/* ── IS-VISIBLE: run everything ── */
.banner.is-visible                        { animation-play-state: running; }
.banner.is-visible::before                { animation-play-state: running; }
.banner.is-visible .banner-subtitle       { opacity: 1; transform: translateY(0); }

.banner.is-visible .wave-fill-area,
.banner.is-visible .wave-main-line,
.banner.is-visible .wave-ghost-line,
.banner.is-visible .wave-dot              { animation-play-state: running; }

.banner.is-visible .col-bar               { animation-play-state: running; }

.banner.is-visible .banner-dot-1,
.banner.is-visible .banner-dot-2,
.banner.is-visible .banner-dot-3          { animation-play-state: running; }

.banner.is-visible .banner-deco-dots,
.banner.is-visible .banner-chart-img,
.banner.is-visible .banner-bar-chart,
.banner.is-visible .banner-column-chart   { opacity: 1; transform: translateY(0); }

/* ── LAYOUT ── */
.banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.banner-heading-wrap {
  display: flex;
  flex-direction: column;
  max-width: 614px;
  width: 100%;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.banner-subtitle {
  position: relative;
  max-width: 614px;
  width: 100%;
  margin-top: -1px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #3971c0;
  font-size: var(--desktop-h4-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

/* ── DECORATIVE ELEMENTS ── */
.banner-deco-dots   { position: absolute; top: 296px; left: 1270px; width: 312px; height: 289px; }
.banner-deco-vector { position: absolute; top: 1px; left: 1px; width: 170px; height: 284px; }

.banner-dot-1 { position: absolute; top: 14px; left: 117px; width: 10px; height: 10px; background-color: #3971c0; border: 0.85px solid #3971c04c; border-radius: 50%; opacity: 0.2; }
.banner-dot-2 { position: absolute; top: 0;    left: 112px; width: 10px; height: 10px; background-color: #3971c0; border: 0.85px solid #3971c04c; border-radius: 50%; }
.banner-dot-3 { position: absolute; top: 10px; left: 94px;  width: 10px; height: 10px; background-color: #88aad9; border-radius: 50%; }

.banner-chart-img { position: absolute; width: 115px; height: 116px; top: 397px; left: 56px; }

/* ── BAR CHART ── */
.banner-bar-chart  { position: absolute; top: -31px; left: 1050px; width: 451px; height: 185px; }
.bar-chart-bg-1    { position: absolute; top: 0;    left: 92px;  width: 173px; height: 167px; background-color: #3971c03b; border-radius: 4px; }
.bar-chart-bg-2    { position: absolute; top: 85px; left: 276px; width: 173px; height: 82px;  background-color: #3971c017; border-radius: 4px; }
.bar-chart-line    { position: absolute; top: 177px; left: 40px; width: 350px; height: 1px; object-fit: cover; }
.bar-chart-label   { position: absolute; top: 167px; left: 0; opacity: 0.6; font-family: var(--desktop-tags-font-family); font-weight: var(--desktop-tags-font-weight); color: #3971c0; font-size: var(--desktop-tags-font-size); text-align: center; letter-spacing: var(--desktop-tags-letter-spacing); line-height: var(--desktop-tags-line-height); white-space: nowrap; }

.banner-bar-chart:hover .bar-chart-bg-1 { background-color: rgba(57,113,192,0.28); transition: background-color 0.4s; }
.banner-bar-chart:hover .bar-chart-bg-2 { background-color: rgba(57,113,192,0.14); transition: background-color 0.4s; }

/* ── COLUMN CHART ── */
.banner-column-chart { position: absolute; top: 97px; left: 126px; width: 235px; height: 114px; opacity: 0.6; }
.col-chart-outer     { position: absolute; top: 0; left: 0; width: 233px; height: 114px; background-color: #3971c029; border-radius: 4px; border: 1px solid #3971c066; }
.col-chart-label     { position: absolute; top: 9px; left: 175px; opacity: 0.5; font-family: var(--desktop-h5-font-family); font-weight: var(--desktop-h5-font-weight); color: #3971c0; font-size: var(--desktop-h5-font-size); text-align: center; letter-spacing: var(--desktop-h5-letter-spacing); line-height: var(--desktop-h5-line-height); white-space: nowrap; }

.col-bar { position: absolute; border-radius: 4px; border: 1px solid #3971c066; height: 104px; width: 17px; top: 5px; transform-origin: bottom; transform: scaleY(0); animation: barRise 0.9s cubic-bezier(0.34,1.4,0.64,1) forwards paused; }
.col-bar--1 { left: 5px;   background-color: #3971c029; animation-delay: 0.1s; }
.col-bar--2 { left: 25px;  background-color: #3971c042; animation-delay: 0.2s; }
.col-bar--3 { left: 45px;  background-color: #3971c05c; animation-delay: 0.3s; }
.col-bar--4 { left: 65px;  background-color: #3971c075; animation-delay: 0.4s; }
.col-bar--5 { left: 85px;  animation-delay: 0.5s; }
.col-bar--6 { left: 105px; animation-delay: 0.6s; }
.col-bar--7 { left: 125px; animation-delay: 0.7s; }

@keyframes barRise {
  to { transform: scaleY(1); }
}

/* ── WAVE CHART ── */
.banner-wave-chart { position: absolute; top: 647px; left: -22px; width: 1462px; height: 64px; }
.wave-row-1 { position: absolute; top: 5px;  left: 650px;  width: 461px; height: 42px; background-color: #3971c0; opacity: 0.1; }
.wave-row-2 { position: absolute; top: 5px;  left: 1107px; width: 4px;   height: 11px; background-color: #3971c0; }
.wave-row-3 { position: absolute; top: 36px; left: 650px;  width: 4px;   height: 11px; background-color: #3971c0; }

.wave-line-1 {
  position: absolute;
  top: 0;
  left: calc(50% - 709px);
  width: 1440px;
  height: 65px;
  overflow: visible;
  cursor: crosshair;
}

.wave-fill-area {
  fill: rgba(57,113,192,0.04);
  animation: waveFillBreath 6s ease-in-out infinite paused;
}

.wave-main-line {
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation:
    waveDrawIn 2.4s cubic-bezier(0.4,0,0.2,1) 0.3s forwards paused,
    waveFloat  7s ease-in-out 2.8s infinite paused;
}

.wave-ghost-line {
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation:
    waveDrawIn  2.8s cubic-bezier(0.4,0,0.2,1) 0.6s forwards paused,
    waveFloatAlt 9s ease-in-out 3.5s infinite paused;
}

.wave-dot {
  fill: #3971C0;
  opacity: 0;
  animation: dotAppear 0.5s ease-out 2.5s forwards paused, dotPulse 3s ease-in-out 3s infinite paused;
}

.banner-wave-chart:hover .wave-main-line { filter: brightness(1.4) drop-shadow(0 0 4px rgba(57,113,192,0.5)); }
.banner-wave-chart:hover .wave-fill-area { fill: rgba(57,113,192,0.09); }
.banner-wave-chart:hover .wave-dot       { fill: #66D6CC; transform: scale(1.6); }

@keyframes waveDrawIn    { to { stroke-dashoffset: 0; } }
@keyframes waveFloat     { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } }
@keyframes waveFloatAlt  { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(3px);  } }
@keyframes waveFillBreath{ 0%, 100% { fill: rgba(57,113,192,0.04); } 50% { fill: rgba(57,113,192,0.08); } }
@keyframes dotAppear     { to { opacity: 1; } }
@keyframes dotPulse      { 0%, 100% { r: 3; opacity: 1; } 50% { r: 5; opacity: 0.55; } }

.wave-line-2 { position: absolute; top: 10px; left: calc(50% - 79px); width: 457px; height: 32px; }

/* ── DECORATIVE DOT FLOAT ── */
.banner-dot-1, .banner-dot-2, .banner-dot-3 {
  animation: dotFloat 4s ease-in-out infinite paused;
}
.banner-dot-1 { animation-delay: 0s; }
.banner-dot-2 { animation-delay: 1.3s; }
.banner-dot-3 { animation-delay: 2.6s; }

@keyframes dotFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}