@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable animation in the editor preview */
  .editor-styles-wrapper .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #7b00ff, #56beb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}


.highlighted-text {
  position: relative;
  display: inline-block; /* block context so ::before can size itself */
  z-index: 0;            /* keep text above the pseudo highlight */
}

.highlighted-text::before {
  content: "";
  position: absolute;
  top: -0.2em;    /* grow highlight above */
  bottom: -0.2em; /* and below */
  left: -1em;   /* extend left */
  right: -0.8em;  /* extend right */
  background-image: url('https://thoolie.com/wp-content/uploads/2025/09/1.png');
  background-repeat: no-repeat;
  background-size: cover;   /* make sure it fills */
  background-position: center;
  z-index: -1;              /* put highlight behind text */
  border-radius: 0.15em;    /* optional soften edges */
}


.raise-text {
  position: relative;
  z-index: 1;
}



@media (max-width: 768px) {
  .highlighted-text {
    background-size: 150% 300%;
    background-position: center 50%;
    line-height: 1;
}

	video.create-section-video {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

video.create-section-video::cue {
  display: none;
}


	.resources-search {
		position: relative;
		z-index: 2;
	}
	
	/* Desktop/Tablet */
.vault-header-video {
  display: block;
  margin: 0 auto;   /* centers even at 70% */
}

/* Mobile override */
@media (max-width: 768px) {
  .vault-header-video {
    width: 100% !important;   /* take full width */
    max-width: 500px;         /* optional cap */
  }
}