/* Timbrica animated fog footer — canvas mountains + drifting vapor.
   Mountain/fog/wordmark colors live in footer-fog.js (PAL, switched by data-theme).
   This file = layout, sky background, text, CTA, meta. Scoped to .footer--fog. */

.footer--fog{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:600px;
  /* footer-local palette — defaults are LIGHT theme */
  --ff-sky:linear-gradient(180deg,#fbfdff 0%,#eef4fc 44%,#dde8f6 74%,#cfddf1 100%);
  --ff-meta:#334155;
  --ff-divider:rgba(0,0,0,.16);
  --ff-glass:rgba(255,255,255,.55);
  --ff-border-strong:rgba(0,0,0,.3);
  background:var(--ff-sky);
}
[data-theme=dark] .footer--fog{
  --ff-sky:linear-gradient(180deg,#070c16 0%,#0b1322 42%,#101b34 72%,#1b2848 100%);
  --ff-meta:#aeb9c7;
  --ff-divider:rgba(255,255,255,.14);
  --ff-glass:rgba(255,255,255,.05);
  --ff-border-strong:rgba(255,255,255,.3);
}

.footer-fog-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}

/* Light theme: lift the footer text off the dark mountains for readability (WCAG AA ≥ 4.5:1).
   A soft top scrim keeps the text band light; the vivid mountains + fog stay below the wordmark.
   Dark theme needs nothing — light text already contrasts the dark-navy ridges. */
[data-theme=light] .footer--fog::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(248,249,252,.95) 0%,
    rgba(248,249,252,.90) 34%,
    rgba(248,249,252,.60) 52%,
    rgba(248,249,252,.22) 64%,
    rgba(248,249,252,0)   75%);
}
[data-theme=light] .ff-col a{color:#2f3e57}

.footer-fog-inner{
  position:relative;z-index:3;max-width:1120px;margin:0 auto;padding:30px 28px 22px;
  display:grid;gap:32px;
}
.footer-fog-inner.ff-cols-4{grid-template-columns:1.7fr 1fr 1fr 1.2fr}  /* RU */
.footer-fog-inner.ff-cols-3{grid-template-columns:1.7fr 1fr 1.2fr}      /* intl */

.ff-brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;text-decoration:none}
.ff-logo{width:38px;height:38px;color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.ff-logo svg{width:100%;height:100%;display:block}
.ff-brand b{font-size:18px;font-weight:700;color:var(--text-primary)}

.ff-tagline{font-size:21px;font-weight:700;color:var(--text-primary);margin-bottom:11px;letter-spacing:-.01em;max-width:330px}
.ff-desc{font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:330px;margin-bottom:20px}

.ff-cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent-gradient);color:#fff;border:0;border-radius:12px;
  padding:13px 24px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1;
  box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 32%,transparent);transition:transform .18s,box-shadow .18s}
.ff-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 38%,transparent)}
.ff-cta .ff-cta-ico{display:inline-block;transition:transform .5s ease}
.ff-cta:hover .ff-cta-ico{transform:rotate(180deg)}

/* Dyslexia toggle under «Другие горы» (left). align-items:flex-start = inline-start,
   so it hugs content like .ff-cta and sits on the right in RTL automatically. */
.ff-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px}
/* Install button + its one-line clarifier ("what does install mean here").
   Lives at the bottom of the legal column (right); margin-top separates it from the links. */
.ff-install-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:14px}
.ff-action-note{font-size:12px;line-height:1.4;color:var(--ff-meta);max-width:260px}
html.pwa-installed .ff-install-wrap{display:none}

.ff-col h4{font-size:14px;font-weight:700;color:var(--text-primary);margin:0 0 15px}
.ff-col a{display:block;font-size:14px;color:var(--text-secondary);text-decoration:none;margin-bottom:11px;transition:color .15s}
.ff-col a:hover{color:var(--accent)}
/* Token balance line above «Пополнить баланс» (RU, signed-in owner). */
.ff-token-bal{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  color:var(--text-primary);margin-bottom:11px;line-height:1.2}
.ff-token-bal__coin{font-size:15px}

.footer-fog-bottom{position:relative;z-index:3;max-width:1120px;margin:0 auto;padding:14px 28px 84px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ff-copy{font-size:13px;font-weight:700;color:var(--ff-meta);margin-bottom:5px}
.ff-copy a{color:inherit;text-decoration:none}
.ff-copy a:hover{text-decoration:underline}
.ff-legal{font-size:12px;font-weight:600;color:var(--ff-meta)}
.ff-legal a{color:inherit;text-decoration:underline}
/* the dyslexia button reuses the global .footer-a11y-btn styles from app.css */
.footer--fog .footer-a11y-btn{background:var(--ff-glass);border-color:var(--ff-divider);color:var(--ff-meta)}
.footer--fog .footer-a11y-btn:hover{color:var(--text-primary);border-color:var(--ff-border-strong)}

@media (max-width:760px){
  .footer--fog{min-height:auto}
  .footer--fog .footer-fog-inner{grid-template-columns:1fr 1fr;gap:24px;padding:44px 22px 18px}
  .footer--fog .footer-fog-inner .ff-about{grid-column:1 / -1}
  .footer-fog-bottom{padding:14px 22px 64px}
}
@media (max-width:460px){
  .footer--fog .footer-fog-inner{grid-template-columns:1fr}
}

/* RTL (Arabic) */
[dir=rtl] .footer-fog-bottom{flex-direction:row-reverse}