/* Fade in only (no translate/movement). kept for compatibility */
.fade-in-no-move {
  opacity: 0;
  animation: fadeInNoMove 0.6s ease forwards;
  will-change: opacity;
}

@keyframes fadeInNoMove {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*
      Top-down reveal: the element is revealed from the top down using a CSS mask.
      The mask-size animates from 0% height to 100% height so the top becomes visible first.
      Includes -webkit- prefixed properties for better Safari support.
    */
.reveal-top-down {
  /* ensure element can be masked */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* optional subtle fade so edges don't pop */
  opacity: 1;
  will-change:
    mask-size,
    -webkit-mask-size;
  animation: revealDown 0.5s linear forwards;
}

/* Ensure timeline items are invisible before they're revealed */
.timeline-animation {
  opacity: 0;
  /* Ensure mask-size starts at 0 so reveal-top-down animates it */
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  will-change:
    mask-size,
    -webkit-mask-size,
    opacity;
}

.timeline-animation-visible {
  opacity: 1;
}

/* .shadow should fade in at the same speed as fadeInNoMove (0.6s) */
.shadow.timeline-animation {
  opacity: 0;
  transition: all 0.6s ease;
}

.shadow.show {
  opacity: 1;
}

/* When reveal-top-down is applied, opacity should be set to 1 by the animation
       (the class already triggers the mask animation). We keep this to be explicit. */
.timeline-animation.reveal-top-down {
  opacity: 1;
}

@keyframes revealDown {
  from {
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
  }

  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

/* Hero dual-video crossfade styles to avoid loop jump */
.hero-video-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-video-stack .hero-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms linear;
  pointer-events: none;
}

.hero-video-stack .hero-video.show {
  opacity: 1;
}

.timeline-start {
  margin-top: -2.5em;
  margin-bottom: 4em;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 1200px) {
  .timeline-start {
    margin-top: 1em !important;
  }
}

@media screen and (max-width: 770px) {
  .mobile-sustainability-report-bg {
    position: relative;
    overflow: hidden;
  }

  .mobile-sustainability-report-bg .description,
  .mobile-sustainability-report-bg .title {
    color: #fff !important;
  }

  .mobile-sustainability-report-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(https://www.acsgroup.co.uk/images/about-sustainability/sustainability-report-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: brightness(0.5);
    z-index: 0;
    pointer-events: none;
  }

  /* Ensure text and other children sit above the dimmed pseudo-background */
  .mobile-sustainability-report-bg > * {
    position: relative;
    z-index: 1;
  }
}