/* ============================================================
   /variant — The Rotunda
   深夜环形拱廊：圆柱展墙 + 亚克力彩印 + 射灯琥珀
   覆写 webflow.shared.css；DOM 钩子与原版完全一致
   ============================================================ */

:root {
  --paper: #0a0d12;          /* 深夜蓝黑 */
  --paper-2: #0f141b;        /* 面板深一号 */
  --bone: #e7e9ec;           /* 冷白主文字 */
  --bone-dim: rgba(231, 233, 236, .55);
  --bone-faint: rgba(231, 233, 236, .32);
  --seal: #d9a441;           /* 射灯琥珀 */
  --hair: rgba(231, 233, 236, .18);
  --serif: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;
}

/* ---------- 基底 ---------- */

html, body, .body, .app {
  background-color: var(--paper);
}

body {
  color: var(--bone);
}

.is--home ::selection {
  background-color: var(--seal);
  color: var(--bone);
}

/* ---------- 展厅暗角（接管原 crt-overlay 节点） ---------- */

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
  background:
    radial-gradient(115% 85% at 50% 40%, transparent 52%, rgba(3, 5, 9, .72) 100%),
    linear-gradient(rgba(3, 5, 9, .18), rgba(3, 5, 9, .18));
  animation: none;
}

/* ---------- 字体换语言 ---------- */

.paragraph {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 400;
}

.h-h1 {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(3em, 9vw, 8.5em);
  line-height: .92;
}

/* 自定义标题单行测量：scrollWidth 供 fitTitle 收缩，兜底省略号不外溢 */
.st__bottom .h-h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 顶部导航：标本册页眉 ---------- */

.section__text {
  color: var(--bone);
  padding: .9em 1.1em;
  grid-column-gap: 1.4em;
  mix-blend-mode: difference;
}

.section__text::after {
  content: "";
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  bottom: 0;
  height: 1px;
  background: var(--hair);
}

.section__text .overlay {
  background-image: linear-gradient(#00000026, #00000026);
}

.text__col {
  color: var(--bone);
}

.tc__timedate {
  color: var(--seal);
  opacity: 1;
}

.paragraph.is--tag {
  color: var(--seal);
  letter-spacing: .12em;
}

.hero__desc .paragraph.is--intro-mobile {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(.95rem, .8rem + .6vw, 1.25rem);
  line-height: 1.45;
  color: var(--bone);
}

.link-group a.paragraph,
.tc__links a {
  color: var(--bone-dim);
}

/* ---------- 按钮：发丝线描边，不再实心胶囊 ---------- */

.btn-animate-chars {
  border: 1px solid var(--hair);
  color: var(--bone);
  border-radius: 0;
  padding: .5em 1.2em;
  background: transparent;
}

.btn-animate-chars__bg {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.btn-animate-chars:hover {
  border-color: var(--seal);
  color: var(--seal);
}

.btn-animate-chars__text.paragraph {
  color: inherit;
  font-family: var(--mono);
  letter-spacing: .14em;
  font-size: .72em;
}

/* ---------- 画廊：图版 ---------- */

.grid {
  cursor: grab;
}

.grid:active {
  cursor: grabbing;
}

/* 图版编号 + 发丝框，由 variant-app.js 逐帧对齐 WebGL plane */
.plate-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  pointer-events: none;
  outline: 1px solid var(--hair);
  outline-offset: -1px;
  will-change: transform;
}

.plate-tag > span {
  position: absolute;
  left: .5em;
  top: .45em;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--bone-dim);
  white-space: nowrap;
}

.plate-tag::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--bone-dim);
  border-left: 1px solid var(--bone-dim);
}

.plate-tag::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--bone-dim);
  border-right: 1px solid var(--bone-dim);
}

/* ---------- 页面装帧框 ---------- */

.atlas-frame {
  position: fixed;
  inset: .55em;
  border: 1px solid var(--hair);
  z-index: 10;
  pointer-events: none;
}

.atlas-frame i {
  position: absolute;
  width: 14px;
  height: 14px;
}

.atlas-frame i.tl { top: -1px; left: -1px; border-top: 1px solid var(--bone-dim); border-left: 1px solid var(--bone-dim); }
.atlas-frame i.tr { top: -1px; right: -1px; border-top: 1px solid var(--bone-dim); border-right: 1px solid var(--bone-dim); }
.atlas-frame i.bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--bone-dim); border-left: 1px solid var(--bone-dim); }
.atlas-frame i.br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--bone-dim); border-right: 1px solid var(--bone-dim); }

/* ---------- 底部标题区 ---------- */

.st__bottom {
  color: var(--bone);
  inset: auto 1.35em 1.35em;
}

.st__bottom .text__row {
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .6em;
}

.atlas-colophon {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: .8em;
  padding-top: .5em;
  border-top: 1px solid var(--hair);
  display: inline-block;
  white-space: nowrap;
}

/* ---------- 右下信息面板：档案卡 ---------- */

.hero__tab {
  background-color: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
  color: var(--bone);
}

.atlas-fig {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--seal);
  padding-bottom: .35em;
  border-bottom: 1px solid var(--hair);
  margin-bottom: .15em;
  width: 100%;
}

.tab__desc .paragraph {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .05em;
  line-height: 1.55;
  color: var(--bone-dim);
}

.tab__desc .paragraph .text-span-3 {
  color: var(--seal);
}

.bunny-bg__video {
  filter: grayscale(1) sepia(.35) brightness(.9) contrast(1.1);
}

.demo-section__fade-left {
  background-image: linear-gradient(45deg, var(--paper-2), #0000 55%);
}

/* ---------- 自定义光标 ---------- */

.cursor {
  background-color: rgba(22, 18, 14, .82);
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--bone);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: .45em .9em;
}

.cursor .paragraph {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--bone);
}

/* ---------- Preloader ---------- */

.preloader,
.preloader__svg {
  background-color: var(--paper);
}

.preloader__content {
  color: var(--bone);
}

.preloader__img-wrap {
  border-radius: 0;
  outline: 1px solid var(--hair);
  outline-offset: -1px;
}

.preloader__img-wrap .img {
  filter: grayscale(1) sepia(.35) brightness(.9) contrast(1.1);
}

.counter-element {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.6em, 6vw, 5em);
  line-height: 1;
  color: var(--bone);
}

.preloader__line {
  background-color: var(--hair);
}

.line__animate {
  background-color: var(--seal);
}

.iw__text .paragraph {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height: 1.35;
  color: var(--bone);
}

/* ---------- 移动端提示 ---------- */

.section__landscape {
  background-color: var(--paper);
  color: var(--bone);
}

.h-h1.is--landscape {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: clamp(1.6em, 6vw, 3em);
}

/* ---------- Config panel：标本卡式参数面板 ---------- */

.cfg {
  position: fixed;
  top: 4.2em;
  right: 1.35em;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55em;
  font-family: var(--mono);
}

.cfg__toggle {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background-color: rgba(15, 20, 27, .82);
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: .55em 1.1em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color .3s ease, border-color .3s ease;
}

.cfg__toggle:hover,
.cfg.is-open .cfg__toggle {
  color: var(--seal);
  border-color: var(--seal);
}

.cfg__panel {
  position: relative;
  display: none;
  width: 17em;
  background-color: rgba(15, 20, 27, .9);
  border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cfg.is-open .cfg__panel {
  display: block;
  animation: cfg-in .38s cubic-bezier(.625, .05, 0, 1) both;
}

@keyframes cfg-in {
  from { opacity: 0; transform: translateY(-.6em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 角标：与 plate-tag / atlas-frame 同一标本框语汇 */
.cfg__panel::before,
.cfg__panel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.cfg__panel::before {
  top: -4px;
  left: -4px;
  border-top: 1px solid var(--bone-dim);
  border-left: 1px solid var(--bone-dim);
}

.cfg__panel::after {
  bottom: -4px;
  right: -4px;
  border-bottom: 1px solid var(--bone-dim);
  border-right: 1px solid var(--bone-dim);
}

.cfg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: .55em;
  padding: .7em .9em .55em;
  border-bottom: 1px solid var(--hair);
}

.cfg__title {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--seal);
}

.cfg__actions {
  display: flex;
  gap: .9em;
  margin-left: auto;
  align-items: center;
}

.cfg__act {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .3s ease;
}

.cfg__act:hover {
  color: var(--seal);
}

.cfg__mood {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seal);
  background-color: rgba(15, 20, 27, .9);
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: .18em .35em;
  cursor: pointer;
}

.cfg__mood:hover,
.cfg__mood:focus-visible {
  border-color: var(--seal);
  outline: none;
}

.cfg__sub {
  padding: .55em .9em;
  border-bottom: 1px solid var(--hair);
}

.cfg__text {
  width: 100%;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  padding: .5em .7em;
  outline: none;
  transition: border-color .3s ease;
}

.cfg__text::placeholder {
  color: var(--bone-faint);
}

.cfg__text:focus {
  border-color: var(--seal);
}

.cfg__rows {
  padding: .5em .9em .8em;
  max-height: 62vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.cfg__rows::-webkit-scrollbar {
  display: none;
}

.cfg__row {
  display: grid;
  grid-template-columns: 7em 1fr 3ch;
  align-items: center;
  gap: .65em;
  padding: .32em 0;
  cursor: default;
}

.cfg__name {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}

.cfg__val {
  font-size: .55rem;
  color: var(--bone);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cfg__row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  margin: 0;
  background: var(--hair);
  outline: none;
  cursor: ew-resize;
}

.cfg__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 7px;
  height: 7px;
  background: var(--bone);
  border: none;
  border-radius: 0;
  transition: background .2s ease;
}

.cfg__row input[type="range"]::-moz-range-thumb {
  width: 7px;
  height: 7px;
  background: var(--bone);
  border: none;
  border-radius: 0;
  transition: background .2s ease;
}

.cfg__row input[type="range"]:hover::-webkit-slider-thumb,
.cfg__row input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: var(--seal);
}

.cfg__row input[type="range"]:hover::-moz-range-thumb,
.cfg__row input[type="range"]:focus-visible::-moz-range-thumb {
  background: var(--seal);
}

@media (prefers-reduced-motion: reduce) {
  .cfg.is-open .cfg__panel {
    animation: none;
  }
}

/* ---------- 小屏微调 ---------- */

@media (max-width: 767px) {
  .plate-tag > span {
    font-size: .55rem;
  }
  .atlas-colophon {
    min-width: 0;
    font-size: .55rem;
  }
  .atlas-frame {
    inset: .4em;
  }
}