/* Decorative takeoff: a plane (abroad) or a jeep (Israel) crosses the screen.
   Inline SVG only. The stage never receives clicks. */

.depart-stage {
  position: fixed;
  inset: 0;
  z-index: 64;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.depart-mover {
  position: absolute;
  inset-inline-start: -80%;
  width: min(72vw, 480px);
  bottom: 14vh;
  will-change: inset-inline-start, transform;
}

.depart-tilt { width: 100%; transform-origin: 62% 58%; }

.depart-stage[data-kind="plane"] .depart-mover {
  width: min(72vw, 500px);
  bottom: 8vh;
  animation: depart-go-plane 2.2s cubic-bezier(.33, .08, .2, 1) forwards;
}

.depart-stage[data-kind="plane"] .depart-tilt {
  animation: depart-tilt 2.2s cubic-bezier(.33, .08, .2, 1) forwards;
}

html[dir="rtl"] .depart-stage[data-kind="plane"] .depart-tilt { animation-name: depart-tilt-rtl; }

.depart-stage[data-kind="jeep"] .depart-mover {
  width: min(66vw, 440px);
  bottom: 12vh;
  animation: depart-go-jeep 2.05s cubic-bezier(.22, .1, .2, 1) forwards;
}

.depart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 10px rgba(36, 28, 20, .28));
}

html[dir="rtl"] .depart-svg { transform: scaleX(-1); }

html[data-theme="dark"] .depart-svg {
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 248, 236, .45));
}

/* Horizontal travel uses inset-inline-start, so RTL and LTR share one path.
   The plane's nose-up tilt is mirrored separately. */
@keyframes depart-go-plane {
  0% { inset-inline-start: -78%; bottom: 7vh; }
  45% { inset-inline-start: 20%; bottom: 24vh; }
  100% { inset-inline-start: 118%; bottom: 68vh; }
}

@keyframes depart-tilt {
  0% { transform: rotate(1deg); }
  45% { transform: rotate(-9deg); }
  100% { transform: rotate(-16deg); }
}

@keyframes depart-tilt-rtl {
  0% { transform: rotate(-1deg); }
  45% { transform: rotate(9deg); }
  100% { transform: rotate(16deg); }
}

@keyframes depart-go-jeep {
  0% { inset-inline-start: -84%; transform: translateY(0); }
  20% { inset-inline-start: -8%; transform: translateY(-6px); }
  40% { inset-inline-start: 8%; transform: translateY(4px); }
  55% { inset-inline-start: 22%; transform: translateY(-5px); }
  78% { inset-inline-start: 62%; transform: translateY(3px); }
  100% { inset-inline-start: 120%; transform: translateY(0); }
}

.depart-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: depart-spin .42s linear infinite;
}

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

.dp-trail circle {
  fill: #8a5a32;
  animation: depart-fade 1s ease-out infinite;
}

.dp-trail circle:nth-child(2) { animation-delay: .15s; }
.dp-trail circle:nth-child(3) { animation-delay: .3s; }
.dp-trail circle:nth-child(4) { animation-delay: .45s; }

html[data-theme="dark"] .dp-trail circle { fill: #f6d7a2; }

@keyframes depart-fade {
  0% { opacity: .75; }
  100% { opacity: .05; }
}

.dp-body { fill: #f7f4ee; stroke: #241c14; stroke-width: 2.6; stroke-linejoin: round; }
.dp-tail { fill: #1c4a2e; stroke: #241c14; stroke-width: 2.4; stroke-linejoin: round; }
.dp-accent { fill: #c4843a; }
.dp-wing { fill: #e6dfd2; stroke: #241c14; stroke-width: 2.3; stroke-linejoin: round; }
.dp-engine { fill: #5c5146; stroke: #241c14; stroke-width: 2.2; }
.dp-intake { fill: #1c1814; }
.dp-window { fill: #8ec4e4; stroke: #241c14; stroke-width: 1.15; }
.dp-glass { fill: #c5e4f4; stroke: #241c14; stroke-width: 1.6; }
.dp-stripe { fill: none; stroke: #c4843a; stroke-width: 6; stroke-linecap: round; }
.dp-door { fill: #efe6d6; stroke: #241c14; stroke-width: 1.6; }
.dp-light { fill: #fff6d6; }

html[data-theme="dark"] .dp-body { fill: #f4efe6; stroke: #0e1411; }
html[data-theme="dark"] .dp-wing { fill: #d9d0c2; stroke: #0e1411; }
html[data-theme="dark"] .dp-tail { fill: #2f7a49; stroke: #0e1411; }
html[data-theme="dark"] .dp-engine { fill: #3a332c; stroke: #0e1411; }
html[data-theme="dark"] .dp-door { fill: #e7dcc8; stroke: #0e1411; }

.dj-shadow { fill: rgba(36, 28, 20, .18); }
html[data-theme="dark"] .dj-shadow { fill: rgba(0, 0, 0, .35); }

.dj-body { fill: #3f6b3c; stroke: #1a140e; stroke-width: 2.6; stroke-linejoin: round; }
.dj-cabin { fill: #e7f0e4; stroke: #1a140e; stroke-width: 2.4; stroke-linejoin: round; }
.dj-glass { fill: #9fd0e8; stroke: #1a140e; stroke-width: 1.7; stroke-linejoin: round; }
.dj-tire { fill: #241c14; }
.dj-hub { fill: #f4efe6; }
.dj-spoke { fill: none; stroke: #c4843a; stroke-width: 3.2; stroke-linecap: round; }
.dj-light { fill: #ffe7a3; stroke: #1a140e; stroke-width: 1.5; }
.dj-grille { fill: #1a140e; }
.dj-bumper { fill: #efe6d6; stroke: #1a140e; stroke-width: 1.6; }
.dj-rack { fill: none; stroke: #241c14; stroke-width: 3; stroke-linecap: round; }
.dj-stripe { fill: none; stroke: #c4843a; stroke-width: 5; stroke-linecap: round; }

html[data-theme="dark"] .dj-body { fill: #5d8f4e; stroke: #0e1411; }
html[data-theme="dark"] .dj-cabin { fill: #f4efe6; stroke: #0e1411; }
html[data-theme="dark"] .dj-glass { fill: #b7dff0; stroke: #0e1411; }
html[data-theme="dark"] .dj-bumper { fill: #efe6d6; stroke: #0e1411; }
html[data-theme="dark"] .dj-rack { stroke: #f4efe6; }
html[data-theme="dark"] .dj-hub { fill: #f7f1e6; }

.dj-dust ellipse {
  fill: #c4a574;
  transform-box: fill-box;
  transform-origin: center;
  animation: depart-puff .85s ease-out infinite;
}

.dj-dust ellipse:nth-child(2) { animation-delay: .18s; }
.dj-dust ellipse:nth-child(3) { animation-delay: .36s; }

html[data-theme="dark"] .dj-dust ellipse { fill: #e6d3b0; }

@keyframes depart-puff {
  0% { opacity: .7; transform: scale(.65); }
  100% { opacity: 0; transform: scale(1.55); }
}

.depart-cloud {
  position: absolute;
  width: min(22vw, 160px);
  opacity: .88;
}

.depart-cloud.c1 { top: 12vh; inset-inline-start: 8vw; }
.depart-cloud.c2 { top: 22vh; inset-inline-end: 10vw; width: min(16vw, 120px); opacity: .7; }

.dc-puff { fill: #fff; }
html[data-theme="dark"] .dc-puff { fill: #d5ddd6; }
html[data-theme="dark"] .depart-cloud { opacity: .55; }

@media (max-width: 640px) {
  .depart-stage[data-kind="plane"] .depart-mover { width: min(68vw, 500px); }
  .depart-stage[data-kind="jeep"] .depart-mover { width: min(72vw, 440px); bottom: 16vh; }
  .depart-cloud { display: none; }
}

@media print {
  .depart-stage { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .depart-stage { display: none !important; }
}