/* Surface styling is shared in home-extra.css. */
/* Decorative language reel. Item dimensions are also measured by language-rail.js. */
.zero-home .lang-rail {
  position: absolute;
  top: 150px;
  right: var(--gutter);
  width: 168px;
  height: 264px;
  padding: 10px 12px;
  overflow: hidden;
  border-radius: var(--radius-card);
  font-family: var(--sans);
  pointer-events: none;
}

.lang-rail__label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-3);
  font: 400 10px/16px var(--mono);
  letter-spacing: .12em;
}

.lang-rail__item,
.lang-rail__pinned {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  padding: 6px 10px;
  color: var(--ink-3);
  opacity: .55;
  transition: opacity .7s var(--ease);
}

.lang-rail__pinned { height: 38px; margin-bottom: 12px; }
.lang-rail__name { font: 550 15px/20px var(--sans); letter-spacing: -.01em; }
.lang-rail__native { color: var(--ink-3); font-size: 13px; line-height: 22px; align-self: flex-start; }
.lang-rail__window {
  height: 168px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
}
.lang-rail__track {
  display: flex;
  flex-direction: column;
  transform: translateY(var(--rail-shift, 0px));
  transition: transform .7s var(--ease);
}
.lang-rail__track.is-jump { transition: none; }
.lang-rail__item::before,
.lang-rail__pinned::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--amber);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.lang-rail .is-active { opacity: 1; }
.lang-rail .is-active .lang-rail__name { color: var(--ink); }
.lang-rail .is-active::before { opacity: 1; }
.lang-rail__next {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 7px;
  color: var(--ink-3);
  font: 400 8px/12px var(--mono);
  letter-spacing: .06em;
}
.lang-rail .is-next .lang-rail__next { display: block; }
.lang-rail__progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}
.lang-rail .is-active .lang-rail__progress {
  animation: rail-progress var(--rail-ms, 4000ms) linear forwards;
}
@keyframes rail-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (min-width: 1101px) {
  .zero-home .lang-rail { width: 200px; height: 300px; }
  .lang-rail__label { display: flex; align-items: center; gap: 8px; }
  .lang-rail__label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    animation: rail-pulse 2.4s ease-in-out infinite;
  }
  .lang-rail__item,
  .lang-rail__pinned {
    opacity: .5;
    transition: opacity .7s var(--ease), transform .5s var(--ease);
  }
  .lang-rail__pinned { height: 56px; }
  .lang-rail__name { font-size: 15px; color: var(--ink-3); }
  .lang-rail__native { font-size: 12px; }
  .lang-rail .is-active { opacity: 1; transform: translateX(4px); }
  .lang-rail .is-active .lang-rail__name {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.02em;
  }
  .lang-rail .is-active .lang-rail__native {
    font-size: 15px;
    color: var(--amber-ink);
    opacity: 1;
  }
  .lang-rail__item::before,
  .lang-rail__pinned::before { top: 0; bottom: 0; width: 3px; }
  .lang-rail__progress { left: 0; right: 0; height: 2px; bottom: 0; }
  .lang-rail__next { font-size: 9px; letter-spacing: .14em; color: var(--amber-ink); }
}

@media (min-width: 1101px) and (max-height: 820px) {
  .zero-home .lang-rail { height: 240px; }
  .lang-rail__window { height: 126px; }
}

@keyframes rail-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (max-width: 1100px) {
  /* The root is appended by JS; flex order places it directly after the metadata. */
  .zero-home .hero__meta { order: 0; }
  .zero-home .hero__content { order: 2; }
  .zero-home .hero__audit { order: 3; }
  .zero-home .hero__scroll { order: 4; }
  .zero-home .lang-rail {
    position: relative;
    top: auto;
    right: auto;
    order: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 8px;
    margin-bottom: 28px;
    flex-shrink: 0;
    min-width: 0;
  }
  .lang-rail__label { display: none; }
  .lang-rail__pinned { width: 88px; height: 42px; margin: 0; border-right: 1px solid var(--line); }
  .lang-rail__window {
    flex: 1;
    min-width: 0;
    height: 42px;
    mask-image: linear-gradient(to right, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
  }
  .lang-rail__track { flex-direction: row; gap: 8px; transform: translateX(var(--rail-shift, 0px)); }
  .lang-rail__item { width: 136px; height: 42px; }
  .lang-rail__native { display: none; }
  .lang-rail .is-active .lang-rail__name { font-size: 15px; font-weight: 600; color: var(--ink); }
  .lang-rail__next { right: 8px; bottom: 3px; font-size: 7px; line-height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-rail { display: none; }
  .zero-home .lang-rail { display: none; }
  .lang-rail__track, .lang-rail__item, .lang-rail__pinned,
  .lang-rail__item::before, .lang-rail__pinned::before { transition: none; }
  .lang-rail .is-active .lang-rail__progress { animation: none; }
  .lang-rail__label::before { animation: none; }
}