/* ==========================================================================
   VEMA Engineering — reset, typography, layout primitives, RTL, motion rules
   Layout here uses CSS logical properties only (inline-start / inline-end),
   so the whole site mirrors correctly when <html dir="rtl">.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t-mid) var(--ease-inout),
              color var(--t-mid) var(--ease-inout);
}

/* Arabic needs more room to breathe than Latin at the same nominal size. */
html[lang="ar"] body {
  --fs-base: 1.0625rem;
  --lh-base: 1.9;
  --tracking-tight: 0;
  --tracking-label: 0.02em;
}
html[lang="ar"] { --font-display: 'IBM Plex Sans Arabic', 'Space Grotesk', system-ui, sans-serif; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
html[lang="ar"] :where(h1, h2, h3, h4) { line-height: 1.35; }

p { text-wrap: pretty; }

/* ---- Focus ------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- Selection --------------------------------------------------------- */
::selection { background: var(--bolt-500); color: var(--navy-900); }

/* ---- Scrollbar --------------------------------------------------------- */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { inline-size: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--sunken { background: var(--bg-sunken); }

.stack > * + * { margin-block-start: var(--sp-4); }
.stack-lg > * + * { margin-block-start: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bolt-500);
  color: var(--navy-900);
  font-weight: 600;
  border-radius: var(--r-md);
  transition: inset-block-start var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { inset-block-start: var(--sp-3); }

/* ==========================================================================
   Shared type components
   ========================================================================== */

/* The engraved traffolyte label plate VEMA screws onto its own panels:
   red plate, white uppercase, thin white keyline. Used for every eyebrow. */
.plate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3em 0.75em;
  background: var(--safety-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), var(--shadow-1);
}
html[lang="ar"] .plate { text-transform: none; }

.section-head { max-inline-size: 62ch; margin-block-end: var(--sp-7); }
.section-head h2 { font-size: var(--fs-3xl); margin-block-start: var(--sp-4); }
.section-head p  { font-size: var(--fs-lg); color: var(--text-muted); margin-block-start: var(--sp-4); }

.lede { font-size: var(--fs-lg); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }

/* A busbar rule: a conductor with terminal dots at each end. */
.busbar {
  position: relative;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--copper) 12%, var(--copper) 88%, transparent);
  opacity: 0.55;
  border: 0;
  margin-block: var(--sp-6);
}
.busbar::before, .busbar::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--copper);
  transform: translateY(-50%);
}
.busbar::before { inset-inline-start: 8%; }
.busbar::after  { inset-inline-end: 8%; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8em 1.6em;
  min-block-size: 46px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* --mx / --my are set by the magnetic-pull handler in app.js */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: background-color var(--t-fast) var(--ease-inout),
              border-color var(--t-fast) var(--ease-inout),
              color var(--t-fast) var(--ease-inout),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover  { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0); }
.btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.985); }

.btn--primary {
  --btn-bg: var(--bolt-500);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--bolt-500);
}
.btn--primary:hover { --btn-bg: var(--bolt-300); --btn-bd: var(--bolt-300); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
.btn--ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-text); background: var(--accent-quiet); }

.btn--quiet { --btn-bd: transparent; padding-inline: 0.8em; }
.btn--quiet:hover { --btn-fg: var(--accent-text); }

/* Current tracing the perimeter of a primary button on hover. */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 30%, #fff 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: 200% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.btn--primary:hover::before {
  opacity: 0.9;
  animation: trace 900ms var(--ease-inout);
}
@keyframes trace { to { background-position: -60% 0; } }

/* Spark flash from the click point — coordinates set in app.js. */
.btn .spark {
  position: absolute;
  inset-block-start: var(--spark-y, 50%);
  inset-inline-start: var(--spark-x, 50%);
  inline-size: 6px; block-size: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--bolt-300) 45%, transparent 70%);
  pointer-events: none;
  animation: spark 420ms var(--ease-out) forwards;
}
@keyframes spark {
  from { transform: scale(1); opacity: 0.95; }
  to   { transform: scale(26); opacity: 0; }
}

/* ==========================================================================
   Scroll reveals
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Safety net set by app.js if the reveal observer never reports (see watchdog). */
html.reveal-off .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   RTL adjustments
   Layout mirrors automatically via logical properties. These are the few
   things that need an explicit flip — and the list of things that must NOT.
   ========================================================================== */

[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* Never mirror: the logo, photographs, the bolt, phone numbers. */
[dir="rtl"] .logo,
[dir="rtl"] .no-flip,
[dir="rtl"] img { transform: none; }

/* Phone numbers and emails stay left-to-right even inside Arabic text. */
.ltr-num { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================================
   Reduced motion — this must genuinely switch everything off
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root { --ambient: 0; --t-fast: 1ms; --t-mid: 1ms; --t-slow: 1ms; }

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  .btn, .btn:hover, .btn:active { transform: none; }
  .btn .spark { display: none; }
}

/* Ambient loops stop when their section scrolls out of view (set by app.js). */
.is-paused, .is-paused * { animation-play-state: paused !important; }