/* Visible ambient resonance: four composited rings, no canvas or timer loop. */
.resonance-field {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -4%;
  top: 1%;
  width: 62%;
  aspect-ratio: 1;
  isolation: isolate;
  contain: layout paint;
}
.resonance-field > i {
  position: absolute;
  inset: 25%;
  border: 2px solid #ebcc83aa;
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    inset 0 0 25px #e2bc6017,
    0 0 25px #e2bc6017;
  animation: roman-resonance 7s linear infinite;
  animation-play-state: paused;
}
.resonance-field > i:nth-child(2) {
  animation-delay: -1.75s;
}
.resonance-field > i:nth-child(3) {
  animation-delay: -3.5s;
}
.resonance-field > i:nth-child(4) {
  animation-delay: -5.25s;
}
.resonance-core {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, #dfb25225, transparent 65%);
  animation: roman-breath 6s ease-in-out infinite;
  animation-play-state: paused;
}
.resonance-field.ambient-visible > i,
.resonance-field.ambient-visible .resonance-core {
  animation-play-state: running;
}
.cinema-hero h1 em {
  background: linear-gradient(100deg, #d1ae5e 20%, #fff0c6 45%, #d1ae5e 70%);
  background-size: 230% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: golden-sheen 8s ease-in-out infinite;
}
.hero-medallion .justice-balance {
  animation: justice-float 6s ease-in-out infinite;
}
.editorial-passage:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    112deg,
    transparent 30%,
    #e3c47714 48%,
    transparent 66%
  );
  pointer-events: none;
  transform: translateX(-80%);
  animation: passage-wave 12s linear infinite;
  animation-play-state: paused;
}
.editorial-passage.ambient-visible:after {
  animation-play-state: running;
}
.editorial-passage > .wrap {
  position: relative;
  z-index: 1;
}
@keyframes roman-resonance {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  15% {
    opacity: 0.68;
  }
  75% {
    opacity: 0.28;
  }
  100% {
    transform: scale(2.05);
    opacity: 0;
  }
}
@keyframes roman-breath {
  0%,
  100% {
    transform: scale(0.87);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
@keyframes golden-sheen {
  0%,
  100% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0 50%;
  }
}
@keyframes justice-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes passage-wave {
  to {
    transform: translateX(80%);
  }
}
body:after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 35%;
  height: 3px;
  background: #caa451;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}
body.route-pending:after {
  opacity: 1;
  animation: route-progress 1.1s ease-in-out infinite;
}
@keyframes route-progress {
  to {
    transform: translateX(390%);
  }
}
#app {
  min-height: 55vh;
}
.soft-navigation #app .fx3-item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.soft-navigation #app .fx3-item .tile-arch .icon {
  animation: none !important;
}
.initial-placeholder {
  padding-top: 90px;
  min-height: 60vh;
}
.initial-placeholder > div {
  height: 16px;
  margin: 20px 0;
  background: #e8e2d5;
  border-radius: 6px;
  max-width: 440px;
}
.initial-placeholder > div:first-child {
  height: 42px;
  width: 65%;
  max-width: 600px;
}
.initial-placeholder > div:last-child {
  width: 35%;
}
html:not([data-effects="full"]) .resonance-field > i,
html:not([data-effects="full"]) .resonance-core,
html:not([data-effects="full"]) .justice-balance,
html:not([data-effects="full"]) .cinema-hero h1 em,
html:not([data-effects="full"]) .editorial-passage:after {
  animation: none !important;
}
html:not([data-effects="full"]) .resonance-field > i:first-child {
  opacity: 0.25;
  transform: scale(1.4);
}
html.effects-hidden .resonance-field > i,
html.effects-hidden .resonance-core,
html.effects-hidden .justice-balance,
html.effects-hidden .cinema-hero h1 em,
html.effects-hidden .editorial-passage:after {
  animation-play-state: paused !important;
}
@media (max-width: 760px) {
  .resonance-field {
    width: 135%;
    right: -50%;
    top: -8%;
    opacity: 0.7;
  }
  .resonance-field > i {
    border-width: 1.5px;
  }
  .cinema-hero h1 em {
    background-size: 190% 100%;
  }
}