:root{
  --bg:#0f1115;
  --panel:#0b0c0ecc;
  --accent:#ffb86b;
  --text:#e6eef8;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Roboto,system-ui,Arial;
  background:linear-gradient(180deg,#07070a, #0f1115);
  color:var(--text);
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
}
.site-title{font-weight:600;margin:0 0 0px 0;text-align:center}
.sub-title{font-weight:600;margin:0 0 14px 0;text-align:center}
.showcase{
  display:flex;
  justify-content:center;
  width:100%;
  padding:0 16px;
  box-sizing:border-box;
}
.stage {
  position: relative;
  background: transparent;
  aspect-ratio: 16/9;
  width: min(100%, calc((100vh - 120px) * 16 / 9));
  max-height: calc(100vh - 120px);
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
}
.video-wrap{position:absolute;inset:0;transform-origin:center center}
.player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}
.player.active{opacity:1}
.overlay{position:absolute;right:0;bottom:12px;padding:12px;background:none;display:flex;justify-content:flex-end;align-items:flex-end}
.caption{font-size:1.125rem;font-weight:600;color:var(--text);align-self:flex-end;flex-shrink:0}

.details-overlay{background:rgba(0,0,0,0.3);color:var(--text);padding:12px 14px;border-radius:8px;width:fit-content;font-size:0.95rem;line-height:1.4;backdrop-filter:blur(4px);flex-shrink:0}

.progress-wrap{position:absolute;left:0;right:0;bottom:0;height:10px;background:rgba(255,255,255,0.06);border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.progress{height:100%;width:0%;background:linear-gradient(90deg,var(--accent), #ffd6a8);transition:width 0.08s linear;border-radius:10px;box-shadow:0 6px 20px rgba(255,184,107,0.14);transform:translateZ(0)}

.overlay-title{font-size:0.85rem;font-weight:700;color:var(--text);margin-bottom:6px}
.overlay-body{font-size:0.8rem;color:rgba(230,238,248,0.95);line-height:1.4}
.overlay-body a{color:#ffb86b;text-decoration:none;font-weight:600}
.overlay-body a:hover{text-decoration:underline}
.details-overlay{display:block}

/* Ken Burns now applied via Web Animations API in script.js */

/* Responsive */
@media (max-width:880px){
  .showcase {
    padding: 0;
  }
  .stage {
    height: 38vh;
    aspect-ratio: 21/9;
    width: 100vw;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
  }
  .overlay {
    padding: 4px 8px;
  }
  .details-overlay {
    padding: 6px 8px;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  .overlay-title {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }
  .overlay-body {
    font-size: 0.6rem;
    line-height: 1.2;
  }
  .caption {
    font-size: 0.8rem;
  }
}