.section#process {
  overflow: hidden;
}
/* Graphic Container */
.graphic-container.step-1 {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg);
  border-radius: var(--radius);
}
.graphic-container.step-2,
.graphic-container.step-3 {
  height: 100%;
}

/* Wireframe Card Base */
.wf-card {
  position: absolute;
  width: 280px;
  height: 380px;
  background: #ffffff;
  border: 1px solid #e4ebf3;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(9, 64, 103, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center bottom;
  z-index: 1;
}

/* Hover Interaction - Fan Out */
.graphic-container:hover .wf-card-1,
.graphic-container.step-1.auto-fan .wf-card-1 {
  transform: translateX(-160px) rotate(-8deg) scale(0.9);
}
.graphic-container:hover .wf-card-2,
.graphic-container.step-1.auto-fan .wf-card-2 {
  transform: translateX(160px) rotate(8deg) scale(0.9);
}
.graphic-container:hover .wf-card-3,
.graphic-container.step-1.auto-fan .wf-card-3 {
  transform: translateY(-15px) scale(1.05);
}

/* --- Individual Card Positioning --- */
.wf-card-1 {
  transform: translateX(-80px) rotate(-6deg) scale(0.92);
  opacity: 0.95;
}
.wf-card-2 {
  transform: translateX(80px) rotate(6deg) scale(0.92);
  opacity: 0.95;
  z-index: 0;
}

/* --- The Winner (Card 3) --- */
.wf-card-3 {
  z-index: 10;
  transform: translateY(15px);
  border: 2px solid var(--color-primary);
  box-shadow: 0 20px 50px rgba(0, 93, 213, 0.2);
}

/* "Shine" Effect for Winner */
.wf-card-3::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s infinite ease-in-out;
  pointer-events: none;
}
@keyframes shine {
  0% {
    left: -150%;
  }
  20% {
    left: 150%;
  } /* Fast pass */
  100% {
    left: 150%;
  } /* Long pause */
}

/* --- Card Internals (Uniform Layout) --- */
.wf-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px; /* Slightly tighter gap */
}

/* 1. Top Section (Nav) */
.wf-top {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 2px;
}
.wf-logo-placeholder {
  width: 50px;
  height: 6px;
  background: #cbd5e1;
  border-radius: 4px;
}
.wf-nav-placeholder {
  display: flex;
  gap: 4px;
}
.wf-nav-item {
  width: 12px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}

/* 1.5 NEW Full Width Text Bar above Hero */
.wf-hero-header-bar {
  width: 100%;
  height: 20px;
  background: #f1f5f9;
  border-radius: 2px;
  margin-bottom: 5px;
}

/* 2. Middle Section (Split 50/50) */
.wf-middle {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 130px; /* Fixed height for Hero area */
}

/* Left: 50% - Text Elements */
.wf-mid-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* Right: 50% - Visuals */
.wf-mid-right {
  width: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Multi-Colored Text Segments --- */
/* These represent the "Mix" of Problem/Value/Outcome */
.text-row {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
  gap: 2px;
}
.text-row-lg {
  height: 10px;
  margin-bottom: 2px;
}

.seg-blue {
  background-color: #bfdbfe;
} /* Outcome */
.seg-red {
  background-color: #fecaca;
} /* Problem */
.seg-yellow {
  background-color: #fde047;
} /* Value */
.seg-grey {
  background-color: #e2e8f0;
} /* Neutral */

.step-1 .sk-btn {
  height: 14px;
  border-radius: 3px;
  width: 80%;
  background: #e2e8f0;
  margin-top: auto;
}

/* 3. Bottom Sections (Thesis & Risks) */
.wf-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 5px;
}

.wf-thesis-box,
.wf-risk-box {
  padding: 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Thesis = Light Green */
.wf-thesis-box {
  background: rgba(9, 255, 0, 0.05);
  border-left: 3px solid var(--color-green);
}
/* Risk = Light Red */
.wf-risk-box {
  background: rgba(219, 68, 55, 0.05);
  border-left: 3px solid var(--color-red);
}

.wf-section-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.sk-line-sm {
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  width: 100%;
}

/* Label at bottom of card */
.wf-card-label {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
}

.hero-img-inner {
  width: 80%;
  height: 60%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* STEP 2 GRAPHIC CSS */
/* --- Graphic Container --- */
.graphic-container {
  position: relative;
  width: 100%;
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg);
  border-radius: var(--radius);
  /* overflow: hidden; */
  perspective: 1000px;
  padding: 18px;
}

/* --- The Browser Window Frame --- */
.browser-frame {
  position: relative;
  width: 460px; /* Wider, desktop-like width */
  height: 420px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s ease-out;
  z-index: 2;
}

.graphic-container:hover .browser-frame {
  transform: translateY(-10px) rotateX(2deg);
  box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.2);
}

/* Browser Header */
.browser-header {
  height: 28px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0; /* Prevent shrinking */
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-r {
  background: #fca5a5;
}
.dot-y {
  background: #fcd34d;
}
.dot-g {
  background: #86efac;
}
.url-bar {
  flex-grow: 1;
  height: 14px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  margin-left: 12px;
}

/* --- Scrollable Content Area --- */
.page-scroll-view {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  background: #fff;
}

/* Default: Paused and no Hover interaction */
.long-page-content {
  /* Pause by default */
  animation-play-state: paused;
  /* Existing properties... */
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slowScroll 14s ease-in-out infinite alternate;
}

/* Pause animation on hover for better readability if desired */
/* .graphic-container:hover .long-page-content { animation-play-state: paused; } */

@keyframes slowScroll {
  0%,
  10% {
    transform: translateY(0);
  }
  90%,
  100% {
    transform: translateY(-55%);
  }
}
/* Active State: Triggered by JS after delay */
.graphic-container.step-2.active .long-page-content {
  animation-play-state: running;
}

/* Remove any hover effects for Step 2 if they exist in your file */
.graphic-container.step-2:hover .browser-frame {
  transform: none; /* Disable 3D tilt on hover if desired, or keep it */
}
/* --- Skeleton UI Components --- */
.sk-block {
  width: 100%;
  border: 1px dashed #e2e8f0;
  background: #fafafa;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  transition: all 0.3s ease;
}

/* Highlight States (Hover OR Active via JS) */
.sk-block:hover,
.sk-block.active {
  border-color: var(--color-primary);
  background: #eff6ff; /* Light blue */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transform: scale(1.01);
}

/* Generic Text Lines */
.line {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  margin-bottom: 8px;
}
.line.w-100 {
  width: 100%;
}
.line.w-80 {
  width: 80%;
}
.line.w-60 {
  width: 60%;
}
.line.w-40 {
  width: 40%;
}
.line.w-20 {
  width: 20%;
}
.line.primary {
  background: #bfdbfe;
} /* Blue-200 */
.line.dark {
  background: #cbd5e1;
}

/* Specific Sections */
/* Hero */
.sec-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 20px;
}
.hero-img {
  width: 70%;
  height: 80px;
  background: #e2e8f0;
  border-radius: 6px;
  margin-top: 12px;
}

/* Logos */
.sec-logos {
  display: flex;
  justify-content: space-around;
  padding: 12px 24px;
}
.logo-rect {
  width: 40px;
  height: 16px;
  background: #e2e8f0;
  border-radius: 3px;
  opacity: 0.6;
}

/* Features (Side by Side) */
.sec-feature {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sec-feature.reverse {
  flex-direction: row-reverse;
}
.feat-img {
  width: 45%;
  height: 80px;
  background: #e2e8f0;
  border-radius: 6px;
  flex-shrink: 0;
}
.feat-txt {
  flex-grow: 1;
}

/* Benefits Grid (3 Col) */
.sec-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.benefit-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  height: 60px;
}
.benefit-icon {
  width: 20px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 50%;
  margin-bottom: 6px;
}

/* FAQ */
.sec-faq .faq-item {
  height: 12px;
  width: 100%;
  background: #f1f5f9;
  margin-bottom: 8px;
  border-radius: 3px;
}

/* CTA */
.sec-cta {
  background: #eff6ff;
  border: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.cta-btn {
  width: 140px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 6px;
  margin-top: 12px;
}

/* --- Annotations (Floating Labels) --- */
.annotation {
  position: absolute;
  background: var(--color-text-main);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
  right: -140px;
  white-space: nowrap;
}

/* Show Annotations based on .active class on the PARENT SK-BLOCK */
/* Since we can't select the annotation based on the sk-block active state easily in pure CSS 
           without restructuring, we will toggle an 'active' class on the annotation via JS as well.
           OR simply show them all on hover like before. Let's keep the hover behavior for simplicity 
           and user control, but we can ALSO highlight the specific one active via JS. 
        */

/* For this iteration, I'll link annotations to the active state using JS. */
.annotation.active {
  opacity: 1;
  transform: translateX(0);
}

.annotation::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 1px;
  background: var(--color-text-main);
  opacity: 0.5;
}

/* Wrapper for Annotations */
.annot-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*STEP 3 Animation CSS*/
/* --- Graphic Container --- */
.graphic-container .step-3 {
  position: relative;
  width: 100%;
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  perspective: 1000px;
}

/* --- The Browser Window Frame --- */
.browser-frame {
  position: relative;
  width: 520px;
  height: 480px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s ease-out;
  z-index: 2;
}

.graphic-container:hover .browser-frame {
  transform: translateY(-5px) rotateX(1deg);
  box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.2);
}

/* Browser Header */
.browser-header {
  height: 28px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
  z-index: 10;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-r {
  background: #fca5a5;
}
.dot-y {
  background: #fcd34d;
}
.dot-g {
  background: #86efac;
}
.url-bar {
  flex-grow: 1;
  height: 14px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  margin-left: 12px;
}

/* --- The Assembly Area --- */
.assembly-stage {
  flex-grow: 1;
  background: #f1f5f9;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --- Page Sections (The Parts) --- */
.page-part {
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  margin-bottom: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
/* Apply to all inner animations too */
.part-hero,
.part-features,
.part-footer,
.nav-placeholder,
.step-3 .sk-btn,
.feat-icon-box,
.feat-icon-svg,
.visual-placeholder,
.visual-svg,
.part-footer .sk-line {
  animation-play-state: paused !important;
  animation-direction: alternate !important;
}

/* 2. Active State: Running */
.graphic-container.step-3.active .page-stack,
.graphic-container.step-3.active .part-hero,
.graphic-container.step-3.active .part-features,
.graphic-container.step-3.active .part-footer,
.graphic-container.step-3.active .nav-placeholder,
.graphic-container.step-3.active .sk-btn,
.graphic-container.step-3.active .feat-icon-box,
.graphic-container.step-3.active .feat-icon-svg,
.graphic-container.step-3.active .visual-placeholder,
.graphic-container.step-3.active .visual-svg,
.graphic-container.step-3.active .part-footer .sk-line {
  animation-play-state: running !important;
}

/* 3. Disable Hover Interaction for Step 3 */
.graphic-container.step-3:hover .browser-frame {
  transform: none; /* Stops the browser window from tilting on hover */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Reset shadow */
}
/* 1. Set all animations to PAUSED by default and ALTERNATE direction */
.page-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* Added alternate and paused */
  animation: stackAssemble 8s infinite cubic-bezier(0.4, 0, 0.2, 1) alternate
    paused;
}

@keyframes stackAssemble {
  0%,
  15% {
    gap: 30px;
    transform: scale(0.9);
  }
  25%,
  100% {
    gap: 0px;
    transform: scale(1);
  }
}

/* --- Individual Part Styles --- */

/* 1. Hero Section (Side by Side) */
.part-hero {
  height: 220px;
  border-radius: 8px 8px 0 0;
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  animation: heroShape 8s infinite;
}
@keyframes heroShape {
  0%,
  15% {
    border-radius: 8px;
    border-bottom: 1px solid #e2e8f0;
  }
  25%,
  100% {
    border-radius: 0;
    border-bottom: 0px solid transparent;
  }
}

/* 2. Features Section */
.part-features {
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;

  animation: featureShape 8s infinite;
}
@keyframes featureShape {
  0%,
  15% {
    border-radius: 8px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
  }
  25%,
  100% {
    border-radius: 0;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
  }
}

/* 3. Footer Section */
.part-footer {
  height: 100px;
  border-radius: 0 0 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  animation: footerShape 8s infinite;
}
@keyframes footerShape {
  0%,
  15% {
    border-radius: 8px;
    border-top: 1px solid #e2e8f0;
  }
  25%,
  100% {
    border-radius: 0;
    border-top: 0px solid transparent;
  }
}

/* --- Inner Content Transformations --- */

/* Hero Specifics */
.step-3 .hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Navbar detail */
.nav-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  opacity: 0;
  animation: navFadeIn 8s infinite;
}
@keyframes navFadeIn {
  0%,
  35% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}
.step-3 .nav-logo {
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  border-radius: 4px;
}
.step-3 .nav-links {
  display: flex;
  gap: 8px;
}
.step-3 .nav-link {
  width: 30px;
  height: 6px;
  background: #cbd5e1;
  border-radius: 3px;
}

/* Text Lines */
.sk-line {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: background 0.5s;
}
.sk-title {
  height: 16px;
  width: 90%;
  margin-bottom: 16px;
  background: #cbd5e1;
}
.sk-para {
  width: 100%;
}

/* Buttons */
.step-3 .sk-btn {
  padding: 8px 20px;
  background: #e2e8f0;
  color: transparent;
  border-radius: 6px;
  font-weight: bold;
  font-size: 11px;
  margin-top: 14px;
  animation: btnColorize 8s infinite;
}
@keyframes btnColorize {
  0%,
  35% {
    background: #e2e8f0;
    color: transparent;
    transform: scale(0.95);
  }
  40%,
  100% {
    background: var(--color-primary);
    color: white;
    transform: scale(1);
  }
}

/* Icons */
.feat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 30%;
}
.feat-icon-box {
  width: 40px;
  height: 40px;
  background: #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iconMorph 8s infinite;
  position: relative;
}
@keyframes iconMorph {
  0%,
  35% {
    background: #e2e8f0;
    border-radius: 50%;
    transform: scale(0.8);
  }
  40%,
  100% {
    background: transparent;
    border-radius: 0;
    transform: scale(1);
  }
}

.feat-icon-svg {
  width: 28px;
  height: 28px;
  opacity: 0;
  color: var(--color-primary);
  animation: svgFadeIn 8s infinite;
}
@keyframes svgFadeIn {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.5);
  }
  40%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- GRAPH VISUAL --- */
.hero-visual {
  width: 180px;
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Gray Placeholder Box (Square) */
.visual-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e2e8f0;
  border-radius: 8px;
  animation: placeholderFadeOut 8s infinite;
}

/* The Graph SVG */
.visual-svg {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 50%;
  top: 50%;

  opacity: 0;
  animation: graphFadeIn 8s infinite;
}

@keyframes placeholderFadeOut {
  0%,
  35% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes graphFadeIn {
  0%,
  35% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  40%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Background Colors filling in */
.part-hero {
  animation-name: heroBg, heroShape;
}
@keyframes heroBg {
  0%,
  35% {
    background: #fff;
  }
  40%,
  100% {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  }
}

.part-features {
  animation-name: featBg, featureShape;
}
@keyframes featBg {
  0%,
  35% {
    background: #fff;
  }
  40%,
  100% {
    background: #fff;
  }
}

.part-footer {
  animation-name: footerBg, footerShape;
}
@keyframes footerBg {
  0%,
  35% {
    background: #fff;
  }
  40%,
  100% {
    background: #1e293b;
  }
}

/* Footer Text Color Change */
.part-footer .sk-line {
  animation: footerText 8s infinite;
}
@keyframes footerText {
  0%,
  35% {
    background: #e2e8f0;
  }
  40%,
  100% {
    background: rgba(255, 255, 255, 0.2);
  }
}