/* The Colosseum crest (crest.js crestSeal(), templates/journey/_crest.html crest_seal()): ArenaSweats' own ornament for
   portraits, league crests and item or augment icons. Two octagonal arena walls with seat ticks between them (the
   j-crest-* symbols in _icons.html, painted once), a laurel wreath, a short glint of light running round the outer
   wall, eight studs that flare in turn as the glint passes, and a breathing light behind. Nothing turns: the motion is
   one small SVG dash and opacity. The walls draw themselves in and the laurel rises on entrance.

   Host: .j-crest with --crest-size (default 200px); everything scales from it. Optional --crest-light-rgb (default
   gold) tints the light behind. Centre pieces are documented in crest.js. */

.j-crest {
  --crest-size: 200px;
  --crest-light-rgb: var(--j-gold-rgb);
  --glint: 9.6s;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--crest-size);
  height: var(--crest-size);
  flex: none;
}

.j-crest__seal {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.j-crest__light {
  position: absolute;
  inset: -3%;
  background: radial-gradient(closest-side, rgba(var(--crest-light-rgb), 0.26), rgba(var(--crest-light-rgb), 0.08) 55%, rgba(var(--crest-light-rgb), 0) 100%);
  animation: j-breathe var(--j-breathe-glow) ease-in-out infinite;
}

/* The artwork's viewBox is 240 for a 200 crest: the laurel reaches outside the walls. */
.j-crest__art {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  overflow: visible;
}

.j-crest__floor {
  fill: rgba(var(--j-ink-rgb), 0.66);
}

.j-crest__wall {
  fill: none;
  stroke: url(#j-crest-gold);
  stroke-width: 1.6;
  stroke-dasharray: 100;
  animation: j-crest-draw 1.5s var(--j-ease) 0.25s backwards;
}

.j-crest__wall--inner {
  stroke: rgba(var(--j-gold-rgb), 0.6);
  stroke-width: 1;
  animation-delay: 0.45s;
}

.j-crest__seats {
  fill: none;
  stroke: rgba(var(--j-gold-rgb), 0.5);
  stroke-width: 1;
}

.j-crest__laurel {
  transform-origin: 120px 226px;
  animation: j-crest-laurel 1.1s var(--j-ease) 0.55s backwards;
}

.j-crest__leaves {
  fill: url(#j-crest-gold);
  opacity: 0.92;
}

.j-crest__stem {
  fill: none;
  stroke: rgba(var(--j-gold-rgb), 0.75);
  stroke-width: 1.2;
}

@keyframes j-crest-draw {
  from { stroke-dashoffset: 100; }
}

@keyframes j-crest-laurel {
  from { opacity: 0; transform: scale(0.86); }
}

/* The glint: a short bright dash running round the outer wall once per --glint, starting at the top. */
.j-crest__glint {
  fill: none;
  stroke: var(--j-gold-25);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  animation: j-crest-glint var(--glint) linear calc(var(--glint) * -0.6875) infinite;
}

.j-crest__glint--halo {
  stroke: rgba(var(--j-gold-200-rgb), 0.35);
  stroke-width: 7;
  stroke-dasharray: 9 91;
}

@keyframes j-crest-glint {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* Studs on the eight walls, clockwise from the top (--i): each flares as the glint passes it. */
.j-crest__studs {
  position: absolute;
  inset: 0;
}

.j-crest__studs i {
  --stud: max(4px, calc(var(--crest-size) * 0.035));
  position: absolute;
  width: var(--stud);
  height: var(--stud);
  margin: calc(var(--stud) / -2) 0 0 calc(var(--stud) / -2);
  rotate: 45deg;
  border: 1px solid rgba(var(--j-gold-rgb), 0.85);
  background: var(--j-coal-950);
}

.j-crest__studs i:nth-child(1) { --i: 0; left: 50%; top: 9.25%; }
.j-crest__studs i:nth-child(2) { --i: 1; left: 78.8%; top: 21.2%; }
.j-crest__studs i:nth-child(3) { --i: 2; left: 90.75%; top: 50%; }
.j-crest__studs i:nth-child(4) { --i: 3; left: 78.8%; top: 78.8%; }
.j-crest__studs i:nth-child(5) { --i: 4; left: 50%; top: 90.75%; }
.j-crest__studs i:nth-child(6) { --i: 5; left: 21.2%; top: 78.8%; }
.j-crest__studs i:nth-child(7) { --i: 6; left: 9.25%; top: 50%; }
.j-crest__studs i:nth-child(8) { --i: 7; left: 21.2%; top: 21.2%; }

.j-crest__studs i::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--j-gold-100);
  box-shadow: 0 0 10px rgba(var(--j-gold-200-rgb), 0.9);
  opacity: 0;
  animation: j-crest-stud var(--glint) linear infinite;
  animation-delay: calc(var(--i) * var(--glint) / 8 + var(--glint) * 0.04);
}

@keyframes j-crest-stud {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 0.12; }
  100% { opacity: 0; }
}

/* ---------- Centre pieces ---------- */

/* Portrait: an octagonal gold frame holding an <img> or a background-image span. */
.j-crest__portrait {
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  position: relative;
  width: 56%;
  height: 56%;
  padding: max(2px, calc(var(--crest-size) * 0.01));
  clip-path: var(--oct);
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-300) 32%, var(--j-gold-600) 58%, var(--j-gold-200) 82%, var(--j-gold-500));
}

.j-crest__portrait > * {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: var(--oct);
  background-color: var(--j-coal-950);
  background-size: cover;
  background-position: center;
  object-fit: cover;
}

.j-crest__portrait > * > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon: a square frame that shows a square item or augment icon whole (no diamond clipping). */
.j-crest__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46%;
  height: 46%;
  padding: max(2px, calc(var(--crest-size) * 0.012));
  border-radius: 3px;
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-300) 32%, var(--j-gold-600) 58%, var(--j-gold-200) 82%, var(--j-gold-500));
  box-shadow: 0 0 0 1px rgba(var(--j-ink-rgb), 0.85), 0 0 calc(var(--crest-size) * 0.16) rgba(var(--crest-light-rgb), 0.3);
}

.j-crest__icon--silver {
  background: var(--j-metal-silver, linear-gradient(160deg, var(--j-ember-100), var(--j-ember-400) 50%, var(--j-ember-200)));
}

.j-crest__icon--prismatic {
  background: var(--j-fill-prismatic);
}

.j-crest__icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: contain;
  background: var(--j-coal-950);
}

/* Emblem: a league crest image, unframed. */
.j-crest__emblem {
  position: relative;
  width: 54%;
  height: 54%;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(var(--j-shadow-rgb), 0.6));
}

/* Summoner level on a small octagon seal where the laurel stems meet. */
.j-crest__level.j-seal {
  --size: calc(var(--crest-size) * 0.18);
  position: absolute;
  bottom: -3%;
  left: 50%;
  margin-left: calc(var(--size) / -2);
}

.j-crest__level b,
.j-crest__level span {
  font-family: var(--j-display);
  font-weight: 400;
  font-size: max(10px, calc(var(--crest-size) * 0.065));
  color: var(--j-gold-100);
}