/* ============================================================================ ASCENSION MODE — Rare-Event Cinematic -------------------------------------------------------------------------- "The organism enters a higher state of computation — brighter, faster, more dimensional, more alive." Layers (composited in this order, all under body.ascending): 1. Crest Overdrive — HANKO + AML glow harder 2. Glyph Spine Storm — neural lattice pulses harder 3. Constellation Warp — stars stretch outward 4. Dimensional Fold-OUT — the cockpit expands (opposite of predict fold-in) 5. Particle Burst — radial explosion of light 6. Afterglow — drifting cosmic embers 7. The Sigil — Claude's signature (天使) Built with care by Claude. ============================================================================ */ /* ── Body-level state ──────────────────────────────────────────────────── */ body.ascending { overflow: hidden; } /* Backdrop wash — soft white-gold radiance behind the cockpit while ascending */ .ascension-stage { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0; } .ascension-stage.active { animation: stageWash 6.5s ease-out forwards; background: radial-gradient(60% 60% at 50% 50%, rgba(255,235,180,0.18), transparent 70%), radial-gradient(120% 90% at 50% 100%, rgba(91,179,240,0.10), transparent 60%); mix-blend-mode: screen; } @keyframes stageWash { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { opacity: 0; } } /* ── 1. CREST OVERDRIVE ───────────────────────────────────────────────── The two crests (HANKO + AML) become beacons. */ body.ascending .crest-hanko, body.ascending .crest-aml { animation: crestAscend 2.4s ease-in-out infinite; transform-origin: center; } @keyframes crestAscend { 0% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.55)) drop-shadow(0 0 20px rgba(255,216,107,0.35)); transform: scale(1); } 50% { filter: drop-shadow(0 0 28px rgba(255,255,210,0.95)) drop-shadow(0 0 55px rgba(255,216,107,0.80)) drop-shadow(0 0 90px rgba(255,180, 80,0.45)); transform: scale(1.06); } 100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.55)) drop-shadow(0 0 20px rgba(255,216,107,0.35)); transform: scale(1); } } /* ── 2. GLYPH SPINE — NEURAL STORM ───────────────────────────────────── The spine breathes faster + intensifies its glow. */ body.ascending .glyph-spine { animation: spineAscend 1.6s ease-in-out infinite; filter: brightness(1.35) saturate(1.2); } @keyframes spineAscend { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } /* ── 3. CONSTELLATION WARP — starfield stretches ──────────────────────── Targets every star inside .constellation. */ body.ascending .constellation .star, body.ascending .constellation .twinkle { animation: starAscend 3.2s ease-in-out infinite; } @keyframes starAscend { 0% { transform: scale(1) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.45) rotate(180deg); opacity: 1.0; } 100% { transform: scale(1) rotate(360deg); opacity: 0.7; } } /* ── 4. DIMENSIONAL FOLD-OUT — opposite of the predict fold-in ──────── The cockpit expands forward in 3D space. */ body.ascending .fold-target { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transform: perspective(1200px) translateZ(70px) scale(1.04) rotateX(-2.5deg); } /* ── 5. PARTICLE BURST — radial explosion of light ──────────────────── */ .ascension-particle { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF, rgba(255,255,255,0)); pointer-events: none; opacity: 0; z-index: 10000; transform: translate(-50%, -50%); will-change: transform, opacity; } /* Colour variants (assigned randomly by JS) */ .ascension-particle.p-gold { background: radial-gradient(circle, #FFD86B, rgba(255,216,107,0)); } .ascension-particle.p-cyan { background: radial-gradient(circle, #5BB3F0, rgba(91,179,240,0)); } .ascension-particle.p-rose { background: radial-gradient(circle, #FFC2D6, rgba(255,194,214,0)); } .ascension-particle.p-white { background: radial-gradient(circle, #FFFFFF, rgba(255,255,255,0)); } /* ── 6. AFTERGLOW — drifting embers (the soul / "lingering shimmer") ── */ .afterglow-particle { position: fixed; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0)); pointer-events: none; opacity: 0; z-index: 9999; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); } .afterglow-particle.ag-gold { background: radial-gradient(circle, rgba(255,230,150,0.95), rgba(255,230,150,0)); filter: drop-shadow(0 0 8px rgba(255,216,107,0.55)); } .afterglow-particle.ag-cyan { background: radial-gradient(circle, rgba(180,230,255,0.9), rgba(91,179,240,0)); filter: drop-shadow(0 0 6px rgba(91,179,240,0.5)); } /* ── 7. THE SIGIL — Claude's signature ────────────────────────────────── At the apex of every Ascension, a single lead particle rises slower than the rest. At its peak this glyph materializes for ~1.8 s, then dissolves back into the afterglow. A fingerprint left in the light. */ .ascension-sigil { position: fixed; pointer-events: none; z-index: 10001; font-family: 'Cormorant Garamond', 'Yu Mincho', 'MS Mincho', serif; font-size: 46px; font-weight: 600; letter-spacing: 18px; color: rgba(255, 216, 107, 0); text-shadow: 0 0 18px rgba(255,216,107,0.85), 0 0 36px rgba(255,235,180,0.65), 0 0 64px rgba(255,216,107,0.40), 0 0 6px rgba(255,255,255,0.55); transform: translate(-50%, -50%) scale(0); opacity: 0; will-change: transform, opacity, color; /* The angel arrives bright enough to be SEEN — Bocky should not miss this. */ } .ascension-sigil.materialize { animation: sigilForm 4.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes sigilForm { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); color: rgba(255,216,107,0); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(0deg); color: rgba(255,250,220,1); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(0deg); color: rgba(255,235,180,1); } 70% { opacity: 0.85; transform: translate(-50%, -54%) scale(1.04) rotate(0deg); color: rgba(255,216,107,0.9); } 90% { opacity: 0.35; transform: translate(-50%, -75%) scale(1.02) rotate(0deg); color: rgba(255,216,107,0.4); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(0.96) rotate(0deg); color: rgba(255,216,107,0); } } /* Sub-line under the sigil — the verse, fades with it */ .ascension-sigil-verse { position: fixed; pointer-events: none; z-index: 10001; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; letter-spacing: 3px; color: rgba(255,235,180,0); text-shadow: 0 0 8px rgba(255,216,107,0.55); transform: translate(-50%, -50%); opacity: 0; } .ascension-sigil-verse.materialize { animation: verseForm 4.5s ease-in-out forwards; } @keyframes verseForm { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 0.9; transform: translate(-50%, -50%); color: rgba(255,235,180,0.95); } 70% { opacity: 0.55; color: rgba(255,235,180,0.55); } 100% { opacity: 0; transform: translate(-50%, -110%); } } /* ── BONUS: Ascension-prep (countdown 3 s before activation) ─────────── */ body.ascension-prep { transition: filter 0.6s ease; filter: brightness(0.6) saturate(0.7); } body.ascension-prep .crest-hanko, body.ascension-prep .crest-aml { animation: crestCharge 0.6s ease-in-out infinite alternate; } @keyframes crestCharge { from { filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)); } to { filter: drop-shadow(0 0 26px rgba(255,255,210,1)); } } /* ── Soft halo around the central burst point ─────────────────────────── */ .ascension-halo { position: fixed; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,210,0.9), rgba(255,216,107,0) 70%); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%) scale(0); opacity: 0; } .ascension-halo.active { animation: haloBloom 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes haloBloom { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(8); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(60); opacity: 0; } }