/* =========================================================
   Motion demos (v4) — one stage, four steps (show_AEM.html)
   the surface and its domain share one space; the steps are
   choreographed transitions, and each step keeps one interaction
   ========================================================= */

/* \mathcal letters (ℳ, 𝒱): the Computer Modern calligraphic of LaTeX, from KaTeX's fonts */
@font-face{ font-family:"KaTeX_Caligraphic"; font-weight:400; font-style:normal; font-display:swap;
  src:url("https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Caligraphic-Regular.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Caligraphic-Regular.woff") format("woff"); }
.cal{ font-family:"KaTeX_Caligraphic","STIX Two Text","Times New Roman",serif; font-style:normal; }

.sm-page{ overflow-x:hidden; }
.sm-top-r{ display:flex; align-items:center; gap:10px; }
.sm-top-r .kicker{ margin-right:6px; }

.sm-stage{
  --nav: 62px;
  position:relative; height:calc(100vh - 51px); min-height:560px; overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 62% 46%, #1f1f1f 0%, #191919 60%, #151515 100%);
}
html.embedded .sm-stage{ height:100vh; min-height:480px; }
.sm-stage > canvas{ position:absolute; left:0; top:0; width:100%; height:calc(100% - var(--nav)); display:block; }
#sm-gl{ cursor:grab; touch-action:pan-y; }
#sm-gl.drag{ cursor:grabbing; }
#sm-ov{ pointer-events:none; }

/* ---------- loading ---------- */
.sm-load{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:var(--faint); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.sm-load svg{ width:44px; height:44px; }
.sm-load circle{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.4; stroke-dasharray:151; stroke-dashoffset:151;
  transform-origin:50% 50%; transform:rotate(-90deg); animation:sm-draw 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes sm-draw{ 0%{ stroke-dashoffset:151; } 55%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-151; } }
.sm-load.done{ opacity:0; }
.sm-load.err span{ color:#e8a09a; text-transform:none; letter-spacing:0; }

/* ---------- labels that follow the meshes ---------- */
.sm-labels{ position:absolute; inset:0; pointer-events:none; }
.sm-lab{
  position:absolute; left:0; top:0; transform:translate(-50%, 8px); text-align:center; white-space:nowrap;
  font-size:1.06rem; color:var(--txt); opacity:0; transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.sm-lab.on{ opacity:1; transform:translate(-50%, 0); }
.sm-lab small{ display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.sm-lab span{ display:block; font-size:.84rem; color:var(--dim); margin-top:2px; }
.sm-lab.acc small{ color:#32d2e6; }

.sm-tip{
  position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .15s;
  padding:4px 9px; border-radius:3px; background:rgba(20,20,20,.88); border:1px solid var(--line-2);
  font-size:.84rem; color:var(--txt); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.sm-tip.on{ opacity:1; }
.sm-tip i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:0; }

/* ---------- the text panel ---------- */
.sm-panel{
  position:absolute; left:0; top:0; bottom:var(--nav); width:clamp(330px, 31vw, 440px);
  padding:clamp(22px,3.2vh,40px) clamp(20px,2.4vw,34px) 18px;
  display:flex; flex-direction:column; gap:16px; overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(90deg, rgba(21,21,21,.72) 0%, rgba(21,21,21,.5) 70%, rgba(21,21,21,0) 100%);
  scrollbar-width:thin;
}
.sm-text{ position:relative; }
.sm-step{ transition:opacity .35s ease, transform .35s ease; }
.sm-step.out{ position:absolute; left:0; right:0; top:0; opacity:0; transform:translateY(-14px); pointer-events:none; }
.sm-step .k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.sm-step .k b{ color:var(--txt); font-weight:600; letter-spacing:.08em; margin-right:12px; }
.sm-step h2{ font-weight:300; font-size:clamp(1.45rem,2.1vw,1.95rem); line-height:1.18; letter-spacing:-.015em; margin:10px 0 12px; }
.sm-step p{ color:var(--dim); font-size:.97rem; margin:0 0 .7em; }
.sm-step p em{ color:var(--txt); font-style:normal; }
.sm-step .hot{ color:#ff8a70; font-weight:400; }
.sm-step .acc{ color:#32d2e6; font-weight:400; }
.sm-step .m{ font-family:"STIX Two Text","Times New Roman",Times,"Cambria Math",serif; font-size:1.07em; color:var(--txt); white-space:nowrap; }
.sm-step .m i{ font-style:italic; }
.sm-step .m sub{ font-size:.68em; }
.sm-step .hint{ color:var(--faint); font-size:.86rem; margin-top:.2em; }
.sm-step .hint::before{ content:""; display:inline-block; width:16px; height:1px; background:var(--line-2); vertical-align:.3em; margin-right:9px; }

/* words rise one after another */
.sm-step .w{ display:inline-block; opacity:0; transform:translateY(.6em);
  animation:sm-w .9s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--d, 0s) + var(--i) * 18ms); }
@keyframes sm-w{ to{ opacity:1; transform:none; } }

/* ---------- step controls ---------- */
.sm-ctrl{ display:none; }
.sm-ctrl.on{ display:flex; flex-direction:column; gap:14px; animation:sm-in .8s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d, .5s); }
@keyframes sm-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.sm-slider{ display:flex; align-items:center; gap:12px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.sm-slider input{ flex:1; }
#sm-srv{ min-width:52px; text-align:right; letter-spacing:.04em; text-transform:none; font-variant-numeric:tabular-nums; color:var(--dim); }

input[type=range]{ -webkit-appearance:none; appearance:none; background:none; height:22px; margin:0; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:rgba(255,255,255,.2); }
input[type=range]::-moz-range-track{ height:2px; background:rgba(255,255,255,.2); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-5.5px; border-radius:50%;
  background:#f2f2f2; box-shadow:0 0 0 4px rgba(25,25,25,.9); transition:transform .2s var(--ease); }
input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:#f2f2f2; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.25); }

.sm-legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px 0; font-size:.78rem; color:var(--faint); }
.sm-legend i{ grid-column:1 / -1; height:5px;
  background:linear-gradient(90deg, rgb(25,70,180), rgb(50,210,230) 33%, rgb(255,230,80) 66%, rgb(210,50,45)); }
.sm-legend span:last-child{ text-align:right; }

.sm-run{ display:flex; align-items:center; gap:12px; }
.sm-play{
  flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:none; color:var(--txt);
  display:grid; place-items:center; cursor:pointer; transition:border-color .2s, background .2s;
}
.sm-play:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.04); }
.sm-play svg{ width:17px; height:17px; fill:currentColor; }
.sm-play .i-pause{ display:none; }
.sm-panel.running .sm-play .i-play{ display:none; }
.sm-panel.running .sm-play .i-pause{ display:block; }
.sm-scrub{ position:relative; flex:1; padding-bottom:16px; }
.sm-scrub input{ width:100%; display:block; }
.sm-ticks{ position:absolute; left:0; right:0; top:22px; height:14px; pointer-events:none; }
.sm-ticks span{ position:absolute; transform:translateX(-50%); font-size:.68rem; letter-spacing:.06em; color:var(--faint); white-space:nowrap; }
.sm-ticks span:first-child{ transform:none; }
.sm-ticks span:last-child{ transform:translateX(-100%); }

.sm-stages{ position:relative; display:flex; gap:22px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-bottom:8px; }
.sm-stages span{ transition:color .3s; white-space:nowrap; }
.sm-stages span.on{ color:var(--txt); }
.sm-stages i{ position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--txt); }
.sm-iter{ font-size:.86rem; color:var(--dim); margin-top:-6px; font-variant-numeric:tabular-nums; }

.sm-chart-h{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.sm-chart-h b{ font-weight:400; letter-spacing:0; text-transform:none; font-size:.95rem; color:var(--txt); font-variant-numeric:tabular-nums; }
.sm-chart-h b i{ font-family:"STIX Two Text","Times New Roman",serif; font-size:1.06em; }
.sm-chart canvas{ display:block; width:100%; }
#sm-energy{ height:94px; }
#sm-hist{ height:66px; }
.sm-ctrl[data-ctrl="3"].on{ gap:11px; }                    /* step 3 holds the most: keep it within the pop-up's height */
#sm-energy{ cursor:pointer; }

.sm-fine{ margin:auto 0 0; padding-top:10px; color:var(--faint); font-size:.76rem; line-height:1.5; opacity:.8; }
.sm-fine code{ font-size:.95em; color:var(--dim); }
.sm-panel[data-step="2"] .sm-fine{ display:none; }        /* the minimization step needs the room for its charts */

/* ---------- step navigation ---------- */
.sm-nav{
  position:absolute; left:0; right:0; bottom:0; height:var(--nav);
  display:flex; align-items:center; gap:clamp(4px,1.6vw,26px); padding:0 clamp(16px,2.4vw,34px);
  border-top:1px solid var(--line); background:rgba(19,19,19,.82); backdrop-filter:blur(8px);
}
.sm-track{ position:absolute; left:0; right:0; top:-1px; height:1px; }
.sm-track i{ position:absolute; left:0; top:0; height:1px; width:0; background:rgba(255,255,255,.75); transition:width .9s cubic-bezier(.65,0,.35,1); }
.sm-nav button{
  background:none; border:0; color:var(--faint); cursor:pointer; font:inherit; font-size:.86rem; padding:8px 6px;
  display:flex; align-items:baseline; gap:9px; white-space:nowrap; transition:color .25s;
}
.sm-nav button b{ font-weight:600; font-size:.74rem; letter-spacing:.06em; color:inherit; opacity:.8; }
.sm-nav button:hover{ color:var(--txt); }
.sm-nav button.on{ color:var(--txt); }
.sm-nav button.done b{ color:#32d2e6; opacity:1; }
.sm-nav .sm-next{
  margin-left:auto; color:var(--txt); border:1px solid var(--line-2); border-radius:3px; padding:7px 14px; gap:8px;
  transition:border-color .25s, background .25s;
}
.sm-nav .sm-next:hover{ border-color:rgba(255,255,255,.65); background:rgba(255,255,255,.04); }
.sm-nav .sm-next span{ transition:transform .3s var(--ease); }
.sm-nav .sm-next:hover span{ transform:translateX(3px); }
.sm-nav .sm-next.pulse{ animation:sm-pulse 2.4s ease-in-out infinite; }
@keyframes sm-pulse{ 0%,100%{ border-color:var(--line-2); } 50%{ border-color:rgba(50,210,230,.75); } }

/* ---------- narrow screens: the stage on top, the text below ---------- */
@media (max-width:860px){
  .sm-stage{ --cv:max(300px, 74vw); height:auto; min-height:0; padding-top:calc(var(--cv) + var(--nav)); }
  html.embedded .sm-stage{ height:auto; }
  .sm-stage > canvas{ height:var(--cv); }
  .sm-nav{ top:var(--cv); bottom:auto; overflow-x:auto; }
  .sm-nav button{ font-size:.8rem; }
  .sm-nav button:not(.sm-next) span{ display:none; }
  .sm-panel{ position:static; width:auto; background:none; overflow:visible; padding:22px 18px 30px; }
  .sm-load{ bottom:auto; height:var(--cv); }
}
@media (max-width:520px){
  .sm-nav button:not(.sm-next){ font-size:0; gap:0; }
  .sm-nav button:not(.sm-next) b{ font-size:.78rem; }
}

@media (prefers-reduced-motion:reduce){
  .sm-step .w, .sm-ctrl.on{ animation:none; opacity:1; transform:none; }
}