/* ANIMATED POLYGONS */
/* Fullscreen angled div */
.angled-div-1 {
  position: relative; /* Relative to allow child positioning */
  overflow: hidden; /* Ensure contents stay within the clip-path */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 100%,
    0% 0%
  ); /* Initial rectangle */
  transition: clip-path 0.3s ease-in-out; /* Smooth transition */
}

/* Background elements inside angled div */
.angled-div-1 .wp-block-cover__background,
.angled-div-1 .wp-block-cover__video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure video fills the block */
  z-index: -1; /* Keep background behind content */
}

/* Content inside the angled div */
.angled-div-1 .wp-block-cover__inner-container {
  position: relative;
  z-index: 1; /* Ensure content is above background */
}

/* Optional: Visible state for the angled div */
.angled-div-1.visible {
  clip-path: polygon(
    0% 0%,
    30% 0%,
    100% 50%,
    100% 100%,
    30% 100%,
    0% 50%
  ); /* Adjust final clip-path for your desired effect */
}