/* Thinkpod Digital - Stylesheet
   Pure percentage (%) and viewport-percentage values for all spacing.
*/

:root {
  --brand-orange: #f25912;
  --brand-orange-hover: #d64b0c;
  --brand-orange-light: #fff4ed;
  --brand-dark: #0a0a0c;
  --brand-charcoal: #121316;
  --brand-gray-light: #f8f9fa;
  --brand-text-dark: #18181b;
  --brand-text-muted: #71717a;
}

/* Base resets & smooth scrolling */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--brand-text-dark);
  background-color: #ffffff;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* 85% Container Helper */
.container-85 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Brain Floating & Breathing Animations */
@keyframes brainFloat {
  0%, 100% {
    transform: translateY(0%) rotate(0deg) scale(1);
    filter: drop-shadow(0 2.5vw 3.5vw rgba(242, 89, 18, 0.22));
  }
  25% {
    transform: translateY(-2.8%) rotate(1.2deg) scale(1.025);
    filter: drop-shadow(0 3.5vw 4.5vw rgba(242, 89, 18, 0.32));
  }
  50% {
    transform: translateY(0%) rotate(-0.8deg) scale(1.01);
    filter: drop-shadow(0 2.8vw 3.8vw rgba(242, 89, 18, 0.25));
  }
  75% {
    transform: translateY(2.5%) rotate(-1.5deg) scale(0.985);
    filter: drop-shadow(0 1.8vw 2.5vw rgba(242, 89, 18, 0.16));
  }
}

@keyframes auraPulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.88;
  }
}

@keyframes synapsePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes slowOrbit {
  0% {
    transform: rotate(0deg) translateX(4%) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(4%) rotate(-360deg);
  }
}

.animate-brain {
  animation: brainFloat 7s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.animate-aura {
  animation: auraPulse 5s ease-in-out infinite;
  transform-origin: center center;
}

.animate-synapse {
  animation: synapsePulse 3s ease-in-out infinite;
}

.animate-orbit {
  animation: slowOrbit 20s linear infinite;
}

/* Client Logo Marquee Animations
   Row 1: Clockwise scroll (translates smoothly towards right)
   Row 2: Anti-clockwise scroll (translates smoothly towards left)
*/
@keyframes marqueeClockwise {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marqueeAntiClockwise {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-track-clockwise {
  display: flex;
  width: max-content;
  animation: marqueeClockwise 32s linear infinite;
}

.marquee-track-anticlockwise {
  display: flex;
  width: max-content;
  animation: marqueeAntiClockwise 32s linear infinite;
}

.marquee-container:hover .marquee-track-clockwise,
.marquee-container:hover .marquee-track-anticlockwise {
  animation-play-state: paused;
}

/* Glassmorphism & Ambient Lighting */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(1vw);
  -webkit-backdrop-filter: blur(1vw);
}

.glass-panel-dark {
  background: rgba(18, 19, 22, 0.85);
  backdrop-filter: blur(1.5vw);
  -webkit-backdrop-filter: blur(1.5vw);
}

.orange-glow-radial {
  background: radial-gradient(circle, rgba(242, 89, 18, 0.28) 0%, rgba(242, 89, 18, 0.08) 50%, transparent 72%);
}

.orange-glow-radial-soft {
  background: radial-gradient(circle, rgba(242, 89, 18, 0.16) 0%, rgba(242, 89, 18, 0.03) 60%, transparent 80%);
}

.hero-gradient-bg {
  background: radial-gradient(circle at 85% 30%, rgba(242, 89, 18, 0.14) 0%, rgba(255, 245, 238, 0.4) 35%, #ffffff 70%);
}

/* Scroll Reveal States */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(4%);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0%);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Custom Scrollbar - Brand Color */
html {
  scrollbar-width: thin;
  scrollbar-color: #f25912 #f4f4f5;
}

::-webkit-scrollbar {
  width: 0.45vw;
}

::-webkit-scrollbar-track {
  background: #f4f4f5;
}

::-webkit-scrollbar-thumb {
  background: #f25912;
  border-radius: 0.2vw;
}

::-webkit-scrollbar-thumb:hover {
  background: #d64b0c;
}

/* Off-canvas mobile menu transitions */
.mobile-drawer-open {
  overflow: hidden;
}