/* ============================================
   BORTOLOTTO ADVOGADOS — Custom Styles
   Complementa Tailwind CSS com animações e
   efeitos premium
   ============================================ */

/* ---- Reset & Base ---- */
::selection {
  background-color: #D1A272;
  color: #002A2E;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  overflow-x: hidden;
}

/* ---- Custom clip path for hero diagonal ---- */
.clip-diagonal {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Header states ---- */
#header {
  background: transparent;
}

#header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(219, 213, 206, 0.4);
}

#header .nav-link {
  color: rgba(219, 213, 206, 0.8);
  transition: color 0.3s;
}

#header .nav-link:hover {
  color: #D1A272;
}

#header.scrolled .nav-link {
  color: #002A2E;
}

#header.scrolled .nav-link:hover {
  color: #D1A272;
}

/* Logo switching */
#header .header-logo-dark {
  display: none;
}

#header .header-logo-light {
  display: block;
}

#header.scrolled .header-logo-dark {
  display: block;
}

#header.scrolled .header-logo-light {
  display: none;
}

/* Hamburger */
#header .hamburger-line {
  background-color: #DBD5CE;
}

#header.scrolled .hamburger-line {
  background-color: #002A2E;
}

/* ---- Mobile menu animation ---- */
#mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-link {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

#mobile-menu.active .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for mobile links */
#mobile-menu.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.active .mobile-nav-link:nth-child(2) { transition-delay: 0.15s; }
#mobile-menu.active .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
#mobile-menu.active .mobile-nav-link:nth-child(4) { transition-delay: 0.25s; }
#mobile-menu.active .mobile-nav-link:nth-child(5) { transition-delay: 0.3s; }
#mobile-menu.active .mobile-nav-link:nth-child(6) { transition-delay: 0.35s; }
#mobile-menu.active .mobile-nav-link:nth-child(7) { transition-delay: 0.4s; }

/* Hamburger to X */
#mobile-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
  background-color: #DBD5CE;
}

#mobile-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

#mobile-toggle.active .hamburger-line:nth-child(3) {
  width: 1.5rem;
  transform: translateY(-5px) rotate(-45deg);
  background-color: #DBD5CE;
}

/* ---- Reveal animations ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero stats */
.hero-stat {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stat.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Dropdown refinement ---- */
.dropdown-menu {
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .dropdown-menu {
  transform: translateY(0);
}

/* ---- Area cards hover line ---- */
.area-card {
  position: relative;
}

.area-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 60%;
  background: #D1A272;
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

.area-card:hover::before {
  width: 3px;
}

/* ---- Back to top ---- */
#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Smooth image placeholder gradient ---- */
.img-placeholder {
  background: linear-gradient(135deg, #002A2E 0%, #001919 100%);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #DBD5CE;
  border-radius: 4px;
}

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

/* ---- Line decoration animation ---- */
@keyframes lineExpand {
  from { width: 0; }
  to { width: 3rem; }
}

.reveal-up.revealed .w-12 {
  animation: lineExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Responsive refinements ---- */
@media (max-width: 1023px) {
  #hero {
    min-height: auto;
    padding-top: 8rem;
    padding-bottom: 4rem;
  }

  .hero-stat {
    text-align: center;
  }
}

@media (max-width: 639px) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}