/* ============================================================
   U&M — Programa de Trainee "Sempre em Movimento"
   style.css — Design tokens + animações e estados de JS
   (Tailwind faz o resto via CDN + tailwind.config inline)
   ============================================================ */

:root {
  /* Marca — verde oficial U&M (extraído do site uem.com.br) */
  --um-green:        #14542C;  /* PRIMÁRIA */
  --um-green-500:    #1F7A3F;  /* vibrante — links/hover  */
  --um-green-700:    #0F4524;
  --um-green-800:    #0A331B;  /* seções escuras */
  --um-green-900:    #061F11;  /* footer / topo do gradiente */
  --um-green-50:     #ECF5EE;

  /* Acento — âmbar de segurança (energia / "em movimento") */
  --um-amber:        #F2A900;
  --um-amber-400:    #FFB81C;

  /* Terra / neutros */
  --um-sand:         #E8DEC6;
  --um-ink:          #13160F;
  --um-steel-500:    #7C847C;
  --um-steel-300:    #C7CDC6;
  --um-paper:        #F7F9F5;

  --um-radius-pill:  45px;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Lenis (smooth scroll): permitir interação com o vídeo (iframe) */
.lenis.lenis-smooth iframe { pointer-events: auto; }

/* Hero: mobile mostra o KV inteiro (altura automática); desktop preenche a viewport */
@media (min-width: 768px) { #hero { height: min(100vh, 768px); } }

::selection { background: var(--um-green); color: #fff; }

/* ---------- Header: transparente no topo → sólido ao scroll ---------- */
#header {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#header .nav-logo { opacity: 0; transition: opacity .35s ease; }
#header .nav-link { color: #fff; transition: color .3s ease; }

#header.is-scrolled {
  background: #fff;
  box-shadow: 0 6px 24px rgba(6, 31, 17, .10);
}
#header.is-scrolled .nav-logo { opacity: 1; }
#header.is-scrolled .nav-link { color: var(--um-green); }
#header.is-scrolled .nav-link.is-active { color: var(--um-green-500); }

/* ---------- Botão CTA ---------- */
.btn-cta {
  transition: transform .25s ease, background-color .3s ease,
              color .3s ease, box-shadow .3s ease;
}
.btn-cta:hover { transform: translateY(-2px) scale(1.02); }
.btn-cta:active { transform: translateY(0) scale(.99); }

/* ---------- Reveal on scroll (IntersectionObserver) ----------
   Melhoria progressiva: só esconde quando o JS está ativo (classe .js).
   Sem JS, todo o conteúdo aparece normalmente (SEO/acessibilidade). */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .10s; }
.reveal-delay-2 { transition-delay: .20s; }
.reveal-delay-3 { transition-delay: .30s; }
.reveal-delay-4 { transition-delay: .40s; }
.reveal-delay-5 { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Keyframes utilitários ---------- */
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px);} to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes glowRotate { to { transform: rotate(360deg); } }

/* anel girando (decorativo, ex.: selo 50 anos / CTA) */
.glow-ring {
  background: conic-gradient(from 0deg, var(--um-amber), var(--um-green-500), var(--um-amber));
  animation: glowRotate 8s linear infinite;
}

/* ---------- Contadores (big numbers) ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ============================================================
   Texturas e detalhes industriais (Hero / seções)
   ============================================================ */

/* Grão / ruído */
.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Linhas topográficas — "movimentação de terra" */
.hero-topo {
  background-image:
    repeating-radial-gradient(circle at 78% 120%,
      transparent 0, transparent 46px,
      rgba(242,169,0,.55) 47px, rgba(242,169,0,.55) 48px),
    repeating-radial-gradient(circle at 14% -10%,
      transparent 0, transparent 60px,
      rgba(255,255,255,.35) 61px, rgba(255,255,255,.35) 62px);
}

/* Réguas / ticks industriais */
.ruler-tick { display:block; height:2px; width:18px; background:currentColor; opacity:.6; }
.ruler-tick.is-long { width:34px; opacity:1; background:#F2A900; }

/* ============================================================
   Navegação mobile + hambúrguer
   ============================================================ */
#mobileNav.is-open { display:flex; }
body.nav-open { overflow:hidden; }

#navToggle .hb-line { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
#navToggle.is-active .hb-line:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
#navToggle.is-active .hb-line:nth-child(2){ opacity:0; }
#navToggle.is-active .hb-line:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
/* quando o header está sólido, as barras viram verdes (menu fechado) */
#header.is-scrolled #navToggle .hb-line { background: var(--um-green); }
#navToggle.is-active .hb-line { background:#fff !important; }

.m-link { transition: color .25s ease, transform .25s ease; }
.m-link:hover { color: var(--um-amber); transform: translateX(4px); }

/* ============================================================
   Lightbox (ampliar foto dos depoimentos)
   ============================================================ */
.lightbox.is-open { display: flex; animation: fadeIn .25s ease; }
.lightbox.is-open .lb-figure { animation: lbZoom .3s cubic-bezier(.22,1,.36,1); }
@keyframes lbZoom { from { opacity:0; transform: scale(.92); } to { opacity:1; transform: none; } }

/* ============================================================
   Animação de Etapas (escavadeira + caminhão no scroll)
   ============================================================ */
@keyframes dig { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.anim-dig { animation: dig 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-dig { animation: none; }
  #anim-truck, #anim-exc { transform: none !important; }
}

/* ============================================================
   Slider de Depoimentos
   ============================================================ */
.depo-viewport { transition: height .5s cubic-bezier(.22,1,.36,1); }
.depo-track { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.depo-slide { align-self: flex-start; }
.depo-dot { transition: width .3s ease, background-color .3s ease; cursor: pointer; }
#depo-slider:focus-visible { outline: 2px solid var(--um-amber); outline-offset: 6px; border-radius: 24px; }

@media (prefers-reduced-motion: reduce) {
  .depo-viewport, .depo-track { transition: none; }
}