/* ==========================================================================
   BISP Trainings — Flow layer
   Liquid motion + AI "data current" effects. Loaded after main.css.
   Everything here is decorative and fully disabled under reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------- 1. SCROLL PROGRESS */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--brand), var(--amber), var(--violet), var(--teal));
  background-size: 300% 100%;
  animation: streamX 6s linear infinite;
  box-shadow: 0 0 12px rgba(139, 92, 246, .55);
  transition: width .1s linear;
}
@keyframes streamX { to { background-position: 300% 0; } }

/* ------------------------------------------- 1b. TOP BAR — OCEAN CURRENT
   Three colours (ocean blue → cyan → teal) drifting sideways, with a light
   band riding over them like sun on moving water.
   ---------------------------------------------------------------------- */
.topbar { animation: oceanFlow 16s linear infinite; }
@keyframes oceanFlow { to { background-position: -300% 0; } }

/* Sunlight sheen sweeping across the current */
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
      transparent 0%, rgba(255,255,255,.00) 32%,
      rgba(255,255,255,.22) 46%, rgba(190,240,255,.30) 50%,
      rgba(255,255,255,.18) 55%, transparent 72%, transparent 100%);
  background-size: 220% 100%;
  animation: sheenX 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sheenX { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }

/* Ripple crests along the bottom edge of the bar */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--sky), var(--cyan), var(--aqua), var(--sky));
  background-size: 200% 100%;
  animation: streamX 7s linear infinite;
  opacity: .85;
}
.topbar .wrap { position: relative; z-index: 1; }

/* ------------------------------------------------- 2. FLOWING GRADIENTS */
.grad-text, .grad-text--ai {
  background-size: 220% 100%;
  animation: streamX 7s ease-in-out infinite alternate;
}
.btn--brand, .btn--ai {
  background-size: 200% 100%;
  animation: streamX 8s ease-in-out infinite alternate;
}

/* ----------------------------------------------------- 3. LIQUID BLOBS */
.liquid { position: absolute; inset: -20% -10%; z-index: -1; overflow: hidden; pointer-events: none; }
.liquid span {
  position: absolute; display: block;
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  filter: blur(70px); opacity: .34;
  border-radius: 46% 54% 62% 38% / 42% 46% 54% 58%;
  animation: morph 18s ease-in-out infinite, drift 26s ease-in-out infinite;
  will-change: transform, border-radius;
}
.liquid span:nth-child(1) { top: -14%; right: -6%;  background: radial-gradient(circle at 35% 35%, #0C8CE9, transparent 68%); }
.liquid span:nth-child(2) { bottom: -22%; left: -8%; background: radial-gradient(circle at 60% 40%, #06B6D4, transparent 68%); animation-delay: -6s, -9s; }
.liquid span:nth-child(3) { top: 28%; left: 34%;     background: radial-gradient(circle at 50% 50%, #0D9488, transparent 68%); animation-delay: -12s, -17s; opacity: .22; }

@keyframes morph {
  0%,100% { border-radius: 46% 54% 62% 38% / 42% 46% 54% 58%; }
  33%     { border-radius: 62% 38% 44% 56% / 58% 62% 38% 42%; }
  66%     { border-radius: 38% 62% 56% 44% / 54% 38% 62% 46%; }
}
@keyframes drift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  25%     { transform: translate3d(3%, -4%, 0) scale(1.07); }
  50%     { transform: translate3d(-4%, 3%, 0) scale(.95); }
  75%     { transform: translate3d(2%, 5%, 0) scale(1.04); }
}

/* --------------------------------------------------- 4. WAVE DIVIDERS */
.wave {
  position: relative; line-height: 0; overflow: hidden;
  height: clamp(54px, 7vw, 104px);
}
.wave svg { position: absolute; left: 0; width: 200%; height: 100%; }
/* Back two layers are water and are lifted so their crests break above the
   front layer; the front layer carries the section colour, keeping the seam
   between sections perfectly solid. */
.wave svg:nth-child(1) {
  bottom: 26px; fill: url(#waveGrad); opacity: .45;
  animation: waveX 14s linear infinite;
}
.wave svg:nth-child(2) {
  bottom: 12px; fill: url(#waveGrad); opacity: .75;
  animation: waveX 22s linear infinite reverse;
}
.wave svg:nth-child(3) {
  bottom: 0; fill: var(--wave-fill);
  animation: waveX 30s linear infinite;
}
.wave--flip { transform: rotate(180deg); }
@keyframes waveX { to { transform: translateX(-50%); } }

/* ------------------------------------------- 5. BI DASHBOARD BACKDROP
   A dashboard quietly assembling itself behind the AI advisor: axis grid,
   bars settling to new values, a trend line drawing itself with a pulse
   riding along it, and a donut sweeping round. Deliberately low-contrast —
   it should register as depth, never compete with the copy.
   ---------------------------------------------------------------------- */
.bi-stage {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* fade it out behind the text column so nothing fights for attention */
  mask-image: radial-gradient(120% 95% at 50% 45%, transparent 26%, #000 68%);
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, transparent 26%, #000 68%);
}
.bi-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-sec .wrap { position: relative; z-index: 1; }

/* --- axis grid --- */
.bi-grid line {
  stroke: rgba(190,235,255,.13); stroke-width: 1; stroke-dasharray: 3 9;
  animation: biGridDrift 26s linear infinite;
}
@keyframes biGridDrift { to { stroke-dashoffset: -240; } }

/* --- bars --- */
.bi-bars rect {
  fill: url(#biBar);
  transform-box: fill-box; transform-origin: bottom;
  animation: biBar 6.5s cubic-bezier(.5,0,.2,1) infinite;
}
.bi-bars rect:nth-child(1) { animation-delay: -0.0s; }
.bi-bars rect:nth-child(2) { animation-delay: -0.7s; }
.bi-bars rect:nth-child(3) { animation-delay: -1.4s; }
.bi-bars rect:nth-child(4) { animation-delay: -2.1s; }
.bi-bars rect:nth-child(5) { animation-delay: -2.8s; }
.bi-bars rect:nth-child(6) { animation-delay: -3.5s; }
.bi-bars rect:nth-child(7) { animation-delay: -4.2s; }
.bi-bars rect:nth-child(8) { animation-delay: -4.9s; }
.bi-bars rect:nth-child(9) { animation-delay: -5.6s; }
.bi-bars rect:nth-child(10){ animation-delay: -6.3s; }
@keyframes biBar {
  0%, 100% { transform: scaleY(.42); opacity: .5; }
  35%      { transform: scaleY(1);   opacity: .95; }
  70%      { transform: scaleY(.68); opacity: .7; }
}

/* --- trend line drawing itself --- */
.bi-line {
  fill: none; stroke: url(#biLine); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.35));
  animation: biDraw 9s cubic-bezier(.6,0,.25,1) infinite;
}
@keyframes biDraw {
  0%       { stroke-dashoffset: 2600; }
  45%, 78% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -2600; }
}

.bi-area { fill: url(#biArea); opacity: 0; animation: biArea 9s ease-in-out infinite; }
@keyframes biArea {
  0%, 12%  { opacity: 0; }
  48%, 76% { opacity: .55; }
  100%     { opacity: 0; }
}

/* --- data points --- */
.bi-dots circle {
  fill: #BEEBFF; opacity: 0;
  animation: biDot 9s ease-in-out infinite;
}
.bi-dots circle:nth-child(1) { animation-delay: 1.6s; }
.bi-dots circle:nth-child(2) { animation-delay: 2.4s; }
.bi-dots circle:nth-child(3) { animation-delay: 3.2s; }
.bi-dots circle:nth-child(4) { animation-delay: 4.0s; }
@keyframes biDot {
  0%, 8%   { opacity: 0; transform: scale(.4); }
  16%      { opacity: .95; transform: scale(1.5); }
  24%, 74% { opacity: .6;  transform: scale(1); }
  86%,100% { opacity: 0;   transform: scale(.4); }
}

/* --- donut --- */
.bi-donut__track {
  fill: none; stroke: rgba(190,235,255,.12); stroke-width: 12;
}
.bi-donut__arc {
  fill: none; stroke: url(#biLine); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 390; stroke-dashoffset: 390;
  transform: rotate(-90deg);
  animation: biDonut 9s cubic-bezier(.6,0,.25,1) infinite;
  filter: drop-shadow(0 0 8px rgba(20,184,166,.35));
}
@keyframes biDonut {
  0%       { stroke-dashoffset: 390; }
  50%, 80% { stroke-dashoffset: 108; }
  100%     { stroke-dashoffset: 390; }
}

/* --- pulse riding the trend line --- */
.bi-pulse { display: none; }
@supports (offset-path: path("M0,0 L1,1")) {
  .bi-pulse {
    display: block; position: absolute; left: 0; top: 0;
    width: 132px; height: 132px; margin: -66px 0 0 -66px;
    border-radius: 50%; background: radial-gradient(circle, rgba(190,235,255,.5), transparent 62%);
    offset-path: path("M0,520 C120,500 200,455 300,468 S460,425 560,395 S720,335 840,348 S1000,275 1120,236 S1300,178 1440,146");
    offset-rotate: 0deg;
    animation: biRide 9s cubic-bezier(.6,0,.25,1) infinite;
    opacity: 0;
  }
}
@keyframes biRide {
  0%       { offset-distance: 0%;   opacity: 0; }
  10%      { opacity: .75; }
  45%      { offset-distance: 100%; opacity: .75; }
  60%,100% { offset-distance: 100%; opacity: 0; }
}

/* ------------------------------------------------------ 6. CURSOR AURA */
.aura {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; z-index: 0;
  margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(12,140,233,.18), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
  will-change: transform;
}
.aura.on { opacity: 1; }
@media (hover: none) { .aura { display: none; } }

/* ------------------------------------------------- 7. SHIMMER / RIPPLE */
.course, .res, .web, .step, .quote { position: relative; overflow: hidden; }
.course::after, .res::after, .step::after, .quote::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-18deg); transition: none; pointer-events: none;
}
.course:hover::after, .res:hover::after, .step:hover::after, .quote:hover::after {
  animation: sheen .9s var(--ease) forwards;
}
@keyframes sheen { to { left: 120%; } }
:root[data-theme="dark"] .course::after,
:root[data-theme="dark"] .res::after,
:root[data-theme="dark"] .step::after,
:root[data-theme="dark"] .quote::after {
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
}

/* Flowing underline on the eyebrow rule */
.eyebrow::before {
  background: linear-gradient(90deg, currentColor, transparent, currentColor);
  background-size: 200% 100%;
  animation: streamX 3.5s linear infinite;
}

/* Live pulse ring on the AI avatar — removed, read as visual noise
.avatar-ai::after { … } */
.avatar-ai { position: relative; }

/* Chat messages ride in on a current */
.msg--ai .msg__txt { position: relative; overflow: hidden; }
.msg--ai .msg__txt::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, var(--violet), var(--teal));
  background-size: 100% 200%; animation: streamY 3s linear infinite;
}
@keyframes streamY { to { background-position: 0 200%; } }

/* Stat strip: a current running under the numbers */
.stats { position: relative; overflow: hidden; }
.stats::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--brand), var(--violet), var(--teal), transparent);
  background-size: 50% 100%; animation: streamX 5s linear infinite;
  opacity: .7;
}

/* --------------------------------------------------- 8. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .liquid span, .wave svg, .progress i, .grad-text, .grad-text--ai,
  .btn--brand, .btn--ai, .stats::after, .eyebrow::before,
  .avatar-ai::after, .msg--ai .msg__txt::before,
  .topbar, .topbar::before, .topbar::after { animation: none !important; }
  .topbar::before { display: none; }
  .aura, .bi-pulse { display: none; }
  .bi-grid line, .bi-bars rect, .bi-line, .bi-area, .bi-dots circle, .bi-donut__arc {
    animation: none !important;
  }
  .bi-line { stroke-dashoffset: 0; }
  .bi-area { opacity: .45; }
  .bi-dots circle { opacity: .7; }
  .bi-donut__arc { stroke-dashoffset: 108; }
  .course:hover::after, .res:hover::after, .step:hover::after, .quote:hover::after { animation: none; }
}

/* Backdrop stops painting when it scrolls out of view or the tab is hidden */
.bi-stage.is-paused *, .bi-stage.is-paused { animation-play-state: paused !important; }

/* ------------------------------------------ 9. HEADER — SOFT BLUE CURRENT
   A slow blue drift across the white header bar, plus a coloured hairline
   flowing along its bottom edge. Much gentler than the top bar so it reads
   as tint, not decoration.
   ---------------------------------------------------------------------- */
.header::before { animation: headerFlow 22s linear infinite; }
.header::after  { animation: streamX 9s linear infinite; }
@keyframes headerFlow { to { background-position: -260% 0; } }

@media (prefers-reduced-motion: reduce) {
  .header::before, .header::after { animation: none !important; }
}