/* ============================================================
   03 波普 / 迷幻 Pop Art & Psychedelic · 1960s—1970s
   太阳光芒 / 半调网点 / 漫画对白框 / 粗黑描边
   ============================================================ */
:root[data-theme="pop"] {
  --paper: #ffdb4f;
  --butter: #ffdb4f;
  --sky: #ffdb4f;
  --ink: #141414;
  --rose: #ff547f;
  --pink: #ff547f;
  --wine: #2a0f4a;
  --pop-orange: #ff7301;
  --pop-teal: #00a5aa;
  --pop-violet: #7b4bd8;
  --pop-outline: #141414;
}

:root[data-theme="pop"] body { background: var(--paper); }

/* 半调网点铺在整页最上层，很薄 */
:root[data-theme="pop"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .16;
  background-image: radial-gradient(var(--pop-outline) 1px, transparent 1.3px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}

/* 首屏右侧：太阳光芒 */
:root[data-theme="pop"] .hero { position: relative; overflow: hidden; }
:root[data-theme="pop"] .hero::before {
  content: "";
  position: absolute;
  right: -22%;
  top: -6%;
  width: min(96vw, 1180px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  background:
    repeating-conic-gradient(from 0deg,
      var(--rose) 0 5deg,
      var(--paper) 5deg 10deg,
      var(--pop-orange) 10deg 15deg,
      var(--paper) 15deg 20deg,
      var(--pop-teal) 20deg 25deg,
      var(--paper) 25deg 30deg,
      var(--pop-violet) 30deg 35deg,
      var(--paper) 35deg 40deg);
  animation: pop-spin 46s linear infinite;
}
@keyframes pop-spin { to { rotate: 360deg; } }
:root[data-theme="pop"] .hero .plate { position: relative; z-index: 1; }

/* 标题像贴纸：白字 + 粗黑描边（首屏底色是旋转的光芒，必须描边才读得清） */
:root[data-theme="pop"] .display,
:root[data-theme="pop"] .hero__title {
  letter-spacing: -.02em;
  text-shadow: 5px 5px 0 var(--pop-outline);
}
:root[data-theme="pop"] .hero__title {
  color: #fff;
  -webkit-text-stroke: 2px var(--pop-outline);
  paint-order: stroke fill;
  text-shadow: 7px 7px 0 var(--pop-outline);
}
:root[data-theme="pop"] .hero__title em {
  color: var(--rose);
  -webkit-text-stroke: 3px var(--pop-outline);
}
:root[data-theme="pop"] .art__tag span { color: #fff; text-shadow: 1px 1px 0 var(--pop-outline); }
:root[data-theme="pop"] .kicker b {
  -webkit-text-stroke: 1px var(--pop-outline);
  paint-order: stroke fill;
}
:root[data-theme="pop"] .facts dt { color: var(--pop-outline); font-weight: 800; }
:root[data-theme="pop"] .hero__lead {
  color: var(--pop-outline);
  font-weight: 800;
  text-shadow: 2px 2px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
}
:root[data-theme="pop"] .display em,
:root[data-theme="pop"] .hero__title em {
  color: #fff;
  -webkit-text-stroke: 2.5px var(--pop-outline);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--pop-outline);
}
:root[data-theme="pop"] .display--light { color: #fff; }
:root[data-theme="pop"] .display--light em { color: var(--paper); }

/* 每块内容都带粗黑边框 + 硬阴影 */
:root[data-theme="pop"] .btn,
:root[data-theme="pop"] .chips li,
:root[data-theme="pop"] .copybtn,
:root[data-theme="pop"] .brand,
:root[data-theme="pop"] .menu__link--cta,
:root[data-theme="pop"] .acc__plus {
  border: 3px solid var(--pop-outline);
  box-shadow: 5px 5px 0 var(--pop-outline);
  transform: none;
  border-radius: 0;
}
:root[data-theme="pop"] .btn { background: var(--rose); color: #fff; }
:root[data-theme="pop"] .btn:hover { background: var(--pop-teal); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pop-outline); }
:root[data-theme="pop"] .brand { background: var(--pop-outline); color: var(--paper); }

/* 对白框：圆角 + 小尾巴 */
:root[data-theme="pop"] .chips li {
  background: #fff;
  color: var(--pop-outline);
  border-radius: 999px;
  position: relative;
  padding: 9px 18px;
  font-weight: 800;
}
:root[data-theme="pop"] .chips li::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 3px solid var(--pop-outline);
  border-bottom: 3px solid var(--pop-outline);
  transform: rotate(45deg);
}
:root[data-theme="pop"] .chips li:hover { background: var(--rose); color: #fff; transform: rotate(-2deg); }

:root[data-theme="pop"] .kicker { color: var(--pop-outline); font-family: var(--mono); letter-spacing: .14em; }
:root[data-theme="pop"] .kicker b { color: var(--rose); -webkit-text-stroke: 0; }
:root[data-theme="pop"] .kicker--light { color: var(--paper); }
:root[data-theme="pop"] .kicker--light b { color: var(--pop-teal); }

/* 分区：粗线 + 色块，无渐变 */
:root[data-theme="pop"] .about { background: var(--paper); }
:root[data-theme="pop"] .about::before {
  background: var(--pop-teal);
  border: 4px solid var(--pop-outline);
  transform: translate(24%, -22%) rotate(-14deg);
}
:root[data-theme="pop"] .services { background: var(--pop-orange); }
:root[data-theme="pop"] .skills { background: var(--rose); }
:root[data-theme="pop"] .rows { border-top: 5px solid var(--pop-outline); }
:root[data-theme="pop"] .rows__item { border-bottom: 5px solid var(--pop-outline); }
:root[data-theme="pop"] .row::before { background: var(--pop-outline); }
:root[data-theme="pop"] .row:hover, :root[data-theme="pop"] .row:focus-visible { color: var(--paper); }
:root[data-theme="pop"] .row__name { text-shadow: 3px 3px 0 rgba(20, 20, 20, .35); }
:root[data-theme="pop"] .row__idx { color: #fff; }

:root[data-theme="pop"] .acc { border-top: 5px solid var(--pop-outline); }
:root[data-theme="pop"] .acc__item { border-bottom: 5px solid var(--pop-outline); }
:root[data-theme="pop"] .acc__btn:hover { background: #fff; }
:root[data-theme="pop"] .acc__plus { background: var(--pop-outline); color: var(--paper); }
:root[data-theme="pop"] .acc__item.is-open .acc__plus { background: var(--paper); color: var(--pop-outline); }
:root[data-theme="pop"] .acc__title { text-shadow: 3px 3px 0 rgba(20, 20, 20, .35); }

/* 首屏图形：粉底黑边的圆 + 黄色三角 + 青色方块 */
:root[data-theme="pop"] .art__slab {
  left: 4%;
  top: 14%;
  width: 76%;
  padding-bottom: 76%;
  border-radius: 50%;
  background: var(--rose);
  border: 4px solid var(--pop-outline);
  transform: none;
}
:root[data-theme="pop"] .art__ring { display: none; }
:root[data-theme="pop"] .art__cube {
  width: 24%;
  aspect-ratio: 1;
  background: var(--pop-teal);
  border: 4px solid var(--pop-outline);
  --rest: rotate(8deg);
}
:root[data-theme="pop"] .art__pip {
  width: clamp(40px, 12%, 66px);
  background: var(--paper);
  border: 4px solid var(--pop-outline);
}
:root[data-theme="pop"] .art__frame {
  border: 5px solid var(--pop-outline);
  box-shadow: 10px 10px 0 var(--pop-outline);
  --rest: rotate(-3deg);
}
:root[data-theme="pop"] .art__tag { background: var(--pop-teal); color: #fff; border: 3px solid var(--pop-outline); transform: rotate(-3deg); }
:root[data-theme="pop"] .art__badge { display: none; }
:root[data-theme="pop"] .hero__stamp { color: var(--pop-outline); }

:root[data-theme="pop"] .topbar { border-bottom: 4px solid var(--pop-outline); }
:root[data-theme="pop"] .topbar.is-stuck { background: var(--paper); backdrop-filter: none; }
:root[data-theme="pop"] .menu__link { font-weight: 800; }
:root[data-theme="pop"] .menu__link--cta { background: var(--pop-violet); color: #fff; }
:root[data-theme="pop"] .menu__link--cta[aria-current="true"] { background: var(--pop-teal); }

:root[data-theme="pop"] .ticker,
:root[data-theme="pop"] .flow,
:root[data-theme="pop"] .foot { background: var(--pop-outline); }
:root[data-theme="pop"] .ticker__run i { color: var(--rose); }
:root[data-theme="pop"] .flow { border-block: 6px solid var(--rose); }
:root[data-theme="pop"] .flow__step h3 { color: var(--paper); }
:root[data-theme="pop"] .flow__no { color: var(--pop-teal); }

:root[data-theme="pop"] .contact { background: var(--wine); }
:root[data-theme="pop"] .contact::after {
  content: "POP!";
  font-size: clamp(4rem, 12vw, 12rem);
  color: var(--paper);
  -webkit-text-stroke: 4px var(--rose);
  paint-order: stroke fill;
  opacity: 1;
  transform: rotate(-12deg);
}
:root[data-theme="pop"] .mail { color: var(--paper); background-image: linear-gradient(var(--rose), var(--rose)); }
:root[data-theme="pop"] .mail:hover { color: var(--rose); }
:root[data-theme="pop"] .copybtn { background: var(--paper); color: var(--pop-outline); }
:root[data-theme="pop"] .copybtn:hover { background: var(--pop-teal); color: #fff; }
:root[data-theme="pop"] .tel { color: var(--paper); border-color: var(--rose); }
:root[data-theme="pop"] .note--light { color: rgba(255, 219, 79, .72); }
:root[data-theme="pop"] .ruler i { background: var(--rose); }
:root[data-theme="pop"] .curtain { background: var(--paper); }
:root[data-theme="pop"] .curtain__star { color: var(--rose); }
:root[data-theme="pop"] .curtain__sky { background: var(--pop-violet); }
:root[data-theme="pop"] .curtain__title span { color: #fff; -webkit-text-stroke: 2px var(--pop-outline); text-shadow: 5px 5px 0 var(--pop-outline); }
:root[data-theme="pop"] .cursor span { background: var(--rose); color: #fff; border: 2px solid var(--pop-outline); }

/* --- 字体 --- */
:root[data-theme="pop"] {
  --display: "Bungee", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

/* --- 可读性修正：描边与投影只留给大标题，小字一律实心 --- */
:root[data-theme="pop"] .display,
:root[data-theme="pop"] .acc__title,
:root[data-theme="pop"] .row__name,
:root[data-theme="pop"] .flow__step h3 {
  color: #fff;
  -webkit-text-stroke: 2px #141414;
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 #141414;
}
:root[data-theme="pop"] .display em {
  color: #ffe600;
  -webkit-text-stroke: 2px #141414;
  text-shadow: 5px 5px 0 #141414;
}
:root[data-theme="pop"] .row__idx,
:root[data-theme="pop"] .acc__idx,
:root[data-theme="pop"] .row__type,
:root[data-theme="pop"] .facts dt,
:root[data-theme="pop"] .kicker,
:root[data-theme="pop"] .kicker b {
  color: #141414;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
:root[data-theme="pop"] .row__desc,
:root[data-theme="pop"] .flow__step p,
:root[data-theme="pop"] .facts dd,
:root[data-theme="pop"] .acc__inner p,
:root[data-theme="pop"] .note {
  color: #2b1400;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
:root[data-theme="pop"] .hero__lead {
  color: #2b1400;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: #fff;
  border: 2px solid #141414;
  box-shadow: 5px 5px 0 #141414;
  padding: 6px 10px;
}

/* --- 导航贴纸：白底黑框，选中态反色 --- */
:root[data-theme="pop"] .menu__link {
  background: #fff;
  border: 2.5px solid #141414;
  color: #141414;
  font-weight: 800;
}
:root[data-theme="pop"] .menu__link:hover,
:root[data-theme="pop"] .menu__link[aria-current="true"] {
  background: #f61c13;
  color: #fff;
}
:root[data-theme="pop"] .menu__link--cta {
  background: #7b4bd8;
  color: #fff;
}
:root[data-theme="pop"] .menu__link--cta:hover {
  background: #5c2fc0;
  color: #fff;
}
/* 覆盖层的放射光芒别被底色冲淡 */
.style-stage[data-theme="pop"]::before { opacity: .88; }

/* --- 配色：不用纯黑，改成高饱和波普色 --- */
:root[data-theme="pop"] {
  --pop-outline: #5b1ecc;   /* 描边 / 边框 / 投影：深紫，代替纯黑 */
  --ink: #2b1400;           /* 正文：暖深褐，不再是 #141414 */
}
:root[data-theme="pop"] .brand { background: #e6007a; color: #fff; }
:root[data-theme="pop"] .ticker { background: #7b4bd8; }
:root[data-theme="pop"] .ticker__run i { color: #ffdb4f; }
:root[data-theme="pop"] .flow { background: #5b1ecc; border-block-color: #e6007a; }
:root[data-theme="pop"] .flow__step h3 { color: #fff; }
:root[data-theme="pop"] .flow__step p { color: rgba(255, 255, 255, .9); }
:root[data-theme="pop"] .flow__no { color: #ffdb4f; }
:root[data-theme="pop"] .foot { background: #7b4bd8; }
:root[data-theme="pop"] .row::before { background: #e6007a; }
:root[data-theme="pop"] .row:hover .row__desc,
:root[data-theme="pop"] .row:hover .row__type { color: #fff; }
:root[data-theme="pop"] .acc__plus { background: #e6007a; color: #fff; }
:root[data-theme="pop"] .acc__item.is-open .acc__plus { background: #ffdb4f; color: #5b1ecc; }
:root[data-theme="pop"] .hero__title .line--name { color: #7b4bd8; }
:root[data-theme="pop"] .menu__link { border-color: #5b1ecc; color: #2b1400; }
:root[data-theme="pop"] .menu__link--cta { background: #e6007a; border-color: #5b1ecc; color: #fff; }
:root[data-theme="pop"] .menu__link:hover,
:root[data-theme="pop"] .menu__link[aria-current="true"] { background: #ffdb4f; color: #2b1400; }
:root[data-theme="pop"] .hero__lead { border-color: #5b1ecc; box-shadow: 5px 5px 0 #5b1ecc; }
:root[data-theme="pop"] .btn { box-shadow: 5px 5px 0 #5b1ecc; }
:root[data-theme="pop"] .art__tag { border-color: #5b1ecc; }
:root[data-theme="pop"] .kicker b { color: #e6007a; }
/* 主标题：紫底 + 洋红硬投影，不用白字压黄底 */
:root[data-theme="pop"] .hero__title {
  color: #5b1ecc;
  -webkit-text-stroke: 0;
  text-shadow: 7px 7px 0 #e6007a;
}
:root[data-theme="pop"] .hero__title .line--name {
  color: #5b1ecc;
  text-shadow: 7px 7px 0 #e6007a;
}
:root[data-theme="pop"] .display {
  color: #5b1ecc;
  -webkit-text-stroke: 0;
  text-shadow: 6px 6px 0 #e6007a;
}
:root[data-theme="pop"] .display em {
  color: #e6007a;
  -webkit-text-stroke: 0;
  text-shadow: 6px 6px 0 #5b1ecc;
}
/* .display 会落在黄/橙/粉三种底上，只能用白字 + 紫描边 */
:root[data-theme="pop"] .display {
  color: #fff;
  -webkit-text-stroke: 3px #5b1ecc;
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 #7b4bd8;
}
:root[data-theme="pop"] .display em {
  color: #ffdb4f;
  -webkit-text-stroke: 3px #5b1ecc;
  text-shadow: 6px 6px 0 #e6007a;
}

/* 手机上让光芒再往右铺一点 */
@media (max-width: 720px) {
  :root[data-theme="pop"] .hero::before { right: -58%; width: 152vw; }

  /* small screens: 2-3px strokes eat the counters of CJK glyphs */
  :root[data-theme="pop"] .hero__title,
  :root[data-theme="pop"] .hero__title em,
  :root[data-theme="pop"] .display,
  :root[data-theme="pop"] .display em,
  :root[data-theme="pop"] .curtain__title,
  :root[data-theme="pop"] .curtain__title span,
  :root[data-theme="pop"] .brand,
  :root[data-theme="pop"] .brand__mark {
    paint-order: stroke fill;
  }
  :root[data-theme="pop"] .hero__title { color: #fff; -webkit-text-stroke: 1.2px #5b1ecc; text-shadow: 4px 4px 0 #e6007a; }
  :root[data-theme="pop"] .hero__title em { color: #fff; -webkit-text-stroke: 1.4px #5b1ecc; text-shadow: 3px 3px 0 #e6007a; }
  :root[data-theme="pop"] .display,
  :root[data-theme="pop"] .display em { -webkit-text-stroke-width: 1.2px; text-shadow: 3px 3px 0 #5b1ecc; }
  :root[data-theme="pop"] .curtain__title { -webkit-text-stroke-width: 1.6px; }
  :root[data-theme="pop"] .curtain__title span { -webkit-text-stroke-width: 1.2px; text-shadow: 3px 3px 0 var(--pop-outline); }
  :root[data-theme="pop"] .brand,
  :root[data-theme="pop"] .brand__mark { -webkit-text-stroke-width: .8px; }
}

/* 手机端「ATOSS.」那行的紫字 + 7px 洋红硬投影在 48px 下会糊成一团，改白字细描边 */
@media (max-width: 720px) {
  :root[data-theme="pop"] .hero__title .line--name,
  :root[data-theme="pop"] .hero__title .line--name span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1.2px #5b1ecc;
    text-shadow: 4px 4px 0 #e6007a;
    paint-order: stroke fill;
  }
}

/* 768 这类中间宽度仍在「紫字 + 紫投影」区间，标题一样会糊：统一到 1024 以下都改白字细描边 */
@media (max-width: 1024px) {
  :root[data-theme="pop"] .hero__title,
  :root[data-theme="pop"] .hero__title .line,
  :root[data-theme="pop"] .hero__title .line span,
  :root[data-theme="pop"] .hero__title .line--name,
  :root[data-theme="pop"] .hero__title .line--name span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1.4px #5b1ecc;
    text-shadow: 5px 5px 0 #e6007a;
    paint-order: stroke fill;
  }
  :root[data-theme="pop"] .hero__title em {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1.4px #5b1ecc;
    text-shadow: 4px 4px 0 #e6007a;
    paint-order: stroke fill;
  }
  :root[data-theme="pop"] .display {
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 2px #5b1ecc;
    text-shadow: 4px 4px 0 #7b4bd8;
    paint-order: stroke fill;
  }
  :root[data-theme="pop"] .display em {
    color: #ffdb4f;
    -webkit-text-fill-color: #ffdb4f;
    -webkit-text-stroke: 2px #5b1ecc;
    text-shadow: 4px 4px 0 #e6007a;
    paint-order: stroke fill;
  }
}