/* =============================================
   Calheiros Brast — Animations
   Framer Motion-inspired CSS animations
   Dynamic, spring-like, staggered choreography
   ============================================= */

/* =============================================
   SPRING-LIKE EASING CURVES
   Framer Motion uses spring physics — these
   cubic-beziers approximate different spring configs
   ============================================= */
:root {
  --spring-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --spring-snappy:  cubic-bezier(0.22, 1, 0.36, 1);
  --spring-gentle:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =============================================
   HERO ANIMATIONS — Cinematic entrance
   ============================================= */

/* Title word-by-word reveal */
@keyframes heroWordReveal {
  0% {
    opacity: 0;
    transform: translateY(100%) rotateX(-30deg);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: none;
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: none;
  }
}

/* Slide up with blur-clear */
@keyframes heroBlurIn {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

/* Scale in with fade */
@keyframes heroScaleIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Label slide + grow from center */
@keyframes heroLabelReveal {
  0% {
    opacity: 0;
    letter-spacing: 0.5em;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    letter-spacing: var(--tracking-widest);
    transform: translateY(0);
  }
}

/* CTA buttons slide up with spring bounce */
@keyframes heroCtaReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  70% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Background shapes float with organic motion */
@keyframes heroShapeFloat {
  0%, 100% {
    opacity: 0.6;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translate(20px, -30px) scale(1.05) rotate(1deg);
  }
  40% {
    opacity: 0.5;
    transform: translate(-15px, 20px) scale(0.95) rotate(-0.5deg);
  }
  60% {
    opacity: 0.7;
    transform: translate(10px, 15px) scale(1.02) rotate(0.8deg);
  }
  80% {
    opacity: 0.55;
    transform: translate(-20px, -10px) scale(0.98) rotate(-0.3deg);
  }
}

/* Line sweep across hero */
@keyframes heroLineSweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Pulse glow */
@keyframes heroPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

/* Scroll indicator */
@keyframes heroScrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* Hero BG image subtle scale */
@keyframes heroBgSlow {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* =============================================
   SCROLL REVEAL SYSTEM (Framer Motion-style)
   Multiple animation types with spring easing
   ============================================= */

/* --- Base reveal states --- */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s var(--spring-smooth),
              transform 0.9s var(--spring-smooth),
              filter 0.9s var(--spring-smooth);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.reveal--left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s var(--spring-smooth),
              transform 0.9s var(--spring-smooth),
              filter 0.9s var(--spring-smooth);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.reveal--right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.9s var(--spring-smooth),
              transform 0.9s var(--spring-smooth),
              filter 0.9s var(--spring-smooth);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.9s var(--spring-smooth),
              transform 0.9s var(--spring-bounce),
              filter 0.9s var(--spring-smooth);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

/* Rotate reveal — for visual interest */
.reveal--rotate {
  opacity: 0;
  transform: translateY(40px) rotate(-3deg);
  transition: opacity 0.9s var(--spring-smooth),
              transform 1s var(--spring-bounce),
              filter 0.9s var(--spring-smooth);
  filter: blur(3px);
  will-change: opacity, transform, filter;
}

/* --- Revealed state --- */
.reveal--visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
  filter: none;
}

/* --- Stagger delays — Framer Motion staggerChildren: 0.1 --- */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }
.reveal-delay-7 { transition-delay: 560ms; }
.reveal-delay-8 { transition-delay: 640ms; }

/* =============================================
   ACCENT LINE DRAW ANIMATION
   Line appears to draw itself on scroll
   ============================================= */
.accent-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--spring-smooth);
}

.accent-line--left {
  transform-origin: left;
}

.reveal--visible .accent-line,
.reveal--visible ~ .accent-line,
.reveal--visible + .accent-line {
  transform: scaleX(1);
}

/* Parent-based accent line animation */
.reveal--visible .accent-line {
  transform: scaleX(1);
  transition-delay: 0.3s;
}

/* =============================================
   PRACTICE CARD ENHANCED HOVER
   3D tilt + glow effect on hover
   ============================================= */
.practice-card {
  --card-glow-x: 50%;
  --card-glow-y: 50%;
  will-change: transform;
}

.practice-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--card-glow-x) var(--card-glow-y),
    rgba(201, 168, 76, 0.06),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s var(--spring-smooth);
  pointer-events: none;
  z-index: 0;
}

.practice-card:hover::after {
  opacity: 1;
}

/* Icon animation on card hover */
.practice-card__icon {
  transition: transform 0.6s var(--spring-bounce),
              color 0.3s var(--spring-smooth);
}

.practice-card:hover .practice-card__icon {
  transform: scale(1.15) translateY(-4px);
}

/* Top bar shimmer */
.practice-card::before {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-light) 50%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
}

.practice-card:hover::before {
  animation: shimmerBar 2s infinite ease-in-out;
}

@keyframes shimmerBar {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* =============================================
   ATTORNEY CARD ENHANCED EFFECTS
   Photo zoom + overlay reveal
   ============================================= */
.attorney-card__photo img {
  transition: transform 0.8s var(--spring-smooth),
              filter 0.5s var(--spring-smooth);
}

.attorney-card:hover .attorney-card__photo img {
  transform: scale(1.08);
}

.attorney-card__photo-overlay {
  transition: opacity 0.5s var(--spring-smooth);
}

.attorney-card:hover .attorney-card__photo-overlay {
  opacity: 0.3;
}

/* Card body slide up on hover */
.attorney-card__body {
  transition: transform 0.5s var(--spring-smooth);
}

.attorney-card:hover .attorney-card__body {
  transform: translateY(-4px);
}

/* Email link glow on hover */
.attorney-card__email {
  transition: all 0.3s var(--spring-smooth);
}

.attorney-card:hover .attorney-card__email {
  color: var(--accent);
}

/* =============================================
   NEWS CARD ENHANCED EFFECTS
   ============================================= */
.news-card {
  transition: all 0.5s var(--spring-smooth);
}

.news-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.5s var(--spring-smooth);
  pointer-events: none;
}

.news-card:hover::before {
  border-color: rgba(201, 168, 76, 0.2);
}

.news-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* =============================================
   BUTTON MICRO-INTERACTIONS
   Spring-based hover with ripple & glow
   ============================================= */
.btn {
  transition: all 0.4s var(--spring-smooth);
}

/* Shimmer sweep on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s var(--spring-smooth);
}

.btn--primary:hover::after {
  left: 100%;
}

.btn:active {
  transform: scale(0.96) !important;
  transition-duration: 0.1s;
}

/* =============================================
   SECTION HEADER ANIMATIONS
   Text label slides + line grows
   ============================================= */
.text-label,
.text-label-dark {
  transition: opacity 0.6s var(--spring-smooth),
              letter-spacing 0.8s var(--spring-smooth),
              transform 0.6s var(--spring-smooth);
}

.reveal--visible .text-label,
.reveal--visible .text-label-dark {
  animation: labelFadeIn 0.8s var(--spring-smooth) forwards;
}

@keyframes labelFadeIn {
  from {
    letter-spacing: 0.4em;
    opacity: 0;
  }
  to {
    letter-spacing: var(--tracking-widest);
    opacity: 1;
  }
}

/* =============================================
   CONTACT FORM ENHANCED
   Input focus animations
   ============================================= */
.form-group__input,
.form-group__textarea {
  transition: border-color 0.3s var(--spring-smooth),
              box-shadow 0.3s var(--spring-smooth),
              transform 0.3s var(--spring-smooth);
}

.form-group__input:focus,
.form-group__textarea:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.1);
}

/* =============================================
   WHATSAPP FLOATING BUTTON
   Pulse ring + bounce entrance
   ============================================= */
@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-btn {
  animation: whatsappPulse 2s infinite ease-in-out;
}

.whatsapp-btn:hover {
  transform: scale(1.1) !important;
  animation: none;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.3);
}

/* =============================================
   SCROLL PROGRESS INDICATOR
   For nav bar
   ============================================= */
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* =============================================
   CURSOR GLOW EFFECT (Desktop only)
   Follows mouse for premium feel
   ============================================= */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 168, 76, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: left, top;
}

/* =============================================
   CSS SCROLL-DRIVEN ANIMATIONS
   Progressive enhancement
   ============================================= */
@supports (animation-timeline: view()) {
  .scroll-fade-in {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .scroll-slide-up {
    animation: scrollSlideUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  .scroll-scale-in {
    animation: scrollScaleIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  @keyframes scrollFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes scrollSlideUp {
    from {
      opacity: 0;
      transform: translateY(60px);
      filter: blur(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: none;
    }
  }

  @keyframes scrollScaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* =============================================
   MICRO-INTERACTIONS
   ============================================= */

/* Gold accent line grow on hover */
.line-grow {
  position: relative;
  display: inline-block;
}

.line-grow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--duration-normal) var(--spring-smooth),
              left var(--duration-normal) var(--spring-smooth);
}

.line-grow:hover::after {
  width: 100%;
  left: 0;
}

/* Subtle shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite ease-in-out;
}

/* Floating animation — organic */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  66% {
    transform: translateY(-4px) rotate(-0.3deg);
  }
}

.animate-float {
  animation: float 6s infinite ease-in-out;
}

/* Gradient border pulse */
@keyframes gradientBorder {
  0%, 100% {
    border-color: rgba(var(--accent-rgb), 0.2);
  }
  50% {
    border-color: rgba(var(--accent-rgb), 0.5);
  }
}

/* =============================================
   LOADING / PAGE TRANSITION
   ============================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--spring-smooth),
              visibility 0.8s,
              filter 0.8s var(--spring-smooth);
}

.page-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: none;
}

.page-loader__logo {
  height: 60px;
  opacity: 0;
  animation: loaderFade 1.5s ease-in-out infinite alternate;
}

@keyframes loaderFade {
  from { opacity: 0.3; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* =============================================
   PARALLAX (JS-enhanced)
   ============================================= */
.parallax {
  will-change: transform;
}

/* =============================================
   REDUCED MOTION
   Respect user preferences
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--rotate {
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
  }

  .hero__label,
  .hero__title,
  .hero__subtitle,
  .hero__cta-group {
    opacity: 1;
    animation: none;
    filter: none;
  }

  .hero__shape,
  .hero__line {
    animation: none;
    opacity: 0.4;
  }

  .hero__scroll {
    animation: none;
    opacity: 0.4;
  }

  .hero__scroll-line {
    animation: none;
  }

  .animate-float {
    animation: none;
  }

  .shimmer {
    animation: none;
    background: transparent;
  }

  .cursor-glow {
    display: none;
  }

  .whatsapp-btn {
    animation: none;
  }

  .firm__svg-art path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}