/* Spotlights: real-size product UI that stands in for the case study reels on phones.
   Markup: build/casestudy/spotlight.py. Spec: handoff/mobile-polish/README.md (Fix 1) and design/.
   Loaded with media="(max-width: 640px)", so none of this applies on wider screens.

   Exception to DESIGN_SYSTEM.md: the layers inside .sl-stage are pictures of each product's UI, like a
   screenshot, so they keep the products' own colours instead of the site's tokens. Type is the site's
   (Figtree and Google Sans Code) rather than each product's font. The stage itself sits on the card. */

.sl{display:block;position:relative;width:100%;aspect-ratio:311 / var(--sl-h);overflow:visible;}
/* A fixed 311px stage, scaled to the card's width by script.js (--sl-scale) so it never reflows */
.sl-stage{
  position:absolute;left:0;top:0;width:311px;height:calc(var(--sl-h) * 1px);
  transform:scale(var(--sl-scale, 1));transform-origin:0 0;
  font-family:var(--font-sans);letter-spacing:normal;line-height:1.3;
  --sl-shadow:0 1px 0 rgb(255 255 255 / .7) inset,0 24px 44px -16px rgb(0 0 0 / .7),0 3px 8px rgb(0 0 0 / .22);
  --sl-shadow-over:0 22px 40px -12px rgb(0 0 0 / .7),0 4px 10px rgb(0 0 0 / .25);
}
/* Lighter shadows on the light theme's pale card */
[data-theme="light"] .sl-stage{
  --sl-shadow:0 18px 36px -16px rgb(50 40 67 / .38),0 2px 6px rgb(50 40 67 / .14);
  --sl-shadow-over:0 18px 32px -12px rgb(50 40 67 / .42),0 3px 8px rgb(50 40 67 / .16);
}
.sl-stage > *{position:absolute;}
.sl-card{box-sizing:border-box;background:#fff;border-radius:14px;box-shadow:var(--sl-shadow);}
.sl-over{box-sizing:border-box;border-radius:12px;box-shadow:var(--sl-shadow-over);}
.sl-cursor{width:20px;height:24px;z-index:3;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .45));}
.sl-col{display:flex;flex-direction:column;gap:1px;}

/* TeamHiiv: the "Thought process" stepper */
.sl-th{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;border:1px solid #e3dafb;color:#1b1726;}
.sl-th-head{display:flex;align-items:center;gap:9px;}
.sl-th-title{flex:1;font-size:13.5px;font-weight:800;}
.sl-th-steps{position:relative;display:flex;flex-direction:column;gap:12px;}
.sl-th-rail{position:absolute;left:11.5px;top:12px;bottom:12px;width:1px;background:#e6defb;}
.sl-th-step{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:center;}
.sl-th-dot{
  position:relative;z-index:1;box-sizing:border-box;width:24px;height:24px;border-radius:50%;
  background:#f6f3fe;border:1px solid #e6defb;display:grid;place-items:center;
}
.sl-th-dot--run{background:#fff;}
.sl-th-pdf{width:10px;height:13px;border-radius:2px;background:#e5484d;}
.sl-th-t{font-size:13px;font-weight:700;line-height:1.3;}
.sl-th-t--run{color:#77728a;font-weight:600;}
.sl-th-s{font-size:12px;color:#77728a;line-height:1.35;}

/* n0de: renewable electricity progress card, December tooltip and the next action */
.sl-node{background:#fbfaf5;color:#16211c;padding:14px 15px 24px;display:flex;flex-direction:column;gap:4px;}
.sl-node-label{font-size:12.5px;color:#666a60;font-weight:500;}
.sl-node-big{display:flex;align-items:center;gap:10px;height:34px;font-size:34px;font-weight:700;letter-spacing:-0.03em;line-height:1;}
.sl-node-up{width:24px;height:24px;border-radius:50%;background:#dff59b;display:grid;place-items:center;}
.sl-node-chart{display:block;overflow:visible;font-family:var(--font-sans);}
.sl-node-pulse{opacity:0;transform-box:fill-box;transform-origin:center;}
.sl-node-tip{z-index:2;background:#13201a;border-radius:8px;padding:7px 10px;display:flex;flex-direction:column;gap:1px;box-shadow:0 10px 24px -6px rgb(0 0 0 / .5);}
.sl-node-tip-a{font-size:12px;font-weight:700;color:#d4f77a;}
.sl-node-tip-b{font-size:12px;color:rgb(255 255 255 / .72);}
.sl-node-next{background:#fff;color:#16211c;padding:10px 12px;display:flex;gap:10px;align-items:center;}
.sl-node-leaf{width:32px;height:32px;border-radius:9px;background:#e9f7c4;display:grid;place-items:center;flex:none;}
.sl-node-sm{font-size:12px;color:#73776c;}
.sl-node-strong{font-size:13.5px;font-weight:700;}

/* Reejig: job titles joined by labelled dividers, and the query written out */
.sl-rj{padding:14px;display:flex;flex-direction:column;gap:8px;color:#1a1f4d;}
.sl-rj-title{font-size:13px;font-weight:700;}
.sl-rj-box{border:1px solid #dadcef;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;}
.sl-rj-chip{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;height:28px;padding:0 9px 0 10px;border-radius:7px;background:#e7e9fc;font-size:13px;font-weight:600;}
.sl-rj-op{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:16px;}
.sl-rj-op i{height:1px;background:#e2e3f0;}
.sl-rj-op b{font-size:12px;font-weight:800;color:#4248c9;background:#fff;border:1px solid #d6d9f3;border-radius:999px;padding:0 8px;line-height:16px;}
.sl-rj-query{background:#1c2052;border:1px solid rgb(255 255 255 / .08);padding:10px 12px;display:flex;flex-direction:column;gap:4px;}
.sl-rj-qlabel{font-size:12px;font-weight:600;color:#b4b8ec;}
.sl-rj-code{font-family:var(--font-mono);font-size:12px;line-height:1.6;color:#fff;white-space:pre;}
.sl-rj-code span{color:#9aa2ff;font-weight:700;}

/* EngineRoom: total revenue tile, new customers progress and the December tooltip */
.sl-er{overflow:hidden;color:#1d2433;}
.sl-er-head{background:linear-gradient(135deg,#1c9a54 0%,#24a862 55%,#1d9a73 100%);color:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:3px;}
.sl-er-h1{font-size:13px;font-weight:600;opacity:.92;}
.sl-er-big{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;}
.sl-er-badge{font-size:12px;font-weight:800;background:#fff;color:#1d2433;border-radius:4px;padding:2px 5px;letter-spacing:0;}
.sl-er-plan{font-size:13px;opacity:.9;}
.sl-er-plan b{font-weight:700;}
.sl-er-body{padding:12px 16px 30px;display:flex;flex-direction:column;gap:6px;}
.sl-er-label{font-size:12px;color:#6b7385;}
.sl-er-row{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;}
.sl-er-chip{font-size:12px;font-weight:700;color:#4c5568;background:#eef0f4;border-radius:4px;padding:1px 5px;}
.sl-er-rplan{margin-left:auto;font-size:12px;color:#6b7385;font-weight:400;}
.sl-er-rplan b{color:#1d2433;font-weight:600;}
.sl-er-track{height:4px;border-radius:4px;background:#e3f3ea;overflow:hidden;}
.sl-er-bar{height:100%;border-radius:4px;background:#22a35f;transform-origin:left center;}
.sl-er-tip{background:#1b1f2e;color:#fff;border:1px solid rgb(255 255 255 / .08);padding:9px 12px;display:flex;flex-direction:column;gap:4px;}
.sl-er-tip-h{font-size:13px;font-weight:700;}
.sl-er-tip-r{display:flex;align-items:center;gap:6px;font-size:12px;color:rgb(255 255 255 / .82);}
.sl-er-tip-r b{color:#fff;font-weight:800;}
.sl-er-pct{font-size:12px;font-weight:800;background:#fff;color:#1b1f2e;border-radius:4px;padding:1px 5px;}

/* Motion: once, when the spotlight is half in view. script.js adds .is-armed when it starts watching
   (the starting positions) and .play when it's in view. Everything is in place at rest, and with
   reduced motion none of this applies. */
@media (prefers-reduced-motion: no-preference){
  .sl.is-armed:not(.play) .sl-cursor{opacity:0;transform:translate(26px,22px);}
  .sl.is-armed:not(.play) .sl-over{opacity:0;transform:translateY(8px) scale(.97);}
  .sl.is-armed:not(.play) .sl-th-step{opacity:0;transform:translateY(6px);}
  .sl.is-armed:not(.play) .sl-rj-chip{opacity:0;}
  .sl.is-armed:not(.play) .sl-er-bar{transform:scaleX(0);}

  .sl.play .sl-cursor{animation:sl-cursor 1.1s cubic-bezier(.3,.7,.3,1) .5s both;}
  .sl.play .sl-over{animation:sl-lift .6s var(--ease-wipe) .25s both;}

  .sl.play .sl-th-step{animation:sl-up .45s ease both;}
  .sl.play .sl-th-step:nth-child(3){animation-delay:.12s;}
  .sl.play .sl-th-step:nth-child(4){animation-delay:.24s;}
  .sl.play .sl-th-step:nth-child(5){animation-delay:.36s;}
  .sl.play .sl-th-spin{animation:sl-spin .9s linear infinite;transform-origin:center;}

  .sl.play .sl-node-pulse{animation:sl-pulse .9s ease-out 1.5s 2 both;}

  .sl.play .sl-rj-chip{animation:sl-fade .35s ease both;}
  .sl.play .sl-rj-chip:nth-of-type(2){animation-delay:.15s;}
  .sl.play .sl-rj-chip:nth-of-type(3){animation-delay:.3s;}
  .sl--reejig.play .sl-over{animation-delay:.65s;}

  .sl.play .sl-er-bar{animation:sl-fill 1s var(--ease-wipe) .4s both;}
}
@keyframes sl-cursor{
  0%{opacity:0;transform:translate(26px,22px);}
  55%{opacity:1;transform:none;}
  70%{transform:scale(.86);}
  85%,100%{opacity:1;transform:none;}
}
@keyframes sl-lift{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes sl-up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes sl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes sl-spin{to{transform:rotate(360deg);}}
@keyframes sl-pulse{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(3);}}
@keyframes sl-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}