/* MB Telematik — custom styles beyond Tailwind utilities */

/* Self-hosted fonts (variable-font files cover weights 400–800).
   Hosted locally instead of via Google Fonts CDN so no visitor IP address
   is transmitted to a third party on page load (DSGVO / TTDSG). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-primary: #126187;
  --color-primary-dark: #0b4a68;
  --color-primary-darker: #072e3f;
  --color-accent: #22d3ee;
  --color-ink: #0f172a;
  --color-slate: #47566b;
  --color-surface: #f8fafc;
  --color-surface-alt: #eef3f6;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
}

html {
  scroll-behavior: smooth;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--color-ink);
  background: #ffffff;
}

h1,
h2,
h3,
.font-display {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

/* Reserve space for elements that animate in, avoiding CLS */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.reveal.is-ready {
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Hero background: brand gradient + dot texture, no photo.
   All layers live on one background-image so they don't clobber each other
   the way two separate classes each setting background-image would. */
.hero-gradient {
  background-image:
    radial-gradient(rgba(34, 211, 238, 0.35) 1px, transparent 1.5px),
    radial-gradient(ellipse 90% 70% at 82% 20%, rgba(34, 211, 238, 0.16), transparent 60%),
    linear-gradient(160deg, var(--color-primary-darker) 0%, #0a3d54 55%, var(--color-primary-dark) 100%);
  background-size: 22px 22px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.min-h-hero {
  min-height: 100svh;
}

/* Sticky nav: transparent -> solid on scroll */
.nav-shell {
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.nav-shell.is-scrolled {
  background-color: rgba(7, 46, 63, 0.96);
  box-shadow: 0 8px 24px -12px rgba(7, 46, 63, 0.5);
  backdrop-filter: blur(8px);
}

/* Mobile nav panel */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
  background-color: rgba(7, 46, 63, 0.98);
  backdrop-filter: blur(6px);
}
.mobile-nav.is-open {
  max-height: 480px;
}

/* Feature / benefit cards */
.card {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(18, 97, 135, 0.35);
  border-color: var(--color-primary);
}

.icon-badge {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.card:hover .icon-badge,
.card:focus-within .icon-badge {
  background-color: var(--color-primary);
  color: #fff;
}

/* Pulsing GPS dot used as decorative motif */
@keyframes gps-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.gps-dot {
  animation: gps-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gps-dot { animation: none; }
}

/* Hero illustration: expanding radar rings around the signal pin */
@keyframes radar-ping {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.radar-ring {
  transform-origin: center;
  animation: radar-ping 3s var(--ease-out) infinite;
}
.radar-ring--delay {
  animation-delay: 1s;
}
@media (prefers-reduced-motion: reduce) {
  .radar-ring { animation: none; opacity: 0.35; }
}

/* Hero illustration: route line drawing in on load */
@keyframes dash-flow {
  to { stroke-dashoffset: -200; }
}
.route-line {
  animation: dash-flow 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .route-line { animation: none; }
}

/* Hero illustration: gentle floating drift for stop markers */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-marker {
  animation: float-soft 4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .float-marker { animation: none; }
}

/* Scroll cue */
@keyframes scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}
.scroll-cue {
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* Number counters — tabular figures to avoid layout shift while counting */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Network / map motif in dark sections */
.network-dots {
  background-image: radial-gradient(rgba(34, 211, 238, 0.35) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

.text-balance {
  text-wrap: balance;
}

/* Focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Image lightbox modal (used on service detail pages) */
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 46, 63, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.image-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.image-modal__dialog {
  position: relative;
  width: min(1100px, 96vw);
}

.image-modal__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86svh;
  object-fit: contain;
  border-radius: 0.85rem;
  box-shadow: 0 24px 54px -24px rgba(0, 0, 0, 0.65);
}

.image-modal__caption {
  margin-top: 0.6rem;
  color: #e2edf2;
  font-size: 0.95rem;
  text-align: center;
}

.image-modal__close {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #072e3f;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

body.modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .image-modal {
    transition: none;
  }
}