/* 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: rgba(30, 34, 41, 0.85); /* bg-navy/85 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
#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 */
}
#nav-pill.nav-dark .nav-btn {
  background-color: #ffffff;
  color: #1E2229; /* navy */
}
#nav-pill.nav-dark .nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Light Theme (on light backgrounds) */
#nav-pill.nav-light {
  background-color: rgba(255, 255, 255, 0.85); /* white/85 */
  border: 1px solid rgba(227, 233, 242, 0.6); /* line/60 */
  box-shadow: 0 4px 24px rgba(10, 27, 61, 0.04);
}
#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 */
}
#nav-pill.nav-light .nav-btn {
  background-color: #1E2229; /* navy */
  color: #ffffff;
}
#nav-pill.nav-light .nav-btn:hover {
  background-color: #2A303B; /* navy2 */
}