*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:root{
--font-sans:"PingFang SC","SF Pro Text","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--font-display:"PingFang SC","SF Pro Display","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--text-label:12px;
--text-body:17px;
--text-body-large:18px;
--text-title:clamp(2.4rem,4.4vw,4.4rem);
--text-hero:clamp(3.1rem,6vw,5.8rem);
--text-card:clamp(1.85rem,2.45vw,2.45rem);
}
body{
font-family:var(--font-sans);
background:#07110f;
color:#fff;
overflow-x:hidden;
cursor:default;
line-height:1.72;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
[id]{scroll-margin-top:120px}
a:focus-visible,button:focus-visible{
outline:1px solid rgba(198,168,106,.72);
outline-offset:4px;
}

/* 鼠标跟踪高光效果 */
.cursor-glow{
position:fixed;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(198,168,106,0.1),transparent 65%);
pointer-events:none;
z-index:0;
filter:blur(50px);
transform:translate(-50%,-50%);
transition:opacity 0.3s ease;
opacity:0;
}
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(198,168,106,.08),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(111,168,154,.08),transparent 25%),
linear-gradient(to bottom,#081511,#0d221d,#07110f);
z-index:-3;
}
/* body bg → common.css */







.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
position:relative;
overflow:hidden;
}
.hero-light{
position:absolute;
width:860px;
height:860px;
background:radial-gradient(circle,rgba(198,168,106,.15),transparent 60%);
filter:blur(20px);
animation:float 12s ease-in-out infinite;
}
.hero-content{
position:relative;
z-index:2;
max-width:920px;
}
.small{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
margin-bottom:18px;
text-transform:uppercase;
font-size:var(--text-label);
font-weight:500;
opacity:.88;
}
h1{
font-family:var(--font-display);
font-size:var(--text-hero);
font-weight:300;
line-height:1.1;
letter-spacing:-.02em;
background:linear-gradient(to right,#f9e6c3,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.desc{
margin-top:32px;
color:rgba(255,255,255,.6);
line-height:1.75;
font-size:var(--text-body-large);
max-width:35em;
}
.enter{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:0;
padding:18px 38px;
min-height:58px;
font-size:15px;
letter-spacing:.08em;
font-weight:500;
border-radius:999px;
position:relative;
overflow:hidden;
border:1px solid rgba(198,168,106,.25);
background:rgba(255,255,255,.04);
backdrop-filter:blur(24px) saturate(140%);
color:#C6A86A;
cursor:pointer;
text-decoration:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .5s cubic-bezier(.25,1.2,.5,1),box-shadow .5s ease,border-color .4s ease;
}
.enter::before{
content:"";
position:absolute;
top:0;left:-120%;
width:80%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
transition:left .8s ease;
z-index:2;
pointer-events:none;
}
.enter:hover{
transform:translateY(-3px);
border-color:rgba(198,168,106,.4);
box-shadow:0 20px 50px rgba(198,168,106,.12),inset 0 1px 0 rgba(255,255,255,.10);
}
.enter:hover::before{left:130%}
.enter:active{transform:scale(.97)}
.enter-secondary{
background:rgba(111,168,154,.08);
border-color:rgba(111,168,154,.25);
color:#d8ebe6;
}
.section{
padding:140px 8%;
position:relative;
}
.section-head{
display:grid;
gap:18px;
margin-bottom:56px;
}
.title{
font-family:var(--font-display);
font-size:var(--text-title);
font-weight:300;
margin-bottom:24px;
line-height:1.14;
letter-spacing:-.02em;
background:linear-gradient(to right,#f7e6c8,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.text{
max-width:940px;
line-height:1.75;
color:rgba(255,255,255,.6);
font-size:var(--text-body);
}
.fade{
opacity:0;
filter:blur(4px);
transform:translate3d(0,30px,0);
transition:opacity .8s cubic-bezier(.25,1.2,.5,1),transform .9s cubic-bezier(.25,1.2,.5,1),filter .7s ease;
will-change:auto;
}
.fade.animating{will-change:opacity,transform,filter}
.fade.show{
opacity:1;
filter:blur(0);
transform:translate3d(0,0,0);
}
.workshop-hero{
padding:150px 7% 90px;
}
.hero-actions{
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
margin-top:46px;
}
.finale-content .enter{margin-top:34px}
.hero-smoke,
.hero-wood{
position:absolute;
pointer-events:none;
}
.hero-smoke{
border-radius:50%;
filter:blur(44px);
opacity:.6;
}
.hero-smoke-a{
width:420px;
height:420px;
top:18%;
left:8%;
background:radial-gradient(circle,rgba(111,168,154,.18),transparent 70%);
}
.hero-smoke-b{
width:520px;
height:520px;
right:-6%;
bottom:8%;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 70%);
}
.hero-wood{
inset:16% 11%;
border-radius:42px;
background:
linear-gradient(115deg,rgba(255,255,255,.03),transparent 48%),
repeating-linear-gradient(90deg,rgba(106,84,46,.05) 0 14px,rgba(255,255,255,.015) 14px 28px);
border:1px solid rgba(198,168,106,.08);
mask-image:radial-gradient(circle at center,rgba(0,0,0,1),transparent 88%);
}
.micro-layout,
.practice-shell,
.creation-grid,
.timeline-ribbon{
position:relative;
}
.micro-layout{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
gap:32px;
align-items:center;
}
.micro-visual,
.micro-copy,
.practice-shell,
.timeline-card,
.creation-card,
.finale-content{
position:relative;
overflow:hidden;
border-radius:34px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
}
.micro-visual::before,
.micro-copy::before,
.practice-shell::before,
.timeline-card::before,
.creation-card::before,
.finale-content::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(198,168,106,.14),transparent 42%);
pointer-events:none;
}
.micro-visual,
.micro-copy{
padding:30px;
}
.image-placeholder{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
background:
linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
radial-gradient(circle at top,rgba(198,168,106,.18),transparent 42%),
linear-gradient(180deg,rgba(7,17,15,.3),rgba(7,17,15,.74));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.2);
}
.image-placeholder::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 60%);


}
.image-placeholder span{
position:absolute;
left:22px;
right:22px;
bottom:18px;
color:rgba(255,255,255,.78);
font-size:12px;
letter-spacing:.22em;
line-height:1.8;
text-transform:uppercase;
}
.micro-main{
min-height:460px;
border-radius:30px;
}
.micro-badges{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}
.micro-badge,
.tool-chip{
padding:10px 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.04);
color:#e9d6b0;
font-size:13px;
letter-spacing:.1em;
}
.micro-topline,
.practice-meta,
.timeline-era{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
font-size:11px;
text-transform:uppercase;
}
.micro-copy{
display:grid;
gap:16px;
}
.micro-copy h3,
.practice-copy h3,
.creation-card h3{
font-family:var(--font-display);
font-size:var(--text-card);
font-weight:300;
line-height:1.28;
letter-spacing:-.015em;
color:#f2dfbc;
}
.micro-copy p,
.micro-note p,
.practice-copy p,
.mentor-quote p,
.timeline-card p,
.creation-card p,
.finale-text{
color:rgba(255,255,255,.6);
line-height:1.9;
font-size:16px;
}
.micro-note{
display:grid;
gap:10px;
padding:18px 20px;
border-radius:24px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}
.micro-note span{
color:#e8d3a8;
letter-spacing:.14em;
font-size:12px;
text-transform:uppercase;
}
.practice-shell{
padding:30px;
}
.practice-tabs{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-bottom:26px;
}
.practice-tab{
padding:14px 22px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
cursor:pointer;
transition:.4s;
}
.practice-tab:hover,
.practice-tab.active{
transform:translateY(-3px);
border-color:rgba(198,168,106,.28);
color:#f1dfbb;
background:linear-gradient(145deg,rgba(198,168,106,.12),rgba(111,168,154,.08));
}
/* practice-panel styles consolidated below */
.practice-main{
min-height:420px;
border-radius:28px;
}
.practice-tools{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}
.practice-copy{
display:grid;
gap:16px;
}
.mentor-quote{
display:grid;
gap:10px;
padding:20px 22px;
border-radius:24px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
min-height:160px;
}
.timeline-ribbon{
display:grid;
grid-template-columns:repeat(4,minmax(280px,1fr));
gap:22px;
overflow-x:auto;
padding-bottom:12px;
scrollbar-width:none;
scroll-snap-type:x proximity;
}
.timeline-ribbon::-webkit-scrollbar{display:none}
.timeline-card{
padding:28px;
display:grid;
gap:18px;
min-height:430px;
scroll-snap-align:start;
}
/* .page-transition-overlay → common.css */
.timeline-placeholder{
min-height:220px;
border-radius:24px;
}
.creation-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.creation-card{
padding:28px;
display:grid;
gap:18px;
}
.creation-placeholder{
min-height:260px;
border-radius:26px;
}
.quote{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}
.quote h2{
font-family:var(--font-display);
font-size:clamp(2.6rem,4.9vw,4.9rem);
line-height:1.52;
font-weight:300;
letter-spacing:-.018em;
background:linear-gradient(to right,#f9e9cb,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.finale-section{
position:relative;
min-height:84vh;
padding:120px 7% 110px;
overflow:hidden;
}
.finale-glow{
position:absolute;
inset:18% 18% auto;
height:420px;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 62%);
filter:blur(30px);
pointer-events:none;
}
.finale-content{
max-width:980px;
margin:0 auto;
padding:72px 48px;
}
/* @keyframes float → common.css */
@media(max-width:1100px){
.micro-layout,
.practice-panel,
.creation-grid{
grid-template-columns:1fr;
}
.timeline-ribbon{
grid-template-columns:repeat(4,78vw);
}
}
@media(max-width:768px){
.nav{width:92%;overflow:auto}
.nav ul{gap:16px}
.section{padding:100px 24px}
.workshop-hero{padding:130px 24px 90px}
.desc{font-size:16px}
.micro-visual,
.micro-copy,
.practice-shell,
.timeline-card,
.creation-card,
.finale-content{padding:24px}
.micro-main,
.practice-main{min-height:320px}
.creation-placeholder{min-height:220px}
.timeline-ribbon{
grid-template-columns:repeat(4,84vw);
}
.finale-section{
padding:100px 24px;
min-height:auto;
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation:none !important;
transition:none !important;
}
.fade,.fade.show{
opacity:1;
filter:none;
transform:none;
}
}
.image-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 保持比例并填满框 */
  object-position: center;  /* 居中显示 */
  border-radius: 24px;      /* 保持圆角一致 */
  margin-top: 8px;
  box-shadow: 0 0 40px rgba(255,255,255,0.25);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.image-placeholder:hover img {
  transform: scale(1.06);
  filter: brightness(1.15);
}

/* 主视觉容器 */
.micro-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px; /* 与图片圆角保持一致 */
}
.image-placeholders img {
  display: block;
  width: 600px;
  height: 500px;
  object-fit: cover;        /* 保持比例并填满框 */
  object-position: center;  /* 居中显示 */
  border-radius: 24px;      /* 保持圆角一致 */
  margin-top: 8px;
  box-shadow: 0 0 40px rgba(255,255,255,0.25);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.image-placeholders:hover img {
  transform: scale(1.06);
  filter: brightness(1.15);
}
/* ===== 外层舞台 ===== */
.practice-stage{
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

/* ===== 面板容器 ===== */
.practice-panel{
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);
  gap:28px;
  align-items:center;

  opacity: 0;
  pointer-events: none;
  /* 默认无过渡——重置时瞬间隐藏，避免 bounce-back */
  transition: none;
}

/* ===== 激活态：带过渡以支持从 enter-right 滑入 ===== */
.practice-panel.active{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  filter: blur(0);
  z-index: 2;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease,
    filter .45s ease;
}

/* ===== 进入起始位置（由 JS 瞬时设置，随后移除触发滑入） ===== */
.practice-panel.enter-right{
  transform: translateX(80px) scale(.96);
  filter: blur(8px);
  /* 此处无 transition——仅作为 .active 过渡的起点 */
}

/* ===== 离开动画：向左滑出并淡出 ===== */
.practice-panel.leave-left{
  opacity: 0;
  transform: translateX(-60px) scale(.97);
  filter: blur(6px);
  z-index: 1;
  transition:
    transform .45s cubic-bezier(.55,0,.45,1),
    opacity .4s ease,
    filter .4s ease;
}

/* ===== 图片动画 ===== */
.practice-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform 1.2s ease,
    filter 1s ease;
}

.practice-panel.active .practice-main img{
  transform: scale(1);
  filter: brightness(1);
}

.practice-panel:not(.active) .practice-main img{
  transform: scale(1.08);
  filter: brightness(.8);
}

/* ===== 标签按钮 ===== */
.practice-tab{
  position: relative;
  overflow: hidden;

  transition:
    color .4s ease,
    background .4s ease,
    transform .3s ease;
}

.practice-tab:hover{
  transform: translateY(-2px);
}

.practice-tab.active{
  background: rgba(212,175,55,.16);
  color: #d4af37;
}

/* 金色滑动条 */
.practice-tab::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    transparent
  );

  transform: translateX(-100%);
  transition: transform .5s ease;
}

.practice-tab.active::after{
  transform: translateX(0);
}