/* 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
   opacity only. 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 (with a wider, fainter halo) running round the outer wall once per --glint, starting
   at the top. Each of the eight walls is a strip of ten segments, and each segment fades in and out as the dash passes
   over it, so the motion is opacity only. Firefox repaints an animated SVG dash on the main thread every frame (about
   a third of a CPU core for one crest, 9 Nov 2026), while opacity runs on the compositor. Timing: the dash covers 6% of
   the lap (the halo 9%) and a segment 1.25%, so a segment ramps up over 1.25%, holds while covered, and ramps down. */
.j-crest__glint {
  position: absolute;
  inset: -10%; /* the artwork's box: the octagon below is in its 240-unit viewBox */
}

/* One wall: starts at its vertex (left/top, clockwise from the lower right) and turns 45deg further each time. */
.j-crest__glint > i {
  --w: 0;
  position: absolute;
  width: 30.58%; /* 73.4 of 240 */
  height: calc(var(--crest-size) * 0.035); /* the halo's 7 units */
  margin-top: calc(var(--crest-size) * -0.0175);
  transform-origin: 0 50%;
  transform: rotate(calc(135deg + 45deg * var(--w)));
}

.j-crest__glint > i:nth-child(1) { --w: 0; left: 86.96%; top: 65.29%; }
.j-crest__glint > i:nth-child(2) { --w: 1; left: 65.29%; top: 86.96%; }
.j-crest__glint > i:nth-child(3) { --w: 2; left: 34.71%; top: 86.96%; }
.j-crest__glint > i:nth-child(4) { --w: 3; left: 13.04%; top: 65.29%; }
.j-crest__glint > i:nth-child(5) { --w: 4; left: 13.04%; top: 34.71%; }
.j-crest__glint > i:nth-child(6) { --w: 5; left: 34.71%; top: 13.04%; }
.j-crest__glint > i:nth-child(7) { --w: 6; left: 65.29%; top: 13.04%; }
.j-crest__glint > i:nth-child(8) { --w: 7; left: 86.96%; top: 34.71%; }

/* A segment: ::before is the halo, ::after the dash. --g counts segments round the wall from the start; the delays put
   the dash's leading edge at segment g when the lap reaches g * 1.25%, matching the studs below. */
.j-crest__glint b {
  --s: 0;
  --g: calc(var(--w) * 10 + var(--s));
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 10%);
  width: 10%;
}

.j-crest__glint b:nth-child(2) { --s: 1; }
.j-crest__glint b:nth-child(3) { --s: 2; }
.j-crest__glint b:nth-child(4) { --s: 3; }
.j-crest__glint b:nth-child(5) { --s: 4; }
.j-crest__glint b:nth-child(6) { --s: 5; }
.j-crest__glint b:nth-child(7) { --s: 6; }
.j-crest__glint b:nth-child(8) { --s: 7; }
.j-crest__glint b:nth-child(9) { --s: 8; }
.j-crest__glint b:nth-child(10) { --s: 9; }

.j-crest__glint b::before,
.j-crest__glint b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation: j-crest-glint-halo var(--glint) linear infinite;
  animation-delay: calc((var(--g) * 0.0125 - 1.7775) * var(--glint));
}

.j-crest__glint b::before {
  top: 0;
  bottom: 0;
  background: rgba(var(--j-gold-200-rgb), 0.35);
}

.j-crest__glint b::after {
  top: 34.3%; /* the dash's 2.2 units, centred in the halo's 7 */
  bottom: 34.3%;
  background: var(--j-gold-25);
  animation-name: j-crest-glint;
  animation-delay: calc((var(--g) * 0.0125 - 1.7475) * var(--glint));
}

/* Seals outside a .j-crest host (the Pages hero portraits) have no --glint, so the glint does not run: the dash rests at
   the start of the lower-right wall, where the SVG dash used to rest (6 of the lap's 100 units, the halo 9). */
:not(.j-crest) > .j-crest__seal .j-crest__glint > i:nth-child(1) b:nth-child(-n+4)::after,
:not(.j-crest) > .j-crest__seal .j-crest__glint > i:nth-child(1) b:nth-child(-n+7)::before {
  opacity: 1;
}

:not(.j-crest) > .j-crest__seal .j-crest__glint > i:nth-child(1) b:nth-child(5)::after {
  opacity: 0.8;
}

:not(.j-crest) > .j-crest__seal .j-crest__glint > i:nth-child(1) b:nth-child(8)::before {
  opacity: 0.2;
}

@keyframes j-crest-glint {
  0% { opacity: 0; }
  1.25%, 6% { opacity: 1; }
  7.25%, 100% { opacity: 0; }
}

@keyframes j-crest-glint-halo {
  0% { opacity: 0; }
  1.25%, 9% { opacity: 1; }
  10.25%, 100% { opacity: 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);
}