/**
 * @file
 * Drupal Focus 2026 shared homepage motion layer.
 *
 * Pure motion enhancement (scroll reveal + hover) for the three static
 * homepage sections: the dark intro band, the two comparison grids and the
 * guides grid. It intentionally does NOT restyle the existing Figma cards
 * (gray box + blue underline are owned by the theme); it only adds entrance
 * and interaction motion. Scoped to the front page via the .path-frontpage
 * body class and JS-applied .dfc-motion-* markers so nothing leaks elsewhere.
 *
 * All initial "hidden" states live behind prefers-reduced-motion:
 * no-preference, so reduced-motion users always see fully rendered content.
 */

/* ---------------------------------------------------------------------------
 * Scroll-reveal entrance (only when motion is allowed).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .path-frontpage .dfc-motion-card,
  .path-frontpage .dfc-motion-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--dfc-stagger, 0ms);
    will-change: opacity, transform;
  }

  .path-frontpage .dfc-motion-card.is-revealed,
  .path-frontpage .dfc-motion-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Comparison grid cards: hover lift + shadow + growing blue underline.
 * The underline already exists in the theme; we only animate its width.
 * ------------------------------------------------------------------------- */
.path-frontpage .dfc-motion-grid .dfc-motion-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.path-frontpage .dfc-motion-grid .dfc-motion-card .wrapper-d_p_single_text_block {
  transition:
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    outline-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  outline: 1px solid transparent;
  outline-offset: -1px;
}

@media (prefers-reduced-motion: no-preference) {
  .path-frontpage .dfc-motion-grid .dfc-motion-card:hover {
    transform: translateY(-4px);
  }
}

.path-frontpage .dfc-motion-grid .dfc-motion-card:hover .wrapper-d_p_single_text_block {
  box-shadow: 0 18px 42px rgba(3, 10, 61, 0.1);
  outline-color: rgba(0, 57, 255, 0.22);
}

/* Animate the existing Figma underline on reveal + hover. */
.path-frontpage .dfc-motion-grid .field--name-field-d-main-title::after {
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.path-frontpage .dfc-motion-grid .dfc-motion-card:hover .field--name-field-d-main-title::after {
  width: 64px !important;
}

/* ---------------------------------------------------------------------------
 * Guides grid: image zoom + animated "Read the guide" affordance.
 * ------------------------------------------------------------------------- */
.path-frontpage .dfc-motion-guides .dfc-motion-card .field--name-field-media-image {
  overflow: hidden;
}

.path-frontpage .dfc-motion-guides .dfc-motion-card .field--name-field-media-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .path-frontpage .dfc-motion-guides .dfc-motion-card:hover .field--name-field-media-image img {
    transform: scale(1.05);
  }
}

/* "Read the guide" is the JS-tagged last paragraph of the long text. */
.path-frontpage .dfc-motion-guides .dfc-motion-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0039ff;
  font-weight: 700;
}

.path-frontpage .dfc-motion-guides .dfc-motion-card__cta::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.path-frontpage .dfc-motion-guides .dfc-motion-card:hover .dfc-motion-card__cta::after {
  transform: translateX(4px) rotate(45deg);
}