/* Thin-line scenes behind the opening of For Doctors (a path), Case Studies (a gallery) and Contact (an open door)
   (Kazi 2026-10-11, v115): the Our Story corridor's language, cream lines in perspective and one crimson light,
   drawn in once; softer on phones; still under reduced motion. Markup: tools/scenes.py. */
body .ideo-scene-host{position:relative;isolation:isolate}
body .ideo-scene{position:absolute;z-index:-1;left:50%;top:calc(-1 * (var(--head-h,76px) + clamp(56px,9vh,104px)));width:100vw;
  height:calc(100% + var(--head-h,76px) + clamp(56px,9vh,104px) + 150px);transform:translateX(-50%);pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 66% 78% at 50% 38%,#000 32%,transparent 100%);mask-image:radial-gradient(ellipse 66% 78% at 50% 38%,#000 32%,transparent 100%)}
/* Contact: the floor light stops above the three cards, so it never tints the Call card */
body .ideo-scene.sc-ct{-webkit-mask-image:radial-gradient(ellipse 66% 78% at 50% 38%,#000 32%,transparent 100%),linear-gradient(#000 72%,transparent 86%);
  mask-image:radial-gradient(ellipse 66% 78% at 50% 38%,#000 32%,transparent 100%),linear-gradient(#000 72%,transparent 86%);-webkit-mask-composite:source-in;mask-composite:intersect}
body .ideo-scene path:not([fill]){fill:none}
body .ideo-scene path{stroke:rgba(248,243,237,.1);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
body .ideo-scene path.sc-faint{stroke:rgba(248,243,237,.065)}
body .ideo-scene path.sc-lamp{stroke:rgba(248,243,237,.2);stroke-width:2}
body .ideo-scene path.sc-lit:not([fill]){fill:rgba(211,42,31,.1);stroke:none}
body .ideo-scene path.sc-lit[fill]{stroke:none}
body .ideo-scene path.sc-spill{stroke:none}
body .ideo-scene-host h1{text-shadow:0 2px 30px rgba(10,15,16,.7)}
@media (prefers-reduced-motion:no-preference){
  html.ideo-js body .ideo-scene .sc-end,html.ideo-js body .ideo-scene .sc-lit,html.ideo-js body .ideo-scene .sc-spill{animation:sc-fade 1.8s var(--ease) 0s both}
  html.ideo-js body .ideo-scene path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:sc-draw 1.6s var(--ease-out) var(--t,.2s) both}
  html.ideo-js body .ideo-scene .sc-pool{animation:sc-fade 1.2s var(--ease) var(--t,1.2s) both}
  html.ideo-js body .ideo-scene path.rev{stroke-dashoffset:-1}
  html.ideo-js body .ideo-scene path.mid{stroke-dasharray:none;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center;animation-name:sc-widen}
  /* v150 (Kazi 2026-10-19: "open calmly, no lag"): the drawing holds its first frame until the page has done its first
     work (site.js adds .is-run; 1.6 s at the latest), so no line is drawn while the browser is busy. The words do not
     wait: they rise in one after another from the first paint, on the compositor. */
  html.ideo-js body .ideo-scene *{animation-play-state:paused}
  html.ideo-js body .ideo-scene-host.is-run .ideo-scene *{animation-play-state:running}
  html.ideo-js body .ideo-scene{will-change:transform}
  html.ideo-js body .ideo-cases .cs-head > :not(svg),html.ideo-js body .ideo-contact .ct-head > :not(svg){animation:sc-come 1.1s var(--ease-out) var(--hd,.1s) both}
  html.ideo-js body .ideo-cases .cs-head > h1,html.ideo-js body .ideo-contact .ct-head > h1{--hd:.24s}
  html.ideo-js body .ideo-cases .cs-head > :nth-child(n+4),html.ideo-js body .ideo-contact .ct-head > :nth-child(n+4){--hd:.42s}
  html.ideo-js body .ideo-cases .cs-work > .cs-needs{animation:sc-come 1.1s var(--ease-out) .6s both}
}
@keyframes sc-come{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-widen{from{transform:scaleX(0)}}
@keyframes sc-fade{from{opacity:0}}
/* phones: the drawing is softer, its light quieter, and the headline gets a dark halo so its red words stay crisp */
@media (max-width:699px){
  body .ideo-scene{top:calc(-1 * (var(--head-h,64px) + 44px));height:calc(100% + var(--head-h,64px) + 44px + 110px);opacity:.75;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 36%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 90% 70% at 50% 36%,#000 30%,transparent 100%)}
  body .ideo-scene.sc-ct{-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 36%,#000 30%,transparent 100%),linear-gradient(#000 72%,transparent 86%);
    mask-image:radial-gradient(ellipse 90% 70% at 50% 36%,#000 30%,transparent 100%),linear-gradient(#000 72%,transparent 86%)}
  body .ideo-scene .sc-end{opacity:.45}
  body .ideo-scene .sc-pool{opacity:.7}
  body .ideo-scene-host h1{text-shadow:0 2px 20px rgba(10,15,16,.9),0 0 2px rgba(10,15,16,.6)}
}