/* LUNARTECH RISE ACADEMY: "Programs" on index.html (#learn-more). The six bootcamps as a cinematic stage, one at a time.
   Each card: a picture set to the right so its subject stays clear, the name large in two tones, real figures, a solid button, and a
   panel of smoked glass over the picture with what the program actually builds or covers. A rail across the top shows all six and
   stays still while the pictures slide beneath it. The content comes from each program's own page (bootcamps/*.html); prices and
   hours left off the physical-AI programs are left off on purpose. It rotates by itself, on the terms in js/lunartech-programs.js. */

.lt-programs { --lt-slide: min(88vw, 1640px); --lt-card-h: clamp(36rem, 76vh, 48rem); --lt-card-h: clamp(36rem, 76svh, 48rem); --lt-pad: clamp(2rem, 3.4vw, 3.6rem); --lt-ease: cubic-bezier(0.16, 1, 0.3, 1); }

.lt-prog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; width: var(--lt-slide); margin: 0 auto; }
.lt-prog-title { margin: 0; font-size: clamp(2.6rem, 4.4vw, 5rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; text-transform: none; color: #f5f5f5; }
.lt-prog-lede { max-width: 34rem; margin: 1.1rem 0 0; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.6; color: #9a9a9a; }

.lt-prog-nav { display: flex; align-items: center; flex: none; gap: 0.6rem; }
.lt-prog-nav[hidden] { display: none; }
.lt-prog-count { margin: 0 0.9rem 0 0; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: #6f6f6f; }
.lt-prog-count span { color: #f5f5f5; }
.lt-prog-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: transparent; color: #e6e6e6; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, opacity 0.3s; }
.lt-prog-arrow svg { width: 16px; height: 16px; }
.lt-prog-arrow:hover { border-color: rgba(255, 255, 255, 0.34); background-color: rgba(255, 255, 255, 0.08); }
.lt-prog-arrow:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
/* pause / resume the rotation; shown by the script, which is what runs it */
.lt-prog-pause { margin-right: 0.35rem; }
.lt-prog-pause[hidden] { display: none; }
.lt-prog-pause .is-play, .lt-prog-pause.is-paused .is-pause { display: none; }
.lt-prog-pause.is-paused .is-play { display: block; }
.lt-prog-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lt-prog-stage { position: relative; margin: 2.4rem 0 5vh; }

/* A native scroller: the side padding lets the first and last cards reach the centre, and snap-stop means one swipe is one card */
.lt-prog-list { position: relative; display: flex; flex-direction: row; /* the template makes every ul a column */ gap: 1.2vw; margin: 0; padding: 0 calc((100% - var(--lt-slide)) / 2); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; transition: opacity 0.32s ease; }
.lt-prog-list.is-jumping { opacity: 0; } /* 0.32s = JUMP_MS in the script */
.lt-prog-list::-webkit-scrollbar { display: none; }
.lt-prog-list > li { display: block; flex: 0 0 var(--lt-slide); scroll-snap-align: center; scroll-snap-stop: always; }

.lt-prog-card { position: relative; display: block; width: 100%; height: var(--lt-card-h); overflow: hidden; border-radius: 26px; background-color: #050505; color: inherit; text-decoration: none; }
.lt-prog-card:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 4px; }
.lt-prog-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075); } /* a fine edge, over the picture */

/* the picture settles as its card arrives, and drifts a little against the slide */
.lt-prog-media { position: absolute; inset: 0; overflow: hidden; transform: scale(1.05); transition: transform 1.6s var(--lt-ease), opacity 0.6s ease; }
.lt-prog-list.is-ready > li:not(.is-active) .lt-prog-media { opacity: 0.42; }
.lt-prog-list.is-ready > li:not(.is-active) .lt-prog-card:hover .lt-prog-media { opacity: 0.68; }
.lt-prog-list > li.is-active .lt-prog-media, .lt-prog-list:not(.is-ready) .lt-prog-media { transform: none; }
.lt-prog-img { position: absolute; top: 0; left: 10%; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 22%; filter: brightness(0.86); transform: translate3d(calc(var(--lt-p, 0) * -6%), 0, 0); will-change: transform; transition: filter 0.5s ease; }
.lt-prog-card:hover .lt-prog-img, .lt-prog-card:focus-visible .lt-prog-img { filter: brightness(0.98); }
.lt-prog-card[href*="ai-engineering"] .lt-prog-img { object-position: 50% 50%; filter: brightness(1.04); }
.lt-prog-card[href*="ai-engineering"]:hover .lt-prog-img { filter: brightness(1.16); }
.lt-prog-card[href*="data-science"] .lt-prog-img { object-position: 50% 50%; filter: brightness(0.94); }
.lt-prog-card[href*="data-science"]:hover .lt-prog-img { filter: brightness(1.04); }
.lt-prog-card[href*="ai-for-executives"] .lt-prog-img { object-position: 50% 50%; filter: brightness(1.2); } /* the darkest picture: thin lines on black */
.lt-prog-card[href*="ai-for-executives"]:hover .lt-prog-img { filter: brightness(1.36); }
.lt-prog-card[href*="robotics"] .lt-prog-img { object-position: 50% 50%; filter: brightness(0.94); }
.lt-prog-card[href*="robotics"]:hover .lt-prog-img { filter: brightness(1.04); }
.lt-prog-card[href*="autonomous-systems"] .lt-prog-img { left: 0; object-position: 50% 82%; filter: brightness(1); } /* this picture's colour is all in its lower half */
.lt-prog-card[href*="embedded-edge-ai"] .lt-prog-img { filter: brightness(1); object-position: 50% 50%; }
.lt-prog-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, 0.97) 22%, rgba(5, 5, 5, 0.78) 38%, rgba(5, 5, 5, 0.2) 56%, rgba(5, 5, 5, 0) 68%),
  linear-gradient(0deg, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0) 34%),
  linear-gradient(180deg, rgba(5, 5, 5, 0.66) 0%, rgba(5, 5, 5, 0) 20%); }

/* the words: everything hangs from the bottom left, and comes in one after another */
.lt-prog-body { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; width: min(52%, 50rem); /* the cap leaves room for "Embedded & Edge AI" on one line at the name's largest size */ box-sizing: border-box; padding: 5rem 0 calc(6vh + 1.5rem) var(--lt-pad); font-family: 'Geist', sans-serif; }
.lt-prog-body > * { transition: opacity 0.8s ease, transform 1s var(--lt-ease); transition-delay: calc(var(--d, 0) * 70ms + 80ms); }
.lt-prog-body > :nth-child(2) { --d: 1; }
.lt-prog-body > :nth-child(3) { --d: 2; }
.lt-prog-body > :nth-child(4) { --d: 3; }
.lt-prog-body > :nth-child(5) { --d: 4; }
.lt-prog-list.is-ready > li:not(.is-active) .lt-prog-body > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.2s ease, transform 0.2s ease; transition-delay: 0s; }
.lt-prog-kind { margin: 0 0 1.1rem; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: #b4b8c0; }
.lt-prog-name { margin: 0; font-size: clamp(2.3rem, 4.3vw, 4.7rem); font-weight: 300; line-height: 1.03; letter-spacing: -0.03em; text-transform: none; text-wrap: balance; color: #fff; }
.lt-prog-name span { display: block; color: rgba(255, 255, 255, 0.42); }
.lt-prog-blurb { max-width: 34rem; margin: 1.3rem 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }

.lt-prog-stats { display: flex; margin: 1.8rem 0 0; }
.lt-prog-stat { display: block; padding: 0 clamp(1rem, 1.9vw, 1.9rem); border-left: 1px solid rgba(255, 255, 255, 0.14); }
.lt-prog-stat:first-child { padding-left: 0; border-left: 0; }
.lt-prog-stat b { display: block; font-size: clamp(1.45rem, 2.2vw, 2.4rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: #fff; }
.lt-prog-stat span { display: block; margin-top: 0.6rem; font-size: 11.5px; font-weight: 300; line-height: 1.3; white-space: nowrap; color: rgba(255, 255, 255, 0.52); }

.lt-prog-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin-top: 1.9rem; }
.lt-prog-go { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 9999px; background-color: #f2f3f5; font-size: 13.5px; font-weight: 400; white-space: nowrap; color: #08090b; transition: background-color 0.3s; }
.lt-prog-go svg { width: 15px; height: 15px; }
.lt-prog-card:hover .lt-prog-go, .lt-prog-card:focus-visible .lt-prog-go { background-color: #fff; }
.lt-prog-price { font-size: 14px; font-weight: 300; white-space: nowrap; color: rgba(255, 255, 255, 0.82); }

/* the panel: dark glass over the picture, top right, with a rim of light gathered at two corners. It fades by itself and not
   with an ancestor, which would blank its blur. */
.lt-prog-panel { position: absolute; z-index: 2; top: 78px; right: 20px; display: flex; flex-direction: column; gap: 1.35rem; width: clamp(18.5rem, 27%, 24rem); box-sizing: border-box; padding: 1.4rem 1.5rem 1.45rem; border-radius: 20px; font-family: 'Geist', sans-serif; background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%), rgba(6, 6, 8, 0.56); -webkit-backdrop-filter: blur(22px) saturate(125%) brightness(0.6); backdrop-filter: blur(22px) saturate(125%) brightness(0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 26px 60px -26px rgba(0, 0, 0, 0.9); transition: opacity 0.8s ease 0.18s, transform 1.1s var(--lt-ease) 0.18s; }
.lt-prog-panel::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: radial-gradient(220px 170px at 0 0, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 100%), radial-gradient(200px 150px at 100% 100%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 100%), linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)); -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 exclude, linear-gradient(#000 0 0); }
.lt-prog-list.is-ready > li:not(.is-active) .lt-prog-panel { opacity: 0; transform: translate3d(16px, 0, 0); transition: opacity 0.2s ease, transform 0.2s ease; }
.lt-prog-cap { margin: 0 0 0.6rem; font-size: 10.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: #aeb3bd; }
.lt-prog-items { display: block; margin: 0; padding: 0; list-style: none; }
.lt-prog-items li { display: flex; gap: 0.7rem; padding: 0.42rem 0; border-top: 1px solid rgba(255, 255, 255, 0.075); font-size: 13.5px; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.86); } /* size set on the li: the template styles every li itself */
.lt-prog-items li:first-child { border-top: 0; }
.lt-prog-items b { flex: none; width: 1.25rem; padding-top: 0.22em; font-size: 10.5px; font-weight: 400; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.34); }
.lt-prog-roles { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }

/* the rail: all six across the top of the stage, still while the pictures slide beneath it */
.lt-prog-rail { display: none; }

@media (min-width: 992px) {
  .lt-prog-count { display: none; } /* the rail shows where you are */
  .lt-prog-rail { position: absolute; z-index: 3; top: 0; left: 50%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: var(--lt-slide); box-sizing: border-box; margin-left: calc(var(--lt-slide) / -2); padding: 0 var(--lt-pad); pointer-events: none; }
  .lt-prog-rail::after { content: ''; position: absolute; right: var(--lt-pad); bottom: 0; left: var(--lt-pad); height: 1px; background-color: rgba(255, 255, 255, 0.13); }
  .lt-prog-tab { display: flex; align-items: center; gap: 9px; height: 58px; min-width: 0; padding: 0 6px 0 0; border: 0; background: none; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 300; text-align: left; white-space: nowrap; color: rgba(255, 255, 255, 0.54); cursor: pointer; pointer-events: auto; transition: color 0.3s; }
  .lt-prog-tab b { font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.34); }
  .lt-prog-tab:hover, .lt-prog-tab.is-active { color: #fff; }
  .lt-prog-tab:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -8px; border-radius: 10px; }
  .lt-prog-ink { position: absolute; z-index: 1; bottom: 0; left: 0; width: 0; height: 1px; background-color: rgba(255, 255, 255, 0.3); transition: transform 0.7s var(--lt-ease), width 0.7s var(--lt-ease); }
  .lt-prog-ink::after { content: ''; position: absolute; inset: 0; background-color: #e6e8ec; transform: scaleX(var(--lt-fill, 1)); transform-origin: left center; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .lt-prog-tab b { display: none; } /* room for the longest name */
  .lt-prog-tab { font-size: 12.5px; }
  .lt-prog-blurb { font-size: 14.5px; margin-top: 1rem; }
  .lt-prog-stats, .lt-prog-foot { margin-top: 1.35rem; }
  .lt-prog-items li { font-size: 13px; padding: 0.34rem 0; }
  .lt-prog-panel { gap: 1rem; padding: 1.15rem 1.25rem; }
}

/* below 992px there's no room to overlay: picture, then words. The lists stay on each program's own page, because written out
   here they made the card taller than the screen, which is no good for something that moves on by itself */
@media (max-width: 991px) {
  .lt-programs { --lt-pad: 1.5rem; }
  .lt-prog-title { font-size: 2.6rem; }
  .lt-prog-list > li { display: flex; }
  .lt-prog-card { display: flex; flex-direction: column; height: auto; border-radius: 22px; }
  .lt-prog-media { position: relative; inset: auto; flex: none; height: clamp(14rem, 34vh, 22rem); }
  .lt-prog-img, .lt-prog-card[href*="autonomous-systems"] .lt-prog-img { left: 0; }
  .lt-prog-media::after { background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0) 62%); }
  .lt-prog-body { position: relative; top: auto; bottom: auto; width: auto; margin-top: -2.4rem; padding: 0 var(--lt-pad) calc(var(--lt-pad) + 0.4rem); }
  .lt-prog-name { font-size: clamp(2.2rem, 6.4vw, 3.2rem); }
  .lt-prog-panel { display: none; }
}
@media (max-width: 767px) {
  .lt-programs { --lt-slide: 88vw; --lt-pad: 1.25rem; }
  .lt-prog-head { flex-wrap: wrap; gap: 1.25rem; }
  .lt-prog-intro { flex: 1 1 100%; }
  .lt-prog-title { font-size: 2.3rem; }
  .lt-prog-stage { margin-top: 1.8rem; }
  .lt-prog-list { gap: 2.5vw; }
  .lt-prog-blurb { font-size: 14.5px; }
}
@media (max-width: 479px) {
  .lt-prog-stat { padding: 0 0.85rem; }
  .lt-prog-stat b { font-size: 1.3rem; }
  .lt-prog-stat span { font-size: 11px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-prog-media, .lt-prog-img, .lt-prog-body > *, .lt-prog-panel, .lt-prog-arrow, .lt-prog-ink, .lt-prog-list { transition: none !important; }
  .lt-prog-media { transform: none; }
  .lt-prog-img { transform: none; }
}