/* 00 · Пролог — курс про Євгена Чикаленка — стилі сторінки (специфічне; спільне в common.css) */
.skipQ{margin-top:26px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:#A3A1A8;cursor:pointer;border-bottom:1px dotted currentColor;transition:color .25s}.skipQ:hover{color:#F7A23B}
.night{background:linear-gradient(180deg,#1E1D21 0,#141317 160px,#141317 calc(100% - 160px),#1E1D21 100%)}
.scene{display:flex;flex-direction:column;gap:72px;margin-top:64px}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.row.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.win{position:relative;aspect-ratio:16/10;box-sizing:border-box;border-radius:46px;border:2px solid rgba(255,255,255,.2);padding:11px;background:#121115;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.pane{position:relative;height:100%;box-sizing:border-box;border-radius:35px;border:1.5px solid rgba(255,255,255,.1);overflow:hidden;background:#19181C}
.pano{position:absolute;left:0;top:0;height:100%;aspect-ratio:12192/724;background:url(../assets/img/train-window-panorama.jpg) 0 0/50% 100% repeat-x;animation:panoGo 46s linear infinite}
.pane::before{content:'';position:absolute;z-index:1;left:0;right:0;top:24%;height:3px;background:rgba(18,17,21,.55)}
.pane::after{content:'';position:absolute;z-index:1;inset:0;box-shadow:inset 0 0 40px rgba(0,0,0,.45);background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 46%)}
.win.hot{aspect-ratio:auto;border-color:rgba(247,162,59,.55)}
.win.hot .pane{background:#F7A23B;animation:none;color:#141416;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:64px 48px;text-align:center}
.win.hot .pane::before{background:rgba(20,20,22,.14)}
.sym{font-size:84px;line-height:.8;color:#F7A23B}
.beat{display:flex;flex-direction:column;gap:18px}
.beatT{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.36;font-weight:600}
.tk{position:relative;flex:1;display:flex;min-height:180px;box-sizing:border-box;border:0;border-radius:16px;padding:0;background:#F1E7D3 url(../assets/svg/pattern-lattice.svg) 0 0/240px 60px;color:#1E1D21;font:inherit;text-align:left;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .3s,opacity .3s,outline-color .3s}
.tk:hover{transform:translateY(-4px) rotate(-.6deg)}
.tk::before,.tk::after{content:'';position:absolute;left:84px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#1E1D21}
.tk::before{top:-12px}.tk::after{bottom:-12px}
.tkS{width:84px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:2px dashed rgba(30,29,33,.3);font-size:54px;line-height:1;color:#B5651A}
.tkB{padding:24px 24px 24px 26px;display:flex;align-items:center;font-size:clamp(18px,1.55vw,21px);line-height:1.4}
.punch{position:absolute;right:20px;top:20px;width:30px;height:30px;border-radius:50%;background:#1E1D21;box-shadow:inset 0 3px 5px rgba(0,0,0,.7);animation:punch .5s cubic-bezier(.3,1.7,.5,1) both}
.mapF{background:#F4EEE2;box-shadow:0 30px 70px rgba(30,29,33,.2)}
.mapPin{position:relative;view-timeline:--map block;view-timeline-inset:96px 0px}
.mapStick{position:relative}
.mapC{position:relative;width:100%;aspect-ratio:900/613;overflow:hidden}
.mapSpace{height:0}
@media (max-height: 2000px) and (min-width: 701px){.mapSpace{height:560px}.mapStick{position:sticky;top:88px;max-width:min(100%,calc((100vh - 136px) * 1.468 + 40px));margin:0 auto}}
.mp{position:absolute;display:flex;align-items:center;gap:8px;height:44px;border:0;background:none;font:inherit;font-size:15px;cursor:pointer;white-space:nowrap;color:#1E1D21}
.mp:hover .mpl{text-decoration:underline;text-underline-offset:4px}
.mpDot{width:15px;height:15px;flex-shrink:0;box-sizing:border-box;border-radius:50%;border:2.5px solid #1E1D21}
.mlist{display:none;flex-direction:column;margin-top:18px;border-top:1px solid rgba(30,29,33,.15)}
.mli{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:52px;padding:13px 0;border:0;border-bottom:1px solid rgba(30,29,33,.15);background:none;font:inherit;text-align:left;color:#1E1D21;cursor:pointer}
.mb image{pointer-events:none}
.cities{position:absolute;right:34px;top:34px;width:min(330px,42%);height:112px;pointer-events:none}
.cityC{position:absolute;left:0;right:0;top:0;box-sizing:border-box;border-radius:18px;background:#1E1D21;color:#F5F3EE;padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:0 20px 40px rgba(30,29,33,.3)}
@keyframes panoGo{to{translate:-50% 0}}
@keyframes dotOn{0%{background-color:#F4EEE2;scale:1}6%,94%{background-color:#F7A23B;scale:1.3}100%{background-color:#F4EEE2;scale:1}}
@keyframes dotOnL{0%{background-color:#F4EEE2;scale:1}6%,100%{background-color:#F7A23B;scale:1.3}}
@keyframes cardOn{0%{opacity:0;translate:0 10px}6%,94%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -10px}}
@keyframes cardOnL{0%{opacity:0;translate:0 10px}6%,100%{opacity:1;translate:0 0}}
@keyframes punch{0%{scale:0}60%{scale:1.3}100%{scale:1}}
@keyframes ringP{from{stroke-dashoffset:.999}to{stroke-dashoffset:.9}}
@keyframes sail{from{offset-distance:0%}to{offset-distance:100%}}
.ringT{view-timeline-name:--ring;view-timeline-axis:block;view-timeline-inset:0px 120px}
.orbit{transform-box:view-box;transform-origin:50% 50%;animation:spin 16s linear infinite}
@supports (offset-path: path("M0 0")){.mb{transform:none;transform-box:fill-box;offset-path:path("M368 363 Q374.8 420.0 427 444 Q431.7 353.0 502 295 Q621.0 278.8 696 185 Q551.1 212.6 417 151 Q440.3 204.6 496 187 Q298.6 239.1 99 196");offset-rotate:0deg;offset-anchor:50% 85%;transition:offset-distance 1.8s cubic-bezier(.45,0,.2,1)}}
@supports (animation-timeline: view()){
.arcA{stroke-dasharray:1;animation:drawp linear both;animation-timeline:--ring;animation-range:entry 0% entry 45%}
.arcB{stroke-dasharray:1;animation:drawp linear both;animation-timeline:--ring;animation-range:entry 30% entry 75%}
.arcC{stroke-dasharray:1;animation:drawp linear both;animation-timeline:--ring;animation-range:entry 55% entry 100%}
.ringP{animation:ringP linear both;animation-timeline:scroll(root)}
@media (max-height: 2000px){
.sm .mpDot{animation:dotOn linear both;animation-timeline:--map}
.cityC{animation:cardOn linear both;animation-timeline:--map}
}
}
@supports (animation-timeline: view()) and (offset-path: path("M0 0")){@media (max-height: 2000px){.mbS{animation:sail linear both;animation-timeline:--map;animation-range:contain 0% contain 100%}}}
@media (max-width: 800px){.row,.row.rev{grid-template-columns:1fr;gap:26px}.row.rev .beat{order:2}.win{border-radius:30px;padding:8px}.pane{border-radius:23px}.scene{gap:52px}.win.hot .pane{padding:40px 24px}}
@media (max-width: 700px){.cities{position:relative;right:auto;top:auto;width:auto;margin-top:14px;height:104px}.tkS{width:64px;font-size:44px}.tk::before,.tk::after{left:64px}.mapC{min-width:0}.mpl{display:none}.selD{display:none !important}.mlist{display:flex}.mb image{width:44px}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}