/* Custom styles layered on top of Tailwind CDN */

html { scroll-behavior: smooth; }

/* Image-overlay hero / banners (set --img inline on the element) */
.bg-overlay-dark {
  background-image:
    linear-gradient(105deg, rgba(13,17,22,.96) 0%, rgba(13,17,22,.82) 42%, rgba(13,17,22,.45) 100%),
    var(--img);
  background-size: cover;
  background-position: center;
}
.bg-overlay-brand {
  background-image:
    linear-gradient(100deg, rgba(245,91,31,.95), rgba(216,71,15,.86)),
    var(--img);
  background-size: cover;
  background-position: center;
}
.page-header-glow {
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(245,91,31,.28), transparent 60%),
    radial-gradient(700px 400px at 0% 120%, rgba(27,187,255,.18), transparent 55%);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Partner logos */
.partner-logo { height: 30px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.partner-logo:hover { opacity: 1; filter: grayscale(0); }

/* Card hover lift */
.card-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(16,20,24,.22); border-color: transparent; }

/* Image zoom-on-hover */
.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform .5s ease; }
.zoom-wrap:hover img { transform: scale(1.06); }

/* Tracking timeline connector line */
.tl-step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 40px; bottom: -4px; width: 2px; background: #e8ebef;
}
.tl-step.done:not(:last-child)::before { background: #f55b1f; }

/* CSS barcode (decorative) for the track result */
.barcode {
  width: 260px; height: 60px;
  background-image: repeating-linear-gradient(90deg,
    #111 0, #111 2px, #fff 2px, #fff 4px,
    #111 4px, #111 5px, #fff 5px, #fff 8px,
    #111 8px, #111 11px, #fff 11px, #fff 12px,
    #111 12px, #111 13px, #fff 13px, #fff 16px);
}

/* Print: show only the track result */
@media print {
  .no-print, header.sticky, footer, .page-header { display: none !important; }
  #printArea { border: none !important; box-shadow: none !important; }
  body { background: #fff !important; }
}

/* ============================================================
   Sleek animations (subtle bounce / spin / float / shimmer)
   ============================================================ */
@keyframes floaty     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fadeUp     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes popIn      { 0% { opacity: 0; transform: scale(.92); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gradShift  { to { background-position: 200% center; } }
@keyframes softBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(-2px); } }
@keyframes spinOnce   { to { transform: rotate(360deg); } }
@keyframes pulseDot   { 0%,100% { box-shadow: 0 0 0 0 rgba(27,187,255,.45); } 50% { box-shadow: 0 0 0 7px rgba(27,187,255,0); } }

.anim-float    { animation: floaty 3.4s ease-in-out infinite; }
.anim-fade-up  { animation: fadeUp .8s ease both; }
.anim-delay-1  { animation-delay: .15s; }
.anim-delay-2  { animation-delay: .3s; }
.anim-delay-3  { animation-delay: .45s; }
.anim-pop      { animation: popIn .7s ease both; }
.anim-pulse-dot{ animation: pulseDot 2.2s ease-in-out infinite; }

/* Shimmering gradient text (great for a highlighted word) */
.gradient-text {
  background: linear-gradient(90deg, #f55b1f, #ff9a63, #1bbbff, #f55b1f);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradShift 6s linear infinite;
}

/* Spin the logo mark on hover of the brand link */
.brand-mark { transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.group:hover .brand-mark { transform: rotate(360deg); }

/* Gentle bounce on hover — for buttons / links */
.hover-bounce:hover { animation: softBounce .6s ease; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-fade-up, .anim-pop, .anim-pulse-dot, .gradient-text,
  .brand-mark, .hover-bounce, .reveal { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Eyebrow dash */
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px; background: currentColor;
  border-radius: 2px; margin-right: 8px; vertical-align: middle;
}