moon/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ------------------------------
  Root Variables + Animations
------------------------------- */
@layer base {
  :root {
    --animate-spotlight: spotlight 2s ease 0.75s 1 forwards;

    /* Animation Variables for gradients */
    --animate-first: moveVertical 30s ease infinite;
    --animate-second: moveInCircle 20s reverse infinite;
    --animate-third: moveInCircle 40s linear infinite;
    --animate-fourth: moveHorizontal 40s ease infinite;
    --animate-fifth: moveInCircle 20s ease infinite;
  }

  body {
    background-color: #000319;
  }

  /* Spotlight animation */
  @keyframes spotlight {
    0% {
      opacity: 0;
      transform: translate(-72%, -62%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -40%) scale(1);
    }
  }

  /* Gradient animation: horizontal movement */
  @keyframes moveHorizontal {
    0% {
      transform: translateX(-50%) translateY(-10%);
    }
    50% {
      transform: translateX(50%) translateY(10%);
    }
    100% {
      transform: translateX(-50%) translateY(-10%);
    }
  }

  /* Gradient animation: vertical movement */
  @keyframes moveVertical {
    0% {
      transform: translateY(-50%);
    }
    50% {
      transform: translateY(50%);
    }
    100% {
      transform: translateY(-50%);
    }
  }

  /* Gradient animation: circular rotation */
  @keyframes moveInCircle {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Scroll animation for InfiniteMovingCards */
  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}

/* ------------------------------
  Utility Classes
------------------------------- */
@layer utilities {
  .animate-spotlight {
    animation: var(--animate-spotlight);
  }

  .animate-first {
    animation: var(--animate-first);
  }
  .animate-second {
    animation: var(--animate-second);
  }
  .animate-third {
    animation: var(--animate-third);
  }
  .animate-fourth {
    animation: var(--animate-fourth);
  }
  .animate-fifth {
    animation: var(--animate-fifth);
  }

  /* Utility class for infinite horizontal scroll */
  .animate-scroll {
    animation: scroll var(--animation-duration, 40s) linear infinite;
    animation-direction: var(--animation-direction, forwards);
  }
}

.work-card-with-border {
  position: relative;
  width: 400px;
  height: 150px;
  background: linear-gradient(103.4deg, #04071d 16.66%, #0c0e23 81.61%);
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
}

/* الطبقة المتحركة */
.work-card-with-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: conic-gradient(
    from 0deg,
    #ffffff 0deg,
    transparent 90deg,
    #ffffff 180deg,
    transparent 270deg,
    #ffffff 360deg
  );
  border-radius: 12px;
  animation: rotate-border 4s linear infinite;
  z-index: 1;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: 2px;
}

.animated-corner-card {
  position: relative;
  width: 400px;
  height: 150px;
  background: linear-gradient(103.4deg, #04071d 16.66%, #0c0e23 81.61%);
  border-radius: 12px;
  overflow: hidden;
}

/* الخط الرفيع الأبيض مع اللمعة */
.corner-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  animation: shine 2s linear infinite;
  z-index: 10;
}

/* الخط الأفقي */
.corner-line-horizontal {
  height: 2px;
  width: 40px;
}

/* الخط العمودي */
.corner-line-vertical {
  width: 2px;
  height: 40px;
}

/* تحريك اللمعة */
@keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* زوايا وتحديد أماكن الخطوط */

/* أعلى يسار */
.corner-top-left .corner-line-horizontal {
  top: 0;
  left: 0;
}

.corner-top-left .corner-line-vertical {
  top: 0;
  left: 0;
}

/* أعلى يمين */
.corner-top-right .corner-line-horizontal {
  top: 0;
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 2s linear infinite;
}

.corner-top-right .corner-line-vertical {
  top: 0;
  right: 0;
}

/* أسفل يمين */
.corner-bottom-right .corner-line-horizontal {
  bottom: 0;
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 2s linear infinite;
}

.corner-bottom-right .corner-line-vertical {
  bottom: 0;
  right: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 2s linear infinite;
}

/* أسفل يسار */
.corner-bottom-left .corner-line-horizontal {
  bottom: 0;
  left: 0;
}

.corner-bottom-left .corner-line-vertical {
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 2s linear infinite;
}