/* Home page only (see index.njk). The shared buttons, gradient bars, reveals and counters live in site-motion.css. */

/* Hero: plain black, columns image revealed from left to right */
.page-home .hero {
  position: relative; overflow: hidden; background: #04070C;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.page-home .hero-inner { position: relative; z-index: 1; }
/* The image file is already black on its left side, so the headline area stays clean. The mask only controls the reveal:
   with no motion it rests fully open, so reduced-motion visitors see the finished picture. */
.page-home .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/images/home-columns.jpg") right center / cover no-repeat;
  opacity: 0.225; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
}
/* On phones the copy runs the full width, so the picture is quieter to keep the paragraph easy to read */
@media (max-width: 760px) {
  .page-home .hero::before { opacity: 0.1; }
}

/* Headline highlight */
.hm-hl {
  display: inline-block; padding: 0 0.2em; border-radius: 0.2em; color: #FFFFFF;
  background: var(--sm-grad); background-size: 200% 100%; text-shadow: 0 1px 3px rgba(5, 0, 10, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .hm-hl { animation: hm-shift 9s ease-in-out infinite alternate; }
  @keyframes hm-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

  /* The columns image is revealed from left to right, once, when the page loads */
  .page-home .hero::before { animation: hm-reveal 2.8s cubic-bezier(0.25, 0.6, 0.2, 1) 0.25s both; }
  @keyframes hm-reveal {
    from { -webkit-mask-position: 65% 0; mask-position: 65% 0; }
    to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  }

  /* Hero picture: files arrive, lines flow, the window builds */
  .page-home .hv-file { opacity: 0; transform: translateX(-18px); animation: hm-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .page-home .hv-file:nth-child(1) { animation-delay: 0.15s; }
  .page-home .hv-file:nth-child(2) { animation-delay: 0.3s; }
  .page-home .hv-file:nth-child(3) { animation-delay: 0.45s; }
  .page-home .hv-file:nth-child(4) { animation-delay: 0.6s; }
  .page-home .hv-window { opacity: 0; transform: translateY(18px); animation: hm-up 0.8s 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .page-home .hv-window .ui-row { opacity: 0; animation: hm-up 0.5s ease forwards; }
  .page-home .hv-window .ui-row:nth-child(4) { animation-delay: 1.0s; }
  .page-home .hv-window .ui-row:nth-child(5) { animation-delay: 1.1s; }
  .page-home .hv-window .ui-row:nth-child(6) { animation-delay: 1.2s; }
  .page-home .hv-window .ui-row:nth-child(7) { animation-delay: 1.3s; }
  .page-home .hv-window .ui-row:nth-child(8) { animation-delay: 1.4s; }
  @keyframes hm-in { to { opacity: 1; transform: none; } }
  @keyframes hm-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .page-home .hv-links g:first-child, .page-home .hv-down path:first-child, .page-home .how-down path:first-child { animation: hm-dash 1.6s linear infinite; }
  @keyframes hm-dash { to { stroke-dashoffset: -18; } }
  .page-home .hv-file { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
  .page-home .hv-file.hm-send { border-color: #C4B8A0; box-shadow: 0 0 0 1px #C4B8A0, 0 0 26px rgba(196, 184, 160, 0.50); }
  .page-home .hv-window .ui-fill { transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .page-home .hv-window .ui-row { transition: background-color 0.8s ease; }
  .page-home .hv-window .ui-row.hm-flash { background: rgba(196, 184, 160, 0.16); }
}