html {
  height: 100%
}

body {
  margin: 0;
  min-height: 100%;
  /* Light grey. Matches background_color in manifest.json so the PWA
     launch colour and the splash agree with no flash between them. */
  background-color: #0D0D0D;
  background-size: 100% 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

.stretch {
  display:block;
  width:100%; height:100%;
}

.cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}

.bottom {
  position: absolute;
  bottom: 5%;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}

.bottom-image {
    position: absolute; /* Position relative to the .container */
    bottom: 40px; /* 40px from the bottom */
    width: 210px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    left: 50%; /* Start from the horizontal center */
    transform: translateX(-50%); /* Adjust to truly center the image */
}
/* Scopos splash mark: vector so it stays sharp at any density, with a slow
   breathing pulse. Motion is deliberately minimal, and it is disabled
   entirely for users who ask for reduced motion. */
.splash-mark {
  width: 176px;
  height: 176px;
  object-fit: contain;
  animation: scopos-pulse 2.4s ease-in-out infinite;
}

@keyframes scopos-pulse {
  /* .center positions via translate(-50%, -50%); the keyframes must carry it
     too, or the scale replaces it and the mark drifts off centre. */
  0%, 100% { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-mark { animation: none; }
}