/* ============================================================
   M2 · P1 技术底座：觉醒仪式三帧 电影级重做
   —— CSS 景深分层 + 夜间护眼降档（亮度/频闪双通道）
   说明：本文件为 M2 新增，不改动 style.css 既有觉醒样式；
         加载顺序在 style.css 之后，用于景深层与粒子画布层。
   景深方案：帧容器 isolation 建立独立堆叠上下文 →
             负 z-index 远景装饰层（星点/光晕，blur 大气透视）
             + 中景主体内容 + 前景元素（近大/提亮） + 前景粒子画布
   ============================================================ */

/* ---- 通用：帧容器开启透视 + 独立堆叠上下文 ---- */
.awakening-frame {
    perspective: 900px;
    perspective-origin: 50% 38%;
    isolation: isolate;
}

/* ---- 景深层基类：绝对定位装饰层，不占布局、不挡点击 ---- */
.aw-dp {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 远景层（负 z-index → 位于帧背景之上、全部主体内容之下） */
.aw-dp-far  { z-index: -3; opacity: 0.85; }
.aw-dp-far2 { z-index: -2; opacity: 0.9; }

/* ---- 远景星点 ---- */
.aw-dp-far .aw-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: awStarTwinkle 4.5s ease-in-out infinite;
}
@keyframes awStarTwinkle {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.85; }
}

/* ---- 远景光晕（大模糊圆形，大气透视） ---- */
.aw-dp-far2 .aw-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    animation: awOrbDrift 14s ease-in-out infinite;
}
@keyframes awOrbDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.32; }
    50%      { transform: translate(14px, -10px); opacity: 0.55; }
}

/* ---- 前景元素抬升（近大 + 提亮 = 透视感） ---- */
.aw-dp-near-el {
    position: relative;
    z-index: 2;
}

/* ============================================================
   帧1 · 绑定系统（暖金）景深分层
   ============================================================ */
/* 帧1 主句「我是外挂猫。」：字幕大一号、单独停驻（v2.3 主句规则） */
.aw-text-line.aw-main {
    font-size: 20px;
    letter-spacing: 4px;
    font-weight: 800;
    color: #FFE066;
    text-shadow: 0 0 14px rgba(255, 217, 61, 0.7),
                 0 0 34px rgba(255, 217, 61, 0.35);
}

/* 主体：猫字图标/文字栈/进度条/礼包/猫咪/命名区 依次向近景抬升 */
#awakening-frame-1 .aw-cat-icon  { position: relative; z-index: 1; }
#awakening-frame-1 .aw-text-stack,
#awakening-frame-1 .aw-bind-progress { position: relative; z-index: 2; }
#awakening-frame-1 .aw-flash,
#awakening-frame-1 .aw-gift-box,
#awakening-frame-1 .aw-cat-mascot,
#awakening-frame-1 .aw-cat-bubble,
#awakening-frame-1 .aw-name-section { position: relative; z-index: 3; }

/* ============================================================
   帧2 · 开窍启程（过渡暖）景深分层
   ============================================================ */
/* 猫区为"中景"（随步骤由远及近，JS 动态驱动 scale/位移） */
.aw-f2-cat-area { position: absolute; z-index: 2; }
.aw-f2-content  { position: relative; z-index: 3; }
.aw-f2-system-icon { z-index: 4; }

/* 猫由远及近的"大气透视"（远→虚/小/暗，近→实/大/亮），
   JS 按步骤序号覆盖以下变量 */
.aw-f2-cat-area {
    transform-origin: left center;
    will-change: transform, filter;
}

/* ============================================================
   帧3 · 知识世界（冰蓝）景深分层 —— 九大陆 3D 漂浮
   ============================================================ */
/* 帧3 冰蓝色彩语言（v2.3：一帧暖金 → 三帧冰蓝）：
   覆盖 style.css 的深藏蓝，向"水下生物光"冰蓝推进 */
.awakening-frame.aw-frame3 {
    background:
        radial-gradient(ellipse at 20% 25%, rgba(64,140,220,0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(90,150,255,0.24) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 95%, rgba(60,190,220,0.20) 0%, transparent 60%),
        linear-gradient(180deg, #06121f 0%, #0e2a4a 55%, #123a5e 100%);
}
/* 大陆冰壳冰蓝内发光（苏醒完成后） */
.aw-f3-continent.aw-awake {
    box-shadow: inset 0 0 14px rgba(150, 210, 255, 0.35),
                0 0 12px rgba(110, 180, 255, 0.28);
}
.aw-f3-continents { position: relative; z-index: 2; transform-style: preserve-3d; }
.aw-f3-cat        { position: relative; z-index: 3; }
.aw-f3-text       { position: relative; z-index: 3; }
.aw-f3-explore-btn{ position: relative; z-index: 3; }

/* 大陆按方位分层：center 最近 → 边缘更远（scale 小 + 亮度降 + 轻微下移） */
.aw-f3-continent { transform-origin: center; will-change: opacity; }
.aw-f3-continent[data-position="center"]     { transform: scale(1.02) translateY(0);    opacity: .92; filter: brightness(1.08); }
.aw-f3-continent[data-position="north"],
.aw-f3-continent[data-position="south"]      { transform: scale(0.92) translateY(2px);  opacity: .78; filter: brightness(.9) blur(.3px); }
.aw-f3-continent[data-position="east"],
.aw-f3-continent[data-position="west"]       { transform: scale(0.88) translateY(4px);  opacity: .7;  filter: brightness(.82) blur(.4px); }
.aw-f3-continent[data-position="northeast"],
.aw-f3-continent[data-position="northwest"],
.aw-f3-continent[data-position="southeast"],
.aw-f3-continent[data-position="southwest"]  { transform: scale(0.8) translateY(7px);   opacity: .58; filter: brightness(.72) blur(.5px); }

/* 苏醒完成后的大陆内发光（覆盖 style.css 的 awIceBreath） */
.aw-f3-continent.aw-awake {
    animation: awIceBreath 3.4s ease-in-out infinite;
}
.aw-f3-continent.aw-awake::after {
    animation-duration: 5s;
}

/* 混沌雾气保持绝对定位在最底层装饰之上、大陆之下 */
.aw-f3-chaos { z-index: 1; }

/* ============================================================
   粒子画布层（前景光雾，浮于 UI 之上，不挡点击）
   ============================================================ */
.aw-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
}

/* ============================================================
   夜间护眼降档（红线4 底座）：亮度 + 频闪双降档
   ============================================================ */
.awakening-overlay.aw-night .aw-particles-canvas { opacity: 0.42; }
.awakening-overlay.aw-night .aw-dp-far  { opacity: 0.5; }
.awakening-overlay.aw-night .aw-dp-far2 { opacity: 0.55; }
/* 频闪转静态：星点/光晕/冰呼吸动画暂停，降低闪烁刺激 */
.awakening-overlay.aw-night .aw-dp-far .aw-star,
.awakening-overlay.aw-night .aw-dp-far2 .aw-orb,
.awakening-overlay.aw-night .aw-f3-continent.aw-awake { animation-play-state: paused; }
.awakening-overlay.aw-night .aw-cat-icon.aw-breath { animation-play-state: paused; }
.awakening-overlay.aw-night .aw-f2-cat { animation: none; }
.awakening-overlay.aw-night .aw-flash { animation-duration: 1.4s !important; }

/* ============================================================
   帧3 · 碎片漂海（P1 返工：静态正确形态，覆盖 style.css 九宫格 grid）
   —— 碎片错落漂浮 + 光脉静态预埋 + 窝点剪影 + 观景台灰态
   ============================================================ */
/* 容器：碎片漂海区域（覆盖 style.css display:grid 九宫格） */
.aw-f3-continents {
    display: block;
    position: relative;
    width: 94%;
    height: 56%;
    margin: 0 auto;
    z-index: 2;
}
/* 碎片大陆：冰封大陆本体（伪折射三层叠静态版 = 外层半透明冰壳 + 边缘冰晶高光 + 内层透光）
   大陆主体=半透明冰壳（clip-path 不规则多边形），emoji 缩为右上角科目标识角标 */
.aw-f3-continent.aw-frag {
    position: absolute;
    width: 112px;
    height: 100px;
    aspect-ratio: auto;
    overflow: hidden;
    opacity: 1;
    transform-origin: center center;
    /* 外层：半透明冰壳（冰蓝渐变，透出背景海面；亮部在上、暗部在下=顶部受光） */
    background:
        linear-gradient(168deg, rgba(205,235,255,0.36) 0%, rgba(150,200,245,0.22) 36%, rgba(75,135,220,0.42) 100%);
    border: 1px solid rgba(205,235,255,0.40);
    /* 边缘高光（伪折射边缘）：上缘亮白冰晶 + 下缘冰暗 + 外缘微辉 */
    box-shadow:
        inset 3px 4px 10px rgba(225,245,255,0.36),
        inset -3px -5px 14px rgba(60,110,205,0.30),
        0 0 16px rgba(120,190,255,0.20);
}
/* 内层：沉睡冰壳内部微光（水下生物光静态基础，P2 苏醒式渐显的引信）
   极淡暖光从冰壳内部透出 = "光在冰里，还没醒"；静态质感，非 P2 动态 */
.aw-f3-continent.aw-frag::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,214,150,0.20) 0%, rgba(255,190,110,0.09) 38%, transparent 62%);
    mix-blend-mode: screen;
    pointer-events: none;
}
/* 地形轮廓：内部冰晶纹理 + 冰脊线（大陆本体感，非平面色块） */
.aw-f3-continent.aw-frag::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 46% 30% at 36% 30%, rgba(220,242,255,0.24) 0%, transparent 70%),
        radial-gradient(ellipse 34% 26% at 66% 58%, rgba(200,230,255,0.16) 0%, transparent 70%),
        radial-gradient(ellipse 26% 22% at 28% 72%, rgba(215,238,255,0.12) 0%, transparent 70%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.09) 30.5%, transparent 31%);
    opacity: 0.9;
    pointer-events: none;
}
/* 大陆标识：emoji 缩为极小"科目标识角标"（右上角，非大陆主体）；大陆主体已是冰壳 */
.aw-f3-continent.aw-frag .aw-f3-continent-emoji {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    font-size: 13px;
    line-height: 1;
    filter: grayscale(0.9) brightness(0.55);
    opacity: 0.8;
}
.aw-f3-continent.aw-frag .aw-f3-continent-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 2;
    text-align: center;
    font-size: 10px;
    color: rgba(190,225,255,0.65);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(150,210,255,0.4);
}
/* 成片窝点剪影微光（217 规模感；中心成片聚集；静态灰态，点亮归 P2） */
.aw-f3-nests { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; }
.aw-f3-nest {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(175,220,255,0.20);
    box-shadow: 0 0 3px rgba(165,215,255,0.28);
}
/* 光脉静态预埋（SVG 极淡线；通电动画归 P2） */
.aw-f3-lightvein {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.aw-f3-vein {
    stroke: rgba(150,210,255,0.14);
    stroke-width: 0.5;
    fill: none;
}
/* 观景台灰态隐现（右下角剪影 + 雪花微标签；P3 寒暑假入口，不抢主体） */
.aw-f3-viewpoint {
    position: absolute;
    right: 1.5%;
    bottom: 1.5%;
    width: 28px;
    height: 42px;
    z-index: 2;
    opacity: 0.5;
    filter: grayscale(1) brightness(0.68);
    background: linear-gradient(180deg, rgba(160,190,220,0.08) 0%, rgba(160,190,220,0.20) 100%);
    clip-path: polygon(22% 0%, 78% 0%, 100% 28%, 88% 100%, 12% 100%, 0% 28%);
    pointer-events: none;
}
.aw-f3-vp-icon {
    position: absolute;
    top: -12px;
    right: -8px;
    font-size: 11px;
    color: rgba(200,230,255,0.45);
}

/* ============================================================
   帧1 · 中心光点呼吸（v2.3 开场=纯黑→光点→猫字图标）
   极暗底 + 中心核心光晕 + 猫字图标 awCatBreath（删 42 星点自创元素）
   ============================================================ */
#awakening-frame-1::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,217,61,0.16) 0%, rgba(255,217,61,0.05) 45%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: awCoreBreath 3s ease-in-out infinite;
}
@keyframes awCoreBreath {
    0%, 100% { opacity: 0.5;  transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.18); }
}

/* ============================================================
   夜间降档扩展（新元素同步降档：亮度 + 频闪转静态）
   ============================================================ */
.awakening-overlay.aw-night .aw-f3-lightvein { opacity: 0.5; }
.awakening-overlay.aw-night .aw-f3-nest { background: rgba(170,215,255,0.12); box-shadow: none; }
.awakening-overlay.aw-night .aw-f3-viewpoint { opacity: 0.28; }
.awakening-overlay.aw-night .aw-f3-continent.aw-frag .aw-f3-continent-emoji { animation: none; }
.awakening-overlay.aw-night .aw-f3-continent.aw-frag { box-shadow: inset 2px 3px 8px rgba(200,230,255,0.20), inset -2px -4px 10px rgba(60,100,190,0.18); }
.awakening-overlay.aw-night .aw-f3-continent.aw-frag::before { opacity: 0.45; }
.awakening-overlay.aw-night .aw-f3-continent.aw-frag::after { opacity: 0.55; }
.awakening-overlay.aw-night #awakening-frame-1::before { animation-play-state: paused; opacity: 0.4; }

/* ============================================================
   M2 · P2 帧3 苏醒式动态（GSAP 时间轴编排）
   —— ①水下生物光引信 ②光脉通电 ③蝴蝶运镜 ④点亮确认双闪
   红线：大陆保持沉睡冰蓝；只有第一个窝点半点亮（其余灰态）
   ============================================================ */
/* ① 水下生物光引信（--aw-glow：0=沉睡极淡 0.3 → 1=苏醒透光 1.0）
   GSAP 在 .aw-f3-continent.aw-frag 上内联插值该 CSS 变量，::before 实时继承 */
.aw-f3-continent.aw-frag { --aw-glow: 0; }
.aw-f3-continent.aw-frag::before {
    opacity: calc(0.3 + var(--aw-glow, 0) * 0.7);
}

/* ② 光脉通电：pathLength=1 归一化，dash 1→0 点亮（初始熄灭） */
.aw-f3-vein {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.aw-f3-vein.aw-on {
    filter: drop-shadow(0 0 2px rgba(160,225,255,0.7));
}

/* ④ 第一个窝点裂纹透光（暖光亮起；其余窝点保持灰态） */
.aw-f3-nest.aw-lit {
    background: rgba(255,222,160,0.95);
    box-shadow: 0 0 6px rgba(255,200,120,0.9), 0 0 14px rgba(255,190,110,0.55);
}

/* ③ 蝴蝶（线条/几何风，与"猫字图标线条+光晕"语言统一；非写实） */
.aw-f3-butterfly {
    position: absolute;
    width: 34px;
    height: 26px;
    margin-left: -17px;
    margin-top: -13px;
    z-index: 5;
    pointer-events: none;
    will-change: left, top, transform;
    filter: drop-shadow(0 0 4px rgba(170,225,255,0.5));
}
.aw-f3-butterfly svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    animation: awBfFlap 0.16s ease-in-out infinite;
}
@keyframes awBfFlap {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(0.66); }
}
.aw-f3-butterfly.aw-landed svg { animation: none; }
.aw-f3-butterfly .bf-wing { fill: rgba(160,225,255,0.22); stroke: rgba(215,242,255,0.9); stroke-width: 0.8; }
.aw-f3-butterfly .bf-body { stroke: rgba(225,246,255,0.95); stroke-width: 1.3; stroke-linecap: round; }
.aw-f3-butterfly .bf-glow { fill: rgba(150,210,255,0.16); }

/* ④ 满格双闪层（点亮确认；0.1s 小闪 + 0.3s 大闪） */
.aw-f3-flash {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: radial-gradient(circle at 50% 50%, rgba(255,246,220,0.95) 0%, rgba(255,214,150,0.55) 38%, transparent 72%);
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   夜间降档扩展（P2 新元素同步降档：亮度 + 频闪转静态）
   ============================================================ */
.awakening-overlay.aw-night .aw-f3-butterfly { opacity: 0.5; }
.awakening-overlay.aw-night .aw-f3-butterfly svg { animation: none; }
.awakening-overlay.aw-night .aw-f3-vein.aw-on { filter: drop-shadow(0 0 1px rgba(150,215,255,0.35)); }
.awakening-overlay.aw-night .aw-f3-nest.aw-lit { background: rgba(255,214,150,0.6); box-shadow: 0 0 4px rgba(255,190,120,0.4); }
.awakening-overlay.aw-night .aw-f3-flash { opacity: 0 !important; }
/* ============================================================
   M2 · P2 帧3 ④点亮确认 返工（2026-08-19）：猫走出 + 文案角色分层
   —— 对齐 v2.3 帧3 分镜：推近→猫走出→窝点亮→蝴蝶停→小字「今天可以从这里开始。」
     →猫「就从这里开始。」
   ① 猫：#aw-f3-cat 复用帧1/2 猫形象资产，帧3 内绝对定位（不占流式布局、
      不引起文案跳位），GSAP 时间轴驱动走出（x/opacity）；"喵"=Web Audio 音效层零资产。
   ② 文案角色分层（为后续 TTS 接入做结构预留，本轮纯结构/视觉层）：
      .aw-voice-sys  = 筒子哥（系统音·低沉人声层）：克制、低频存在、说完即静
      .aw-voice-cat  = 猫台词（温暖）：伙伴承诺，暖色气泡
   ============================================================ */
#awakening-frame-3 #aw-f3-cat {
    position: absolute;
    left: 24%;
    bottom: 12%;
    z-index: 4;
    margin: 0;
    font-size: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
#awakening-frame-3 #aw-f3-cat img {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255,224,166,0.55);
    box-shadow: 0 0 12px rgba(255,210,140,0.35), 0 0 26px rgba(255,180,110,0.18);
}

/* ④ 文案角色分层（.aw-voice-sys 系统音 / .aw-voice-cat 猫台词） */
.aw-f3-text .aw-voice-sys { display: block; }
.aw-voice-sys {
    color: rgba(214,232,255,0.92);
    letter-spacing: 2px;
    line-height: 1.9;
    text-shadow: 0 0 10px rgba(150,200,255,0.35);
}
/* 小字「今天可以从这里开始。」（系统音·小字，v2.3 分镜） */
.aw-f3-copy-small {
    font-size: 12px;
    color: rgba(190,220,255,0.78);
    letter-spacing: 2px;
}
/* 猫台词「就从这里开始。」（伙伴承诺·温暖）：暖色气泡=猫喵层 */
.aw-voice-cat {
    display: inline-block;
    margin-top: 7px;
    padding: 6px 16px;
    border-radius: 18px;
    background: rgba(255,224,166,0.15);
    border: 1px solid rgba(255,224,166,0.55);
    color: #FFE9C4;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.6;
    text-shadow: 0 0 14px rgba(255,210,140,0.5);
}
.aw-voice-cat::before { content: '🐾 '; font-size: 13px; }

/* 夜间降档（新元素同步：亮度 + 频闪转静态） */
.awakening-overlay.aw-night #awakening-frame-3 #aw-f3-cat img { box-shadow: none; border-color: rgba(255,224,166,0.3); }
.awakening-overlay.aw-night .aw-voice-sys { text-shadow: none; color: rgba(205,225,250,0.75); }
.awakening-overlay.aw-night .aw-f3-copy-small { color: rgba(185,215,245,0.65); }
.awakening-overlay.aw-night .aw-voice-cat { background: rgba(255,224,166,0.10); border-color: rgba(255,224,166,0.35); text-shadow: none; }