/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(18, 18, 18, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Keyframe Animations */
@keyframes drift-1 {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(40px, -60px) scale(1.15); }
  66% { transform: translate(-30px, 30px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes drift-2 {
  0% { transform: translate(0px, 0px) scale(1.1); }
  50% { transform: translate(-50px, 50px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1.1); }
}
@keyframes drift-3 {
  0% { transform: translate(0px, 0px) scale(0.95); }
  33% { transform: translate(-20px, -40px) scale(1.1); }
  66% { transform: translate(40px, 30px) scale(0.95); }
  100% { transform: translate(0px, 0px) scale(0.95); }
}

/* Zero-g Floating Animations */
@keyframes float-icon-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}
@keyframes float-icon-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-4deg); }
}
@keyframes float-icon-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(5deg); }
}
@keyframes float-icon-4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-3deg); }
}

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

/* CSS Class triggers */
.animate-drift-1 {
  animation: drift-1 15s infinite alternate ease-in-out;
}
.animate-drift-2 {
  animation: drift-2 18s infinite alternate ease-in-out;
}
.animate-drift-3 {
  animation: drift-3 12s infinite alternate ease-in-out;
}
.animate-float-1 {
  animation: float-icon-1 6s infinite ease-in-out;
}
.animate-float-2 {
  animation: float-icon-2 7s infinite ease-in-out;
}
.animate-float-3 {
  animation: float-icon-3 8s infinite ease-in-out;
}
.animate-float-4 {
  animation: float-icon-4 6.5s infinite ease-in-out;
}

/* Animated gradient border on hover */
.premium-card {
  position: relative;
  background: #121212;
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: all 0.5s ease;
}
.premium-card:hover::before {
  background: linear-gradient(135deg, #3b82f6, #a855f7, #06b6d4);
}

/* Scroll Reveal animation system */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline styling */
.timeline-line {
  background: linear-gradient(to bottom, #3b82f6, #a855f7, #06b6d4, transparent);
}

/* Apple-style custom phone display scroll */
@keyframes phone-scroll {
  0%, 10% { transform: translateY(0); }
  45%, 55% { transform: translateY(-33.33%); }
  90%, 100% { transform: translateY(-66.66%); }
}
.phone-screen-scroll {
  animation: phone-scroll 12s infinite ease-in-out;
}