/*
  Attraksion - Hərəkətli lunapark banneri
  "Əlaqə" CTA bölməsi ilə footer arasında istifadə olunur.
  Bütün selektorlar .lunapark-banner daxilində izolyasiya edilib,
  keyframe adları şablonla toqquşmamaq üçün lp- prefiksi daşıyır.
*/

.lunapark-banner{
  --coral:      #FF7162;
  --coral-dark: #E05545;
  --coral-soft: #FBC7BD;
  --coral-tint: #FDE0DA;
  --coral-pale: #FEEDE9;
  --navy:       #2B3C6B;
  --navy-mid:   #3D5490;
  --navy-soft:  #C9D3EC;
  --navy-pale:  #E9EEF9;
  --cream:      #FFFBF8;

  position: relative;
  display: block;
  background: #9321EB;
  overflow: hidden;
}

.lunapark-banner .banner{
  width: 100%;
}

.lunapark-banner svg{
  display: block;
  width: 100%;
  height: auto;
}

/* ================= ANİMASİYALAR ================= */
@keyframes lp-spin    { to { transform: rotate(360deg); } }
@keyframes lp-spinRev { to { transform: rotate(-360deg); } }

@keyframes lp-bob   { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }
@keyframes lp-flag  { 0%,100%{ transform: rotate(-5deg);} 50%{ transform: rotate(9deg);} }
@keyframes lp-rock  { 0%,100%{ transform: rotate(-12deg);} 50%{ transform: rotate(12deg);} }
@keyframes lp-swing { 0%,100%{ transform: rotate(-26deg);} 50%{ transform: rotate(26deg);} }
@keyframes lp-sway  { 0%,100%{ transform: rotate(-8deg);} 50%{ transform: rotate(8deg);} }
@keyframes lp-blink { 0%,100%{ opacity:1;} 50%{ opacity:.1;} }
@keyframes lp-floaty{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(6px,-12px);} }
@keyframes lp-drift { to { transform: translateX(70px);} }

/* qüllə: yavaş qalx — dayan — sərbəst düşmə — yüngül sıçrayış */
@keyframes lp-towerRide{
  0%,6%   { transform: translateY(0); animation-timing-function: ease-in-out; }
  38%     { transform: translateY(-168px); }
  52%     { transform: translateY(-168px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  59%     { transform: translateY(0);      animation-timing-function: ease-out; }
  65%     { transform: translateY(-24px);  animation-timing-function: ease-in; }
  71%,100%{ transform: translateY(0); }
}

@keyframes lp-driveA{ to { transform: translateX(52px);} }
@keyframes lp-driveB{ to { transform: translateX(-52px);} }

/* qatar relslə gedir */
@keyframes lp-ride{ to { offset-distance:100%; } }

/* ================= ELEMENTLƏR ================= */
.lunapark-banner .wheel   { transform-origin: 340px 205px;  animation: lp-spin 16s linear infinite; }
.lunapark-banner .gondola { transform-box: fill-box; transform-origin: top center;
                            animation: lp-spinRev 16s linear infinite; }

.lunapark-banner .star-wheel{ transform-origin: 1520px 255px; animation: lp-spin 22s linear infinite; }

.lunapark-banner .horse-a { animation: lp-bob 1.5s ease-in-out infinite; }
.lunapark-banner .horse-b { animation: lp-bob 1.5s ease-in-out infinite; animation-delay:-.75s; }
.lunapark-banner .flag    { transform-box: fill-box; transform-origin: left bottom;
                            animation: lp-flag 1.8s ease-in-out infinite; }

.lunapark-banner .tower-car  { animation: lp-towerRide 7.5s infinite; }
.lunapark-banner .tower-light{ animation: lp-blink 1s steps(2,end) infinite; }

.lunapark-banner .plane-arm { transform-origin: 760px 205px; animation: lp-rock 3.2s ease-in-out infinite; }

.lunapark-banner .ship      { transform-origin: 1160px 238px; animation: lp-swing 2.6s ease-in-out infinite; }

.lunapark-banner .chairs    { transform-origin: 1360px 184px; animation: lp-sway 3.4s ease-in-out infinite; }

.lunapark-banner .car-a { animation: lp-driveA 2.8s ease-in-out infinite alternate; }
.lunapark-banner .car-b { animation: lp-driveB 2.8s ease-in-out infinite alternate; animation-delay:-.9s; }
.lunapark-banner .spark { animation: lp-blink .5s steps(2,end) infinite; }
.lunapark-banner .spark.s2{ animation-delay:-.25s; }

.lunapark-banner .balloon { animation: lp-floaty 5s ease-in-out infinite; }
.lunapark-banner .cloud-a { animation: lp-drift 26s ease-in-out infinite alternate; }
.lunapark-banner .cloud-b { animation: lp-drift 34s ease-in-out infinite alternate-reverse; }

.lunapark-banner .coaster-car{
  offset-path: path("M -40 330 C 100 60 240 60 380 240 C 460 340 540 345 640 280 C 740 215 800 120 920 130 C 1040 140 1080 305 1200 310 C 1310 314 1330 100 1460 90 C 1550 84 1610 190 1660 230");
  offset-rotate: auto;
  animation: lp-ride 15s linear infinite;
}
.lunapark-banner .coaster-car.c2{ animation-delay:-.42s; }
.lunapark-banner .coaster-car.c3{ animation-delay:-.84s; }

@media (prefers-reduced-motion: reduce){
  .lunapark-banner *{ animation: none !important; }
}