/* ==========================================================
   TaxPro Consultants — Design tokens & custom styles
   Tailwind (CDN) handles utility classes; this file carries
   the brand palette, animations and anything Tailwind's
   default config can't express.
   ========================================================== */

:root {
  --navy-900: #071a33;
  --navy-800: #0b2447;
  --navy-700: #123c73;
  --navy-600: #1c4d8f;
  --gold-500: #c79a3b;
  --gold-400: #d4ac52;
  --gold-300: #e6c778;
  --ink: #1b2130;
  --slate-500: #5c6478;
  --paper: #f6f7fb;
  --line: #e7eaf2;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
}

.font-display {
  font-family: 'Fraunces', 'Georgia', serif;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Navbar scroll state ---------- */
#site-navbar {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#site-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(11, 36, 71, 0.08);
}

/* ---------- Hero: animated glass blobs ---------- */
.hero-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 15% 10%, #123c73 0%, #0b2447 45%, #071a33 100%);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  background: linear-gradient(135deg, rgba(212, 172, 82, 0.35), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 40px rgba(255,255,255,0.06);
  animation: blobFloat 9s ease-in-out infinite;
}
.hero-blob--a { width: 340px; height: 340px; top: -80px; right: -60px; animation-delay: 0s; }
.hero-blob--b { width: 220px; height: 220px; bottom: -40px; left: -40px; animation-duration: 11s; animation-delay: .8s;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(199,154,59,0.25)); }
.hero-blob--c { width: 140px; height: 140px; top: 40%; left: 6%; animation-duration: 7.5s; animation-delay: 1.6s; opacity: .7; }

@keyframes blobFloat {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
  50% { transform: translateY(-26px) translateX(10px) scale(1.04); }
}

.glass-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 45px rgba(3, 12, 26, 0.35);
}

.glass-float {
  animation: glassFloat 4s ease-in-out infinite;
}

.glass-float-slow {
  animation: glassFloat 5s ease-in-out infinite;
}

@keyframes glassFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(0.5deg);
  }
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(11, 36, 71, 0.16);
}

/* Hero Section Appointment Button */

/* =========================================
   Appointment CTA
========================================= */

.appointment-cta {
  animation: appointmentFloat 3s ease-in-out infinite;
}

/* Soft breathing effect */
@keyframes appointmentFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 8px 25px rgba(199, 154, 59, 0.08);
  }

  50% {
    transform: translateY(-2px);
    box-shadow:
      0 12px 32px rgba(199, 154, 59, 0.18);
  }
}

/* Moving shine */
.appointment-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent
  );

  transform: skewX(-20deg);
  animation: appointmentShine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes appointmentShine {
  0% {
    left: -120%;
  }

  35%,
  100% {
    left: 140%;
  }
}

/* Calendar icon gently moves */
.appointment-icon {
  transition: transform 0.3s ease;
}

.appointment-cta:hover .appointment-icon {
  transform: translateX(4px) rotate(-5deg);
}

/* Don't combine the hover transform with the floating animation */
.appointment-cta:hover {
  animation-play-state: paused;
  transform: translateY(-3px);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .appointment-cta,
  .appointment-shine {
    animation: none;
  }
}

/* ---------- Hero entrance sequence ---------- */
.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  animation: heroRise .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-anim.d1 { animation-delay: .05s; }
.hero-anim.d2 { animation-delay: .22s; }
.hero-anim.d3 { animation-delay: .40s; }
.hero-anim.d4 { animation-delay: .58s; }
.hero-anim.d5 { animation-delay: .74s; }
.hero-anim.d6 { animation-delay: .92s; }
.hero-anim.d7 { animation-delay: 1.10s; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-heading-line {
  display: block;
  overflow: hidden;
}
.hero-heading-line span {
  display: inline-block;
  transform: translateY(105%);
  animation: lineUp .75s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-heading-line:nth-child(1) span { animation-delay: .15s; }
.hero-heading-line:nth-child(2) span { animation-delay: .32s; }
@keyframes lineUp {
  to { transform: translateY(0); }
}

/* ---------- Scroll reveal (IntersectionObserver toggles .is-visible) ---------- */
.reveal {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-up { transform: translateY(28px); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

/* ---------- Cards & hover ---------- */
.service-card {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 45px rgba(11, 36, 71, 0.14);
  border-color: var(--gold-400);
}
.service-card .icon-wrap {
  transition: transform .35s ease, background-color .35s ease;
}
.service-card:hover .icon-wrap {
  transform: scale(1.08) rotate(-4deg);
  background-color: var(--navy-800);
}
.service-card:hover .icon-wrap {
  /* stroke: #fff; */
  color: white;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(199,154,59,.35); filter: brightness(1.05); }

.btn-arrow span { display: inline-block; transition: transform .25s ease; }
.btn-arrow:hover span { transform: translateX(4px); }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.06); }

/* ---------- Floating contact buttons ---------- */
.float-btn {
  width: 54px; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.float-btn:hover { transform: translateY(-3px) scale(1.05); }
.float-btn .tooltip {
  opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.float-btn:hover .tooltip { opacity: 1; transform: translateX(0); }

.pulse-ring::before {
  content: '';
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  80% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* -------- Watch Our Video --------------- */
.video-play-button {
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.video-play-icon {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 9999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f87171;
  color: white;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

/* Outer pulse */
.video-play-icon::before,
.video-play-icon::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;
  border: 2px solid rgba(248, 113, 113, 0.65);

  animation: videoPulse 2s ease-out infinite;
}

/* Second ripple starts later */
.video-play-icon::after {
  animation-delay: 1s;
}

@keyframes videoPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  70% {
    transform: scale(1.65);
    opacity: 0;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* Hover */
.video-play-button:hover .video-play-icon {
  transform: scale(1.08);
  background: #fca5a5;
}

.video-play-button i {
  position: relative;
  z-index: 2;
  margin-left: 3px;
  font-size: 20px;
}

/* Hide play button while video is playing */
[data-video-wrapper].is-playing .video-play-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .video-play-icon::before,
  .video-play-icon::after {
    animation: none;
  }
}

/* ------------ Complete Watch Our Video ----------------------- */
/* ------------------------------------------------------------- */

/* ---------- Testimonial / blog sliders ---------- */
.slider-track { display: flex; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.slider-viewport { overflow: hidden; }
.slider-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: all .25s ease; }
.slider-dot.active { width: 24px; background: var(--gold-500); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.open { max-height: 640px; }

/* ---------- Misc ---------- */
.section-eyebrow {
  letter-spacing: .14em;
}
.divider-gold {
  width: 56px; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border-radius: 999px;
}
::selection { background: var(--gold-300); color: var(--navy-900); }

.skeleton {
  background: linear-gradient(90deg, #eef0f5 25%, #f7f8fb 37%, #eef0f5 63%);
  background-size: 400% 100%;
  animation: skeletonShine 1.4s ease infinite;
}
@keyframes skeletonShine {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}