/* SQL Spreads – demo video thumbnail
   Scales with its container: every size is in cqw (1cqw = 1% of the box width).
   Designed at 1280 px wide; on the homepage the box is ~560 px. */

.ss-video {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #1F2A3C;
}

.ss-video__thumb {
  all: unset;
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  font-family: inherit;
  color: #FFFFFF;
}

.ss-video__thumb:focus-visible {
  outline: 3px solid #16934F;
  outline-offset: 3px;
}

.ss-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overall tint over the screenshot */
.ss-video__tint {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.20);
}

/* Big play button, centred in the area above the band */
.ss-video__play {
  position: absolute;
  left: 50%;
  top: 40.28%;
  width: 12.5cqw;
  height: 12.5cqw;
  translate: -50% -50%;
}

.ss-video__button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16934F;
  box-shadow: 0 1.1cqw 3.1cqw rgba(0, 0, 0, 0.4);
  animation: ss-breathe 2.8s ease-in-out infinite;
  transition: background-color 0.2s ease;
}

.ss-video__button svg {
  width: 5cqw;
  height: 5.625cqw;
  margin-left: 0.78cqw; /* optical centring of the triangle */
}

.ss-video__thumb:hover .ss-video__button,
.ss-video__thumb:focus-visible .ss-video__button {
  background: #0F7A40;
}

/* The two rings that glide outwards, half a cycle apart */
.ss-video__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1.5px, 0.234cqw) solid #FFFFFF;
  opacity: 0;
  animation: ss-ring 2.8s linear infinite;
  pointer-events: none;
}

.ss-video__ring--2 {
  animation-delay: -1.4s;
}

/* Dark band at the bottom */
.ss-video__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11.72cqw;
  box-sizing: border-box;
  padding: 0 4.375cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5cqw;
  background: rgba(17, 24, 39, 0.88);
}

.ss-video__intro {
  display: flex;
  align-items: center;
  gap: 1.875cqw;
  min-width: 0;
}

.ss-video__icon {
  flex-shrink: 0;
  width: 5.3125cqw;
  height: 5.3125cqw;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-video__icon svg {
  width: 2.03cqw;
  height: 2.34cqw;
}

.ss-video__text {
  display: flex;
  flex-direction: column;
  gap: 0.47cqw;
  min-width: 0;
}

.ss-video__title {
  font-size: 3.75cqw;
  font-weight: 700;
  line-height: 1.1;
}

.ss-video__subtitle {
  font-size: 2.34cqw;
  font-weight: 400;
  line-height: 1.2;
  color: #D7DEE8;
}

.ss-video__duration {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.78cqw;
  padding: 0.94cqw 1.875cqw;
  border-radius: 999px;
  background: #16934F;
  font-size: 2.34cqw;
  font-weight: 700;
  line-height: 1;
}

.ss-video__duration svg {
  width: 2.34cqw;
  height: 2.34cqw;
}

/* Small boxes (phones): no subtitle, fixed sizes so nothing grows between 340 and 480 px */
@container (max-width: 480px) {
  .ss-video__band { height: 60px; padding: 0 14px; }
  .ss-video__icon { display: none; }
  .ss-video__title { font-size: 20px; }
  .ss-video__subtitle { display: none; }
  .ss-video__duration { font-size: 14px; padding: 5px 10px; gap: 4px; }
  .ss-video__duration svg { width: 14px; height: 14px; }
  .ss-video__play { width: 60px; height: 60px; top: 41%; }
  .ss-video__button svg { width: 24px; height: 27px; margin-left: 4px; }
}

/* The embedded player that replaces the thumbnail on click */
.ss-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes ss-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* Ease-out growth with a soft fade-in and a long fade-out */
@keyframes ss-ring {
  0%   { transform: scale(1.000); opacity: 0; }
  5%   { transform: scale(1.078); opacity: 0.269; }
  10%  { transform: scale(1.149); opacity: 0.493; }
  15%  { transform: scale(1.212); opacity: 0.540; }
  20%  { transform: scale(1.268); opacity: 0.490; }
  25%  { transform: scale(1.318); opacity: 0.442; }
  30%  { transform: scale(1.361); opacity: 0.396; }
  35%  { transform: scale(1.399); opacity: 0.351; }
  40%  { transform: scale(1.431); opacity: 0.309; }
  45%  { transform: scale(1.458); opacity: 0.269; }
  50%  { transform: scale(1.481); opacity: 0.231; }
  55%  { transform: scale(1.500); opacity: 0.195; }
  60%  { transform: scale(1.515); opacity: 0.162; }
  65%  { transform: scale(1.526); opacity: 0.130; }
  70%  { transform: scale(1.535); opacity: 0.102; }
  75%  { transform: scale(1.541); opacity: 0.076; }
  80%  { transform: scale(1.546); opacity: 0.053; }
  85%  { transform: scale(1.548); opacity: 0.034; }
  90%  { transform: scale(1.549); opacity: 0.018; }
  95%  { transform: scale(1.550); opacity: 0.006; }
  100% { transform: scale(1.550); opacity: 0; }
}

/* Visitors who have asked for less motion get a still button */
@media (prefers-reduced-motion: reduce) {
  .ss-video__button,
  .ss-video__ring { animation: none; }
}