.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 1200ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: none; /* Prevent auto animation */
  color: #fff;
  cursor: default;
  opacity: 0; /* start invisible */
}
.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1a000000;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: none;
}
.reveal-text.in-view {
  animation-name: clip-text;
  opacity: 1;
}
.reveal-text.in-view::after {
  animation-name: text-revealer;
}

/* Keyframes */
@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes text-revealer {
  0%,
  50% {
    transform-origin: 0 50%;
  }
  60%,
  100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.list-nav-item::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s ease-in-out;
}
.list-nav-item:hover::after,
.list-nav-item.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.line {
  fill: none;
  stroke: #f2f2f2;
  stroke-width: 6;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
}
.line2 {
  stroke-dasharray: 60 60;
}
.line3 {
  stroke-dasharray: 60 207;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

#fullscreen-menu {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* When closing: opacity fades out, then visibility becomes hidden */
  transition:
    opacity 0.4s ease-in-out,
    visibility 0s 0.4s;
}
#fullscreen-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  /* When opening: visibility becomes visible instantly, then opacity fades in */
  transition:
    opacity 0.4s ease-in-out,
    visibility 0s 0s;
}
#fullscreen-menu ul li {
  opacity: 0;
  transform: scale(1.3);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

#fullscreen-menu.active ul li {
  opacity: 1;
  transform: scale(1);
}

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card.is-flipped .flip-card-inner,
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
  padding: 24px;
}
#front-easylead {
  background-image: url(../assets/images/easylead.jpg);
}
#front-mailforge {
  background-image: url(../assets/images/mailforge.jpg);
}
#hero-image {
  background-image: url(../assets/images/iansouisa2.jpeg);
  transform: scaleX(-1);
}

.work-card {
  will-change: transform, filter, opacity;
}

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger delays */
.delay-1 {
  transition-delay: 100ms;
}
.delay-2 {
  transition-delay: 200ms;
}
.delay-3 {
  transition-delay: 320ms;
}
.delay-4 {
  transition-delay: 440ms;
}