/* ============================================
   css/intro.css
   Mucha Exhibition v7.1.17 OSS (v6 起源 + v7.1.x 暗色/优化增量)
   ============================================ */

/* ===================== 开场动画：三段式 ===================== */
#intro{position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at center,#FAF4E6 0%,#E8DCC0 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:20px;text-align:center;overflow:hidden;
  transition:opacity 1.5s,transform 1.5s}
#intro.hidden{opacity:0;pointer-events:none;transform:scale(1.1)}

/* 第一段：建筑仪式 —— 6 圈嵌套矩形描边生长 */
.intro-architecture{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;
  animation:archAppear 0.2s linear 0.3s forwards}
@keyframes archAppear{to{opacity:1}}
.arch-frame{
  fill:none;stroke:url(#archGold);stroke-width:1.2;
  stroke-dasharray:2000;stroke-dashoffset:2000;opacity:0;
  transform-origin:center;transform-box:fill-box;
}
.arch-frame.f1{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 0.4s forwards, archShrink 0.5s ease-out 2.3s forwards}
.arch-frame.f2{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 0.65s forwards, archShrink 0.5s ease-out 2.3s forwards}
.arch-frame.f3{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 0.9s forwards, archShrink 0.5s ease-out 2.3s forwards}
.arch-frame.f4{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 1.15s forwards, archShrink 0.5s ease-out 2.3s forwards}
.arch-frame.f5{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 1.4s forwards, archShrink 0.5s ease-out 2.3s forwards}
.arch-frame.f6{animation:archDraw 0.7s cubic-bezier(0.4,0,0.2,1) 1.65s forwards, archShrink 0.5s ease-out 2.3s forwards}
@keyframes archDraw{to{stroke-dashoffset:0;opacity:0.75}}
@keyframes archShrink{to{opacity:0;transform:scale(0.85)}}

/* 第二段：自然仪式 —— 4 季满铺背景 */
#intro{position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at center,#FAF4E6 0%,#E8DCC0 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:20px;text-align:center;overflow:hidden;
  transition:opacity 1.5s,transform 1.5s}
#intro.hidden{opacity:0;pointer-events:none;transform:scale(1.1)}

/* 4 季流转：极繁满铺背景 + 依次绽放（春→夏→秋→冬） */
.intro-seasons-flow{position:absolute;inset:0;pointer-events:none;z-index:1;
  display:flex;align-items:center;justify-content:center}
.season-stage{position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-size:280px 280px;background-repeat:repeat;background-position:center}

/* 春：嫩绿渐变 + 满铺花卉藤蔓 */
.spring-stage{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'><g fill='none' stroke='%238FBC8F' stroke-width='1.2' opacity='0.5'><path d='M20,80 Q60,60 100,80 Q140,100 180,80 Q220,60 260,80'/><path d='M20,160 Q60,140 100,160 Q140,180 180,160 Q220,140 260,160'/><path d='M20,240 Q60,220 100,240 Q140,260 180,240 Q220,220 260,240'/><path d='M80,20 Q100,60 80,100 Q60,140 80,180 Q100,220 80,260'/><path d='M200,20 Q220,60 200,100 Q180,140 200,180 Q220,220 200,260'/><circle cx='40' cy='80' r='4' fill='%23FFD966' opacity='0.6'/><circle cx='140' cy='160' r='4' fill='%23FFD966' opacity='0.6'/><circle cx='240' cy='80' r='4' fill='%23FFD966' opacity='0.6'/><circle cx='100' cy='240' r='4' fill='%23FFD966' opacity='0.6'/><circle cx='80' cy='80' r='6' fill='%23F8C8DC' opacity='0.5'/><circle cx='200' cy='160' r='6' fill='%23F8C8DC' opacity='0.5'/><path d='M40,40 Q35,30 30,35 Q33,42 40,40' fill='%238FBC8F' opacity='0.6'/><path d='M240,200 Q245,190 250,195 Q247,202 240,200' fill='%238FBC8F' opacity='0.6'/></g></svg>"),
    linear-gradient(180deg,#E8F4D8 0%,#F4F0D0 60%,#F8F4E0 100%);
  animation:seasonShow 1.6s ease-in-out 2.4s forwards;
}

/* 夏：鎏金渐变 + 满铺麦穗向日葵 */
.summer-stage{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'><g fill='none' stroke='%23B8860B' stroke-width='1.2' opacity='0.5'><circle cx='40' cy='40' r='10'/><circle cx='40' cy='40' r='6'/><circle cx='240' cy='80' r='10'/><circle cx='240' cy='80' r='6'/><circle cx='60' cy='220' r='10'/><circle cx='60' cy='220' r='6'/><circle cx='220' cy='240' r='10'/><circle cx='220' cy='240' r='6'/><path d='M40,30 L40,15 M30,40 L15,40 M50,40 L65,40 M30,30 L20,20 M50,30 L60,20'/><path d='M240,70 L240,55 M230,80 L215,80 M250,80 L265,80'/><path d='M60,210 L60,195 M50,220 L35,220 M70,220 L85,220'/><path d='M220,230 L220,215 M210,240 L195,240 M230,240 L245,240'/><path d='M20,140 Q25,130 30,140 Q35,150 40,140' stroke-width='1.5'/><path d='M260,180 Q265,170 270,180 Q275,190 280,180' stroke-width='1.5'/><path d='M140,260 Q145,250 150,260 Q155,270 160,260' stroke-width='1.5'/><path d='M140,20 Q145,10 150,20 Q155,30 160,20' stroke-width='1.5'/></g><g fill='%23FFD700' opacity='0.3'><circle cx='40' cy='40' r='3'/><circle cx='240' cy='80' r='3'/><circle cx='60' cy='220' r='3'/><circle cx='220' cy='240' r='3'/></g></svg>"),
    linear-gradient(180deg,#F0E090 0%,#D4B860 50%,#B89030 100%);
  animation:seasonShow 1.6s ease-in-out 3.6s forwards;
}

/* 秋：赭石渐变 + 满铺落叶葡萄 */
.autumn-stage{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'><g fill='%23D2691E' stroke='%238B4513' stroke-width='0.6' opacity='0.55'><path d='M30,30 Q60,25 75,40 Q60,55 30,50 Z M40,38 L70,40'/><path d='M210,60 Q240,55 255,70 Q240,85 210,80 Z M220,68 L250,70'/><path d='M50,140 Q80,135 95,150 Q80,165 50,160 Z M60,148 L90,150'/><path d='M190,180 Q220,175 235,190 Q220,205 190,200 Z M200,188 L230,190'/><path d='M40,220 Q70,215 85,230 Q70,245 40,240 Z M50,228 L80,230'/><path d='M200,240 Q230,235 245,250 Q230,265 200,260 Z M210,248 L240,250'/><circle cx='140' cy='30' r='5' fill='%23800020'/><circle cx='132' cy='38' r='5' fill='%23800020'/><circle cx='148' cy='38' r='5' fill='%23800020'/><circle cx='140' cy='46' r='5' fill='%23800020'/><circle cx='132' cy='54' r='5' fill='%23800020'/><circle cx='148' cy='54' r='5' fill='%23800020'/><circle cx='140' cy='62' r='5' fill='%23800020'/><circle cx='250' cy='160' r='5' fill='%23800020'/><circle cx='242' cy='168' r='5' fill='%23800020'/><circle cx='258' cy='168' r='5' fill='%23800020'/><circle cx='250' cy='176' r='5' fill='%23800020'/><path d='M140,20 L140,10' stroke='%23D2691E' stroke-width='1.5' fill='none'/><path d='M250,150 L250,140' stroke='%23D2691E' stroke-width='1.5' fill='none'/><path d='M20,180 Q30,170 40,180 Q50,190 60,180' stroke='%238B4513' stroke-width='1.5' fill='none'/><path d='M240,40 Q250,30 260,40 Q270,50 280,40' stroke='%238B4513' stroke-width='1.5' fill='none'/></g></svg>"),
    linear-gradient(180deg,#A85838 0%,#6B2818 60%,#4A1810 100%);
  animation:seasonShow 1.6s ease-in-out 4.8s forwards;
}

/* 冬：冰蓝渐变 + 满铺雪花冬枝 */
.winter-stage{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'><g fill='none' stroke='%23E8E8E8' stroke-width='1' opacity='0.6'><line x1='40' y1='40' x2='40' y2='60'/><line x1='34' y1='46' x2='46' y2='46'/><line x1='36' y1='42' x2='44' y2='50'/><line x1='44' y1='42' x2='36' y2='50'/><line x1='240' y1='40' x2='240' y2='60'/><line x1='234' y1='46' x2='246' y2='46'/><line x1='236' y1='42' x2='244' y2='50'/><line x1='244' y1='42' x2='236' y2='50'/><line x1='40' y1='220' x2='40' y2='240'/><line x1='34' y1='226' x2='46' y2='226'/><line x1='36' y1='222' x2='44' y2='230'/><line x1='44' y1='222' x2='36' y2='230'/><line x1='240' y1='220' x2='240' y2='240'/><line x1='234' y1='226' x2='246' y2='226'/><line x1='236' y1='222' x2='244' y2='230'/><line x1='244' y1='222' x2='236' y2='230'/><line x1='140' y1='130' x2='140' y2='150'/><line x1='134' y1='136' x2='146' y2='136'/><line x1='136' y1='132' x2='144' y2='140'/><line x1='144' y1='132' x2='136' y2='140'/><path d='M20,140 Q40,120 60,140 Q80,120 100,140' stroke='%23708090' stroke-width='1.5' fill='none'/><path d='M180,160 Q200,140 220,160 Q240,140 260,160' stroke='%23708090' stroke-width='1.5' fill='none'/><path d='M30,180 Q50,160 70,180' stroke='%23708090' stroke-width='1' fill='none'/><path d='M210,100 Q230,80 250,100' stroke='%23708090' stroke-width='1' fill='none'/><path d='M120,240 Q140,220 160,240 Q180,220 200,240' stroke='%23708090' stroke-width='1.5' fill='none'/><circle cx='40' cy='40' r='2' fill='%23E8E8E8'/><circle cx='240' cy='40' r='2' fill='%23E8E8E8'/><circle cx='40' cy='220' r='2' fill='%23E8E8E8'/><circle cx='240' cy='220' r='2' fill='%23E8E8E8'/><circle cx='140' cy='140' r='3' fill='%23E8E8E8'/><circle cx='80' cy='80' r='1.5' fill='%23E8E8E8'/><circle cx='200' cy='80' r='1.5' fill='%23E8E8E8'/><circle cx='100' cy='200' r='1.5' fill='%23E8E8E8'/><circle cx='200' cy='200' r='1.5' fill='%23E8E8E8'/></g></svg>"),
    linear-gradient(180deg,#E8E0D0 0%,var(--winter) 50%,var(--winter-grey) 100%);
  animation:seasonShow 1.6s ease-in-out 6.0s forwards;
}

@keyframes seasonShow{
  0%{opacity:0}
  35%{opacity:1}
  65%{opacity:1}
  100%{opacity:0}
}

/* 季节中央圆形（透明容器） */
.season-circle{width:min(60vmin,360px);height:min(60vmin,360px);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
  background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.05) 50%,transparent 75%);
  border-radius:50%;filter:drop-shadow(0 0 40px rgba(var(--gold-deep-rgb), 0.4))}
.season-icon{width:80%;height:80%}
.spring-stage .season-circle{filter:drop-shadow(0 0 50px rgba(143,188,143,0.7))}
.summer-stage .season-circle{filter:drop-shadow(0 0 50px rgba(var(--gold-rgb), 0.8))}
.autumn-stage .season-circle{filter:drop-shadow(0 0 50px rgba(var(--gold-deep-rgb), 0.7))}
.winter-stage .season-circle{filter:drop-shadow(0 0 50px rgba(176,196,222,0.8))}
/* v7.1.15: 删 v6 源包 .season-label background-clip:text + -webkit-text-fill-color:transparent
   （让父级 text 透明 = 子 divs .season-label-en / .season-label-cn 也没法显示）
   改为普通块级 + 子元素自身配色 */
.season-label{
  margin-top:32px;
  text-align:center;line-height:1.3;
  position:relative;z-index:3;max-width:90vw;
  background:none;border:none;box-shadow:none;
}

/* 第三段：灵魂仪式 —— 鎏金镂空蝴蝶（先描边后填充） */
.intro-butterfly-stage{position:relative;z-index:3;opacity:0;
  animation:bfStageAppear 0.5s ease-out 8.5s forwards}
@keyframes bfStageAppear{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}
.intro-butterfly-svg{width:min(60vw,60vh,380px);height:auto;
  filter:drop-shadow(0 0 30px rgba(var(--gold-rgb), 0.5)) drop-shadow(0 0 60px rgba(var(--gold-deep-rgb), 0.3))}
.bf-wing{
  fill:transparent;stroke:url(#archGold);stroke-width:1.4;
  stroke-dasharray:600;stroke-dashoffset:600;opacity:0;
  transform-origin:140px 140px;transform-box:fill-box;
}
/* 4 翅：先描边（0.9s）→ 后填充（0.5s） */
.bf-tl{animation:bfStroke 0.9s cubic-bezier(0.4,0,0.2,1) 8.7s forwards, bfFill 0.5s ease-out 9.5s forwards}
.bf-tr{animation:bfStroke 0.9s cubic-bezier(0.4,0,0.2,1) 8.9s forwards, bfFill 0.5s ease-out 9.7s forwards}
.bf-bl{animation:bfStroke 0.9s cubic-bezier(0.4,0,0.2,1) 9.1s forwards, bfFill 0.5s ease-out 9.9s forwards}
.bf-br{animation:bfStroke 0.9s cubic-bezier(0.4,0,0.2,1) 9.3s forwards, bfFill 0.5s ease-out 10.1s forwards}
@keyframes bfStroke{to{stroke-dashoffset:0;opacity:0.9}}
@keyframes bfFill{to{fill:url(#bfGold);stroke:transparent;opacity:1}}
.bf-detail{opacity:0;animation:fadeIn 0.5s ease-out 10.6s forwards}
.bf-body{opacity:0;animation:bfBodyShow 0.5s ease-out 10.4s forwards;transform-origin:140px 140px;transform-box:fill-box}
.bf-antenna{opacity:0;animation:fadeIn 0.5s ease-out 10.7s forwards}
.bf-signature{opacity:0;animation:bfSignShow 1.0s ease-out 10.9s forwards;transform-origin:140px 290px;transform-box:fill-box}
@keyframes bfBodyShow{from{opacity:0;transform:scaleY(0.3)}to{opacity:1;transform:scaleY(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes bfSignShow{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}

/* 中文副标与按钮（蝴蝶后浮现，适配手机） */
.intro-sub-cn{font-family:'Noto Serif SC',serif;
  font-size:clamp(13px,2.5vw,18px);
  letter-spacing:clamp(0.3em,0.8vw,0.6em);
  color:var(--ink);
  opacity:0;animation:titleAppear 1.5s ease-out 11.5s forwards;
  margin-top:10px;position:relative;z-index:3;max-width:90vw}

/* v7.1.15: 4 季 stage 标签双语（英文在上 / 中文在下分行）*/
/* 字色 hardcoded 适配各自季节背景 + !important 防止暗色模式覆盖 */
.season-label{text-align:center;line-height:1.3}
.season-label-en{font-family:'Cinzel Decorative',serif;font-size:clamp(18px,2.2vw,26px);font-weight:700;letter-spacing:0.4em;opacity:0.95}
.season-label-cn{font-family:'Noto Serif SC',serif;font-size:clamp(10px,1.4vw,13px);letter-spacing:0.4em;opacity:0.85;margin-top:4px}

/* v7.1.15: 4 季字色适配各自背景（hardcoded + !important 不受暗色模式影响）
   spring 浅绿背景 → 深嫩绿
   summer 浅金背景 → 深古金
   autumn 赭石背景 → 浅米（v6 风格）
   winter 浅米背景 → 深冰蓝 */
.spring-stage .season-label-en{color:#2D5016 !important;text-shadow:0 0 8px rgba(244,236,216,0.6),0 1px 2px rgba(0,0,0,0.15)}
.spring-stage .season-label-cn{color:#2D5016 !important;opacity:0.85}
.summer-stage .season-label-en{color:#6B4F0A !important;text-shadow:0 0 8px rgba(255,255,255,0.5),0 1px 2px rgba(0,0,0,0.15)}
.summer-stage .season-label-cn{color:#6B4F0A !important;opacity:0.85}
.autumn-stage .season-label-en{color:#F4E4BC !important;text-shadow:0 0 10px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.4)}
.autumn-stage .season-label-cn{color:#F4E4BC !important;opacity:0.9}
.winter-stage .season-label-en{color:#1A2438 !important;text-shadow:0 0 8px rgba(244,236,216,0.6),0 1px 2px rgba(0,0,0,0.15)}
.winter-stage .season-label-cn{color:#1A2438 !important;opacity:0.85}
.enter-btn{opacity:0;animation:titleAppear 1.5s ease-out 12s forwards;
  margin-top:32px;position:relative;z-index:3;
  font-size:clamp(11px,1.4vw,16px);
  padding:clamp(14px,2vw,18px) clamp(28px,4vw,56px);
  letter-spacing:clamp(0.2em,0.4vw,0.4em)}
@keyframes titleAppear{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}