/**
 * Homepage layout fixes.
 *
 * Plain CSS loaded after dist/styles/theme.css (see AssetsServiceProvider).
 * Kept outside the Sass build because the Mix toolchain in node_modules
 * is incomplete and cannot currently rebuild dist/. Fold these rules into
 * assets/styles/theme/components/_banner.scss and blocks/_homepage.scss
 * once the build works again.
 */

/* Hero: below the laptop breakpoint the container had a fixed 600px height
   while the absolute header (94px) sat over the heading, and the button
   overflowed into the next section. Let the hero grow with its content and
   clear the header. */
@media only screen and (max-width: 739px) {
  .home .hero-container {
    height: auto;
    min-height: 0;
    padding-top: 126px; /* 94px header + 32px */
    padding-bottom: 64px;
  }

  .home .hero-content .btn {
    margin-bottom: 0;
  }
}

/* Hero: 100dvh avoids the iOS Safari jump caused by 100vh. */
@media only screen and (min-width: 740px) {
  .home .hero-container {
    height: 100dvh;
  }
}

/* Hero arrows (markup in views/blocks/banner.twig). Each arrow grows up
   from the bottom of the hero on load, left to right, then a soft band of
   light runs up it on a loop. Both effects stroke the arrow's spine: the
   reveal inside a mask, the pulse inside a clip-path of the arrow shape.
   pathLength="100" lets one dash length and offset fit all four arrows.
   --i is the arrow's index, set inline, and drives the stagger. */
.hero-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-arrows__body {
  fill: url(#hero-arrow-fill);
}

.hero-arrows__reveal,
.hero-arrows__pulse {
  fill: none;
  stroke-width: 260; /* user units: wider than any part of an arrow */
  stroke-linejoin: round;
}

.hero-arrows__reveal {
  stroke: #fff;
  stroke-dasharray: 101 101;
  stroke-dashoffset: 101;
  animation: hero-arrow-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.18s);
}

.hero-arrows__pulse {
  stroke: #fff;
  stroke-dasharray: 12 120;
  stroke-dashoffset: 12;
  opacity: 0;
  animation: hero-arrow-pulse 5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  animation-delay: calc(2.2s + var(--i, 0) * 0.35s);
}

/* Custom properties set on the <g> reach the mask path only through the
   mask reference, which does not inherit, so the reveal stagger is set here. */
.hero-arrows mask:nth-of-type(1) .hero-arrows__reveal { --i: 0; }
.hero-arrows mask:nth-of-type(2) .hero-arrows__reveal { --i: 1; }
.hero-arrows mask:nth-of-type(3) .hero-arrows__reveal { --i: 2; }
.hero-arrows mask:nth-of-type(4) .hero-arrows__reveal { --i: 3; }

@keyframes hero-arrow-grow {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-arrow-pulse {
  0%   { stroke-dashoffset: 12;   opacity: 0; }
  10%  { opacity: 0.55; }
  45%  { opacity: 0.55; }
  60%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* No motion: show the arrows as they were painted, without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .hero-arrows__reveal {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero-arrows__pulse {
    display: none;
  }
}

/* Constrained sections (group layout "constrained", content width 1440px):
   the theme's ".xpt-container h1, h2, p { max-width: 100% }" undoes the
   block layout's max-width, so headings and paragraphs ran edge to edge
   while columns stayed at 1440px. Restore the 1440px width so text lines
   up with the other sections. */
.home .xpt-container.is-layout-constrained > h1,
.home .xpt-container.is-layout-constrained > h2,
.home .xpt-container.is-layout-constrained > p {
  max-width: 1440px;
}