/* Page polish for the v5 update: the scheduler demo under the internship card, header details,
   and the motion layer from motion.js. Rules that hide anything are scoped to classes the script adds. */

/* header: lime reading progress on the dark bar, a shadow once the page moves, and room for the film link */
.reading-progress{background:var(--lime);box-shadow:0 0 10px #d4ff5059}
.site-header{transition:box-shadow .35s var(--ease)}
.site-header.is-scrolled{box-shadow:0 14px 34px -22px #000000d9}
@media(min-width:701px) and (max-width:950px){
  .site-header nav a:nth-child(3){display:block}
}
.site-header.has-glider nav a:after{display:none}
.nav-glider{position:absolute;left:0;top:0;width:1px;height:2px;background:var(--lime);transform-origin:0 0;opacity:0;pointer-events:none}
.nav-glider.is-ready{transition:transform .55s var(--ease),opacity .3s}

/* scheduler demo */
.sched{margin:18px 0 0;padding:28px 30px 24px;border-radius:16px;border:1px solid #1d282a;background:radial-gradient(70% 90% at 100% 0%,#d4ff500b,transparent 70%),#0f1517;color:#e7efeb;box-shadow:0 30px 70px -44px #10161999}
.sched-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.sched .section-kicker{color:#8a9c96}
.sched h3{font-size:24px;line-height:1.45;font-weight:550;letter-spacing:-.5px;margin:9px 0 8px;color:#f3f8f5}
.sched-intro>p:last-child{margin:0;max-width:470px;font-size:14px;line-height:1.8;color:#a3b3ad}
.sched-stats{display:grid;grid-template-columns:auto repeat(3,minmax(58px,auto));gap:0 28px;margin:0}
.sched-stats div{min-width:0}
.sched-stats dt{font-size:12px;color:#83958f;white-space:nowrap}
.sched-stats dd{margin:4px 0 0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.6px;color:#f4f8f6;font-variant-numeric:tabular-nums;white-space:nowrap}
.sched-clock dd{color:var(--lime)}
.sched-stats i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.sched .k-done{background:#cdf55a}
.sched .k-run{background:#eef6f2}
.sched .k-retry{box-shadow:inset 0 0 0 1.5px #ffb547}
.sched-canvas{display:block;width:100%;margin:24px 0 18px}
.sched-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px;align-items:center}
.sched-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sched-seg{display:inline-flex;padding:3px;border:1px solid #ffffff1c;border-radius:9px;background:#ffffff06}
.sched-seg button{border:0;background:transparent;color:#b6c4be;font-size:13px;padding:7px 13px;border-radius:6px;transition:background .25s,color .25s}
.sched-seg button:hover{color:#fff}
.sched-seg button[aria-pressed=true]{background:var(--lime);color:#172008;font-weight:600}
.sched-btn{border:1px solid #d4ff5059;background:#d4ff5012;color:#eaf6da;font-size:13px;padding:8px 14px;border-radius:8px;transition:background .25s,border-color .25s}
.sched-btn:hover{background:#d4ff5024;border-color:#d4ff5099}
.sched-btn.ghost{border-color:#ffffff22;background:transparent;color:#b6c4be}
.sched-btn.ghost:hover{border-color:#ffffff4d;color:#fff}
.sched button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sched-msg{margin:0;font-size:12px;line-height:1.75;color:#879892;transition:color .3s}
.sched-msg.is-live{color:#ffcd78}
@media(max-width:1000px){
  .sched-head{grid-template-columns:1fr}
  .sched-stats{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start}
  .sched-foot{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sched{padding:21px 18px 19px;border-radius:14px}
  .sched h3{font-size:21px}
  .sched-intro>p:last-child{font-size:13px}
  .sched-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
  .sched-clock{grid-column:1/-1}
  .sched-stats dd{font-size:22px}
  .sched-canvas{margin:20px 0 16px}
  .sched-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sched-seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .sched-seg button{padding:8px 0}
  .sched-btn{padding:9px 0}
}

/* motion layer: everything below needs the classes motion.js adds */
.mo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;-webkit-user-select:none;user-select:none}
.mo-split .mo-ch{display:inline-block;transform-origin:0 100%;transition:opacity .55s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0) * 34ms)}
.mo-split.mo-wait .mo-ch{opacity:0;transform:translateY(.42em) rotate(5deg)}

.mo .fact strong,.mo .internship-results strong,.mo .usage-stats strong{font-variant-numeric:tabular-nums}

.mo-reveal [data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.mo-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}

/* a soft light that follows the mouse on the larger cards */
.mo-spot{position:relative;isolation:isolate;--spot-fill:#d4ff5024;--spot-edge:#b5dc2e}
.mo-spot:before,.mo-spot:after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.mo-spot:after{inset:0;z-index:-1;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),var(--spot-fill),transparent 64%)}
.mo-spot:before{inset:-1px;z-index:3;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot-edge),transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.mo-spot.is-lit:before,.mo-spot.is-lit:after{opacity:1}
.exhibit-stage.mo-spot,.method-panel.mo-spot{--spot-fill:#d4ff5012;--spot-edge:#d4ff50a6}

.mo .personality-symbol{width:max-content;rotate:var(--turn,0deg);transition:rotate .9s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .mo-split.mo-wait .mo-ch,.mo-reveal [data-reveal]:not(.is-in){opacity:1;transform:none}
  .mo-spot:before,.mo-spot:after{display:none}
}