/* Custom Styles for Skyblue */

/* Animation classes to replicate Framer Motion behaviors */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

.animate-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.animate-fade-in.visible {
    opacity: 1;
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out;
}

.animate-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease-out;
}

.animate-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delays can be handled via helper classes or JS, 
   but for simplicity we can add some basic ones */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

.text-gradient-custom {
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(90deg, #000, #000, #00e0ff 50%, #00e0ff 60%, #000);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
}

/* Scroll Drawing SVG Path */
.scroll-draw-path {
    stroke-dasharray: 1000; /* Arbitrary large value, set via JS normally but good initial */
    stroke-dashoffset: 1000;
}


/* Matrix Reveal Animation */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}
 
.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.matrix .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.matrix .bg-wrap .inn.small {
  font-size: 15px;
}
 
.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.matrix.is-animated .bg-wrap,
.matrix.visible .bg-wrap {
  opacity: 1;
}
 
.matrix.is-animated .bg-wrap .inn,
.matrix.visible .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

header{
    animation: appear-header 1s forwards;
    opacity: 0; 
    translate: 0 -100%;
}

@keyframes appear-header {
    to {
        translate: 0 0;
        opacity: 1;
    }
}

/* Slide In Animation */
.anim-box.slidein {
    opacity: 0;
}

.anim-box.slidein.is-animated,
.anim-box.slidein.visible {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* Button Hover Scaling Scheme (Movement Only) */
.btn-scaling-hover {
  position: relative;
  z-index: 1;
  transition: .3s;
}
.btn-scaling-hover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid #00A3BD; /* Adjusted to brand color */
  border-radius: inherit; /* Inherit rounded-full */
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.btn-scaling-hover:hover {
  background-color: transparent; /* Make background transparent */
  color: #00A3BD; /* Text becomes blue */
}
.btn-scaling-hover:hover::before {
  transform: scale(1);
  opacity: 1;
}

/* Border Animation Button */
@keyframes rotate-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.border-anim-btn {
  position: relative;
  overflow: hidden;
  padding: 1px; /* Border width simulation */
  background: #d1d5db; /* gray-300 default border color */
  border: none !important;
}
.border-anim-btn::before,
.border-anim-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, #45f3ff, #45f3ff 25%, #2979FF 50%, #45f3ff 75%, #45f3ff);
  transform-origin: center;
  animation: rotate-border 6s linear infinite;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s;
  animation-play-state: paused;
}
.border-anim-btn::after {
  background: conic-gradient(from 0deg, #2979FF, #2979FF 25%, #45f3ff 50%, #2979FF 75%, #2979FF);
  animation-delay: -1s;
}
.border-anim-btn:hover::before,
.border-anim-btn:hover::after {
  opacity: 1;
  animation-play-state: running;
}
.border-anim-content {
  position: relative;
  z-index: 10;
  background: white; /* Matches section bg */
  border-radius: inherit; /* Inherit from parent (e.g., rounded-full or rounded-3xl) */
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
/* Helper to override flex layout for custom content */
.border-anim-content.custom-layout {
  display: block;
  align-items: unset;
  justify-content: unset;
}

/* Slide Background Button (Career) */
.slide-bg-btn {
  background: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: color 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.slide-bg-btn::after {
  background: #F9FAFB;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
/*
.slide-bg-btn:hover {
  color: #00C2E0;
}
*/
.slide-bg-btn:hover::after {
  transform: scale(1, 1);
}