/* Kinetic pieces on the mountain home: department switchboard, haul line with lever, friction tags. */
.kn-board { --nn: #3DFFC1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 8px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 rgba(20,27,42,.06), 0 24px 60px -30px rgba(20,27,42,.35); }
.kn-board template { display: none; }
.kn-board__sw { display: grid; padding: 10px; }
.kn-sw { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; min-height: 62px; padding: 0 16px; background: none; border: 0; border-radius: 14px; color: rgba(20,27,42,.62); font: 500 17px/1.25 var(--px-body, var(--px-sans)); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.kn-sw + .kn-sw { margin-top: 2px; }
.kn-sw:hover { background: #F2F4F7; color: var(--px-ink); }
.kn-sw[aria-checked="true"] { background: var(--px-grey); color: var(--px-ink); }
.kn-sw__n { font-family: var(--px-mono); font-size: 11px; letter-spacing: .1em; color: rgba(20,27,42,.7); }
.kn-sw__tog { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #D5DAE2; transition: background .3s; }
.kn-sw__tog span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20,27,42,.3); transition: transform .35s cubic-bezier(.3,1.4,.4,1); }
.kn-sw[aria-checked="true"] .kn-sw__tog { background: var(--px-ink); }
.kn-sw[aria-checked="true"] .kn-sw__tog span { transform: translateX(20px); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 9px var(--nn); }
.kn-read { position: relative; display: flex; flex-direction: column; background: var(--px-ink); color: #fff; }
.kn-read::before { content: ""; position: absolute; left: clamp(24px, 3.4vw, 44px); top: 0; width: 44px; height: 3px; background: var(--nn); }
.kn-read__bar { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 22px clamp(24px, 3.4vw, 44px) 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.kn-live { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--nn); vertical-align: 1px; animation: kn-pulse 2.4s ease-in-out infinite; }
@keyframes kn-pulse { 50% { opacity: .35; } }
.kn-read__out { flex: 1; padding: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 44px); }
.kn-read__out h3 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; max-width: 17em; color: #fff; }
.kn-read__out p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 44ch; min-height: 4.8em; }
.kn-read__out.flash h3 { animation: kn-in .5s cubic-bezier(.2,.7,.2,1); }
@keyframes kn-in { from { opacity: 0; transform: translateY(8px); } }
.kn-read__foot { margin: 0; padding: 16px clamp(24px, 3.4vw, 44px) 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .kn-board { grid-template-columns: 1fr; } .kn-sw { min-height: 54px; font-size: 16px; } .kn-read__out p { min-height: 0; } }

/* the haul line */
.kn-shift { --nn: #3DFFC1; }
.kn-flow { margin: 8px 0 0; }
.kn-flow__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 0 0 22px; }
.kn-way { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--px-ink); width: min(100%, 380px); }
.kn-way button { position: relative; z-index: 1; min-height: 48px; padding: 0 14px; background: none; border: 0; border-radius: 999px; color: rgba(255,255,255,.75); font: 600 15px/1 var(--px-sans); letter-spacing: -.005em; cursor: pointer; transition: color .3s; }
.kn-way button[aria-checked="true"] { color: var(--px-ink); }
.kn-way__knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.kn-flow[data-way="1"] .kn-way__knob { transform: translateX(100%); }
.kn-flow__read { margin: 0; color: var(--px-ink); font: 600 clamp(18px, 1.9vw, 24px)/1.25 var(--px-sans); letter-spacing: -.02em; max-width: 26ch; }
.kn-flow__read small { display: block; margin-top: 6px; font: 500 12px/1.4 var(--px-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.kn-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.kn-step { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 22px 22px 24px; margin-right: 34px; background: #fff; border-radius: 18px; box-shadow: 0 1px 0 rgba(20,27,42,.06); }
.kn-step:last-child { margin-right: 0; }
.kn-step__n { margin: 0 0 14px; font: 500 11px/1 var(--px-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(20,27,42,.72); }
.kn-step__t { margin: 0 0 8px; font: 700 clamp(19px, 1.7vw, 23px)/1.1 var(--px-sans); letter-spacing: -.03em; color: var(--px-ink); }
.kn-step__txt { position: relative; min-height: 6em; }
.kn-step__was, .kn-step__now { position: absolute; inset: 0 0 auto 0; margin: 0; font-size: 16px; line-height: 1.45; transition: opacity .45s, transform .45s; }
.kn-step__was { color: rgba(20,27,42,.62); }
.kn-step__now { opacity: 0; transform: translateY(8px); color: var(--px-ink); font-weight: 600; }
.kn-step.on .kn-step__was { opacity: 0; transform: translateY(-8px); }
.kn-step.on .kn-step__now { opacity: 1; transform: none; }
/* the link to the next step: a short grey stub that stalls by hand, a solid bar with a travelling dot with Chairlift */
.kn-step:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -34px; width: 34px; height: 2px; background: rgba(20,27,42,.18); transition: background .4s; }
.kn-step:not(:last-child)::before { content: ""; position: absolute; top: 46px; right: -34px; width: 8px; height: 10px; border-radius: 4px; background: var(--px-ink); opacity: 0; z-index: 1; }
.kn-step.on:not(:last-child)::after { background: var(--px-ink); }
.kn-step.on:not(:last-child)::before { opacity: 1; animation: kn-run 1.6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes kn-run { from { transform: translateX(-26px); } to { transform: translateX(30px); } }
@media (max-width: 960px) { .kn-track { grid-template-columns: 1fr 1fr; row-gap: 34px; } .kn-step:nth-child(2) { margin-right: 0; } .kn-step:nth-child(2)::after, .kn-step:nth-child(2)::before { display: none; } }
@media (max-width: 560px) {
  .kn-track { grid-template-columns: 1fr; row-gap: 0; }
  .kn-step, .kn-step:nth-child(2) { margin: 0 0 34px; }
  .kn-step:last-child { margin-bottom: 0; }
  .kn-step__txt { min-height: 3.1em; }
  .kn-step:not(:last-child)::after, .kn-step:nth-child(2)::after { display: block; top: auto; bottom: -34px; right: auto; left: 32px; width: 2px; height: 34px; }
  .kn-step:not(:last-child)::before, .kn-step:nth-child(2)::before { display: block; top: auto; bottom: -34px; right: auto; left: 29px; width: 8px; height: 8px; }
  .kn-step.on:not(:last-child)::before { animation-name: kn-run-v; }
  @keyframes kn-run-v { from { transform: translateY(-8px); } to { transform: translateY(34px); } }
  .kn-flow__bar { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .kn-step.on:not(:last-child)::before { animation: none; opacity: 0; } .kn-way__knob, .kn-step__was, .kn-step__now { transition: none; } }

/* friction tags in the closing form */
.kn-tags { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kn-tags legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--on-ink, #fff); }
.kn-tags legend em { font-style: normal; font-weight: 400; opacity: .7; }
.kn-tag { position: relative; cursor: pointer; }
.kn-tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kn-tag span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; font-size: 14px; color: rgba(255,255,255,.88); transition: background .2s, border-color .2s, color .2s; }
.kn-tag span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); transition: background .2s, border-color .2s; }
.kn-tag:hover span { border-color: #fff; }
.kn-tag input:checked + span { background: #fff; border-color: #fff; color: var(--px-ink, #141B2A); }
.kn-tag input:checked + span::before { background: #3DFFC1; border-color: #141B2A; }
.kn-tag input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .kn-live { animation: none; } .kn-read__out.flash h3 { animation: none; } }

/* altimeter */
.kn-alt { position: fixed; left: 22px; bottom: 22px; z-index: 60; display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 6px; row-gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(20,27,42,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-family: var(--px-mono); pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.kn-alt.on { opacity: 1; transform: none; }
.kn-alt__lbl { grid-column: 1 / -1; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.kn-alt b { font-weight: 400; font-size: 22px; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kn-alt__u { font-size: 12px; color: rgba(255,255,255,.7); }
.kn-alt__bar { position: absolute; right: 10px; top: 12px; bottom: 12px; width: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.kn-alt__bar i { position: absolute; inset: 0; background: #fff; transform-origin: bottom; transform: scaleY(0); }
.kn-alt { padding-right: 26px; }
.kn-alt.top .kn-alt__state { color: #3DFFC1; }
@media (max-width: 760px) { .kn-alt { display: none; } }

/* the lift stops light up in order */
.kn-stops .pc-pkgs article { opacity: .45; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.kn-stops .pc-pkgs article:nth-child(2) { transition-delay: .12s; } .kn-stops .pc-pkgs article:nth-child(3) { transition-delay: .24s; }
.kn-stops .pc-pkgs article.kn-lit { opacity: 1; transform: none; }
.pc-pkgs article { position: relative; }
.kn-stops .pc-pkgs article::before { content: ""; position: absolute; left: 28px; top: 0; width: 44px; height: 3px; background: #3DFFC1; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1) .25s; }
.kn-stops .pc-pkgs article.kn-lit::before { transform: none; }

.kn-lede { max-width: 56ch; margin: calc(-1 * clamp(16px, 2.6vw, 34px)) 0 clamp(24px, 3vw, 36px); font-size: 19px; line-height: 1.55; color: rgba(20,27,42,.82); }
.pc-pkgs article p strong { display: block; margin-bottom: 6px; font-weight: 600; color: #fff; }

.kn-log { flex-basis: 100%; margin: 14px 0 0; font: 500 13px/1.7 var(--px-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); overflow-wrap: anywhere; }
.kn-caret { display: inline-block; width: 8px; height: 14px; margin-left: 5px; vertical-align: -2px; background: rgba(255,255,255,.8); animation: kn-blink 1s steps(1) infinite; }
@keyframes kn-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kn-caret { animation: none; } }

.kn-rail { position: relative; height: clamp(190px, 20vw, 250px); margin: 0 0 18px; background: var(--px-ink); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(20,27,42,.45); }
.kn-rail .kn-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 560px) { .kn-rail { height: 210px; border-radius: 18px; } }

/* picker strip: the six departments, the chosen one underlined */
.kn-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--px-hair-d); font: 500 12px/1.2 var(--px-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(20,27,42,.7); }
.kn-strip li { position: relative; padding-bottom: 6px; transition: color .3s; }
.kn-strip li b { font-weight: 500; margin-right: 8px; opacity: .7; }
.kn-strip li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 3px; background: var(--px-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.kn-strip li.on { color: var(--px-ink); }
.kn-strip li.on::after { transform: scaleX(1); }
@media (max-width: 760px) { .kn-strip { display: none; } }
@media (prefers-reduced-motion: reduce) { .kn-strip li::after { transition: none; } }