/* ================================================
   CAMIL — Jornada de Talentos LP
   CSS Residual (animações, keyframes, @font-face,
   pseudo-elements, estados JS)
   ================================================ */

/* ---------- @font-face ---------- */
@font-face {
  font-family: 'Branding';
  src: url('../fonts/Branding-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/Branding-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/Branding-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/Branding-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Smooth scroll & header offset ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ---------- Header states ---------- */
#main-header {
  background: transparent;
}
#main-header.is-scrolled {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
#main-header.is-scrolled .nav-link {
  color: #334155;
}
#main-header.is-scrolled .nav-link:hover {
  color: #0A3D7C;
}
#main-header.is-scrolled .btn-cta {
  color: #0A3D7C;
  border-color: #0A3D7C;
}
#main-header.is-scrolled .btn-cta:hover {
  background-color: #0A3D7C;
  color: #fff;
}
#main-header.is-scrolled .header-logo {
  filter: brightness(0);
}
#main-header.is-scrolled .hamburger-line {
  background-color: #0A3D7C;
}

/* Active nav link */
.nav-link.is-active {
  color: #fff !important;
  position: relative;
}
.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #C8D830;
  border-radius: 1px;
}
#main-header.is-scrolled .nav-link.is-active {
  color: #0A3D7C !important;
}
#main-header.is-scrolled .nav-link.is-active::after {
  background: #0A3D7C;
}

/* ---------- Hamburger animation ---------- */
#mobile-toggle.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#mobile-toggle.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#mobile-toggle.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
#mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ---------- Button CTA hover effects ---------- */
.btn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.35s ease;
  letter-spacing: 0.01em;
}

/* Gradiente de fundo que aparece no hover */
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #062A52 0%, #0069b4 50%, #21b5ea 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

/* Watermark "C" da Camil */
.btn-cta::after {
  content: '';
  position: absolute;
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  width: 85%;
  height: 280%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 349.01 351.76'%3E%3Cpath fill='white' d='M300.79,178.12h0l-69.46-67.08-.07.1c-14.89-12.76-34.22-20.5-55.37-20.5-47.08,0-85.24,38.16-85.24,85.24s38.16,85.24,85.24,85.24c22.87,0,43.59-9.04,58.9-23.7l22.81-23.23-26.12-25.23c-4.51,4.62-21.66,22.17-21.67,22.13-8.8,8.48-20.73,13.73-33.92,13.73-27.03,0-48.95-21.91-48.95-48.95s21.92-48.94,48.95-48.94c12.99,0,24.77,5.07,33.52,13.33h0s66.06,63.8,66.06,63.8l.02-.02c8.97,8.87,14.54,21.18,14.54,34.79s-5.29,25.25-13.84,34.07v.02s.01,0,.01,0c-25.38,26.23-60.92,42.56-100.31,42.56-77.11,0-139.61-62.51-139.61-139.61S98.77,36.27,175.88,36.27c38.75,0,73.79,15.8,99.09,41.29,7.4,8.57,11.89,19.73,11.89,31.94,0,8.15-2.06,15.78-5.59,22.53l26.76,25.84c9.5-13.74,15.09-30.39,15.09-48.36,0-27.46-13.01-51.87-33.18-67.45C259.21,15.85,219.41,0,175.88,0,78.74,0,0,78.74,0,175.88s78.74,175.88,175.88,175.88c49.08,0,93.44-20.11,125.34-52.53,0,0,25.05-23.07,25.05-60.39,0-23.78-9.77-45.25-25.48-60.71'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.btn-cta:hover {
  transform: scale(1.05);
  border-color: #21b5ea !important;
  color: #fff !important;
}

.btn-cta:hover::before {
  opacity: 1;
}

.btn-cta:hover::after {
  opacity: 0.18;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.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; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ---------- Glow Card ---------- */
.glow-card {
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1rem;
  background: conic-gradient(
    from 0deg,
    #0A3D7C,
    #42A5F5,
    #C8D830,
    #F5A623,
    #0A3D7C
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -2;
  animation: glowRotate 3s linear infinite;
}
.glow-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: calc(1rem - 2px);
  background: #fff;
  z-index: -1;
}
.glow-card:hover::before {
  opacity: 1;
}

@keyframes glowRotate {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

/* ---------- Carousel ---------- */
#carousel-track {
  will-change: transform;
}

/* ---------- Counter ---------- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero scroll indicator ---------- */
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid #C8D830;
  outline-offset: 2px;
}
#main-header a:focus-visible {
  outline: none;
}

/* ---------- Selection ---------- */
::selection {
  background: #0A3D7C;
  color: #fff;
}

/* ---------- Scrollbar custom ---------- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f4f8;
}
::-webkit-scrollbar-thumb {
  background: #0A3D7C;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #062A52;
}