.origin-page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  flex-direction: column;
  padding: max(22px, env(safe-area-inset-top)) 28px 0;
  color: #17232d;
  background:
    linear-gradient(135deg, transparent 0 41%, rgba(255, 255, 255, 0.36) 41.2% 52%, transparent 52.2%),
    #e3dfd4;
}

.origin-page__texture,
.origin-page__red-slice {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.origin-page__texture {
  inset: 0;
  opacity: 0.33;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(67, 65, 56, 0.2) 2.4px 2.8px, transparent 3px 6px),
    linear-gradient(90deg, rgba(58, 51, 41, 0.08) 1px, transparent 1px);
  background-size: 12px 12px, 35px 35px;
}

.origin-page__red-slice {
  top: 31%;
  right: -35%;
  width: 74%;
  height: 110px;
  transform: rotate(-23deg);
  background: linear-gradient(90deg, rgba(196, 13, 28, 0), rgba(207, 8, 24, 0.87) 42%, rgba(237, 61, 61, 0.64));
}

.origin-page__header,
.archive-photo,
.origin-page__content,
.origin-page__footer {
  position: relative;
  z-index: 1;
}

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

.origin-page__header i {
  width: 26px;
  height: 1px;
  background: #c6091d;
}

.archive-photo {
  height: clamp(142px, 22svh, 205px);
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid rgba(228, 221, 204, 0.51);
  background:
    radial-gradient(circle at 50% 20%, rgba(230, 223, 202, 0.2), transparent 27%),
    linear-gradient(154deg, #596166 0%, #1a2933 51%, #0b141c 100%);
  box-shadow: 0 18px 29px rgba(35, 31, 25, 0.22);
}

.archive-photo::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(229, 218, 187, 0.28), transparent 15% 81%, rgba(0, 0, 0, 0.35));
  mix-blend-mode: screen;
}

.archive-photo__wash {
  position: absolute;
  z-index: 4;
  inset: -12% -23%;
  transform: rotate(18deg) translateX(-114%);
  background: linear-gradient(90deg, transparent, rgba(247, 229, 182, 0.84) 49%, transparent 51%);
  opacity: 0;
}

.archive-photo__deck {
  position: absolute;
  z-index: 1;
  inset: 0;
  isolation: isolate;
}

.archive-photo__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: perspective(1200px) rotateY(-86deg) scale(0.98);
  transform-origin: left center;
  transition: transform 780ms cubic-bezier(0.2, 0.82, 0.25, 1), opacity 230ms ease-out;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.archive-photo__slide::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(229, 218, 187, 0.2), transparent 15% 82%, rgba(0, 0, 0, 0.3));
  mix-blend-mode: screen;
}

.archive-photo__slide.is-current {
  z-index: 2;
  opacity: 0.92;
  transform: perspective(1200px) rotateY(0) scale(1);
}

.archive-photo__slide.is-turning {
  z-index: 4;
  opacity: 0.18;
  transform: perspective(1200px) rotateY(92deg) scale(1.015);
  box-shadow: 18px 0 23px rgba(0, 0, 0, 0.44);
}

.archive-photo__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: grayscale(1) contrast(1.2);
}

.archive-photo__thumbs {
  position: absolute;
  z-index: 7;
  top: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: repeat(2, 43px);
  gap: 5px;
}

.archive-photo__thumb {
  display: block;
  position: relative;
  width: 43px;
  height: 30px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(249, 239, 210, 0.38);
  background: #1d262b;
  color: #fff0c0;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.archive-photo__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  opacity: 0.68;
}

.archive-photo__thumb span {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  line-height: 1;
  text-shadow: 0 1px 3px #000;
}

.archive-photo__thumb.is-current {
  border-color: #fff0c0;
  box-shadow: 0 0 0 1px rgba(185, 9, 28, 0.78), 0 3px 8px rgba(0, 0, 0, 0.4);
  transform: scale(1.06);
}

.archive-photo__thumb.is-current img {
  opacity: 1;
}

.archive-photo__thumb:focus-visible {
  outline: 2px solid #fff0c0;
  outline-offset: 2px;
}

.archive-photo .archive-photo__caption,
.archive-photo__counter {
  display: none;
}

.origin-page__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.origin-page__chapter {
  position: relative;
}

.origin-page__chapter--heritage {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 208px;
  padding: 14px 15px 12px;
  overflow: hidden;
  border-left: 2px solid #bc0a1d;
  background:
    linear-gradient(135deg, rgba(53, 3, 10, 0.96), rgba(135, 7, 20, 0.94) 61%, rgba(190, 19, 35, 0.84)),
    #700613;
  box-shadow: 0 12px 22px rgba(60, 6, 12, 0.24);
}

.origin-page__chapter--heritage::after {
  position: absolute;
  z-index: 0;
  right: -37px;
  bottom: -59px;
  width: 230px;
  height: 168px;
  content: "";
  transform: rotate(-18deg);
  background: repeating-linear-gradient(153deg, transparent 0 17px, rgba(255, 227, 145, 0.19) 18px 19px, transparent 20px 34px);
}

.origin-page__chapter--heritage > * {
  position: relative;
  z-index: 1;
}

.origin-page__kicker {
  margin: 0 0 7px;
  color: #c6091d;
  font-family: "Songti SC", SimSun, serif;
  font-size: 15px;
  letter-spacing: 0.12em;
}

.origin-page__chapter--heritage .origin-page__kicker {
  color: #ffe2a0;
}

.origin-page__story {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: "Songti SC", SimSun, serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.origin-page__story {
  max-width: 520px;
  color: #48545b;
  font-size: clamp(12px, 3.5vw, 14px);
  line-height: 1.52;
}

.origin-page__story strong {
  color: #9f1523;
  font-size: 1.04em;
  font-weight: 700;
}

.origin-page__story b {
  margin: 1px 0 0;
  color: #c6091d;
  font-size: 1.22em;
  letter-spacing: 0.12em;
}

.origin-page__chapter--heritage .origin-page__story {
  color: rgba(255, 240, 207, 0.9);
}

.origin-page__values {
  position: relative;
  z-index: 1;
  margin: 30px 0 10px;
  padding: 8px 0;
  border-block: 1px solid rgba(255, 229, 154, 0.38);
  color: #fff1bf;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(14px, 4.1vw, 17px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.07em;
}

.origin-page__finale {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: auto 0 0;
  color: rgba(255, 240, 208, 0.88);
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(11px, 3.25vw, 13px);
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.origin-page__finale strong {
  color: #ffdfa0;
  font-size: 1.05em;
}

.origin-page__footer {
  margin: 0 -28px;
  padding: 10px 28px max(17px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 232, 170, 0.76);
  background: linear-gradient(105deg, #420107 0%, #65040e 58%, #260207 100%);
}

.origin-page__footer span {
  font-family: "Songti SC", SimSun, serif;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.origin-page .origin-page__header,
.origin-page .archive-photo,
.origin-page .origin-page__kicker,
.origin-page__footer {
  opacity: 0;
}

.origin-page .origin-page__story span,
.origin-page .origin-page__story strong,
.origin-page .origin-page__story b,
.origin-page .origin-page__values,
.origin-page .origin-page__finale span,
.origin-page .origin-page__finale strong {
  opacity: 0;
}

.origin-page.is-active .origin-page__header { animation: origin-rise 560ms ease-out both; }
.origin-page.is-active .archive-photo { animation: archive-reveal 1.2s cubic-bezier(0.2, 0.82, 0.3, 1) 170ms both; }
.origin-page.is-active .archive-photo__wash { animation: photo-develop 1.35s ease-out 420ms both; }
.origin-page.is-active .origin-page__kicker { animation: origin-rise 560ms ease-out 520ms both; }
.origin-page.is-active .origin-page__story span,
.origin-page.is-active .origin-page__story strong,
.origin-page.is-active .origin-page__story b { animation: story-line 600ms cubic-bezier(0.2, 0.82, 0.3, 1) both; }
.origin-page.is-active .origin-page__story span:nth-child(1) { animation-delay: 640ms; }
.origin-page.is-active .origin-page__story strong { animation-delay: 760ms; }
.origin-page.is-active .origin-page__story span:nth-child(3) { animation-delay: 890ms; }
.origin-page.is-active .origin-page__story span:nth-child(4) { animation-delay: 1020ms; }
.origin-page.is-active .origin-page__story b { animation-delay: 1150ms; }
.origin-page.is-active .origin-page__story span:nth-child(6) { animation-delay: 1280ms; }
.origin-page.is-active .origin-page__chapter--heritage .origin-page__kicker { animation-delay: 1380ms; }
.origin-page.is-active .origin-page__chapter--heritage .origin-page__story span:nth-child(1) { animation-delay: 1500ms; }
.origin-page.is-active .origin-page__chapter--heritage .origin-page__story span:nth-child(2) { animation-delay: 1610ms; }
.origin-page.is-active .origin-page__values { animation: story-line 600ms cubic-bezier(0.2, 0.82, 0.3, 1) 1720ms both; }
.origin-page.is-active .origin-page__finale span { animation: story-line 600ms cubic-bezier(0.2, 0.82, 0.3, 1) 1820ms both; }
.origin-page.is-active .origin-page__finale strong { animation: story-line 600ms cubic-bezier(0.2, 0.82, 0.3, 1) 1920ms both; }
.origin-page.is-active .origin-page__footer { animation: origin-rise 580ms ease-out 2030ms both; }
.origin-page.is-active .origin-page__red-slice { animation: red-slice-drift 8s ease-in-out infinite; }
.origin-page.is-active .archive-photo__slide.is-current img { animation: archive-flicker 6s ease-in-out 1.2s infinite; }
.origin-page.is-active .archive-photo.is-switching .archive-photo__wash { animation: archive-flip-glint 680ms ease-out both; }

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

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

@keyframes archive-reveal {
  from { opacity: 0; transform: scale(1.04); filter: grayscale(1) brightness(0.35); }
  to { opacity: 1; transform: scale(1); filter: grayscale(0.2) brightness(1); }
}

@keyframes photo-develop {
  0% { transform: rotate(18deg) translateX(-114%); opacity: 0; }
  16% { opacity: 0.8; }
  84% { opacity: 0.36; }
  100% { transform: rotate(18deg) translateX(114%); opacity: 0; }
}

@keyframes red-slice-drift {
  50% { transform: rotate(-20deg) translate3d(-2%, 6px, 0); }
}

@keyframes archive-flicker {
  0%, 100% { opacity: 0.82; filter: grayscale(1) contrast(1.2); }
  48% { opacity: 0.96; filter: grayscale(0.82) contrast(1.27) brightness(1.08); }
}

@keyframes archive-flip-glint {
  0% { transform: rotate(18deg) translateX(-114%); opacity: 0; }
  28% { opacity: 0.72; }
  100% { transform: rotate(18deg) translateX(114%); opacity: 0; }
}

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

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

  .origin-page .origin-page__header,
  .origin-page .archive-photo,
  .origin-page .origin-page__kicker,
  .origin-page__story span,
  .origin-page__story strong,
  .origin-page__story b,
  .origin-page__values,
  .origin-page__finale span,
  .origin-page__finale strong,
  .origin-page__footer {
    opacity: 1;
  }

  .archive-photo__slide,
  .archive-photo__thumb {
    transition: none;
  }
}