/* Welcome + вход. Мобайл = онбординг-карусель на весь экран (порт iOS).
   Десктоп = 2/3 витрина-карусель + 1/3 форма входа. */

.wc {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---- carousel panel ---- */
.wc-carousel {
  --tile-bg: var(--chip-bg);
  --s-ink: var(--ink);
  --s-sub: var(--sub);
  --s-icon: var(--accent);
  --s-dot: var(--ph);
  --s-dot-on: var(--accent);
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.wc-top {
  display: flex;
  align-items: center;
  padding: 18px 20px 0;
  min-height: 44px;
}
.wc-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--s-ink); }
.wc-brand .emblem { width: 30px; height: 30px; font-size: 13px; border-radius: 10px; }
.wc-skip {
  margin-left: auto; background: none; border: 0; color: var(--s-sub);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}

.wc-track { flex: 1; position: relative; }
.wc-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 32px; gap: 4px;
  opacity: 0; transform: translateX(20px);
  transition: opacity .4s ease, transform .4s ease; pointer-events: none;
}
.wc-slide.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .wc-slide { transition: opacity .2s linear; transform: none; }
}

.wc-tile {
  width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center;
  background: var(--tile-bg); color: var(--s-icon); margin-bottom: 10px;
}
.wc-tile svg { width: 42px; height: 42px; }
.wc-emblem {
  width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 30px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-end));
  box-shadow: 0 10px 22px rgba(24, 49, 45, .28);
}
.wc-slide h2 { font-size: 24px; font-weight: 800; margin: 6px 0 2px; color: var(--s-ink); letter-spacing: -.01em; }
.wc-slide p { font-size: 15px; color: var(--s-sub); margin: 0; max-width: 30ch; line-height: 1.4; }

.wc-dots { display: flex; gap: 7px; justify-content: center; padding: 10px 0; }
.wc-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--s-dot);
  border: 0; padding: 0; cursor: pointer; transition: width .3s ease, background .3s ease;
}
.wc-dot.on { width: 22px; background: var(--s-dot-on); }

.wc-cta { padding: 6px 20px 26px; }

/* ---- auth panel: hidden on mobile (carousel routes to /login) ---- */
.wc-auth { display: none; }

/* ---- desktop split: 2/3 showcase + 1/3 sign-in ---- */
@media (min-width: 860px) {
  .wc { flex-direction: row; height: 100svh; }
  .wc-carousel {
    flex: 0 0 66.667%;
    background: linear-gradient(160deg, #1c3b34, #0f2620);
    --tile-bg: rgba(255, 255, 255, .12);
    --s-ink: #ffffff;
    --s-sub: rgba(255, 255, 255, .72);
    --s-icon: #ffffff;
    --s-dot: rgba(255, 255, 255, .4);
    --s-dot-on: #ffffff;
  }
  .wc-emblem { background: rgba(255, 255, 255, .14); box-shadow: none; }
  .wc-skip, .wc-cta { display: none; } /* auth is always visible on the right */
  .wc-auth {
    flex: 0 0 33.333%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px 44px; background: var(--bg); overflow-y: auto;
  }
  .wc-auth .auth-inner { width: 100%; max-width: 320px; margin: 0 auto; }
}