/* =============================================
   BEDARD COURTIER — Animations & Effects CSS
   ============================================= */

/* ---------- PARTICLE DOTS ---------- */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(213,43,30,.4);
  pointer-events: none;
  animation: particleFloat var(--dur, 8s) ease-in-out infinite alternate;
}
@keyframes particleFloat {
  from { transform: translate(0, 0) scale(1); opacity: .4; }
  to   { transform: translate(var(--tx,30px), var(--ty,-40px)) scale(1.3); opacity: .1; }
}

/* ---------- GLOWING BORDER PULSE ---------- */
.glow-border {
  animation: glowBorder 2.5s ease-in-out infinite;
}
@keyframes glowBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,43,30,0); }
  50%       { box-shadow: 0 0 0 8px rgba(213,43,30,.2); }
}

/* ---------- NUMBER COUNTER ANIMATION ---------- */
.stat-number.counting {
  animation: countPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes countPop {
  from { transform: scale(.85); }
  to   { transform: scale(1); }
}

/* ---------- SHIMMER LOADING ---------- */
.shimmer {
  background: linear-gradient(90deg,
    var(--grey-200) 25%,
    var(--grey-100) 50%,
    var(--grey-200) 75%);
  background-size: 200% 100%;
  animation: shimmerMove 1.4s infinite;
}
@keyframes shimmerMove {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- SLIDE IN VARIANTS ---------- */
.slide-in-left  { animation: slideLeft  .6s cubic-bezier(.4,0,.2,1) both; }
.slide-in-right { animation: slideRight .6s cubic-bezier(.4,0,.2,1) both; }
.slide-in-up    { animation: slideUp    .6s cubic-bezier(.4,0,.2,1) both; }

@keyframes slideLeft  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideRight { from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:translateX(0); } }
@keyframes slideUp    { from { opacity:0; transform:translateY(30px);  } to { opacity:1; transform:translateY(0); } }

/* ---------- PULSE BUTTON ---------- */
.pulse-btn {
  position: relative;
}
.pulse-btn::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--red);
  opacity: 0;
  animation: pulseBorder 2s ease-out infinite;
}
@keyframes pulseBorder {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* ---------- TYPEWRITER CURSOR ---------- */
.typewriter-cursor::after {
  content: '|';
  animation: blink .75s step-end infinite;
  color: var(--red);
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ---------- CARD REVEAL ---------- */
.card-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.card-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- GRADIENT TEXT ANIMATE ---------- */
.gradient-text-animate {
  background: linear-gradient(270deg, #D52B1E, #C9963D, #D52B1E);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- WAVE DIVIDER ---------- */
.wave-divider {
  line-height: 0;
  overflow: hidden;
}
.wave-divider svg { display: block; }

/* ---------- SCROLL PROGRESS BAR ---------- */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  z-index: 9998;
  transition: width .1s linear;
}

/* ---------- TOOLTIP ---------- */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: .75rem;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 100;
}
[data-tooltip]:hover::before { opacity: 1; }

/* ---------- NOTIFICATION TOAST ---------- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--navy);
  color: var(--white);
  padding: 14px 24px;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 9000;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  opacity: 0;
  display: flex; align-items: center; gap: 10px;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast i { color: var(--gold); }

/* ---------- HERO SHAPE BLOB ---------- */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  animation: blobPulse 6s ease-in-out infinite alternate;
}
.hero-blob-1 {
  width: 500px; height: 500px;
  background: rgba(213,43,30,.15);
  top: -100px; right: -100px;
}
.hero-blob-2 {
  width: 300px; height: 300px;
  background: rgba(201,150,61,.1);
  bottom: 100px; left: -50px;
  animation-delay: 2s;
}
@keyframes blobPulse {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.15) rotate(15deg); }
}

/* ---------- MAGNETIC HOVER EFFECT ---------- */
.magnetic {
  transition: transform .2s ease;
  display: inline-block;
}

/* ---------- LOADING DOTS ---------- */
.loading-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  margin: 0 3px;
  animation: dotBounce .8s infinite alternate;
}
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes dotBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* ---------- STICKY HEADER ANIMATION ---------- */
.navbar { animation: navSlideDown .4s ease both; }
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ---------- IMAGE HOVER ZOOM ---------- */
.img-zoom-wrap { overflow: hidden; border-radius: var(--radius); }
.img-zoom-wrap img {
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.img-zoom-wrap:hover img { transform: scale(1.07); }

/* ---------- RIPPLE EFFECT ---------- */
.ripple-btn {
  position: relative; overflow: hidden;
}
.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: rippleEffect .6s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- FEATURE ICON SPIN ON HOVER ---------- */
.service-card:hover .service-icon-wrap i {
  animation: iconSpin .4s ease;
}
@keyframes iconSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ---------- FLOATING LABEL FORM ---------- */
.float-group { position: relative; }
.float-group input,
.float-group select,
.float-group textarea {
  padding-top: 22px; padding-bottom: 6px;
}
.float-group label {
  position: absolute;
  top: 14px; left: 16px;
  font-size: .9rem;
  color: var(--grey-400);
  pointer-events: none;
  transition: all .2s ease;
}
.float-group input:focus + label,
.float-group input:not(:placeholder-shown) + label,
.float-group select:focus + label,
.float-group textarea:focus + label,
.float-group textarea:not(:placeholder-shown) + label {
  top: 6px;
  font-size: .7rem;
  color: var(--red);
  font-weight: 600;
}

/* ---------- DARK MODE SUPPORT (future) ---------- */
@media (prefers-color-scheme: dark) {
  /* Reserved for future dark mode */
}

/* ---------- PRINT ---------- */
@media print {
  .topbar, .navbar, .hero-scroll,
  .back-to-top, #preloader, #scrollProgress { display: none !important; }
  .section-pad { padding: 32px 0; }
}