/* ==========================================================================
   HOME — flow layer. index.html only.
   1. Hero buttons: refined solid / outline pair with an arrow chip; on click a
      ripple from the pointer, a press, and the arrow shoots through.
   2. Overlap: the products section pins once its foot reaches the viewport
      foot (JS sets its sticky top), and "One platform" rides up over it as a
      rounded sheet. --cp (0 → 1) on <html> drives the products recede.
   3. One platform: line-by-line headline, cards rising in depth.
   ========================================================================== */

/* --- 1. Hero buttons ---------------------------------------------------- */
.hh-lede { color: #262d48; }
.hh-btn { position: relative; overflow: hidden; isolation: isolate; gap: 16px; min-width: 0; min-height: 60px; padding: 0 10px 0 28px; border-radius: 14px;
  font-size: clamp(16.5px, 1.1vw, 18.5px); font-weight: 650; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms ease, background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.hh-btn--primary { color: #fff; background: #0b5cff; border: 1px solid #0a4fe0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 1px 2px rgb(10 40 120 / 30%), 0 12px 28px -14px rgb(11 92 255 / 75%); }
.hh-btn--primary:hover { color: #fff; background: #0a52ec; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 1px 2px rgb(10 40 120 / 30%), 0 18px 34px -14px rgb(11 92 255 / 80%); }
.hh-btn--ghost { color: #0b1533; background: rgb(255 255 255 / 92%); border: 1px solid rgb(11 21 51 / 14%); box-shadow: 0 1px 2px rgb(11 21 51 / 6%); }
.hh-btn--ghost:hover { color: #0b1533; background: #fff; border-color: rgb(11 21 51 / 26%); transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgb(11 21 51 / 40%); }
.hh-btn-label { position: relative; z-index: 1; }
.hh-btn-arrow { position: relative; z-index: 1; overflow: hidden; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  transition: background-color 300ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1); }
.hh-btn--primary .hh-btn-arrow { background: rgb(255 255 255 / 16%); }
.hh-btn--ghost .hh-btn-arrow { background: rgb(11 92 255 / 8%); color: #0b5cff; }
.hh-btn-arrow svg { width: 20px; height: 20px; transition: transform 300ms cubic-bezier(.22, 1, .36, 1); }
.hh-btn:hover .hh-btn-arrow svg { transform: translateX(3px); }
.hh-btn--primary:hover .hh-btn-arrow { background: rgb(255 255 255 / 24%); }
.hh-btn--ghost:hover .hh-btn-arrow { background: #0b5cff; color: #fff; }
/* Press */
.hh-btn:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
/* Ripple (spawned by JS at the pointer) */
.hh-ripple { position: absolute; z-index: 0; left: var(--rx); top: var(--ry); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: rgb(255 255 255 / 45%); animation: hh-ripple 650ms cubic-bezier(.22, 1, .36, 1) forwards; }
.hh-btn--ghost .hh-ripple { background: rgb(11 92 255 / 18%); }
@keyframes hh-ripple { to { transform: scale(40); opacity: 0; } }
/* Arrow shoots out right and returns from the left */
.hh-btn.is-firing .hh-btn-arrow svg { animation: hh-fire 520ms cubic-bezier(.65, 0, .35, 1); }
@keyframes hh-fire { 0% { transform: translateX(0); } 45% { transform: translateX(150%); opacity: 1; } 46% { transform: translateX(-150%); opacity: 0; } 47% { opacity: 1; } 100% { transform: translateX(0); } }
.hh-btn:focus-visible { outline: 2px solid #0b5cff; outline-offset: 3px; }
@media (max-width: 640px) { .hh-btn { justify-content: space-between; } }

/* --- 2. Overlap: One platform over Products ----------------------------- */
.hh + .product-showcase { position: sticky; z-index: 2; }       /* top is set by JS */
.product-showcase > .wrap { transform: scale(calc(1 - var(--cp, 0) * .05)); transform-origin: 50% 100%; opacity: calc(1 - var(--cp, 0) * .45); will-change: transform, opacity; }
.product-showcase::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #0b1533; opacity: calc(var(--cp, 0) * .12); border-radius: inherit; }
.product-showcase + .one-platform { position: relative; z-index: 3; margin-top: -40px; border-radius: 36px 36px 0 0;
  background: var(--bg, #f3f5fa); box-shadow: 0 -30px 60px -30px rgb(20 30 80 / 30%), 0 -1px 0 rgb(255 255 255 / 80%); }
.product-showcase + .one-platform::before { content: ''; position: absolute; left: 50%; top: 14px; width: 56px; height: 5px; margin-left: -28px; border-radius: 5px; background: #d9def0; }
.product-showcase.is-covered > .wrap { visibility: hidden; }

/* --- 3. One platform entrance ------------------------------------------- */
.op-l { display: block; }
.js .one-platform .op-intro-copy:not(.in) .op-l { opacity: 0; transform: translateY(34px); }
.one-platform .op-intro-copy.in .op-l { animation: fl-line 900ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(120ms + var(--l) * 130ms); }
.one-platform .op-intro-copy.in .lede { animation: fl-up 800ms cubic-bezier(.22, 1, .36, 1) 560ms backwards; }
.one-platform .op-cards.fl-in .op-card-entry { animation: fl-card 900ms cubic-bezier(.22, 1, .36, 1) backwards; }
.one-platform .op-cards.fl-in .op-card-entry:nth-child(2) { animation-delay: 140ms; }
.one-platform .op-cards.fl-in .op-card-entry:nth-child(3) { animation-delay: 280ms; }
.one-platform .op-cards { perspective: 1400px; }
.op-employee-art { transform: translate3d(0, calc(var(--ap, 0) * -40px), 0); will-change: transform; }
@keyframes fl-line { from { opacity: 0; transform: translateY(34px); filter: blur(5px); } }
@keyframes fl-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fl-card { from { opacity: 0; transform: translateY(60px) rotateX(14deg) scale(.96); } }

@media (max-width: 640px) {
  .hh + .product-showcase { position: relative; top: auto !important; }
  .product-showcase > .wrap { transform: none; opacity: 1; }
  .product-showcase::after { opacity: 0; }
  .product-showcase + .one-platform { margin-top: -24px; border-radius: 26px 26px 0 0; }
  .op-employee-art { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hh + .product-showcase { position: relative; top: auto !important; }
  .product-showcase > .wrap, .op-employee-art { transform: none !important; opacity: 1 !important; }
  .product-showcase::after { opacity: 0; }
  .one-platform *, .hh-btn *, .hh-ripple { animation: none !important; }
  .js .one-platform .op-intro-copy:not(.in) .op-l { opacity: 1; transform: none; }
}