/* ============================================================
   Perpetual Bytes — animations.css
   ============================================================ */

/* ---------- AOS Custom Overrides ---------- */
[data-aos] {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Failsafe: if AOS library fails to load (blocked CDN), never leave
   content hidden — force every animated element fully visible. */
.no-aos [data-aos],
.no-aos .card-scroll-reveal,
.no-aos .timeline-item-animate {
  opacity: 1 !important;
  transform: none !important;
}

[data-aos="fade-up"] {
  transform: translateY(32px);
  opacity: 0;
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

[data-aos="fade-down"] {
  transform: translateY(-32px);
  opacity: 0;
}

[data-aos="fade-left"] {
  transform: translateX(32px);
  opacity: 0;
}

[data-aos="fade-right"] {
  transform: translateX(-32px);
  opacity: 0;
}

[data-aos="zoom-in"] {
  transform: scale(0.9);
  opacity: 0;
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

[data-aos="flip-up"] {
  transform: perspective(800px) rotateX(15deg) translateY(24px);
  opacity: 0;
}

[data-aos="flip-up"].aos-animate {
  transform: perspective(800px) rotateX(0) translateY(0);
  opacity: 1;
}

/* ---------- GSAP Ready Classes ---------- */
.gsap-reveal {
  opacity: 0;
  transform: translateY(40px);
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.gsap-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
}

.gsap-stagger-child {
  opacity: 0;
  transform: translateY(24px);
}

.gsap-clip {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.gsap-clip.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Counter Animation Classes ---------- */
.counter-value {
  display: inline-block;
  transition: none;
}

.counter-wrap {
  position: relative;
  overflow: hidden;
}

.counting {
  animation: counter-pulse 0.1s ease;
}

@keyframes counter-pulse {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* ---------- Gradient Animations ---------- */
.gradient-text-animate {
  background: linear-gradient(90deg,
    #1E88E5 0%,
    #00C2FF 25%,
    #1E88E5 50%,
    #00C2FF 75%,
    #1E88E5 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.gradient-border-animate {
  position: relative;
}

.gradient-border-animate::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, #1E88E5, #00C2FF, #1E88E5);
  background-size: 200% auto;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-shift 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-border-animate:hover::before {
  opacity: 1;
}

/* Hero gradient animation */
@keyframes hero-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-bg-animated {
  background-size: 300% 300%;
  animation: hero-bg-shift 12s ease infinite;
}

/* ---------- Parallax Classes ---------- */
.parallax-element {
  will-change: transform;
}

.parallax-slow   { --parallax-speed: 0.3; }
.parallax-medium { --parallax-speed: 0.6; }
.parallax-fast   { --parallax-speed: 0.9; }

/* ---------- Hover Micro-Interactions ---------- */

/* Lift on hover */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Scale on hover */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-scale:hover {
  transform: scale(1.04);
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.2), 0 12px 40px rgba(30, 136, 229, 0.15);
}

/* Underline grow on hover */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-accent, #00C2FF);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.hover-underline:hover::after {
  width: 100%;
}

/* Icon bounce on hover */
.hover-icon-bounce .icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-icon-bounce:hover .icon {
  transform: translateY(-4px);
}

/* Arrow slide on hover */
.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hover-arrow .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.hover-arrow:hover .arrow {
  transform: translateX(5px);
}

/* ---------- Page Transition Effects ---------- */
.page-transition-enter {
  animation: page-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes page-enter {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.page-transition-exit {
  animation: page-exit 0.3s ease forwards;
}

@keyframes page-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Staggered fade-in for lists */
.stagger-in > * {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-item 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-in > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-in > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-in > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-in > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8)  { animation-delay: 0.40s; }

@keyframes stagger-item {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Particle / Blob Background Animations ---------- */

/* Floating blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: blob-float 8s ease-in-out infinite;
  pointer-events: none;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: rgba(30, 136, 229, 0.12);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.blob-2 {
  width: 300px;
  height: 300px;
  background: rgba(0, 194, 255, 0.08);
  bottom: 5%;
  left: -5%;
  animation-delay: -3s;
}

.blob-3 {
  width: 250px;
  height: 250px;
  background: rgba(30, 136, 229, 0.06);
  top: 50%;
  left: 40%;
  animation-delay: -6s;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.95); }
}

/* Particle canvas overlay glow */
.particle-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(30, 136, 229, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glow-pulse 6s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ---------- Text Split Animations ---------- */
.split-text .char {
  display: inline-block;
  animation: char-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes char-reveal {
  0%   { opacity: 0; transform: translateY(20px) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

.split-text .word {
  display: inline-block;
  overflow: hidden;
}

.split-text .word-inner {
  display: inline-block;
  animation: word-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes word-reveal {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0); }
}

/* ---------- Logo Animation ---------- */
.logo-animate {
  animation: logo-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

@keyframes logo-entrance {
  0%   { opacity: 0; transform: scale(0.7) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------- Service Card Hover ---------- */
.service-card-hover-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #1E88E5, #00C2FF);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

.service-card:hover .service-card-hover-line {
  width: 100%;
}

/* ---------- Technology Card Animations ---------- */
.tech-card-shimmer {
  position: relative;
  overflow: hidden;
}

.tech-card-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.tech-card-shimmer:hover::after {
  left: 100%;
}

/* ---------- Timeline Animations ---------- */
.timeline-item-animate {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item-animate.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Number Flip Animation ---------- */
.flip-number {
  display: inline-block;
  perspective: 300px;
}

.flip-number-digit {
  display: inline-block;
  animation: flip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flip-in {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}

/* ---------- Rotating Border ---------- */
.rotating-border {
  position: relative;
}

.rotating-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #1E88E5,
    #00C2FF,
    #1E88E5
  );
  z-index: -1;
  animation: rotate-border 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s;
}

.rotating-border:hover::before {
  opacity: 1;
}

@keyframes rotate-border {
  to { transform: rotate(360deg); }
}

/* ---------- Typewriter Cursor Blink ---------- */
.cursor-blink {
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---------- Floating Badge Animation ---------- */
.float-badge {
  animation: float-y 3s ease-in-out infinite;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ---------- Pulse Ring Animation ---------- */
.pulse-ring {
  position: relative;
}

.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(0, 194, 255, 0.5);
  animation: pulse-ring-anim 2.5s ease-out infinite;
}

.pulse-ring::after {
  animation-delay: 1.25s;
}

@keyframes pulse-ring-anim {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- Scroll Indicator Arrow ---------- */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  animation: scroll-bounce 2s ease-in-out infinite;
  color: rgba(255, 255, 255, 0.4);
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ---------- Card Appear on Scroll ---------- */
.card-scroll-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Shimmer Loading Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg,
    #F1F5F9 25%,
    #E2E8F0 50%,
    #F1F5F9 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Progress Bar Fill ---------- */
.progress-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1E88E5, #00C2FF);
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-bar-fill.animate {
  width: var(--target-width, 80%);
}

/* ---------- Orbit Animation ---------- */
.orbit-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbit 8s linear infinite;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* ---------- Glitch Text Effect ---------- */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #00C2FF;
  animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 1px 0 #1E88E5;
  animation: glitch-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
  0%  { clip-path: inset(0% 0% 96% 0%); }
  20% { clip-path: inset(40% 0% 40% 0%); }
  40% { clip-path: inset(80% 0% 10% 0%); }
  60% { clip-path: inset(20% 0% 70% 0%); }
  80% { clip-path: inset(60% 0% 30% 0%); }
  100%{ clip-path: inset(96% 0% 0% 0%); }
}

@keyframes glitch-2 {
  0%  { clip-path: inset(96% 0% 0% 0%); }
  20% { clip-path: inset(30% 0% 60% 0%); }
  40% { clip-path: inset(0% 0% 96% 0%); }
  60% { clip-path: inset(70% 0% 20% 0%); }
  80% { clip-path: inset(10% 0% 80% 0%); }
  100%{ clip-path: inset(0% 0% 96% 0%); }
}

/* ---------- Reduced Motion Support ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VISIBILITY FAILSAFE (highest priority, always on)
   Three animation systems (AOS, IntersectionObserver scroll-reveal,
   and GSAP ScrollTrigger) each hide these elements at opacity:0 until
   a scroll event reveals them. When any of those fail to fire, content
   is left permanently invisible. This guarantees content is always
   shown regardless of whether the animation libraries load or trigger.
   ============================================================ */
[data-aos],
.card-scroll-reveal,
.timeline-item-animate,
.stat-card,
.gsap-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}