/**
 * FifoConsult Custom WordPress Theme
 *
 * CSS module: BODY 04 -> BODY 05 atmospheric transition.
 *
 * Module:
 * FifoConsult - Project Value to Institutional Close Transition.
 *
 * This stylesheet controls the decorative bridge rendered by
 * template-parts/body-value-footer-transition.php between the Project Value
 * section and the Institutional Close section. It positions the dust texture,
 * manages the negative overlap into BODY 05 and swaps to the wide texture on
 * large screens.
 *
 * Main visual responsibilities:
 * - preserve the fixed 300px transition band between BODY 04 and BODY 05
 * - render the dust PNG as a non-interactive atmospheric layer
 * - keep pointer events disabled so the bridge cannot block nearby controls
 * - provide wide-screen and small-screen sizing rules for the same visual bridge
 * - respect reduced-motion preferences if animation is later enabled
 *
 * Division of responsibility:
 * - PHP provides the transition wrapper and CSS custom property asset path
 * - CSS controls all visual positioning and responsive behavior
 * - JavaScript does not initialize or control this module
 *
 * Related PHP:
 * template-parts/body-value-footer-transition.php
 * template-parts/body-project-value.php
 * template-parts/body-institutional-close.php
 *
 * Visual assets:
 * assets/img/body/value-footer-transition/
 *
 * Concept, visual direction, structure, interface design and implementation:
 * Dragan Oljaca / FifoConsult
 *
 * Website: https://www.fifoconsult.com
 * Author: Dragan Oljaca
 * Brand: FifoConsult
 *
 * All rights reserved.
 */

.fc-value-footer-transition {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 300px;
  min-height: 300px;
  margin-top: 0;
  margin-bottom: -300px;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
  isolation: isolate;
  z-index: 4;
  background: transparent;
}

.fc-value-footer-transition__dust {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 1920px;
  height: 300px;
  pointer-events: none;
  z-index: 2;
  background-image: url("../img/body/value-footer-transition/transition-dust-main.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 300px;
  transform: translate(-50%, calc(-68% - 90px));
  opacity: 1;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  animation: none;
}

@keyframes fc-value-footer-dust-drift {
  from {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.38;
  }

  to {
    transform: translateX(-50%) translateY(-6px) scale(1.025);
    opacity: 0.48;
  }
}

@media (min-width: 1800px) {
  .fc-value-footer-transition {
    height: 300px;
    margin-top: 0;
    margin-bottom: -300px;
  }
}

@media (min-width: 1921px) {
  .fc-value-footer-transition__dust {
    max-width: 3840px;
    background-image: url("../img/body/value-footer-transition/transition-dust-main-wide.png");
    background-size: 100% 300px;
  }
}

@media (max-width: 1180px) {
  .fc-value-footer-transition {
    height: 300px;
    min-height: 300px;
    margin-top: 0;
    margin-bottom: -300px;
  }
}

@media (max-width: 700px) {
  .fc-value-footer-transition {
    height: 300px;
    min-height: 300px;
    margin-top: 0;
    margin-bottom: -300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-value-footer-transition__dust {
    animation: none;
  }
}