/* =========================================================================
   Rubikal — services system
   Loaded only by the services hub and the five service pages, after
   tokens.css + main.css. Purely additive: nothing here overrides a main.css
   rule, so every other page in the tree is untouched.

   THE DEMO CONTRACT
   Each service page carries one signature demo. It is a figure first and an
   animation second:
     · every demo is a complete, labelled diagram with no animation running —
       the animated states only travel *toward* the static one, never away
       from it, so a stalled or unsupported timeline still reads;
     · movement is CSS scroll-driven (`animation-timeline`), always behind an
       @supports guard, never behind JavaScript;
     · prefers-reduced-motion kills every animation on the page;
     · nothing is pinned and nothing captures scroll — the demos live inside
       normal document flow.
   Authored with logical properties so the Arabic twins mirror for free.
   ========================================================================= */

/* ---- shared surface ----------------------------------------------------- */
.svc-hero .lead { max-inline-size: 62ch; }
.svc-lede { max-inline-size: 68ch; color: var(--muted); font-size: var(--t-lead); line-height: 1.55; }

/* ---- the hub grid ------------------------------------------------------- */
.svc-cards { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); text-decoration: none; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--card-shadow); }
.svc-card .no { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .18em; color: var(--accent-ink); }
.svc-card h3 { font-size: var(--t-h3); }
.svc-card .pos { color: var(--fg); font-weight: 500; font-size: var(--t-sm); }
.svc-card .out { color: var(--muted); font-size: var(--t-sm); }
.svc-card .proof { margin-block-start: auto; padding-block-start: var(--s-3); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.svc-card .go { color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); display: inline-flex; gap: var(--s-2); align-items: center; }
.svc-card:hover .go .arrow, .svc-card:focus-visible .go .arrow { transform: translateX(4px); }
.svc-card .go .arrow { transition: transform var(--dur) var(--ease-out); }
.svc-card.is-planner { background: linear-gradient(150deg, rgba(30,96,253,.16), rgba(30,96,253,.04)); border-color: rgba(30,96,253,.4); }

/* the teaser: a 4:3 strip of the page's own demo language, which comes alive
   under pointer *and* keyboard focus — a hover-only tell would strand anyone
   tabbing the grid. */
.teaser { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-md); background: #06080F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); direction: ltr; }
.teaser .t-live { opacity: .28; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.svc-card:hover .teaser .t-live, .svc-card:focus-visible .teaser .t-live { opacity: 1; }
.teaser .t-slide { transition: transform .5s var(--ease-out); }
.svc-card:hover .teaser .t-slide, .svc-card:focus-visible .teaser .t-slide { transform: translateX(0); }

/* ---- the signature demo ------------------------------------------------- */
.demo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #06080F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  padding: clamp(16px, 2vw, 26px);
}
.demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-block-end: var(--s-4); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #8E93AD; }
.demo-head b { color: #6C9FFF; font-weight: 400; }
.demo-head .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #F8CE3A; display: inline-block; margin-inline-end: 8px; }
.demo-svg { display: block; inline-size: 100%; block-size: auto; direction: ltr; }
.demo-note { margin-block-start: var(--s-4); font-size: var(--t-xs); color: #8E93AD; max-inline-size: 76ch; line-height: 1.6; }
figure.demo-wrap { margin: 0; }
figure.demo-wrap figcaption { margin-block-start: var(--s-3); font-size: var(--t-xs); color: var(--muted); }

/* ---- figures ------------------------------------------------------------ */
.fig-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .fig-grid.two { grid-template-columns: 1fr 1fr; } }
.fig { border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 26px); background: var(--card); }
.fig h3 { font-size: 1.06rem; font-family: var(--font-body); font-weight: 600; margin-block-end: var(--s-3); }
.fig-k { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-block-end: var(--s-3); }
.fig-rows { display: grid; gap: 0; border-block-start: 1px solid var(--border); }
.fig-rows > div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: var(--s-4); padding-block: 11px; border-block-end: 1px solid var(--border); align-items: baseline; }
.fig-rows dt { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.fig-rows dd { margin: 0; font-size: var(--t-sm); color: var(--fg); }
.fig-list { display: grid; gap: var(--s-2); }
.fig-list li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--fg); line-height: 1.55; }
.fig-list li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; margin-block-start: 9px; border: 1px solid var(--accent-ink); transform: rotate(45deg); }
.team-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.team-strip span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); }

/* ---- proof band --------------------------------------------------------- */
.proof-band { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .proof-band { grid-template-columns: repeat(3, 1fr); } }
.proof-item { border-block-start: 1px solid var(--border-strong); padding-block-start: var(--s-4); }
.proof-item .k { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.proof-item .v { display: block; margin-block-start: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--fg-strong); }
.proof-item p { margin-block-start: 8px; font-size: var(--t-sm); color: var(--muted); }
.proof-item a { color: var(--accent-ink); font-weight: 600; }

/* ---- engagement models -------------------------------------------------- */
.models-strip { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .models-strip { grid-template-columns: repeat(3, 1fr); } }
.model-cell { border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 26px); background: var(--card); }
.model-cell .k { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.model-cell h3 { font-size: 1.1rem; margin-block: var(--s-3) var(--s-2); }
.model-cell p { font-size: var(--t-sm); color: var(--muted); }
.model-cell .fit { margin-block-start: var(--s-3); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- FAQ (native disclosure, no JS) ------------------------------------- */
.svc-faq { display: grid; gap: var(--s-3); }
.svc-faq details { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.svc-faq details[open], .svc-faq details:hover { border-color: var(--border-strong); }
.svc-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: clamp(16px, 2vw, 22px); font-weight: 600; color: var(--fg-strong); }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.svc-faq .pm { position: relative; inline-size: 28px; block-size: 28px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); }
.svc-faq .pm::before, .svc-faq .pm::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 10px; block-size: 1.5px; background: var(--accent-ink); translate: -50% -50%; transition: rotate .4s var(--ease-out); }
.svc-faq .pm::after { rotate: 90deg; }
.svc-faq details[open] .pm::after { rotate: 0deg; }
.svc-faq .a { padding: 0 clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); color: var(--muted); font-size: var(--t-sm); line-height: 1.65; max-inline-size: 74ch; }

/* ---- sibling rail ------------------------------------------------------- */
.svc-rail { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .svc-rail { grid-template-columns: 1fr 1fr; } }
.svc-rail a { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.svc-rail a:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.svc-rail .k { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.svc-rail .v { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; color: var(--fg-strong); }

/* =========================================================================
   MOTION — every rule below is an enhancement over an already-complete figure
   ========================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .demo { view-timeline-name: --demo; view-timeline-axis: block; }

    /* the shared entrance: never fades past .34, so a timeline that stalls,
       or a range that never completes, still leaves a readable diagram */
    @keyframes svc-rise { from { opacity: .34; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
    @keyframes svc-slide-i { from { opacity: .34; translate: -22px 0; } to { opacity: 1; translate: 0 0; } }
    @keyframes svc-grow { from { opacity: .4; scale: 1 .34; } to { opacity: 1; scale: 1 1; } }
    @keyframes svc-draw { from { stroke-dashoffset: var(--len, 300); } to { stroke-dashoffset: 0; } }
    @keyframes svc-type { from { inline-size: 0; } to { inline-size: 100%; } }
    @keyframes svc-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

    .demo [data-step] {
      animation: svc-rise linear both;
      animation-timeline: --demo;
      animation-range: entry 12% cover 34%;
    }
    /* five staggered bands across the same timeline — one range per index,
       so the artefacts land in reading order rather than all at once */
    .demo [data-step="1"] { animation-range: entry 14% cover 26%; }
    .demo [data-step="2"] { animation-range: entry 20% cover 32%; }
    .demo [data-step="3"] { animation-range: entry 26% cover 38%; }
    .demo [data-step="4"] { animation-range: entry 32% cover 44%; }
    .demo [data-step="5"] { animation-range: entry 38% cover 50%; }
    .demo [data-step="6"] { animation-range: entry 44% cover 56%; }

    .demo [data-slide] { animation-name: svc-slide-i; }
    .demo [data-grow] { animation-name: svc-grow; transform-origin: 50% 100%; transform-box: fill-box; }
    .demo [data-draw] { stroke-dasharray: var(--len, 300); animation: svc-draw linear both; animation-timeline: --demo; animation-range: entry 20% cover 46%; }
    .demo [data-type] { animation: svc-type steps(22, end) both; animation-timeline: --demo; animation-range: entry 40% cover 60%; overflow: hidden; white-space: nowrap; }

    /* the two always-on beats: a live indicator and the retrieval seam. Both
       are decoration on top of a labelled state, never the label itself. */
    .demo .beat { animation: svc-pulse 2.4s var(--ease-in-out) infinite; }
    .demo .beat-2 { animation: svc-pulse 2.4s var(--ease-in-out) infinite .8s; }
    .demo .beat-3 { animation: svc-pulse 2.4s var(--ease-in-out) infinite 1.6s; }
  }
}

/* Without scroll-driven timelines the staged reveal is main.css's own
   [data-reveal] contract, which is already on these pages and already
   degrades to plain visible content when reveal.js does not run. */

@media (prefers-reduced-motion: reduce) {
  .demo *, .teaser *, .svc-faq .pm::before, .svc-faq .pm::after { animation: none !important; transition: none !important; }
  .teaser .t-live { opacity: 1 !important; }
  .teaser .t-slide { transform: none !important; }
  .svc-card, .svc-rail a, .proof-item { transition: none !important; }
}

/* the answer-card wipe lives outside the shared entrance because it animates a
   geometry property, not a transform; the rect ships at full width so the
   static card is already whole. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes svc-wipe { from { width: 0px; } to { width: 350px; } }
    .demo [data-wipe] { animation: svc-wipe steps(20, end) both; animation-timeline: --demo; animation-range: entry 42% cover 64%; }
  }
}

/* RTL — the layout mirrors from logical properties alone; these are the two
   directional details that cannot. The arrow glyph in the services components
   points the way the language reads (main.css already does this for .btn and
   .link-arrow, which these are not), and a demo never mirrors: it is a
   Latin-labelled technical diagram whose geometry is absolute, so .demo-svg
   and .teaser keep direction: ltr from their own rules above. */
[dir="rtl"] .svc-card .go .arrow,
[dir="rtl"] .proof-item a .arrow,
[dir="rtl"] .svc-rail a .arrow { transform: scaleX(-1); }
[dir="rtl"] .svc-card:hover .go .arrow,
[dir="rtl"] .svc-card:focus-visible .go .arrow { transform: scaleX(-1) translateX(4px); }