/* Onti: three short scroll-driven scenes on the shared stage (story.css).
   Glow is Onti's own, so it is used freely here and nowhere else. */
.oc1 .intake{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.o-core{position:absolute;left:50%;top:46%;width:min(40vmin,400px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-content:center;z-index:2;
  border-radius:50%;background:radial-gradient(circle,rgba(79,168,164,var(--g,.2)) 0%,rgba(79,168,164,0) 66%)}
.o-core img{width:min(24vmin,240px);filter:drop-shadow(0 0 calc(18px + var(--g,.2) * 60px) rgba(79,168,164,calc(.35 + var(--g,.2) * .6)))}

.q2{position:absolute;right:6vw;top:15%;max-width:min(640px,56vw);background:#f4f1ea;color:#171512;border-radius:28px 28px 6px 28px;padding:20px 26px;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-size:clamp(17px,2.6vmin,26px);line-height:1.35;z-index:3;transform-origin:100% 100%}
.ans{position:absolute;left:44%;right:6vw;top:31%;display:flex;gap:14px;align-items:flex-start;z-index:3;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-size:clamp(15px,2.1vmin,21px);line-height:1.45;color:rgba(244,241,234,.9)}
.ans img{width:clamp(26px,3.6vmin,38px);flex-shrink:0;filter:drop-shadow(0 0 14px rgba(79,168,164,.7))}
.typing::after{content:'';display:inline-block;width:.42em;height:.9em;margin-left:3px;vertical-align:-.08em;background:#4fa8a4}
.q2 .typing::after{background:#3f8f8c}
.chart2{position:absolute;left:44%;top:44%;width:50vw;height:42vh;z-index:2;overflow:visible}
.chart2 .grid line{stroke:rgba(244,241,234,.08);stroke-width:1.5}
.chart2 .grid .base{stroke:rgba(244,241,234,.3)}
.chart2 .b{fill:#3f8f8c;transform-box:fill-box;transform-origin:50% 100%}
.chart2 .b:nth-of-type(3){fill:#4fa8a4}.chart2 .b:nth-of-type(4){fill:#a9cac8}
.chart2 .trend{fill:none;stroke:#f8ed43;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(248,237,67,.6))}
.chart2 .xl text{fill:rgba(244,241,234,.6);font-size:22px;font-family:-apple-system,sans-serif;text-anchor:middle}
.illus2{position:absolute;right:6vw;bottom:4vh;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.4);z-index:3}

.oc3 .trace{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.oc3 .trace path{fill:none;stroke:rgba(79,168,164,.55);stroke-width:1.3}
.bar3{position:absolute;left:30%;top:58%;width:min(12vmin,120px);height:36vh;transform:translate(-50%,-100%);border-radius:14px;background:#4fa8a4;z-index:2;
  box-shadow:0 0 60px rgba(79,168,164,.55);display:flex;align-items:flex-end;justify-content:center}
.bar3 span{position:absolute;bottom:-34px;font-size:12px;letter-spacing:.14em;color:rgba(244,241,234,.6)}
.tiles3{position:absolute;left:52%;right:6vw;top:16%;height:48vh;display:grid;grid-template-columns:repeat(6,1fr);gap:min(1.4vmin,14px);z-index:2}
.tiles3 i{border-radius:10px;background:#141413;box-shadow:0 0 0 1px rgba(244,241,234,.1);transition:background-color 250ms,box-shadow 250ms}
.tiles3 i.on{background:rgba(79,168,164,.22);box-shadow:0 0 0 1px #4fa8a4,0 0 22px rgba(79,168,164,.35)}
.src3{position:absolute;left:52%;top:70%;display:inline-flex;align-items:center;gap:12px;border-radius:99px;background:#141413;padding:12px 20px 12px 12px;
  font-size:clamp(10px,1.5vmin,14px);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(244,241,234,.12);z-index:3}

@media(max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:501px){
  /* Phones: visuals sit in the space between the bar and the words
     (--bt, --bh, measured by onti-story.js). */
  .o-core{top:calc(var(--bt,90px) + var(--bh,400px) * .46);width:min(70vw, calc(var(--bh,400px) * .8))}
  .o-core img{width:min(40vw, calc(var(--bh,400px) * .42))}
  .q2{left:16px;right:16px;top:var(--bt,90px);max-width:none;font-size:16px;padding:12px 16px}
  .ans{left:16px;right:16px;top:calc(var(--bt,90px) + var(--bh,400px) * .25);font-size:13.5px}
  .chart2{left:16px;top:calc(var(--bt,90px) + var(--bh,400px) * .47);width:calc(100vw - 32px);height:calc(var(--bh,400px) * .44)}
  .illus2{right:auto;left:16px;bottom:auto;top:calc(var(--bt,90px) + var(--bh,400px) + 2px);font-size:10px}
  .bar3{left:20%;top:calc(var(--bt,90px) + var(--bh,400px) * .78);height:calc(var(--bh,400px) * .62)}
  .tiles3{left:40%;right:16px;top:var(--bt,90px);height:calc(var(--bh,400px) * .66);grid-template-columns:repeat(4,1fr)}
  .src3{left:16px;top:calc(var(--bt,90px) + var(--bh,400px) * .88);font-size:10px}
}