/* ================================================
   HOW IT WORKS SECTION
================================================ */

.hiw-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

.hiw-header {
  max-width: 680px;
  margin-bottom: 4rem;
}
.hiw-header .section-label {
  justify-content: flex-start;
}

/* Slider Desktop (Grid) */
.hiw-slider {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.hiw-slide {
  display: flex;
  flex-direction: column;
}

/* Timeline */
.hiw-step {
  flex-grow: 1; /* Pushes the mockup-card down so they align */
  position: relative;
  margin-bottom: 2.5rem;
}

.hiw-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  white-space: nowrap; /* Prevent title from wrapping awkwardly if we want the line to sit on the right */
}

.hiw-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hiw-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hiw-step-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: normal;
}

.hiw-step-line {
  flex-grow: 1;
  height: 2px;
  background-image: linear-gradient(to right, var(--border) 50%, transparent 50%);
  background-size: 8px 100%;
  position: relative;
  margin-left: 0.5rem;
}

.hiw-slide:last-child .hiw-step-line {
  display: none;
}

/* Mockup Card */
.mockup-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  height: 340px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mockup-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.mockup-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Mockup 1: Locker UI */
.ui-screen {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.02);
}
.ui-btn {
  width: 80%;
  padding: 0.625rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
}
.ui-btn.active {
  background: var(--primary-10);
  border-color: var(--primary-40);
  color: var(--color-blue-primary);
}

/* Mockup 2: WhatsApp */
.wa-message {
  background: #128C7E;
  border-radius: 12px 12px 12px 0;
  padding: 1rem;
  width: 90%;
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 4px 15px rgba(18, 140, 126, 0.3);
  position: relative;
  line-height: 1.5;
}
.wa-code {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  display: block;
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.2);
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 2px;
}

/* Mockup 3: Locker Panel */
.locker-panel-mockup {
  width: 140px;
  background: #1a1f2c;
  border: 4px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: mockup3Appear 12s infinite;
  opacity: 0;
  box-shadow: var(--shadow-lg);
}
.panel-screen {
  background: #000;
  border: 1px solid #333;
  border-radius: 4px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-primary);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 2px;
}
.type-code {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: typeCode 12s infinite steps(4, end);
  width: 0;
}
.cursor {
  animation: blinkCursor 0.5s infinite;
}
.panel-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.panel-keypad i {
  height: 18px;
  background: var(--surface-2);
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* Mockup 4: Open Door */
.step-4-locker {
  width: 120px;
  height: 120px;
  animation: mockup4Appear 12s infinite;
  opacity: 0;
}
.step-4-locker::before {
  animation: doorOpenHero 12s infinite;
}
.step-4-locker::after {
  animation: handleFadeHero 12s infinite;
}
.step-4-locker .package-inside {
  animation: packageAppearHero 12s infinite;
}

/* Security Banner */
.hiw-banner {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  padding: 1rem 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 auto;
}
.hiw-banner-wrapper {
  text-align: center;
}
.banner-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}
.banner-badge i {
  color: var(--color-blue-primary);
}
.banner-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

@media (max-width: 1024px) {
  .hiw-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
  }
  .hiw-slider::-webkit-scrollbar { display: none; /* Safari/Chrome */ }
  .hiw-slide {
    flex: 0 0 85vw;
    scroll-snap-align: center;
  }
  .hiw-step-line { display: none; }
  
  .hiw-banner {
    flex-direction: column;
    border-radius: var(--radius-lg);
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
  }

  /* MOBILE INDEPENDENT ANIMATIONS (Triggered on scroll) */
  .hiw-step:nth-child(n) .hiw-step-num { background: var(--primary-40); color: #fff; border-color: var(--primary-40); animation: none; }
  .hiw-step:nth-child(n) .hiw-step-progress { display: none; }
  
  /* Reset animations and set initial state */
  .ui-btn { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text-secondary) !important; animation: none !important; }
  .wa-message { transform: scale(0); opacity: 0; animation: none; }
  .locker-panel-mockup { animation: none; opacity: 1; }
  .type-code { width: 0; animation: none; }
  .step-4-locker { animation: none; opacity: 1; }
  .step-4-locker::before { transform: rotateY(0deg); animation: none; }
  .step-4-locker::after { opacity: 1; animation: none; }
  .step-4-locker .package-inside { opacity: 0; transform: scale(0.5) translateZ(-40px); animation: none; }
  
  /* Start animation when slide intersects (is-active-slide) */
  .is-active-slide .ui-btn:nth-child(1) { animation: btn1ActiveMobile 0.6s forwards; }
  .is-active-slide .ui-btn:nth-child(2) { animation: btn1ActiveMobile 0.6s 0.6s forwards; }
  .is-active-slide .ui-btn:nth-child(3) { animation: btn3ActiveMobile 0.6s 1.2s forwards; }
  
  .is-active-slide .wa-message { animation: waBubbleMobile 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  
  .is-active-slide .type-code { animation: typeCodeMobile 1s 0.3s steps(4, end) forwards; }
  
  .is-active-slide .step-4-locker::before { animation: doorOpenMobile 0.8s 0.3s ease-out forwards; }
  .is-active-slide .step-4-locker::after { animation: handleFadeMobile 0.4s 0.3s forwards; }
  .is-active-slide .step-4-locker .package-inside { animation: packageAppearMobile 0.8s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  
  @keyframes waBubbleMobile {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes typeCodeMobile {
    0% { width: 0; }
    100% { width: 4.5ch; }
  }
  @keyframes doorOpenMobile {
    0% { transform: rotateY(0deg); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); border-color: var(--border-soft); }
    100% { transform: rotateY(-105deg); background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }
  }
  @keyframes handleFadeMobile {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes packageAppearMobile {
    0% { opacity: 0; visibility: hidden; transform: scale(0.5) translateZ(-40px); color: currentColor; }
    100% { opacity: 1; visibility: visible; transform: scale(1) translateZ(0); color: #2ecc71; }
  }
  @keyframes btn1ActiveMobile {
    0% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); }
    50% { background: var(--primary-10); border-color: var(--primary-40); color: var(--color-blue-primary); }
    100% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); }
  }
  @keyframes btn3ActiveMobile {
    0% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); transform: scale(1); }
    20% { transform: scale(0.95); background: var(--primary-40); color: #fff; }
    100% { background: var(--primary-10); border-color: var(--primary-40); color: var(--color-blue-primary); transform: scale(1); }
  }
}

/* ================================================
   SEQUENTIAL ANIMATIONS (16s Loop)
================================================ */

/* Timeline Progress Lines */
.hiw-step-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--color-blue-primary);
  z-index: 1;
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 8px var(--color-blue-primary);
}

.hiw-slide:nth-child(1) .hiw-step-progress { animation: progress1 12s infinite; }
.hiw-slide:nth-child(2) .hiw-step-progress { animation: progress2 12s infinite; }
.hiw-slide:nth-child(3) .hiw-step-progress { animation: progress3 12s infinite; }

/* Timeline Numbers */
.hiw-slide:nth-child(1) .hiw-step-num { animation: num1 12s infinite; }
.hiw-slide:nth-child(2) .hiw-step-num { animation: num2 12s infinite; }
.hiw-slide:nth-child(3) .hiw-step-num { animation: num3 12s infinite; }
.hiw-slide:nth-child(4) .hiw-step-num { animation: num4 12s infinite; }

/* Mockup 1: UI Buttons */
.ui-btn:nth-child(1) { animation: btn1Active 12s infinite; }
.ui-btn:nth-child(2) { animation: btn2Active 12s infinite; }
.ui-btn:nth-child(3) { animation: btn3Active 12s infinite; }

/* Mockup 2: WhatsApp */
.wa-message {
  animation: waBubble 12s infinite;
  transform: scale(0);
  opacity: 0;
  transform-origin: bottom left;
}

/* Mockup 3: QR Laser */
.qr-box i { animation: qrAppear 12s infinite; opacity: 0; }
.qr-box::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-blue-primary);
  box-shadow: 0 0 8px var(--color-blue-primary);
  animation: laserScan 12s infinite;
  opacity: 0;
}

/* Mockup 4: Door Open */
.door-panel {
  animation: doorOpen 12s infinite;
}

/* --- KEYFRAMES --- */

/* Numbers */
@keyframes num1 {
  0%, 95% { background: var(--primary-40); color: #fff; border-color: var(--primary-40); box-shadow: 0 0 15px rgba(15,112,183,0.5); }
  100% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
}
@keyframes num2 {
  0%, 24% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
  25%, 95% { background: var(--primary-40); color: #fff; border-color: var(--primary-40); box-shadow: 0 0 15px rgba(15,112,183,0.5); }
  100% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
}
@keyframes num3 {
  0%, 49% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
  50%, 95% { background: var(--primary-40); color: #fff; border-color: var(--primary-40); box-shadow: 0 0 15px rgba(15,112,183,0.5); }
  100% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
}
@keyframes num4 {
  0%, 74% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
  75%, 95% { background: var(--primary-40); color: #fff; border-color: var(--primary-40); box-shadow: 0 0 15px rgba(15,112,183,0.5); }
  100% { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); box-shadow: none; }
}

/* Progress Lines */
@keyframes progress1 {
  0%, 15% { transform: scaleX(0); }
  25%, 95% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes progress2 {
  0%, 40% { transform: scaleX(0); }
  50%, 95% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes progress3 {
  0%, 65% { transform: scaleX(0); }
  75%, 95% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* UI Buttons */
@keyframes btn1Active {
  0%, 6% { background: var(--primary-10); border-color: var(--primary-40); color: var(--color-blue-primary); }
  7%, 100% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); }
}
@keyframes btn2Active {
  0%, 6% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); }
  7%, 12% { background: var(--primary-10); border-color: var(--primary-40); color: var(--color-blue-primary); }
  13%, 100% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); }
}
@keyframes btn3Active {
  0%, 12% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); transform: scale(1); }
  12.5% { transform: scale(0.95); background: var(--primary-40); }
  13%, 95% { background: var(--primary-10); border-color: var(--primary-40); color: var(--color-blue-primary); transform: scale(1); }
  96%, 100% { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); transform: scale(1); }
}

/* WhatsApp */
@keyframes waBubble {
  0%, 24% { transform: scale(0); opacity: 0; }
  26% { transform: scale(1.05); opacity: 1; }
  28%, 95% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Mockup 3: Locker Panel */
@keyframes mockup3Appear {
  0%, 49% { opacity: 0; transform: scale(0.9); }
  51%, 95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
@keyframes typeCode {
  0%, 51% { width: 0; }
  55%, 95% { width: 4.5ch; }
  100% { width: 0; }
}
@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Door Open */
@keyframes mockup4Appear {
  0%, 74% { opacity: 0; transform: scale(0.9); }
  76%, 95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
@keyframes doorOpenHero {
  0%, 74% { transform: rotateY(0deg); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); border-color: var(--border-soft); }
  78%, 95% { transform: rotateY(-105deg); background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }
  100% { transform: rotateY(0deg); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); border-color: var(--border-soft); }
}
@keyframes handleFadeHero {
  0%, 74% { opacity: 1; }
  78%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes packageAppearHero {
  0%, 74% { opacity: 0; visibility: hidden; transform: scale(0.5) translateZ(-40px); color: currentColor; }
  78%, 95% { opacity: 1; visibility: visible; transform: scale(1) translateZ(0); color: #2ecc71; }
  100% { opacity: 0; visibility: hidden; transform: scale(0.5) translateZ(-40px); color: currentColor; }
}

/* --- DESKTOP ANIMATION TRIGGER --- */
@media (min-width: 1025px) {
  .hiw-section .hiw-step-progress,
  .hiw-section .hiw-step-num,
  .hiw-section .ui-btn,
  .hiw-section .wa-message,
  .hiw-section .qr-box i,
  .hiw-section .qr-box::after,
  .hiw-section .locker-panel-mockup,
  .hiw-section .type-code,
  .hiw-section .cursor,
  .hiw-section .door-panel,
  .hiw-section .step-4-locker,
  .hiw-section .step-4-locker::before,
  .hiw-section .step-4-locker::after,
  .hiw-section .package-inside {
    animation-play-state: paused !important;
  }

  .hiw-section.is-animating .hiw-step-progress,
  .hiw-section.is-animating .hiw-step-num,
  .hiw-section.is-animating .ui-btn,
  .hiw-section.is-animating .wa-message,
  .hiw-section.is-animating .qr-box i,
  .hiw-section.is-animating .qr-box::after,
  .hiw-section.is-animating .locker-panel-mockup,
  .hiw-section.is-animating .type-code,
  .hiw-section.is-animating .cursor,
  .hiw-section.is-animating .door-panel,
  .hiw-section.is-animating .step-4-locker,
  .hiw-section.is-animating .step-4-locker::before,
  .hiw-section.is-animating .step-4-locker::after,
  .hiw-section.is-animating .package-inside {
    animation-play-state: running !important;
  }
}