/* === Base Reset === */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Animations === */
.animate-fade-in {
  animation: fadeIn .3s ease-out forwards;
}
.animate-scale-in {
  animation: scaleIn .3s ease-out forwards;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  0% { transform: scale(.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
.animate-slide-up-fade {
  animation: slideUpFade 3.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes float-icon {
  0%, to { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}
.animate-float-icon {
  animation: float-icon 3s ease-in-out infinite;
}
@keyframes breathe-text {
  0%, to { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.animate-breathe {
  animation: breathe-text 2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translate(-100%) skew(12deg); }
  to { transform: translate(100%) skew(12deg); }
}
@keyframes float-logo {
  0%, to { transform: translateY(0) scale(1) rotate(0); }
  50% { transform: translateY(-8px) scale(1.03) rotate(1deg); }
}
.animate-float-logo {
  animation: float-logo 4s ease-in-out infinite;
}
@keyframes scroll-bg {
  0% { background-position: 0 0; }
  to { background-position: 360px 360px; }
}
.animate-scroll-bg {
  animation: scroll-bg 25s linear infinite;
}
@keyframes pulse-glow {
  0%, to { opacity: .5; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.05); }
}
@keyframes float-item {
  0%, to { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes progress-stripes {
  0% { background-position: 1rem 0; }
  to { background-position: 0 0; }
}
@keyframes tapHand {
  0%, to { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(8px) rotate(-15deg) scale(.95); }
}
.animate-tap-hand {
  animation: tapHand 1s ease-in-out infinite;
}
@keyframes shake {
  0%, to { transform: translate(0); }
  20% { transform: translate(-8px); }
  40% { transform: translate(8px); }
  60% { transform: translate(-5px); }
  80% { transform: translate(5px); }
}
.animate-shake {
  animation: shake .5s ease-in-out;
}
@keyframes floatParticle {
  0%, to { transform: translateY(0) scale(1); opacity: .8; }
  50% { transform: translateY(-15px) scale(1.3); opacity: 1; }
}

/* === Responsive Animations === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Responsive Utility === */
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #1e3a8a;
}
::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 4px;
}