/* OPEC Fund Pavilion screen, COP31. Built on a fixed 1920×1080 stage that screen.js scales
   to whatever the player reports, so every size below is in real 1080p pixels. */

@font-face { font-family: "Gotham"; src: url("assets/fonts/Gotham-Light.woff2") format("woff2"); font-weight: 300; }
@font-face { font-family: "Gotham"; src: url("assets/fonts/Gotham-Book.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Gotham"; src: url("assets/fonts/Gotham-Medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Gotham"; src: url("assets/fonts/Gotham-Bold.woff2") format("woff2"); font-weight: 700; }

:root {
  --teal-hi: #4f9b9b;
  --teal: #3d898d;
  --teal-lo: #357b81;
  --ink: #0b3d4a;
  --blue: #003ea1;
  --line: rgba(255, 255, 255, .92);
  --fade: 700ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; }
body { font-family: "Gotham", "Helvetica Neue", Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }

.stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden;
  background: linear-gradient(160deg, var(--teal-hi) 0%, var(--teal) 45%, var(--teal-lo) 100%);
}
/* The swooshes drift slowly. The blend is baked into swoosh-light.png (white with alpha), so the
   moving layer is a plain transform the Fire stick's graphics chip can handle smoothly. */
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; object-fit: cover;
  will-change: transform; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  35%  { transform: translate3d(-6%, 3.5%, 0) scale(1.07) rotate(2.5deg); }
  70%  { transform: translate3d(4.5%, -3%, 0) scale(1.04) rotate(-2deg); }
  100% { transform: translate3d(-3%, -4.5%, 0) scale(1.09) rotate(1.5deg); }
}
.stage.loop-on .bg img { animation-play-state: paused; } /* hidden behind the videos anyway */

/* Scenes cross-fade; only one is .on at a time */
.scene { position: absolute; inset: 0; padding: 56px 96px 56px; opacity: 0; visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade); }
.scene.on { opacity: 1; visibility: visible; transition: opacity var(--fade) ease, visibility 0s; }

/* Logos: OPEC Fund 50 at left, COP31 at right, same optical height */
.brand { display: flex; justify-content: space-between; align-items: center; height: 136px; }
.logo-opec { height: 136px; width: auto; }
.logo-cop { height: 118px; width: auto; }

/* ---------- Agenda ---------- */
#agenda { display: flex; flex-direction: column; }
#agenda .cards { flex: 1; min-height: 0; align-content: start; overflow: hidden; }
.day-tag { vertical-align: middle; position: relative; top: -10px; margin-left: 20px; font-size: 30px; padding: 13px 28px 11px; }
.day-row { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 30px; }
.day { font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: -.01em; }
.clock { font-weight: 300; font-size: 56px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.cards { display: grid; gap: 22px; grid-auto-rows: max-content; }
.cards.two { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.card { border: 3px solid var(--line); border-radius: 28px; padding: 26px 40px 30px;
  transition: opacity var(--fade) ease; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-weight: 300; font-size: 30px; letter-spacing: .03em; }
.card-title { margin-top: 12px; font-weight: 700; font-size: 46px; line-height: 1.18;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-sub { margin-top: 6px; font-weight: 400; font-size: 30px; line-height: 1.3; opacity: .9;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cards.two .card-title { font-size: 38px; }
.cards.two .card-sub { font-size: 28px; }
.cards.dense .card { padding: 22px 36px 26px; }
.cards.dense .card-sub { display: none; }

.pill { display: inline-block; flex: none; background: #fff; color: var(--blue); border-radius: 999px;
  padding: 10px 24px 9px; font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }

/* Session states on the agenda */
.card.is-past { opacity: .42; }
.card.is-next { background: #fff; color: var(--ink); border-color: #fff; }
.card.is-next .pill { background: var(--teal); color: #fff; }
.card.is-next .card-meta { font-weight: 400; }

.empty { font-weight: 400; font-size: 48px; line-height: 1.35; max-width: 1300px; opacity: .95; }

/* ---------- Now on ---------- */
.now-body { margin-top: 84px; max-width: 1640px; }
.now-status { display: flex; align-items: center; gap: 32px; }
.now-status .pill { font-size: 32px; padding: 14px 32px 12px; }
.now-meta { font-weight: 300; font-size: 40px; letter-spacing: .03em; }
.now-title { margin-top: 48px; font-weight: 700; font-size: 96px; line-height: 1.1; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.now-sub { margin-top: 24px; font-weight: 400; font-size: 50px; line-height: 1.25; opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now-title.long { font-size: 80px; }

.speakers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 48px; margin-top: 56px; }
.speakers li { display: flex; align-items: center; gap: 22px; }
.speakers img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #fff; }
.speakers strong { display: block; font-weight: 700; font-size: 32px; line-height: 1.2; }
.speakers span { display: block; font-weight: 400; font-size: 25px; line-height: 1.3; opacity: .9; margin-top: 4px; }
#now.has-speakers .now-title { -webkit-line-clamp: 2; }

.now-foot { position: absolute; left: 96px; right: 96px; bottom: 64px; display: grid;
  grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 26px 48px; align-items: end; }
.progress { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: #fff; border-radius: 8px; transition: width 1s linear; }
.up-next { font-weight: 400; font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-next b { font-weight: 700; }
.now-foot .clock { font-size: 48px; }

/* ---------- Several sessions at once ---------- */
.now-multi { display: none; }
#now.multi .now-body { display: none; }
#now.multi .now-multi { display: grid; gap: 26px; margin-top: 44px; }
#now.multi .progress:not(.mcard-bar) { visibility: hidden; }
.mcard { border: 3px solid var(--line); border-radius: 28px; padding: 26px 40px 28px; }
.mcard-top { display: flex; align-items: center; gap: 26px; }
.mcard-top .pill { font-size: 26px; padding: 11px 26px 10px; }
.mcard-top .now-meta { font-size: 32px; }
.mcard-title { margin-top: 18px; font-weight: 700; font-size: 58px; line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-sub { margin-top: 8px; font-weight: 400; font-size: 32px; line-height: 1.25; opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-speakers { margin-top: 12px; font-weight: 500; font-size: 27px; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-bar { margin-top: 18px; height: 6px; }
.now-multi.dense { gap: 18px; margin-top: 30px; }
.now-multi.dense .mcard { padding: 18px 32px 20px; }
.now-multi.dense .mcard-title { font-size: 42px; -webkit-line-clamp: 1; }
.now-multi.dense .mcard-sub, .now-multi.dense .mcard-speakers { display: none; }
.now-multi.dense .mcard-top .now-meta { font-size: 28px; }

/* ---------- Media loop ---------- */
.scene.media { padding: 0; background: #000; }
.media video, .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 500ms ease; }
.media .show { opacity: 1; }
.media .contain { object-fit: contain; }
.next-bar { position: absolute; left: 56px; bottom: 48px; max-width: 1500px; padding: 22px 36px 20px; border-radius: 20px;
  background: rgba(16, 78, 86, .88); font-size: 32px; font-weight: 400; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-bar b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) { :root { --fade: 0ms; } .bg img { animation: none; } }