/* 01 · Степ і мова — курс про Євгена Чикаленка — стилі сторінки (специфічне; спільне в common.css) */
.plate .ros{pointer-events:none}
@media (max-width: 700px){.steppe{height:170px !important;margin:24px 0 36px !important}.steppe img{top:0 !important;height:100% !important;object-position:74% 60% !important}.plate .ros,.plate .note{display:none}}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}
.split4{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:end}
.paper .panel{background:#F8F3EA;border-color:rgba(30,29,33,.13)}
.paper .opt:hover{border-color:#1E1D21 !important}
.stage{background:#141316}
.valance{position:absolute;left:0;right:0;top:0;height:66px;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 7px,rgba(0,0,0,0) 7px 26px) 0 0/100% 42px no-repeat,linear-gradient(180deg,#8A4511,#D9822A) 0 0/100% 42px no-repeat,linear-gradient(#F7A23B,#F7A23B) 0 40px/100% 3px no-repeat,radial-gradient(circle at 50% 0,#D9822A 0 21px,rgba(0,0,0,0) 22px) 0 42px/46px 24px repeat-x;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.drape{position:absolute;top:0;width:12%;height:min(660px,78%);z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,#7E3F10 0,#C9741F 14px,#E8913A 22px,#C9741F 30px,#7E3F10 44px);filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.drL{left:0;transform-origin:0 0;clip-path:polygon(0 0,100% 0,100% 58%,34% 100%,0 100%)}
.drR{right:0;transform-origin:100% 0;clip-path:polygon(0 0,100% 0,100% 100%,66% 100%,0 58%)}
.beam{position:absolute;top:30px;width:44%;height:88%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(247,162,59,.13),rgba(247,162,59,.035) 60%,rgba(247,162,59,0) 90%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);transform-origin:50% 0;filter:blur(14px)}
.med{position:relative;width:150px;aspect-ratio:1/1;flex-shrink:0}
.med .ph{position:absolute;inset:0;border-radius:50%;padding:18px;font-size:12px}
.med .ph::before{border-radius:50%}
.flip{transition:transform .25s}
.flip:hover .face{border-color:rgba(247,162,59,.6) !important}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:#28272C;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:34px;text-align:left;transition:border-color .25s}
.face .bn{position:absolute;inset:10px;border-width:16px;pointer-events:none;opacity:.7}
.cph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.flip:hover .cph{scale:1.05}
.cshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,29,33,0) 34%,rgba(30,29,33,.78) 70%,#1E1D21 100%)}
.face .bn{z-index:1}
.back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);border-radius:14px;background:#F7A23B url(../assets/svg/pattern-lattice.svg) 0 0/240px 60px;color:#141416;display:flex;align-items:center;padding:34px;text-align:left;font-weight:600;line-height:1.4}
.note{position:absolute;width:30px;height:46px;animation:bob 3s ease-in-out infinite}
@keyframes curtL{from{scale:4.2 1}to{scale:1 1}}
@keyframes rvD{from{opacity:0;translate:0 90px;rotate:-7deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes sailX{from{left:4%}to{left:calc(96% - clamp(180px, 22vw, 300px))}}
@keyframes ringP{from{stroke-dashoffset:.9}to{stroke-dashoffset:.8}}
.staffT{view-timeline-name:--staff;view-timeline-axis:block;view-timeline-inset:0px 120px}
@supports (animation-timeline: view()){
.staff{stroke-dasharray:1;animation:drawp linear both;animation-timeline:--staff;animation-range:entry 0% entry 100%}
.curt{animation:curtL linear both;animation-timeline:view(block 0px 0px);animation-range:entry 0% entry 100%}
.dl0{animation:rvD linear both;animation-timeline:view(block 0px 80px);animation-range:entry 0% entry 100%}
.dl1{animation:rvD linear both;animation-timeline:view(block 0px 80px);animation-range:entry 20% entry 100%}
.dl2{animation:rvD linear both;animation-timeline:view(block 0px 80px);animation-range:entry 40% entry 100%}
.ringP{animation:ringP linear both;animation-timeline:scroll(root)}
@media (max-height: 2000px){.sail{animation:sailX linear both;animation-timeline:view();animation-range:cover 15% cover 85%}}
}
@media (max-width: 900px){.split,.split4{grid-template-columns:1fr}.gal{grid-template-columns:1fr 1fr}.gal .poster{grid-column:1 / -1}}
@media (max-width: 700px){.flipH{height:440px !important}.drape{width:16%}.gal{gap:16px}.med{width:120px}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}