/* ==========================================================================
   Flight Path Animation
   Location pin (left) --> Airplane flies along a curved dashed path --> (right)
   Matches EasyBook green theme palette
   ========================================================================== */

.flight-path-wrap {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
}

.flight-path-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* the dashed curved route line */
.flight-path-line {
    fill: none;
    stroke: #A8D5B0;
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
    animation: flight-dash-move 1.4s linear infinite;
}

/* origin pin marker */
.flight-path-pin {
    transform-origin: center bottom;
    animation: flight-pin-pulse 1.8s ease-in-out infinite;
}

.flight-path-pin-dot {
    fill: #1B4332;
}

.flight-path-pin-ring {
    fill: none;
    stroke: #2E7D32;
    stroke-width: 2;
    opacity: 0;
    transform-origin: center;
    animation: flight-pin-ring 1.8s ease-out infinite;
}

/* destination marker */
.flight-path-dest {
    fill: #14432A;
}

.flight-path-dest-ring {
    fill: none;
    stroke: #2E7D32;
    stroke-width: 2;
    opacity: 0;
    transform-origin: center;
    animation: flight-pin-ring 1.8s ease-out infinite;
    animation-delay: .9s;
}

/* airplane icon that travels the curve */
.flight-path-plane {
    offset-path: path('M 20,68 C 160,-10 420,-10 610,20');
    offset-rotate: auto;
    animation: flight-plane-move 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.flight-path-plane svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 3px rgba(20,67,42,0.35));
}

.flight-path-plane .plane-body {
    fill: #2E7D32;
}

.flight-path-plane .plane-shade {
    fill: #14432A;
}

/* trailing contrail behind the plane */
.flight-path-trail {
    fill: none;
    stroke: url(#flight-trail-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 46 500;
    stroke-dashoffset: 500;
    animation: flight-trail-move 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}

@keyframes flight-dash-move {
    to { stroke-dashoffset: -28; }
}

@keyframes flight-plane-move {
    0%   { offset-distance: 0%;   opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes flight-trail-move {
    0%   { stroke-dashoffset: 500; opacity: 0; }
    6%   { opacity: .7; }
    92%  { opacity: .7; }
    100% { stroke-dashoffset: -46; opacity: 0; }
}

@keyframes flight-pin-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes flight-pin-ring {
    0%   { opacity: .6; transform: scale(.4); }
    80%  { opacity: 0;  transform: scale(1.8); }
    100% { opacity: 0;  transform: scale(1.8); }
}

/* graceful fallback for browsers without offset-path support */
@supports not (offset-path: path('M0,0')) {
    .flight-path-plane {
        left: 3%;
        top: 55%;
        animation: flight-plane-move-fallback 3.6s ease-in-out infinite;
    }
    @keyframes flight-plane-move-fallback {
        0%   { transform: translate(0, 0); opacity: 0; }
        6%   { opacity: 1; }
        50%  { transform: translate(280px, -55px); }
        92%  { opacity: 1; }
        100% { transform: translate(590px, -5px); opacity: 0; }
    }
}

@media (max-width: 767px) {
    .flight-path-wrap { max-width: 100%; height: 70px; }
    .flight-path-plane svg { width: 22px; height: 22px; }
}