/* ============================================
   ANIMATIONS & TRANSITIONS
   Subtle, Professional Motion Design
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES FOR ANIMATION
   ============================================ */
:root {
  --anim-duration-fast: 0.2s;
  --anim-duration-normal: 0.4s;
  --anim-duration-slow: 0.6s;
  --anim-duration-slower: 0.8s;
  --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-ease-bounce: cubic-bezier(0.68, -0.05, 0.265, 1.25);
  --anim-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --anim-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Base state - FULLY VISIBLE, NO transform offset */
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Transforms ONLY apply after JS adds js-ready class */
html.js-ready [data-reveal="fade-up"]:not(.revealed) {
  opacity: 0.97;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

html.js-ready [data-reveal="fade-down"]:not(.revealed) {
  opacity: 0.97;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

html.js-ready [data-reveal="fade-left"]:not(.revealed) {
  opacity: 0.97;
  transform: translateX(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

html.js-ready [data-reveal="fade-right"]:not(.revealed) {
  opacity: 0.97;
  transform: translateX(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

html.js-ready [data-reveal="fade-in"]:not(.revealed) {
  opacity: 0.97;
  transform: scale(0.99);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

html.js-ready [data-reveal="zoom-in"]:not(.revealed) {
  opacity: 0.97;
  transform: scale(0.97);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Revealed state */
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* NO DELAYS - all items animate together */
[data-reveal-delay="1"],
[data-reveal-delay="2"],
[data-reveal-delay="3"],
[data-reveal-delay="4"],
[data-reveal-delay="5"],
[data-reveal-delay="6"],
[data-reveal-delay="100"],
[data-reveal-delay="200"],
[data-reveal-delay="300"] { transition-delay: 0s !important; }

/* ============================================
   HERO ANIMATIONS
   ============================================ */

@keyframes heroFadeIn {
  from {
    opacity: 1;
    transform: none; /* No offset - visible immediately */
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroBadgeSlide {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroStatsReveal {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* Hero section animations */
.corporate-hero-content .corporate-badge {
  animation: heroBadgeSlide 0.6s var(--anim-ease-out) 0.2s backwards;
}

.corporate-hero-content .corporate-hero-title {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 0.4s backwards;
}

.corporate-hero-content .corporate-hero-subtitle {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 0.6s backwards;
}

.corporate-hero-content .corporate-stats-row {
  animation: heroStatsReveal 0.8s var(--anim-ease-out) 0.8s backwards;
}

.corporate-hero-content .corporate-cta-group {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 1s backwards;
}

/* ============================================
   CARD ANIMATIONS & HOVER EFFECTS
   ============================================ */

/* Wellness cards */
.wellness-card {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth),
              border-color var(--anim-duration-normal) var(--anim-ease-smooth);
}

.wellness-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

.wellness-card .card-icon {
  transition: transform var(--anim-duration-normal) var(--anim-ease-bounce),
              background var(--anim-duration-normal) var(--anim-ease-smooth);
}

.wellness-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg);
}

.wellness-card.highlight-card:hover {
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.25), 0 0 0 1px rgba(212, 175, 55, 0.4);
}

/* HR service cards */
.hr-service-card {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth),
              background var(--anim-duration-normal) var(--anim-ease-smooth);
}

.hr-service-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.hr-service-card .service-icon {
  transition: transform var(--anim-duration-normal) var(--anim-ease-bounce),
              color var(--anim-duration-fast) var(--anim-ease-smooth);
}

.hr-service-card:hover .service-icon {
  transform: scale(1.15);
  color: var(--corporate-accent);
}

/* Generic card lift effect */
.card-lift {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */

.btn-corporate {
  position: relative;
  overflow: hidden;
  transition: transform var(--anim-duration-fast) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-fast) var(--anim-ease-smooth),
              background var(--anim-duration-fast) var(--anim-ease-smooth);
}

.btn-corporate::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-corporate:hover::before {
  width: 300px;
  height: 300px;
}

.btn-corporate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-corporate:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-corporate.primary:hover {
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* ============================================
   STATS COUNTER ANIMATION
   ============================================ */

@keyframes countPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.corporate-stat {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth);
}

.corporate-stat:hover {
  transform: scale(1.08);
}

.corporate-stat:hover .stat-number {
  animation: countPulse 0.6s var(--anim-ease-bounce);
}

/* ============================================
   SECTION TRANSITIONS
   ============================================ */

.corporate-section {
  position: relative;
}

/* Subtle gradient animation on sections */
.corporate-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.3) 50%,
    transparent 100%);
  opacity: 1; /* Changed from 0 - content visible by default */
  transition: opacity var(--anim-duration-slow) var(--anim-ease-smooth);
}

.corporate-section.revealed::before {
  opacity: 1;
}

/* ============================================
   LINK & TEXT ANIMATIONS
   ============================================ */

/* Underline animation for links */
.animated-underline {
  position: relative;
  text-decoration: none;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--anim-duration-normal) var(--anim-ease-smooth);
}

.animated-underline:hover::after {
  width: 100%;
}

/* Text shimmer effect for premium elements */
.text-shimmer {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    rgba(212, 175, 55, 1) 50%,
    currentColor 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ============================================
   ICON ANIMATIONS
   ============================================ */

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes iconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

.icon-float {
  animation: iconFloat 3s ease-in-out infinite;
}

.icon-pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

/* ============================================
   LOADING & SKELETON ANIMATIONS
   ============================================ */

@keyframes skeletonPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

.skeleton {
  background: linear-gradient(90deg, #1e3a5f 25%, #2a4a6f 50%, #1e3a5f 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ============================================
   INTEGRATION DIAGRAM ANIMATION
   ============================================ */

@keyframes orbitRotate {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

@keyframes orbitPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
  }
}

.integration-diagram .diagram-center {
  animation: orbitPulse 3s ease-in-out infinite;
}

.integration-diagram .diagram-orbit {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

.integration-diagram .diagram-orbit:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Staggered orbit animations */
.wellness-orbit { animation-delay: 0s; }
.hr-orbit { animation-delay: 0.5s; }
.compliance-orbit { animation-delay: 1s; }
.savings-orbit { animation-delay: 1.5s; }

/* ============================================
   MEGA MENU ANIMATIONS
   ============================================ */

.dropdown-menu {
  animation: menuFadeIn 0.25s var(--anim-ease-out);
}

@keyframes menuFadeIn {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mega-menu-column {
  transition: background var(--anim-duration-fast) var(--anim-ease-smooth);
}

.mega-menu-items li {
  transition: transform var(--anim-duration-fast) var(--anim-ease-smooth),
              padding-left var(--anim-duration-fast) var(--anim-ease-smooth);
}

.mega-menu-items li:hover {
  transform: translateX(5px);
}

/* ============================================
   FOOTER ANIMATIONS
   ============================================ */

.corporate-footer .footer-links a {
  position: relative;
  transition: color var(--anim-duration-fast) var(--anim-ease-smooth);
}

.corporate-footer .footer-links a::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--corporate-accent);
  transition: width var(--anim-duration-fast) var(--anim-ease-smooth);
}

.corporate-footer .footer-links a:hover::before {
  width: 8px;
}

/* ============================================
   VIDEO PLACEHOLDER ANIMATIONS
   ============================================ */

.video-placeholder {
  position: relative;
  overflow: hidden;
}

.video-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: videoShimmer 2s infinite;
}

@keyframes videoShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Play button pulse */
.video-play-btn {
  transition: transform var(--anim-duration-normal) var(--anim-ease-bounce),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

.video-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

/* ============================================
   RESOURCE CARD ANIMATIONS
   ============================================ */

.resource-card {
  transition: transform var(--anim-duration-normal) var(--anim-ease-smooth),
              box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.resource-card .download-icon {
  transition: transform var(--anim-duration-normal) var(--anim-ease-bounce);
}

.resource-card:hover .download-icon {
  transform: translateY(3px);
}

/* ============================================
   SCROLL PROGRESS INDICATOR
   ============================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--corporate-accent), #f0d78c);
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ============================================
   BRIGHTADVISOR HERO ANIMATIONS
   ============================================ */

.hero-title-animate {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 0.2s backwards;
}

.hero-subtitle-animate {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 0.5s backwards;
}

.hero-cta-animate {
  animation: heroFadeIn 0.8s var(--anim-ease-out) 0.8s backwards;
}

.scroll-indicator {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-15px);
  }
  60% {
    transform: translateX(-50%) translateY(-7px);
  }
}

/* ============================================
   BRIGHTADVISOR BUTTON STYLES
   ============================================ */

.btn-advisor-primary {
  background: linear-gradient(135deg, #38b2ac 0%, #2c9a94 100%);
  color: white;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  box-shadow: 0 10px 25px rgba(56, 178, 172, 0.3);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.btn-advisor-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-advisor-primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-advisor-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(56, 178, 172, 0.4);
}

.btn-advisor-secondary {
  background: white;
  color: #1a365d;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
  display: inline-block;
  text-align: center;
}

.btn-advisor-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  background: #f7fafc;
}

.btn-advisor-secondary-light {
  background: white;
  color: #1a365d;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
  display: inline-block;
  text-align: center;
}

.btn-advisor-secondary-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.btn-outline-white {
  border: 2px solid white;
  color: white;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
  display: inline-block;
  text-align: center;
  background: transparent;
}

.btn-outline-white:hover {
  background: white;
  color: #1a365d;
  transform: translateY(-2px);
}

/* ============================================
   BRIGHTADVISOR CARD STYLES
   ============================================ */

.service-card {
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-card.featured-card:hover {
  box-shadow: 0 20px 40px rgba(56, 178, 172, 0.2);
}

.stat-card {
  padding: 1rem;
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
}

.stat-card:hover {
  transform: scale(1.05);
}

.stat-card:hover .stat-number {
  animation: countPulse 0.6s var(--anim-ease-bounce);
}

.feature-card {
  padding: 1.5rem;
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card:hover .icon-container {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icon-container {
  transition: all var(--anim-duration-normal) var(--anim-ease-bounce);
}

.testimonial-card {
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all var(--anim-duration-normal) var(--anim-ease-smooth);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-item {
  transition: all var(--anim-duration-fast) var(--anim-ease-smooth);
}

.feature-item:hover {
  transform: translateX(5px);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
  /* VISIBLE BY DEFAULT */
    opacity: 1;
    transform: none;
  }
}