/* ==========================================================================
   Transdotti - Custom CSS (animações e estilos que não cabem no Tailwind)
   ========================================================================== */

/* Body base */
body {
  background-color: #ffffff;
  color: #050505;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }

/* Hide scrollbar */
::-webkit-scrollbar { display: none; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }

/* Selection color (manual since Tailwind CDN's selection: variant may not always work) */
::selection { background: #2563eb; color: white; }

/* Noise overlay */
.noise-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Body locked while preloader visible */
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   Preloader animation
   ========================================================================== */
#preloader.fade-out { animation: preloader-fade 0.6s cubic-bezier(0.76,0,0.24,1) forwards; }
@keyframes preloader-fade { to { opacity: 0; visibility: hidden; } }

#preloader-line {
  width: 1200px;
  opacity: 1;
  transform: translateX(-100vw);
  animation: preloader-line 2.4s cubic-bezier(0.76,0,0.24,1) forwards;
}
@keyframes preloader-line {
  0%   { transform: translateX(-100vw); width: 1200px; opacity: 1; }
  20%  { transform: translateX(0vw);    width: 0px;    opacity: 0; }
  80%  { transform: translateX(0vw);    width: 0px;    opacity: 0; }
  100% { transform: translateX(100vw);  width: 1200px; opacity: 1; }
}

#preloader-logo {
  transform: scale(0);
  opacity: 0;
  filter: blur(20px);
  animation: preloader-logo 2.4s cubic-bezier(0.76,0,0.24,1) forwards;
}
@keyframes preloader-logo {
  0%   { transform: scale(0);   opacity: 0; filter: blur(20px); }
  20%  { transform: scale(1.1); opacity: 1; filter: blur(0); }
  25%  { transform: scale(1);   opacity: 1; filter: blur(0); }
  75%  { transform: scale(1);   opacity: 1; filter: blur(0); }
  80%  { transform: scale(1.1); opacity: 1; filter: blur(0); }
  100% { transform: scale(0);   opacity: 0; filter: blur(20px); }
}

/* ==========================================================================
   Navbar enter / state
   ========================================================================== */
.nav-enter {
  transform: translateY(-100px);
  animation: nav-enter 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes nav-enter { to { transform: translateY(0); } }

#navbar-inner.scrolled       { transform: scale(0.95); }
#navbar-inner.minimized      { transform: scale(0.8) translateY(-10%); }
#navbar-inner.minimized.scrolled { transform: scale(0.76) translateY(-10%); }

/* Navbar items: fixed colors (white text, blue hover) over the dark blue chrome.
   Previously toggled between dark-bg and light-bg variants; now always one style. */
.nav-link           { color: #ffffff; transition: color 0.2s ease; }
.nav-link:hover     { color: #93c5fd; } /* blue-300 */
.nav-underline      { background: #60a5fa; } /* blue-400 */
.contact-btn        { color: #ffffff; border-color: rgba(255,255,255,0.3); }
.contact-btn:hover  { background: #ffffff; color: #0A2150; }
.menu-icon          { color: #ffffff; }

/* ==========================================================================
   Reveal animations (used with IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

.reveal-bar { transition: width 1.5s ease-out 0.6s; }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.4s; }

/* ==========================================================================
   Marquee
   ========================================================================== */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 50s linear infinite;
  width: max-content;
}
.animate-marquee:hover { animation-play-state: paused; }

/* ==========================================================================
   Spin
   ========================================================================== */
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spin-slow { animation: spin 10s linear infinite; transform-origin: 50px 50px; transform-box: fill-box; }

/* ==========================================================================
   Ping animation (Tailwind has it but we make sure it's available)
   ========================================================================== */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ==========================================================================
   Tech ecosystem pulse line
   ========================================================================== */
@keyframes pulse-flow {
  0%   { stroke-dashoffset: 20; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.animate-pulse-flow {
  animation: pulse-flow 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   Brazil map - animated route lines
   ========================================================================== */
.line-anim {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 8s linear infinite;
}
@keyframes drawLine {
  0%, 0%      { stroke-dashoffset: 2000; opacity: 0; }
  5%          { stroke-dashoffset: 2000; opacity: 1; }
  85%         { stroke-dashoffset: 0;    opacity: 1; }
  100%        { stroke-dashoffset: 0;    opacity: 0; }
}

/* ==========================================================================
   Documents accordion content
   ========================================================================== */
.doc-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.doc-content.open { max-height: 500px; opacity: 1; }

/* ==========================================================================
   History fade between pages
   ========================================================================== */
.history-page {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.history-page.active { opacity: 1; }

/* ==========================================================================
   Tech card image — zoom-out (Ken Burns reverse) on each switch
   ========================================================================== */
#tech-img { transition: opacity 0.4s ease; }
#tech-title, #tech-desc {
  transition: opacity 0.4s ease;
}

/* Zoom-out animation: subtle camera-pulling-back effect. Range kept small (1.05 → 1.0)
   so even at the start of the animation the image is barely cropped — heavier zooms
   were cutting off too much content on some shots. */
@keyframes tech-zoom-out {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.0);  }
}
.tech-zoom { transform-origin: center center; }
.tech-zoom.animate-zoom { animation: tech-zoom-out 4s ease-out forwards; }

/* Progress bar fill */
#tech-progress { transition: width 4s linear; }

/* ==========================================================================
   Brazil map states
   ========================================================================== */
.brazil-state {
  fill: rgba(42, 59, 255, 0.65);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.3s ease;
}
.brazil-state:hover  { fill: rgba(42, 59, 255, 0.8); }
.brazil-state.active { fill: rgba(42, 59, 255, 0.9); }

/* Text outline utility (from original) */
.text-outline {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.15);
  color: transparent;
}
.text-outline:hover {
  -webkit-text-stroke: 1px #2563eb;
  color: #2563eb;
}

/* dash animation utility (from original) */
@keyframes dash { to { stroke-dashoffset: -20; } }
.animate-dash { animation: dash 1s linear infinite; }