/* Hareket katmanı. Yalnız transform/opacity kullanır.
   `html.mo` sınıfı head'deki küçük betikten gelir; "hareketi azalt" açıksa hiç eklenmez,
   o durumda aşağıdakilerin hiçbiri çalışmaz. */

/* ---- Açılış: hero ---- */
@keyframes mo-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes mo-mark{to{background-size:100% 100%}}
@keyframes mo-letter{from{translate:0 135px}}
@keyframes mo-pul{0%{scale:2.4;opacity:0}60%{scale:.9;opacity:1}100%{scale:1}}
@keyframes mo-damga{0%{scale:1.9;opacity:0}55%{scale:.94}100%{scale:1}}
@keyframes mo-nudge{50%{transform:translateX(6px)}}

.mo .hero-text > *{animation:mo-rise .85s cubic-bezier(.2,.7,.2,1) backwards}
.mo .hero-text > :nth-child(1){animation-delay:.05s}
.mo .hero-text > :nth-child(2){animation-delay:.15s}
.mo .hero-text > :nth-child(3){animation-delay:.30s}
.mo .hero-text > :nth-child(4){animation-delay:.45s}
.mo .hero-text > :nth-child(5){animation-delay:.60s}

/* "Avrupa'dan" kelimesinin altına işaretleyici çekilir */
.mo .hero h1 em{
  background:linear-gradient(transparent 62%,rgba(242,182,50,.55) 62% 90%,transparent 90%) 0 0/0% 100% no-repeat;
  animation:mo-mark .9s cubic-bezier(.6,0,.2,1) 1s forwards}

/* Zarf: mektup içinden çekilir, pul ve damga basılır */
.mo .hero-art svg > g{animation:mo-letter 1.15s cubic-bezier(.2,.8,.2,1) .35s backwards}
.mo .hero-art svg > image,
.mo .hero-art svg > use{transform-box:fill-box;transform-origin:center}
.mo .hero-art svg > image{animation:mo-pul .6s cubic-bezier(.3,1.2,.5,1) 1.3s backwards}
.mo .hero-art svg > use{animation:mo-damga .5s cubic-bezier(.3,1.1,.5,1) 1.65s backwards}

.mo .hint .ico{animation:mo-nudge 1.1s ease-in-out 1.2s 3}

/* ---- Kaydırınca belirme ---- */
[data-rv]{opacity:0;transform:translateY(26px)}
[data-rv].in{opacity:1;transform:none;
  transition:opacity .7s ease var(--d,0s),transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0s)}

/* Ülke pulları zarfa basılır gibi iner */
@keyframes mo-land{
  0%{opacity:0;transform:translateY(-38px) rotate(-6deg) scale(1.12)}
  55%{opacity:1;transform:translateY(3px) rotate(1deg) scale(.99)}
  100%{opacity:1;transform:none}}
.stamp[data-rv]{transform:none}
.stamp[data-rv].in{transition:none;animation:mo-land .85s cubic-bezier(.25,.9,.3,1) var(--d,0s) backwards}

/* Yolculuk: numara belirir, noktalı yol çizilir */
.journey li[data-rv]::before{transform:scale(.3);opacity:0}
.journey li[data-rv].in::before{transform:none;opacity:1;
  transition:transform .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .1s),opacity .3s ease calc(var(--d,0s) + .1s)}
.journey li[data-rv]::after{transform:scaleY(0);transform-origin:50% 0}
.journey li[data-rv].in::after{transform:none;transition:transform .9s ease-out calc(var(--d,0s) + .4s)}
@media (min-width:700px){
  .journey li[data-rv]::after{transform:scaleX(0);transform-origin:0 50%}
}

/* ---- Sayfa ilerleme çizgisi + kâğıt uçak ---- */
.mo-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.mo-prog i{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
.mo-fly{position:absolute;left:0;bottom:-9px;width:22px;height:22px;pointer-events:none;will-change:transform;
  opacity:0;transition:opacity .35s ease;
  filter:drop-shadow(0 2px 3px rgba(36,56,196,.25))}
.mo-fly svg{display:block;width:100%;height:100%}