/* Living scenes — one family of code-built 3D vignettes, one per solution.
   Same camera for every scene (isometric-ish: tilt 58°, turn −38°), same
   navy ground, same three brand blues for the three faces of every block.
   Nothing here is a photo or a video: a scene is a few dozen divs, so it
   weighs a few kilobytes, always sits in the brand colours and can be
   changed in one place for every page that shows it. */

.sa-scene {
  --sc-ink:  #0D151F;
  --sc-navy: #101B37;
  --sc-sup:  #2F579A;
  --sc-acc:  #4E72B7;
  --sc-lift: #6F8FC9;
  --sc-white: #FFFFFF;
  --sc-l1:   #E6ECF7;
  --sc-l2:   #CFD9EE;
  /* blocks are in the light surfaces, so they read white on the navy ground */
  --sc-top:  var(--sc-white);
  --sc-front: var(--sc-l2);
  --sc-side: var(--sc-lift);
  --sc-scale: 1;
  --sc-turn: -38deg;
  --sc-tilt: 58deg;
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(79, 114, 183, .22) 0%, rgba(79, 114, 183, 0) 70%),
    var(--sc-ink);
  perspective: 1400px;
  perspective-origin: 50% 40%;
  contain: layout paint style;
}
/* the card overlays (tint + veil) are for photographs; a scene is already in brand colour */
.sa-fcard-media.has-scene::before, .sa-fcard-media.has-scene::after,
.sa-tile-media.has-scene::before,  .sa-tile-media.has-scene::after { display: none; }
.sa-fcard-media.has-scene, .sa-tile-media.has-scene { background: #0D151F; }

.sa-scene-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) scale(var(--sc-scale)) rotateX(var(--sc-tilt)) rotateZ(var(--sc-turn));
  will-change: transform;
}

/* the ground: a navy plate with a faint grid, offset so its centre is the stage origin */
.sa-scene-ground {
  position: absolute;
  left: calc(var(--w) * -0.5px); top: calc(var(--d) * -0.5px);
  width: calc(var(--w) * 1px); height: calc(var(--d) * 1px);
  background-color: var(--sc-navy);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: var(--cell, 30px) var(--cell, 30px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 40px 60px -20px rgba(0,0,0,.7);
  transform-style: preserve-3d;
}
.sa-scene-ground > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* a block: three visible faces around an origin at its bottom-left-front corner */
.sa-box {
  position: absolute;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--z, 0) * 1px));
}
.sa-box > i { position: absolute; left: 0; top: 0; display: block; }
/* top lies at z=h; the front stands on the y=d edge; the side stands on the x=w edge */
.sa-box > .t { width: calc(var(--w) * 1px); height: calc(var(--d) * 1px);
  background: var(--sc-top); transform: translateZ(calc(var(--h) * 1px)); }
.sa-box > .f { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  background: var(--sc-front); transform-origin: 0 0;
  transform: translateY(calc(var(--d) * 1px)) rotateX(90deg); }
.sa-box > .s { width: calc(var(--h) * 1px); height: calc(var(--d) * 1px);
  background: var(--sc-side); transform-origin: 0 0;
  transform: translateX(calc(var(--w) * 1px)) rotateY(-90deg); }
/* the two far faces too, so a block is closed from every camera angle (the load turns) */
.sa-box > .b { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  background: var(--sc-front); transform-origin: 0 0; transform: rotateX(90deg); }
.sa-box > .l { width: calc(var(--h) * 1px); height: calc(var(--d) * 1px);
  background: var(--sc-side); transform-origin: 0 0; transform: rotateY(-90deg); }
.sa-box > i { box-shadow: inset 0 0 0 1px rgba(16,27,55,.10); }
/* the accent blocks: stops, the vehicle, the tray */
.sa-box.is-acc { --sc-top: var(--sc-lift); --sc-front: var(--sc-acc); --sc-side: var(--sc-sup); }
.sa-box.is-acc > i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.sa-box.is-lit { --sc-top: var(--sc-white); --sc-front: var(--sc-lift); --sc-side: var(--sc-acc); }
.sa-box.is-dim { --sc-top: var(--sc-acc); --sc-front: var(--sc-sup); --sc-side: var(--sc-navy); }
.sa-box.is-dim > i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
/* streets: drawn on the ground by the scene, lighter than the ground */
.sa-street { position: absolute; background: rgba(255,255,255,.14); transform: translateZ(.5px); }
.sa-street.is-main { background: rgba(255,255,255,.22); }

/* a flat marker lying on the ground (delivery point ring, tray outline) */
.sa-dot {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
  transform: translateZ(1px);
}

/* the vehicle: a small lit block that rides the route */
.sa-van { --w: 14; --d: 9; --h: 8; }
.sa-van > i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }

/* caption row under the scene, when a page wants one */
.sa-scene-cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font: 600 11px/1.3 "Aptos", "Inter", "Segoe UI", sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

@media (prefers-reduced-motion: reduce) {
  .sa-scene { --sc-static: 1; }
}

/* A real, moving thing from the project: the poster shows at once, the live page
   loads only when the card is on screen, and sits behind the card link. */
.sa-real { position: absolute; inset: 0; overflow: hidden; background: #0D151F; }
.sa-real > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.sa-real > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: transparent; transform: scale(var(--real-zoom, 1)); transform-origin: 50% 50%; }
.sa-real.is-live > iframe { opacity: 1; }
.sa-real.is-live > img { opacity: 0; }