/* ============================================================
   BORG SITES, the services page's four moving scenes (/services)

   The four media frames of /services each hold one inline SVG scene, drawn
   on a 400 by 300 board and played by /assets/js/services-scenes.js. The
   page chrome stays calm, navy and white; the brand colors live inside the
   pictures. The frame itself is pages.css's .feature-split__media; this sheet
   gives it a fixed 4 / 3 box (its 300 px floor kept), so nothing shifts when
   a scene starts, and draws what is inside.

   The markup is every scene's still frame. Moving parts are animated with
   transforms, opacity and stroke-dashoffset only, so no rule here may put an
   opacity on an element the script moves: a class that dims a shape uses
   fill-opacity or stroke-opacity instead.
   ============================================================ */

/* ---------- the box ----------
   width: 100%, because a grid item with an aspect ratio is not stretched: its
   width would come from its height, and the 300 px floor would make it 400 px
   wide (300 times 4 / 3) and push a phone sideways. Measured at 390. */
.scene-host { aspect-ratio: 4 / 3; width: 100%; }
/* one column (pages.css's own breakpoint): at most 560 px wide and centered,
   so a scene is never taller than about 420 px on a tablet */
@media (max-width: 860px) { .scene-host { max-width: 560px; justify-self: center; } }
.scene { position: absolute; inset: 0; }
.scene__svg { display: block; width: 100%; height: 100%; }
.scene.is-playing .scene__svg { will-change: transform; }

/* the one dark scene: a calm night panel inside the frame */
.scene--night {
  background:
    radial-gradient(58% 52% at 50% 38%, rgba(46,125,246,.20), rgba(123,63,228,.10) 48%, transparent 76%),
    var(--dark);
}

/* ---------- pause and play (WCAG 2.2.2), one per scene ----------
   Hidden in the markup: the script shows it only once that scene has a
   timeline, so a still frame never carries a control that does nothing. */
.scene__toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--text);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.scene__toggle[hidden] { display: none; }
.scene__toggle:hover { background: #fff; border-color: var(--brand-2); }
.scene__toggle:active { transform: scale(.94); }
.scene__toggle:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 50%; }
.scene__toggle svg { display: block; width: 16px; height: 16px; }
.scene__pause { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.scene__play { fill: currentColor; }
.scene__toggle[data-state="paused"] .scene__pause,
.scene__toggle:not([data-state="paused"]) .scene__play { display: none; }
.scene-host--night .scene__toggle { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); color: #fff; box-shadow: none; }
.scene-host--night .scene__toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.scene-host--night .scene__toggle:focus-visible { outline-color: #fff; }

/* ---------- words inside the scenes ----------
   Every pair measured: --text on white 18.5:1, --text-dim on white 7.6:1,
   --text-faint on white 5.6:1, the live green on white 5.0:1, white on the
   deepened brand gradient 4.55:1 at its lightest stop, white on the post's
   violet to magenta 5.56:1 at its lightest, the night label on --dark 12.2:1. */
.scn-t { font-family: var(--font-body); font-size: 10.5px; }
.scn-t--url { fill: var(--text-faint); }
.scn-t--on { fill: #fff; font-family: var(--font-display); font-weight: 600; }
.scn-t--live { fill: #0D8038; font-family: var(--font-display); font-weight: 700; font-size: 10px; }
.scn-t--ask { fill: var(--text); font-weight: 500; font-size: 11.5px; }
.scn-t--btn { fill: #fff; font-family: var(--font-display); font-weight: 600; font-size: 9px; }
.scn-t--label { fill: var(--text-dim); font-weight: 600; font-size: 8.5px; }
.scn-t--toast { fill: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 11.5px; }
.scn-t--face1 { fill: var(--text); font-weight: 500; font-size: 25px; letter-spacing: -.01em; }
.scn-t--face2 { fill: var(--text); font-family: var(--font-display); font-weight: 400; font-size: 23px; letter-spacing: .07em; }
.scn-t--mark { fill: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -.02em; }
.scn-t--mark-s { fill: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: -.01em; }
.scn-t--mark-on { fill: #fff; }
.scn-t--night { fill: #C9CEE6; font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }

/* ---------- the shared window (the pricing window's own drawing) ---------- */
.scn-frame { fill: var(--ink-1); stroke: var(--hairline-strong); stroke-width: 1; }
.scn-frame--bare { stroke: none; }
.scn-plate { fill: #141A3C; fill-opacity: .06; }
.scn-chrome-line { fill: none; stroke: var(--hairline); stroke-width: 1; }
.scn-url { fill: var(--ink-1); stroke: var(--hairline); stroke-width: 1; }
.scn-page { fill: var(--ink-1); }
.scn-fill-2 { fill: var(--ink-2); }
.scn-ink { fill: var(--text); fill-opacity: .82; }
.scn-ink-faint { fill: var(--text); fill-opacity: .16; }
.scn-card { fill: var(--ink-1); stroke: var(--hairline); stroke-width: 1; }
.scn-card--edge { stroke: var(--hairline-strong); }
.scn-lock { fill: #0D8038; }
.scn-lock-shackle { fill: none; stroke: #0D8038; stroke-width: 1.6; stroke-linecap: round; }
.scn-live { fill: #22C55E; }
.scn-live-halo { fill: none; stroke: #22C55E; stroke-width: 1.5; }
.scn-cursor { fill: var(--text); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.scn-check { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scene a: create it, change it, publish it ---------- */
.scn-check-badge { fill: #0D8038; stroke: #fff; stroke-width: 1.5; }
.scn-composer { fill: var(--ink-1); stroke: var(--hairline-strong); stroke-width: 1; }
.scn-spark { fill: #fff; }
.scn-caret { fill: var(--brand-2); }
.scn-send { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scene b: websites that look incredible and convert ---------- */
.scn-bezel { fill: var(--dark); }
.scn-screen { fill: var(--ink-1); }
.scn-scrim { fill: var(--dark); fill-opacity: .3; }
.scn-sheet { fill: var(--ink-1); stroke: var(--hairline); stroke-width: 1; }
.scn-grabber { fill: var(--ink-4); }
.scn-field { fill: var(--ink-2); stroke: var(--hairline); stroke-width: 1; }
.scn-tap { fill: #fff; fill-opacity: .35; stroke: #fff; stroke-width: 1.5; }
.scn-toast { fill: var(--ink-1); stroke: var(--hairline-strong); stroke-width: 1; }
.scn-env { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.scn-unread { fill: var(--brand-3); }

/* ---------- scene c: a brand that looks boldly original ---------- */
.scn-j { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.scn-j-dot { fill: #fff; }
.scn-chip-light { stroke: var(--hairline-strong); stroke-width: 1; }
.scn-post-dot { fill: #fff; fill-opacity: .6; }
.scn-bracket { fill: var(--text-dim); }
.scn-arm { fill: none; stroke: var(--text-dim); stroke-width: 3; stroke-linecap: round; }
.scn-chain { fill: none; stroke: var(--text-dim); stroke-width: 1.4; stroke-linecap: round; }
.scn-signboard { fill: var(--dark); }

/* ---------- scene d: we run everything behind the curtain ---------- */
.scn-ring { fill: none; stroke: #fff; stroke-opacity: .12; stroke-width: 1; }
.scn-ring--inner { stroke: var(--brand-1); stroke-opacity: .34; stroke-dasharray: 2 5; }
.scn-link { fill: none; stroke: #fff; stroke-opacity: .07; stroke-width: 1; }
.scn-node { fill: var(--brand-1); }
.scn-node--warm { fill: var(--brand-4); }
.scn-node-halo { fill: none; stroke: var(--brand-1); stroke-opacity: .35; stroke-width: 1; }
.scn-pulse { fill: #fff; }
.scn-pulse-glow { fill: var(--brand-1); fill-opacity: .45; }
.scn-shield-fill { fill: var(--brand-1); fill-opacity: .09; }
.scn-shield { fill: none; stroke-width: 3.4; stroke-linejoin: round; }
.scn-shield-flash { fill: none; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.scn-attack { fill: #E5484D; }
.scn-sparkle { fill: #fff; }
.scn-backup { fill: var(--brand-1); fill-opacity: .14; stroke: var(--brand-1); stroke-opacity: .6; stroke-width: 1; }
.scn-backup-tick { fill: #22C55E; }
.scn-backup-line { fill: #fff; fill-opacity: .3; }
.scn-beat-base { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: 1.4; stroke-linejoin: round; }
.scn-beat { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }