/* ============================================================
   Component: The Right Behaviour Keeps Moving (moving.css)
   BEM Notation: block_element--modifier
   Matched to Figma Node 872:2089 (0:6036)
   ============================================================ */

.section_moving {
  position: relative;
  width: calc(100% - 16px);
  max-width: var(--hero-card-max-width, 1416px);
  margin: 8px auto 24px;
  z-index: 2;
}

@media (min-width: 768px) {
  .section_moving {
    width: calc(100% - 24px);
    margin: 12px auto 40px;
  }
}

/* Rounded Card Shell enclosing Ambient Background & Content */
.moving_card {
  position: relative;
  width: 100%;
  min-height: 873px;
  border-radius: var(--hero-card-radius, 24px);
  border: 1px solid var(--color-card-border, rgba(124, 58, 237, 0.08));
  background-color: var(--color-surface, #FFFFFF);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 24px -2px rgba(115, 57, 212, 0.04);
}

/* Ambient Linear Gradient Background from Figma (linear-bg.png) */
.moving_card-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .moving_card-bg {
    display: block;
  }
}

/* Content Container - Responsive 2-Column Layout */
.moving_container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 36px 16px;
}

@media (min-width: 768px) {
  .moving_container {
    padding: 56px 40px;
    gap: 56px;
  }
}

@media (min-width: 1024px) {
  .moving_container {
    display: grid;
    grid-template-columns: minmax(0, 685px) 340px;
    justify-content: space-between;
    gap: 48px;
    padding: 68px 56px;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .moving_container {
    grid-template-columns: 685px 340px;
    gap: 64px;
    padding: 80px 64px;
  }
}

/* Left Column: Text & Challenges Grid */
.moving_content {
  display: flex;
  flex-direction: column;
  max-width: 685px;
}

/* Eyebrow Tagline */
.moving_eyebrow {
  display: inline-block;
  font-size: var(--font-size-eyebrow, 14px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--color-eyebrow, #5B28AD);
  margin-bottom: 16px;
}

/* Main Section Heading H2 */
.moving_title {
  max-width: 540px;
  font-size: clamp(2.25rem, 4vw, 52px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.14;
  letter-spacing: var(--letter-spacing-tight, -0.02em);
  color: var(--color-text-primary, #020101);
  margin: 0 0 22px 0;
}

@media (max-width: 767px) {
  .moving_title {
    font-size: 40px;
    font-weight: 500;
  }
}

/* Introductory Paragraph */
.moving_description {
  font-size: 16px;
  line-height: 1.55;
  color: #020101;
  margin: 0 0 24px 0;
  max-width: 680px;
}

@media (min-width: 768px) {
  .moving_description {
    font-size: 18px;
    margin-bottom: 40px;
  }
}

.moving_description strong {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #020101);
}

/* Lead Callout Text */
.moving_callout {
  font-size: 17px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.45;
  color: var(--color-text-primary, #020101);
  margin: 0 0 36px 0;
  max-width: 680px;
}

@media (min-width: 768px) {
  .moving_callout {
    font-size: 19px;
    margin-bottom: 60px;
  }
}

/* Challenges / Behavioral Questions Grid */
.moving_grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .moving_grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 28px;
  }
}

@media (min-width: 1024px) {
  .moving_grid {
    row-gap: 32px;
  }
}

/* Individual Challenge Question Item */
.moving_item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Icon Circular Badge */
.moving_icon-box {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-moving-icon-bg, rgba(89, 37, 220, 0.10));
  color: var(--color-moving-icon-stroke, #7339D4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.moving_icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Question Content Text */
.moving_item-text {
  font-size: 15px;
  line-height: 1.42;
  color: var(--color-text-primary, #020101);
  font-weight: var(--font-weight-medium, 500);
}

@media (min-width: 768px) {
  .moving_item-text {
    font-size: 15.5px;
  }
}

/* Right Column: Cascading Cycle Glass Bubbles */
.moving_visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 520px;
}

@media (min-width: 1024px) {
  .moving_visual {
    min-height: 610px;
    justify-content: flex-end;
  }
}

/* Bubble Stage Frame matching Figma dimensions (width: 332px, height: 610px) */
/* Bubble Stage Frame matching Figma dimensions (width: 332px, height: 610px) */
.moving_bubbles {
  position: relative;
  width: 332px;
  max-width: 100%;
  height: 610px;
  margin-inline: auto;
  overflow: visible;
}

@media (max-width: 374px) {
  .moving_bubbles {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -80px;
  }
}

@media (min-width: 1024px) {
  .moving_bubbles {
    margin-inline: 0;
  }
}

/* Base Bubble Item */
.moving_bubble {
  position: absolute;
  border-radius: 50%;
  cursor: default;
  opacity: 1;
  transform: scale3d(1, 1, 1);
  will-change: transform, opacity;
}

/* Pop-in State Management (Progressive Enhancement) */
.moving_bubbles.has-motion .moving_bubble {
  opacity: 0;
  transform: scale3d(0.2, 0.2, 1);
  pointer-events: none;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble {
  animation-name: moving_balloon-pop;
  animation-duration: 0.65s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  pointer-events: auto;
}

/* Staggered Pop-in Delays */
.moving_bubbles.has-motion.is-in-view .moving_bubble--act {
  animation-delay: 0.05s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--learn {
  animation-delay: 0.20s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--adjust {
  animation-delay: 0.35s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--act-again {
  animation-delay: 0.50s;
}

/* Floating / Bouncing Inner Wrapper */
.moving_bubble-bounce {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: transform;
}

/* SVG Spheres inside Bubbles */
.moving_bubble-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Bubble Text Labels */
.moving_bubble-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-family-base);
  font-size: 19px;
  font-weight: var(--font-weight-medium, 500);
  color: #000000;
  user-select: none;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   Individual Bubble Styles & Exact Overlapping Coordinates
   Matched exactly to screenshot (media_1789473289172.png)
   Cascade z-index: Act (1) -> Learn (2) -> Adjust (3) -> Act again (4)
   ------------------------------------------------------------ */

/* Bubble 1: Act (Blue, 168x168) */
.moving_bubble--act {
  top: 0;
  left: 0;
  width: 168px;
  height: 168px;
  z-index: 1;
}

.moving_bubble--act .moving_bubble-bounce {
  background: radial-gradient(100% 100% at 30% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(21, 190, 243, 0.22) 40%, rgba(21, 190, 243, 0.38) 85%, rgba(21, 190, 243, 0.65) 100%);
  border: 1.5px solid rgba(21, 190, 243, 0.45);
  box-shadow: inset 0 -8px 20px rgba(21, 190, 243, 0.3),
              inset 0 8px 16px rgba(255, 255, 255, 0.8),
              0 8px 24px rgba(21, 190, 243, 0.18);
}

/* Bubble 2: Learn (Pink, 188x190) */
.moving_bubble--learn {
  top: 100px;
  left: 85px;
  width: 188px;
  height: 190px;
  z-index: 2;
}

.moving_bubble--learn .moving_bubble-bounce {
  background: radial-gradient(100% 100% at 30% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(229, 83, 144, 0.22) 40%, rgba(229, 83, 144, 0.38) 85%, rgba(229, 83, 144, 0.65) 100%);
  border: 1.5px solid rgba(229, 83, 144, 0.45);
  box-shadow: inset 0 -8px 20px rgba(229, 83, 144, 0.3),
              inset 0 8px 16px rgba(255, 255, 255, 0.8),
              0 8px 24px rgba(229, 83, 144, 0.18);
}

/* Bubble 3: Adjust (Yellow, 208x209) */
.moving_bubble--adjust {
  top: 246px;
  left: 35px;
  width: 208px;
  height: 209px;
  z-index: 3;
}

.moving_bubble--adjust .moving_bubble-bounce {
  background: radial-gradient(100% 100% at 30% 25%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 206, 95, 0.25) 40%, rgba(255, 206, 95, 0.45) 85%, rgba(245, 158, 11, 0.65) 100%);
  border: 1.5px solid rgba(255, 206, 95, 0.55);
  box-shadow: inset 0 -8px 20px rgba(245, 158, 11, 0.28),
              inset 0 8px 16px rgba(255, 255, 255, 0.85),
              0 8px 24px rgba(245, 158, 11, 0.16);
}

/* Bubble 4: Act again (Violet, 228x230) */
.moving_bubble--act-again {
  top: 382px;
  left: 104px;
  width: 228px;
  height: 230px;
  z-index: 4;
}

.moving_bubble--act-again .moving_bubble-bounce {
  background: radial-gradient(100% 100% at 30% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(115, 57, 212, 0.22) 40%, rgba(115, 57, 212, 0.45) 85%, rgba(115, 57, 212, 0.72) 100%);
  border: 1.5px solid rgba(115, 57, 212, 0.5);
  box-shadow: inset 0 -8px 20px rgba(115, 57, 212, 0.3),
              inset 0 8px 16px rgba(255, 255, 255, 0.8),
              0 8px 24px rgba(115, 57, 212, 0.2);
}

/* Continuous Subtle Up-and-Down Bouncing
   Activated once all four balloons have entered (~1.15s) */
.moving_bubbles.has-motion.is-in-view .moving_bubble--act .moving_bubble-bounce {
  animation: moving_balloon-bounce-1 3.8s ease-in-out infinite;
  animation-delay: 1.15s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--learn .moving_bubble-bounce {
  animation: moving_balloon-bounce-2 4.2s ease-in-out infinite;
  animation-delay: 1.35s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--adjust .moving_bubble-bounce {
  animation: moving_balloon-bounce-3 3.6s ease-in-out infinite;
  animation-delay: 1.55s;
}

.moving_bubbles.has-motion.is-in-view .moving_bubble--act-again .moving_bubble-bounce {
  animation: moving_balloon-bounce-4 4.0s ease-in-out infinite;
  animation-delay: 1.75s;
}

/* Stop continuous bounce when leaving viewport */
.moving_bubbles.is-paused .moving_bubble-bounce {
  animation-play-state: paused;
}

/* Pop-in Keyframe: Overshoot bounce and settle */
@keyframes moving_balloon-pop {
  0% {
    opacity: 0;
    transform: scale3d(0.2, 0.2, 1);
  }
  65% {
    opacity: 1;
    transform: scale3d(1.07, 1.07, 1);
  }
  82% {
    transform: scale3d(0.97, 0.97, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Very subtle continuous vertical up-and-down bounces */
@keyframes moving_balloon-bounce-1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes moving_balloon-bounce-2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes moving_balloon-bounce-3 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes moving_balloon-bounce-4 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Reveal Animation on Scroll (Progressive Enhancement) */
.moving_animate {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out-smooth),
              transform var(--duration-slow) var(--ease-out-smooth);
}

.moving_stagger-1 { transition-delay: 0.05s; }
.moving_stagger-2 { transition-delay: 0.12s; }
.moving_stagger-3 { transition-delay: 0.20s; }
.moving_stagger-4 { transition-delay: 0.28s; }
.moving_stagger-5 { transition-delay: 0.36s; }

/* ------------------------------------------------------------
   Accessibility: Reduced Motion (WCAG 2.1 AA)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .moving_bubbles {
    transform: none;
    overflow: visible;
  }

  .moving_bubbles .moving_bubble,
  .moving_bubbles.has-motion .moving_bubble,
  .moving_bubbles.has-motion.is-in-view .moving_bubble {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
    pointer-events: auto;
  }

  .moving_bubbles .moving_bubble-bounce,
  .moving_bubbles.has-motion .moving_bubble-bounce,
  .moving_bubbles.has-motion.is-in-view .moving_bubble-bounce {
    transform: none;
    animation: none;
    transition: none;
  }

  .moving_animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}