/* Filsa marketing site — hand-written styles.
 * Loads AFTER design-system.css and deliberately overrides a few of its base rules
 * (the link colour, in particular) exactly as the design export's page stylesheet did.
 *
 * Almost all layout in index.html / pricing.html is inline, matching the export
 * one-for-one. What lives here is only what an inline style cannot express:
 * hover and focus states, keyframes, the theme-dependent wordmark swap, and the
 * scroll-reveal transition.
 */

/* ---- page primitives (verbatim from the export's page stylesheet) ---- */
html, body { margin: 0; background: var(--bg-app); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
[lang="ar"], [lang="ar"] * { letter-spacing: 0 !important; }

/* ---- values the export recomputed in JS on every render ----
 * The export inlined fontStack / displayStack / headerBg into the style
 * attribute of the elements that used them. Expressing the same three values
 * as custom properties keyed off [lang] and [data-theme] resolves them in CSS,
 * so the markup carries a single stable style string and nothing has to be
 * rewritten when the language or theme flips.
 *
 * IBM Plex Sans Arabic is named first for Arabic exactly as the export names
 * it. It is NOT bundled — neither here nor in the export, which shipped only
 * Poppins and JetBrains Mono. Arabic therefore falls back to Poppins and then
 * to the system UI font, identically in both.
 */
[data-site] {
  --site-font: var(--font-sans);
  --site-display: var(--font-display);
}
[data-site][lang="ar"] {
  --site-font: 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif;
  --site-display: 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif;
}
[data-site][data-theme="dark"]  { --site-header-bg: rgba(10,10,12,0.82); }
[data-site][data-theme="light"] { --site-header-bg: rgba(247,246,242,0.86); }

@keyframes filsa-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes filsa-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes filsa-drift { 0% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-14px,0) } 100% { transform: translate3d(0,0,0) } }

/* ---- hover states (the export carried these as style-hover="…" attributes) ---- */
.nav-link { color: var(--text-secondary); transition: color .15s ease; }
.nav-link:hover { color: var(--text-primary); }

.pill-btn { transition: color .15s ease, border-color .15s ease; }
.pill-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* style-active="transform:scale(0.97)" on the signup submit */
.press:active { transform: scale(0.97); }

/* ---- selected states ----
 * The export recomputed these three colours inline for every tab and for the
 * monthly/yearly switch. They are the same on/off pair in both cases:
 *   on  = { background: var(--accent-tint), colour: var(--accent) }
 *   off = { background: transparent,        colour: var(--text-secondary) }
 * Driving them off aria-selected keeps the accessible state and the visual
 * state as one thing that cannot drift apart.
 */
.tour-tab {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tour-tab[aria-selected="true"] {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}

.period-btn {
  background: transparent;
  color: var(--text-secondary);
  transition: background .15s ease, color .15s ease;
}
.period-btn[aria-selected="true"] {
  background: var(--accent-tint);
  color: var(--accent);
}

/* ---- theme-dependent wordmark ----
 * The export toggled these with inline display values recomputed on every render.
 * Doing it in CSS is equivalent and avoids a flash before the script runs.
 */
[data-theme="dark"]  .wm-on-light { display: none; }
[data-theme="light"] .wm-on-dark  { display: none; }

/* ---- scroll reveal ----
 * The export applied the hidden state inline from componentDidMount, which
 * means a browser that never runs that code just shows the content. Putting
 * the hidden state in a plain `[data-reveal]` rule would invert that: any
 * failure to observe would leave the whole page below the hero invisible.
 *
 * So the hidden state is armed by main.js (`.reveal-armed`) only once it has
 * an IntersectionObserver in hand, and disarmed again if that observer turns
 * out never to deliver. No script, no observer, or a broken observer all end
 * the same way — everything visible.
 */
.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal-armed [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- focus visibility ----
 * Not in the export, which shipped no focus styling at all. Uses the design
 * system's own --ring token so it stays on-brand in both themes.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 999px;
}
input:focus-visible { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
  .reveal-armed [data-reveal] { opacity: 1; transform: none; }
}