/* ==========================================================================
   Motion and light: the pointer spotlight in the background, the glow that follows
   the pointer over cards, entrance animations, the green price, autofilled fields.
   Loaded after main.css on every page (and in the cabinet). Behaviour lives in js/fx.js.
   Everything moving is switched off for people who ask for reduced motion.
   ========================================================================== */

:root {
  --color-price: #15803d;
  --color-price-glow: rgba(21, 128, 61, 0.22);
  --spot-color: rgba(255, 138, 76, 0.30);
  --spot-core: rgba(255, 196, 150, 0.30);
  --glow-color: rgba(255, 122, 61, 0.24);
  --glow-edge: rgba(255, 107, 44, 0.85);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dot-rgb: 196, 88, 36;          /* the dot grid around the pointer (js/fx.js) */
  --dot-a: 214, 126, 18;           /*   top of the dome */
  --dot-b: 226, 84, 34;            /*   its slopes */
  --dot-c: 204, 46, 116;           /*   its edge */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot-rgb: 255, 176, 128;
    --dot-a: 255, 216, 140;
    --dot-b: 255, 132, 70;
    --dot-c: 255, 82, 156;
    --color-price: #4ade80;
    --color-price-glow: rgba(74, 222, 128, 0.28);
    --spot-color: rgba(255, 122, 61, 0.38);
    --spot-core: rgba(255, 190, 140, 0.30);
    --glow-color: rgba(255, 140, 80, 0.30);
    --glow-edge: rgba(255, 160, 100, 1);
  }
}
:root[data-theme="dark"] {
  --dot-rgb: 255, 176, 128;
  --dot-a: 255, 216, 140;
  --dot-b: 255, 132, 70;
  --dot-c: 255, 82, 156;
  --color-price: #4ade80;
  --color-price-glow: rgba(74, 222, 128, 0.28);
  --spot-color: rgba(255, 122, 61, 0.38);
  --spot-core: rgba(255, 190, 140, 0.30);
  --glow-color: rgba(255, 140, 80, 0.30);
  --glow-edge: rgba(255, 160, 100, 1);
}

/* ---------- Background: a small spotlight right under the pointer ---------- */
/* The old blob lagged seconds behind the pointer over half the screen. Now a smaller light
   sits right under it (fx.js moves it every frame) with a brighter core. */
.bg span.follow {
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  filter: blur(36px);
  opacity: 0;
  background: radial-gradient(circle, var(--spot-core) 0%, var(--spot-color) 38%, transparent 70%);
  transform: translate3d(var(--px, -999px), var(--py, -999px), 0) translate(-50%, -50%);
  transition: opacity 0.4s ease;
  animation: none;
  will-change: transform;
}
.fx-pointer .bg span.follow { opacity: 1; }

/* The dot grid that shows around the pointer (drawn by js/fx.js), above the colour blobs, under the content */
.fx-dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Light that follows the pointer over cards ---------- */
.card, .model, .quote, .composer {
  position: relative;
  isolation: isolate;
}
.card::before, .model::before, .quote::before, .composer::before {
  /* soft light inside the card */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-color), transparent 60%);
}
.card::after, .model::after, .quote::after, .composer::after {
  /* a lit edge near the pointer */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-edge), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx-lit::before, .fx-lit::after { opacity: 1; }

/* ---------- Entrances: things rise in when they appear ---------- */
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }

.card, .model, .quote, .msg, .ws-main > h1, .ws-main > .lead, .start-title, .composer, .chips {
  animation: fx-rise 0.55s var(--ease-out) backwards;
}
main { animation: fx-fade 0.4s ease backwards; }
/* Cards in a grid come one after another */
.models > :nth-child(2), .ws-grid > :nth-child(2), .grid > :nth-child(2) { animation-delay: 0.05s; }
.models > :nth-child(3), .ws-grid > :nth-child(3), .grid > :nth-child(3) { animation-delay: 0.10s; }
.models > :nth-child(4), .ws-grid > :nth-child(4), .grid > :nth-child(4) { animation-delay: 0.15s; }
.models > :nth-child(5), .ws-grid > :nth-child(5), .grid > :nth-child(5) { animation-delay: 0.20s; }
.models > :nth-child(6), .ws-grid > :nth-child(6), .grid > :nth-child(6) { animation-delay: 0.25s; }
.models > :nth-child(n+7), .ws-grid > :nth-child(n+7), .grid > :nth-child(n+7) { animation-delay: 0.30s; }
.ws-main > .lead, .composer { animation-delay: 0.06s; }
.chips { animation-delay: 0.12s; }

/* Sections marked data-reveal rise when scrolled into view (fx.js adds .in) */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Hover and press ---------- */
.model, .ws-grid > .card {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.model:hover, .ws-grid > .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.model-pic img { transition: opacity 0.3s ease, transform 0.6s var(--ease-out); }
.model:hover .model-pic img { transform: scale(1.04); }

.btn, .btn-sm, .send, .icon-btn, .seg button, .ws-nav button, .swatches button {
  transition: transform 0.18s var(--ease-out), background-color 0.2s ease, color 0.2s ease,
              box-shadow 0.25s ease, opacity 0.2s ease;
}
.btn:hover, .btn-sm:hover:not(:disabled), .send:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(255, 107, 44, 0.55);
}
.btn:active, .btn-sm:active:not(:disabled), .send:active:not(:disabled), .seg button:active, .swatches button:active {
  transform: scale(0.96);
}
.swatches button:hover { transform: scale(1.12); }

/* Fields: a soft accent ring on focus */
input, select, textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.16);
}
.composer:focus-within { border-color: var(--color-border-strong); }

/* Saved passwords and addresses: the browser fills them without its own yellow or blue background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill { background: var(--color-surface); color: var(--color-text); }

/* ---------- The price: green and easy to spot ---------- */
.quote-total, .price, .card-sum, .market-price {
  color: var(--color-price);
  text-shadow: 0 0 22px var(--color-price-glow);
  font-variant-numeric: tabular-nums;
}
.card-sum .meta { text-shadow: none; }
@keyframes fx-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.fx-pop { display: inline-block; animation: fx-pop 0.45s var(--ease-out); }

/* ---------- Password field: show/hide, strength meter, rules ---------- */
.pw-field { position: relative; }
.pw-field input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--color-muted);
  display: grid; place-items: center;
}
.pw-toggle:hover { background: var(--pill-bg-hover); color: var(--color-text); }
.pw-toggle::before {
  /* an eye; crossed out while the password is visible */
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pw-toggle[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.pw-meter { height: 6px; border-radius: 999px; background: var(--color-border); margin: 10px 4px 0; overflow: hidden; }
.pw-meter span {
  display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-danger);
  transition: width 0.35s var(--ease-out), background-color 0.35s ease;
}
.pw-meter[data-score="1"] span { width: 25%; background: var(--color-danger); }
.pw-meter[data-score="2"] span { width: 50%; background: #e0a32b; }
.pw-meter[data-score="3"] span { width: 75%; background: #7cc45b; }
.pw-meter[data-score="4"] span { width: 100%; background: var(--color-price); box-shadow: 0 0 12px var(--color-price-glow); }
.pw-rules { list-style: none; margin: 10px 4px 0; padding: 0; display: grid; gap: 4px; font-size: 0.88rem; color: var(--color-muted); font-weight: 600; }
.pw-rules li { display: flex; align-items: center; gap: 8px; transition: color 0.25s ease; }
.pw-rules li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong); transition: background 0.25s ease, box-shadow 0.25s ease;
}
.pw-rules li.ok { color: var(--color-text); }
.pw-rules li.ok::before { background: var(--color-price); box-shadow: 0 0 0 3px var(--color-price-glow); }

/* The top menu got a fourth link (Маркетплейс): tighter links on laptop widths, before the
   phone menu takes over at 1020px. */
@media (min-width: 1021px) and (max-width: 1240px) {
  .nav { gap: 2px; }
  .nav a { padding: 10px 14px; font-size: 16px; }
  .bar-right { gap: 10px; }
}

/* ---------- Sign-in page: "or", Google, code steps ---------- */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--color-muted); font-size: 0.88rem; font-weight: 700; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth-or[hidden] { display: none; }
.btn-google { width: 100%; gap: 12px; }
.btn-google::before {
  content: ""; width: 20px; height: 20px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-link { margin: 10px 4px 0; font-size: 0.92rem; color: var(--color-muted); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--color-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn[hidden] { display: none; }
.auth-step h2 { margin: 0 0 6px; }
.code-input { letter-spacing: 0.35em; font-size: 1.35rem !important; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

.qr { display: block; margin: 12px 0; border-radius: 12px; background: #fff; padding: 8px; }
code.secret { font-size: 0.85rem; word-break: break-all; background: var(--color-surface-2); padding: 2px 6px; border-radius: 6px; }

/* ---------- Wallet: transfer details, history ---------- */
.copy-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin: 6px 0 2px; padding: 12px 16px; border: 1.5px dashed var(--color-border-strong); border-radius: 14px;
  background: var(--color-surface-2); color: var(--color-text); font: inherit; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; cursor: pointer; text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.copy-field:hover { border-color: var(--color-accent); }
.copy-note { font-size: 0.8rem; font-weight: 700; color: var(--color-muted); white-space: nowrap; }
.topup-steps ol { margin: 10px 0; padding-left: 20px; display: grid; gap: 10px; }
.topup-steps li { font-weight: 700; }
.topup-code { color: var(--color-accent); letter-spacing: 0.08em; }
.waiting-dot::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--color-price); box-shadow: 0 0 0 0 var(--color-price-glow); animation: fx-ping 1.6s ease-out infinite;
}
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 var(--color-price-glow); } 100% { box-shadow: 0 0 0 10px transparent; } }
.tx-list { display: grid; gap: 6px; margin-top: 10px; }
.tx {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-radius: 14px; background: var(--color-surface); font-weight: 700;
}
.tx-plus { color: var(--color-price); font-variant-numeric: tabular-nums; }
.tx-minus { color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .tx { grid-template-columns: 1fr auto; } .tx .meta { grid-column: 1 / -1; order: 3; } }

/* ---------- Theme switch ---------- */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease !important;
}
.theme-btn svg { transition: transform 0.5s var(--ease-out); }
.theme-btn.spin svg { animation: theme-spin 0.55s var(--ease-out); }
@keyframes theme-spin { from { transform: rotate(-120deg) scale(0.6); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* ---------- Reduced motion: keep the light, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .bg span.follow { display: none; }
}