/* MERIDIAN Freight Systems — Signature Stylesheet */

:root {
  --color-ink: #090d13;
  --color-ink2: #0e141d;
  --color-ink3: #141c28;
  --color-bone: #f1ede2;
  --color-bone2: #e4ddcb;
  --color-paper: #f6f3ea;
  --color-signal: #ff4d00;
  --color-ember: #ff7a33;
  --color-steel: #8b95a5;
  --color-mist: #c9cfd9;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-ink);
  color: var(--color-bone);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

::selection {
  background: var(--color-signal);
  color: var(--color-ink);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-ink);
}
::-webkit-scrollbar-thumb {
  background: var(--color-ink3);
  border: 2px solid var(--color-ink);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-signal);
}

/* ---------- signature keyframes ---------- */

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes kenburns {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(1.12) translate(1.4%, -1.2%);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes ping-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(255, 77, 0, 0);
  }
}

@keyframes dashflow {
  to {
    stroke-dashoffset: -360;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- utilities ---------- */

.kb {
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}

.kb-hover:hover .kb-img {
  animation: kenburns 14s ease-in-out infinite alternate;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 46s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.blink {
  animation: blink 1.1s steps(1) infinite;
}

.ping-dot {
  animation: ping-dot 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dash-anim {
  stroke-dasharray: 6 10;
  animation: dashflow 12s linear infinite;
}

.rise-in {
  animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.spin-slow {
  animation: spin-slow 26s linear infinite;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* line-mask heading reveal */
.lm {
  display: block;
  overflow: hidden;
}
.lm > span {
  display: block;
  transform: translateY(118%);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in .lm > span,
.is-in .lm > span,
.lm.revealed > span {
  transform: translateY(0);
}
.reveal.is-in .lm.d2 > span,
.lm.d2.revealed > span {
  transition-delay: 0.12s;
}
.reveal.is-in .lm.d3 > span,
.lm.d3.revealed > span {
  transition-delay: 0.24s;
}

/* underline sweep */
.u-sweep {
  position: relative;
}
.u-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.u-sweep:hover::after,
.u-sweep.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* corner cut — waybill motif */
.cut {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.cut-sm {
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

/* blueprint grid */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(139, 149, 165, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 149, 165, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
}

.grid-bg-fine {
  background-image:
    linear-gradient(to right, rgba(139, 149, 165, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 149, 165, 0.05) 1px, transparent 1px);
  background-size: 29px 29px;
}

/* film grain overlay */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 70;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* dotted perforation edge */
.perf-y {
  background-image: radial-gradient(circle, rgba(241, 237, 226, 0.28) 1px, transparent 1.4px);
  background-size: 4px 10px;
  background-repeat: repeat-y;
  background-position: center;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track { animation: none !important; }
  .grain { animation: none !important; }
  .reveal, .lm > span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================
   LEAFLET DARK CARTOGRAPHY & RADAR BEACON STYLES
   ======================================================== */

.leaflet-container {
  background: #090d13 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Dark popup card */
.leaflet-popup-content-wrapper {
  background: #0e141d !important;
  color: #f1ede2 !important;
  border: 1px solid rgba(255, 77, 0, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 77, 0, 0.2) !important;
}
.leaflet-popup-tip {
  background: #0e141d !important;
  border: 1px solid rgba(255, 77, 0, 0.4) !important;
}
.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.4 !important;
  font-size: 11px !important;
}

/* Leaflet map controls dark theme */
.leaflet-bar {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.leaflet-bar a {
  background-color: #0e141d !important;
  color: #f1ede2 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
}
.leaflet-bar a:hover {
  background-color: #ff4d00 !important;
  color: #090d13 !important;
}
.leaflet-control-attribution {
  background: rgba(9, 13, 19, 0.8) !important;
  color: #8b95a5 !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a {
  color: #c9cfd9 !important;
}

/* Live Satellite Beacon Marker */
.radar-beacon {
  position: relative;
  width: 24px;
  height: 24px;
}
.radar-beacon .pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(255, 77, 0, 0.35);
  animation: radar-pulse 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.radar-beacon .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: #ff4d00;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px #ff4d00;
}

@keyframes radar-pulse {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* Port Pin Markers */
.port-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #090d13;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  border: 1px solid #ffffff;
}
.port-origin {
  background: #10b981; /* emerald-500 */
}
.port-dest {
  background: #06b6d4; /* cyan-500 */
}