/* VOLK motion: slot type, odometer, comet paths, magnetic type. No libraries. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Slot type: each new word arrives with a different letter animation ── */
.slot { display: inline-block; }
/* The rotating line never wraps; without this the hero grid column would grow to fit it
   instead of letting the script scale the headline down. */
.hero-content { min-width: 0; }
.slot-reel {
  display: inline-grid;
  padding: .12em 0;
  margin: -.12em 0;
  vertical-align: bottom;
  clip-path: inset(0 -1.5em);   /* vertical mask only; letters may sweep in from the sides */
  transition: width .55s cubic-bezier(.7, 0, .2, 1);
}
.slot-word { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
.slot-char { display: inline-block; }

/* ── Odometer: stat digits roll into place ─────────────────────── */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo-digit { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.8s cubic-bezier(.16, .84, .24, 1);
}
.odo-strip > span { height: 1em; line-height: 1; }

/* ── Comet paths: one engineering core, five sectors ───────────── */
.comet-map {
  position: relative;
  display: grid;
  grid-template-columns: auto clamp(80px, 14vw, 170px) auto;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 0;
}
.comet-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.comet-track {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 1.5;
  transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1);
}
.comet-track { transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1), stroke .35s, stroke-opacity .35s; }
.comet-track.is-lit { stroke: var(--accent); stroke-opacity: .55; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1), stroke .1s, stroke-opacity .1s; }
.comet-tail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .45;
}
.comet-core {
  fill: none;
  stroke: #dcfaf6;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--accent));
}
.comet-source {
  position: relative;
  z-index: 1;
  grid-column: 1;
  padding: 18px 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: linear-gradient(145deg, #16302e, #111111);
  box-shadow: 0 0 40px #6cd5c926;
}
.comet-source strong { display: block; font-size: 1.15rem; letter-spacing: .08em; color: var(--text); }
.comet-source small {
  display: block;
  margin-top: 4px;
  font: 9px 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: var(--accent);
}
.comet-map .industry-tags {
  position: relative;
  z-index: 1;
  grid-column: 3;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}
.comet-source { transition: box-shadow .4s; }
.comet-source.is-firing { animation: comet-fire .45s ease-out; }
@keyframes comet-fire { 30% { box-shadow: 0 0 0 6px #6cd5c933, 0 0 50px #6cd5c966; } }
.comet-map .industry-tag {
  position: relative;
  padding-right: 34px;
  transition: background .25s, border-color .35s, color .25s, box-shadow .35s;
}
/* Done: accent border + check badge, kept until the top-to-bottom clear-out. */
.comet-map .industry-tag.is-done { border-color: var(--accent); color: var(--text); }
.comet-map .industry-tag::after {
  content: "✓";
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  transform: scale(0);
  transition: transform .3s ease, background .25s, color .25s;
}
.comet-map .industry-tag.is-done::after { transform: scale(1); transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .25s, color .25s; }
/* Flash: the fill only blinks on impact (switches on instantly, fades out quickly). */
.comet-map .industry-tag.is-flash {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 6px 24px #6cd5c940;
  transition-duration: .06s;
}
.comet-map .industry-tag.is-flash::after { background: var(--bg); color: var(--accent); }
/* Hit: pop + ripple ring at the moment the comet lands */
.comet-map .industry-tag.is-hit { animation: comet-pop .28s cubic-bezier(.3, 1.6, .5, 1); }
.comet-map .industry-tag.is-hit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent);
  border-radius: inherit;
  pointer-events: none;
  animation: comet-ripple .45s ease-out forwards;
}
@keyframes comet-pop { 40% { transform: scale(1.08); } }
@keyframes comet-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.8); } }
@media (max-width: 520px) {
  .comet-map { grid-template-columns: auto minmax(24px, 1fr) auto; width: 100%; }
  .comet-source { padding: 12px 14px; }
  .comet-source strong { font-size: .95rem; }
  .comet-source small { display: none; }
  .comet-map .industry-tags { gap: 8px; }
  .comet-map .industry-tag { padding: 8px 30px 8px 12px; font-size: .78rem; white-space: nowrap; }
  .comet-map .industry-tag::after { right: 7px; }
}

@media (max-width: 360px) {
  .comet-map { grid-template-columns: auto minmax(14px, 1fr) auto; }
  .comet-source { padding: 10px; }
  .comet-map .industry-tag { padding: 7px 26px 7px 9px; font-size: .72rem; }
  .comet-map .industry-tag::after { right: 6px; }
}

/* ── Magnetic type: letters swell near the cursor ──────────────── */
.mag-word { display: inline-block; white-space: nowrap; }
.mag-char { display: inline-block; font-weight: 400; will-change: font-weight; }

/* ── Particle mark: dots assemble the VOLK wolf ───────────────── */
.page-header > .container { position: relative; }
.particle-mark {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 260px;
  transform: translateY(-50%);
  text-align: center;
}
.particle-mark canvas { display: block; width: 100%; aspect-ratio: 1; touch-action: pan-y; }
.particle-mark span {
  display: block;
  margin-top: 14px;
  font: 9px 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  color: var(--text-dimmed);
}
@media (max-width: 1040px) { .particle-mark { display: none; } }

/* Homepage feature: larger, beside "Engineering depth", and kept on small screens. */
.industries-strip > .container { position: relative; }
.particle-mark--feature { width: 320px; right: 6%; }
@media (max-width: 1040px) {
  .particle-mark--feature {
    display: block;
    position: static;
    width: min(260px, 100%);
    margin: 48px auto 0;
    transform: none;
  }
}

/* ── Closing intervals: each prototype narrows the estimate ────── */
.ic-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.interval-chart {
  margin: 0;
  padding: 24px 26px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.ic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font: 10px 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.ic-badge {
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.ic-badge.is-shown { opacity: 1; transform: none; }
.ic-plot { position: relative; margin-left: 150px; padding-top: 18px; }
.ic-required {
  position: absolute;
  top: 6px;
  bottom: -6px;
  border-left: 1px dashed var(--accent);
  opacity: .7;
}
.ic-required span {
  position: absolute;
  top: -6px;
  left: 6px;
  font: 9px 'JetBrains Mono', monospace;
  color: var(--accent);
  white-space: nowrap;
}
.ic-row { position: relative; height: 46px; opacity: .35; transition: opacity .4s; }
.ic-row.is-live { opacity: 1; }
.ic-label {
  position: absolute;
  right: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: right;
}
.ic-bar, .ic-dot { position: absolute; top: 50%; transition: left 1s cubic-bezier(.6, 0, .2, 1), width 1s cubic-bezier(.6, 0, .2, 1), background .4s; }
.ic-bar {
  height: 2px;
  margin-top: -1px;
  background: var(--text-dimmed);
}
.ic-bar::before, .ic-bar::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 2px;
  height: 14px;
  background: inherit;
}
.ic-bar::before { left: 0; }
.ic-bar::after { right: 0; }
.ic-dot {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface);
}
.ic-val {
  position: absolute;
  right: 0;
  top: 2px;
  font: 9px 'JetBrains Mono', monospace;
  color: var(--text-dimmed);
}
.ic-row.is-pass .ic-bar, .ic-row.is-pass .ic-dot { background: var(--accent); }
.ic-row.is-pass .ic-val { color: var(--accent); }
.ic-axis {
  position: relative;
  height: 22px;
  margin: 10px 0 0 150px;
  border-top: 1px solid var(--border);
  font: 9px 'JetBrains Mono', monospace;
  color: var(--text-dimmed);
}
.ic-axis span { position: absolute; top: 8px; transform: translateX(-50%); }
.ic-note { margin-top: 10px; font-size: .75rem; color: var(--text-dimmed); }
@media (max-width: 900px) {
  .ic-layout { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .interval-chart { padding: 20px 16px 14px; }
  .ic-head { flex-direction: column; align-items: flex-start; }
  .ic-plot, .ic-axis { margin-left: 0; }
  .ic-row { height: 58px; }
  .ic-label { right: auto; left: 0; top: 4px; transform: none; width: auto; text-align: left; font-size: .75rem; }
  .ic-bar, .ic-dot { top: 70%; }
}

/* ── Orbit depth: disciplines circle the VOLK core (hero panel) ── */
.orbit-board {
  --orbit-line: #2f5f5b;
  --orbit-link: #6cd5c9;
  overflow: hidden;
}
.orbit-board::after { display: none; }          /* replaces the old straight-trace signal */
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.orbit-ring { fill: none; stroke: var(--orbit-line); stroke-width: 1; }
.orbit-ring-inner { stroke-dasharray: 2 6; opacity: .7; }
.orbit-link {
  stroke: var(--orbit-link);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  animation: orbit-flow .9s linear infinite;
}
@keyframes orbit-flow { to { stroke-dashoffset: -11; } }
.orbit-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* Soft "sun" glow behind the logo; tinted per mode. */
.orbit-core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orbit-glow, #6cd5c940), transparent 68%);
  animation: orbit-breathe 4s ease-in-out infinite;
}
@keyframes orbit-breathe { 50% { transform: scale(1.12); opacity: .75; } }
.engineering-visual[data-mode="validation"] .orbit-board { --orbit-glow: #73c6a84d; }
.orbit-core img { width: 64px; height: auto; display: block; }
.orbit-wordmark { font-size: 14px; }
.orbit-node {
  z-index: 3;
  white-space: nowrap;
  border-radius: 4px;
  transition: border-color .3s, color .3s, box-shadow .3s;
}
.orbit-node.is-active {
  border-color: var(--orbit-link);
  color: #fff;
  box-shadow: 0 0 0 3px #6cd5c922, 0 0 22px #6cd5c955;
}
/* Fallback layout when the orbit script does not run */
.orbit-node[data-node="hardware"] { left: 14px; top: 32px; }
.orbit-node[data-node="firmware"] { right: 12px; bottom: 32px; }
.orbit-node[data-node="linux"] { left: 14px; bottom: 32px; }
.orbit-node[data-node="validation"] { right: 12px; top: 32px; }
.orbit-board.is-orbiting .orbit-node { right: auto; bottom: auto; }
.orbit-moon {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--orbit-link);
  box-shadow: 0 0 10px var(--orbit-link);
}
.orbit-ping {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 1px solid var(--orbit-link);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-ping 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes orbit-ping { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }
@media (max-width: 480px) {
  .orbit-core img { width: 50px; }
  .orbit-wordmark { font-size: 12px; }
  .orbit-node { padding: 6px; font-size: 8px; }
}

/* ── Spinning planet: client cities on a wireframe globe (stats row) ── */
.stat-item:has(.stat-globe) { position: relative; }
.stat-globe { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; pointer-events: none; }
@media (max-width: 480px) { .stat-globe { top: 8px; right: 6px; width: 44px; height: 44px; } }

/* ── Testimonials: pages of 3 / 2 / 1 cards, word flight, sliding dot indicator ── */
.testimonials-carousel.is-enhanced { max-width: var(--max-w); padding: 0 56px; }
.testimonial-stage {
  display: grid;
  grid-template-columns: repeat(var(--per, 3), minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  transition: height .45s cubic-bezier(.3, .8, .3, 1);
}
.testimonial-stage[style*="height"] { overflow: hidden; }
.is-enhanced .testimonial-card {
  display: none;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 30px 28px;
}
.is-enhanced .testimonial-slide.active { display: flex; animation: none; }
.is-enhanced .testimonial-quote { flex-grow: 1; font-size: .95rem; line-height: 1.7; margin-bottom: 22px; }
.is-enhanced .testimonial-quote::before { font-size: 3.4rem; margin-bottom: 6px; }
.is-enhanced .testimonial-author-info span { font-size: .8rem; }
.tq-word { display: inline-block; }
.testimonial-stage.is-waiting .testimonial-slide { opacity: 0; }
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.testimonial-controls .testimonial-dots { margin-top: 0; }
.is-enhanced .testimonial-nav { top: calc(50% - 32px); }
.testimonial-dots { position: relative; }
.testimonials-carousel.is-enhanced .testimonial-dot.active { background: transparent; opacity: 1; }
.testimonial-dot-indicator {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
  pointer-events: none;
  transition: left .42s cubic-bezier(.5, 0, .3, 1), top .42s;
}
.testimonial-count {
  display: flex;
  gap: .45em;
  font: 500 11px 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  color: var(--text-dimmed);
  white-space: nowrap;
}
.testimonial-play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--text-muted);
  border-radius: 50%;
  transition: color var(--transition);
}
.testimonial-play:hover { color: var(--accent); }
.testimonial-play[hidden] { display: none; }
.testimonial-play svg { width: 30px; height: 30px; overflow: visible; }
.testimonial-play circle { fill: none; stroke-width: 2; }
.tp-track { stroke: var(--border-light); }
.tp-ring { stroke: var(--accent); transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; }
.tp-pause { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tp-play { fill: currentColor; display: none; }
.testimonials-carousel:not(.is-autoplay) .tp-pause { display: none; }
.testimonials-carousel:not(.is-autoplay) .tp-play { display: block; }
.tc-window { display: inline-block; overflow: hidden; }
.tc-current { display: inline-block; color: var(--accent); }
@media (max-width: 768px) {
  .testimonials-carousel.is-enhanced { padding: 0; }
  .is-enhanced .testimonial-nav { position: static; display: grid; place-items: center; transform: none; flex-shrink: 0; }
  .testimonial-controls { gap: 14px; }
}
@media (max-width: 480px) {
  .testimonials-carousel.is-many .testimonial-dots { display: none; }
  /* Up to 10 page dots must fit on one row between the arrows. */
  .testimonial-controls { gap: 10px; }
  .is-enhanced .testimonial-dots { flex-wrap: nowrap; gap: 6px; }
  .is-enhanced .testimonial-dot,
  .testimonial-dot-indicator { width: 7px; height: 7px; }
}

/* ── Contact map: hatched world with client pins around Paris ─────────── */
.contact-section { position: relative; overflow: hidden; --map-ink: color-mix(in srgb, var(--text-muted) 20%, transparent); }
:root[data-theme="light"] .contact-section { --map-ink: color-mix(in srgb, var(--text-muted) 24%, transparent); }
.contact-section > .container { position: relative; }
/* Upper-right corner, behind the intro column (form on the left, as on a senis-style layout).
   The script sizes it and pushes the intro text down below the band of pins (initContactMap). */
.contact-map {
  position: absolute;
  top: -10px;
  right: -24px;
  width: 49%;
  aspect-ratio: 1000 / 386.1;
  z-index: 0;
  pointer-events: none;
}
.contact-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--map-ink);
  -webkit-mask: url(../assets/world-map.svg) center / contain no-repeat;
  mask: url(../assets/world-map.svg) center / contain no-repeat;
}
.contact-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.contact-section .contact-grid { position: relative; z-index: 1; }
.contact-section .contact-detail { align-items: center; }
@media (min-width: 1025px) {
  .contact-section .contact-grid { grid-template-columns: 1.6fr 1fr; }
  .contact-section .contact-form { grid-column: 1; grid-row: 1; }
  .contact-section .contact-info { grid-column: 2; grid-row: 1; max-width: 340px; }
}
.map-arc { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .4; }
.map-pin { color: var(--text-dimmed); }
.map-pin path { fill: currentColor; }
.map-pin circle.map-pin-eye { fill: var(--bg); }
.map-pin.is-home { color: var(--accent); }
.map-pin-pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; }
.map-pin-pulse.late { animation-delay: 1.2s; }
@keyframes map-pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@media (max-width: 1024px) {
  /* Too narrow for a background: the map moves above the text. */
  .contact-map { position: relative; top: auto; left: auto; width: 100%; margin: -8px 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .map-pin-pulse { animation: none; opacity: 0; } }