/* styles.css — Trick-play, relative scrubbing */
:root {
  --overlay-max-width: 54rem; /* reduce container width ~25% */
  --overlay-padding: clamp(12px, 1.875vw, 24px); /* reduce padding ~25% */
  --text-color: #eaf2ff;
  --shadow: 0 2px 12px rgba(0,0,0,0.45);
  --blur: 12px;
  --fade-ms: 180ms;
}

@font-face {
  font-family: "TitleNew";
  src: url("assets/fonts/TitleNew.woff2") format("woff2"),
       url("assets/fonts/TitleNew.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TitleAged";
  src: url("assets/fonts/TitleAged.woff2") format("woff2"),
       url("assets/fonts/TitleAged.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--text-color);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
  overflow: hidden;
}

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.video-master { z-index: -2; opacity: 1; transition: opacity var(--fade-ms) ease; }
.video-proxy  { z-index: -1; opacity: 0; transition: opacity 80ms linear; }

.scrub-layer { position: fixed; inset: 0; z-index: 10; cursor: grab; }
.scrub-layer.dragging { cursor: grabbing; }

.overlay {
  position: fixed; inset: 0;
  display: grid; place-items: start center;
  pointer-events: none;
}
.banner-wrapper {
  margin-top: 15vh;
  width: min(92vw, var(--overlay-max-width));
  position: relative;
  display: grid;
}
.banner {
  grid-area: 1 / 1;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border-radius: 12px; /* shrink radius ~25% */
  padding: clamp(12px, 2.25vw, 21px); /* reduce padding ~25% */
  box-shadow: var(--shadow); text-align: center;
  transition: opacity var(--fade-ms) linear;
}
.banner-new {
  font-family: "TitleNew", ui-serif, Georgia, "Times New Roman", Times, serif;
  opacity: 1;
}
.banner-aged {
  font-family: "TitleAged", ui-serif, Georgia, "Times New Roman", Times, serif;
  opacity: 0;
}
.title {
  font-size: clamp(1.5rem, 3.75vw, 3.1875rem); /* shrink font ~25% */
  font-weight: 700; letter-spacing: 0.02em; margin: 0 0 0.25em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.subtitle { margin: 0 0 0.4em; font-size: clamp(0.825rem, 1.725vw, 1.2rem); /* shrink ~25% */ font-weight: 500; opacity: 0.95; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.byline { margin: 0; font-size: 0.75rem; /* shrink ~25% */ opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .banner { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .video-master, .video-proxy { transition: none; }
}
.noscript {
  position: fixed; top: 0; left: 0; right: 0;
  background: #e74c3c; color: #fff; padding: 10px 12px; text-align: center;
  font-weight: 600; z-index: 9999;
}