@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
@import "tailwindcss";

:root {
  --bg_primary: #F5F1F0;
  --white: #FFF;
  --black: #1C1C1C;
  --primary-primary: #A79D94;
  --primary-secondary: #666;
  --lake_token: #02275C;
  --bg_footer: #A79D94;
  --white_pressed: #E6E6E6;
  --text-text: #2C2C2C;
}

@theme inline {
  --color-bg-primary: var(--bg_primary);
  --color-white: var(--white);
  --color-black: var(--black);
  --color-primary: var(--primary-primary);
  --color-secondary: var(--primary-secondary);
  --color-lake-token: var(--lake_token);
  --color-footer: var(--bg_footer);
  --color-pressed: var(--white_pressed);
  --color-text-text: var(--text-text);
  --color-primary-secondary: var(--primary-secondary);
  --font-roboto: var(--font-roboto);
  --font-inter: var(--font-inter);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg_primary: #F5F1F0;
    --white: #FFF;
  }
}

body {
  background: var(--bg_primary);
  color: var(--black);
  font-family: var(--font-roboto), 'Roboto', Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.floating-glow-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: glow-pulse 2.2s infinite ease-in-out;
  transition: box-shadow 0.3s, transform 0.3s;
  background: #00275C;
}
.floating-glow-btn:first-child {
  background: #25D366;
}
.floating-glow-btn img {
  z-index: 1;
}
.floating-glow-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 0 16px 4px rgba(167,157,148,0.4);
  opacity: 0.7;
  transition: box-shadow 0.3s;
}
.floating-glow-btn:first-child::before {
  box-shadow: 0 0 16px 4px rgba(37,211,102,0.4);
}

@keyframes glow-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 16px 4px rgba(167,157,148,0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 32px 8px rgba(167,157,148,0.7);
  }
}
.floating-glow-btn:first-child {
  animation-name: glow-pulse-wa;
}
@keyframes glow-pulse-wa {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 16px 4px rgba(37,211,102,0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 32px 8px rgba(37,211,102,0.7);
  }
}

/* Elementor-style animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Hover animations for images */
.image-hover-zoom {
  transition: transform 0.3s ease-in-out;
}

.image-hover-zoom:hover {
  transform: scale(1.05);
}

.image-hover-lift {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.image-hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Text animation utilities */
.text-reveal {
  overflow: hidden;
}

.text-reveal-line {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s ease-out;
}

.text-reveal.active .text-reveal-line {
  transform: translateY(0);
}

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Accessibility: 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;
    scroll-behavior: auto !important;
  }
  
  .image-hover-zoom:hover,
  .image-hover-lift:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Infinite scroll animations */
@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-right-to-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll-left-to-right {
  animation: scroll-left-to-right 30s linear infinite;
  will-change: transform;
}

.animate-scroll-right-to-left {
  animation: scroll-right-to-left 30s linear infinite;
  will-change: transform;
}

.lake-token-container {
  @apply w-full mx-auto px-2 sm:px-4 lg:px-[80px] xl:px-[294px] max-w-[1728px];
}

.font-inter {
  font-family: var(--font-inter), 'Inter', Arial, Helvetica, sans-serif;
}