/* Only the Metodyka body sequence. Home and shared camera styles stay intact. */
.method-motion {
  --motion-top: 90px;
  --motion-gap: clamp(28px, 5vw, 76px);
  --motion-anchor-offset: 150px;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--motion-gap);
  padding-bottom: 40px;
}
.method-motion .motion-stage {
  top: var(--motion-top);
  width: 100%;
  max-width: min(100%, max(322px, calc((100svh - 212px) * .75)));
  aspect-ratio: auto;
  background: var(--snow);
  padding: 0;
}
.motion-frame { position: relative; width: 100%; max-width: calc((100svh - 212px) * .75); margin-inline: auto; aspect-ratio: 3 / 4; overflow: hidden; background: var(--linen); }
.motion-image { width: 100%; height: 100%; object-fit: contain; }
.motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.motion-canvas.is-ready { opacity: 1; }
.motion-point { position: absolute; width: 14px; height: 14px; border: 2px solid var(--night); border-radius: 50%; background: var(--punkt); outline: 3px solid rgb(244 239 230 / .85); transform: translate(-50%, -50%); pointer-events: none; }
.motion-point > span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); padding: 7px 10px; white-space: nowrap; background: var(--night); color: var(--on-night); font: 400 12px/1.2 var(--mono); }
.motion-point > span::after { content: ""; position: absolute; top: 50%; right: -11px; width: 11px; height: 1px; background: var(--night); }
.motion-point.is-right > span { right: auto; left: 24px; }
.motion-point.is-right > span::after { right: auto; left: -11px; }
.motion-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; font: 400 12px/1.5 var(--mono); color: var(--granite); }
.motion-skip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; white-space: nowrap; font: 400 12px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.motion-skip:hover { color: var(--ink); text-decoration-color: currentColor; }
.motion-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding-bottom: 5px; }
.motion-nav a { display: grid; place-items: center; min-height: 44px; color: var(--granite); font: 400 12px/1 var(--mono); border-bottom: 2px solid var(--line); transition: color .2s, background .2s, border-color .2s; }
.motion-nav a:hover { background: var(--linen); color: var(--ink); }
.motion-nav a[aria-current="step"] { background: var(--night); color: var(--snow); border-bottom-color: var(--punkt); }
.motion-nav a:focus-visible { outline-offset: -3px; }
.motion-nav a[aria-current="step"]:focus-visible { outline-color: var(--punkt); }
.motion-progress { height: 1px; background: var(--line); overflow: hidden; }
.motion-progress > span { display: block; width: 100%; height: 100%; background: var(--granite); transform: scaleX(0); transform-origin: left; }
.method-motion .steps { padding-top: calc(var(--peek) + 8vh); }
.method-motion .st { min-height: 62svh; padding: 28px 0 14svh; align-content: start; display: block; scroll-margin-top: var(--motion-anchor-offset); }
.method-motion .st:has(.motion-detail) { min-height: max(76svh, 540px); }
.method-motion .st-intro { min-height: 48svh; padding-top: 6svh; }
.method-motion .st-end { min-height: 52svh; padding-bottom: 24svh; }
.method-motion .st-name { font-size: 12px; }
.method-motion .st-q { font-size: clamp(25px, 2.35vw, 34px); }
.method-motion .st-intro .st-q { font-size: clamp(34px, 3.65vw, 50px); }
.method-motion .st .st-name, .method-motion .st .st-m, .method-motion .st .st-q { opacity: 1; }
.motion-detail { width: min(100%, 252px); margin: 26px 0 0; }
.motion-detail video { display: block; width: 100%; height: auto; aspect-ratio: 376 / 428; background: var(--linen); object-fit: cover; }
.motion-detail figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--granite); font: 400 12px/1.4 var(--mono); }
.motion-play { appearance: none; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 7px 4px; min-width: 44px; min-height: 44px; cursor: pointer; font: inherit; color: var(--ink); }
.motion-play:hover { border-color: var(--ink); }
.motion-detail.has-error figcaption > span::after { content: " · stopklatka"; }
.no-js .motion-play { display: none; }
.no-js .method-motion .st { min-height: 0; padding-block: 40px; }

@media (min-width: 821px) and (max-height: 760px) {
  .motion-detail { width: 205px; margin-top: 20px; }
  .method-motion .st { padding-top: 24px; }
}
@media (max-width: 820px), (max-width: 1024px) and (max-height: 600px) {
  .method-motion { --motion-top: 70px; --motion-stage-height: calc(min(32svh, 300px) + 104px); --motion-anchor-offset: calc(var(--motion-top) + var(--motion-stage-height) + 22px); }
  .method-motion.sec-cam { display: block; padding: 0 var(--gutter) 48px; }
  .method-motion .motion-stage { max-width: none; width: 100%; z-index: 3; padding: 10px 0 0; }
  .method-motion .motion-stage::before { content: ""; position: absolute; bottom: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); height: var(--motion-top); background: var(--snow); }
  .motion-frame { width: auto; max-width: none; height: min(32svh, 300px); aspect-ratio: 3 / 4; margin-inline: auto; }
  .motion-caption { font-size: 12px; }
  .method-motion .steps { padding: 0; }
  .method-motion .st { min-height: 58svh; padding: 18px 0 16svh; }
  .method-motion .st:has(.motion-detail) { min-height: max(58svh, calc(100svh - var(--motion-top) - var(--motion-stage-height) + 150px)); }
  .method-motion .st-intro { min-height: 45svh; }
  .method-motion .st-end { min-height: 53svh; padding-bottom: 25svh; }
  .method-motion .st-q { font-size: clamp(23px, 5.5vw, 30px); max-width: 27ch; }
  .method-motion .st-intro .st-q { font-size: clamp(29px, 6vw, 38px); max-width: 20ch; }
  .method-motion .st-m { font-size: 16px; }
  .motion-detail { width: min(46vw, 176px); margin: 17px 0 0; }
  .motion-point { width: 11px; height: 11px; outline-width: 2px; }
  .motion-point > span { padding: 5px 7px; right: 18px; }
  .motion-point > span::after { width: 6px; right: -6px; }
  .motion-point.is-right > span { left: 18px; }
  .motion-point.is-right > span::after { left: -6px; }
}
@media (max-width: 420px) {
  .motion-caption { font-size: 12px; letter-spacing: -.025em; }
  .motion-status { max-width: 19ch; }
}
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 600px) {
  .method-motion .motion-stage { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .motion-frame { grid-column: 1; grid-row: 1; width: 120px; height: 160px; }
  .motion-controls { grid-column: 2; grid-row: 1; }
  .method-motion .st:has(.motion-detail) { min-height: 440px; }
}
@media (max-width: 360px) {
  .motion-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .motion-frame { height: min(26svh, 250px); }
}
.no-js .method-motion .motion-stage { position: static; }
.no-js .method-motion .st, .no-js .method-motion .st:has(.motion-detail) { min-height: 0; padding-block: 35px; scroll-margin-top: 90px; }
.no-js .motion-status, .no-js .motion-progress { display: none; }
.no-js .motion-caption { justify-content: flex-end; }
.motion-point.is-above > span { left: 50%; right: auto; top: -12px; transform: translate(-50%, -100%); }
.motion-point.is-above > span::after { left: 50%; right: auto; top: 100%; width: 1px; height: 7px; }
@media (prefers-reduced-motion: reduce) {
  .motion-nav a { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-point, .motion-progress > span { transition: none; }
}