/* ============================================================
   XNEXUS Smart Systems
   Style: Linear/Vercel-grade · Dark · Refined · Bilingual
   Markets: Hospitality · Healthcare · Industrial · Infrastructure
   ============================================================ */

:root {
  /* ── Surfaces ──────────────────────────────────────────────
     Phase 21 token migration: values promoted from about.css
     which was the de-facto platform palette since its load
     order (pos 5/7) caused its :root to win site-wide.     */
  --bg:           #050816;
  --bg-2:         #0B1020;
  --bg-card:      #11162A;
  --bg-card-hi:   #161B33;

  /* ── Borders (violet-tinted — approved platform identity) */
  --border:       rgba(201,60,255,0.18);
  --border-m:     rgba(201,60,255,0.28);
  --border-s:     rgba(201,60,255,0.40);

  /* ── Text ── */
  --text:         #F5F7FF;
  --text-dim:     #CBD5E1;
  --text-muted:   #9CA3AF;

  /* ── Brand (cyan-violet palette — the approved logo identity) */
  --blue:         #2ED6FF;   /* neon cyan — information layer       */
  --blue-l:       #60A5FA;   /* soft blue glow — unchanged          */
  --purple:       #8B5CF6;   /* gradient midtone — unchanged        */
  --purple-l:     #C93CFF;   /* magenta violet — interaction layer  */
  --magenta:      #D946EF;   /* pink-magenta accent — unchanged     */
  --cyan:         #22D3EE;   /* bright teal — classification layer  */
  --green:        #10B981;
  --red:          #EF4444;
  --warning:      #F59E0B;

  /* ── Glows (platform-level — retained from original core) */
  --blue-glow:    rgba(59,130,246,0.20);
  --purple-glow:  rgba(139,92,246,0.20);

  /* ── Gradients (cyan → violet — approved brand signature) */
  --grad:         linear-gradient(135deg,#2ED6FF 0%,#C93CFF 100%);
  --grad-text:    linear-gradient(90deg,#2ED6FF 0%,#8B5CF6 50%,#C93CFF 100%);
  --grad-glow:    linear-gradient(135deg,rgba(46,214,255,.12),rgba(201,60,255,.12));

  /* ── Type ── */
  --font:         'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-ar:      'Cairo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
  --font-ui:      'Inter', 'Space Grotesk', system-ui, sans-serif;   /* Phase 21: promoted — used by resources.css */

  /* ── Typography Tokens (Visual Designer, Phase 2) ──────────
     Default to the existing --font so nothing changes until the
     Visual Designer's Typography tab actually overrides one. */
  --type-font-heading: var(--font);
  --type-font-body:    var(--font);
  --type-font-button:  var(--font);

  /* ── Layout ── */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-lg:    24px;
  --nav-h:        72px;      /* Phase 21: promoted from about.css (was 68px) */
  --section-py:   120px;
  --max-w:        1280px;

  /* ── Motion ── */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Heading weight scale — Phase 16A ── */
  --h-weight-default:  600;
  --h-weight-strong:   700;
  --h-weight-display:  800;
}

/* ============================================================
   Text Animation — Animation Library (Visual Designer, Phase 3)
   ============================================================
   Defined exactly once, reused everywhere: each element just
   references a library entry by name (data-xn-anim="fade" etc.)
   plus its own timing via CSS custom properties — not a copy of
   the keyframes per element. This is the "Tokens/Presets, not
   hardcoded per element" architecture the CTO Directive asked for.

   trigger="load" (default): plays immediately on page load.
   trigger="scroll": stays hidden (opacity:0, paused) until
   public-site/js/settings-contact.js's IntersectionObserver adds
   .xn-in-view — same reveal-on-scroll pattern already used by the
   pre-existing .reveal class, generalized to support real animation
   types instead of only fade+slide-up.
   ============================================================ */
@keyframes xnFade      { from { opacity:0; } to { opacity:1; } }
@keyframes xnSlideUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes xnSlideDown { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:translateY(0); } }
@keyframes xnSlideLeft { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes xnSlideRight{ from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:translateX(0); } }
@keyframes xnZoom      { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes xnScale     { from { transform:scale(.85); } to { transform:scale(1); } }
@keyframes xnBounce    { 0% { opacity:0; transform:translateY(-16px); } 60% { opacity:1; transform:translateY(4px); } 100% { opacity:1; transform:translateY(0); } }

[data-xn-anim] {
  animation-fill-mode: both;
  animation-duration: var(--xn-dur, 600ms);
  animation-delay: var(--xn-delay, 0ms);
  animation-timing-function: var(--xn-ease, ease);
  animation-iteration-count: var(--xn-repeat, 1);
}
[data-xn-anim="none"], [data-xn-anim=""] { animation: none; }
[data-xn-anim="fade"]       { animation-name: xnFade; }
[data-xn-anim="slideUp"]    { animation-name: xnSlideUp; }
[data-xn-anim="slideDown"]  { animation-name: xnSlideDown; }
[data-xn-anim="slideLeft"]  { animation-name: xnSlideLeft; }
[data-xn-anim="slideRight"] { animation-name: xnSlideRight; }
[data-xn-anim="zoom"]       { animation-name: xnZoom; }
[data-xn-anim="scale"]      { animation-name: xnScale; }
[data-xn-anim="bounce"]     { animation-name: xnBounce; }

/* trigger="scroll": invisible + paused until .xn-in-view is added */
[data-xn-anim][data-xn-trigger="scroll"] { opacity: 0; animation-play-state: paused; }
[data-xn-anim][data-xn-trigger="scroll"].xn-in-view { animation-play-state: running; }
[data-xn-anim="none"][data-xn-trigger="scroll"],
[data-xn-anim=""][data-xn-trigger="scroll"] { opacity: 1; }

[dir="rtl"] body { font-family: var(--font-ar); }

/* ============================================================
   Hover Effects (Visual Designer, Phase 4)
   ============================================================
   Split by category, per CTO Directive — Cards / Buttons / Images
   are three independent libraries, not one general effect list.
   Pure CSS (:hover is already live/interactive — no JS trigger or
   replay logic needed, unlike Text Animation). Reuses the same
   data-xn-el markers Text Animation already placed on cards and
   buttons; images get a new data-xn-el="image" marker.
   ============================================================ */
[data-xn-hover] {
  transition: transform .25s var(--ease, ease), box-shadow .25s ease,
              background .25s ease, border-color .25s ease, filter .25s ease;
}

/* Cards */
[data-xn-el="card"][data-xn-hover="lift"]:hover   { transform: translateY(-6px); }
[data-xn-el="card"][data-xn-hover="scale"]:hover  { transform: scale(1.03); }
[data-xn-el="card"][data-xn-hover="glow"]:hover   { box-shadow: 0 0 28px rgba(46,214,255,.35); }
[data-xn-el="card"][data-xn-hover="shadow"]:hover { box-shadow: 0 14px 34px rgba(0,0,0,.4); }
[data-xn-el="card"][data-xn-hover="border"]:hover { border-color: var(--blue); }
[data-xn-el="card"][data-xn-hover="rotate"]:hover { transform: rotate(1.5deg); }

/* Buttons */
[data-xn-el="button"][data-xn-hover="scale"]:hover   { transform: scale(1.05); }
[data-xn-el="button"][data-xn-hover="glow"]:hover    { box-shadow: 0 0 20px rgba(46,214,255,.5); }
[data-xn-el="button"][data-xn-hover="outline"]:hover { background: transparent; border: 2px solid var(--blue); color: var(--blue); }
[data-xn-el="button"][data-xn-hover="fill"]:hover    { background: var(--grad); color: #fff; }

/* Images — the card/wrapper already clips overflow, so a zoomed
   image stays contained without extra markup. */
[data-xn-el="image"][data-xn-hover="zoom"]:hover       { transform: scale(1.08); }
[data-xn-el="image"][data-xn-hover="brightness"]:hover { filter: brightness(1.15); }
[data-xn-el="image"][data-xn-hover="grayscale"]        { filter: grayscale(1); }
[data-xn-el="image"][data-xn-hover="grayscale"]:hover  { filter: grayscale(0); }

/* ============================================================
   Background Studio (Visual Designer, Phase 5)
   ============================================================
   Three real surfaces for v1 — Website, Section, Footer. Hero
   Background is deliberately NOT included here: it already has its
   own working mechanism (Settings → Branding → Cover Image,
   restaurant-home.js). Building a second, overlapping system for
   the same element risked two mechanisms fighting over one
   property; unifying them is a reasonable future step, not this one.

   Each surface's value is a single CSS custom property holding a
   complete `background` value (a color, a gradient, or an image
   url() + sizing) — computed once in settings-contact.js from
   whichever "mode" (Solid/Gradient/Image) is configured, not a
   different CSS property per mode. This is what makes the
   architecture extensible to the CTO Directive's future modes
   (Video, Pattern, Overlay, Blur, Opacity, Animated Gradient,
   Particles, Glass, Mesh Gradient) without a CMS redesign: each new
   mode is just another way to *compute* the same one CSS value: */
.rh-section, .menu-section { background: var(--xn-bg-section, transparent); }

* { margin:0; padding:0; box-sizing:border-box; }
*::selection { background: var(--purple-glow); color:var(--text); }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--xn-bg-website, var(--bg));
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
@media (max-width:1024px) { body { cursor: auto; } }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(139,92,246,.4); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--purple); }

img, svg { display:block; max-width:100%; }
button { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ════════════════════════════════════════════════════════════
   XNEXUS Form Design System — Global Form Control Reset
   Ensures all native form elements follow the dark theme.
   Component-specific classes (.demo-input, .wn-input, .admin-field)
   layer on top of these base rules.
   ════════════════════════════════════════════════════════════ */

/* ── Base form controls ──────────────────────────────────── */
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  background-color: var(--bg-card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: none;
}

/* ── Select + Option (the dropdown menu itself) ──────────── */
select {
  cursor: pointer;
}
option, optgroup {
  background-color: var(--bg-card-hi);
  color: var(--text);
}
option:checked {
  background-color: rgba(139,92,246,.25);
  color: var(--text);
}
option:hover {
  background-color: rgba(46,214,255,.12);
}

/* ── Focus state ─────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: rgba(46,214,255,.4);
  box-shadow: 0 0 0 2px rgba(46,214,255,.08);
}

/* ── Placeholder ─────────────────────────────────────────── */
::placeholder {
  color: rgba(245,247,255,.2);
}
::-webkit-input-placeholder { color: rgba(245,247,255,.2); }
::-moz-placeholder { color: rgba(245,247,255,.2); opacity: 1; }

/* ── Disabled state ──────────────────────────────────────── */
input:disabled, select:disabled, textarea:disabled {
  opacity: .4;
  cursor: not-allowed;
  background-color: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.05);
}

/* ── Autofill (prevent browser yellow/white background) ──── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
  box-shadow: 0 0 0 1000px var(--bg-card) inset;
  border-color: rgba(139,92,246,.25);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Number input spinner ────────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: .3;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  opacity: .6;
}

/* ── Search cancel button ────────────────────────────────── */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* ── File input ──────────────────────────────────────────── */
input[type="file"] {
  background: transparent;
  border: none;
}
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(139,92,246,.25);
  background: rgba(139,92,246,.08);
  color: var(--purple-l);
  cursor: pointer;
  margin-right: 10px;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(139,92,246,.15);
}

/* ── Range input (sliders) ───────────────────────────────── */
input[type="range"] {
  background: transparent;
  border: none;
}

/* ── Validation: invalid state (subtle, not aggressive) ──── */
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: rgba(255,107,107,.35);
}
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus {
  box-shadow: 0 0 0 2px rgba(255,107,107,.1);
}

/* ── Checkbox + Radio accent ─────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--blue);
  background: transparent;
  border: none;
}

/* ── Custom cursor ── */
.cursor-dot, .cursor-ring {
  position:fixed; top:0; left:0; pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot {
  width:6px; height:6px;
  background: var(--purple-l);
  border-radius:50%;
  transition:transform .15s var(--ease), background .2s;
  box-shadow: 0 0 12px var(--purple);
}
.cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(167,139,250,.5);
  border-radius:50%;
  transition: width .25s var(--ease), height .25s var(--ease), border-color .2s, background .2s;
}
.cursor-ring.hover { width:56px; height:56px; border-color: var(--purple); background:rgba(139,92,246,.08); }
.cursor-dot.hover { transform:translate(-50%,-50%) scale(0); }
@media (max-width:1024px) {
  .cursor-dot, .cursor-ring { display:none; }
}

/* ── Reading progress bar ── */
.progress-bar {
  position:fixed; top:0; left:0; height:2px;
  background: var(--grad);
  z-index:1001;
  width:0%;
  box-shadow: 0 0 10px var(--purple);
}

/* ── Page loader ── */
.loader {
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease .3s, visibility 0s .9s;
}
.loader.hidden { opacity:0; visibility:hidden; }
.loader-logo {
  width:80px; height:80px;
  animation: pulse-load 1.6s ease-in-out infinite;
}
@keyframes pulse-load {
  0%,100% { opacity:.6; transform:scale(.95); }
  50% { opacity:1; transform:scale(1.05); }
}

/* ── Containers & utilities ── */
.container { max-width: var(--max-w); margin:0 auto; padding:0 32px; }
@media (max-width:768px) { .container { padding:0 20px; } }

.grad-text {
  background: var(--grad-text);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: grad-move 5s linear infinite;
}
@keyframes grad-move { to { background-position:200% center; } }

/* ── Display value — Phase 16A ─────────────────────────────
   Animated gradient + maximum weight for key numbers,
   percentages and savings values. Extracted from the
   Warranty percentage card treatment (FREE / 50% / 80%).
   Use: <span class="display-value">FREE</span>
        <span class="display-value">50%</span>
   One instance per visual cluster; never on full paragraphs.
   ─────────────────────────────────────────────────────── */
.display-value {
  display: inline-block;
  font-weight: var(--h-weight-display);          /* 800 */
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-move 5s linear infinite;
}

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--purple-l);
  margin-bottom:20px;
}
.eyebrow::before {
  content:''; width:24px; height:1px;
  background: var(--purple);
}
.eyebrow--center { justify-content: center; }  /* use on centered eyebrows; removes the need for inline style */

/* ── Reveal animation ── */
.reveal {
  opacity:0; transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }
.reveal-d5 { transition-delay:.40s; }
.reveal-d6 { transition-delay:.48s; }

@keyframes fade-up {
  from { opacity:0; transform: translateY(24px); }
  to { opacity:1; transform: translateY(0); }
}

/* ── Card entrance animation — used by sc-card, prod-card, any future card grid ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}