/* LIFERT TRANS — custom styles poverkh Tailwind: animations & decorative elements */

/* ===== reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ===== marquee ===== */
.marquee {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  width: max-content;
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F79055;
  display: inline-block;
  flex: none;
}

/* ===== animated route lines ===== */
.route-path {
  stroke-dasharray: 10 12;
}

/* ===== pulsing dot ===== */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #169B62;
  flex: none;
}

/* ===== flat decorative shapes ===== */
.deco-dots {
  background-image: radial-gradient(#4E5A65 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: .35;
}
.deco-ring {
  border-radius: 50%;
  border-style: solid;
}

/* ===== motion (disabled via prefers-reduced-motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  .marquee { animation: marquee-scroll 34s linear infinite; }
  .route-path { animation: dash-move 2.2s linear infinite; }
  .pulse-dot { animation: dot-pulse 2s infinite; }
  .deco-float { animation: deco-drift 9s ease-in-out infinite alternate; }
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@keyframes dash-move { to { stroke-dashoffset: -44; } }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 155, 98, .45); }
  50% { box-shadow: 0 0 0 8px rgba(22, 155, 98, 0); }
}
@keyframes deco-drift { to { transform: translate(14px, -14px) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== misc ===== */
html { overflow-x: clip; scroll-behavior: smooth; }
.map-frame { filter: saturate(.9); }

/* ===== DYNAMIC NAVBAR THEMES ===== */
#nav-pill {
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Dark Theme (Default/Hero) */
#nav-pill.nav-dark {
  background-color: #1E2229; /* bg-navy */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  color: #ffffff;
}
#nav-pill.nav-dark .nav-link {
  color: rgba(255, 255, 255, 0.75);
}
#nav-pill.nav-dark .nav-link:hover {
  color: #ffffff;
}
#nav-pill.nav-dark .nav-phone {
  color: rgba(255, 255, 255, 0.9);
}
#nav-pill.nav-dark .nav-phone:hover {
  color: #FFB27E; /* apricot */
}

/* Light Theme (on light backgrounds) */
#nav-pill.nav-light {
  background-color: #ffffff; /* white */
  border: 1px solid rgba(227, 233, 242, 0.6); /* line/60 */
  box-shadow: 0 4px 24px rgba(10, 27, 61, 0.04);
  color: #1E2229;
}
#nav-pill.nav-light .nav-link {
  color: #5B6B87; /* muted */
}
#nav-pill.nav-light .nav-link:hover {
  color: #169B62; /* mint */
}
#nav-pill.nav-light .nav-phone {
  color: #1E2229; /* navy */
}
#nav-pill.nav-light .nav-phone:hover {
  color: #169B62; /* mint */
}

/* Unified Accent Button Style */
#nav-pill .nav-btn {
  background-color: #FFB27E; /* apricot */
  color: #1E2229; /* navy */
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: 
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
    max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    padding-right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease;
}
#nav-pill .nav-btn:hover {
  background-color: #F79055; /* apricotdeep */
}
#nav-pill .nav-btn.nav-btn-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: -12px; /* cancels the gap-3 of flex container */
}

/* ===== STICKY MOBILE CTA TRANSITION ===== */
#sticky-mobile-cta {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#sticky-mobile-cta.sticky-cta-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* ===== BURGER & MOBILE OVERLAY ===== */
#burger-btn span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#burger-btn.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#burger-btn.open span:nth-child(2) {
  opacity: 0;
}
#burger-btn.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#mobile-menu .mobile-nav-link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

#mobile-menu.open .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.open .mobile-nav-link:nth-child(2) { transition-delay: 0.18s; }
#mobile-menu.open .mobile-nav-link:nth-child(3) { transition-delay: 0.26s; }
#mobile-menu.open .mobile-nav-link:nth-child(4) { transition-delay: 0.34s; }