/* ============================================================
   TRAVEL-DNA: animierte SVG keyframes + bindings
   Extracted from uploads/Travel DNA.html
   ============================================================ */

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(38px, -46px) rotate(3deg) scale(1.04); }
  66%      { transform: translate(-26px, -28px) rotate(-2.2deg) scale(0.97); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-46px, 34px) rotate(-3.6deg) scale(1.05); }
  70%      { transform: translate(20px, 46px) rotate(2.4deg) scale(0.96); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  35%      { transform: translate(32px, 42px) rotate(2.4deg) scale(1.03); }
  65%      { transform: translate(46px, -18px) rotate(-1.8deg) scale(0.98); }
}
@keyframes drift-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-40px, -38px) rotate(-3deg) scale(0.96); }
  70%      { transform: translate(-48px, 18px) rotate(2deg) scale(1.04); }
}
@keyframes drift-e {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(48px, 22px) rotate(2.2deg) scale(1.05); }
  66%      { transform: translate(14px, -40px) rotate(-2.8deg) scale(0.96); }
}
@keyframes drift-f {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-28px, 32px) scale(1.08); }
  70%      { transform: translate(24px, -16px) scale(0.94); }
}
@keyframes drift-g {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(36px, -28px) scale(0.93); }
  70%      { transform: translate(-22px, 24px) scale(1.09); }
}
@keyframes drift-h {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-32px, 40px) rotate(-2.2deg) scale(1.05); }
  70%      { transform: translate(36px, 16px) rotate(3deg) scale(0.96); }
}
@keyframes drift-stroke-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(22px, -22px) rotate(2deg); }
}
@keyframes drift-stroke-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-20px, 18px) rotate(-2deg); }
}
@keyframes line-wave {
  0%, 100% { stroke-dashoffset: 0;   transform: translate(0, 0); }
  50%      { stroke-dashoffset: -48; transform: translate(14px, -12px); }
}
@keyframes line-wave-2 {
  0%, 100% { stroke-dashoffset: 0;  transform: translate(0, 0); }
  50%      { stroke-dashoffset: 52; transform: translate(-14px, 14px); }
}

.travel-dna {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.travel-dna .shape {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.travel-dna .line {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, stroke-dashoffset;
  stroke-dasharray: 600;
}

.travel-dna #s-triangle    { animation: drift-a 8s    ease-in-out infinite; animation-delay: -1s; }
.travel-dna #s-sage-big    { animation: drift-f 10s   ease-in-out infinite; animation-delay: -3s; }
.travel-dna #s-sand-big    { animation: drift-g 12s   ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-sage-mid    { animation: drift-b 9s    ease-in-out infinite; animation-delay: -4s; }
.travel-dna #s-sand-mid    { animation: drift-c 10.5s ease-in-out infinite; animation-delay: -1.5s; }
.travel-dna #s-terra-big   { animation: drift-d 10s   ease-in-out infinite; animation-delay: -3.5s; }
.travel-dna #s-terra-inner { animation: drift-d 9.5s  ease-in-out infinite; }
.travel-dna #s-terra-sm    { animation: drift-e 7.5s  ease-in-out infinite; animation-delay: -2.5s; }
.travel-dna #s-terra-tiny  { animation: drift-a 6.5s  ease-in-out infinite; animation-delay: -1s; }
.travel-dna #s-blob        { animation: drift-h 13s   ease-in-out infinite; animation-delay: -5s; }
.travel-dna #s-slate       { animation: drift-b 11s   ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-slate-bar   { animation: drift-c 9.5s  ease-in-out infinite; animation-delay: -4s; }
.travel-dna #s-sage-tab    { animation: drift-d 8.5s  ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-sage-bottom { animation: drift-e 12s   ease-in-out infinite; animation-delay: -3s; }

.travel-dna #strokes-a { animation: drift-stroke-1 8.5s ease-in-out infinite; animation-delay: -2s; }
.travel-dna #strokes-b { animation: drift-stroke-2 10s  ease-in-out infinite; animation-delay: -3s; }

.travel-dna #line-1 { animation: line-wave 9s ease-in-out infinite; }
.travel-dna #line-2 { animation: line-wave-2 11s ease-in-out infinite; animation-delay: -2s; }
.travel-dna #line-3 { animation: line-wave 13s ease-in-out infinite; animation-delay: -4s; }
.travel-dna #line-4 { animation: line-wave-2 10s ease-in-out infinite; animation-delay: -1s; }

.travel-dna .label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  fill: var(--tm-espresso, #3A2E22);
  text-transform: uppercase;
}
.travel-dna #lab-arch  { animation: drift-c 11s ease-in-out infinite; animation-delay: -2s; transform-box: fill-box; transform-origin: center; }
.travel-dna #lab-culin { animation: drift-b 9.5s ease-in-out infinite; animation-delay: -3s; transform-box: fill-box; transform-origin: center; }
.travel-dna #lab-mini  { animation: drift-a 12s ease-in-out infinite; animation-delay: -1s; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .travel-dna .shape,
  .travel-dna .line,
  .travel-dna .label,
  .travel-dna #strokes-a,
  .travel-dna #strokes-b,
  .travel-dna #lab-arch,
  .travel-dna #lab-culin,
  .travel-dna #lab-mini {
    animation: none !important;
  }
}