/** Roman and Carthaginian visual identities */
body.cy-faction #main {
  background:
    radial-gradient(circle at 90% 10%, rgb(var(--cy-accent-rgb) / 12%), transparent 34rem),
    linear-gradient(180deg, var(--cy-paper-raised), var(--cy-paper));
}

body.cy-faction .fusion-page-title-captions::before {
  content: var(--cy-faction-symbol);
  color: var(--cy-gold-light);
  font-family: var(--cy-font-display);
  font-size: .78rem;
  letter-spacing: .34em;
}

body.cy-faction .fusion-page-title-bar::before {
  background:
    radial-gradient(circle at 78% 44%, rgb(var(--cy-accent-rgb) / 35%), transparent 26rem),
    linear-gradient(90deg, rgb(8 5 10 / 94%), rgb(var(--cy-accent-rgb) / 40%) 56%, rgb(8 5 10 / 84%)),
    linear-gradient(0deg, #0a080b, transparent 50%);
}

body.cy-faction-rome .fusion-page-title-bar {
  box-shadow: inset 0 -5px 0 #a6192e;
}

body.cy-faction-carthage .fusion-page-title-bar {
  box-shadow: inset 0 -5px 0 #692a83;
}

body.cy-faction .fusion-page-title-bar h1::after {
  display: block;
  width: min(7rem, 30vw);
  height: 3px;
  margin-top: 1.35rem;
  content: var(--cy-faction-symbol);
  border-radius: var(--cy-radius-pill);
  background: linear-gradient(90deg, var(--cy-accent-bright), var(--cy-gold-light));
  box-shadow: 0 0 24px rgb(var(--cy-accent-rgb) / 65%);
}

body.cy-faction :where(.columnaGrupo, .cy-faction-card, .fusion-content-boxes .content-box-column) {
  position: relative;
}

body.cy-faction :where(.columnaGrupo, .cy-faction-card)::before {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  display: grid;
  flex: 0 0 100%;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  content: "";
  border: 1px solid rgb(var(--cy-accent-rgb) / 33%);
  border-radius: 50%;
  background: rgb(255 255 255 / 76%);
  box-shadow: var(--cy-shadow-xs);
  backdrop-filter: blur(8px);
  color: var(--cy-accent-deep);
  font-family: var(--cy-font-display);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .05em;
}

body.cy-faction :where(.columnaGrupo, .cy-faction-card) .fusion-imageframe {
  border: 1px solid rgb(var(--cy-accent-rgb) / 18%);
  box-shadow: var(--cy-shadow-md), 0 0 0 .5rem rgb(var(--cy-accent-rgb) / 4%);
}

body.cy-faction .galeriaGrupo,
body.cy-faction [class*="galeria"] {
  accent-color: var(--cy-accent);
}

body.cy-faction .fusion-social-network-icon {
  border-radius: 50%;
  transition: color var(--cy-duration-fast), background var(--cy-duration-fast), transform var(--cy-duration-base) var(--cy-ease-out);
}

body.cy-faction .fusion-social-network-icon:hover {
  color: #fff;
  background: var(--cy-accent);
  transform: translateY(-3px) rotate(4deg);
}

body.cy-faction-rome :where(blockquote, .reading-box) {
  border-left-color: #a6192e;
}

body.cy-faction-carthage :where(blockquote, .reading-box) {
  border-left-color: #692a83;
}

body.cy-faction blockquote {
  position: relative;
  padding: 1.4rem 1.6rem;
  border-left-width: 4px;
  border-radius: 0 var(--cy-radius-md) var(--cy-radius-md) 0;
  background: rgb(var(--cy-accent-rgb) / 7%);
  font-family: var(--cy-font-display);
  font-size: var(--cy-text-lg);
}

/* Topic cards keep their own faction identity, including on neutral pages. */
body.cy-design #main .cy-faction-tile {
  position: relative;
  isolation: isolate;
  transition:
    color var(--cy-duration-base) ease,
    border-color var(--cy-duration-base) ease,
    box-shadow var(--cy-duration-base) ease,
    transform var(--cy-duration-base) var(--cy-ease-out);
}

body.cy-design #main .cy-faction-tile::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 22% 18%, rgb(var(--cy-tile-rgb) / 24%), transparent 64%);
  transition: opacity var(--cy-duration-base) ease;
}

body.cy-design #main .cy-faction-tile-rome {
  --cy-tile-accent: #a6192e;
  --cy-tile-deep: #5a0d1a;
  --cy-tile-rgb: 166 25 46;
}

body.cy-design #main .cy-faction-tile-carthage {
  --cy-tile-accent: #692a83;
  --cy-tile-deep: #35103f;
  --cy-tile-rgb: 105 42 131;
}

body.cy-design #main .cy-faction-tile:hover {
  border-color: rgb(var(--cy-tile-rgb) / 54%);
  box-shadow: 0 22px 58px rgb(var(--cy-tile-rgb) / 25%);
  transform: translateY(-6px);
}

body.cy-design #main .cy-faction-tile:hover::after {
  opacity: 1;
}

body.cy-design #main .cy-faction-tile:hover :where(a, h2, h3, h4) {
  color: var(--cy-tile-accent);
}

body.cy-design #main .cy-faction-tile :focus-visible {
  outline-color: var(--cy-tile-accent);
}

/* Roster indexes: spacious editorial cards for the 25 troops/legions. */
body.cy-faction-index #main .cy-faction-roster {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
  width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.cy-faction-index #main .cy-faction-roster > .cy-faction-roster-spacer {
  display: none !important;
}

/* Avada stores #fff directly on the large faction sections. Let the faction
   page background flow continuously behind headings, text and the roster. */
body.cy-faction-index #main .fusion-fullwidth {
  background-color: transparent !important;
}

body.cy-faction-index-rome #main {
  background:
    radial-gradient(circle at 12% 8%, rgb(166 25 46 / 20%), transparent 34rem),
    radial-gradient(circle at 88% 72%, rgb(90 13 26 / 13%), transparent 38rem),
    linear-gradient(145deg, #fff9f6 0%, #f5e6e5 52%, #ead2d6 100%);
}

body.cy-faction-index-carthage #main {
  background:
    radial-gradient(circle at 12% 8%, rgb(105 42 131 / 21%), transparent 34rem),
    radial-gradient(circle at 88% 72%, rgb(53 16 63 / 14%), transparent 38rem),
    linear-gradient(145deg, #fdf9ff 0%, #f1e5f6 52%, #e2cde9 100%);
}

body.cy-faction-index #main .cy-faction-roster > .cy-faction-roster-card {
  --awb-spacing-left-large: 0px !important;
  --awb-spacing-right-large: 0px !important;
  --awb-spacing-left-medium: 0px !important;
  --awb-spacing-right-medium: 0px !important;
  --awb-spacing-left-small: 0px !important;
  --awb-spacing-right-small: 0px !important;
  width: auto !important;
  min-height: clamp(25rem, 31vw, 30rem);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(var(--cy-accent-rgb) / 19%);
  border-radius: var(--cy-radius-xl);
  background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 72%)), radial-gradient(circle at 50% 8%, rgb(var(--cy-accent-rgb) / 17%), transparent 62%);
  box-shadow: var(--cy-shadow-sm), 0 0 0 1px rgb(255 255 255 / 55%) inset;
  transition: transform var(--cy-duration-base) var(--cy-ease-out), box-shadow var(--cy-duration-base) ease, border-color var(--cy-duration-base) ease;
}

body.cy-faction-index #main .cy-faction-roster > .cy-faction-roster-card:hover {
  z-index: 3;
  border-color: rgb(var(--cy-accent-rgb) / 55%);
  box-shadow: var(--cy-shadow-lg), 0 18px 48px rgb(var(--cy-accent-rgb) / 24%);
  transform: translateY(-8px);
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-column-wrapper {
  display: flex;
  width: 100% !important;
  min-height: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex-direction: column;
  gap: .85rem;
  padding: 0 0 1.25rem !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-image-element,
body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe,
body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe > a {
  display: block;
  width: 100%;
  max-width: none;
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe > a {
  height: 100%;
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe {
  height: clamp(13rem, 17vw, 15.5rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cy-accent-deep);
  box-shadow: none;
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 700ms var(--cy-ease-out), filter 500ms ease;
}

body.cy-faction-index #main .cy-faction-roster-card:hover .fusion-imageframe img {
  filter: saturate(1.14) contrast(1.04);
  transform: scale(1.06) rotate(-1deg);
}

body.cy-faction-index #main .cy-faction-roster-card :where(h2, h3, h4, p, .fusion-text) {
  margin: 0;
  padding-inline: 1.25rem;
}

body.cy-faction-index #main .cy-faction-roster-card :where(h2, h3, h4) {
  color: var(--cy-accent-deep);
  font-family: var(--cy-font-display);
  font-size: clamp(1.02rem, .9rem + .25vw, 1.28rem);
  line-height: 1.18;
}

body.cy-faction-index #main .cy-faction-roster-card :where(p, .fusion-text) {
  color: var(--cy-ink-soft);
  font-size: var(--cy-text-sm);
  line-height: 1.55;
}

body.cy-faction-index #main .cy-faction-roster-card :where(.fusion-title, .fusion-checklist, .fusion-separator) {
  width: auto !important;
  margin-right: 1.25rem !important;
  margin-left: 1.25rem !important;
}

body.cy-faction-index #main .cy-faction-roster-card .fusion-checklist p {
  padding-inline: 0;
}

body.cy-faction-index #main .cy-faction-roster-heading {
  position: relative;
  margin-bottom: clamp(1rem, 2vw, 2rem);
  color: var(--cy-accent-deep);
  font-family: var(--cy-font-display);
  letter-spacing: .02em;
  text-wrap: balance;
}

body.cy-faction-index #main .cy-faction-roster-heading::after {
  display: block;
  width: 5rem;
  height: 3px;
  margin-top: .8rem;
  content: "";
  border-radius: var(--cy-radius-pill);
  background: linear-gradient(90deg, var(--cy-accent), var(--cy-gold-light));
  box-shadow: 0 0 18px rgb(var(--cy-accent-rgb) / 45%);
}

/* Two solid faction panels meet at the centre on every page transition. */
html.cy-curtain-loading,
html.cy-curtain-loading body {
  overflow: hidden !important;
}

.battle-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: visibility 0s linear 430ms;
}

.battle-curtain.active {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
  transition-delay: 0s;
}

.battle-curtain__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.05%;
  transition: transform 390ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}

.battle-curtain__panel--carthage {
  left: 0;
  background: #692a83;
  box-shadow: 18px 0 42px rgb(29 4 38 / 28%);
  transform: translate3d(-101%, 0, 0);
}

.battle-curtain__panel--rome {
  right: 0;
  background: #a6192e;
  box-shadow: -18px 0 42px rgb(63 3 12 / 28%);
  transform: translate3d(101%, 0, 0);
}

.battle-curtain.active .battle-curtain__panel { transform: translate3d(0, 0, 0); }

.battle-curtain__legend {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 140ms ease, transform 260ms var(--cy-ease-out);
}

.battle-curtain.active .battle-curtain__legend { opacity: 1; transform: scale(1); transition-delay: 210ms, 180ms; }
.battle-curtain__identity { display: flex; min-width: 0; align-items: center; gap: clamp(.65rem, 1.4vw, 1.35rem); }
.battle-curtain__identity--carthage { justify-content: flex-end; padding-left: clamp(1rem, 4vw, 4rem); padding-right: clamp(.8rem, 2vw, 2rem); }
.battle-curtain__identity--rome { justify-content: flex-start; padding-right: clamp(1rem, 4vw, 4rem); padding-left: clamp(.8rem, 2vw, 2rem); }
.battle-curtain__identity i { width: clamp(2.5rem, 10vw, 10rem); height: 2px; flex: 0 1 auto; background: linear-gradient(90deg, transparent, #f3d58d); box-shadow: 0 0 18px rgb(243 213 141 / 70%); }
.battle-curtain__identity--rome i { transform: scaleX(-1); }
.battle-curtain__identity :where(b, span) { flex: 0 0 auto; color: #fff; font-family: var(--cy-font-display); font-size: clamp(1rem, 2vw, 2.2rem); font-weight: 600; letter-spacing: .18em; text-shadow: 0 2px 18px rgb(0 0 0 / 38%); }

@media (max-width: 1024px) {
  body.cy-faction-index #main .cy-faction-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body.cy-faction-index #main .cy-faction-roster {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.cy-faction-index #main .cy-faction-roster > .cy-faction-roster-card {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  body.cy-faction-index #main .cy-faction-roster-card .fusion-column-wrapper,
  body.cy-faction-index #main .cy-faction-roster-card :where(.fusion-image-element, .fusion-imageframe, .fusion-imageframe > a, img) {
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe {
    height: clamp(13rem, 65vw, 19rem);
  }

  /* Mobile curtain: Carthago descends and Roma rises to meet horizontally. */
  .battle-curtain__panel {
    right: 0;
    left: 0;
    width: 100%;
    height: 50.05%;
  }

  .battle-curtain__panel--carthage {
    top: 0;
    bottom: auto;
    box-shadow: 0 18px 42px rgb(29 4 38 / 28%);
    transform: translate3d(0, -101%, 0);
  }

  .battle-curtain__panel--rome {
    top: auto;
    bottom: 0;
    box-shadow: 0 -18px 42px rgb(63 3 12 / 28%);
    transform: translate3d(0, 101%, 0);
  }

  .battle-curtain.active .battle-curtain__panel {
    transform: translate3d(0, 0, 0);
  }

  .battle-curtain__legend {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .battle-curtain__identity {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    padding: 1rem;
    text-align: center;
  }

  .battle-curtain__identity--carthage {
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .battle-curtain__identity--rome {
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .battle-curtain__identity i {
    width: 2px;
    height: clamp(3.25rem, 12vh, 6.5rem);
    flex: 0 0 auto;
    background: linear-gradient(180deg, transparent, #f3d58d);
  }

  .battle-curtain__identity--rome i {
    transform: scaleY(-1);
  }

  .battle-curtain__identity :where(b, span) {
    font-size: clamp(.9rem, 4.6vw, 1.25rem);
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-curtain { transition-duration: 1ms; }
  body.cy-faction-index #main .cy-faction-roster-card,
  body.cy-faction-index #main .cy-faction-roster-card .fusion-imageframe img { transition-duration: 1ms; }
}