/* =========================================================
   绣花一族 · 涪州刺绣非遗官网 — 中式美学自定义样式
   水墨朱砂主题 / 宣纸纹理 / 印章 / 笔触分隔 / 滚动渐显
   ========================================================= */

:root {
  --ink: #1f1b18;
  --paper: #f5efe3;
  --cinnabar: #a8342a;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  /* 宣纸纹理：极淡的暖色斑驳，纯 CSS 渐变叠加 */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(168, 52, 42, 0.035), transparent 42%),
    radial-gradient(circle at 82% 14%, rgba(57, 50, 44, 0.04), transparent 40%),
    radial-gradient(circle at 60% 88%, rgba(168, 52, 42, 0.03), transparent 46%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[v-cloak] { display: none !important; }

/* 选区 / 滚动条 中式点缀 */
::selection { background: rgba(168, 52, 42, 0.18); color: #1f1b18; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ece3d2; }
::-webkit-scrollbar-thumb { background: #c7b79a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a8342a; }

/* ---------- 宣纸颗粒：固定层，不随滚动重绘 ---------- */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- 印章 SealStamp ---------- */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
  font-weight: 700;
  color: #faf6ec;
  background: var(--cinnabar);
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 1.5px rgba(250, 246, 236, 0.55), 0 2px 8px rgba(168, 52, 42, 0.25);
  border-radius: 3px;
  line-height: 1;
}
.seal-rotate { transform: rotate(-4deg); }

/* logo 替代印章 */
.seal-logo {
  display: inline-block;
  vertical-align: middle;
}

/* 竖排文字 */
.vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.25em;
}

/* ---------- 笔触分隔线 ---------- */
.brush-divider {
  height: 14px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 180 2, 360 12, 560 7 S 940 2, 1198 7' stroke='%231f1b18' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
}

/* 朱砂细分隔 */
.rule-cinnabar { height: 2px; width: 56px; background: var(--cinnabar); }

/* ---------- 图片框：墨色细描边 + hover 墨韵 ---------- */
.frame-ink {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31, 27, 24, 0.12);
  background: #ece3d2;
}
.frame-ink img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.frame-ink:hover img { transform: scale(1.045); }
.frame-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 27, 24, 0.34), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.frame-ink.frame-hover-shade:hover::after { opacity: 1; }

/* ---------- 主图轮播（自动淡入淡出）---------- */
.hero-carousel {
  position: relative;
}
.hero-carousel img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroCarousel 6s infinite;
}
.hero-carousel img:nth-child(1) { animation-delay: 0s; }
.hero-carousel img:nth-child(2) { animation-delay: -3s; }
@keyframes heroCarousel {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel img { animation: none; }
  .hero-carousel img:nth-child(1) { opacity: 1; }
}

/* ---------- 滚动渐显（v-reveal 指令配合）---------- */
.reveal-init {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero 入场 ---------- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-rise { animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-d1 { animation-delay: 0.12s; }
.hero-d2 { animation-delay: 0.26s; }
.hero-d3 { animation-delay: 0.4s; }
.hero-d4 { animation-delay: 0.54s; }

/* 正文排版 */
.prose-cn p { line-height: 1.95; }
.prose-cn p + p { margin-top: 1.1rem; }

/* 链接卡片整体上浮 */
.lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(31, 27, 24, 0.13); }
.lift:active { transform: translateY(-1px); }

/* ---------- 相册封面（叠层预览）---------- */
.album-stack {
  position: relative;
  aspect-ratio: 4 / 3;
}
.album-cover,
.album-peek {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.album-peek {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom center;
}
.album-peek:nth-child(1) { transform: rotate(-3deg) translateY(8px) scale(0.97); opacity: 0.9; }
.album-peek:nth-child(2) { transform: rotate(3deg) translateY(8px) scale(0.97); opacity: 0.9; }
.album:hover .album-peek:nth-child(1) { transform: rotate(-6deg) translateY(4px) translateX(-10px) scale(0.98); }
.album:hover .album-peek:nth-child(2) { transform: rotate(6deg) translateY(4px) translateX(10px) scale(0.98); }
.album-cover { z-index: 2; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.album:hover .album-cover img { transform: scale(1.045); }
.album-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(31, 27, 24, 0.6), transparent 50%);
}
.album-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  background: rgba(250, 246, 236, 0.92);
  border-radius: 3px;
  font-size: 13px; color: #1f1b18;
  box-shadow: 0 4px 14px rgba(31, 27, 24, 0.22);
}
.album-badge b { font-family: "Noto Serif SC", serif; font-size: 16px; margin-left: 2px; }
.album-cta {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  color: #faf6ec; font-size: 14px; letter-spacing: 0.08em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.album:hover .album-cta { opacity: 1; transform: translateY(0); }
.album-arrow { transition: transform 0.4s ease; }
.album:hover .album-arrow { transform: translateX(5px); }

/* ---------- 灯箱：加载骨架 + 缩略胶片 ---------- */
.lb-spinner {
  width: 38px; height: 38px;
  border: 2.5px solid rgba(250, 246, 236, 0.22);
  border-top-color: #c2553f;
  border-radius: 50%;
  animation: lbspin 0.8s linear infinite;
}
@keyframes lbspin { to { transform: rotate(360deg); } }
.lb-strip { scrollbar-width: thin; scrollbar-color: #5b524a transparent; }
.lb-strip::-webkit-scrollbar { height: 6px; }
.lb-strip::-webkit-scrollbar-thumb { background: #5b524a; border-radius: 4px; }

/* ---------- 首页开场：朱地绣启 ----------
   全屏朱砂红地 → 圆形绣品徽记浮现，金线「走针」绕圈钉成 →
   「绣花一族」落定、金线绣出下划线 → 朱地左右对开（如朱漆宫门）满屏揭幕。
   背景以朱砂红为主，纯 CSS / SVG 走线，Vue 挂载前独立播放。 */
#intro {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; overflow: hidden;
  background: transparent;
}

/* 朱漆双扉：左右两片满屏朱砂，向两侧对开 */
.gate {
  position: fixed; top: 0; bottom: 0; width: 50.6%; z-index: 101;
  will-change: transform;
}
.gate::after { /* 宣纸颗粒，弱化纯色塑料感 */
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.gate-left {
  left: 0;
  background: radial-gradient(150vw 130vh at 100% 34%, #b8402f 0%, #951f17 60%, #7a1611 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
  animation: gateOpenL 1.05s 4.05s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.gate-right {
  right: 0;
  background: radial-gradient(150vw 130vh at 0% 34%, #b8402f 0%, #951f17 60%, #7a1611 100%);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
  animation: gateOpenR 1.05s 4.05s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes gateOpenL { to { transform: translateX(-100%); } }
@keyframes gateOpenR { to { transform: translateX(100%); } }

/* 中央徽记层：覆于双扉之上，揭幕前先淡出 */
.intro-emblem {
  position: fixed; inset: 0; z-index: 102;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 4.5vh, 40px);
  will-change: transform, opacity;
  animation: emblemOut 0.7s 4.0s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* 圆形绣品 + 金线走针环 */
.roundel {
  position: relative;
  width: clamp(300px, 56vh, 560px); height: clamp(300px, 56vh, 560px);
  opacity: 0; transform: scale(0.86);
  animation: roundelIn 0.85s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.roundel img {
  position: absolute; inset: 7%; width: 86%; height: 86%;
  object-fit: cover; border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(247, 240, 227, 0.5),
    0 0 0 7px rgba(232, 194, 122, 0.92),
    0 26px 60px rgba(60, 12, 8, 0.5),
    inset 0 0 30px rgba(70, 20, 14, 0.25);
}
.stitch-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stitch-path {
  fill: none; stroke: #ecc880; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 5 7; --dash-start: 592; stroke-dashoffset: 592;
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(70, 20, 10, 0.45));
  animation: stitchSew 1.7s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 题字 + 金线绣出下划线 */
.emblem-text { display: flex; flex-direction: column; align-items: center; }
.emblem-title {
  font-family: "Noto Serif SC", serif; font-weight: 900; color: #faf3e6;
  font-size: clamp(1.3rem, 3.6vh, 2.15rem); letter-spacing: 0.1em; line-height: 1.5;
  padding-left: 0.1em; text-align: center;
  text-shadow: 0 4px 20px rgba(60, 12, 8, 0.5);
  opacity: 0; transform: translateY(18px);
  animation: titleIn 0.85s 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stitch-underline {
  width: clamp(180px, 24vh, 280px); height: 10px; margin-top: clamp(12px, 2vh, 18px);
  overflow: visible;
}
.underline-path {
  fill: none; stroke: #ecc880; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 5 7; --dash-start: 312; stroke-dashoffset: 312;
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(70, 20, 10, 0.45));
  animation: stitchSew 1s 2.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.emblem-sub {
  margin-top: clamp(14px, 2.6vh, 22px);
  font-family: "Noto Serif SC", serif; font-weight: 500; color: #f0d6a0;
  font-size: clamp(0.95rem, 2.6vh, 1.2rem); letter-spacing: 0.46em; line-height: 1;
  padding-left: 0.46em;
  opacity: 0;
  animation: capFade 0.8s 2.9s ease forwards;
}

@keyframes roundelIn { to { opacity: 1; transform: scale(1); } }
@keyframes stitchSew {
  0% { opacity: 0; stroke-dashoffset: var(--dash-start, 592); }
  18% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes titleIn { to { opacity: 1; transform: translateY(0); } }
@keyframes capFade { to { opacity: 1; } }
@keyframes emblemOut { to { opacity: 0; transform: scale(1.07); } }

.intro-playing { overflow: hidden; }
.intro-seen #intro { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
}

/* ---------- Vue 过渡：移动抽屉 / 灯箱淡入 ---------- */
.drawer-enter-active, .drawer-leave-active { transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: top; }
.drawer-enter-from, .drawer-leave-to { opacity: 0; transform: scaleY(0.96); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* ---------- 降级：尊重 prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-init { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-rise { animation: none !important; }
  .frame-ink img, .lift { transition: none !important; }
}