/* STEM Bills showcase: full-screen slideshow for a hallway or lobby screen.
   Everything is sized in --u (1/100 of a 16:9 frame that fits the window),
   so the layout holds on a 1080p TV, a 4K panel or a laptop. */
:root {
  --sluh-navy: #003366;
  --sluh-blue: #005588;
  --spirit-blue: #88ccec;
  --dark-gray: #777777;
  --light-gray: #eeeeee;
  --warm-gray: #ccccbb;
  --navy-rgb: 0, 51, 102;

  --u: min(1vw, 1.7778vh);
  --fade: 1.4s;
  --title: "Bree Serif", Georgia, serif;
  --body: "Nunito", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sluh-navy);
  color: #fff;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--sluh-navy); }
.stage.idle { cursor: none; }

/* ---- photo layers (two, cross-faded) --------------------------------- */
.layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade) ease;
  overflow: hidden;
}
.layer.show { opacity: 1; }
.layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: var(--origin, 50% 50%);
  will-change: transform;
}
.layer.kb img { animation: kenburns var(--kb-dur, 9s) ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(var(--kb-from, 1.0)); }
  to   { transform: scale(var(--kb-to, 1.09)); }
}

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 18, 40, 0.55) 0%, rgba(0, 18, 40, 0) 20%),
    linear-gradient(to top, rgba(var(--navy-rgb), 0.94) 0%, rgba(var(--navy-rgb), 0.78) 24%, rgba(var(--navy-rgb), 0) 56%);
  transition: opacity var(--fade) ease;
}
.stage.is-intro .scrim { opacity: 0; }

/* ---- top bar ---------------------------------------------------------- */
.topbar {
  position: absolute; top: calc(3.2 * var(--u)); left: calc(4.5 * var(--u)); right: calc(4.5 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.sluh-logo { height: calc(4.6 * var(--u)); width: auto; display: block; }
.place {
  font-weight: 800;
  font-size: calc(1.05 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spirit-blue);
}

/* ---- caption (photo slides) ------------------------------------------ */
.caption {
  position: absolute;
  left: calc(4.5 * var(--u));
  bottom: calc(8.2 * var(--u));
  width: calc(66 * var(--u));
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.caption.out { opacity: 0; transform: translateY(calc(1 * var(--u))); }
.stage.is-intro .caption { opacity: 0; pointer-events: none; }

.label {
  margin: 0 0 calc(0.6 * var(--u));
  font-weight: 800;
  font-size: calc(1.1 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spirit-blue);
}
.caption h2 {
  margin: 0;
  font-family: var(--title);
  font-weight: 400;
  font-size: calc(4.3 * var(--u));
  line-height: 1.08;
  text-wrap: balance;
}
.caption .text {
  margin: calc(1.1 * var(--u)) 0 0;
  font-size: calc(1.6 * var(--u));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.93);
  text-wrap: pretty;
}
.photo-caption {
  margin: calc(1 * var(--u)) 0 0;
  padding-left: calc(1 * var(--u));
  border-left: calc(0.25 * var(--u)) solid var(--spirit-blue);
  font-size: calc(1.3 * var(--u));
  font-weight: 700;
  color: #fff;
  transition: opacity 0.5s ease;
}
.photo-caption:empty { display: none; }

.badge {
  position: absolute;
  right: calc(4.5 * var(--u));
  bottom: calc(8.2 * var(--u));
  width: calc(10.5 * var(--u));
  height: auto;
  transition: opacity 0.6s ease;
}
.stage.is-intro .badge { opacity: 0; }

/* ---- intro slide ------------------------------------------------------ */
.intro {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u)) calc(4.5 * var(--u));
  background: linear-gradient(160deg, var(--sluh-navy) 0%, var(--sluh-navy) 45%, var(--sluh-blue) 100%);
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.intro.show { opacity: 1; }
.intro[hidden] { display: flex; visibility: hidden; }
.intro-text { max-width: calc(54 * var(--u)); }
.intro .label { font-size: calc(1.4 * var(--u)); }
.intro h1 {
  margin: 0;
  font-family: var(--title);
  font-weight: 400;
  font-size: calc(8.5 * var(--u));
  line-height: 1;
}
.intro .lede {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(2.2 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}
.intro-logo { width: calc(30 * var(--u)); height: auto; flex: none; }

/* text-only course slide (a course with no photos yet) */
.stage.is-textonly .layer { opacity: 0; }
.stage.is-textonly { background: linear-gradient(160deg, var(--sluh-navy) 0%, var(--sluh-navy) 45%, var(--sluh-blue) 100%); }
.stage.is-textonly .scrim { opacity: 0; }

/* ---- course bar ------------------------------------------------------- */
.coursebar {
  position: absolute; left: calc(4.5 * var(--u)); right: calc(4.5 * var(--u)); bottom: calc(2.6 * var(--u));
  display: flex; gap: calc(1.2 * var(--u));
  z-index: 2;
}
.coursebar[hidden] { display: none; }
.coursebar .seg { flex: 1 1 0; min-width: 0; cursor: pointer; }
.coursebar .seg-name {
  display: block;
  font-size: calc(0.95 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: calc(0.55 * var(--u));
  transition: color 0.4s ease;
}
.coursebar .seg.active .seg-name { color: #fff; }
.coursebar .track {
  height: calc(0.32 * var(--u));
  min-height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.coursebar .fill {
  height: 100%; width: 0;
  border-radius: 999px;
  background: var(--spirit-blue);
}
.coursebar .seg.done .fill { width: 100%; background: rgba(255, 255, 255, 0.55); }

/* ---- on-screen controls (appear on mouse move) ------------------------ */
.controls {
  position: absolute; top: calc(3 * var(--u)); left: 50%;
  transform: translate(-50%, -8px);
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0, 20, 45, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.controls.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.controls button, .controls a {
  all: unset;
  cursor: pointer;
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: #fff; font-size: 18px; font-weight: 600;
}
.controls a { font-size: 14px; }
.controls button:hover, .controls a:hover { background: rgba(255, 255, 255, 0.14); }
.controls button:focus-visible, .controls a:focus-visible { outline: 2px solid var(--spirit-blue); }
.controls .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.2); margin: 0 4px; }

.empty {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-size: calc(2 * var(--u)); text-align: center;
}
.empty[hidden] { display: none; }
.empty a { color: var(--spirit-blue); }

/* editor preview iframe: no chrome */
.embed .controls, .embed .coursebar .seg { pointer-events: none; }
.embed .stage { cursor: default; }

/* portrait screens and phones: bigger type, caption full width, badge up top */
@media (max-aspect-ratio: 1/1) {
  :root { --u: min(2.6vw, 1.4vh); }
  .caption { width: auto; right: calc(4.5 * var(--u)); bottom: calc(9 * var(--u)); }
  .caption h2 { font-size: calc(5.2 * var(--u)); }
  .caption .text { font-size: calc(2.1 * var(--u)); }
  .badge { top: calc(10 * var(--u)); bottom: auto; width: calc(13 * var(--u)); }
  .coursebar .seg-name { display: none; }
  .intro { flex-direction: column-reverse; justify-content: center; align-items: flex-start; padding-right: calc(4.5 * var(--u)); }
  .intro-logo { width: calc(34 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .layer.kb img { animation: none; }
}