.shield-page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  flex-direction: column;
  padding: max(27px, env(safe-area-inset-top)) 28px max(23px, env(safe-area-inset-bottom));
  color: #f7edcf;
  background:
    radial-gradient(circle at 85% 17%, rgba(235, 179, 67, 0.18), transparent 21%),
    linear-gradient(146deg, #172a35 0%, #0c1821 54%, #080f16 100%);
}

.shield-page__grid,
.shield-page__aura,
.shield-page__rays {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.shield-page__grid {
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(90deg, rgba(238, 215, 157, 0.19) 1px, transparent 1px),
    linear-gradient(rgba(238, 215, 157, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
}

.shield-page__aura {
  top: -29vmax;
  right: -21vmax;
  width: 64vmax;
  height: 64vmax;
  border: 1px solid rgba(246, 213, 133, 0.26);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(246, 213, 133, 0.03), 0 0 0 57px rgba(246, 213, 133, 0.025);
}

.shield-page__rays {
  right: -21%;
  bottom: 3%;
  width: 88%;
  height: 180px;
  transform: skewY(-19deg);
  background: linear-gradient(145deg, transparent 0 30%, rgba(190, 11, 27, 0.79) 30.5% 54%, rgba(227, 53, 53, 0.2) 54.5% 62%, transparent 62.5%);
}

.shield-page__header,
.shield-page__period,
.shield-page__image,
.shield-page__content,
.shield-page__footer {
  position: relative;
  z-index: 1;
}

.shield-page__header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f5d988;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.shield-page__header i {
  width: 26px;
  height: 1px;
  background: #f5d988;
}

.shield-page__header p,
.shield-page__period {
  margin: 0;
}

.shield-page__period {
  margin-top: 11px;
  color: rgba(238, 228, 194, 0.52);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.shield-page__image {
  height: clamp(160px, 24svh, 216px);
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid rgba(248, 227, 171, 0.38);
  background: #050d12;
  box-shadow: 0 17px 32px rgba(0, 0, 0, 0.36);
}

.shield-page__image::before,
.shield-page__image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.shield-page__image::before {
  background: linear-gradient(90deg, rgba(7, 17, 23, 0.57), transparent 30% 73%, rgba(7, 17, 23, 0.45));
}

.shield-page__image::after {
  background: linear-gradient(135deg, rgba(255, 238, 181, 0.18), transparent 25% 70%, rgba(184, 8, 25, 0.35));
}

.shield-page__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: grayscale(1) contrast(1.24) brightness(0.78);
}

.shield-page__image figcaption {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 10px;
  color: rgba(255, 237, 189, 0.72);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.shield-page__content {
  width: min(100%, 520px);
  margin: 19px 0 0;
  padding: 0;
}

.shield-page__kicker {
  margin: 0 0 10px;
  color: #efce79;
  font-family: "Songti SC", SimSun, serif;
  font-size: 17px;
  letter-spacing: 0.13em;
}

.shield-page__story,
.shield-page__finale {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  font-family: "Songti SC", SimSun, serif;
  letter-spacing: 0.06em;
}

.shield-page__story {
  color: rgba(247, 239, 215, 0.87);
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.65;
}

.shield-page__values {
  margin: 17px 0 15px;
  color: #fff0bd;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(17px, 4.7vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.shield-page__finale {
  color: rgba(247, 239, 215, 0.86);
  font-size: 14px;
  line-height: 1.68;
}

.shield-page__finale strong {
  color: #f5d988;
  font-size: 1.05em;
}

.shield-page h2 {
  margin: 0 0 13px;
  color: #fff2cf;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(30px, 8.2vw, 45px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.09em;
  text-shadow: 0 8px 23px rgba(0, 0, 0, 0.36);
}

.shield-page h2 em {
  color: #f0c768;
  font-style: normal;
}

.shield-page__statement,
.shield-page__fact {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Songti SC", SimSun, serif;
  letter-spacing: 0.06em;
}

.shield-page__statement {
  gap: 10px;
  color: rgba(247, 239, 215, 0.85);
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.55;
}

.shield-page__statement b,
.shield-page__statement strong {
  display: block;
  color: #f4d47e;
  font-size: 1.06em;
}

.shield-page__statement b {
  color: #e6404e;
  font-size: 1.2em;
  letter-spacing: 0.12em;
}

.shield-page__fact {
  gap: 4px;
  margin-top: 11px;
  color: rgba(248, 238, 206, 0.78);
  font-size: 13px;
  line-height: 1.75;
}

.shield-page__fact b {
  color: #e6404e;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.shield-page__footer {
  margin-top: auto;
  padding-top: 19px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.shield-page__footer > span {
  max-width: 178px;
  color: rgba(242, 228, 187, 0.57);
  font-family: "Songti SC", SimSun, serif;
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.shield-page__actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}

.shield-page__next,
.shield-page__home,
.shield-page__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.09em;
}

.shield-page__next {
  color: #f3d67f;
  font-weight: 700;
}

.shield-page__home {
  color: #f3d67f;
  font-weight: 700;
}

.shield-page__back {
  border-bottom: 1px solid rgba(239, 206, 121, 0.47);
  color: rgba(245, 222, 168, 0.74);
}

.shield-page__next svg,
.shield-page__back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.shield-page .shield-page__header,
.shield-page .shield-page__period,
.shield-page .shield-page__image,
.shield-page .shield-page__kicker,
.shield-page h2,
.shield-page__story span,
.shield-page__values,
.shield-page__finale span,
.shield-page__finale strong,
.shield-page__statement span,
.shield-page__statement b,
.shield-page__statement strong,
.shield-page__fact b,
.shield-page__fact span,
.shield-page__footer {
  opacity: 0;
}

.shield-page.is-active .shield-page__header { animation: shield-rise 580ms ease-out both; }
.shield-page.is-active .shield-page__period { animation: shield-rise 580ms ease-out 80ms both; }
.shield-page.is-active .shield-page__image { animation: shield-image-in 900ms cubic-bezier(0.2, 0.82, 0.3, 1) 170ms both; }
.shield-page.is-active .shield-page__kicker { animation: shield-rise 580ms ease-out 430ms both; }
.shield-page.is-active h2 { animation: shield-rise 650ms cubic-bezier(0.2, 0.82, 0.3, 1) 520ms both; }
.shield-page.is-active .shield-page__story span,
.shield-page.is-active .shield-page__values,
.shield-page.is-active .shield-page__finale span,
.shield-page.is-active .shield-page__finale strong,
.shield-page.is-active .shield-page__statement span,
.shield-page.is-active .shield-page__statement b,
.shield-page.is-active .shield-page__statement strong,
.shield-page.is-active .shield-page__fact b,
.shield-page.is-active .shield-page__fact span { animation: shield-line 610ms cubic-bezier(0.2, 0.82, 0.3, 1) both; }
.shield-page.is-active .shield-page__statement span { animation-delay: 600ms; }
.shield-page.is-active .shield-page__statement b { animation-delay: 790ms; }
.shield-page.is-active .shield-page__statement strong { animation-delay: 980ms; }
.shield-page.is-active .shield-page__fact b { animation-delay: 1120ms; }
.shield-page.is-active .shield-page__fact span { animation-delay: 1240ms; }
.shield-page.is-active .shield-page__story span:nth-child(1) { animation-delay: 610ms; }
.shield-page.is-active .shield-page__story span:nth-child(2) { animation-delay: 750ms; }
.shield-page.is-active .shield-page__values { animation-delay: 900ms; }
.shield-page.is-active .shield-page__finale span { animation-delay: 1060ms; }
.shield-page.is-active .shield-page__finale strong { animation-delay: 1200ms; }
.shield-page.is-active .shield-page__footer { animation: shield-rise 580ms ease-out 1420ms both; }
.shield-page.is-active .shield-page__aura { animation: shield-orbit 18s linear infinite; }
.shield-page.is-active .shield-page__rays { animation: shield-rays 8s ease-in-out infinite; }

@keyframes shield-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes shield-line {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes shield-image-in {
  from { opacity: 0; transform: scale(1.06); filter: brightness(0.4) grayscale(1); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) grayscale(0); }
}

@keyframes shield-orbit { to { transform: rotate(360deg); } }
@keyframes shield-rays { 50% { transform: skewY(-16deg) translate3d(-2%, -6px, 0); } }

@media (min-width: 740px) {
  .shield-page {
    width: min(100%, 720px);
    min-height: 920px;
    margin: 24px auto;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.43);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shield-page *,
  .shield-page *::before,
  .shield-page *::after {
    animation: none !important;
  }

  .shield-page .shield-page__header,
  .shield-page .shield-page__period,
  .shield-page .shield-page__image,
  .shield-page .shield-page__kicker,
  .shield-page h2,
  .shield-page__story span,
  .shield-page__values,
  .shield-page__finale span,
  .shield-page__finale strong,
  .shield-page__statement span,
  .shield-page__statement b,
  .shield-page__statement strong,
  .shield-page__fact b,
  .shield-page__fact span,
  .shield-page__footer {
    opacity: 1;
  }
}