/* =============================================================
   Edge Hub — Motion layer (parallax / micro-interactions / carousel)
   Loaded after service-event.css
   ============================================================= */

/* ---------- 1. Hero title: hazy blur reveal + underline draw ---------- */
.sv-hero-title.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(18px);
  transition:
    opacity 1.5s var(--ease-edge) 0.2s,
    transform 1.5s var(--ease-edge) 0.2s,
    filter 1.5s var(--ease-edge) 0.2s;
}
.sv-hero-title.reveal.in { opacity: 1; transform: none; filter: blur(0); }

.sv-hero-title .ul::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-edge) 0.9s;
}
.sv-hero-title.in .ul::after { transform: scaleX(1); }

/* ---------- 2. Photo inner zoom-out on reveal ---------- */
.sv-features-photo { overflow: hidden; }
.sv-features-photo img {
  transform: scale(1.07);
  transition: transform 1.6s var(--ease-edge);
}
.sv-features-photo-pair.in .sv-features-photo img { transform: scale(1); }

/* ---------- 3. Speech bubbles: pop-in + perpetual float ---------- */
@keyframes svBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.sv-person .sv-bubble {
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.7s var(--ease-edge), transform 0.7s var(--ease-edge);
}
.sv-person.in .sv-bubble {
  opacity: 1;
  transform: none;
  animation: svBubbleFloat 5.6s ease-in-out infinite;
}
.sv-person.in .b1 { transition-delay: 0.25s; animation-delay: 0.95s; }
.sv-person.in .b2 { transition-delay: 0.45s; animation-delay: 2.1s; animation-duration: 6.4s; }
.sv-person.in .b3 { transition-delay: 0.65s; animation-delay: 1.5s; animation-duration: 5.1s; }
.sv-person.in .b4 { transition-delay: 0.85s; animation-delay: 2.7s; animation-duration: 6.9s; }

/* ---------- 4. Flow: connector line draws + number pops ---------- */
.sv-flow-step::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-edge) 0.45s;
}
.sv-flow-step.in::before { transform: scaleX(1); }
.sv-flow-step .sv-flow-num {
  transform: scale(0.55);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.3, 1.35, 0.4, 1) 0.15s, opacity 0.45s var(--ease-out) 0.15s;
}
.sv-flow-step.in .sv-flow-num { transform: scale(1); opacity: 1; }

/* ---------- 5. Benefits carousel ---------- */
.sv-benefit-carousel { position: relative; margin-top: clamp(40px, 4.5vw, 64px); }
.sv-benefit-cards {
  margin-top: 0;
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.sv-benefit-cards::-webkit-scrollbar { display: none; }
.sv-benefit-cards .sv-benefit-card {
  flex: 0 0 clamp(250px, 24vw, 320px);
  scroll-snap-align: start;
}
.sv-car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--paper-line);
  background: #fff;
  color: var(--navy-700);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(14, 35, 72, 0.35);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.sv-car-btn svg { width: 20px; height: 20px; }
.sv-car-btn:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.sv-car-btn:active { transform: translateY(-50%) scale(0.94); }
.sv-car-btn--prev { left: -12px; }
.sv-car-btn--next { right: -12px; }
.sv-car-btn[disabled] { opacity: 0.35; pointer-events: none; }
@media (max-width: 900px) {
  .sv-car-btn { display: none; }
}

/* ---------- 6. Micro-interactions ---------- */
.sv-feature-ic svg,
.sv-benefit-ic svg { transition: transform 0.45s var(--ease-edge); }
.sv-feature:hover .sv-feature-ic svg { transform: translateY(-3px) rotate(-5deg); }
.sv-benefit-card:hover .sv-benefit-ic svg { transform: translateY(-3px) rotate(-5deg); }

.sv-benefit-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.sv-benefit-card:hover { transform: translateY(-5px); }

/* marquee: pause on hover */
.sv-logo-marquee:hover .sv-marquee-track { animation-play-state: paused; }

/* parallax elements get GPU hint */
[data-plx] { will-change: transform; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-hero-title.reveal,
  .pain-pop,
  .sv-hero-title .ul::after,
  .sv-features-photo img,
  .sv-person .sv-bubble,
  .sv-flow-step::before,
  .sv-flow-step .sv-flow-num {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  [data-plx] { transform: none !important; }
}