/* ============================================================ M2 · P1 技术底座：觉醒仪式三帧 电影级重做 —— CSS 景深分层 + 夜间护眼降档（亮度/频闪双通道） 说明：本文件为 M2 新增，不改动 style.css 既有觉醒样式； 加载顺序在 style.css 之后，用于景深层与粒子画布层。 景深方案：帧容器 isolation 建立独立堆叠上下文 → 负 z-index 远景装饰层（星点/光晕，blur 大气透视） + 中景主体内容 + 前景元素（近大/提亮） + 前景粒子画布 ============================================================ */ /* ---- 通用：帧容器开启透视 + 独立堆叠上下文 ---- */ .awakening-frame { position: relative; 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: 5; } /* ============================================================ 帧2 · 看世界（过渡暖）景深分层 ============================================================ */ /* 猫区为"中景"（随步骤由远及近，JS 动态驱动 scale/位移） */ .aw-f3-cat-area { position: absolute; z-index: 2; } .aw-f3-content { position: relative; z-index: 3; } .aw-f3-system-icon { z-index: 4; } /* 猫由远及近的"大气透视"（远→虚/小/暗，近→实/大/亮）， JS 按步骤序号覆盖以下变量 */ .aw-f3-cat-area { transform-origin: left center; will-change: transform, filter; } /* ============================================================ 帧2 · 看世界（冰蓝）景深分层 —— 九大陆 3D 漂浮 ============================================================ */ /* 帧2 海洋色彩语言（主人拍板 08-19：九大陆漂于海上，非冰壳碎片、非虚空）： 海平线上方 = 深海夜空（星辉），下方 = 深海海水；大陆为不透明陆地漂于海面 */ .awakening-frame.aw-frame2 { background: /* 海上夜空：两团深海蓝紫辉光（星点由 aw-dp-far 提供） */ radial-gradient(ellipse at 20% 18%, rgba(70,120,220,0.18) 0%, transparent 55%), radial-gradient(ellipse at 78% 12%, rgba(110,90,220,0.14) 0%, transparent 50%), /* 海平线天际微光：天空与海交界处的一道亮带 */ radial-gradient(ellipse at 50% 56%, rgba(120,200,240,0.16) 0%, transparent 42%), /* 夜空 → 海平线 → 深海 一体渐变 */ linear-gradient(180deg, #020810 0%, #071630 30%, #0c2b50 48%, #0e3a66 54%, #12406e 56%, #0d3463 59%, #0a2c5a 68%, #082048 84%, #061530 100%); } /* 大陆冰壳冰蓝内发光（苏醒完成后） */ .aw-f2-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-f2-continents { position: relative; z-index: 2; transform-style: preserve-3d; } .aw-f2-cat { position: relative; z-index: 3; } .aw-f2-text { position: relative; z-index: 3; } .aw-f2-explore-btn{ position: relative; z-index: 3; } /* 大陆按方位分层：center 最近 → 边缘更远（scale 小 + 亮度降 + 轻微下移） */ .aw-f2-continent { transform-origin: center; will-change: opacity; } .aw-f2-continent[data-position="center"] { transform: scale(1.02) translateY(0); opacity: .92; filter: brightness(1.08); } .aw-f2-continent[data-position="north"], .aw-f2-continent[data-position="south"] { transform: scale(0.92) translateY(2px); opacity: .78; filter: brightness(.9) blur(.3px); } .aw-f2-continent[data-position="east"], .aw-f2-continent[data-position="west"] { transform: scale(0.88) translateY(4px); opacity: .7; filter: brightness(.82) blur(.4px); } .aw-f2-continent[data-position="northeast"], .aw-f2-continent[data-position="northwest"], .aw-f2-continent[data-position="southeast"], .aw-f2-continent[data-position="southwest"] { transform: scale(0.8) translateY(7px); opacity: .58; filter: brightness(.72) blur(.5px); } /* 苏醒完成后的大陆内发光（覆盖 style.css 的 awIceBreath） */ .aw-f2-continent.aw-awake { animation: awIceBreath 3.4s ease-in-out infinite; } .aw-f2-continent.aw-awake::after { animation-duration: 5s; } /* 混沌雾气保持绝对定位在最底层装饰之上、大陆之下 */ .aw-f2-chaos { z-index: 1; } /* ============================================================ 帧2 · 海面层（主人拍板 08-19：九大陆漂于海上） —— 深海海水渐变 + 三层波浪涌动 + 中央光柱倒映 ============================================================ */ .aw-f2-sea { position: absolute; left: 0; right: 0; bottom: 0; top: 40%; z-index: 0; pointer-events: none; /* 海面主体：明亮浅海（上部青蓝受光 → 下部中蓝），与天空形成海平线分界 */ background: radial-gradient(ellipse at 50% 18%, rgba(130,210,248,0.35) 0%, transparent 50%), linear-gradient(180deg, rgba(56,132,186,0.85) 0%, rgba(38,104,158,0.90) 26%, rgba(24,78,128,0.95) 55%, rgba(14,54,100,1) 100%); } /* 海平线：天空与海交界的一道光带 */ .aw-f2-sea::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(195,238,255,0.6), transparent); filter: blur(0.4px); } /* 可见波浪：SVG 波峰曲线铺于海面上部（横向缓摆） */ .aw-f2-sea-waves { position: absolute; top: 3%; left: -2%; width: 104%; height: 40%; pointer-events: none; animation: awWaveSway 9s ease-in-out infinite; } .aw-f2-sea-waves path { stroke: rgba(220,245,255,0.55); stroke-width: 5; stroke-linecap: round; fill: rgba(140,210,248,0.16); vector-effect: non-scaling-stroke; } .aw-wave-1 { animation-delay: 0s; } .aw-wave-2 { animation-delay: -3s; } .aw-wave-3 { animation-delay: -6s; } @keyframes awWaveSway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5%); } } /* 波浪带：三片错峰波（横移涌动 + 纵向起伏），营造海面波动 */ .aw-f2-sea-wave { position: absolute; left: -10%; width: 120%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(155,218,248,0.36) 0%, rgba(120,200,240,0.18) 46%, transparent 78%); } .aw-f2-sea-wave-a { bottom: 46%; animation: awSeaBob 5.4s ease-in-out infinite; } .aw-f2-sea-wave-b { bottom: 33%; background: radial-gradient(ellipse at 50% 50%, rgba(132,207,242,0.30) 0%, rgba(105,190,235,0.16) 46%, transparent 78%); animation: awSeaBob 6.6s ease-in-out infinite; animation-delay: -1.6s; } .aw-f2-sea-wave-c { bottom: 20%; background: radial-gradient(ellipse at 50% 50%, rgba(110,196,238,0.25) 0%, rgba(88,180,230,0.13) 46%, transparent 78%); animation: awSeaBob 7.8s ease-in-out infinite; animation-delay: -3.2s; } @keyframes awSeaBob { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-8px) scaleX(1.05); } } /* 波光细密层：斜向波光条纹随海面流动（上淡下浓，模拟粼粼波光） */ .aw-f2-sea-sheen { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; pointer-events: none; /* 海面波光：一组横向浅色光斑带（模糊椭圆），模拟粼粼波光 */ background: radial-gradient(ellipse 46% 5% at 30% 30%, rgba(205,242,255,0.20) 0%, transparent 70%), radial-gradient(ellipse 38% 4% at 62% 52%, rgba(195,238,255,0.16) 0%, transparent 70%), radial-gradient(ellipse 52% 5% at 76% 22%, rgba(210,244,255,0.14) 0%, transparent 70%), radial-gradient(ellipse 42% 4% at 18% 66%, rgba(190,234,252,0.12) 0%, transparent 70%), radial-gradient(ellipse 46% 5% at 54% 82%, rgba(180,228,250,0.10) 0%, transparent 70%); animation: awSeaSheen 9s ease-in-out infinite alternate; } @keyframes awSeaSheen { 0% { opacity: 0.55; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-6px); } } /* 中央光柱倒映：海面承接大陆中心透下的光 */ .aw-f2-sea-shine { position: absolute; left: 50%; top: 6%; width: 30%; height: 94%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(190,235,255,0.20) 0%, rgba(140,210,245,0.07) 46%, transparent 88%); filter: blur(5px); pointer-events: none; animation: awSeaShine 5s ease-in-out infinite; } @keyframes awSeaShine { 0%, 100% { opacity: 0.75; } 50% { opacity: 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-f2-sea { opacity: 0.78; } .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-f2-continent.aw-awake, .awakening-overlay.aw-night .aw-f2-sea-wave, .awakening-overlay.aw-night .aw-f2-sea-shine, .awakening-overlay.aw-night .aw-f2-continent.aw-frag { animation-play-state: paused; } .awakening-overlay.aw-night .aw-cat-icon.aw-breath { animation-play-state: paused; } .awakening-overlay.aw-night .aw-f3-cat { animation: none; } .awakening-overlay.aw-night .aw-flash { animation-duration: 1.4s !important; } /* ============================================================ 帧2 · 碎片漂海（P1 返工：静态正确形态，覆盖 style.css 九宫格 grid） —— 碎片错落漂浮 + 光脉静态预埋 + 窝点剪影 + 观景台灰态 ============================================================ */ /* 容器：碎片漂海区域（覆盖 style.css display:grid 九宫格） */ .aw-f2-continents { display: block; position: relative; top: 18%; width: 94%; height: 56%; margin: 0 auto; z-index: 2; } /* 大陆本体：不透明陆地（青绿→墨绿陆地，顶部受光；海面接触处带浅滩水色） 漂浮于海面：落海投影 + 海岸水边 + 海面反光晕；emoji 缩为右上角科目标识角标 */ .aw-f2-continent.aw-frag { position: absolute; width: 112px; height: 100px; aspect-ratio: auto; overflow: hidden; opacity: 1; transform-origin: center center; /* 陆地主体：不透明青绿→墨绿渐变（clip-path 不规则大陆轮廓，非冰壳半透明） */ background: linear-gradient(158deg, rgba(98,152,110,0.97) 0%, rgba(68,126,98,0.97) 42%, rgba(46,98,82,0.98) 100%); border: 1px solid rgba(172,226,206,0.38); /* 落海投影 + 海岸水边 + 海面反光 */ box-shadow: inset 0 0 16px rgba(130,212,182,0.20), inset 0 -9px 15px rgba(36,88,120,0.32), 0 13px 26px rgba(2,12,30,0.5), 0 0 22px rgba(90,192,226,0.16); /* 随海面轻起伏（margin-top 动画，不干扰 JS 内联 transform） */ animation: awSeaFloat 5.4s ease-in-out infinite; } /* 地形：山脉高光 + 高原色块 + 河谷暗纹（大陆本体感，非平面色块） */ .aw-f2-continent.aw-frag::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 44% 26% at 34% 28%, rgba(172,216,152,0.34) 0%, transparent 70%), radial-gradient(ellipse 36% 28% at 64% 56%, rgba(132,186,132,0.26) 0%, transparent 70%), radial-gradient(ellipse 28% 22% at 26% 74%, rgba(112,166,126,0.20) 0%, transparent 70%), linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.08) 34.6%, transparent 36%); opacity: 0.95; pointer-events: none; } /* 海岸线：边缘一圈浅水光晕（陆地与海面交界处，替代原冰壳内透光） */ .aw-f2-continent.aw-frag::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(150,215,240,0.15) 62%, rgba(100,182,222,0.20) 72%, rgba(60,130,190,0.16) 82%, transparent 94%); mix-blend-mode: screen; opacity: 0.85; pointer-events: none; } /* 大陆标识：emoji 缩为极小"科目标识角标"（右上角，非大陆主体）；大陆主体已是陆地 */ .aw-f2-continent.aw-frag .aw-f2-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-f2-continent.aw-frag .aw-f2-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); } /* 大陆漂浮动画：随海面轻起伏（margin-top，不影响 JS 内联 transform 定位） */ @keyframes awSeaFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } } /* 成片窝点剪影微光（217 规模感；中心成片聚集；静态灰态，点亮归 P2） */ .aw-f2-nests { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; } .aw-f2-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-f2-lightvein { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .aw-f2-vein { stroke: rgba(150,210,255,0.14); stroke-width: 0.5; fill: none; } /* 观景台灰态隐现（右下角剪影 + 雪花微标签；P3 寒暑假入口，不抢主体） */ .aw-f2-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-f2-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-f2-lightvein { opacity: 0.5; } .awakening-overlay.aw-night .aw-f2-nest { background: rgba(170,215,255,0.12); box-shadow: none; } .awakening-overlay.aw-night .aw-f2-viewpoint { opacity: 0.28; } .awakening-overlay.aw-night .aw-f2-continent.aw-frag .aw-f2-continent-emoji { animation: none; } .awakening-overlay.aw-night .aw-f2-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-f2-continent.aw-frag::before { opacity: 0.45; } .awakening-overlay.aw-night .aw-f2-continent.aw-frag::after { opacity: 0.55; } .awakening-overlay.aw-night #awakening-frame-1::before { animation-play-state: paused; opacity: 0.4; } /* ============================================================ M2 · P2 帧2 苏醒式动态（GSAP 时间轴编排） —— ①水下生物光引信 ②光脉通电 ③蝴蝶运镜 红线：大陆保持沉睡冰蓝；蝴蝶只指路不点亮 ============================================================ */ /* ① 水下生物光引信（--aw-glow：0=沉睡极淡 0.3 → 1=苏醒透光 1.0） GSAP 在 .aw-f2-continent.aw-frag 上内联插值该 CSS 变量，::before 实时继承 */ .aw-f2-continent.aw-frag { --aw-glow: 0; } .aw-f2-continent.aw-frag::before { opacity: calc(0.3 + var(--aw-glow, 0) * 0.7); } /* ② 光脉通电：pathLength=1 归一化，dash 1→0 点亮（初始熄灭） */ .aw-f2-vein { stroke-dasharray: 1; stroke-dashoffset: 1; } .aw-f2-vein.aw-on { filter: drop-shadow(0 0 2px rgba(160,225,255,0.7)); } /* ③ 蝴蝶（线条/几何风，与"猫字图标线条+光晕"语言统一；非写实） */ .aw-f2-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-f2-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-f2-butterfly.aw-landed svg { animation: none; } .aw-f2-butterfly .bf-wing { fill: rgba(160,225,255,0.22); stroke: rgba(215,242,255,0.9); stroke-width: 0.8; } .aw-f2-butterfly .bf-body { stroke: rgba(225,246,255,0.95); stroke-width: 1.3; stroke-linecap: round; } .aw-f2-butterfly .bf-glow { fill: rgba(150,210,255,0.16); } /* ============================================================ 夜间降档扩展（P2 新元素同步降档：亮度 + 频闪转静态） ============================================================ */ .awakening-overlay.aw-night .aw-f2-butterfly { opacity: 0.5; } .awakening-overlay.aw-night .aw-f2-butterfly svg { animation: none; } .awakening-overlay.aw-night .aw-f2-vein.aw-on { filter: drop-shadow(0 0 1px rgba(150,215,255,0.35)); } /* ============================================================ M2 · P2 猫走出桥接 + 文案角色分层（素材保留，待并入帧三问答定科新叙事） —— 桥接分镜：推近→猫走出→蝴蝶停→小字「今天可以从这里开始。」 →猫「就从这里开始。」 ① 猫：#aw-f2-cat 复用帧1/2 猫形象资产，帧3 内绝对定位（不占流式布局、 不引起文案跳位），GSAP 时间轴驱动走出（x/opacity）；"喵"=Web Audio 音效层零资产。 ② 文案角色分层（为后续 TTS 接入做结构预留，本轮纯结构/视觉层）： .aw-voice-sys = 筒子哥（系统音·低沉人声层）：克制、低频存在、说完即静 .aw-voice-cat = 猫台词（温暖）：伙伴承诺，暖色气泡 ============================================================ */ #awakening-frame-3 #aw-f2-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-f2-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-f2-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-f2-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-f2-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-f2-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; } /* ============================================================ * D1 序章层（2026-08-20 觉醒→21天断链修复 · A 方案） * 承接觉醒三帧暗调电影感：目标科大陆开场 → 契约书 → 宣告语 → 觉醒已收束 → 当天进21天 D1（口径 v2.0，作废当日最小闭环） * ============================================================ */ .d1-prologue-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, rgba(20,28,50,0.96) 0%, rgba(6,10,22,0.98) 60%, rgba(3,5,12,0.99) 100%); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; } .d1p-scene { width: 86%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .d1p-cat-wrap { display: flex; align-items: center; gap: 12px; animation: d1pRise 0.5s ease-out both; } .d1p-cat-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,224,166,0.55); box-shadow: 0 0 18px rgba(255,200,120,0.25); overflow: hidden; background: #1a1a2e; } .d1p-cat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .d1p-bubble-box { position: relative; padding: 12px 18px; border-radius: 18px; background: rgba(255,224,166,0.12); border: 1px solid rgba(255,224,166,0.5); color: #FFE9C4; font-size: 17px; font-weight: 700; line-height: 1.7; letter-spacing: 1px; text-shadow: 0 0 14px rgba(255,210,140,0.5); } .d1p-bubble-box.d1p-bubble-big { font-size: 18px; padding: 14px 20px; } .d1p-bubble-box::before { content: '🐾 '; font-size: 13px; } .d1p-sub { color: rgba(190,220,255,0.72); font-size: 13px; letter-spacing: 2px; line-height: 1.8; text-align: center; animation: d1pRise 0.5s ease-out 0.15s both; } .d1p-contract { width: 100%; background: linear-gradient(160deg, rgba(255,236,196,0.12), rgba(255,214,150,0.06)); border: 1px solid rgba(255,224,166,0.5); border-radius: 16px; padding: 18px 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 0 30px rgba(255,210,140,0.05); animation: d1pRise 0.5s ease-out 0.1s both; } .d1p-contract-title { text-align: center; color: #FFE9C4; font-size: 17px; font-weight: 800; letter-spacing: 3px; margin-bottom: 14px; } .d1p-contract-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed rgba(255,224,166,0.22); font-size: 14px; } .d1p-contract-row:last-of-type { border-bottom: none; } .d1p-row-label { color: rgba(190,220,255,0.7); letter-spacing: 1px; } .d1p-row-val { color: #FFF3DC; font-weight: 700; } .d1p-contract-promise { margin-top: 12px; text-align: center; color: #FFE9C4; font-size: 14px; line-height: 1.8; } .d1p-contract-promise b { color: #FFD98A; } .d1p-contract-mini { padding: 14px 12px; } .d1p-choices { display: flex; flex-direction: column; gap: 12px; width: 100%; animation: d1pRise 0.5s ease-out 0.1s both; } .d1p-choice { display: block; width: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(255,224,166,0.1); border: 1px solid rgba(255,224,166,0.45); color: #FFE9C4; font-size: 15px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: all 0.2s ease; } .d1p-choice:active { transform: scale(0.97); background: rgba(255,224,166,0.2); } .d1p-choice-first { border-color: rgba(255,217,138,0.85); box-shadow: 0 0 16px rgba(255,200,110,0.25); } .d1p-pet-fx { font-size: 34px; letter-spacing: 12px; text-align: center; animation: d1pPulse 0.6s ease infinite alternate; } .d1p-butterfly { display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(190,220,255,0.85); font-size: 14px; letter-spacing: 1px; } .d1p-butterfly span { color: rgba(255,224,166,0.8); } .d1p-btn-wrap { width: 100%; text-align: center; } .d1p-btn { min-width: 180px; padding: 13px 34px; border-radius: 30px; background: linear-gradient(135deg, rgba(255,217,138,0.9), rgba(230,180,90,0.85)); border: none; color: #2a1d05; font-size: 16px; font-weight: 800; letter-spacing: 3px; cursor: pointer; box-shadow: 0 6px 24px rgba(255,190,90,0.3); transition: all 0.2s ease; } .d1p-btn:active { transform: scale(0.96); } .d1p-skip { position: absolute; top: 18px; right: 20px; color: rgba(190,220,255,0.5); font-size: 13px; letter-spacing: 2px; cursor: pointer; } @keyframes d1pRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes d1pPulse { from { opacity: 0.6; } to { opacity: 1; } } /* ---- 合并预埋小字（口径卡 v2.0 · 看世界全沉睡左下角） ---- */ .aw-f2-merge-hint { position: absolute; left: 16px; bottom: 14px; z-index: 6; font-size: 12px; letter-spacing: 0.5px; color: rgba(185, 212, 245, 0.55); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); pointer-events: none; user-select: none; white-space: nowrap; } /* ============================================================ 2026-08-21 修复必死bug「猫名乱入遮挡学科按钮」 根因：.aw-f3-cat-name 跟随 .aw-f3-cat-area 整体 scale(3.46)+位移， 在「顺手科目/目标科」步骤落到物理/化学按钮区（y395-468 vs 按钮y426-477）， 黄色大字直接压住物理/化学选项。 猫名已在帧1命名时展示，帧三问答屏的陪伴感由猫图本身承载，故隐藏猫名标签。 ============================================================ */ #awakening-frame-3 .aw-f3-cat-name { display: none; } /* ============================================================ 2026-08-21 废九宫格收尾：三功能入口迁入主页面 float-cards 覆盖 style.css 旧九宫格页的 margin/浅色底，对齐 .home-card 深色毛玻璃 ============================================================ */ .home-float-cards .continent-vp-entry, .home-float-cards .continent-overall, .home-float-cards .continent-footer-entry { margin: 0; border-radius: 14px; } /* 观景台入口：保留蓝色渐变辨识色，去侧边距 + 毛玻璃 */ .home-float-cards .continent-vp-entry { background: linear-gradient(135deg, rgba(14,165,233,0.18) 0%, rgba(99,102,241,0.18) 100%); border: 1px solid rgba(90,150,255,0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } /* 总点亮率 + 能力档案：统一深蓝毛玻璃 */ .home-float-cards .continent-overall, .home-float-cards .continent-footer-entry { background: rgba(10, 22, 48, 0.62); border: 1px solid rgba(120, 170, 255, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } /* 文字色对齐深色底 */ .home-float-cards .continent-vp-entry, .home-float-cards .continent-vp-entry * { color: #e8f0ff; } .home-float-cards .cvp-title { color: #ffffff; } .home-float-cards .cvp-desc { color: #9db4d9; } .home-float-cards .continent-overall-label { color: #9db4d9; } .home-float-cards .continent-overall-sub { color: #9db4d9; } .home-float-cards .continent-footer-text { color: #e8f0ff; } .home-float-cards .continent-footer-arrow { color: #9db4d9; } /* ============================================================ 2026-08-21 地图让路：总点亮率收一行 + 其余功能卡可折叠 地图=世界主线，卡=工具，工具不压世界 ============================================================ */ /* 总点亮率：收成一行轻量数据，并兼作折叠开关 */ .home-float-cards .continent-overall { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 12px; cursor: pointer; flex-wrap: nowrap; } .home-float-cards .continent-overall-label { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; } .home-float-cards .continent-overall-bar { display: none; } .home-float-cards .continent-overall-sub { font-size: 11px; white-space: nowrap; } .home-tools-chevron { margin-left: auto; font-size: 12px; color: #9db4d9; transition: transform .2s; display: inline-block; } .home-float-cards:not(.tools-collapsed) .home-tools-chevron { transform: rotate(90deg); } /* 折叠态：隐藏除总点亮率外的所有功能卡，露出完整九大陆 */ .home-float-cards.tools-collapsed .home-card, .home-float-cards.tools-collapsed .continent-vp-entry, .home-float-cards.tools-collapsed .continent-footer-entry { display: none !important; } /* ============================================================ * 帧三·问答定科 v1.1（aw-f3q-* 前缀） * 2026-08-23 施工稿 v1.1 * ============================================================ */ /* --- 猫头像·连续靠近 4档 --- */ .aw-f3q-cat-avatar { border-radius: 50%; object-fit: cover; transition: width 0.6s ease, height 0.6s ease; } .aw-f3q-cat-far { width: 48px; height: 48px; } .aw-f3q-cat-mid { width: 72px; height: 72px; } .aw-f3q-cat-close { width: 96px; height: 96px; } .aw-f3q-cat-touch { width: 120px; height: 120px; } /* 猫贴屏呼吸 */ @keyframes aw-f3q-breath { 0%, 100% { transform: scale(1.0); } 50% { transform: scale(1.03); } } .aw-f3q-breathing { animation: aw-f3q-breath 2.4s ease-in-out infinite; } /* --- 世界回应·遮罩层 --- */ .aw-f3q-world-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.8s ease; z-index: 1; } /* Q2吃力档：遮罩加深 */ .aw-frame3.aw-f3q-world-struggle .aw-f3q-world-overlay { background: rgba(0, 0, 0, 0.45); } /* 底图虚化（定科时刻·世界退后） */ .aw-frame3.aw-f3q-world-blur .aw-dp-far, .aw-frame3.aw-f3q-world-blur .aw-dp-far2 { filter: blur(6px); opacity: 0.3; transition: filter 0.8s ease, opacity 0.8s ease; } /* --- Q3 选中微光 --- */ @keyframes aw-f3q-glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 30% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } } .aw-f3q-subject-glow { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%); pointer-events: none; animation: aw-f3q-glow 2s ease-out forwards; z-index: 0; } /* --- Q3 确认按钮 disabled 态 --- */ #aw-f3q-confirm-subjects:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ 帧1 Canvas 定位修复（2026-09-08） 背景/猫字/猫咪舞台画布必须绝对定位全屏，否则无法正确渲染 ============================================================ */ #awakening-frame-1 canvas.aw-f1-bg, #awakening-frame-1 canvas.aw-f1-catchar, #awakening-frame-1 canvas.aw-f1-catstage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #awakening-frame-1 canvas.aw-f1-bg { z-index: 0; } #awakening-frame-1 canvas.aw-f1-catchar { z-index: 1; } #awakening-frame-1 canvas.aw-f1-catstage { z-index: 3; } /* ============================================================ CSS 纯礼盒（替代缺失的 aw_f1_giftbox.jpg 图片） ============================================================ */ #awakening-frame-1 .aw-gift-box { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 120px; height: 110px; cursor: pointer; pointer-events: auto; } /* 盒身 */ #awakening-frame-1 .aw-gift-box::before { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 72px; background: linear-gradient(135deg, #FFD700 0%, #FFA500 40%, #FF8C00 70%, #FFD700 100%); border-radius: 6px; box-shadow: 0 0 30px rgba(255,215,0,0.6), 0 0 60px rgba(255,165,0,0.3), inset 0 -8px 16px rgba(0,0,0,0.15); } /* 盒盖 */ #awakening-frame-1 .aw-gift-box::after { content: ''; position: absolute; left: 4px; right: 4px; top: 0; height: 32px; background: linear-gradient(135deg, #FFE44D 0%, #FFC125 40%, #FFA500 70%, #FFE44D 100%); border-radius: 6px 6px 3px 3px; box-shadow: 0 0 20px rgba(255,215,0,0.5), inset 0 4px 8px rgba(255,255,255,0.2); } /* 蝴蝶结/丝带 */ #awakening-frame-1 .aw-gift-ribbon { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 40px; height: 20px; z-index: 2; } #awakening-frame-1 .aw-gift-ribbon::before, #awakening-frame-1 .aw-gift-ribbon::after { content: ''; position: absolute; width: 16px; height: 16px; background: radial-gradient(circle, #FF4500, #FF6347); border-radius: 50%; top: 0; } #awakening-frame-1 .aw-gift-ribbon::before { left: 2px; } #awakening-frame-1 .aw-gift-ribbon::after { right: 2px; } /* 呼吸动画 */ #awakening-frame-1 .aw-gift-box.aw-breathe { animation: awGiftBreathe 1.6s ease-in-out infinite; } @keyframes awGiftBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 50% { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.15); } } /* 弹出动画 */ #awakening-frame-1 .aw-gift-box.aw-pop { animation: awGiftPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes awGiftPop { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* 提示文字 */ #awakening-frame-1 .aw-gift-hint { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); color: #FFD700; font-size: 14px; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 0 8px rgba(255,215,0,0.6); opacity: 0; transition: opacity 0.3s ease; } #awakening-frame-1 .aw-gift-box.aw-breathe .aw-gift-hint { opacity: 1; } /* ===== 2026-09-10 入口断点修复2：地图页隐藏常驻猫面板（避免遮挡全屏沉浸式页面） ===== 生效条件：body 带 map-active 类（主页 _f2Home.start 已自动加；认知地图/窝点页待拍板后补充） 铁律：cat-companion 底部浮动 z-index:80，在全屏内容页无交互价值反而遮挡 */ body.map-active #cat-companion { display: none !important; } /* ===== 2026-09-10 主页巨高修复·保险2：canvas定位+尺寸钉死（配合_resize clamp） ===== 根因：两个canvas全站零CSS，浏览器把width/height属性当显示尺寸，配合_resize每帧×dpr 形成自举爆炸（300×2^18≈天文数字）。JS clamp切断正反馈，CSS钉死显示尺寸为第二道闸。 高度链：.page(块级) -> .home-map-wrap(relative,由img撑高) -> img(width:100%定比例) -> canvas(absolute铺满,脱离文档流不撑页面)。层级保持DOM序：img