/* =========================================================
   BrightFirst — 3D Premium Animations & Keyframes
   Features: 3D float, glow pulse, shine sweep, tilt, sparkle
   ========================================================= */

/* =========================================================
   KEYFRAMES
   ========================================================= */

/* Rotation */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 3D floating — Z-depth float */
@keyframes float3D {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50%      { transform: translateZ(40px) translateY(-20px); }
}

/* Floating cards (2D fallback) */
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* 3D floating cards — different directions */
@keyframes floatCard3D-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  50%      { transform: translate3d(0, -15px, 30px) rotateX(2deg) rotateY(-2deg); }
}
@keyframes floatCard3D-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  50%      { transform: translate3d(-8px, -20px, 40px) rotateX(-2deg) rotateY(2deg); }
}
@keyframes floatCard3D-3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  50%      { transform: translate3d(8px, -18px, 35px) rotateX(2deg) rotateY(2deg); }
}

/* 3D badge float with rotation */
@keyframes badgeFloat3D {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0); }
  50%      { transform: translate3d(0, -12px, 20px) rotateX(4deg); }
}

/* Floating particles */
@keyframes floatParticle {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(40px); opacity: 0; }
}

/* Sparkle particles — brighter, glow */
@keyframes sparkleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateY(-150px) scale(0.5); opacity: 0; }
}

/* Floating orbs */
@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(30px, -30px); }
}

/* Floating dots up/down */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-20px); opacity: 0.8; }
}

/* Scroll indicator dot */
@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Preloader spin */
@keyframes preloaderSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Gold shimmer text */
@keyframes goldShine {
  to { background-position: 200% center; }
}

/* Badge pulse glow ring */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(244, 186, 3, 0.35), 0 0 0 0 rgba(244, 186, 3, 0.5); }
  50%      { box-shadow: 0 8px 20px rgba(244, 186, 3, 0.35), 0 0 0 10px rgba(244, 186, 3, 0); }
}

/* Section tag glow */
@keyframes tagGlow {
  0%, 100% { box-shadow: 0 4px 12px rgba(244, 186, 3, 0.3); }
  50%      { box-shadow: 0 4px 12px rgba(244, 186, 3, 0.3), 0 0 20px rgba(244, 186, 3, 0.5); }
}

/* Glow pulse (for orbs behind visuals) */
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Diagonal shine sweep (stats, CTA) */
@keyframes statsShine {
  0%   { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

/* Back-to-top float */
@keyframes backToTopFloat {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-6px) translateZ(20px); }
}

/* Card tilt (fallback for non-3D) */
@keyframes cardTilt {
  0%   { transform: translateY(-12px) scale(1.02) rotate(0deg); }
  25%  { transform: translateY(-12px) scale(1.02) rotate(-1deg); }
  75%  { transform: translateY(-12px) scale(1.02) rotate(1deg); }
  100% { transform: translateY(-12px) scale(1.02) rotate(0deg); }
}

/* 3D rotate in on reveal */
@keyframes rotateIn3D {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg) translateZ(-50px);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) translateZ(0);
  }
}

/* Flowing dots on process connector line */
@keyframes flowDots {
  0%   { background-position-x: 0; }
  100% { background-position-x: 16px; }
}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 186, 3, 0.08), transparent 60%),
    var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; }

.preloader-sunburst {
  position: relative;
  width: 70px; height: 70px;
  animation: preloaderSpin 1.6s linear infinite;
  filter: drop-shadow(0 0 20px rgba(244, 186, 3, 0.6));
}
.preloader-sunburst span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transform-origin: 0 50%;
}
.preloader-sunburst span:nth-child(1) { transform: rotate(0deg)   translateX(16px); }
.preloader-sunburst span:nth-child(2) { transform: rotate(45deg)  translateX(16px); }
.preloader-sunburst span:nth-child(3) { transform: rotate(90deg)  translateX(16px); }
.preloader-sunburst span:nth-child(4) { transform: rotate(135deg) translateX(16px); }
.preloader-sunburst span:nth-child(5) { transform: rotate(180deg) translateX(16px); }
.preloader-sunburst span:nth-child(6) { transform: rotate(225deg) translateX(16px); }
.preloader-sunburst span:nth-child(7) { transform: rotate(270deg) translateX(16px); }
.preloader-sunburst span:nth-child(8) { transform: rotate(315deg) translateX(16px); }

.preloader-text {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 2px;
  text-shadow: 0 4px 12px rgba(41, 51, 78, 0.1);
}

/* =========================================================
   SCROLL REVEAL — 3D
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px) perspective(1000px) rotateX(6deg);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center bottom;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) perspective(1000px) rotateX(0deg);
}

/* 3D rotate variant */
.reveal-3d {
  opacity: 0;
  transform: perspective(1000px) rotateY(-15deg) translateZ(-50px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-3d.visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) translateZ(0);
}

/* Stagger delays */
.reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal:nth-child(2) { transition-delay: 0.15s; }
.reveal:nth-child(3) { transition-delay: 0.25s; }
.reveal:nth-child(4) { transition-delay: 0.35s; }
.reveal:nth-child(5) { transition-delay: 0.45s; }
.reveal:nth-child(6) { transition-delay: 0.55s; }

/* =========================================================
   SPARKLE PARTICLES
   ========================================================= */
.particle.sparkle {
  background: var(--gold-light);
  box-shadow:
    0 0 20px rgba(244, 186, 3, 0.9),
    0 0 40px rgba(244, 186, 3, 0.5);
  animation: sparkleFloat linear infinite;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}

/* =========================================================
   3D HOVER — Card tilt for non-JS
   ========================================================= */
@media (hover: hover) {
  .service-card { will-change: transform; }
  .process-step { will-change: transform; }
  .promise-card { will-change: transform; }
  .hero-card { will-change: transform; }
}

/* =========================================================
   ACCESSIBILITY — Focus ring
   ========================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-3d {
    opacity: 1;
    transform: none;
  }
  .service-card:hover,
  .process-step:hover,
  .promise-card:hover,
  .hero-card:hover {
    transform: none !important;
  }
  .particle,
  .particle.sparkle {
    animation: none !important;
    opacity: 0 !important;
  }
}