:root {
  /* Individual optical sizing: tune after installing the original logo files. */
  --profluid-width: 64vw;
  --profluid-height: 44vh;
  --vcs-width: 66vw;
  --vcs-height: 42vh;
  --psp-width: 66vw;
  --psp-height: 46vh;

  /* Unitless milliseconds. Hold begins AFTER the incoming fade completes. */
  --hold-ms: 8000;
  --fade-ms: 1000;

  /* Reserve the top 15%; this moves the remaining area's center down 7.5vh.
     Set to 0vh to disable. Keep between 0vh and 30vh. */
  --teams-banner-safe-offset: 15vh;
  --background: #11163A;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
}
.signage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--background);
}
.slide {
  position: absolute;
  inset: clamp(0vh, var(--teams-banner-safe-offset), 30vh) 0 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity calc(var(--fade-ms) * 1ms) linear;
  pointer-events: none;
}
.slide.is-active { opacity: 1; }
.slide img {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  max-width: 80vw;
  max-height: 60%;
  object-fit: contain;
}
[data-brand="profluid"] { --logo-width: var(--profluid-width); --logo-height: var(--profluid-height); }
[data-brand="vcs"] { --logo-width: var(--vcs-width); --logo-height: var(--vcs-height); }
[data-brand="psp"] { --logo-width: var(--psp-width); --logo-height: var(--psp-height); }
.slide.is-unavailable img { visibility: hidden; }
/* Honor reduced motion without interrupting the sequence. */
@media (prefers-reduced-motion: reduce) {
  :root { --fade-ms: 0; }
}