/* Data flow — asset-based stage + scroll sequence (Figma exports in gtrace-media/styles/data-flow) */

.data-flow-section .flow-stage {
  position: relative;
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  aspect-ratio: 1288 / 676;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
}

.flow-stage__bg-wrap,
.flow-stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.flow-stage__bg {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.flow-stage.is-bg-visible .flow-stage__bg {
  opacity: 1;
}

.flow-stage__diagram {
  position: absolute;
  left: 6.0155%;
  top: 8.4319%;
  width: 87.9658%;
  height: 85.651%;
  pointer-events: none;
}

.flow-stage__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.flow-stage__border--mobile {
  display: none;
  object-fit: contain;
  object-position: center top;
}

.flow-stage__border--desktop .flow-stage__border-path {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 10 8;
  stroke-dashoffset: 3200;
}

.flow-stage.is-border-draw .flow-stage__border {
  visibility: visible;
  opacity: 1;
}

.flow-stage.is-border-draw .flow-stage__border--desktop .flow-stage__border-path {
  animation: gt-flow-border-draw 2.2s ease forwards;
}

.flow-stage__pieces {
  position: absolute;
  inset: 0;
}

.flow-stage__piece {
  position: absolute;
  opacity: 0;
  transform: translate(var(--gt-enter-x, 0), var(--gt-enter-y, 0)) scale(0.92);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.flow-stage__piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flow-stage__piece.is-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.flow-stage__composite-wrap,
.flow-stage__composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.flow-stage__composite {
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.flow-stage.is-settled .flow-stage__composite {
  opacity: 1;
}

.flow-stage.is-settled .flow-stage__pieces,
.flow-stage.is-settled .flow-stage__border {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.35s ease;
}

.flow-stage.is-settled .flow-stage__pieces .flow-stage__piece {
  display: none;
}

@keyframes gt-flow-border-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 768px) {
  .data-flow-section .flow-stage {
    aspect-ratio: 358 / 1217;
    max-width: 358px;
    border-radius: 24px;
  }

  .data-flow-section .flow-stage__diagram {
    left: 10.1955%;
    top: 3.9458%;
    width: 79.6089%;
    height: 85.6212%;
  }

  .flow-stage__border--desktop {
    display: none;
  }

  .flow-stage__border--mobile {
    display: block;
  }

  .flow-stage.is-border-draw .flow-stage__border--mobile {
    animation: gt-flow-border-fade 2s ease forwards;
  }
}

@keyframes gt-flow-border-fade {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-stage__bg,
  .flow-stage__composite,
  .flow-stage__piece,
  .flow-stage__border--desktop .flow-stage__border-path {
    transition: none !important;
    animation: none !important;
  }

  .data-flow-section .flow-stage:not(.is-ready) .flow-stage__bg,
  .data-flow-section .flow-stage.is-ready .flow-stage__composite {
    opacity: 1;
  }

  .data-flow-section .flow-stage.is-ready .flow-stage__pieces,
  .data-flow-section .flow-stage.is-ready .flow-stage__border {
    display: none !important;
  }
}