/* ════════════════════════════════════════════════════════════════
   MOTION LAYER — semmering.com prototype (Sprint 2, по TEARDOWN_5)
   Отдельный файл: style.css не трогаем. Только transform/opacity.
   Токены: 150/320/600 ms · ease-out-quad · спринг для карточек.
   ════════════════════════════════════════════════════════════════ */
:root{
  --mo-fast:150ms; --mo-med:320ms; --mo-slow:600ms;
  --mo-out:cubic-bezier(.22,.61,.36,1);
  --mo-spring:cubic-bezier(.34,1.45,.64,1);
}

/* ── 1. Scroll-reveal (класс вешает motion.js, IO + stagger) ── */
.mo-rv{opacity:0;transform:translateY(22px);
  transition:opacity var(--mo-slow) var(--mo-out),transform var(--mo-slow) var(--mo-out);
  transition-delay:var(--mo-d,0ms);}
.mo-rv.mo-in{opacity:1;transform:none;}

/* ── 2. Единый card-hover: lift + тень + лёгкий зум фото ── */
.exp-card{transition:transform var(--mo-med) var(--mo-spring),box-shadow var(--mo-med) var(--mo-out);overflow:hidden;}
.exp-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(20,40,60,.17);}
.exp-card .ph{transition:transform 700ms var(--mo-out);}
.exp-card:hover .ph{transform:scale(1.045);}
.heute-card{transition:transform var(--mo-med) var(--mo-out),box-shadow var(--mo-med) var(--mo-out);}
.heute-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,40,60,.14);}
.statusrow{transition:transform var(--mo-fast) var(--mo-out),filter var(--mo-fast);}
.statusrow:hover{transform:translateX(5px);filter:brightness(1.12);}
.chip{transition:transform var(--mo-fast) var(--mo-out),background var(--mo-fast);}
.chip:hover{transform:translateY(-2px);}
.btn{transition:transform var(--mo-fast) var(--mo-out),background .18s,filter .18s,box-shadow var(--mo-fast);}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98);}

/* ── 3. Hero: медленный Ken-Burns после загрузки ── */
@keyframes mo-kb{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion: no-preference){
  .hero .bg,.bp-hero .bg,.li-hero .bg{
    animation:mo-kb 16s var(--mo-out) forwards;transform-origin:center 40%;}
}

/* ── 4. Дропдауны: вход с воздухом (display→block триггерит анимацию) ── */
@keyframes mo-drop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.navitem:hover .submenu,.navitem:focus-within .submenu{animation:mo-drop .2s var(--mo-out);}
.submenu a{transition:background var(--mo-fast),color var(--mo-fast),padding-left var(--mo-fast);}
.submenu a:hover{padding-left:24px;}

/* ── 5. Живые точки статуса — пульс везде (не только .notif) ── */
.dot{box-shadow:0 0 0 0 rgba(127,224,138,.6);animation:pulse 2s infinite;}
.heute-list .stat{animation:pulse 2s infinite;}
.heute-list .stat.closed,.statusrow .closed{animation:none;}

/* ── 6. Температурные бары растут при появлении ── */
.tempcmp .tc-bar span{display:block;transform:scaleY(0);transform-origin:bottom;
  transition:transform 900ms var(--mo-out) 180ms;}
.tempcmp.mo-in .tc-bar span{transform:scaleY(1);}
.tempcmp .tc-delta{transition:opacity .5s var(--mo-out) .9s,transform .5s var(--mo-spring) .9s;opacity:0;transform:scale(.6);}
.tempcmp.mo-in .tc-delta{opacity:1;transform:none;}

/* ── 7. Схема горы: гондолы едут по тросу, спуск «течёт» ── */
@keyframes mo-cab1{from{transform:translate(-80px,40px)}to{transform:translate(140px,-70px)}}
@keyframes mo-cab2{from{transform:translate(70px,-35px)}to{transform:translate(-150px,75px)}}
.mo-schema .mo-cab1{animation:mo-cab1 11s ease-in-out infinite alternate;}
.mo-schema .mo-cab2{animation:mo-cab2 11s ease-in-out infinite alternate;}
@keyframes mo-dash{to{stroke-dashoffset:-9}}
.mo-schema .mo-flow{animation:mo-dash 1.3s linear infinite;}

/* ── 8. Season-wipe: сигнатурный переход лето↔зима ── */
.mo-wipe{position:fixed;inset:0;z-index:998;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(232,241,248,0) 0%,rgba(232,241,248,.96) 28%,#fff 50%,rgba(232,241,248,.96) 72%,rgba(232,241,248,0) 100%);
  transform:translateX(-110%);}
.mo-wipe.on{animation:mo-wipe 640ms var(--mo-out);}
@keyframes mo-wipe{0%{transform:translateX(-110%);opacity:1}45%{transform:translateX(0);opacity:1}100%{transform:translateX(110%);opacity:1}}

/* ── 9. Межстраничный crossfade (Chrome/Edge; остальные — без изменений) ── */
@view-transition{navigation:auto;}

/* ── 10. Reduced motion: всё выключается одним блоком ── */
@media (prefers-reduced-motion:reduce){
  .mo-rv{opacity:1 !important;transform:none !important;transition:none !important;}
  .tempcmp .tc-bar span,.tempcmp .tc-delta{transform:none !important;opacity:1 !important;transition:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto !important;}
}

/* ── 11. Амбиент: облака дрейфуют на схеме горы ── */
@keyframes mo-cloud{from{transform:translateX(0)}to{transform:translateX(56px)}}
.mo-schema .mo-cl1{animation:mo-cloud 26s ease-in-out infinite alternate;}
.mo-schema .mo-cl2{animation:mo-cloud 34s ease-in-out infinite alternate-reverse;}

/* ── Волна 1: wipe тоньше + сезонный вайб ── */
.mo-wipe{background:linear-gradient(105deg,rgba(232,241,248,0) 0%,rgba(232,241,248,.55) 30%,rgba(255,255,255,.7) 50%,rgba(232,241,248,.55) 70%,rgba(232,241,248,0) 100%);}
.mo-wipe.to-winter{background:linear-gradient(105deg,rgba(207,226,240,0) 0%,rgba(207,226,240,.6) 30%,rgba(240,248,255,.78) 50%,rgba(207,226,240,.6) 70%,rgba(207,226,240,0) 100%);}
.mo-wipe.to-summer{background:linear-gradient(105deg,rgba(232,244,225,0) 0%,rgba(232,244,225,.55) 30%,rgba(255,253,240,.72) 50%,rgba(232,244,225,.55) 70%,rgba(232,244,225,0) 100%);}
.mo-wipe.on{animation:mo-wipe 520ms var(--mo-out);}

/* #714 — Hero-Content: sanfte gestaffelte Entrance beim Laden (premium, smooth) */
.hero .wrap>*,.bp-hero .wrap>*,.li-hero .wrap>*{animation:heroUp .7s var(--mo-out) both}
.hero .wrap>.frische,.bp-hero .wrap>*:first-child{animation-delay:.05s}
.hero .wrap>h1,.hero .wrap>.hero-h1,.bp-hero .wrap>h1{animation-delay:.13s}
.hero .wrap>.sub,.bp-hero .wrap>.sub{animation-delay:.21s}
.hero .wrap>.cta-row,.bp-hero .wrap>.cta-row{animation-delay:.29s}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero .wrap>*,.bp-hero .wrap>*,.li-hero .wrap>*{animation:none}}