/* SHARED QUADRILLE LEVEL PAGES */

.quadrille-level-page {
  --quadrille-level-accent: #a9c0b3;
  --quadrille-divider-image: url("../../assets/images/quadrille/basic/frame-green.png");
  overflow: hidden;
  background: #fff;
}

.quadrille-level-page[data-quadrille-level="intermediate"] {
  --quadrille-level-accent: #c7a76b;
  --quadrille-divider-image: url("../../assets/images/quadrille/intermediate/frame-gold.png");
}

.quadrille-level-page[data-quadrille-level="advanced"] {
  --quadrille-level-accent: #A4BBAC;
  --quadrille-divider-image: url("../../assets/images/quadrille/advanced/frame-gold.png");
}

.quadrille-level-arena,
.quadrille-level-outro {
  position: relative;
  background-image: url("../../assets/images/quadrille/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.quadrille-level-arena {
  height: 520px;
}

.quadrille-level-paper {
  position: relative;
  z-index: 2;
  padding-top: 475px;
  background: #fff;
  color: #111;
}

.quadrille-level-paper::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -62px;
  left: 0;
  width: 100%;
  height: 78px;
  background-image: var(--quadrille-torn-top);
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Four complete ribbon pieces: two on each side of the level badge. */
.quadrille-level-ribbon-row {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 50%;
  width: 128%;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.quadrille-level-ribbon-row img {
  display: block;
  width: calc(100% + 3px);
  max-width: none;
  height: auto;
  object-fit: fill;
}

.quadrille-level-ribbon-row img:nth-child(2),
.quadrille-level-ribbon-row img:nth-child(3),
.quadrille-level-ribbon-row img:nth-child(4) {
  margin-left: -3px;
}

.quadrille-level-badge {
  position: absolute;
  z-index: 7;
  top: -45px;
  left: 50%;
  width: 315px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

/* Advanced: one large green bow centered on every gold bow. */
.quadrille-advanced-bow-overlays {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: 128%;
  height: 250px;
  transform: translateX(-50%);
  pointer-events: none;
}

.quadrille-advanced-bow-overlay {
  position: absolute;
  top: 60px;
  width: 155px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.quadrille-advanced-bow-overlay.bow-overlay-1 {
  left: 12.5%;
}

.quadrille-advanced-bow-overlay.bow-overlay-2 {
  left: 37.5%;
}

.quadrille-advanced-bow-overlay.bow-overlay-3 {
  left: 62.5%;
}

.quadrille-advanced-bow-overlay.bow-overlay-4 {
  left: 87.5%;
}

.quadrille-level-badge-copy {
  position: absolute;
  z-index: 8;
  top: 112px;
  left: 50%;
  width: 180px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.quadrille-level-badge-copy strong,
.quadrille-level-badge-copy span {
  display: block;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
}

.quadrille-level-badge-copy strong {
  color: #83a697;
  font-size: 34px;
  line-height: 1;
}

.quadrille-level-badge-copy span {
  margin-top: 3px;
  color: #d2ad72;
  font-size: 22px;
  line-height: 1;
}

.quadrille-movement-section {
  position: relative;
  width: min(1760px, 96vw);
  margin: 0 auto;
  padding: 0 0 155px;
}

.quadrille-movement-section-individual {
  padding-bottom: 185px;
}

.quadrille-movement-section-group {
  padding-top: 62px;
  padding-bottom: 165px;
}

.quadrille-movement-section-circle {
  padding-top: 62px;
  padding-bottom: 175px;
}

.quadrille-movement-section-formations {
  padding-top: 62px;
  padding-bottom: 250px;
}

.quadrille-movement-heading {
  position: relative;
  width: max-content;
  margin: 0 auto 105px;
  text-align: center;
}

.quadrille-movement-note {
  margin: 0 0 7px;
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}

.quadrille-movement-title-wrap {
  position: relative;
  width: max-content;
  margin: 0 auto;
}

.quadrille-movement-title-wrap h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.quadrille-movement-title-wrap span {
  position: absolute;
  top: 25px;
  left: 55%;
  color: var(--quadrille-level-accent);
  font-family: "Dancing Script", cursive;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.quadrille-level-page[data-quadrille-level="advanced"] .quadrille-movement-title-wrap h2 {
  color: #A4BBAC;
}

.quadrille-level-page[data-quadrille-level="advanced"] .quadrille-movement-title-wrap span {
  color: #d6ad5b;
}

.quadrille-movement-grid {
  display: grid;
  grid-template-columns: repeat(var(--movement-columns), 250px);
  justify-content: space-between;
  align-items: start;
  column-gap: 55px;
  row-gap: 100px;
}

.quadrille-movement-card {
  width: 250px;
  min-height: 245px;
  text-align: center;
}

.quadrille-movement-media {
  position: relative;
  width: 190px;
  height: 155px;
  margin: 0 auto 20px;
  overflow: visible;
}

.quadrille-movement-section-formations .quadrille-movement-media {
  width: 240px;
  height: 190px;
}

.quadrille-movement-image,
.quadrille-movement-video {
  position: absolute;
  display: block;
}

.quadrille-movement-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 180ms ease;
}

.quadrille-level-page[data-quadrille-level="advanced"]
  .quadrille-movement-image[src$="/braid.png"],
.quadrille-level-page[data-quadrille-level="advanced"]
  .quadrille-movement-image[src$="/steel.png"] {
  transform: rotate(90deg) scale(1.60);
  transform-origin: center;
}

.quadrille-movement-video {
  z-index: 2;
  left: 50%;
  bottom: -6px;
  width: 225px;
  height: 225px;
  max-width: none;
  border-radius: 58px 0 58px 0;
  background: #fff;
  object-fit: cover;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.quadrille-movement-section-formations .quadrille-movement-video {
  width: 270px;
  height: 230px;
}

.quadrille-movement-media.is-playing .quadrille-movement-image {
  opacity: 0;
}

.quadrille-movement-media.is-playing .quadrille-movement-video {
  opacity: 1;
}

.quadrille-movement-name {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}

.quadrille-movement-description {
  width: 280px;
  margin: 6px 0 0 50%;
  transform: translateX(-50%);
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.quadrille-level-divider {
  position: relative;
  width: 100%;
  height: 74px;
  margin: 0 0 48px;
  background: var(--quadrille-level-accent);
}

.quadrille-level-divider::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 34px;
  background-image: var(--quadrille-divider-image);
  background-position: center;
  background-size: auto 34px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.quadrille-level-outro {
  z-index: 1;
  height: 315px;
  background-position: center bottom;
}

.quadrille-level-outro::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -20px;
  left: 0;
  width: 100%;
  height: 78px;
  background-image: var(--quadrille-torn-bottom);
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

.quadrille-level-outro::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 86px;
  background: #392d25;
  -webkit-mask-image: var(--quadrille-torn-top);
  mask-image: var(--quadrille-torn-top);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}