Blockland Wiki - 用户贡献 [zh-cn]

MediaWiki:KuranokaPageTransition.js

2026-10-24T16:31:24Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V46 / beat-synced sunrise
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Keep the preloaded Wiki iframe interactive after the curtain opens;
same-origin history mirrors the selected world without reloading it.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}
const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v46').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','46');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,220);
function navigateRealPage(href){
window.location.assign(href);
}
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='46.0';
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
function dawnGeometry(t,w=innerWidth,h=innerHeight){
const cx=w*.5,cy=h*.47;
const rmax=Math.hypot(Math.max(cx,w-cx),Math.max(cy,h-cy))+42;
return {cx,cy,radius:rmax*smooth(t)};
}
const imagePool=new Map();
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();
const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}
function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}
const SCORE_KEY='kkpt:score-handoff:44';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
const ANOTHERME_SUN_DOWNBEATS=[
158.536,159.912,161.279,162.646,164.013,
165.380,166.757,168.124,169.491,170.878,
172.244,173.611,174.978,176.355,177.722
];
function anotherMeSunPulse(time){
let strong=0,soft=0;
const envelope=(dt,decay)=>dt<-.030||dt>.55?0:
dt<.035?Math.max(0,(dt+.030)/.065):
Math.exp(-(dt-.035)*decay);
for(const beat of ANOTHERME_SUN_DOWNBEATS){
strong=Math.max(strong,envelope(time-beat,9));
soft=Math.max(soft,envelope(time-(beat+.684),12)*.48);
}
return {strong,soft};
}
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
setTimeout(()=>{
if(fatePrelude===node)clearFatePrelude();
else node.remove();
},1700);
}
function fateSigilMarkup(isDark){
const at=(r,d)=>{
const a=(d-90)*Math.PI/180;
return [(150+Math.cos(a)*r).toFixed(2),
(150+Math.sin(a)*r).toFixed(2)];
};
const ring=(r,cls)=>'<circle class="'+cls+
'" cx="150" cy="150" r="'+r+'"/>';
const stroke=(a,b,cls)=>'<path class="'+cls+
'" d="M'+a.join(' ')+' L'+b.join(' ')+'"/>';
const poly=(points,cls)=>'<polygon class="'+cls+'" points="'+
points.map(p=>p.join(',')).join(' ')+'"/>';
const outer=ring(133,'kkpt-sigil-outer')+
ring(128,'kkpt-sigil-orbit')+
ring(121,'kkpt-sigil-ghost')+
ring(105,'kkpt-sigil-seal')+
ring(100,'kkpt-sigil-trace')+
ring(83,'kkpt-sigil-ghost');
const glyphs=Array.from({length:48},(_,i)=>{
const angle=i*7.5;
const major=i%4===0;
return stroke(at(121,angle),at(major?132:i%2?125:128,angle),
major?'kkpt-sigil-mark kkpt-sigil-major':'kkpt-sigil-mark');
}).join('');
const cardinal=Array.from({length:8},(_,i)=>{
const a=i*45;
return poly([at(99,a),at(111,a+4.2),at(120,a),at(111,a-4.2)],
'kkpt-sigil-diamond')+
stroke(at(85,a),at(96,a),'kkpt-sigil-needle');
}).join('');
const darkDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-dark-mark" d="M150 115L170 150 150 185 130 150Z"/>'+
'<path class="kkpt-sigil-dark-cut" d="M150 130L156 150 150 170 144 150Z"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
const hopeDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-light-mark" d="M150 119L158 142 181 150 158 158 150 181 142 158 119 150 142 142Z"/>'+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="7"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-engraving" fill="none" stroke="'+
(isDark?'#ff8c9b':'#f7edcf')+'" stroke-width="1.3">'+
outer+glyphs+cardinal+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
root.append(prelude);
fatePrelude=prelude;
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},30000);
}
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}
const AFTER_DARK_KEY='kkpt:dark-afterglow:44';
const DAWN_HALO_KEY='kkpt:dawn-cloudbreak:44';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaGlitchEnvelope(age){
if(age<0||age>=.92)return 0;
if(age<.045)return age/.045;
if(age<.16)return 1;
return Math.pow(1-smooth((age-.16)/.76),1.5);
}
let kuronataAftermath=null;
let dawnBeatScene=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<div class="kkpt-beat-slices"></div>'+
'<svg class="kkpt-beat-scars" viewBox="0 0 1440 900" '+
'preserveAspectRatio="none" aria-hidden="true">'+
'<path d="M-20 340L126 317 203 355 294 339 383 382 477 352 605 395 728 365 842 399 982 371 1125 397 1264 351 1460 390" />'+
'<path d="M-20 635L158 605 294 646 404 612 547 668 679 622 846 653 991 621 1149 668 1277 636 1460 660" />'+
'<path d="M203 355l-19 33 27 39M842 399l30 34-20 47M404 612l-44 42 23 29M1149 668l39 41-18 32"/>'+
'</svg>';
root.append(layer);
let live=true,raf=0,idleTimer=0,lastTick=0,source=null,lastKick=-100;
let index=0;
const values=Object.create(null);
const setLayer=(name,value)=>{
if(values[name]===value)return;
values[name]=value;
layer.style.setProperty(name,value);
};
const stopTicks=()=>{
cancelAnimationFrame(raf);
clearTimeout(idleTimer);
idleTimer=0;
};
const queueTick=(delay=0)=>{
if(!delay){raf=requestAnimationFrame(tick);return;}
idleTimer=setTimeout(()=>{
idleTimer=0;
if(live)raf=requestAnimationFrame(tick);
},delay);
};
const quiet=()=>{
setLayer('--kkpt-beat-dark','.67');
setLayer('--kkpt-beat-blur','0.15px');
setLayer('--kkpt-beat-glitch','.10');
setLayer('--kkpt-beat-shear','0px');
setLayer('--kkpt-beat-shear-reverse','0px');
setLayer('--kkpt-beat-scars','.04');
layer.classList.remove('kkpt-beat-stutter');
};
function tick(now){
if(!live)return;
if(now-lastTick<28){
queueTick(Math.max(0,28-(now-lastTick)));
return;
}
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;stopTicks();
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const rupture=marenoiaGlitchEnvelope(audioTime-lastKick)*
soundStrength;
layer.classList.toggle('kkpt-beat-stutter',rupture>.14);
setLayer('--kkpt-beat-dark',
(.67+.18*rupture).toFixed(2));
setLayer('--kkpt-beat-blur',
(.15+1.9*rupture).toFixed(1)+'px');
setLayer('--kkpt-beat-glitch',
(.10+.85*rupture).toFixed(2));
const shear=Math.sin(index*1.47+audioTime*31)*rupture*13;
setLayer('--kkpt-beat-shear',
shear.toFixed(1)+'px');
setLayer('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(1)+'px');
setLayer('--kkpt-beat-scars',
(.04+.85*rupture).toFixed(2));
const nextKick=MARENOIA_EIGHT_BEAT_KICKS[index]??Infinity;
if(rupture<.005&&nextKick-audioTime>.15)queueTick(110);
else queueTick(28);
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
stopTicks();
live=true;lastTick=0;lastKick=-100;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;stopTicks();
layer.classList.add('kkpt-beat-idle');quiet();
},
fadeToDawn(){
source=null;live=false;stopTicks();
quiet();
layer.classList.add('kkpt-beat-outro');
const old=layer;
setTimeout(()=>{
old.remove();
if(kuronataAftermath?.layer===old)kuronataAftermath=null;
},2400);
},
dispose(){
source=null;live=false;stopTicks();
layer.remove();kuronataAftermath=null;
},
layer
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createCloudbreakAfterglow(continueFromNavigation=false){
const previous=document.getElementById('kkpt-cloudbreak');
previous?.remove();
let timestamp=Date.now();
if(continueFromNavigation){
try{timestamp=Number(sessionStorage.getItem(DAWN_HALO_KEY));}
catch(_){return;}
if(!Number.isFinite(timestamp)||timestamp<=0)return;
}else{
try{sessionStorage.setItem(DAWN_HALO_KEY,String(timestamp));}
catch(_){}
}
const elapsed=Math.max(0,Date.now()-timestamp);
if(elapsed>5000){
try{sessionStorage.removeItem(DAWN_HALO_KEY);}catch(_){}
return;
}
const bloom=document.createElement('div');
bloom.id='kkpt-cloudbreak';
bloom.setAttribute('aria-hidden','true');
bloom.style.setProperty('--kkpt-dawn-delay',(-elapsed)+'ms');
bloom.innerHTML='<i class="kkpt-dawn-bright-rim"></i>'+
'<i class="kkpt-dawn-cloud-sweep"></i>';
root.append(bloom);
setTimeout(()=>{
bloom.remove();
try{
if(Number(sessionStorage.getItem(DAWN_HALO_KEY))===timestamp)
sessionStorage.removeItem(DAWN_HALO_KEY);
}catch(_){}
},Math.max(0,5100-elapsed));
}
function createDawnBeatScene(score){
if(!score||score.config?.id!=='anotherme'||
matchMedia('(prefers-reduced-motion: reduce)').matches)return null;
dawnBeatScene?.dispose();
const layer=document.createElement('div');
layer.id='kkpt-sunbeat';
layer.setAttribute('aria-hidden','true');
layer.innerHTML='<i class="kkpt-sunbeat-core"></i>'+
'<i class="kkpt-sunbeat-rays"></i>';
document.body.append(layer);
let timer=0,stopped=false;
const stop=instant=>{
if(stopped)return;
stopped=true;clearTimeout(timer);
if(!instant)layer.classList.add('kkpt-sunbeat-finish');
if(instant)layer.remove();
else setTimeout(()=>layer.remove(),520);
if(dawnBeatScene===scene)dawnBeatScene=null;
if(score.dawnScene===scene)score.dawnScene=null;
};
const scene={finish:()=>stop(false),dispose:()=>stop(true)};
dawnBeatScene=score.dawnScene=scene;
const tick=()=>{
if(stopped)return;
const audio=score.audio;
if(audio.ended||audio.error||audio.currentTime>=score.config.stopAt-.035){
scene.finish();return;
}
const pulse=anotherMeSunPulse(audio.currentTime);
const level=audio.paused||audio.muted?0:
Math.max(0,Math.min(1,audio.volume/.78));
const hit=(pulse.strong*.76+pulse.soft*.17)*level;
const ray=(pulse.strong*.33+pulse.soft*.24)*level;
layer.style.setProperty('--kkpt-sun-hit',hit.toFixed(3));
layer.style.setProperty('--kkpt-sun-ray',ray.toFixed(3));
timer=setTimeout(tick,hit>.025||ray>.025?32:95);
};
tick();
return scene;
}
function createRebirthVisual(score){
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
const field=document.createElement('div');
field.className='kkpt-rebirth-field';
field.append(drizzle,light,rainbow,essence);
const aperture=document.createElement('div');
aperture.className='kkpt-rebirth-aperture';
layer.append(field,aperture);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
const pulse=score?.config?.id==='anotherme'?
anotherMeSunPulse(score.audio.currentTime):null;
const bright=pulse?.strong||0;
const {radius}=dawnGeometry(t);
field.style.clipPath='circle('+radius.toFixed(1)+'px at 50% 47%)';
aperture.style.transform='translate(-50%,-50%) scale('+
(radius/520).toFixed(4)+')';
aperture.style.opacity=Math.min(1,
Math.sin(Math.PI*t)*.65+bright*.22).toFixed(3);
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.36+
bright*.16).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.dawnScene?.finish();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
const volume=.78*Math.min(fadeIn,fadeOut);
if(Math.abs(audio.volume-volume)>.0008)audio.volume=volume;
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,30);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:46
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==46||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}
let active = false; // true while the interactive target iframe owns the viewport
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';
const COOLDOWN_KEY='kkpt:switch-ready:46';
const COOLDOWN_MS=18000;
let cooldownUntil=0,cooldownTicker=0;
function cooldownSeconds(){
return Math.max(0,Math.ceil((cooldownUntil-Date.now())/1000));
}
function isCoolingDown(){return cooldownSeconds()>0;}
function refreshCooldownUI(){
const seconds=cooldownSeconds();
const locked=seconds>0;
if(button){
button.classList.toggle('kkpt-cooldown',locked);
button.setAttribute('aria-disabled',String(locked));
if(locked)labelSub.textContent='RECONNECT IN '+seconds+'S';
}
const docs=[document];
try{if(frame?.contentDocument)docs.push(frame.contentDocument);}catch(_){}
for(const doc of docs){
doc.documentElement.classList.toggle('kkpt-cooldown-active',locked);
doc.querySelectorAll('.kkpt-fate-gear').forEach(gear=>{
gear.disabled=locked;
gear.setAttribute('aria-disabled',String(locked));
});
}
if(!locked){
try{sessionStorage.removeItem(COOLDOWN_KEY);}catch(_){}
updateButton();
}
}
function scheduleCooldown(){
clearTimeout(cooldownTicker);
refreshCooldownUI();
if(isCoolingDown())cooldownTicker=setTimeout(scheduleCooldown,
Math.min(1000,Math.max(25,cooldownUntil-Date.now())));
}
function beginCooldown(){
cooldownUntil=Date.now()+COOLDOWN_MS;
try{sessionStorage.setItem(COOLDOWN_KEY,String(cooldownUntil));}catch(_){}
scheduleCooldown();
}
function restoreCooldown(){
try{cooldownUntil=Number(sessionStorage.getItem(COOLDOWN_KEY))||0;}
catch(_){cooldownUntil=0;}
if(isCoolingDown())scheduleCooldown();
}
function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}
function commitVirtualWorld(nextActive){
const url=nextActive?otherUrl.href:baseUrl;
const page=nextActive?otherPage:basePage;
if(pathPage()!==page){
const previous=history.state;
const state=previous&&typeof previous==='object'
?{...previous,kkptIframeWorld:page}
:{kkptIframeWorld:page};
history.pushState(state,'',url);
}
}
function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
if(isCoolingDown())labelSub.textContent='RECONNECT IN '+cooldownSeconds()+'S';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}
function decoratePortalLinks(doc, targetPage, changedRoots) {
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
const decorate=anchor=>{
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
};
for(const node of changedRoots||[content]){
if(node.matches?.('a[href]'))decorate(node);
node.querySelectorAll?.('a[href]').forEach(decorate);
}
}
function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const changed=new Set();
const observer = new MutationObserver(records => {
for(const record of records){
for(const node of record.addedNodes){
if(node.nodeType===1)changed.add(node);
else if(node.parentElement?.matches('a[href]'))
changed.add(node.parentElement);
}
}
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
const roots=[...changed];changed.clear();
if(roots.length)decoratePortalLinks(doc,targetPage,roots);
},60);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}
function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}
function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}
function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending||isCoolingDown())return true;
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||isCoolingDown()||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}
function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}
function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);
}
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}
function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}
async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}
function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);
doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}
function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
frame.style.visibility = 'visible';
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}
frame.addEventListener('load',()=>{
if(!active)return;
try{
const next=new URL(frame.contentWindow.location.href);
if(next.origin!==location.origin||
wikiLinkPage({href:next.href},frame.contentDocument)!==otherPage)
navigateRealPage(next.href);
}catch(_){}
});
loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
const frameCssUrl=new URL('/index.php',location.origin);
frameCssUrl.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
frameCssUrl.searchParams.set('action','raw');
frameCssUrl.searchParams.set('ctype','text/css');
frameCssUrl.searchParams.set('kkptv','46');
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || doc.readyState!=='complete'||
!doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
const styled=()=>doc.defaultView?.getComputedStyle(
doc.documentElement).getPropertyValue('--kkpt-css-v46').trim()==='ready';
if(!styled()&&!doc.getElementById('kkpt-frame-css-guarantee')){
const style=document.createElement('link');
style.id='kkpt-frame-css-guarantee';
style.rel='stylesheet';style.href=frameCssUrl.href;
doc.head?.appendChild(style);
}
await Promise.race([doc.fonts?.ready||Promise.resolve(),sleep(1300)]);
await Promise.race([warmBackgrounds(doc),sleep(3300)]);
const visibleImages=Array.from(doc.images).filter(image=>{
const rect=image.getBoundingClientRect();
return rect.top<innerHeight*1.45&&rect.bottom>-innerHeight*.3;
}).slice(0,32);
visibleImages.forEach(image=>{
if(image.loading==='lazy')image.loading='eager';
});
await Promise.race([Promise.allSettled(visibleImages.map(image=>
image.complete?Promise.resolve():new Promise(resolve=>{
image.addEventListener('load',resolve,{once:true});
image.addEventListener('error',resolve,{once:true});
}))),sleep(2600)]);
for(let i=0;i<12&&!styled();i++)await sleep(110);
if(!styled()){
finish(false,'目标页特效 CSS 未完成加载');return;
}
await sleep(100);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled) finish(false,'7 秒内目标页仍未完成加载'); }, 7000);
});
warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
const dawn=dark?null:dawnGeometry(progress,w,h);
const angle=Math.random()*Math.PI*2;
combustion.push({
kind,x:dark?edge+Math.random()*47-8:
dawn.cx+Math.cos(angle)*dawn.radius,
y:dark?y+(Math.random()-.5)*25:
dawn.cy+Math.sin(angle)*dawn.radius,
vx:dark?(small?65+Math.random()*245:
14+Math.random()*154):
Math.cos(angle)*(20+Math.random()*88),
vy:dark?-(small?12+Math.random()*190:
32+Math.random()*171):
Math.sin(angle)*(20+Math.random()*60)-33,
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
const dawn=dark?null:dawnGeometry(progress,w,h);
const dawnPoint=(angle,offset=0)=>({
x:dawn.cx+(dawn.radius+offset)*Math.cos(angle),
y:dawn.cy+(dawn.radius+offset)*Math.sin(angle)
});
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
const direction=dark?1:-1;
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const angle=i/bands*Math.PI*2+.12;
const place=dawn?dawnPoint(angle,98+32*Math.sin(seconds+i)):
null;
const y=dawn?place.y:baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=dawn?place.x:edgeAt(y,seconds,progress,w)+direction*
(76+rand(i*19+6)*260)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(dark&&(y< -230||y>h+230))continue;
const angle=item.seed*Math.PI*2+item.bend*.25;
const place=dawn?dawnPoint(angle,40+age*145):null;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=dawn?place.x:frontier+direction*(age*225+
30*Math.sin(age*6.3+item.bend));
const particleY=dawn?place.y-age*28:y;
if(particleY< -230||particleY>h+230)continue;
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,particleY);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const place=dawnPoint(n*Math.PI+.7,42);
const yy=place.y+Math.sin(seconds*.8+n*2)*30;
const xx=place.x;
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}
ctx.save();
ctx.beginPath();
if(dark){
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
}else{
for(let i=0;i<=96;i++){
const a=i/96*Math.PI*2;
const flutter=Math.sin(Math.PI*progress)*(
3.4*Math.sin(a*7+seconds*1.8)+
1.8*Math.sin(a*15-seconds*2.3));
const r=Math.max(0,dawn.radius+flutter);
const x=dawn.cx+Math.cos(a)*r;
const y=dawn.cy+Math.sin(a)*r;
if(!i)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.closePath();
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=22;ctx.shadowColor='#bcefff';ctx.shadowBlur=16;
ctx.stroke();
ctx.strokeStyle='rgba(173,234,255,.54)';
ctx.lineWidth=9;ctx.shadowColor='#d2faff';ctx.shadowBlur=10;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.78)';
ctx.lineWidth=2.4;ctx.shadowBlur=3;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}
let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
const schedule=()=>{
if(typeof requestIdleCallback==='function')
requestIdleCallback(step,{timeout:70});
else setTimeout(step,24);
};
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
schedule();
}
setTimeout(schedule,40);
});
return atmosphereWarmPromise;
}
let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}
function clipDawnFrame(t){
const {radius}=dawnGeometry(t);
const near=Math.max(0,radius-2).toFixed(1);
const far=(radius+2).toFixed(1);
const mask='radial-gradient(circle at 50% 47%, transparent '+
near+'px, #000 '+far+'px)';
const darkLens=document.getElementById('kkpt-beat-scene');
if(darkLens){
darkLens.style.maskImage=mask;
darkLens.style.webkitMaskImage=mask;
}
if(basePage==='Kuronata'){
frame.style.clipPath='circle('+radius.toFixed(1)+'px at 50% 47%)';
return;
}
frame.style.clipPath='inset(0)';
frame.style.maskImage=mask;
frame.style.webkitMaskImage=mask;
}
function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}
const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=dark?makeEdge(t,seconds,true,w):
y=>{
const dawn=dawnGeometry(t,w,h);
const dy=y-dawn.cy;
const reach=Math.sqrt(Math.max(0,dawn.radius*dawn.radius-dy*dy));
return dawn.cx+Math.cos(y*.018+seconds*.35)*reach;
};
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
if(dark)clipFrame(edge);
else clipDawnFrame(t);
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
drawAtmosphere(seconds,dark?Math.min(t,.925):t,
dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}
function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.maskImage='none';
frame.style.webkitMaskImage='none';
frame.style.visibility='visible'; // hidden solely by clip-path
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
root.classList.toggle('kkpt-iframe-owns-viewport',active);
const articleShell=document.querySelector('.citizen-page-container');
if(articleShell)articleShell.inert=active;
if(active)frame.focus({preventScroll:true});
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}
async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
const targetPage=nextActive?otherPage:basePage;
let score=returnScore?.config?.target===targetPage?
returnScore:null;
if(!loading)warmFrame();
let framePrepared=false;
const preparation=Promise.all([
loading,
score?prewarmAtmosphere():
Promise.race([prewarmAtmosphere(),sleep(160)])
]).then(([isReady])=>{framePrepared=Boolean(isReady);});
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
const onCue=started ? await Promise.all([
preparation,awaitScoreTime(score,score.config.fireStart)
]).then(([,hit])=>hit) : false;
if(!onCue){
await preparation;
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
} else await preparation;
if(!framePrepared){
removeScoreOmen();releaseFatePrelude();
saveReturnScoreHandoff(score);
navigateRealPage(nextActive?otherUrl.href:baseUrl);
return;
}
if(score&&score.audio.currentTime>score.config.fireStart+.35){
try{score.audio.currentTime=score.config.fireStart;}catch(_){}
}
removeScoreOmen();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;
const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual(score);
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
const curtainFinished=new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));
requestAnimationFrame(releaseFatePrelude);
await curtainFinished;
setDisplayed(nextActive);
commitVirtualWorld(nextActive);
if(dark){
dawnBeatScene?.dispose();
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
createDawnBeatScene(score);
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
frame.classList.remove('kkpt-animating');
button.classList.remove('kkpt-busy','kkpt-quiet');
beginCooldown();
}
function requestSwap(nextActive) {
if (animating || isCoolingDown() || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
animating=true;
let succeeded=false;
(loading||warmFrame()).then(ok=>{
if(!ok){
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive?otherUrl.href:baseUrl);
return;
}
setDisplayed(nextActive);
commitVirtualWorld(nextActive);
succeeded=true;
if((nextActive?otherPage:basePage)==='Kuronata'){
dawnBeatScene?.dispose();
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(returnScore?.config?.id==='marenoia'
?returnScore:null);
}else{
kuronataAftermath?.fadeToDawn();
createDawnBeatScene(returnScore);
}
}).finally(()=>{
animating=false;
if(succeeded)beginCooldown();
});
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V46:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}
function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuranoka')createCloudbreakAfterglow(true);
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
const aftermath=mountKuronataAftermath(returnScore);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();
button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
if(animating||isCoolingDown())return;
armReturnScore(destination());
primeSound();
requestSwap(!active);
});
restoreCooldown();
}
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') {
watchPortalLinks(document, otherPage);
mountFateGear(document, otherPage);
}
});
function syncWorldFromHistory(){
if(animating)return;
const page=pathPage();
if(page!==basePage&&page!==otherPage)return;
const wantOther=page===otherPage;
if(wantOther&&!ready){
(loading||warmFrame()).then(ok=>{
if(ok&&pathPage()===otherPage)setDisplayed(true);
else if(!ok)navigateRealPage(location.href);
});
return;
}
if(wantOther===active)return;
setDisplayed(wantOther);
if(page==='Kuronata'){
const after=mountKuronataAftermath(
returnScore?.config?.id==='marenoia'?returnScore:null);
after.layer.classList.add('kkpt-beat-resumed');
}else{
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
}
window.addEventListener('popstate',syncWorldFromHistory);
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-cloudbreak')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(pathPage()===otherPage);
frame.classList.remove('kkpt-animating');
}
if(pathPage()==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered){
const aftermath=mountKuronataAftermath(
returnScore?.config?.id==='marenoia'?returnScore:null);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
restoreCooldown();
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T16:31:11Z

KK：

:root { --kkpt-css-v46: ready; }
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 1350ms cubic-bezier(.13,.64,.27,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:390px;height:390px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 10px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 2.4s ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:1.0px;
opacity:.52;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-major {
stroke-width:2px;
opacity:.85;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-outer {
stroke-width:1.6px;
stroke-dasharray:91 6 3 6;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-trace {
stroke-width:.75px;
opacity:.72;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-needle {
stroke-width:1.45px;
opacity:.77;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.28px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-core-orbit {
stroke-width:1.5px;
opacity:.79;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-inner-orbit {
stroke-width:.85px;
stroke-dasharray:14 7;
opacity:.65;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-axis {
stroke-width:1.4px;
opacity:.63;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-mark {
stroke:#ffc0c9;
stroke-width:2px;
fill:rgba(103,0,32,.11);
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-cut {
stroke:#f35b77;
stroke-width:1.2px;
fill:rgba(27,0,10,.45);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-light-mark {
stroke:#fff4cc;
stroke-width:1.8px;
fill:rgba(255,244,205,.08);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:rgba(255,246,211,.70);
stroke:#ffffff;
stroke-width:1.2px;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:.22;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:.22;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
16%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:.11;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:.15;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:.91;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}
#kkpt-beat-scene {
--kkpt-beat-dark:.67;
--kkpt-beat-blur:.15px;
--kkpt-beat-glitch:.10;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-scars:.04;
position:fixed !important;
inset:0 !important;
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
#kkpt-beat-scene.kkpt-beat-resumed {
animation:none !important;
opacity:1;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-15%;
background:radial-gradient(ellipse at 50% 47%,transparent 16%,
rgba(12,0,8,.26) 39%,rgba(3,0,5,.71) 70%,
rgba(0,0,2,.99) 100%);
opacity:var(--kkpt-beat-dark);
will-change:opacity;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.012);
backdrop-filter:blur(2px) contrast(1.035);
-webkit-backdrop-filter:blur(2px) contrast(1.035);
opacity:calc(var(--kkpt-beat-glitch) * .53);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:radial-gradient(ellipse at 50% 130%,
transparent 32%,rgba(94,1,24,.24) 70%,rgba(31,0,9,.58) 100%),
linear-gradient(94deg,rgba(180,5,37,.55),transparent 17%,
transparent 82%,rgba(71,0,16,.72));
mix-blend-mode:multiply;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(159deg,
transparent 0 33px,rgba(61,0,20,.44) 35px,
rgba(8,0,9,.56) 36px,transparent 39px 74px);
clip-path:polygon(0 10%,23% 9%,31% 17%,43% 11%,58% 15%,
72% 10%,100% 16%,100% 18%,70% 12%,56% 18%,42% 14%,
31% 20%,20% 11%,0 13%,0 70%,18% 67%,36% 76%,
49% 69%,65% 79%,86% 72%,100% 77%,100% 80%,
86% 75%,65% 82%,49% 72%,36% 79%,18% 70%,0 73%);
}
#kkpt-beat-scene .kkpt-beat-slices {
position:absolute;
inset:-3% -4%;
pointer-events:none;
opacity:calc(var(--kkpt-beat-glitch) * .83);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:
repeating-linear-gradient(0deg,transparent 0 55px,
rgba(255,9,66,.14) 56px 58px,
rgba(0,0,0,.60) 60px 62px,transparent 63px 101px),
linear-gradient(95deg,transparent 14%,rgba(255,22,66,.11) 20%,
transparent 26% 74%,rgba(14,0,6,.47) 84%,transparent 92%);
mix-blend-mode:screen;
filter:contrast(1.35);
will-change:opacity,transform;
}
#kkpt-beat-scene.kkpt-beat-stutter .kkpt-beat-slices {
animation:kkpt-red-digital-tear 180ms steps(1,end) infinite;
}
@keyframes kkpt-red-digital-tear {
0%,100% {clip-path:inset(11% 0 74% 0);transform:translate3d(-13px,0,0)}
24% {clip-path:inset(35% 0 43% 0);transform:translate3d(17px,0,0)}
52% {clip-path:inset(62% 0 20% 0);transform:translate3d(-7px,0,0)}
77% {clip-path:inset(5% 0 18% 0);transform:translate3d(11px,0,0)}
}
#kkpt-beat-scene .kkpt-beat-scars {
position:absolute;
inset:0;
pointer-events:none;
width:100%;
height:100%;
opacity:var(--kkpt-beat-scars);
transform:translate3d(var(--kkpt-beat-shear),0,0);
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-scars path {
fill:none;
stroke:#be1839;
stroke-width:1.7px;
stroke-linejoin:bevel;
stroke-dasharray:84 11 21 36;
filter:drop-shadow(0 0 8px #8c001d);
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(2) {
stroke:#23000e;
stroke-width:5px;
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(3) {
stroke:#ed3354;
stroke-width:1px;
}
#kkpt-beat-scene.kkpt-beat-outro {
opacity:0 !important;
transition:opacity 2150ms cubic-bezier(.12,.54,.22,1);
}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture,
#kkpt-beat-scene .kkpt-beat-slices {animation:none !important}
}
#kkpt-cloudbreak {
position:fixed !important;
inset:0 !important;
z-index:2147482160 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
isolation:isolate;
}
#kkpt-cloudbreak > i {
display:block;
position:absolute;
inset:-12%;
pointer-events:none;
will-change:opacity,transform;
}
#kkpt-cloudbreak .kkpt-dawn-bright-rim {
background:
radial-gradient(ellipse at 50% 48%,transparent 19%,
rgba(226,246,255,.07) 46%,rgba(247,253,255,.22) 82%,
rgba(255,255,250,.34) 100%),
radial-gradient(ellipse at 45% 105%,transparent 12%,
rgba(221,245,255,.14) 62%,rgba(255,251,222,.28) 100%);
mix-blend-mode:screen;
animation:kkpt-dawn-bloom 5000ms
cubic-bezier(.12,.54,.23,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-cloud-sweep {
inset:-24% -12%;
background:
radial-gradient(ellipse at 16% 90%,rgba(251,253,255,.22),
rgba(238,248,255,.11) 35%,transparent 59%),
radial-gradient(ellipse at 83% 100%,rgba(250,253,255,.26),
rgba(241,247,255,.12) 32%,transparent 62%),
radial-gradient(ellipse at 50% 119%,rgba(255,250,222,.18),
transparent 70%);
animation:kkpt-dawn-rise 5000ms
cubic-bezier(.16,.56,.24,1) var(--kkpt-dawn-delay,0ms) both;
}
@keyframes kkpt-dawn-bloom {
0%,17%{opacity:0}
30%{opacity:.23}
48%{opacity:.86}
66%{opacity:.60}
83%{opacity:.18}
100%{opacity:0}
}
@keyframes kkpt-dawn-rise {
0%,22%{opacity:0;transform:translate3d(0,9%,0) scale(1.02)}
44%{opacity:.28}
64%{opacity:.66;transform:translate3d(0,-2%,0) scale(1.04)}
100%{opacity:0;transform:translate3d(0,-12%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){#kkpt-cloudbreak{display:none !important}}
#kkpt-sunbeat {
position:fixed !important;
inset:0 !important;
z-index:2147482150 !important;
overflow:hidden !important;
pointer-events:none !important;
contain:layout style paint;
isolation:isolate;
--kkpt-sun-hit:0;
--kkpt-sun-ray:0;
opacity:1;
transition:opacity 500ms ease-out;
}
#kkpt-sunbeat.kkpt-sunbeat-finish {opacity:0}
#kkpt-sunbeat > i {
display:block;
position:absolute;
inset:-5%;
pointer-events:none;
}
#kkpt-sunbeat .kkpt-sunbeat-core {
background:radial-gradient(ellipse at 50% 46%,
rgba(255,251,228,.27) 0%,rgba(245,252,255,.11) 26%,
transparent 59%);
mix-blend-mode:screen;
opacity:var(--kkpt-sun-hit);
}
#kkpt-sunbeat .kkpt-sunbeat-rays {
background:conic-gradient(from 7deg at 50% 46%,
transparent 0deg,rgba(255,242,199,.12) 15deg,transparent 28deg,
transparent 83deg,rgba(255,255,235,.10) 92deg,transparent 102deg,
transparent 174deg,rgba(255,244,215,.10) 184deg,transparent 196deg,
transparent 268deg,rgba(246,252,255,.10) 277deg,transparent 290deg,
transparent 360deg);
-webkit-mask-image:radial-gradient(ellipse at 50% 46%,
transparent 15%,#000 35%,transparent 73%);
mask-image:radial-gradient(ellipse at 50% 46%,
transparent 15%,#000 35%,transparent 73%);
mix-blend-mode:screen;
opacity:var(--kkpt-sun-ray);
}
@media (prefers-reduced-motion:reduce){#kkpt-sunbeat{display:none !important}}
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-field {
position:absolute;
inset:0;
pointer-events:none;
will-change:clip-path;
}
#kkpt-rebirth-visual .kkpt-rebirth-aperture {
position:absolute;
top:47%;left:50%;
width:1040px;height:1040px;
border:2px solid rgba(247,254,255,.73);
border-radius:50%;
background:radial-gradient(circle,
transparent 71%,rgba(198,240,255,.04) 89%,
rgba(247,254,255,.12) 98%,transparent 100%);
box-shadow:0 0 18px rgba(228,250,255,.27),
0 0 35px rgba(141,212,255,.09),
inset 0 0 22px rgba(234,254,255,.12);
transform:translate(-50%,-50%) scale(0);
transform-origin:center;
opacity:0;
will-change:transform,opacity;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}
#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}
#kkpt-toggle[hidden] {display:none !important}
#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}
#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}
#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}
body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
html.kkpt-iframe-owns-viewport {overflow:hidden !important}
#kkpt-preview.kkpt-active:not(.kkpt-animating) {will-change:auto}
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}
.kkpt-fate-gear[hidden] {display:none !important}
body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}
.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}
.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}
.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}
body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}
@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}
@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}
html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}
body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}
@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
flex: none !important;
line-height: 1 !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
float: none !important;
vertical-align: baseline !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}
#kkpt-toggle.kkpt-cooldown {
cursor:not-allowed !important;
opacity:.53;
pointer-events:none;
transform:none !important;
}
html.kkpt-cooldown-active .kkpt-fate-gear {
cursor:not-allowed !important;
opacity:.52 !important;
animation:none !important;
}
html.kkpt-cooldown-active .kkpt-fate-gear::after,
html.kkpt-cooldown-active .kkpt-fate-host > .kkpt-fate-gear::before {
animation:none !important;
}
html.kkpt-cooldown-active #mw-content-text a.kkpt-portal-link {
cursor:wait !important;
}

MediaWiki:KuranokaPageTransition.js

2026-10-24T16:01:34Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V45 / radial dawn
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Keep the preloaded Wiki iframe interactive after the curtain opens;
same-origin history mirrors the selected world without reloading it.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}
const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v45').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','45');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,220);
function navigateRealPage(href){
window.location.assign(href);
}
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='44.0';
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
function dawnGeometry(t,w=innerWidth,h=innerHeight){
const cx=w*.5,cy=h*.47;
const rmax=Math.hypot(Math.max(cx,w-cx),Math.max(cy,h-cy))+42;
return {cx,cy,radius:rmax*smooth(t)};
}
const imagePool=new Map();
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();
const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}
function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}
const SCORE_KEY='kkpt:score-handoff:44';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
setTimeout(()=>{
if(fatePrelude===node)clearFatePrelude();
else node.remove();
},1700);
}
function fateSigilMarkup(isDark){
const at=(r,d)=>{
const a=(d-90)*Math.PI/180;
return [(150+Math.cos(a)*r).toFixed(2),
(150+Math.sin(a)*r).toFixed(2)];
};
const ring=(r,cls)=>'<circle class="'+cls+
'" cx="150" cy="150" r="'+r+'"/>';
const stroke=(a,b,cls)=>'<path class="'+cls+
'" d="M'+a.join(' ')+' L'+b.join(' ')+'"/>';
const poly=(points,cls)=>'<polygon class="'+cls+'" points="'+
points.map(p=>p.join(',')).join(' ')+'"/>';
const outer=ring(133,'kkpt-sigil-outer')+
ring(128,'kkpt-sigil-orbit')+
ring(121,'kkpt-sigil-ghost')+
ring(105,'kkpt-sigil-seal')+
ring(100,'kkpt-sigil-trace')+
ring(83,'kkpt-sigil-ghost');
const glyphs=Array.from({length:48},(_,i)=>{
const angle=i*7.5;
const major=i%4===0;
return stroke(at(121,angle),at(major?132:i%2?125:128,angle),
major?'kkpt-sigil-mark kkpt-sigil-major':'kkpt-sigil-mark');
}).join('');
const cardinal=Array.from({length:8},(_,i)=>{
const a=i*45;
return poly([at(99,a),at(111,a+4.2),at(120,a),at(111,a-4.2)],
'kkpt-sigil-diamond')+
stroke(at(85,a),at(96,a),'kkpt-sigil-needle');
}).join('');
const darkDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-dark-mark" d="M150 115L170 150 150 185 130 150Z"/>'+
'<path class="kkpt-sigil-dark-cut" d="M150 130L156 150 150 170 144 150Z"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
const hopeDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-light-mark" d="M150 119L158 142 181 150 158 158 150 181 142 158 119 150 142 142Z"/>'+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="7"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-engraving" fill="none" stroke="'+
(isDark?'#ff8c9b':'#f7edcf')+'" stroke-width="1.3">'+
outer+glyphs+cardinal+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
root.append(prelude);
fatePrelude=prelude;
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},30000);
}
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}
const AFTER_DARK_KEY='kkpt:dark-afterglow:44';
const DAWN_HALO_KEY='kkpt:dawn-cloudbreak:44';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaGlitchEnvelope(age){
if(age<0||age>=.92)return 0;
if(age<.045)return age/.045;
if(age<.16)return 1;
return Math.pow(1-smooth((age-.16)/.76),1.5);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<div class="kkpt-beat-slices"></div>'+
'<svg class="kkpt-beat-scars" viewBox="0 0 1440 900" '+
'preserveAspectRatio="none" aria-hidden="true">'+
'<path d="M-20 340L126 317 203 355 294 339 383 382 477 352 605 395 728 365 842 399 982 371 1125 397 1264 351 1460 390" />'+
'<path d="M-20 635L158 605 294 646 404 612 547 668 679 622 846 653 991 621 1149 668 1277 636 1460 660" />'+
'<path d="M203 355l-19 33 27 39M842 399l30 34-20 47M404 612l-44 42 23 29M1149 668l39 41-18 32"/>'+
'</svg>';
root.append(layer);
let live=true,raf=0,idleTimer=0,lastTick=0,source=null,lastKick=-100;
let index=0;
const values=Object.create(null);
const setLayer=(name,value)=>{
if(values[name]===value)return;
values[name]=value;
layer.style.setProperty(name,value);
};
const stopTicks=()=>{
cancelAnimationFrame(raf);
clearTimeout(idleTimer);
idleTimer=0;
};
const queueTick=(delay=0)=>{
if(!delay){raf=requestAnimationFrame(tick);return;}
idleTimer=setTimeout(()=>{
idleTimer=0;
if(live)raf=requestAnimationFrame(tick);
},delay);
};
const quiet=()=>{
setLayer('--kkpt-beat-dark','.67');
setLayer('--kkpt-beat-blur','0.15px');
setLayer('--kkpt-beat-glitch','.10');
setLayer('--kkpt-beat-shear','0px');
setLayer('--kkpt-beat-shear-reverse','0px');
setLayer('--kkpt-beat-scars','.04');
layer.classList.remove('kkpt-beat-stutter');
};
function tick(now){
if(!live)return;
if(now-lastTick<28){
queueTick(Math.max(0,28-(now-lastTick)));
return;
}
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;stopTicks();
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const rupture=marenoiaGlitchEnvelope(audioTime-lastKick)*
soundStrength;
layer.classList.toggle('kkpt-beat-stutter',rupture>.14);
setLayer('--kkpt-beat-dark',
(.67+.18*rupture).toFixed(2));
setLayer('--kkpt-beat-blur',
(.15+1.9*rupture).toFixed(1)+'px');
setLayer('--kkpt-beat-glitch',
(.10+.85*rupture).toFixed(2));
const shear=Math.sin(index*1.47+audioTime*31)*rupture*13;
setLayer('--kkpt-beat-shear',
shear.toFixed(1)+'px');
setLayer('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(1)+'px');
setLayer('--kkpt-beat-scars',
(.04+.85*rupture).toFixed(2));
const nextKick=MARENOIA_EIGHT_BEAT_KICKS[index]??Infinity;
if(rupture<.005&&nextKick-audioTime>.15)queueTick(110);
else queueTick(28);
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
stopTicks();
live=true;lastTick=0;lastKick=-100;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;stopTicks();
layer.classList.add('kkpt-beat-idle');quiet();
},
fadeToDawn(){
source=null;live=false;stopTicks();
quiet();
layer.classList.add('kkpt-beat-outro');
const old=layer;
setTimeout(()=>{
old.remove();
if(kuronataAftermath?.layer===old)kuronataAftermath=null;
},2400);
},
dispose(){
source=null;live=false;stopTicks();
layer.remove();kuronataAftermath=null;
},
layer
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createCloudbreakAfterglow(continueFromNavigation=false){
const previous=document.getElementById('kkpt-cloudbreak');
previous?.remove();
let timestamp=Date.now();
if(continueFromNavigation){
try{timestamp=Number(sessionStorage.getItem(DAWN_HALO_KEY));}
catch(_){return;}
if(!Number.isFinite(timestamp)||timestamp<=0)return;
}else{
try{sessionStorage.setItem(DAWN_HALO_KEY,String(timestamp));}
catch(_){}
}
const elapsed=Math.max(0,Date.now()-timestamp);
if(elapsed>6900){
try{sessionStorage.removeItem(DAWN_HALO_KEY);}catch(_){}
return;
}
const bloom=document.createElement('div');
bloom.id='kkpt-cloudbreak';
bloom.setAttribute('aria-hidden','true');
bloom.style.setProperty('--kkpt-dawn-delay',(-elapsed)+'ms');
bloom.innerHTML='<i class="kkpt-dawn-dark-rim"></i>'+
'<i class="kkpt-dawn-bright-rim"></i>'+
'<i class="kkpt-dawn-cloud-sweep"></i>';
root.append(bloom);
setTimeout(()=>{
bloom.remove();
try{
if(Number(sessionStorage.getItem(DAWN_HALO_KEY))===timestamp)
sessionStorage.removeItem(DAWN_HALO_KEY);
}catch(_){}
},Math.max(0,7000-elapsed));
}
function createRebirthVisual(){
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
const field=document.createElement('div');
field.className='kkpt-rebirth-field';
field.append(drizzle,light,rainbow,essence);
const aperture=document.createElement('div');
aperture.className='kkpt-rebirth-aperture';
layer.append(field,aperture);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
const {radius}=dawnGeometry(t);
field.style.clipPath='circle('+radius.toFixed(1)+'px at 50% 47%)';
aperture.style.transform='translate(-50%,-50%) scale('+
(radius/520).toFixed(4)+')';
aperture.style.opacity=(Math.sin(Math.PI*t)*.77).toFixed(3);
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
const volume=.78*Math.min(fadeIn,fadeOut);
if(Math.abs(audio.volume-volume)>.0008)audio.volume=volume;
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,30);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:45
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==45||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}
let active = false; // true while the interactive target iframe owns the viewport
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';
function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}
function commitVirtualWorld(nextActive){
const url=nextActive?otherUrl.href:baseUrl;
const page=nextActive?otherPage:basePage;
if(pathPage()!==page){
const previous=history.state;
const state=previous&&typeof previous==='object'
?{...previous,kkptIframeWorld:page}
:{kkptIframeWorld:page};
history.pushState(state,'',url);
}
}
function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}
function decoratePortalLinks(doc, targetPage, changedRoots) {
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
const decorate=anchor=>{
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
};
for(const node of changedRoots||[content]){
if(node.matches?.('a[href]'))decorate(node);
node.querySelectorAll?.('a[href]').forEach(decorate);
}
}
function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const changed=new Set();
const observer = new MutationObserver(records => {
for(const record of records){
for(const node of record.addedNodes){
if(node.nodeType===1)changed.add(node);
else if(node.parentElement?.matches('a[href]'))
changed.add(node.parentElement);
}
}
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
const roots=[...changed];changed.clear();
if(roots.length)decoratePortalLinks(doc,targetPage,roots);
},60);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}
function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}
function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}
function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}
function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}
function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);
}
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}
function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}
async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}
function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);
doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}
function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
frame.style.visibility = 'visible';
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}
frame.addEventListener('load',()=>{
if(!active)return;
try{
const next=new URL(frame.contentWindow.location.href);
if(next.origin!==location.origin||
wikiLinkPage({href:next.href},frame.contentDocument)!==otherPage)
navigateRealPage(next.href);
}catch(_){}
});
loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
const frameCssUrl=new URL('/index.php',location.origin);
frameCssUrl.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
frameCssUrl.searchParams.set('action','raw');
frameCssUrl.searchParams.set('ctype','text/css');
frameCssUrl.searchParams.set('kkptv','45');
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || doc.readyState!=='complete'||
!doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
const styled=()=>doc.defaultView?.getComputedStyle(
doc.documentElement).getPropertyValue('--kkpt-css-v45').trim()==='ready';
if(!styled()&&!doc.getElementById('kkpt-frame-css-guarantee')){
const style=document.createElement('link');
style.id='kkpt-frame-css-guarantee';
style.rel='stylesheet';style.href=frameCssUrl.href;
doc.head?.appendChild(style);
}
await Promise.race([doc.fonts?.ready||Promise.resolve(),sleep(1300)]);
await Promise.race([warmBackgrounds(doc),sleep(3300)]);
const visibleImages=Array.from(doc.images).filter(image=>{
const rect=image.getBoundingClientRect();
return rect.top<innerHeight*1.45&&rect.bottom>-innerHeight*.3;
}).slice(0,32);
visibleImages.forEach(image=>{
if(image.loading==='lazy')image.loading='eager';
});
await Promise.race([Promise.allSettled(visibleImages.map(image=>
image.complete?Promise.resolve():new Promise(resolve=>{
image.addEventListener('load',resolve,{once:true});
image.addEventListener('error',resolve,{once:true});
}))),sleep(2600)]);
for(let i=0;i<12&&!styled();i++)await sleep(110);
if(!styled()){
finish(false,'目标页特效 CSS 未完成加载');return;
}
await sleep(100);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled) finish(false,'7 秒内目标页仍未完成加载'); }, 7000);
});
warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
const dawn=dark?null:dawnGeometry(progress,w,h);
const angle=Math.random()*Math.PI*2;
combustion.push({
kind,x:dark?edge+Math.random()*47-8:
dawn.cx+Math.cos(angle)*dawn.radius,
y:dark?y+(Math.random()-.5)*25:
dawn.cy+Math.sin(angle)*dawn.radius,
vx:dark?(small?65+Math.random()*245:
14+Math.random()*154):
Math.cos(angle)*(20+Math.random()*88),
vy:dark?-(small?12+Math.random()*190:
32+Math.random()*171):
Math.sin(angle)*(20+Math.random()*60)-33,
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
const dawn=dark?null:dawnGeometry(progress,w,h);
const dawnPoint=(angle,offset=0)=>({
x:dawn.cx+(dawn.radius+offset)*Math.cos(angle),
y:dawn.cy+(dawn.radius+offset)*Math.sin(angle)
});
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
const direction=dark?1:-1;
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const angle=i/bands*Math.PI*2+.12;
const place=dawn?dawnPoint(angle,98+32*Math.sin(seconds+i)):
null;
const y=dawn?place.y:baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=dawn?place.x:edgeAt(y,seconds,progress,w)+direction*
(76+rand(i*19+6)*260)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(dark&&(y< -230||y>h+230))continue;
const angle=item.seed*Math.PI*2+item.bend*.25;
const place=dawn?dawnPoint(angle,40+age*145):null;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=dawn?place.x:frontier+direction*(age*225+
30*Math.sin(age*6.3+item.bend));
const particleY=dawn?place.y-age*28:y;
if(particleY< -230||particleY>h+230)continue;
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,particleY);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const place=dawnPoint(n*Math.PI+.7,42);
const yy=place.y+Math.sin(seconds*.8+n*2)*30;
const xx=place.x;
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}
ctx.save();
ctx.beginPath();
if(dark){
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
}else{
for(let i=0;i<=96;i++){
const a=i/96*Math.PI*2;
const flutter=Math.sin(Math.PI*progress)*(
3.4*Math.sin(a*7+seconds*1.8)+
1.8*Math.sin(a*15-seconds*2.3));
const r=Math.max(0,dawn.radius+flutter);
const x=dawn.cx+Math.cos(a)*r;
const y=dawn.cy+Math.sin(a)*r;
if(!i)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.closePath();
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=22;ctx.shadowColor='#bcefff';ctx.shadowBlur=16;
ctx.stroke();
ctx.strokeStyle='rgba(173,234,255,.54)';
ctx.lineWidth=9;ctx.shadowColor='#d2faff';ctx.shadowBlur=10;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.78)';
ctx.lineWidth=2.4;ctx.shadowBlur=3;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}
let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
const schedule=()=>{
if(typeof requestIdleCallback==='function')
requestIdleCallback(step,{timeout:70});
else setTimeout(step,24);
};
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
schedule();
}
setTimeout(schedule,40);
});
return atmosphereWarmPromise;
}
let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}
function clipDawnFrame(t){
const {radius}=dawnGeometry(t);
const near=Math.max(0,radius-2).toFixed(1);
const far=(radius+2).toFixed(1);
const mask='radial-gradient(circle at 50% 47%, transparent '+
near+'px, #000 '+far+'px)';
const darkLens=document.getElementById('kkpt-beat-scene');
if(darkLens){
darkLens.style.maskImage=mask;
darkLens.style.webkitMaskImage=mask;
}
if(basePage==='Kuronata'){
frame.style.clipPath='circle('+radius.toFixed(1)+'px at 50% 47%)';
return;
}
frame.style.clipPath='inset(0)';
frame.style.maskImage=mask;
frame.style.webkitMaskImage=mask;
}
function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}
const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=dark?makeEdge(t,seconds,true,w):
y=>{
const dawn=dawnGeometry(t,w,h);
const dy=y-dawn.cy;
const reach=Math.sqrt(Math.max(0,dawn.radius*dawn.radius-dy*dy));
return dawn.cx+Math.cos(y*.018+seconds*.35)*reach;
};
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
if(dark)clipFrame(edge);
else clipDawnFrame(t);
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
drawAtmosphere(seconds,dark?Math.min(t,.925):t,
dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}
function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.maskImage='none';
frame.style.webkitMaskImage='none';
frame.style.visibility='visible'; // hidden solely by clip-path
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
root.classList.toggle('kkpt-iframe-owns-viewport',active);
const articleShell=document.querySelector('.citizen-page-container');
if(articleShell)articleShell.inert=active;
if(active)frame.focus({preventScroll:true});
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}
async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
const targetPage=nextActive?otherPage:basePage;
let score=returnScore?.config?.target===targetPage?
returnScore:null;
if(!loading)warmFrame();
let framePrepared=false;
const preparation=Promise.all([
loading,
score?prewarmAtmosphere():
Promise.race([prewarmAtmosphere(),sleep(160)])
]).then(([isReady])=>{framePrepared=Boolean(isReady);});
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
const onCue=started ? await Promise.all([
preparation,awaitScoreTime(score,score.config.fireStart)
]).then(([,hit])=>hit) : false;
if(!onCue){
await preparation;
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
} else await preparation;
if(!framePrepared){
removeScoreOmen();releaseFatePrelude();
saveReturnScoreHandoff(score);
navigateRealPage(nextActive?otherUrl.href:baseUrl);
return;
}
if(score&&score.audio.currentTime>score.config.fireStart+.35){
try{score.audio.currentTime=score.config.fireStart;}catch(_){}
}
removeScoreOmen();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;
const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
const curtainFinished=new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));
requestAnimationFrame(releaseFatePrelude);
await curtainFinished;
setDisplayed(nextActive);
commitVirtualWorld(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
frame.classList.remove('kkpt-animating');
button.classList.remove('kkpt-busy','kkpt-quiet');
}
function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
animating=true;
(loading||warmFrame()).then(ok=>{
if(!ok){
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive?otherUrl.href:baseUrl);
return;
}
setDisplayed(nextActive);
commitVirtualWorld(nextActive);
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(returnScore?.config?.id==='marenoia'
?returnScore:null);
}else{
kuronataAftermath?.fadeToDawn();
}
}).finally(()=>{animating=false;});
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V45:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}
function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuranoka')createCloudbreakAfterglow(true);
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
const aftermath=mountKuronataAftermath(returnScore);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();
button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(destination());
primeSound();
requestSwap(!active);
});
}
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') {
watchPortalLinks(document, otherPage);
mountFateGear(document, otherPage);
}
});
function syncWorldFromHistory(){
if(animating)return;
const page=pathPage();
if(page!==basePage&&page!==otherPage)return;
const wantOther=page===otherPage;
if(wantOther&&!ready){
(loading||warmFrame()).then(ok=>{
if(ok&&pathPage()===otherPage)setDisplayed(true);
else if(!ok)navigateRealPage(location.href);
});
return;
}
if(wantOther===active)return;
setDisplayed(wantOther);
if(page==='Kuronata'){
const after=mountKuronataAftermath(
returnScore?.config?.id==='marenoia'?returnScore:null);
after.layer.classList.add('kkpt-beat-resumed');
}else{
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
}
window.addEventListener('popstate',syncWorldFromHistory);
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-cloudbreak')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(pathPage()===otherPage);
frame.classList.remove('kkpt-animating');
}
if(pathPage()==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered){
const aftermath=mountKuronataAftermath(
returnScore?.config?.id==='marenoia'?returnScore:null);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T16:01:24Z

KK：

:root { --kkpt-css-v45: ready; }
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 1350ms cubic-bezier(.13,.64,.27,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:390px;height:390px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 10px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 2.4s ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:1.0px;
opacity:.52;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-major {
stroke-width:2px;
opacity:.85;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-outer {
stroke-width:1.6px;
stroke-dasharray:91 6 3 6;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-trace {
stroke-width:.75px;
opacity:.72;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-needle {
stroke-width:1.45px;
opacity:.77;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.28px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-core-orbit {
stroke-width:1.5px;
opacity:.79;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-inner-orbit {
stroke-width:.85px;
stroke-dasharray:14 7;
opacity:.65;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-axis {
stroke-width:1.4px;
opacity:.63;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-mark {
stroke:#ffc0c9;
stroke-width:2px;
fill:rgba(103,0,32,.11);
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-cut {
stroke:#f35b77;
stroke-width:1.2px;
fill:rgba(27,0,10,.45);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-light-mark {
stroke:#fff4cc;
stroke-width:1.8px;
fill:rgba(255,244,205,.08);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:rgba(255,246,211,.70);
stroke:#ffffff;
stroke-width:1.2px;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:.22;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:.22;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
16%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:.11;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:.15;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:.91;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}
#kkpt-beat-scene {
--kkpt-beat-dark:.67;
--kkpt-beat-blur:.15px;
--kkpt-beat-glitch:.10;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-scars:.04;
position:fixed !important;
inset:0 !important;
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
#kkpt-beat-scene.kkpt-beat-resumed {
animation:none !important;
opacity:1;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-15%;
background:radial-gradient(ellipse at 50% 47%,transparent 16%,
rgba(12,0,8,.26) 39%,rgba(3,0,5,.71) 70%,
rgba(0,0,2,.99) 100%);
opacity:var(--kkpt-beat-dark);
will-change:opacity;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.012);
backdrop-filter:blur(2px) contrast(1.035);
-webkit-backdrop-filter:blur(2px) contrast(1.035);
opacity:calc(var(--kkpt-beat-glitch) * .53);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:radial-gradient(ellipse at 50% 130%,
transparent 32%,rgba(94,1,24,.24) 70%,rgba(31,0,9,.58) 100%),
linear-gradient(94deg,rgba(180,5,37,.55),transparent 17%,
transparent 82%,rgba(71,0,16,.72));
mix-blend-mode:multiply;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(159deg,
transparent 0 33px,rgba(61,0,20,.44) 35px,
rgba(8,0,9,.56) 36px,transparent 39px 74px);
clip-path:polygon(0 10%,23% 9%,31% 17%,43% 11%,58% 15%,
72% 10%,100% 16%,100% 18%,70% 12%,56% 18%,42% 14%,
31% 20%,20% 11%,0 13%,0 70%,18% 67%,36% 76%,
49% 69%,65% 79%,86% 72%,100% 77%,100% 80%,
86% 75%,65% 82%,49% 72%,36% 79%,18% 70%,0 73%);
}
#kkpt-beat-scene .kkpt-beat-slices {
position:absolute;
inset:-3% -4%;
pointer-events:none;
opacity:calc(var(--kkpt-beat-glitch) * .83);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:
repeating-linear-gradient(0deg,transparent 0 55px,
rgba(255,9,66,.14) 56px 58px,
rgba(0,0,0,.60) 60px 62px,transparent 63px 101px),
linear-gradient(95deg,transparent 14%,rgba(255,22,66,.11) 20%,
transparent 26% 74%,rgba(14,0,6,.47) 84%,transparent 92%);
mix-blend-mode:screen;
filter:contrast(1.35);
will-change:opacity,transform;
}
#kkpt-beat-scene.kkpt-beat-stutter .kkpt-beat-slices {
animation:kkpt-red-digital-tear 180ms steps(1,end) infinite;
}
@keyframes kkpt-red-digital-tear {
0%,100% {clip-path:inset(11% 0 74% 0);transform:translate3d(-13px,0,0)}
24% {clip-path:inset(35% 0 43% 0);transform:translate3d(17px,0,0)}
52% {clip-path:inset(62% 0 20% 0);transform:translate3d(-7px,0,0)}
77% {clip-path:inset(5% 0 18% 0);transform:translate3d(11px,0,0)}
}
#kkpt-beat-scene .kkpt-beat-scars {
position:absolute;
inset:0;
pointer-events:none;
width:100%;
height:100%;
opacity:var(--kkpt-beat-scars);
transform:translate3d(var(--kkpt-beat-shear),0,0);
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-scars path {
fill:none;
stroke:#be1839;
stroke-width:1.7px;
stroke-linejoin:bevel;
stroke-dasharray:84 11 21 36;
filter:drop-shadow(0 0 8px #8c001d);
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(2) {
stroke:#23000e;
stroke-width:5px;
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(3) {
stroke:#ed3354;
stroke-width:1px;
}
#kkpt-beat-scene.kkpt-beat-outro {
opacity:0 !important;
transition:opacity 2150ms cubic-bezier(.12,.54,.22,1);
}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture,
#kkpt-beat-scene .kkpt-beat-slices {animation:none !important}
}
#kkpt-cloudbreak {
position:fixed !important;
inset:0 !important;
z-index:2147482160 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
isolation:isolate;
}
#kkpt-cloudbreak > i {
display:block;
position:absolute;
inset:-12%;
pointer-events:none;
will-change:opacity,transform;
}
#kkpt-cloudbreak .kkpt-dawn-dark-rim {
background:radial-gradient(ellipse at 50% 47%,
transparent 20%,rgba(5,0,9,.28) 47%,
rgba(2,0,6,.81) 86%,rgba(0,0,2,.94) 100%);
animation:kkpt-dawn-dissolve 6900ms
cubic-bezier(.15,.46,.25,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-bright-rim {
background:
radial-gradient(ellipse at 50% 48%,transparent 19%,
rgba(226,246,255,.13) 46%,rgba(247,253,255,.68) 82%,
rgba(255,255,250,.88) 100%),
radial-gradient(ellipse at 45% 105%,transparent 12%,
rgba(221,245,255,.23) 62%,rgba(255,251,222,.54) 100%);
mix-blend-mode:screen;
animation:kkpt-dawn-bloom 6900ms
cubic-bezier(.12,.54,.23,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-cloud-sweep {
inset:-24% -12%;
background:
radial-gradient(ellipse at 16% 90%,rgba(251,253,255,.68),
rgba(238,248,255,.20) 35%,transparent 59%),
radial-gradient(ellipse at 83% 100%,rgba(250,253,255,.71),
rgba(241,247,255,.23) 32%,transparent 62%),
radial-gradient(ellipse at 50% 119%,rgba(255,250,222,.29),
transparent 70%);
animation:kkpt-dawn-rise 6900ms
cubic-bezier(.16,.56,.24,1) var(--kkpt-dawn-delay,0ms) both;
}
@keyframes kkpt-dawn-dissolve {
0%,11%{opacity:.77}
32%{opacity:.49}
52%{opacity:.03}
100%{opacity:0}
}
@keyframes kkpt-dawn-bloom {
0%,17%{opacity:0}
30%{opacity:.23}
48%{opacity:.86}
66%{opacity:.60}
83%{opacity:.18}
100%{opacity:0}
}
@keyframes kkpt-dawn-rise {
0%,22%{opacity:0;transform:translate3d(0,9%,0) scale(1.02)}
44%{opacity:.28}
64%{opacity:.66;transform:translate3d(0,-2%,0) scale(1.04)}
100%{opacity:0;transform:translate3d(0,-12%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){#kkpt-cloudbreak{display:none !important}}
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-field {
position:absolute;
inset:0;
pointer-events:none;
will-change:clip-path;
}
#kkpt-rebirth-visual .kkpt-rebirth-aperture {
position:absolute;
top:47%;left:50%;
width:1040px;height:1040px;
border:2px solid rgba(247,254,255,.73);
border-radius:50%;
background:radial-gradient(circle,
transparent 71%,rgba(198,240,255,.04) 89%,
rgba(247,254,255,.12) 98%,transparent 100%);
box-shadow:0 0 25px rgba(228,250,255,.51),
0 0 58px rgba(141,212,255,.17),
inset 0 0 32px rgba(234,254,255,.21);
transform:translate(-50%,-50%) scale(0);
transform-origin:center;
opacity:0;
will-change:transform,opacity;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}
#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}
#kkpt-toggle[hidden] {display:none !important}
#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}
#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}
#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}
body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
html.kkpt-iframe-owns-viewport {overflow:hidden !important}
#kkpt-preview.kkpt-active:not(.kkpt-animating) {will-change:auto}
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}
.kkpt-fate-gear[hidden] {display:none !important}
body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}
.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}
.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}
.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}
body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}
@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}
@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}
html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}
body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}
@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
flex: none !important;
line-height: 1 !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
float: none !important;
vertical-align: baseline !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}

Kuranoka

2026-10-24T13:51:31Z

KK：

{{Background
|背景=积雨云1.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}{{Infobox character
|姓名=天野彼方
|别名=Kuranoka，krnk，knt、kk
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=异瞳（左蓝右红。会随心情变化）
|原文名=天野彼方（曾用名天野奏多）
|发色=白色
|原文语言=若叶语（日语）
|栏目颜色=#D0E7F7
|标题颜色=#A2DBF5
|代表色={{color|#C2F3F6|#C2F3F6}}
|活动范围=常驻虹色，喜欢前旅游，喜欢追风
|用户名=Kuranoka
|血型=AB 型
|星座=摩羯座
|性格=真诚、活跃、日常外向、责任感强、适应力强、情绪化、重感情、容易内耗、压力、不愿承认自己脆弱、{{黑幕|失控后会很吓人ovo}}

|图像=
[[文件:Kuranoka在凯特国内社交媒体的头像.png|260px|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头<br>像|class=pageimage]]<br> Kuranoka在社交媒体的头像<ref>Kuranoka很喜欢拿自己的半成品画作当作头像</ref><br>[[文件:Kuranokanata Logo 1.png|260px]]

|签名=Kuranoka签名（纸质，待重制.png
|签名大小=1
|座右铭=どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:异瞳|异瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|猫系]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|风纪委员]]、[[萌娘百科:社团经理人|社团经理人]]、[[萌娘百科:优等生|优等生]]、[[萌娘百科:心理创伤|{{黑幕|心理创伤}}]]、[[萌娘百科:理科少女|理科少女]]、[[萌娘百科:技术宅|技术宅]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|博学]]、[[萌娘百科:好奇|好奇]]、[[萌娘百科:自来熟|自来熟]]、[[萌娘百科:元气|元气]]、[[萌娘百科:可靠|可靠]]、[[萌娘百科:富有正义感|富有正义感]]、[[萌娘百科:护短|护短]]、[[萌娘百科:勇敢|勇敢]]、[[萌娘百科:直率|直率]]、[[萌娘百科:幽默|幽默]]、[[萌娘百科:伪阳角|{{黑幕|伪}}阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|{{黑幕|高攻低防}}]]、[[萌娘百科:情绪化|{{黑幕|情绪化}}]]、[[萌娘百科:暴躁|{{黑幕|暴躁}}]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|{{黑幕|粗口}}]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|{{黑幕|敏感}}]]、[[萌娘百科:病弱|{{黑幕|病弱}}]]、[[萌娘百科:体力差|{{黑幕|体力差}}]]、[[萌娘百科:色盲|{{黑幕|色盲}}]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|{{黑幕|不悯}}]]

|喜欢=水色系、猫、彩虹、强对流、生命力、烟火气
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好=追逐风暴、电子游戏、作曲、编曲、画画、律动之环

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）
|口头禅=
* 無理ｗ（绷不住了！）
* お前、マジですごすぎだろ！（你牛大了！）
* 君のことが好き。（我喜欢你。）
* {{黑幕|なんで……？（为什么……？）}}
|网站=https://mygo.live/
|创作者=Kuranoka
|印象曲=[https://www.bilibili.com/video/BV1SE411e7BV グランドエスケープ]
|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）
|外貌特征=蓝红异瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|主题曲=暂无喵，原稿被KK否了喵
|罗马字=Amano Kanata
|标题文字颜色=#ffffff
|学历=初中
|父母=
* 父亲：天野直人
* 母亲：天野由佳
|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|标签颜色=#CFF3F7
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器=一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。
|附加内容=[[Kuronata|情绪失控]]}}

{{Infobox|title=立绘相关|below={{#tag:tabber|
正式 V1=
[[文件:看，Kuranoka.png|x600px]]<br>Kuranoka 正式版 V1 立绘
{{!}}-{{!}}
线稿 V1=
[[文件:一张没有上色的Kuranoka立绘v1.png|x600px]]<br>Kuranoka 测试版 V1 立绘
{{!}}-{{!}}
早期 V0=
[[文件:Kuranoka V0.png|x360px]]
<br>Kuranoka 神秘 V0 半身
}}

{{Multiple image|border=infobox|total_width=280|perrow=3|image_gap=1|image1=Kuranoka的当前头像.png|image2=Kuranoka的Minecraft皮肤.png}}<br>头像 {{!}} Minecraft皮肤}}'''Kuranoka'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，[[雨川]][[雾桥]]人，现居[[虹色]]。是一名普通的学生。Cumulonimbus组合创始人，运营着网络社区“Cumulus”。

Kuranoka就读于[[虹湾市立第七中学校]]，曾学习成绩优异，常被家长老师称为“优等生”，人缘关系也非常好。自初二第二学期以来，Kuranoka因进入学校后会出现不明原因的躯体症状，初三开始休学在家。她仍在寻找未来的方向，并对当下的自己感到迷茫。<ref name=":0" />

Kuranoka近期情况好转迅速，经常前往机厅游玩[[Ring of Rhythm|律动之环]]。但是仍然会对一些公共场合感到抗拒。<ref name=":0">这一段经历来自于KK的现实生活！</ref>

Kuranoka 本人表示除了必要时候尽量不要使用真实姓名。<ref name=":0" />{{黑幕|Hakari除外}}

除作为Blockland世界观中的虚构人物外，Kuranoka也是其创作者在互联网上使用的公开身份与虚拟形象。<ref>你好我是Kuranoka</ref>

「どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。」 <ref>我不会日语，用的AI翻译（）</ref>

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

== 特征 ==

=== 外貌 ===

* 身高176cm，体重43.5kg，BMI为14.04，外观看上去非常瘦。{{黑幕|末影人<ref>是Minecraft中的一种生物</ref>}}<ref>参考文献：KK的身高为183cm，体重为47kg，BMI为14.03</ref>
* '''发色为白色，有点偏向青蓝色'''。发型为发尾外翘的'''短水母头 + 波波头'''。
*患有极其罕见的[[情依性虹膜变色症]]<ref>虚构内容！</ref>，眼睛颜色会随着情绪与压力变化。平常情况下，左瞳颜色为蓝色，右瞳颜色为红色。双瞳颜色相同时通常代表着彻底的精神崩溃。{{黑幕|怎么一半灵珠一半魔丸啊}}
** 双瞳颜色会变红意味着暴怒、失控、强攻击性。
** 双瞳颜色变蓝意味着绝望、情绪崩溃甚至解离。
* 虹湾校服。由水色（白色与青蓝色相间）的二本线水手服与水色42cm百褶裙组成。{{黑幕|实际上Kuranoka很难买到版型合适的衣服，为了确保腰围合适，Kuranoka穿着的百褶裙会显得比较短。}}
** 喜欢在校服的基础上添加一件白色冲锋衣外套。白色冲锋衣的肩两侧有两条深蓝黑色竖线（立绘V1并未画出）
** 喜欢在裙子下面叠穿一条运动短裤
* 穿衣风格见[[Kuranoka#审美|穿衣风格]]

=== 性格 ===

* 独自面对陌生人可能有些社恐，但是对于熟人或者有熟人在身边就会本性暴露。
* 对于别人的发言非常很在意，喜欢让别人开心。
* 很不擅长道歉，即便这个事真的是自己的错。但是Kuranoka会表达出歉意并且想办法解决事情。
* 喜欢为同学打抱不平。（这也是Kuranoka小学遭到排挤的原因之一）
* 说话比较直接，十分随性。
* 拖延症非常严重，在ddl前狂补内容是常有的事。但是做自己喜欢的事情又常常效率超高。
* 泪点在外看似很高实际上非常低。经常一个人在自己的房间里释放情绪。
* 很容易也很害怕尴尬的情景，经常会开始发癫来摆脱困境（什么）
* 很害怕做错事，做错事后会陷入无休止的自责。会反复纠结自己过去说过的话或做过的事。
* 擅长安慰别人，但是非常不擅长安慰自己。
* 某些时候有重度强迫症，但是在收纳等方面又极度摆烂。
* 大多数时候是理性与感性都在线的，但是情绪出现非常容易极端化。
* 对自己喜欢的事物会突然变得非常话痨（）。
* 十分喜欢与朋友开玩笑，有时会故意说出挑衅性的话语，观察对方的反应。
* '''对待他人通常十分真诚，但并不是一个特别好说话的人。'''她对朋友的包容度很高，但在发现问题时也经常会犀利地指出，有时甚至会给对方带来较大的压力。{{黑幕|某种意义上确实是个压力怪。}}
** 如果意识到自己的言语伤害了朋友，Kuranoka会尝试安慰对方，并努力缓和之前的气氛。
*非常反感仗势欺人、虚伪、冷漠、不讲道理以及试图控制他人的行为。
*对自己的作品有很高的要求。完成一件满意的作品时会感到开心，但也经常很快发现其中的不足（然后推翻重来，Kuranoka很急性子，这种特质让Kuranoka的进步很快但是作品完成度不高并且缺乏后续的经验）。
**愿意向他人展示自己的作品，也会开心地接受别人的赞赏（尽管嘴上可能仍然强调自己技术很差）
**当他人对自己的作品提出尖锐的批评时，Kuranoka很容易开始自我怀疑。尽管如此，相比作品完全无人关注，她仍然更希望得到他人的认真反馈。
*在现实生活中说话通常较为理性，但在情绪激动时语速会明显加快，有时甚至会因为过于兴奋而说得有些混乱。在网络上，Kuranoka则更喜欢使用各种颜文字、表情符号和网络用语来表达情绪。
*因为曾生活社交断连，非常非常希望朋友能够主动邀请自己外出，也十分珍惜愿意倾听自己烦恼的人。

=== 日常 ===

* 喜欢一天中的每一刻！
* 出门绝对不能忘记带纸和水（）还喜欢随身携带[[龙碧]]。（好喝，{{黑幕|而且可以缓解躯体化的恶心，头晕等症状}}）
* 因为自己很喜欢拖延与不太注意收纳导致房间十分凌乱。
* 自休学后喜欢经常熬夜。但是仍可以保持足够的睡眠时间。经常1:30睡觉9:30醒来。
* 走路速度很快，但经常因为发现一些特殊的事物而突然停下来拍照。
* 猫猫，嘿嘿嘿嘿，猫猫—— 非常喜欢猫。
* 不敢在全黑的时候睡觉，睡觉的时候必须留一盏灯。
* 房间里的东西很多，摆放得比较杂乱。
* 家里面放了很多抱枕与毛绒玩具。
* 非常关注天气状况，经常会打开雷达图，卫星云图频繁查看。她也关注全球各地所有的天气状况。
* 有随手拍照的习惯。走在路上常常停下来拍摄神秘的东西。

=== 健康 ===

* BMI长期非常低，在14.00上下浮动，可能存在营养不良（无医学诊断）。
* Kuranoka存在先天性 protan 型色觉异常，视锥细胞对红色与绿色的感知较弱。表现为难以区分浅紫色/浅蓝色，咖啡色/深绿色等。
* Kuranoka 的躯体化与惊恐症状非常严重。发作条件包括但不限于独自出行、在室外进食、在室外饥饿（这让现在的Kuranoka只能算好时间调整进程......）等。Kuranoka因此感到痛苦。
* {{黑幕|因为Kuranoka在童年时期多次经历父母醉酒的情况，她存在非常严重的[https://zh.wikipedia.org/wiki/%E5%91%95%E5%90%90%E6%81%90%E6%83%A7%E7%97%87 Emetophobia]<ref>{{黑幕|■■恐惧症（英语：Emetophobia）是一种与■■有关的恐惧症，它可以导致压倒一切的、强烈的焦虑。 ■■恐惧症者感到焦虑的原因有很多，包括惧怕自身在公共场合■■，惧怕看到■■物、■■动作、■■的景象，惧怕听到■■的声音，惧怕感到恶心反胃和惧怕被恶心等等。由于严格的节食和自我约束，■■恐惧症者常常体重过轻，甚至一部分人患有厌食症。当觉察到自己或周遭的人有反胃、■■的可能性，■■恐惧症者可能会出现反常甚至极端的行为，比如难以抑制的尖叫、哭泣、逃跑，严重时甚至会昏倒，以逃避他们感知到的■■威胁，甚至只是潜在的威胁。}}</ref>以至严重影响了Kuranoka的生活，这间接的导致Kuranoka体重非常轻并且回避进食。在面对相关情景时会发生严重的惊恐（包括躯体化发作）。<ref name=":0" />}}
** {{黑幕|当遇到与这一恐惧有关的情境时，Kuranoka可能出现强烈的焦虑与惊恐反应，有时甚至伴随明显的躯体化症状。}}
** 也许因此，Kuranoka的肠胃很脆弱。在学校常常因为相关问题请假。

==== 心理健康 ====
Kuranoka曾在虹色市立精神医疗中心被诊断患有以下精神障碍

* 广泛性焦虑障碍（ICD-11：6B00）

* 特定恐惧症（ICD-11：6B03）

* 间歇性暴怒障碍（ICD-11：6C73）

=== 反感 ===

* 攻击性谩骂，对于亲人与朋友的诅咒。Kuranoka对于这是完全无法忍受的。曾因为班上的男同学开Kuranoka家人的玩笑而将对方打到住院。
* 很反感跳脸，比如在自己的作品下刷别人的内容。
* 不希望自己的创意，内容被偷走。Kuranoka希望引起更多的共鸣，但是不希望自己的作品被当作别人的成果。

== 喜好 ==

=== 审美 ===

* [[萌娘百科:水色界隈|水色系]]。
* 喜欢白色＋浅蓝＋薄荷绿。
* 喜欢硬派音乐，最喜欢的曲风为Euphoric Hardstyle，因为这种曲风的情绪张力通常来说非常强。听歌风格偏向猫系电音（即现实世界中的“日本同人电音”）、硬派音乐与一些相对极端的曲风（如Speedcore）。情绪摇滚、流行朋克也是Kuranoka非常喜欢的曲风。<ref name=":0" />
** 喜欢旋律突出，随后经过情绪积累（Buildup），在 Drop 中猛烈释放的过程。

==== 穿搭 ====
* 在外喜欢穿比自己大好几号的宽松的衣服，常穿运动外套/卫衣搭配短百褶裙。（虹色室内空调开的很猛）在室外常穿T恤+短百褶裙，因为怕热喜欢光腿。
** 短裙下面通常会叠穿运动短裤。
* 不喜欢紧身衣和牛仔裤。
* 喜欢宽松衣物被风吹动的动态感觉。
* 很少穿戴饰品。
* 偶尔会穿戴袖套。常穿白色短袜+运动鞋。
[[文件:Rotating Thunderstorm Updraft.jpg|缩略图|253x253px|超级单体风暴]]
[[文件:莫纳科街景1.png|缩略图|226x226像素|莫纳科]]
[[文件:1 rocinha night 2014 panorama.jpg|缩略图|226x226像素|罗西尼亚（里约热内卢，巴西）]]

=== 环境 ===
* 非常喜欢甚至盼望强对流天气发生。（并非盼灾）并且很期待风雨过后的彩虹。
** 喜欢拍摄云体和雷电，并通过气象站数据观察降水，极端大风等气象要素。黑云压城的氛围与剧烈的大雨本身也会令Kuranoka感到兴奋。
* 特别喜欢天空即将发生剧烈变化的时刻。（如超级单体风暴，弧积云，或者锋面强降雪）
* 非常期待风雨过后的彩虹。暴风雨过后的蓝天与夏日午后充满积云的天空伴随蝉鸣经常令Kuranoka产生怀旧感。
* 雨前的泥土味。
* 讨厌持续的锋面阴雨天。喜欢雪。（可惜虹色没有降雪记录）
* 喜欢充满橘子皮香味的空气。
* 不喜欢过度安静、有秩序的环境
* 喜欢现代化错综复杂的，贫富差距大的极具割裂感的地方。如[[莫纳科]]。
** 对废弃建筑与老旧工业区没有特别的兴趣。相比已经失去活力的空间，Kuranoka更喜欢正在运转、充满人类活动的城市。（但是Kuranoka在游戏中很喜欢探索这种有生活痕迹的区域）
** 非常喜欢探索陌生的城市。进入陌生城市时，Kuranoka通常会先关注建筑与当地人的日常生活。比起事先规划路线，更喜欢没有明确目的地地闲逛，想到哪里便打开导航前往哪里。（虽然容易迷路）
* 很害怕人多的环境与被众多人注视。所以很害怕在室外发病。这也是Kuranoka有接近一年时间没有出过家门的原因。
** 尽管如此，Kuranoka实际上非常喜欢和朋友们一起外出游玩。经常出现明明很期待出门，却在临近出门时感到恐惧的情况。
* 喜欢「生活即将失控」的感觉。（如超强台风前夕）
* 喜欢前往具有烟火气的地方，甚至有些极端（如贫民窟）。
* 讨厌尖锐的声音。
* 讨厌过于严肃的场合。
* 很喜欢探索未知的环境，但喜欢的同时也很害怕。
* 宜居气温范围为16~24℃。Kuranoka非常不耐热，同时很耐寒。{{黑幕|曾经在10℃的情况下露腿穿夏季校服震惊全班同学。也曾经在30℃的情况下中暑再次震惊全班同学}}
* 很喜欢风吹过身体的感觉。
[[文件:Champi 2026-10-20 1300Z.png|缩略图|236x236像素|台风墙皮]]

=== 兴趣 ===

* 是气象爱好者，关注所在地乃至世界各地的天气事件。尤其期待强对流天气与台风天气。
** 在有热带气旋活跃时会查看云图，分析强度，在社群中高度活跃（虽然理论知识并不是很坚固）
** 在有大范围强对流天气活跃时（如龙卷风爆发）也会关注。
** 希望能主动去[[龙卷风走廊]]追逐一次龙卷风爆发。
* 喜欢画画。虽然技术始终停留在初学者水平，但是她认为能通过画画表达出自己想象中的东西是一种很好的感觉！
* 喜欢编曲。Kuranoka很喜欢听深海气压（曲风也许类似地球上的Nanatsukaze）与Novastar（曲风也许类似地球上的*Luna）的音乐。因为这两个人，Kuranoka也想通过音乐来实现自我表达。
* 运动方面喜欢足球与羽毛球。即使自己菜的没边。曾参加过学校的足球选修课（然后被其他同学虐成区）
* 喜欢摄影，会随身携带相机记录日常的一些“美好事物”。（相册中有包括但不限于垃圾桶特写，消防栓特写，甚至野外出现的马桶等神秘内容）
* 喜欢玩沙盒游戏与开放世界游戏，以及音乐游戏。
*Kuranoka非常喜欢烟火大会、音乐节、漫展以及学校文化祭等热闹的活动。
[[文件:Okra (Abelmoschus esculentus) in a Bowl.jpg|缩略图|218x218px|'''秋葵'''（学名：''Abelmoschus esculentus''），一种锦葵科、秋葵属的一年或多年生草本植物。]]

=== 饮食 ===

* 最喜欢的水果是西瓜，最讨厌的水果是牛油果。很喜欢西瓜汁与柠檬水。（西瓜+椰奶+椰果太好喝了你知道吗？）
* 最喜欢的蔬菜是秋葵，最讨厌的蔬菜是茄子（极度厌恶{{黑幕|因为极度讨厌茄子，曾经吃茄子吃到OTTO过（）}}）
* 最喜欢的肉类是牛肉，什么肉都喜欢吃。
* 无法接受辣味。
* 喜欢喝[[龙碧]]这种碳酸饮料。
[[文件:邪恶QQ肠.gif|缩略图|海狮]]

=== 其他 ===

* 最喜欢的动物是海狮。也很喜欢猫和水豚。
* Kuranoka喜欢的创作作品通常具有非常强烈的情绪感染力。无论是绘画还是音乐，她都希望作品能够传达情绪、讲述故事，同时也注重作品本身是否足够好听或好看。
*Kuranoka十分向往前往[[莫纳科]]旅行，也希望未来有机会在[[大田地城]]、[[奥多拉]]或莫纳科等城市生活。

== 生活 ==

=== 初中生活 ===
Kuranoka就读于虹湾市立第七中学校，曾在初一10班，初二9班，初三3班。复学后的班级为初三2班。<ref name=":0" /><ref>虹湾七中采用走班制度</ref>

初中时期的Kuranoka学习成绩位于年级前列（常年在前十名）{{黑幕|然而，成绩好不代表上学就一定快乐。}}。擅长的科目是数学、纳语（英语）、物理、地理。不擅长的科目是若叶语（日语）、体育、政治（是的，凯特有政治科目，分为时政与理论），Kuranoka尤不擅长政治理论{{黑幕|常常选择题满分，大题个位数分数}}。Kuranoka反感所有需要背诵才能拿到高分的科目。

最喜欢的科目是地理。在自然地理与人文地理方面都能与其他同学拉开差距。虽然没有学过但是对高中的自然地理部分已了如指掌。

最讨厌的科目是体育。Kuranoka的体育成绩非常差。此外Kuranoka是虹湾七中建校以来唯一一个BMI分数拿到0分的。Kuranoka体育方面爆发力尚可及格，耐力与体力非常差。尤其讨厌长跑（即便Kuranoka的体型被同学称为先天长跑圣体）。（跑完常常会导致恶心与超高心率，可能会让Kuranoka的惊恐发作）

曾在初一初二担任“风纪委员”，因为其管理良好而广受同学与老师喜爱。Kuranoka管的很松而且因为比较人性化，并且Kuranoka会勇于在同学被不合理对待时直面权威，这让Kuranoka在同学中的声望很高。Kuranoka的班主任也很通人性，甚至曾与Kuranoka一起对抗年纪政策。

开展过气象相关社团活动，每周四会为社团内成员讲解气象知识，有时也会与其他气爱一同外出进行追风活动。{{黑幕|虽然只是在虹色境内，没出过远门}}Kuranoka通过社团认识了很多朋友。在Kuranoka升入初三后，气象社随即进入冻结。Kuranoka现在是校内音游社的成员，占0.5个名额。{{黑幕|没错，是0.5个人。}}Kuranoka的音游能力也在级部的音游玩家中位于前列。

擅长结交朋友与组织活动。常常会带动班级气氛。同时Kuranoka比较反感“读不懂空气”的人。

经常开导班级中想不开的同学，会倾听朋友们诉说自己的烦恼。

Kuranoka不能接受不公平事件的发生，常常在弱者受到欺负、凌辱时站出来保护弱者。（即便她经常因为这个特质被一些人盯上）

Kuranoka虽然可以给自己的朋友们提供许多情绪帮助，但是Kuranoka很不擅长处理自己的情绪。因其高敏感的特征，她的情绪波动非常大，可能会在同学面前突然爆发。（曾与同学打架投掷课桌与椅子，曾在若叶语课上与老师吵架后掀桌摔门而去）（详见[[Kuranoka#情绪管理|情绪管理]]）

{{黑幕|虽然Kuranoka看似阳光，但长期积累的压力与身心状态的变化，最终还是对她的的正常学习和生活造成了严重影响。}}

=== 高中生活 ===
我还没上呢。

=== 情绪管理 ===
Kuranoka的情绪管理在生活中是一大问题（所以单独一个板块介绍）。尽管她在日常生活中很像一个正常人，但是她的高敏感特质非常明显，情绪失控后会非常过激（有些危险）。

{{黑幕|详见[[Kuronata]]}}
=== 家庭 ===
Kuranoka的现住址为[https://blkl.fun/map/#map=16.5/-7.85054/14.03490 凯特共和国虹夏州虹色市虹湾霞山北通り114番地 701室（14.034902°E, -7.850549°S）][[文件:FBS Residence 虹色.png|缩略图|220x220px|FBS Residence 虹色]]

父亲从事教育行业，在虹色具有一定的社会声望，也认识很多当地的知名人物，对待朋友真诚可靠。父亲教育彼方尤其注重学业成绩、纪律以及个人责任。他对Kuranoka抱有较高的期望，也习惯于按照自己的教育理念要求她。随着彼方的身心状态逐渐恶化，在自己的校园生活受到影响后直人却始终无法理解，认为彼方是「不想上学」「逃避现实」，还曾提出要“禁止使用电子设备”，“每天跟着自己去海岸山间体验农村生活”等。就这些事彼方与直人发生过很多矛盾。彼方十分重视父亲对自己的评价却也对父亲的处事方式感到严重不满，但Kuranoka不敢提出因为担心再次重演小时候的暴力事件。但近年来，经过彼方母亲的劝说以来，直人逐渐意识到了自身教育方式中存在的问题，直人已经意识到了自己存在问题也做出了改变，这也让彼方卸下了一些防备，但因为童年时期的创伤过于严重，彼方与父亲仍然存在较为严重的隔阂。

母亲是自由职业者，小时候比较叛逆，所以可以理解彼方的一些行为。她比较重视成绩与彼方的未来生活（有些过度了），这让彼方有些焦虑，即便她对自己的未来很自信。她也是彼方在艰难时期的依靠，由于彼方难以直接向父亲表达自己的想法与感受，她经常选择先向母亲倾诉，再由母亲转告给父亲。彼方的母亲起初身心状态逐渐恶化时也无法理解彼方的身体不适，也曾怀疑是否在逃避现实。但彼方的母亲很快就意识到彼方的痛苦所在。在艰难时期，她始终一直在家陪伴着彼方。

Kuranoka的家庭经济状况总体较为稳定，虽然不算富裕但是足以支持Kuranoka在自己热爱的东西上投入金钱。<ref name=":0" />也足以应对部分突发事件。
[[文件:Kuranoka在凯特国内社交媒体的头像.png|缩略图|210x210像素|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像|class=pageimage]]
=== 网络 ===
Kuranoka在[[Kirakira]]经营账号“Kuranoka”，会发送一些关于电子游戏与音乐的视频，也会在[[Netaflow]]上分享自己的日常。

== 理想 ==
Kuranoka希望未来能够从事气象追踪或科研相关的工作，同时保留充足的自由时间进行艺术创作。她向往拥有清闲、能够自由安排的生活。

Kuranoka希望能够经常前往世界各地旅行，亲身体验不同地区的自然环境，城市面貌与人文气息等。

对于Kuranoka而言，艺术创作也是一种向外界表达自我的方式。她希望通过音乐、绘画等作品，让更多人了解自己的故事。

相比成就与名声，Kuranoka更想让自己能够给更多人留下某种难忘的感受。

'''她渴望与他人、与世界建立真正的联系。'''

{{黑幕|为什么这一段像GPT写的}}[[文件:2013 Rainbow over Washfold.jpg|缩略图|257x257像素|[[彩虹]]是一种光学现象]]

== 轶事 ==

* Kuranoka非常喜欢记录彩虹。此外，虹色的彩虹非常多。

* Kuranoka的数学、纳语（即英语）、物理、化学、地理成绩非常出色，但是政治、历史等文科科目成绩较为不足。Kuranoka曾多次代表虹色七中参加竞赛。<ref name=":0" />

* Kuranoka有一定的Viper与[[Elona]]的编程基础。

* Kuranoka是音乐组合“[[虹外線NIJIGAISEN]]”的主创，担任作曲 / 编曲 / DJ 等植物。
** Kuranoka 虽然担任编曲职务，但是因为没有学过乐理，写出来的屎山实在离谱，因此经常被其他成员吐槽“这东西根本不是给人弹的”。<ref name=":0" />

* Kuranoka的武器是一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。可以通过usb连接到电脑，滑动Ribbon Controller对应MIDI CC 里面 0->127 的值。
* Kuranoka非常讨厌虫子{{黑幕|尤其是“区”，曾因处理垃圾时发生意外导致垃圾桶内滋生的“区”散落一地，Kuranoka当时面对散落的区彻底崩溃所以留下了严重的心理阴影😡😡😡}}<ref name=":0" />
* Kuranoka可以All Perfect [[Atmosphere（音游）|Atmosphere]] 中的 14 ~ 15 级曲目。<ref name=":0" />
* Kuranoka希望自己可以考上[[奥多拉州立大学]]（OSU）或者[[虹色大学]]（NJU），虽然看起来遥不可及。
* 是[[咲本可奈枝|Hakari]]的幼驯染。

== 关系 ==

=== 家人 ===

==== 天野直人（父） ====
天野直人是天野彼方的父亲，是一位思想保守的，在虹色小有名气的教育家。设计出身。

彼方与直人的关系长期较为紧张。由于过去的家庭矛盾与直人对彼方的暴力行为，方在很长一段时间内对直人表现出惧怕甚至严重躯体化的反应。虽然直人如今已经有所改变，彼方也清楚这一点，但过去的经历仍然使两人之间存在难以逾越的红狗。彼方很难向直人表达自己的真实想法与感受。

==== 天野由佳（母） ====
天野由佳是天野彼方的母亲，是一位自由职业者。

是彼方度过艰难时期的依靠。相比父亲，彼方更愿意向由佳倾诉自己的烦恼与情绪。在彼方与直人发生矛盾时，由佳也时常承担着两人之间的沟通与调解工作。

=== 乐队内同学 ===

==== [[汐入未絵]] ====
汐入未绘是Kuranoka的初中结识的同学。

==== [[咲本可奈枝|Hakari]] ====
Hakari 是 Kuranoka 的[[幼驯染]]，两人因父母是好友（Hakari的父亲是天野由佳的好友）。在Kuranoka 的4~8岁时乃至现在，因家境原因，Hakari 带 Kuranoka 见识到了许多新鲜事物，也让一个默默无闻的，平凡的 Kuranoka 第一次自身的表达与情感。

在 Kuranoka 遭到老师的暴力对待，同学的排挤时，常常会去荧光海岸一带散步，此时Hakari常常会随行陪伴（ Hakari 的家位于荧光海岸駅附近）。Hakari 也曾在 Kuranoka 心情低落时给予很多能量。因此，Hakari 在 Kuranoka 的童年里如同一道光，所以在6岁之后，Kuranoka 常常称可奈枝为“光”。（Hakari 一词是因为 Kuranoka 小时候记错单词，实际上应为 Hikari，但是这一问题等到 Kuranoka 在小学时才被发现。因为改名过于繁琐，Hakari 一词就被沿用至今了。）

在 Kuranoka 12岁时，Hakari 因为要搬家到虹色市南部地区上学不得不与 Kuranoka 分开。在 Hakari 进入新的中学后因郊区出身在高高在上的精英环境中遭到了冷落与排挤（详见 Hakari 个人页面），之后通过 Hakari 与父母协商，升入高中重返虹湾。

==== [[若生柚希]] ====
若生柚希是Kuranoka的初中结识的同学。

==== [[千田萌果]] ====
千田萌果是Kuranoka的初中结识的同学。

== 经历 ==
{{ambox
| type = delete
| image = Ambox warning red.svg
| size = 60px
| title = 视觉刺激与光敏性癫痫警告
| text = 本页面的“经历”章节包含视觉特效，包括剧烈闪烁、色彩反转等异常视觉效果。上述内容可能引发光敏性癫痫患者的不适或发作。建议对闪烁画面敏感的读者跳过该章节。
}}''故事还在继续，会随着现实时间的流逝逐渐被完善——''

【负能量警告】

【施工中，可能随时发生更改】

<div class="mw-collapsible mw-collapsed" data-expandtext="展开经历" data-collapsetext="收起经历">
<div class="mw-collapsible-content">[[文件:凯特共和国雾桥城市天际线！.png|缩略图|211x211像素|雾桥城市天际线]]

=== 童年时期 ===
1937年1月1日，Kuranoka出生于[[凯特共和国]][[雨川州]][[雾桥市]]。

童年的 Kuranoka 并没有太多引人注目的经历。Kuranoka的家境一般，这让Kuranoka没见过什么世面。

4岁时搬家到虹色市虹湾区结识了[[咲本可奈枝]]。

==== 线索 ====

=== 小学时期 ===
Kuranoka的小学时期前期是非常痛苦的。

在童年时期做惯了老实人的Kuranoka到达小学时常因为融合不进集体被孤立。

Kuranoka在读小学时常被学校的老师暴力对待，因为其爱哭的性格也导致了同学的排挤，这也直接导致了后来Kuranoka高敏感，情绪波动非常大的特征，{{黑幕|也让Kuranoka学会了逃避。}}。

因此，Kuranoka对于上学产生了厌恶。

尤其是在二至三年级期间，长期的精神压力使 Kuranoka 一度出现了明显的躯体化反应。然而，当时的 Kuranoka 尚不了解这些症状的成因，家人也未意识到其可能与心理压力有关。

三年级时，Kuranoka 曾随家人前往[[维尔布]]度假，先后到访了[[莫纳科]]与[[海葵]]。

远离了熟悉的校园环境，在陌生城市的街道与热带海滨之间，她终于得以暂时摆脱日常生活中的压抑。

在旅途中的这段日子里，Kuranoka 的身心状态逐渐好转，先前困扰她的症状也逐渐缓解。

直到四年级，Kuranoka 结识了同桌[[白石崎浩]]。对于长期在人际关系中屡屡受挫的 Kuranoka 而言，这段友谊成为了她小学生活中一个重要的转折点。

尽管改变的过程并不顺利，过去的经历也依然影响着她，但 Kuranoka 开始尝试重新认识自己，逐渐意识到自己并非只能活在他人的否定之中。

她决定不再像过去那样消极地度过每一天，而是鼓起勇气，主动去改变自己的生活。

此后，Kuranoka的成绩出现了可观的上涨，到五年级时，Kuranoka 已经成为了班中的中游学生。

但是Kuranoka的若叶语成绩还是不太理想。

Kuranoka曾被语文老师当面否定自己的学习能力与未来，甚至被告知「你就是个废物，没必要学了。你不会有任何成就的」。

这句话对Kuranoka留下了极为深刻的印象。直到今日，她仍然清楚地记得老师当时所说的话。

Kuranoka 在五年级认识了[[万尾静夏]]，静夏也许是Kuranoka小学时最好的朋友，至今仍然保持联系。

在与静夏的接触下，Kuranoka逐渐变得不再内向。

（然而，即便 Kuranoka 已经开始努力改变自己，部分老师对她的偏见仍然没有消失。甚至有老师曾私下劝说静夏远离 Kuranoka。）

在六年级，Kuranoka更是取得了不错的学习成果，即便这对于初中的成就来说不值一提但是仍然是Kuranoka小时候的一大里程碑。

==== 线索 ====

=== 初中时期（一） ===
初中后的Kuranoka逐渐变得外向，在学业，兴趣等方面都取得了不错的成果。

在上初一的第一天，Kuranoka便受到了学校的第一份严重处分，原因是打架。（即便最初是对方的错误，Kuranoka仍然被记了处分。这让Kuranoka的心态发生了一些微妙的转变，她开始变得有些较真，她认为她没有错。）

在这之后Kuranoka虽然短暂的遭受了同学们的议论，但是仍然凭借自身魅力积攒出了自己的好友圈。

初一下半学期Kuranoka开办了自己的社团，开始为学校制作气象相关的科普海报，也结识了[[汐入未絵]]，[[千田萌果]]等好友。

其次，在这一学期Kuranoka也取得了自己上学以来考的最好的成绩。

初一下半学期，因为拆迁，Kuranoka搬家到了虹色市镜花中区。

==== 线索 ====

* 在进入初中的第一天Kuranoka就与班级中的其他成员爆发了相当激烈的冲突，事件起因于[[近间希予]]对Kuranoka的朋友[[秋川千寻]]进行挑衅。而Kuranoka看不下去，随口怼了几句，然后[[近间希予|希予]]便开始辱骂Kuranoka的家人，并且诅咒Kuranoka。在愤怒之下，Kuranoka掀翻了课桌，并开始大声斥骂对方，言辞也变得愈发激烈。随后，近间希予走上前来，Kuranoka拿起雨伞作出防卫姿态，但近间希予直接踢向了Kuranoka的腿部，Kuranoka因为太痛蹲下，面露难色，但是因为对方还在输出忍无可忍的Kuranoka也开始动手，两人扭打在一起。这场冲突恰好被学校校长当场发现，双方随后均受到了纪律处分，由于是入学第一天，学校并未要求两人回家反省，但分别要求两人提交一份1000字的检讨书。{{黑幕|入学第一天就喜提级部第一份处分的来了。不仅是这一个级部的第一份处分而且是Kuranoka人生中的第一份处分。}}

=== 初中时期（二A） ===
初二，Kuranoka开始参与[[Elona]]语言的信息竞赛，即使半年的学习并未获得什么成就，但这让Kuranoka也十分愉悦。也直接的促使了Kuranoka开始喜欢写程序。

Kuranoka非常喜欢初二的班级，在这个学期，她认识了[[若生柚希]]。并且在年级中开始担任一些重要职务。年级中老师们也很重视和看好Kuranoka。

（即便Kuranoka在初二依然非常容易爆炸（））

{{黑幕|但是这会持续下去吗？}}

==== 线索 ====

=== 初中时期（二B） ===

<span id="kk-fx-start" class="kk-fx-marker"></span>

初二下半学期以后，随着她对自己的要求不断提高，学业安排也慢慢紧凑了起来。

她仍然维持着自己优异的学习成绩，还没有意识到自己的压力逐渐的超载。

然而，长期积累的压力似乎已经超出了她所能承受的范围。躯体化的魔爪还是伸向了她。

她开始忍受，独自承担痛苦，但是这让她的身心状态加速恶化。

她很不希望别人看到她脆弱的一面而担心，更不愿让那些曾经相信她、期待她的人感到失望。可是，与此同时，她又无比渴望得到他人的安慰，希望有人能够听她倾诉。

<span id="kk-fx-rift" class="kk-fx-marker"></span>

{{黑幕|在这段时间，Kuranoka的梦想逐渐在这一次又一次的180BPM的心慌中迷失掉，在一阵又一阵撕心裂肺的干呕中破碎掉。}}

在一次又一次的发作下，她与家人的关系也再次紧张起来。（这也是Kuranoka进入暴怒状态与绝望状态最多的一段时期）

<span id="kk-fx-void" class="kk-fx-marker"></span>

她曾经认识很多朋友，经历了很多值得珍稀的时光，也曾对未来的日子充满向往。

{{黑幕|但是现在，在尚未意识到发生了什么时，她已默默的乘上了绝望之舟，然后被抛弃在无人的孤岛。}}

她想要获得帮助，她想要与世界重新建立链接。

'''她崩溃了'''

<center>

{{黑幕|''为什么偏偏是我？''}}

{{黑幕|''我到底做错了什么？''}}

{{黑幕|''明明已经这么努力了，我真的......啊......''}}

{{黑幕|''明明什么都没有做错。''}}

{{黑幕|''我为什么连...连最普通的生活都变得这么困难啊啊...呜呜......''}}

{{黑幕|''我...不想再听见那些期待了。也许我本来就该是个废物啊啊...呜啊......''}}

{{黑幕|''那些美好的都算是死前的幻象对吧....？''}}

{{黑幕|''求求你们不要再说了''}}

{{黑幕|''我已经很努力了啊......呜......''}}

{{黑幕|''为什么你们就是看不到''}}

{{黑幕|''为什么我就是没有变好啊...''}}

{{黑幕|''我真的想在无人在意的角落自杀''}}

{{黑幕|''我讨厌这样的自己''}}

{{黑幕|''拜托了......''}}

{{黑幕|''うああああああああああああああああああああああああああああああああああああ――ッ！！''}}

她仍然记得自己的目标，也尝试去触及。但是她现在已经被折磨到一点力气都没有。

'''她迷茫了。'''

在这段日子中，Kuranoka仍然对天空充满兴趣，她常常在那个囚禁她的房间中看窗外的风起云涌，看可爱的积云一点一点长大，成为无比强大的积雨云后，然后亲自把自己杀死。<ref>积雨云发展到后期下沉气流及冷池外流会切断暖湿入流，上升气流失去维持条件，于是雷暴逐渐消散。</ref>

[[文件:虹色南区雨川.png|360x360px|虹色的积雨云|居中|无框]]

{{黑幕|''（Hakari：Kanata？你还好吗）''}}

</center>

==== 线索 ====

=== 初中时期（三） ===
进入初三后，Kuranoka的身心状况仍然没有明显好转。Kuranoka与他的母亲在虹湾七中附近租了一间房子，距离学校很近。9月期间，她曾尝试偶尔返回学校，同学们见到Kuranoka的回归也很兴奋。当Kuranoka再次走进教室时，汐入未绘几乎是直接冲上前去，一把抱住了她。那些熟悉的面孔，那间熟悉的教室，还有久违的喧闹声。一切似乎都在慢慢回到原来的样子。虽然症状还是没有出现明显的好转。但是Kuranoka基本可以每天在学校停留数个小时了。

但是，好景不长。那股令她无比熟悉、又无比恐惧的感觉再次袭来。

Kuranoka在9月末一天的英语晚自习上试图继续写字，手却开始不受控制地颤抖。原本整齐的笔迹逐渐变得歪斜、扭曲。

{{黑幕|''唉...怎么又...''}}

{{黑幕|''明明已经能够重新坐在教室里了。''}}

{{黑幕|''明明一切才刚刚有了一点起色。''}}

{{黑幕|''可为什么偏偏又是现在？''}}

{{黑幕|''我还可以...''}}

最终，在同桌的劝说下，Kuranoka去主动找老师开了假条。

因为家长外出，Kuranoka只能自己走回家。

离开校门时，Kuranoka与小学时期最好的朋友[[万尾静夏]]擦肩而过。静夏认出了她。但Kuranoka没有注意到静夏。

她看见Kuranoka独自待在绿化带旁，脸色苍白，一边哭泣，一边忍受着一阵又一阵的干呕。{{黑幕|她看到了Kuranoka最不愿让人看到的一面}}

但Kuranoka完全没有注意到静夏的存在。

回到家后，那些刚才还折磨着Kuranoka的症状，却渐渐消失了。

''又是这样。。。''

这已经是Kuranoka第n次躯体化发作，回到家症状快速消失。

因为这件事，Kuranoka与母亲发生了最严重的一次争吵。

在这之后，Kuranoka变得非常抵触学校。

Kuranoka常常孤独的前往海边散步，但是没有人陪她了。她独自走过曾经与Hakari经常走过的荧光海岸，经常走着走着就无声的哭起来。

随着时间推进，Kuranoka逐渐沉迷于网络世界。

10月以后，她开始在家中直播电子游戏，并很快在[[Kirakira]]积累了一批粉丝。电子游戏、音游、网络社群与直播逐渐占据了她的日常生活。

但与家人的争执还在继续。

但是Kuranoka仍然惦记着学校。她主动联系班主任，表示希望这一年继续制作气象科普海报，并拜托班主任帮助在学校展出（投屏）。即使很难亲自走进教室，她也不愿意就这样彻底消失在自己曾经熟悉的校园里。她不甘心。

次年1月1日，Kuranoka过生日了，她的愿望是自己可以好起来。

此后的生活仍然没有发生太大的变化。Kuranoka将大量时间投入音乐游戏、电子游戏与网络社群，长期待在家中，甚至整个夏季都很少外出。

次年4月，随着毕业季逐渐临近，Kuranoka决定为自己所属的年级留下些什么。曾经朝夕相处的同学们，即将走向各自不同的未来。

她冒出了给自己年级的同学们写歌的想法。她想尝试将自己对校园生活的回忆、对同学们的留恋，以及对他们未来的祝福，写进一首歌曲里。

于是她开始学习DAW以及音乐制作相关知识，即便常常因为自己“没天赋”“学得慢”陷入内耗与崩溃，但是她仍然在努力的学习。对Kuranoka而言，这首作品也承载着她未能通过日常校园生活亲自表达的感情。

后来，到了6月，Kuranoka仍然参加了学校组织的毕业照拍摄与毕业典礼。两次活动都伴随着严重的身体不适，但她最终还是完成了这两件事。

在中考前一天晚上，Kuranoka将那份制作尚显稚嫩但倾注了大量心血的毕业赠曲以及最后一份考试期间的天气预报视频一同发送给了班主任。随后，在最后一节班会课，班主任与Kuranoka进行了视频通话。透过屏幕，她再次见到了许久未见的同班同学们。

那些熟悉的面孔，又一次出现在她眼前。

'''在那一刻，Kuranoka终于久违地感受到了与同学们相处时的快乐。'''

随着凯特共和国MNES虹色虹湾初中学力调查（中考）的结束，Kuranoka以一种与自己曾经想象中截然不同的方式，迎来了初中生活的结束{{黑幕|吗？}}。

Kuranoka需要做好准备，她未来面对的是全新的年级，全新的教材与截然不同的老师们......

'''她必须再一次面对这一切。'''

''这一次，又会发生什么呢？''

==== 线索 ====

=== 初中时期（四） ===

'''被困在囚笼中透过玻璃仰望天空的彼方终于走到了天空之下。'''

==== 线索 ====

</div>

=== 虹外线NIJIGAISEN ===
</div>

— 未完待续 —

== 相关作品 ==

== 画廊 ==
在此感谢所有为Kuranoka绘制图片的画师们！！未经允许请勿使用喵！！！擅自使用了我与画师们追责的喵！！！！

* [https://space.bilibili.com/515900536 Kuranoka]{{黑幕|没钱约稿没有画技只能自产的人已急哭www😭😭}}
* 冷酷无情墨少（mhs：[https://www.mihuashi.com/profiles/3296532%EF%BC%89 https://www.mihuashi.com/profiles/3296532）]
<gallery mode="packed" heights="180">
文件:Kuronata 稿件.png|Kuronata形态<ref>画师：冷酷无情墨少（https://www.mihuashi.com/profiles/3296532）</ref>
文件:混乱的草稿，使我的Kuranoka旋转.png|混乱的草稿，使我的Kuranoka旋转
文件:看，Kuranoka.png|立绘V1
文件:Kuranoka的当前头像.png|头像
文件:Kuranoka的Minecraft皮肤.png|Minecraft 皮肤<ref>画师：MCskin定制_猫猫蛋（https://space.bilibili.com/499168487）</ref>
文件:使用Picrew制作的Kuranoka概念图.png|早期版本Picrew捏脸
文件:Kuranoka 曲绘草稿v1.png|废弃草稿
</gallery>

== 注释 ==
<references />{{D|龙}}{{Background|image=积雨云.png}}{{ambox|type=content|image=Padlock.svg|size=65px|title=请！不！要！直！接！抄！袭！Kuranoka！的！特！色！与！锚！点！内！容！！！|text=请不要把我的自设喂给AI。请不要把Kuranoka作为借鉴或模仿对象。请不要在未经许可的状态下创作关于Kuranoka的二创内容。© Kuranoka. All Rights Reserved. 保留所有权利。}}

== 参见 ==

* [[虹色]]
* [[Kuranoka（本人）]]

== 借物表 ==

* Another Me - Neutral Moon（Kuro -> Kura转场）
* MARENOIA - LeaF（Kura -> Kuro转场）
{{Navbox 在积雨云上空相遇}}{{Navbox OC}}

{{角色结构化数据
|名称=Kuranoka
|本名=天野彼方
|英文名=Amano Kanata
|别名=KK
|其他名称=krnk
|简介=Kuranoka（天野彼方，Amano Kanata）是Blockland世界观中的虚构人物，虹湾市立第七中学校的学生、音乐组合「虹外線 NIJIGAISEN」的主创。Kuranoka性格活跃、真诚而敏感，热爱天气与音乐，尤其热衷于追逐风暴。她曾在学业、人际交往与网络方面取得出色的成绩，但也因成长过程中长期积累的身心压力而中断学业，目前仍在探索未来的方向。
|头像=Kuranoka的当前头像.png
|立绘=看，Kuranoka.png
|所属组合=虹外線NIJIGAISEN
}}

Kuronata

2026-10-24T11:08:33Z

KK：

{{Background
|背景=黄昏，黑云.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}
{{Infobox character
|姓名=天野彼方
|别名=クロナタ、Kuronata
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=双红瞳 / 双蓝瞳
|原文名=天野彼方
|发色=白色
|原文语言=若叶语（日语）

|栏目颜色=#C96570
|标题颜色=#8B1829
|标题文字颜色=#FFFFFF
|标签颜色=#EAB5BA
|代表色={{color|#C8102E|#C8102E}}

|活动范围=虹色
|用户名=Kuronata
|血型=AB 型
|星座=摩羯座

|性格={{黑幕|真诚}}、{{黑幕|活跃}}、{{黑幕|日常外向}}、{{黑幕|责任感强}}、{{黑幕|适应力强}}、情绪化、{{黑幕|重感情}}、反复自责、充满压力、内心脆弱、没有尽头的失控...

|图像=
[[文件:Kuronata 稿件.png|260px||class=pageimage]]<br>
Kuronata<br>[[文件:Kuranokanata Logo 2.png|260px]]

|座右铭={{黑幕|どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。}}<br>もう、我慢したくない<br>我不想再忍耐下去了

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|{{黑幕|猫系}}]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|{{黑幕|风纪委员}}]]、[[萌娘百科:社团经理人|{{黑幕|社团经理人}}]]、[[萌娘百科:优等生|{{黑幕|优等生}}]]、[[萌娘百科:心理创伤|心理创伤]]、[[萌娘百科:理科少女|{{黑幕|理科少女}}]]、[[萌娘百科:技术宅|{{黑幕|技术宅}}]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|{{黑幕|博学}}]]、[[萌娘百科:好奇|{{黑幕|好奇}}]]、[[萌娘百科:自来熟|{{黑幕|自来熟}}]]、[[萌娘百科:元气|{{黑幕|元气}}]]、[[萌娘百科:可靠|{{黑幕|可靠}}]]、[[萌娘百科:富有正义感|{{黑幕|富有正义感}}]]、[[萌娘百科:护短|{{黑幕|护短}}]]、[[萌娘百科:勇敢|{{黑幕|勇敢}}]]、[[萌娘百科:直率|{{黑幕|直率}}]]、[[萌娘百科:幽默|{{黑幕|幽默}}]]、[[萌娘百科:伪阳角|伪阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|高攻低防]]、[[萌娘百科:情绪化|情绪化]]、[[萌娘百科:暴躁|暴躁]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|粗口]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|敏感]]、[[萌娘百科:病弱|病弱]]、[[萌娘百科:体力差|体力差]]、[[萌娘百科:色盲|色盲]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|不悯]]

|喜欢={{黑幕|水色系}}、{{黑幕|猫}}、{{黑幕|彩虹}}、强对流、{{黑幕|生命力}}、{{黑幕|烟火气}}
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好={{黑幕|追逐风暴}}、{{黑幕|电子游戏}}、{{黑幕|作曲}}、{{黑幕|编曲}}、{{黑幕|画画}}、{{黑幕|律动之环}}

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）

|口头禅=
* {{黑幕|無理ｗ（绷不住了！）}}
* {{黑幕|お前、マジですごすぎだろ！（你牛大了！）}}
* {{黑幕|君のことが好き。（我喜欢你。）}}
* なんで……？（为什么……？）

|网站=https://mygo.live/
|创作者=Kuranoka

|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）

|外貌特征=双红/蓝瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka（Kuronata）的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|罗马字=Kuronata
|学历=初中

|父母=
* 父亲：天野直人
* 母亲：天野由佳

|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器={{黑幕|我一无所有}}
|背景颜色=#FFF0F0}}

'''Kuronata'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，雨川[[雾桥]]人，现居[[虹色]]。是一名普通的学生{{黑幕|，也是一个自认为无药可救的废物}}。Kuronata是[[Kuranoka]]在长期情绪压抑下所产生的另一种自我表现形态。

Kuronata 往往在情绪或压力积累接近极限时出现。Kuronata不会再像Kuranoka一样刻意维持平静，也不愿再继续隐藏长期以来无人知晓的委屈、愤怒与恐惧。

Kuronata最显著的外貌变化为双眼转为红色/蓝色。

自从初二以来，突然出现的躯体症状与长期积累的心理压力使她的生活逐渐失去控制。那些长期未能得到宣泄的情绪逐渐成为 Kuronata 出现的重要原因。

Kuronata 对自己的命运怀有强烈的不满。她最无法接受的是即使已经竭尽全力，努力成为理想中的自己，仍然无法阻止那些珍视的事物逐渐失去控制离开自己。

「……どうして、こんなことになったんだよ。」

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八位，即「Kuranoka」。

=== Kuronata ===
无意义。

「Kuro」，意为黑。

「nata」，取自「Kurano Kanata」的后四位。{{黑幕|也许这才代表Kuranoka真实的且不为人知的的一面......？}}

== 特征 ==
''Kuronata的大部分特征与[[Kuranoka]]一致''

=== 外貌 ===

* Kuronata 与 Kuranoka 最显著的区别为双眼颜色一致，通常表现为双红瞳或双蓝瞳，分别对应不同的状态。
* {{黑幕|也许Kuronata更喜欢穿低饱和度颜色的衣服？}}
** {{黑幕|Fatal Error}}

=== 性格 ===

* Kuronata 并不是完全镜像的 Kuranoka。在特殊情况下仍可能会保持理智，即便心理防线已经崩塌。
* '''情绪表达非常直接甚至相当极端。''' {{黑幕|相对一般人来说非常激烈的情绪超载}}
** 在红温状态下，言语可能变得尖锐、激烈，伴随明显的怒意，有时甚至会说出平日里不会说有些过分的话甚至做出出格的行为。可能出现音量明显提高、怒吼、颤抖、流泪、言语冲突、心率骤升等表现，严重时还可能出现攻击性行为。
** 在蓝温状态下，Kuronata 则可能变得异常沉默，倾向于否定自己，不愿向外界表达真实感受。通常表现为沉默、回避交流、独自哭泣（虽然他渴望得到理解，但还是很难主动寻求安慰）。在悲伤持续加剧时，也可能出现激烈的哭泣与情绪爆发。
* Kuronata 对自己的评价往往非常消极。她常常认为自己不够好，甚至将许多无法控制的事情归咎于自己。（即便常常与他无关）

== 自我 ==

=== 情绪 ===
Kuronata 通常在 Kuranoka 长期压抑的情绪逐渐逼近极限时出现。Kuranoka 平日里试图维持的平静会逐渐瓦解，积累的不满、委屈、愤怒与恐惧开始直接表现甚至爆发出来。

与平时的 Kuranoka 相比，Kuronata 的情绪表达往往更加激烈，也更加不可控。

在怒火情绪达到一定程度时，Kuranoka可能会出现明显的情绪失控（双眼发红即为Kuronata），表现包括但不限于说话提高音量（带着强烈的怒音喊叫）、全身发抖、流泪、心率上升到180以上、出现肢体动作（制造出响声）、粗口甚至出现暴力行为。在情绪达到接近崩溃时，她有时会暂时离开人群，然后去一个空旷的地方通过无意义的嘶吼等方式宣泄出来。{{黑幕|有些扰民}}（通常Kuranoka在事后不会后悔，除非是误会等事件）

Kuranoka在悲伤等负面情绪出现时一般会选择默默哭泣，Kuranoka不擅长找别人倾诉，只能通过互联网（然后一个人默默地躲在屏幕后面流泪）。Kuranoka的泪点很低。不过在这种情况下Kuranoka也不太擅长接受别人的安慰（即使她渴望得到，这十分矛盾）。当悲伤情绪到达一定程度后（双眼边蓝即为Kuronata），可能会开始转变为大声的哭泣并且部分情绪转变为愤怒，开始双手发抖，带有强烈的哭腔，悲伤到达极点后也会开始无意义的喊叫。此外，Kuranoka很少出现解离（屈指可数，大部分绝望与解离现象出现在Kuranoka的初二下半学期与初三时期。）。

{{黑幕|很擅长安慰别人，但是最不会安慰的就是自己😭😭😭}}

此外，Kuranoka常常对自己的命运产生强烈的不满与不甘，尤其是在初中时期。Kuranoka最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制——

=== 自我认知 ===
Kuronata 对自己的命运常常怀有强烈的不满与不甘，尤其是初中时期的经历。

Kuranoka 最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制。

== 参见 ==

* [[Kuranoka]]
{{Navbox 在积雨云上空相遇}}

Kuranoka

2026-10-24T11:08:00Z

KK：

{{Background
|背景=积雨云1.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}{{Infobox character
|姓名=天野彼方
|别名=Kuranoka，krnk，knt、kk
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=异瞳（左蓝右红。会随心情变化）
|原文名=天野彼方（曾用名天野奏多）
|发色=白色
|原文语言=若叶语（日语）
|栏目颜色=#D0E7F7
|标题颜色=#A2DBF5
|代表色={{color|#C2F3F6|#C2F3F6}}
|活动范围=常驻虹色，喜欢前旅游，喜欢追风
|用户名=Kuranoka
|血型=AB 型
|星座=摩羯座
|性格=真诚、活跃、日常外向、责任感强、适应力强、情绪化、重感情、容易内耗、压力、不愿承认自己脆弱、{{黑幕|失控后会很吓人ovo}}

|图像=
[[文件:Kuranoka在凯特国内社交媒体的头像.png|260px|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头<br>像|class=pageimage]]<br> Kuranoka在社交媒体的头像<ref>Kuranoka很喜欢拿自己的半成品画作当作头像</ref><br>[[文件:Kuranokanata Logo 1.png|260px]]

|签名=Kuranoka签名（纸质，待重制.png
|签名大小=1
|座右铭=どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:异瞳|异瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|猫系]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|风纪委员]]、[[萌娘百科:社团经理人|社团经理人]]、[[萌娘百科:优等生|优等生]]、[[萌娘百科:心理创伤|{{黑幕|心理创伤}}]]、[[萌娘百科:理科少女|理科少女]]、[[萌娘百科:技术宅|技术宅]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|博学]]、[[萌娘百科:好奇|好奇]]、[[萌娘百科:自来熟|自来熟]]、[[萌娘百科:元气|元气]]、[[萌娘百科:可靠|可靠]]、[[萌娘百科:富有正义感|富有正义感]]、[[萌娘百科:护短|护短]]、[[萌娘百科:勇敢|勇敢]]、[[萌娘百科:直率|直率]]、[[萌娘百科:幽默|幽默]]、[[萌娘百科:伪阳角|{{黑幕|伪}}阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|{{黑幕|高攻低防}}]]、[[萌娘百科:情绪化|{{黑幕|情绪化}}]]、[[萌娘百科:暴躁|{{黑幕|暴躁}}]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|{{黑幕|粗口}}]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|{{黑幕|敏感}}]]、[[萌娘百科:病弱|{{黑幕|病弱}}]]、[[萌娘百科:体力差|{{黑幕|体力差}}]]、[[萌娘百科:色盲|{{黑幕|色盲}}]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|{{黑幕|不悯}}]]

|喜欢=水色系、猫、彩虹、强对流、生命力、烟火气
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好=追逐风暴、电子游戏、作曲、编曲、画画、律动之环

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）
|口头禅=
* 無理ｗ（绷不住了！）
* お前、マジですごすぎだろ！（你牛大了！）
* 君のことが好き。（我喜欢你。）
* {{黑幕|なんで……？（为什么……？）}}
|网站=https://mygo.live/
|创作者=Kuranoka
|印象曲=[https://www.bilibili.com/video/BV1SE411e7BV グランドエスケープ]
|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）
|外貌特征=蓝红异瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|主题曲=暂无喵，原稿被KK否了喵
|罗马字=Amano Kanata
|标题文字颜色=#ffffff
|学历=初中
|父母=
* 父亲：天野直人
* 母亲：天野由佳
|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|标签颜色=#CFF3F7
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器=一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。
|附加内容=[[Kuronata|情绪失控]]}}

{{Infobox|title=立绘相关|below={{#tag:tabber|
正式 V1=
[[文件:看，Kuranoka.png|x600px]]<br>Kuranoka 正式版 V1 立绘
{{!}}-{{!}}
线稿 V1=
[[文件:一张没有上色的Kuranoka立绘v1.png|x600px]]<br>Kuranoka 测试版 V1 立绘
{{!}}-{{!}}
早期 V0=
[[文件:Kuranoka V0.png|x360px]]
<br>Kuranoka 神秘 V0 半身
}}

{{Multiple image|border=infobox|total_width=280|perrow=3|image_gap=1|image1=Kuranoka的当前头像.png|image2=Kuranoka的Minecraft皮肤.png}}<br>头像 {{!}} Minecraft皮肤}}'''Kuranoka'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，[[雨川]][[雾桥]]人，现居[[虹色]]。是一名普通的学生。Cumulonimbus组合创始人，运营着网络社区“Cumulus”。

Kuranoka就读于[[虹湾市立第七中学校]]，曾学习成绩优异，常被家长老师称为“优等生”，人缘关系也非常好。自初二第二学期以来，Kuranoka因进入学校后会出现不明原因的躯体症状，初三开始休学在家。她仍在寻找未来的方向，并对当下的自己感到迷茫。<ref name=":0" />

Kuranoka近期情况好转迅速，经常前往机厅游玩[[Ring of Rhythm|律动之环]]。但是仍然会对一些公共场合感到抗拒。<ref name=":0">这一段经历来自于KK的现实生活！</ref>

Kuranoka 本人表示除了必要时候尽量不要使用真实姓名。<ref name=":0" />{{黑幕|Hakari除外}}

除作为Blockland世界观中的虚构人物外，Kuranoka也是其创作者在互联网上使用的公开身份与虚拟形象。<ref>你好我是Kuranoka</ref>

「どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。」 <ref>我不会日语，用的AI翻译（）</ref>

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

== 特征 ==

=== 外貌 ===

* 身高176cm，体重43.5kg，BMI为14.04，外观看上去非常瘦。{{黑幕|末影人<ref>是Minecraft中的一种生物</ref>}}<ref>参考文献：KK的身高为183cm，体重为47kg，BMI为14.03</ref>
* '''发色为白色，有点偏向青蓝色'''。发型为发尾外翘的'''短水母头 + 波波头'''。
*患有极其罕见的[[情依性虹膜变色症]]<ref>虚构内容！</ref>，眼睛颜色会随着情绪与压力变化。平常情况下，左瞳颜色为蓝色，右瞳颜色为红色。双瞳颜色相同时通常代表着彻底的精神崩溃。{{黑幕|怎么一半灵珠一半魔丸啊}}
** 双瞳颜色会变红意味着暴怒、失控、强攻击性。
** 双瞳颜色变蓝意味着绝望、情绪崩溃甚至解离。
* 虹湾校服。由水色（白色与青蓝色相间）的二本线水手服与水色42cm百褶裙组成。{{黑幕|实际上Kuranoka很难买到版型合适的衣服，为了确保腰围合适，Kuranoka穿着的百褶裙会显得比较短。}}
** 喜欢在校服的基础上添加一件白色冲锋衣外套。白色冲锋衣的肩两侧有两条深蓝黑色竖线（立绘V1并未画出）
** 喜欢在裙子下面叠穿一条运动短裤
* 穿衣风格见[[Kuranoka#审美|穿衣风格]]

=== 性格 ===

* 独自面对陌生人可能有些社恐，但是对于熟人或者有熟人在身边就会本性暴露。
* 对于别人的发言非常很在意，喜欢让别人开心。
* 很不擅长道歉，即便这个事真的是自己的错。但是Kuranoka会表达出歉意并且想办法解决事情。
* 喜欢为同学打抱不平。（这也是Kuranoka小学遭到排挤的原因之一）
* 说话比较直接，十分随性。
* 拖延症非常严重，在ddl前狂补内容是常有的事。但是做自己喜欢的事情又常常效率超高。
* 泪点在外看似很高实际上非常低。经常一个人在自己的房间里释放情绪。
* 很容易也很害怕尴尬的情景，经常会开始发癫来摆脱困境（什么）
* 很害怕做错事，做错事后会陷入无休止的自责。会反复纠结自己过去说过的话或做过的事。
* 擅长安慰别人，但是非常不擅长安慰自己。
* 某些时候有重度强迫症，但是在收纳等方面又极度摆烂。
* 大多数时候是理性与感性都在线的，但是情绪出现非常容易极端化。
* 对自己喜欢的事物会突然变得非常话痨（）。
* 十分喜欢与朋友开玩笑，有时会故意说出挑衅性的话语，观察对方的反应。
* '''对待他人通常十分真诚，但并不是一个特别好说话的人。'''她对朋友的包容度很高，但在发现问题时也经常会犀利地指出，有时甚至会给对方带来较大的压力。{{黑幕|某种意义上确实是个压力怪。}}
** 如果意识到自己的言语伤害了朋友，Kuranoka会尝试安慰对方，并努力缓和之前的气氛。
*非常反感仗势欺人、虚伪、冷漠、不讲道理以及试图控制他人的行为。
*对自己的作品有很高的要求。完成一件满意的作品时会感到开心，但也经常很快发现其中的不足（然后推翻重来，Kuranoka很急性子，这种特质让Kuranoka的进步很快但是作品完成度不高并且缺乏后续的经验）。
**愿意向他人展示自己的作品，也会开心地接受别人的赞赏（尽管嘴上可能仍然强调自己技术很差）
**当他人对自己的作品提出尖锐的批评时，Kuranoka很容易开始自我怀疑。尽管如此，相比作品完全无人关注，她仍然更希望得到他人的认真反馈。
*在现实生活中说话通常较为理性，但在情绪激动时语速会明显加快，有时甚至会因为过于兴奋而说得有些混乱。在网络上，Kuranoka则更喜欢使用各种颜文字、表情符号和网络用语来表达情绪。
*因为曾生活社交断连，非常非常希望朋友能够主动邀请自己外出，也十分珍惜愿意倾听自己烦恼的人。

=== 日常 ===

* 喜欢一天中的每一刻！
* 出门绝对不能忘记带纸和水（）还喜欢随身携带[[龙碧]]。（好喝，{{黑幕|而且可以缓解躯体化的恶心，头晕等症状}}）
* 因为自己很喜欢拖延与不太注意收纳导致房间十分凌乱。
* 自休学后喜欢经常熬夜。但是仍可以保持足够的睡眠时间。经常1:30睡觉9:30醒来。
* 走路速度很快，但经常因为发现一些特殊的事物而突然停下来拍照。
* 猫猫，嘿嘿嘿嘿，猫猫—— 非常喜欢猫。
* 不敢在全黑的时候睡觉，睡觉的时候必须留一盏灯。
* 房间里的东西很多，摆放得比较杂乱。
* 家里面放了很多抱枕与毛绒玩具。
* 非常关注天气状况，经常会打开雷达图，卫星云图频繁查看。她也关注全球各地所有的天气状况。
* 有随手拍照的习惯。走在路上常常停下来拍摄神秘的东西。

=== 健康 ===

* BMI长期非常低，在14.00上下浮动，可能存在营养不良（无医学诊断）。
* Kuranoka存在先天性 protan 型色觉异常，视锥细胞对红色与绿色的感知较弱。表现为难以区分浅紫色/浅蓝色，咖啡色/深绿色等。
* Kuranoka 的躯体化与惊恐症状非常严重。发作条件包括但不限于独自出行、在室外进食、在室外饥饿（这让现在的Kuranoka只能算好时间调整进程......）等。Kuranoka因此感到痛苦。
* {{黑幕|因为Kuranoka在童年时期多次经历父母醉酒的情况，她存在非常严重的[https://zh.wikipedia.org/wiki/%E5%91%95%E5%90%90%E6%81%90%E6%83%A7%E7%97%87 Emetophobia]<ref>{{黑幕|■■恐惧症（英语：Emetophobia）是一种与■■有关的恐惧症，它可以导致压倒一切的、强烈的焦虑。 ■■恐惧症者感到焦虑的原因有很多，包括惧怕自身在公共场合■■，惧怕看到■■物、■■动作、■■的景象，惧怕听到■■的声音，惧怕感到恶心反胃和惧怕被恶心等等。由于严格的节食和自我约束，■■恐惧症者常常体重过轻，甚至一部分人患有厌食症。当觉察到自己或周遭的人有反胃、■■的可能性，■■恐惧症者可能会出现反常甚至极端的行为，比如难以抑制的尖叫、哭泣、逃跑，严重时甚至会昏倒，以逃避他们感知到的■■威胁，甚至只是潜在的威胁。}}</ref>以至严重影响了Kuranoka的生活，这间接的导致Kuranoka体重非常轻并且回避进食。在面对相关情景时会发生严重的惊恐（包括躯体化发作）。<ref name=":0" />}}
** {{黑幕|当遇到与这一恐惧有关的情境时，Kuranoka可能出现强烈的焦虑与惊恐反应，有时甚至伴随明显的躯体化症状。}}
** 也许因此，Kuranoka的肠胃很脆弱。在学校常常因为相关问题请假。

=== 反感 ===

* 攻击性谩骂，对于亲人与朋友的诅咒。Kuranoka对于这是完全无法忍受的。曾因为班上的男同学开Kuranoka家人的玩笑而将对方打到住院。
* 很反感跳脸，比如在自己的作品下刷别人的内容。
* 不希望自己的创意，内容被偷走。Kuranoka希望引起更多的共鸣，但是不希望自己的作品被当作别人的成果。

== 喜好 ==

=== 审美 ===

* [[萌娘百科:水色界隈|水色系]]。
* 喜欢白色＋浅蓝＋薄荷绿。
* 喜欢硬派音乐，最喜欢的曲风为Euphoric Hardstyle，因为这种曲风的情绪张力通常来说非常强。听歌风格偏向猫系电音（即现实世界中的“日本同人电音”）、硬派音乐与一些相对极端的曲风（如Speedcore）。情绪摇滚、流行朋克也是Kuranoka非常喜欢的曲风。<ref name=":0" />
** 喜欢旋律突出，随后经过情绪积累（Buildup），在 Drop 中猛烈释放的过程。

==== 穿搭 ====
* 在外喜欢穿比自己大好几号的宽松的衣服，常穿运动外套/卫衣搭配短百褶裙。（虹色室内空调开的很猛）在室外常穿T恤+短百褶裙，因为怕热喜欢光腿。
** 短裙下面通常会叠穿运动短裤。
* 不喜欢紧身衣和牛仔裤。
* 喜欢宽松衣物被风吹动的动态感觉。
* 很少穿戴饰品。
* 偶尔会穿戴袖套。常穿白色短袜+运动鞋。
[[文件:Rotating Thunderstorm Updraft.jpg|缩略图|253x253px|超级单体风暴]]
[[文件:莫纳科街景1.png|缩略图|226x226像素|莫纳科]]
[[文件:1 rocinha night 2014 panorama.jpg|缩略图|226x226像素|罗西尼亚（里约热内卢，巴西）]]

=== 环境 ===
* 非常喜欢甚至盼望强对流天气发生。（并非盼灾）并且很期待风雨过后的彩虹。
** 喜欢拍摄云体和雷电，并通过气象站数据观察降水，极端大风等气象要素。黑云压城的氛围与剧烈的大雨本身也会令Kuranoka感到兴奋。
* 特别喜欢天空即将发生剧烈变化的时刻。（如超级单体风暴，弧积云，或者锋面强降雪）
* 非常期待风雨过后的彩虹。暴风雨过后的蓝天与夏日午后充满积云的天空伴随蝉鸣经常令Kuranoka产生怀旧感。
* 雨前的泥土味。
* 讨厌持续的锋面阴雨天。喜欢雪。（可惜虹色没有降雪记录）
* 喜欢充满橘子皮香味的空气。
* 不喜欢过度安静、有秩序的环境
* 喜欢现代化错综复杂的，贫富差距大的极具割裂感的地方。如[[莫纳科]]。
** 对废弃建筑与老旧工业区没有特别的兴趣。相比已经失去活力的空间，Kuranoka更喜欢正在运转、充满人类活动的城市。（但是Kuranoka在游戏中很喜欢探索这种有生活痕迹的区域）
** 非常喜欢探索陌生的城市。进入陌生城市时，Kuranoka通常会先关注建筑与当地人的日常生活。比起事先规划路线，更喜欢没有明确目的地地闲逛，想到哪里便打开导航前往哪里。（虽然容易迷路）
* 很害怕人多的环境与被众多人注视。所以很害怕在室外发病。这也是Kuranoka有接近一年时间没有出过家门的原因。
** 尽管如此，Kuranoka实际上非常喜欢和朋友们一起外出游玩。经常出现明明很期待出门，却在临近出门时感到恐惧的情况。
* 喜欢「生活即将失控」的感觉。（如超强台风前夕）
* 喜欢前往具有烟火气的地方，甚至有些极端（如贫民窟）。
* 讨厌尖锐的声音。
* 讨厌过于严肃的场合。
* 很喜欢探索未知的环境，但喜欢的同时也很害怕。
* 宜居气温范围为16~24℃。Kuranoka非常不耐热，同时很耐寒。{{黑幕|曾经在10℃的情况下露腿穿夏季校服震惊全班同学。也曾经在30℃的情况下中暑再次震惊全班同学}}
* 很喜欢风吹过身体的感觉。
[[文件:Champi 2026-10-20 1300Z.png|缩略图|236x236像素|台风墙皮]]

=== 兴趣 ===

* 是气象爱好者，关注所在地乃至世界各地的天气事件。尤其期待强对流天气与台风天气。
** 在有热带气旋活跃时会查看云图，分析强度，在社群中高度活跃（虽然理论知识并不是很坚固）
** 在有大范围强对流天气活跃时（如龙卷风爆发）也会关注。
** 希望能主动去[[龙卷风走廊]]追逐一次龙卷风爆发。
* 喜欢画画。虽然技术始终停留在初学者水平，但是她认为能通过画画表达出自己想象中的东西是一种很好的感觉！
* 喜欢编曲。Kuranoka很喜欢听深海气压（曲风也许类似地球上的Nanatsukaze）与Novastar（曲风也许类似地球上的*Luna）的音乐。因为这两个人，Kuranoka也想通过音乐来实现自我表达。
* 运动方面喜欢足球与羽毛球。即使自己菜的没边。曾参加过学校的足球选修课（然后被其他同学虐成区）
* 喜欢摄影，会随身携带相机记录日常的一些“美好事物”。（相册中有包括但不限于垃圾桶特写，消防栓特写，甚至野外出现的马桶等神秘内容）
* 喜欢玩沙盒游戏与开放世界游戏，以及音乐游戏。
*Kuranoka非常喜欢烟火大会、音乐节、漫展以及学校文化祭等热闹的活动。
[[文件:Okra (Abelmoschus esculentus) in a Bowl.jpg|缩略图|218x218px|'''秋葵'''（学名：''Abelmoschus esculentus''），一种锦葵科、秋葵属的一年或多年生草本植物。]]

=== 饮食 ===

* 最喜欢的水果是西瓜，最讨厌的水果是牛油果。很喜欢西瓜汁与柠檬水。（西瓜+椰奶+椰果太好喝了你知道吗？）
* 最喜欢的蔬菜是秋葵，最讨厌的蔬菜是茄子（极度厌恶{{黑幕|因为极度讨厌茄子，曾经吃茄子吃到OTTO过（）}}）
* 最喜欢的肉类是牛肉，什么肉都喜欢吃。
* 无法接受辣味。
* 喜欢喝[[龙碧]]这种碳酸饮料。
[[文件:邪恶QQ肠.gif|缩略图|海狮]]

=== 其他 ===

* 最喜欢的动物是海狮。也很喜欢猫和水豚。
* Kuranoka喜欢的创作作品通常具有非常强烈的情绪感染力。无论是绘画还是音乐，她都希望作品能够传达情绪、讲述故事，同时也注重作品本身是否足够好听或好看。
*Kuranoka十分向往前往[[莫纳科]]旅行，也希望未来有机会在[[大田地城]]、[[奥多拉]]或莫纳科等城市生活。

== 生活 ==

=== 初中生活 ===
Kuranoka就读于虹湾市立第七中学校，曾在初一10班，初二9班，初三3班。复学后的班级为初三2班。<ref name=":0" /><ref>虹湾七中采用走班制度</ref>

初中时期的Kuranoka学习成绩位于年级前列（常年在前十名）{{黑幕|然而，成绩好不代表上学就一定快乐。}}。擅长的科目是数学、纳语（英语）、物理、地理。不擅长的科目是若叶语（日语）、体育、政治（是的，凯特有政治科目，分为时政与理论），Kuranoka尤不擅长政治理论{{黑幕|常常选择题满分，大题个位数分数}}。Kuranoka反感所有需要背诵才能拿到高分的科目。

最喜欢的科目是地理。在自然地理与人文地理方面都能与其他同学拉开差距。虽然没有学过但是对高中的自然地理部分已了如指掌。

最讨厌的科目是体育。Kuranoka的体育成绩非常差。此外Kuranoka是虹湾七中建校以来唯一一个BMI分数拿到0分的。Kuranoka体育方面爆发力尚可及格，耐力与体力非常差。尤其讨厌长跑（即便Kuranoka的体型被同学称为先天长跑圣体）。（跑完常常会导致恶心与超高心率，可能会让Kuranoka的惊恐发作）

曾在初一初二担任“风纪委员”，因为其管理良好而广受同学与老师喜爱。Kuranoka管的很松而且因为比较人性化，并且Kuranoka会勇于在同学被不合理对待时直面权威，这让Kuranoka在同学中的声望很高。Kuranoka的班主任也很通人性，甚至曾与Kuranoka一起对抗年纪政策。

开展过气象相关社团活动，每周四会为社团内成员讲解气象知识，有时也会与其他气爱一同外出进行追风活动。{{黑幕|虽然只是在虹色境内，没出过远门}}Kuranoka通过社团认识了很多朋友。在Kuranoka升入初三后，气象社随即进入冻结。Kuranoka现在是校内音游社的成员，占0.5个名额。{{黑幕|没错，是0.5个人。}}Kuranoka的音游能力也在级部的音游玩家中位于前列。

擅长结交朋友与组织活动。常常会带动班级气氛。同时Kuranoka比较反感“读不懂空气”的人。

经常开导班级中想不开的同学，会倾听朋友们诉说自己的烦恼。

Kuranoka不能接受不公平事件的发生，常常在弱者受到欺负、凌辱时站出来保护弱者。（即便她经常因为这个特质被一些人盯上）

Kuranoka虽然可以给自己的朋友们提供许多情绪帮助，但是Kuranoka很不擅长处理自己的情绪。因其高敏感的特征，她的情绪波动非常大，可能会在同学面前突然爆发。（曾与同学打架投掷课桌与椅子，曾在若叶语课上与老师吵架后掀桌摔门而去）（详见[[Kuranoka#情绪管理|情绪管理]]）

{{黑幕|虽然Kuranoka看似阳光，但长期积累的压力与身心状态的变化，最终还是对她的的正常学习和生活造成了严重影响。}}

=== 高中生活 ===
我还没上呢。

=== 情绪管理 ===
Kuranoka的情绪管理在生活中是一大问题（所以单独一个板块介绍）。尽管她在日常生活中很像一个正常人，但是她的高敏感特质非常明显，情绪失控后会非常过激（有些危险）。

{{黑幕|详见[[Kuronata]]}}
=== 家庭 ===
Kuranoka的现住址为[https://blkl.fun/map/#map=16.5/-7.85054/14.03490 凯特共和国虹夏州虹色市虹湾霞山北通り114番地 701室（14.034902°E, -7.850549°S）][[文件:FBS Residence 虹色.png|缩略图|220x220px|FBS Residence 虹色]]

父亲从事教育行业，在虹色具有一定的社会声望，也认识很多当地的知名人物，对待朋友真诚可靠。父亲教育彼方尤其注重学业成绩、纪律以及个人责任。他对Kuranoka抱有较高的期望，也习惯于按照自己的教育理念要求她。随着彼方的身心状态逐渐恶化，在自己的校园生活受到影响后直人却始终无法理解，认为彼方是「不想上学」「逃避现实」，还曾提出要“禁止使用电子设备”，“每天跟着自己去海岸山间体验农村生活”等。就这些事彼方与直人发生过很多矛盾。彼方十分重视父亲对自己的评价却也对父亲的处事方式感到严重不满，但Kuranoka不敢提出因为担心再次重演小时候的暴力事件。但近年来，经过彼方母亲的劝说以来，直人逐渐意识到了自身教育方式中存在的问题，直人已经意识到了自己存在问题也做出了改变，这也让彼方卸下了一些防备，但因为童年时期的创伤过于严重，彼方与父亲仍然存在较为严重的隔阂。

母亲是自由职业者，小时候比较叛逆，所以可以理解彼方的一些行为。她比较重视成绩与彼方的未来生活（有些过度了），这让彼方有些焦虑，即便她对自己的未来很自信。她也是彼方在艰难时期的依靠，由于彼方难以直接向父亲表达自己的想法与感受，她经常选择先向母亲倾诉，再由母亲转告给父亲。彼方的母亲起初身心状态逐渐恶化时也无法理解彼方的身体不适，也曾怀疑是否在逃避现实。但彼方的母亲很快就意识到彼方的痛苦所在。在艰难时期，她始终一直在家陪伴着彼方。

Kuranoka的家庭经济状况总体较为稳定，虽然不算富裕但是足以支持Kuranoka在自己热爱的东西上投入金钱。<ref name=":0" />也足以应对部分突发事件。
[[文件:Kuranoka在凯特国内社交媒体的头像.png|缩略图|210x210像素|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像|class=pageimage]]
=== 网络 ===
Kuranoka在[[Kirakira]]经营账号“Kuranoka”，会发送一些关于电子游戏与音乐的视频，也会在[[Netaflow]]上分享自己的日常。

== 理想 ==
Kuranoka希望未来能够从事气象追踪或科研相关的工作，同时保留充足的自由时间进行艺术创作。她向往拥有清闲、能够自由安排的生活。

Kuranoka希望能够经常前往世界各地旅行，亲身体验不同地区的自然环境，城市面貌与人文气息等。

对于Kuranoka而言，艺术创作也是一种向外界表达自我的方式。她希望通过音乐、绘画等作品，让更多人了解自己的故事。

相比成就与名声，Kuranoka更想让自己能够给更多人留下某种难忘的感受。

'''她渴望与他人、与世界建立真正的联系。'''

{{黑幕|为什么这一段像GPT写的}}[[文件:2013 Rainbow over Washfold.jpg|缩略图|257x257像素|[[彩虹]]是一种光学现象]]

== 轶事 ==

* Kuranoka非常喜欢记录彩虹。此外，虹色的彩虹非常多。

* Kuranoka的数学、纳语（即英语）、物理、化学、地理成绩非常出色，但是政治、历史等文科科目成绩较为不足。Kuranoka曾多次代表虹色七中参加竞赛。<ref name=":0" />

* Kuranoka有一定的Viper与[[Elona]]的编程基础。

* Kuranoka是音乐组合“[[虹外線NIJIGAISEN]]”的主创，担任作曲 / 编曲 / DJ 等植物。
** Kuranoka 虽然担任编曲职务，但是因为没有学过乐理，写出来的屎山实在离谱，因此经常被其他成员吐槽“这东西根本不是给人弹的”。<ref name=":0" />

* Kuranoka的武器是一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。可以通过usb连接到电脑，滑动Ribbon Controller对应MIDI CC 里面 0->127 的值。
* Kuranoka非常讨厌虫子{{黑幕|尤其是“区”，曾因处理垃圾时发生意外导致垃圾桶内滋生的“区”散落一地，Kuranoka当时面对散落的区彻底崩溃所以留下了严重的心理阴影😡😡😡}}<ref name=":0" />
* Kuranoka可以All Perfect [[Atmosphere（音游）|Atmosphere]] 中的 14 ~ 15 级曲目。<ref name=":0" />
* Kuranoka希望自己可以考上[[奥多拉州立大学]]（OSU）或者[[虹色大学]]（NJU），虽然看起来遥不可及。
* 是[[咲本可奈枝|Hakari]]的幼驯染。

== 关系 ==

=== 家人 ===

==== 天野直人（父） ====
天野直人是天野彼方的父亲，是一位思想保守的，在虹色小有名气的教育家。设计出身。

彼方与直人的关系长期较为紧张。由于过去的家庭矛盾与直人对彼方的暴力行为，方在很长一段时间内对直人表现出惧怕甚至严重躯体化的反应。虽然直人如今已经有所改变，彼方也清楚这一点，但过去的经历仍然使两人之间存在难以逾越的红狗。彼方很难向直人表达自己的真实想法与感受。

==== 天野由佳（母） ====
天野由佳是天野彼方的母亲，是一位自由职业者。

是彼方度过艰难时期的依靠。相比父亲，彼方更愿意向由佳倾诉自己的烦恼与情绪。在彼方与直人发生矛盾时，由佳也时常承担着两人之间的沟通与调解工作。

=== 乐队内同学 ===

==== [[汐入未絵]] ====
汐入未绘是Kuranoka的初中结识的同学。

==== [[咲本可奈枝|Hakari]] ====
Hakari 是 Kuranoka 的[[幼驯染]]，两人因父母是好友（Hakari的父亲是天野由佳的好友）。在Kuranoka 的4~8岁时乃至现在，因家境原因，Hakari 带 Kuranoka 见识到了许多新鲜事物，也让一个默默无闻的，平凡的 Kuranoka 第一次自身的表达与情感。

在 Kuranoka 遭到老师的暴力对待，同学的排挤时，常常会去荧光海岸一带散步，此时Hakari常常会随行陪伴（ Hakari 的家位于荧光海岸駅附近）。Hakari 也曾在 Kuranoka 心情低落时给予很多能量。因此，Hakari 在 Kuranoka 的童年里如同一道光，所以在6岁之后，Kuranoka 常常称可奈枝为“光”。（Hakari 一词是因为 Kuranoka 小时候记错单词，实际上应为 Hikari，但是这一问题等到 Kuranoka 在小学时才被发现。因为改名过于繁琐，Hakari 一词就被沿用至今了。）

在 Kuranoka 12岁时，Hakari 因为要搬家到虹色市南部地区上学不得不与 Kuranoka 分开。在 Hakari 进入新的中学后因郊区出身在高高在上的精英环境中遭到了冷落与排挤（详见 Hakari 个人页面），之后通过 Hakari 与父母协商，升入高中重返虹湾。

==== [[若生柚希]] ====
若生柚希是Kuranoka的初中结识的同学。

==== [[千田萌果]] ====
千田萌果是Kuranoka的初中结识的同学。

== 经历 ==
{{ambox
| type = delete
| image = Ambox warning red.svg
| size = 60px
| title = 视觉刺激与光敏性癫痫警告
| text = 本页面的“经历”章节包含视觉特效，包括剧烈闪烁、色彩反转等异常视觉效果。上述内容可能引发光敏性癫痫患者的不适或发作。建议对闪烁画面敏感的读者跳过该章节。
}}''故事还在继续，会随着现实时间的流逝逐渐被完善——''

【负能量警告】

【施工中，可能随时发生更改】

<div class="mw-collapsible mw-collapsed" data-expandtext="展开经历" data-collapsetext="收起经历">
<div class="mw-collapsible-content">[[文件:凯特共和国雾桥城市天际线！.png|缩略图|211x211像素|雾桥城市天际线]]

=== 童年时期 ===
1937年1月1日，Kuranoka出生于[[凯特共和国]][[雨川州]][[雾桥市]]。

童年的 Kuranoka 并没有太多引人注目的经历。Kuranoka的家境一般，这让Kuranoka没见过什么世面。

4岁时搬家到虹色市虹湾区结识了[[咲本可奈枝]]。

==== 线索 ====

=== 小学时期 ===
Kuranoka的小学时期前期是非常痛苦的。

在童年时期做惯了老实人的Kuranoka到达小学时常因为融合不进集体被孤立。

Kuranoka在读小学时常被学校的老师暴力对待，因为其爱哭的性格也导致了同学的排挤，这也直接导致了后来Kuranoka高敏感，情绪波动非常大的特征，{{黑幕|也让Kuranoka学会了逃避。}}。

因此，Kuranoka对于上学产生了厌恶。

尤其是在二至三年级期间，长期的精神压力使 Kuranoka 一度出现了明显的躯体化反应。然而，当时的 Kuranoka 尚不了解这些症状的成因，家人也未意识到其可能与心理压力有关。

三年级时，Kuranoka 曾随家人前往[[维尔布]]度假，先后到访了[[莫纳科]]与[[海葵]]。

远离了熟悉的校园环境，在陌生城市的街道与热带海滨之间，她终于得以暂时摆脱日常生活中的压抑。

在旅途中的这段日子里，Kuranoka 的身心状态逐渐好转，先前困扰她的症状也逐渐缓解。

直到四年级，Kuranoka 结识了同桌[[白石崎浩]]。对于长期在人际关系中屡屡受挫的 Kuranoka 而言，这段友谊成为了她小学生活中一个重要的转折点。

尽管改变的过程并不顺利，过去的经历也依然影响着她，但 Kuranoka 开始尝试重新认识自己，逐渐意识到自己并非只能活在他人的否定之中。

她决定不再像过去那样消极地度过每一天，而是鼓起勇气，主动去改变自己的生活。

此后，Kuranoka的成绩出现了可观的上涨，到五年级时，Kuranoka 已经成为了班中的中游学生。

但是Kuranoka的若叶语成绩还是不太理想。

Kuranoka曾被语文老师当面否定自己的学习能力与未来，甚至被告知「你就是个废物，没必要学了。你不会有任何成就的」。

这句话对Kuranoka留下了极为深刻的印象。直到今日，她仍然清楚地记得老师当时所说的话。

Kuranoka 在五年级认识了[[万尾静夏]]，静夏也许是Kuranoka小学时最好的朋友，至今仍然保持联系。

在与静夏的接触下，Kuranoka逐渐变得不再内向。

（然而，即便 Kuranoka 已经开始努力改变自己，部分老师对她的偏见仍然没有消失。甚至有老师曾私下劝说静夏远离 Kuranoka。）

在六年级，Kuranoka更是取得了不错的学习成果，即便这对于初中的成就来说不值一提但是仍然是Kuranoka小时候的一大里程碑。

==== 线索 ====

=== 初中时期（一） ===
初中后的Kuranoka逐渐变得外向，在学业，兴趣等方面都取得了不错的成果。

在上初一的第一天，Kuranoka便受到了学校的第一份严重处分，原因是打架。（即便最初是对方的错误，Kuranoka仍然被记了处分。这让Kuranoka的心态发生了一些微妙的转变，她开始变得有些较真，她认为她没有错。）

在这之后Kuranoka虽然短暂的遭受了同学们的议论，但是仍然凭借自身魅力积攒出了自己的好友圈。

初一下半学期Kuranoka开办了自己的社团，开始为学校制作气象相关的科普海报，也结识了[[汐入未絵]]，[[千田萌果]]等好友。

其次，在这一学期Kuranoka也取得了自己上学以来考的最好的成绩。

初一下半学期，因为拆迁，Kuranoka搬家到了虹色市镜花中区。

==== 线索 ====

* 在进入初中的第一天Kuranoka就与班级中的其他成员爆发了相当激烈的冲突，事件起因于[[近间希予]]对Kuranoka的朋友[[秋川千寻]]进行挑衅。而Kuranoka看不下去，随口怼了几句，然后[[近间希予|希予]]便开始辱骂Kuranoka的家人，并且诅咒Kuranoka。在愤怒之下，Kuranoka掀翻了课桌，并开始大声斥骂对方，言辞也变得愈发激烈。随后，近间希予走上前来，Kuranoka拿起雨伞作出防卫姿态，但近间希予直接踢向了Kuranoka的腿部，Kuranoka因为太痛蹲下，面露难色，但是因为对方还在输出忍无可忍的Kuranoka也开始动手，两人扭打在一起。这场冲突恰好被学校校长当场发现，双方随后均受到了纪律处分，由于是入学第一天，学校并未要求两人回家反省，但分别要求两人提交一份1000字的检讨书。{{黑幕|入学第一天就喜提级部第一份处分的来了。不仅是这一个级部的第一份处分而且是Kuranoka人生中的第一份处分。}}

=== 初中时期（二A） ===
初二，Kuranoka开始参与[[Elona]]语言的信息竞赛，即使半年的学习并未获得什么成就，但这让Kuranoka也十分愉悦。也直接的促使了Kuranoka开始喜欢写程序。

Kuranoka非常喜欢初二的班级，在这个学期，她认识了[[若生柚希]]。并且在年级中开始担任一些重要职务。年级中老师们也很重视和看好Kuranoka。

（即便Kuranoka在初二依然非常容易爆炸（））

{{黑幕|但是这会持续下去吗？}}

==== 线索 ====

=== 初中时期（二B） ===

<span id="kk-fx-start" class="kk-fx-marker"></span>

初二下半学期以后，随着她对自己的要求不断提高，学业安排也慢慢紧凑了起来。

她仍然维持着自己优异的学习成绩，还没有意识到自己的压力逐渐的超载。

然而，长期积累的压力似乎已经超出了她所能承受的范围。躯体化的魔爪还是伸向了她。

她开始忍受，独自承担痛苦，但是这让她的身心状态加速恶化。

她很不希望别人看到她脆弱的一面而担心，更不愿让那些曾经相信她、期待她的人感到失望。可是，与此同时，她又无比渴望得到他人的安慰，希望有人能够听她倾诉。

<span id="kk-fx-rift" class="kk-fx-marker"></span>

{{黑幕|在这段时间，Kuranoka的梦想逐渐在这一次又一次的180BPM的心慌中迷失掉，在一阵又一阵撕心裂肺的干呕中破碎掉。}}

在一次又一次的发作下，她与家人的关系也再次紧张起来。（这也是Kuranoka进入暴怒状态与绝望状态最多的一段时期）

<span id="kk-fx-void" class="kk-fx-marker"></span>

她曾经认识很多朋友，经历了很多值得珍稀的时光，也曾对未来的日子充满向往。

{{黑幕|但是现在，在尚未意识到发生了什么时，她已默默的乘上了绝望之舟，然后被抛弃在无人的孤岛。}}

她想要获得帮助，她想要与世界重新建立链接。

'''她崩溃了'''

<center>

{{黑幕|''为什么偏偏是我？''}}

{{黑幕|''我到底做错了什么？''}}

{{黑幕|''明明已经这么努力了，我真的......啊......''}}

{{黑幕|''明明什么都没有做错。''}}

{{黑幕|''我为什么连...连最普通的生活都变得这么困难啊啊...呜呜......''}}

{{黑幕|''我...不想再听见那些期待了。也许我本来就该是个废物啊啊...呜啊......''}}

{{黑幕|''那些美好的都算是死前的幻象对吧....？''}}

{{黑幕|''求求你们不要再说了''}}

{{黑幕|''我已经很努力了啊......呜......''}}

{{黑幕|''为什么你们就是看不到''}}

{{黑幕|''为什么我就是没有变好啊...''}}

{{黑幕|''我真的想在无人在意的角落自杀''}}

{{黑幕|''我讨厌这样的自己''}}

{{黑幕|''拜托了......''}}

{{黑幕|''うああああああああああああああああああああああああああああああああああああ――ッ！！''}}

她仍然记得自己的目标，也尝试去触及。但是她现在已经被折磨到一点力气都没有。

'''她迷茫了。'''

在这段日子中，Kuranoka仍然对天空充满兴趣，她常常在那个囚禁她的房间中看窗外的风起云涌，看可爱的积云一点一点长大，成为无比强大的积雨云后，然后亲自把自己杀死。<ref>积雨云发展到后期下沉气流及冷池外流会切断暖湿入流，上升气流失去维持条件，于是雷暴逐渐消散。</ref>

[[文件:虹色南区雨川.png|360x360px|虹色的积雨云|居中|无框]]

{{黑幕|''（Hakari：Kanata？你还好吗）''}}

</center>

==== 线索 ====

=== 初中时期（三） ===
进入初三后，Kuranoka的身心状况仍然没有明显好转。Kuranoka与他的母亲在虹湾七中附近租了一间房子，距离学校很近。9月期间，她曾尝试偶尔返回学校，同学们见到Kuranoka的回归也很兴奋。当Kuranoka再次走进教室时，汐入未绘几乎是直接冲上前去，一把抱住了她。那些熟悉的面孔，那间熟悉的教室，还有久违的喧闹声。一切似乎都在慢慢回到原来的样子。虽然症状还是没有出现明显的好转。但是Kuranoka基本可以每天在学校停留数个小时了。

但是，好景不长。那股令她无比熟悉、又无比恐惧的感觉再次袭来。

Kuranoka在9月末一天的英语晚自习上试图继续写字，手却开始不受控制地颤抖。原本整齐的笔迹逐渐变得歪斜、扭曲。

{{黑幕|''唉...怎么又...''}}

{{黑幕|''明明已经能够重新坐在教室里了。''}}

{{黑幕|''明明一切才刚刚有了一点起色。''}}

{{黑幕|''可为什么偏偏又是现在？''}}

{{黑幕|''我还可以...''}}

最终，在同桌的劝说下，Kuranoka去主动找老师开了假条。

因为家长外出，Kuranoka只能自己走回家。

离开校门时，Kuranoka与小学时期最好的朋友[[万尾静夏]]擦肩而过。静夏认出了她。但Kuranoka没有注意到静夏。

她看见Kuranoka独自待在绿化带旁，脸色苍白，一边哭泣，一边忍受着一阵又一阵的干呕。{{黑幕|她看到了Kuranoka最不愿让人看到的一面}}

但Kuranoka完全没有注意到静夏的存在。

回到家后，那些刚才还折磨着Kuranoka的症状，却渐渐消失了。

''又是这样。。。''

这已经是Kuranoka第n次躯体化发作，回到家症状快速消失。

因为这件事，Kuranoka与母亲发生了最严重的一次争吵。

在这之后，Kuranoka变得非常抵触学校。

Kuranoka常常孤独的前往海边散步，但是没有人陪她了。她独自走过曾经与Hakari经常走过的荧光海岸，经常走着走着就无声的哭起来。

随着时间推进，Kuranoka逐渐沉迷于网络世界。

10月以后，她开始在家中直播电子游戏，并很快在[[Kirakira]]积累了一批粉丝。电子游戏、音游、网络社群与直播逐渐占据了她的日常生活。

但与家人的争执还在继续。

但是Kuranoka仍然惦记着学校。她主动联系班主任，表示希望这一年继续制作气象科普海报，并拜托班主任帮助在学校展出（投屏）。即使很难亲自走进教室，她也不愿意就这样彻底消失在自己曾经熟悉的校园里。她不甘心。

次年1月1日，Kuranoka过生日了，她的愿望是自己可以好起来。

此后的生活仍然没有发生太大的变化。Kuranoka将大量时间投入音乐游戏、电子游戏与网络社群，长期待在家中，甚至整个夏季都很少外出。

次年4月，随着毕业季逐渐临近，Kuranoka决定为自己所属的年级留下些什么。曾经朝夕相处的同学们，即将走向各自不同的未来。

她冒出了给自己年级的同学们写歌的想法。她想尝试将自己对校园生活的回忆、对同学们的留恋，以及对他们未来的祝福，写进一首歌曲里。

于是她开始学习DAW以及音乐制作相关知识，即便常常因为自己“没天赋”“学得慢”陷入内耗与崩溃，但是她仍然在努力的学习。对Kuranoka而言，这首作品也承载着她未能通过日常校园生活亲自表达的感情。

后来，到了6月，Kuranoka仍然参加了学校组织的毕业照拍摄与毕业典礼。两次活动都伴随着严重的身体不适，但她最终还是完成了这两件事。

在中考前一天晚上，Kuranoka将那份制作尚显稚嫩但倾注了大量心血的毕业赠曲以及最后一份考试期间的天气预报视频一同发送给了班主任。随后，在最后一节班会课，班主任与Kuranoka进行了视频通话。透过屏幕，她再次见到了许久未见的同班同学们。

那些熟悉的面孔，又一次出现在她眼前。

'''在那一刻，Kuranoka终于久违地感受到了与同学们相处时的快乐。'''

随着凯特共和国MNES虹色虹湾初中学力调查（中考）的结束，Kuranoka以一种与自己曾经想象中截然不同的方式，迎来了初中生活的结束{{黑幕|吗？}}。

Kuranoka需要做好准备，她未来面对的是全新的年级，全新的教材与截然不同的老师们......

'''她必须再一次面对这一切。'''

''这一次，又会发生什么呢？''

==== 线索 ====

=== 初中时期（四） ===

'''被困在囚笼中透过玻璃仰望天空的彼方终于走到了天空之下。'''

==== 线索 ====

</div>

=== 虹外线NIJIGAISEN ===
</div>

— 未完待续 —

== 相关作品 ==

== 画廊 ==
在此感谢所有为Kuranoka绘制图片的画师们！！未经允许请勿使用喵！！！擅自使用了我与画师们追责的喵！！！！

* [https://space.bilibili.com/515900536 Kuranoka]{{黑幕|没钱约稿没有画技只能自产的人已急哭www😭😭}}
* 冷酷无情墨少（mhs：[https://www.mihuashi.com/profiles/3296532%EF%BC%89 https://www.mihuashi.com/profiles/3296532）]
<gallery mode="packed" heights="180">
文件:Kuronata 稿件.png|Kuronata形态<ref>画师：冷酷无情墨少（https://www.mihuashi.com/profiles/3296532）</ref>
文件:混乱的草稿，使我的Kuranoka旋转.png|混乱的草稿，使我的Kuranoka旋转
文件:看，Kuranoka.png|立绘V1
文件:Kuranoka的当前头像.png|头像
文件:Kuranoka的Minecraft皮肤.png|Minecraft 皮肤<ref>画师：MCskin定制_猫猫蛋（https://space.bilibili.com/499168487）</ref>
文件:使用Picrew制作的Kuranoka概念图.png|早期版本Picrew捏脸
文件:Kuranoka 曲绘草稿v1.png|废弃草稿
</gallery>

== 注释 ==
<references />{{D|龙}}{{Background|image=积雨云.png}}{{ambox|type=content|image=Padlock.svg|size=65px|title=请！不！要！直！接！抄！袭！Kuranoka！的！特！色！与！锚！点！内！容！！！|text=请不要把我的自设喂给AI。请不要把Kuranoka作为借鉴或模仿对象。请不要在未经许可的状态下创作关于Kuranoka的二创内容。© Kuranoka. All Rights Reserved. 保留所有权利。}}

== 参见 ==

* [[虹色]]
* [[Kuranoka（本人）]]

== 借物表 ==

* Another Me - Neutral Moon（Kuro -> Kura转场）
* MARENOIA - LeaF（Kura -> Kuro转场）
{{Navbox 在积雨云上空相遇}}{{Navbox OC}}

{{角色结构化数据
|名称=Kuranoka
|本名=天野彼方
|英文名=Amano Kanata
|别名=KK
|其他名称=krnk
|简介=Kuranoka（天野彼方，Amano Kanata）是Blockland世界观中的虚构人物，虹湾市立第七中学校的学生、音乐组合「虹外線 NIJIGAISEN」的主创。Kuranoka性格活跃、真诚而敏感，热爱天气与音乐，尤其热衷于追逐风暴。她曾在学业、人际交往与网络方面取得出色的成绩，但也因成长过程中长期积累的身心压力而中断学业，目前仍在探索未来的方向。
|头像=Kuranoka的当前头像.png
|立绘=看，Kuranoka.png
|所属组合=虹外線NIJIGAISEN
}}

文件:Kuranokanata Logo 2.png

2026-10-24T11:07:54Z

KK：

Kuranokanata Logo 2

文件:Kuranokanata Logo 1.png

2026-10-24T11:01:35Z

KK：

Kuranokanata Logo 1

Kuranoka

2026-10-24T10:28:41Z

KK：

{{Background
|背景=积雨云1.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}{{Infobox character
|姓名=天野彼方
|别名=Kuranoka，krnk，knt、kk
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=异瞳（左蓝右红。会随心情变化）
|原文名=天野彼方（曾用名天野奏多）
|发色=白色
|原文语言=若叶语（日语）
|栏目颜色=#D0E7F7
|标题颜色=#A2DBF5
|代表色={{color|#C2F3F6|#C2F3F6}}
|活动范围=常驻虹色，喜欢前旅游，喜欢追风
|用户名=Kuranoka
|血型=AB 型
|星座=摩羯座
|性格=真诚、活跃、日常外向、责任感强、适应力强、情绪化、重感情、容易内耗、压力、不愿承认自己脆弱、{{黑幕|失控后会很吓人ovo}}

|图像=
[[文件:Kuranoka在凯特国内社交媒体的头像.png|260px|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头<br>像|class=pageimage]]<br> Kuranoka在社交媒体的头像<ref>Kuranoka很喜欢拿自己的半成品画作当作头像</ref>

|签名=Kuranoka签名（纸质，待重制.png
|签名大小=1
|座右铭=どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:异瞳|异瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|猫系]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|风纪委员]]、[[萌娘百科:社团经理人|社团经理人]]、[[萌娘百科:优等生|优等生]]、[[萌娘百科:心理创伤|{{黑幕|心理创伤}}]]、[[萌娘百科:理科少女|理科少女]]、[[萌娘百科:技术宅|技术宅]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|博学]]、[[萌娘百科:好奇|好奇]]、[[萌娘百科:自来熟|自来熟]]、[[萌娘百科:元气|元气]]、[[萌娘百科:可靠|可靠]]、[[萌娘百科:富有正义感|富有正义感]]、[[萌娘百科:护短|护短]]、[[萌娘百科:勇敢|勇敢]]、[[萌娘百科:直率|直率]]、[[萌娘百科:幽默|幽默]]、[[萌娘百科:伪阳角|{{黑幕|伪}}阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|{{黑幕|高攻低防}}]]、[[萌娘百科:情绪化|{{黑幕|情绪化}}]]、[[萌娘百科:暴躁|{{黑幕|暴躁}}]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|{{黑幕|粗口}}]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|{{黑幕|敏感}}]]、[[萌娘百科:病弱|{{黑幕|病弱}}]]、[[萌娘百科:体力差|{{黑幕|体力差}}]]、[[萌娘百科:色盲|{{黑幕|色盲}}]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|{{黑幕|不悯}}]]

|喜欢=水色系、猫、彩虹、强对流、生命力、烟火气
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好=追逐风暴、电子游戏、作曲、编曲、画画、律动之环

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）
|口头禅=
* 無理ｗ（绷不住了！）
* お前、マジですごすぎだろ！（你牛大了！）
* 君のことが好き。（我喜欢你。）
* {{黑幕|なんで……？（为什么……？）}}
|网站=https://mygo.live/
|创作者=Kuranoka
|印象曲=[https://www.bilibili.com/video/BV1SE411e7BV グランドエスケープ]
|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）
|外貌特征=蓝红异瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|主题曲=暂无喵，原稿被KK否了喵
|罗马字=Amano Kanata
|标题文字颜色=#ffffff
|学历=初中
|父母=
* 父亲：天野直人
* 母亲：天野由佳
|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|标签颜色=#CFF3F7
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器=一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。
|附加内容=[[Kuronata|情绪失控]]}}

{{Infobox|title=立绘相关|below={{#tag:tabber|
正式 V1=
[[文件:看，Kuranoka.png|x600px]]<br>Kuranoka 正式版 V1 立绘
{{!}}-{{!}}
线稿 V1=
[[文件:一张没有上色的Kuranoka立绘v1.png|x600px]]<br>Kuranoka 测试版 V1 立绘
{{!}}-{{!}}
早期 V0=
[[文件:Kuranoka V0.png|x360px]]
<br>Kuranoka 神秘 V0 半身
}}

{{Multiple image|border=infobox|total_width=280|perrow=3|image_gap=1|image1=Kuranoka的当前头像.png|image2=Kuranoka的Minecraft皮肤.png}}<br>头像 {{!}} Minecraft皮肤}}'''Kuranoka'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，[[雨川]][[雾桥]]人，现居[[虹色]]。是一名普通的学生。Cumulonimbus组合创始人，运营着网络社区“Cumulus”。

Kuranoka就读于[[虹湾市立第七中学校]]，曾学习成绩优异，常被家长老师称为“优等生”，人缘关系也非常好。自初二第二学期以来，Kuranoka因进入学校后会出现不明原因的躯体症状，初三开始休学在家。她仍在寻找未来的方向，并对当下的自己感到迷茫。<ref name=":0" />

Kuranoka近期情况好转迅速，经常前往机厅游玩[[Ring of Rhythm|律动之环]]。但是仍然会对一些公共场合感到抗拒。<ref name=":0">这一段经历来自于KK的现实生活！</ref>

Kuranoka 本人表示除了必要时候尽量不要使用真实姓名。<ref name=":0" />{{黑幕|Hakari除外}}

除作为Blockland世界观中的虚构人物外，Kuranoka也是其创作者在互联网上使用的公开身份与虚拟形象。<ref>你好我是Kuranoka</ref>

「どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。」 <ref>我不会日语，用的AI翻译（）</ref>

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

== 特征 ==

=== 外貌 ===

* 身高176cm，体重43.5kg，BMI为14.04，外观看上去非常瘦。{{黑幕|末影人<ref>是Minecraft中的一种生物</ref>}}<ref>参考文献：KK的身高为183cm，体重为47kg，BMI为14.03</ref>
* '''发色为白色，有点偏向青蓝色'''。发型为发尾外翘的'''短水母头 + 波波头'''。
*患有极其罕见的[[情依性虹膜变色症]]<ref>虚构内容！</ref>，眼睛颜色会随着情绪与压力变化。平常情况下，左瞳颜色为蓝色，右瞳颜色为红色。双瞳颜色相同时通常代表着彻底的精神崩溃。{{黑幕|怎么一半灵珠一半魔丸啊}}
** 双瞳颜色会变红意味着暴怒、失控、强攻击性。
** 双瞳颜色变蓝意味着绝望、情绪崩溃甚至解离。
* 虹湾校服。由水色（白色与青蓝色相间）的二本线水手服与水色42cm百褶裙组成。{{黑幕|实际上Kuranoka很难买到版型合适的衣服，为了确保腰围合适，Kuranoka穿着的百褶裙会显得比较短。}}
** 喜欢在校服的基础上添加一件白色冲锋衣外套。白色冲锋衣的肩两侧有两条深蓝黑色竖线（立绘V1并未画出）
** 喜欢在裙子下面叠穿一条运动短裤
* 穿衣风格见[[Kuranoka#审美|穿衣风格]]

=== 性格 ===

* 独自面对陌生人可能有些社恐，但是对于熟人或者有熟人在身边就会本性暴露。
* 对于别人的发言非常很在意，喜欢让别人开心。
* 很不擅长道歉，即便这个事真的是自己的错。但是Kuranoka会表达出歉意并且想办法解决事情。
* 喜欢为同学打抱不平。（这也是Kuranoka小学遭到排挤的原因之一）
* 说话比较直接，十分随性。
* 拖延症非常严重，在ddl前狂补内容是常有的事。但是做自己喜欢的事情又常常效率超高。
* 泪点在外看似很高实际上非常低。经常一个人在自己的房间里释放情绪。
* 很容易也很害怕尴尬的情景，经常会开始发癫来摆脱困境（什么）
* 很害怕做错事，做错事后会陷入无休止的自责。会反复纠结自己过去说过的话或做过的事。
* 擅长安慰别人，但是非常不擅长安慰自己。
* 某些时候有重度强迫症，但是在收纳等方面又极度摆烂。
* 大多数时候是理性与感性都在线的，但是情绪出现非常容易极端化。
* 对自己喜欢的事物会突然变得非常话痨（）。
* 十分喜欢与朋友开玩笑，有时会故意说出挑衅性的话语，观察对方的反应。
* '''对待他人通常十分真诚，但并不是一个特别好说话的人。'''她对朋友的包容度很高，但在发现问题时也经常会犀利地指出，有时甚至会给对方带来较大的压力。{{黑幕|某种意义上确实是个压力怪。}}
** 如果意识到自己的言语伤害了朋友，Kuranoka会尝试安慰对方，并努力缓和之前的气氛。
*非常反感仗势欺人、虚伪、冷漠、不讲道理以及试图控制他人的行为。
*对自己的作品有很高的要求。完成一件满意的作品时会感到开心，但也经常很快发现其中的不足（然后推翻重来，Kuranoka很急性子，这种特质让Kuranoka的进步很快但是作品完成度不高并且缺乏后续的经验）。
**愿意向他人展示自己的作品，也会开心地接受别人的赞赏（尽管嘴上可能仍然强调自己技术很差）
**当他人对自己的作品提出尖锐的批评时，Kuranoka很容易开始自我怀疑。尽管如此，相比作品完全无人关注，她仍然更希望得到他人的认真反馈。
*在现实生活中说话通常较为理性，但在情绪激动时语速会明显加快，有时甚至会因为过于兴奋而说得有些混乱。在网络上，Kuranoka则更喜欢使用各种颜文字、表情符号和网络用语来表达情绪。
*因为曾生活社交断连，非常非常希望朋友能够主动邀请自己外出，也十分珍惜愿意倾听自己烦恼的人。

=== 日常 ===

* 喜欢一天中的每一刻！
* 出门绝对不能忘记带纸和水（）还喜欢随身携带[[龙碧]]。（好喝，{{黑幕|而且可以缓解躯体化的恶心，头晕等症状}}）
* 因为自己很喜欢拖延与不太注意收纳导致房间十分凌乱。
* 自休学后喜欢经常熬夜。但是仍可以保持足够的睡眠时间。经常1:30睡觉9:30醒来。
* 走路速度很快，但经常因为发现一些特殊的事物而突然停下来拍照。
* 猫猫，嘿嘿嘿嘿，猫猫—— 非常喜欢猫。
* 不敢在全黑的时候睡觉，睡觉的时候必须留一盏灯。
* 房间里的东西很多，摆放得比较杂乱。
* 家里面放了很多抱枕与毛绒玩具。
* 非常关注天气状况，经常会打开雷达图，卫星云图频繁查看。她也关注全球各地所有的天气状况。
* 有随手拍照的习惯。走在路上常常停下来拍摄神秘的东西。

=== 健康 ===

* BMI长期非常低，在14.00上下浮动，可能存在营养不良（无医学诊断）。
* Kuranoka存在先天性 protan 型色觉异常，视锥细胞对红色与绿色的感知较弱。表现为难以区分浅紫色/浅蓝色，咖啡色/深绿色等。
* Kuranoka 的躯体化与惊恐症状非常严重。发作条件包括但不限于独自出行、在室外进食、在室外饥饿（这让现在的Kuranoka只能算好时间调整进程......）等。Kuranoka因此感到痛苦。
* {{黑幕|因为Kuranoka在童年时期多次经历父母醉酒的情况，她存在非常严重的[https://zh.wikipedia.org/wiki/%E5%91%95%E5%90%90%E6%81%90%E6%83%A7%E7%97%87 Emetophobia]<ref>{{黑幕|■■恐惧症（英语：Emetophobia）是一种与■■有关的恐惧症，它可以导致压倒一切的、强烈的焦虑。 ■■恐惧症者感到焦虑的原因有很多，包括惧怕自身在公共场合■■，惧怕看到■■物、■■动作、■■的景象，惧怕听到■■的声音，惧怕感到恶心反胃和惧怕被恶心等等。由于严格的节食和自我约束，■■恐惧症者常常体重过轻，甚至一部分人患有厌食症。当觉察到自己或周遭的人有反胃、■■的可能性，■■恐惧症者可能会出现反常甚至极端的行为，比如难以抑制的尖叫、哭泣、逃跑，严重时甚至会昏倒，以逃避他们感知到的■■威胁，甚至只是潜在的威胁。}}</ref>以至严重影响了Kuranoka的生活，这间接的导致Kuranoka体重非常轻并且回避进食。在面对相关情景时会发生严重的惊恐（包括躯体化发作）。<ref name=":0" />}}
** {{黑幕|当遇到与这一恐惧有关的情境时，Kuranoka可能出现强烈的焦虑与惊恐反应，有时甚至伴随明显的躯体化症状。}}
** 也许因此，Kuranoka的肠胃很脆弱。在学校常常因为相关问题请假。

=== 反感 ===

* 攻击性谩骂，对于亲人与朋友的诅咒。Kuranoka对于这是完全无法忍受的。曾因为班上的男同学开Kuranoka家人的玩笑而将对方打到住院。
* 很反感跳脸，比如在自己的作品下刷别人的内容。
* 不希望自己的创意，内容被偷走。Kuranoka希望引起更多的共鸣，但是不希望自己的作品被当作别人的成果。

== 喜好 ==

=== 审美 ===

* [[萌娘百科:水色界隈|水色系]]。
* 喜欢白色＋浅蓝＋薄荷绿。
* 喜欢硬派音乐，最喜欢的曲风为Euphoric Hardstyle，因为这种曲风的情绪张力通常来说非常强。听歌风格偏向猫系电音（即现实世界中的“日本同人电音”）、硬派音乐与一些相对极端的曲风（如Speedcore）。情绪摇滚、流行朋克也是Kuranoka非常喜欢的曲风。<ref name=":0" />
** 喜欢旋律突出，随后经过情绪积累（Buildup），在 Drop 中猛烈释放的过程。

==== 穿搭 ====
* 在外喜欢穿比自己大好几号的宽松的衣服，常穿运动外套/卫衣搭配短百褶裙。（虹色室内空调开的很猛）在室外常穿T恤+短百褶裙，因为怕热喜欢光腿。
** 短裙下面通常会叠穿运动短裤。
* 不喜欢紧身衣和牛仔裤。
* 喜欢宽松衣物被风吹动的动态感觉。
* 很少穿戴饰品。
* 偶尔会穿戴袖套。常穿白色短袜+运动鞋。
[[文件:Rotating Thunderstorm Updraft.jpg|缩略图|253x253px|超级单体风暴]]
[[文件:莫纳科街景1.png|缩略图|226x226像素|莫纳科]]
[[文件:1 rocinha night 2014 panorama.jpg|缩略图|226x226像素|罗西尼亚（里约热内卢，巴西）]]

=== 环境 ===
* 非常喜欢甚至盼望强对流天气发生。（并非盼灾）并且很期待风雨过后的彩虹。
** 喜欢拍摄云体和雷电，并通过气象站数据观察降水，极端大风等气象要素。黑云压城的氛围与剧烈的大雨本身也会令Kuranoka感到兴奋。
* 特别喜欢天空即将发生剧烈变化的时刻。（如超级单体风暴，弧积云，或者锋面强降雪）
* 非常期待风雨过后的彩虹。暴风雨过后的蓝天与夏日午后充满积云的天空伴随蝉鸣经常令Kuranoka产生怀旧感。
* 雨前的泥土味。
* 讨厌持续的锋面阴雨天。喜欢雪。（可惜虹色没有降雪记录）
* 喜欢充满橘子皮香味的空气。
* 不喜欢过度安静、有秩序的环境
* 喜欢现代化错综复杂的，贫富差距大的极具割裂感的地方。如[[莫纳科]]。
** 对废弃建筑与老旧工业区没有特别的兴趣。相比已经失去活力的空间，Kuranoka更喜欢正在运转、充满人类活动的城市。（但是Kuranoka在游戏中很喜欢探索这种有生活痕迹的区域）
** 非常喜欢探索陌生的城市。进入陌生城市时，Kuranoka通常会先关注建筑与当地人的日常生活。比起事先规划路线，更喜欢没有明确目的地地闲逛，想到哪里便打开导航前往哪里。（虽然容易迷路）
* 很害怕人多的环境与被众多人注视。所以很害怕在室外发病。这也是Kuranoka有接近一年时间没有出过家门的原因。
** 尽管如此，Kuranoka实际上非常喜欢和朋友们一起外出游玩。经常出现明明很期待出门，却在临近出门时感到恐惧的情况。
* 喜欢「生活即将失控」的感觉。（如超强台风前夕）
* 喜欢前往具有烟火气的地方，甚至有些极端（如贫民窟）。
* 讨厌尖锐的声音。
* 讨厌过于严肃的场合。
* 很喜欢探索未知的环境，但喜欢的同时也很害怕。
* 宜居气温范围为16~24℃。Kuranoka非常不耐热，同时很耐寒。{{黑幕|曾经在10℃的情况下露腿穿夏季校服震惊全班同学。也曾经在30℃的情况下中暑再次震惊全班同学}}
* 很喜欢风吹过身体的感觉。
[[文件:Champi 2026-10-20 1300Z.png|缩略图|236x236像素|台风墙皮]]

=== 兴趣 ===

* 是气象爱好者，关注所在地乃至世界各地的天气事件。尤其期待强对流天气与台风天气。
** 在有热带气旋活跃时会查看云图，分析强度，在社群中高度活跃（虽然理论知识并不是很坚固）
** 在有大范围强对流天气活跃时（如龙卷风爆发）也会关注。
** 希望能主动去[[龙卷风走廊]]追逐一次龙卷风爆发。
* 喜欢画画。虽然技术始终停留在初学者水平，但是她认为能通过画画表达出自己想象中的东西是一种很好的感觉！
* 喜欢编曲。Kuranoka很喜欢听深海气压（曲风也许类似地球上的Nanatsukaze）与Novastar（曲风也许类似地球上的*Luna）的音乐。因为这两个人，Kuranoka也想通过音乐来实现自我表达。
* 运动方面喜欢足球与羽毛球。即使自己菜的没边。曾参加过学校的足球选修课（然后被其他同学虐成区）
* 喜欢摄影，会随身携带相机记录日常的一些“美好事物”。（相册中有包括但不限于垃圾桶特写，消防栓特写，甚至野外出现的马桶等神秘内容）
* 喜欢玩沙盒游戏与开放世界游戏，以及音乐游戏。
*Kuranoka非常喜欢烟火大会、音乐节、漫展以及学校文化祭等热闹的活动。
[[文件:Okra (Abelmoschus esculentus) in a Bowl.jpg|缩略图|218x218px|'''秋葵'''（学名：''Abelmoschus esculentus''），一种锦葵科、秋葵属的一年或多年生草本植物。]]

=== 饮食 ===

* 最喜欢的水果是西瓜，最讨厌的水果是牛油果。很喜欢西瓜汁与柠檬水。（西瓜+椰奶+椰果太好喝了你知道吗？）
* 最喜欢的蔬菜是秋葵，最讨厌的蔬菜是茄子（极度厌恶{{黑幕|因为极度讨厌茄子，曾经吃茄子吃到OTTO过（）}}）
* 最喜欢的肉类是牛肉，什么肉都喜欢吃。
* 无法接受辣味。
* 喜欢喝[[龙碧]]这种碳酸饮料。
[[文件:邪恶QQ肠.gif|缩略图|海狮]]

=== 其他 ===

* 最喜欢的动物是海狮。也很喜欢猫和水豚。
* Kuranoka喜欢的创作作品通常具有非常强烈的情绪感染力。无论是绘画还是音乐，她都希望作品能够传达情绪、讲述故事，同时也注重作品本身是否足够好听或好看。
*Kuranoka十分向往前往[[莫纳科]]旅行，也希望未来有机会在[[大田地城]]、[[奥多拉]]或莫纳科等城市生活。

== 生活 ==

=== 初中生活 ===
Kuranoka就读于虹湾市立第七中学校，曾在初一10班，初二9班，初三3班。复学后的班级为初三2班。<ref name=":0" /><ref>虹湾七中采用走班制度</ref>

初中时期的Kuranoka学习成绩位于年级前列（常年在前十名）{{黑幕|然而，成绩好不代表上学就一定快乐。}}。擅长的科目是数学、纳语（英语）、物理、地理。不擅长的科目是若叶语（日语）、体育、政治（是的，凯特有政治科目，分为时政与理论），Kuranoka尤不擅长政治理论{{黑幕|常常选择题满分，大题个位数分数}}。Kuranoka反感所有需要背诵才能拿到高分的科目。

最喜欢的科目是地理。在自然地理与人文地理方面都能与其他同学拉开差距。虽然没有学过但是对高中的自然地理部分已了如指掌。

最讨厌的科目是体育。Kuranoka的体育成绩非常差。此外Kuranoka是虹湾七中建校以来唯一一个BMI分数拿到0分的。Kuranoka体育方面爆发力尚可及格，耐力与体力非常差。尤其讨厌长跑（即便Kuranoka的体型被同学称为先天长跑圣体）。（跑完常常会导致恶心与超高心率，可能会让Kuranoka的惊恐发作）

曾在初一初二担任“风纪委员”，因为其管理良好而广受同学与老师喜爱。Kuranoka管的很松而且因为比较人性化，并且Kuranoka会勇于在同学被不合理对待时直面权威，这让Kuranoka在同学中的声望很高。Kuranoka的班主任也很通人性，甚至曾与Kuranoka一起对抗年纪政策。

开展过气象相关社团活动，每周四会为社团内成员讲解气象知识，有时也会与其他气爱一同外出进行追风活动。{{黑幕|虽然只是在虹色境内，没出过远门}}Kuranoka通过社团认识了很多朋友。在Kuranoka升入初三后，气象社随即进入冻结。Kuranoka现在是校内音游社的成员，占0.5个名额。{{黑幕|没错，是0.5个人。}}Kuranoka的音游能力也在级部的音游玩家中位于前列。

擅长结交朋友与组织活动。常常会带动班级气氛。同时Kuranoka比较反感“读不懂空气”的人。

经常开导班级中想不开的同学，会倾听朋友们诉说自己的烦恼。

Kuranoka不能接受不公平事件的发生，常常在弱者受到欺负、凌辱时站出来保护弱者。（即便她经常因为这个特质被一些人盯上）

Kuranoka虽然可以给自己的朋友们提供许多情绪帮助，但是Kuranoka很不擅长处理自己的情绪。因其高敏感的特征，她的情绪波动非常大，可能会在同学面前突然爆发。（曾与同学打架投掷课桌与椅子，曾在若叶语课上与老师吵架后掀桌摔门而去）（详见[[Kuranoka#情绪管理|情绪管理]]）

{{黑幕|虽然Kuranoka看似阳光，但长期积累的压力与身心状态的变化，最终还是对她的的正常学习和生活造成了严重影响。}}

=== 高中生活 ===
我还没上呢。

=== 情绪管理 ===
Kuranoka的情绪管理在生活中是一大问题（所以单独一个板块介绍）。尽管她在日常生活中很像一个正常人，但是她的高敏感特质非常明显，情绪失控后会非常过激（有些危险）。

{{黑幕|详见[[Kuronata]]}}
=== 家庭 ===
Kuranoka的现住址为[https://blkl.fun/map/#map=16.5/-7.85054/14.03490 凯特共和国虹夏州虹色市虹湾霞山北通り114番地 701室（14.034902°E, -7.850549°S）][[文件:FBS Residence 虹色.png|缩略图|220x220px|FBS Residence 虹色]]

父亲从事教育行业，在虹色具有一定的社会声望，也认识很多当地的知名人物，对待朋友真诚可靠。父亲教育彼方尤其注重学业成绩、纪律以及个人责任。他对Kuranoka抱有较高的期望，也习惯于按照自己的教育理念要求她。随着彼方的身心状态逐渐恶化，在自己的校园生活受到影响后直人却始终无法理解，认为彼方是「不想上学」「逃避现实」，还曾提出要“禁止使用电子设备”，“每天跟着自己去海岸山间体验农村生活”等。就这些事彼方与直人发生过很多矛盾。彼方十分重视父亲对自己的评价却也对父亲的处事方式感到严重不满，但Kuranoka不敢提出因为担心再次重演小时候的暴力事件。但近年来，经过彼方母亲的劝说以来，直人逐渐意识到了自身教育方式中存在的问题，直人已经意识到了自己存在问题也做出了改变，这也让彼方卸下了一些防备，但因为童年时期的创伤过于严重，彼方与父亲仍然存在较为严重的隔阂。

母亲是自由职业者，小时候比较叛逆，所以可以理解彼方的一些行为。她比较重视成绩与彼方的未来生活（有些过度了），这让彼方有些焦虑，即便她对自己的未来很自信。她也是彼方在艰难时期的依靠，由于彼方难以直接向父亲表达自己的想法与感受，她经常选择先向母亲倾诉，再由母亲转告给父亲。彼方的母亲起初身心状态逐渐恶化时也无法理解彼方的身体不适，也曾怀疑是否在逃避现实。但彼方的母亲很快就意识到彼方的痛苦所在。在艰难时期，她始终一直在家陪伴着彼方。

Kuranoka的家庭经济状况总体较为稳定，虽然不算富裕但是足以支持Kuranoka在自己热爱的东西上投入金钱。<ref name=":0" />也足以应对部分突发事件。
[[文件:Kuranoka在凯特国内社交媒体的头像.png|缩略图|210x210像素|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像|class=pageimage]]
=== 网络 ===
Kuranoka在[[Kirakira]]经营账号“Kuranoka”，会发送一些关于电子游戏与音乐的视频，也会在[[Netaflow]]上分享自己的日常。

== 理想 ==
Kuranoka希望未来能够从事气象追踪或科研相关的工作，同时保留充足的自由时间进行艺术创作。她向往拥有清闲、能够自由安排的生活。

Kuranoka希望能够经常前往世界各地旅行，亲身体验不同地区的自然环境，城市面貌与人文气息等。

对于Kuranoka而言，艺术创作也是一种向外界表达自我的方式。她希望通过音乐、绘画等作品，让更多人了解自己的故事。

相比成就与名声，Kuranoka更想让自己能够给更多人留下某种难忘的感受。

'''她渴望与他人、与世界建立真正的联系。'''

{{黑幕|为什么这一段像GPT写的}}[[文件:2013 Rainbow over Washfold.jpg|缩略图|257x257像素|[[彩虹]]是一种光学现象]]

== 轶事 ==

* Kuranoka非常喜欢记录彩虹。此外，虹色的彩虹非常多。

* Kuranoka的数学、纳语（即英语）、物理、化学、地理成绩非常出色，但是政治、历史等文科科目成绩较为不足。Kuranoka曾多次代表虹色七中参加竞赛。<ref name=":0" />

* Kuranoka有一定的Viper与[[Elona]]的编程基础。

* Kuranoka是音乐组合“[[虹外線NIJIGAISEN]]”的主创，担任作曲 / 编曲 / DJ 等植物。
** Kuranoka 虽然担任编曲职务，但是因为没有学过乐理，写出来的屎山实在离谱，因此经常被其他成员吐槽“这东西根本不是给人弹的”。<ref name=":0" />

* Kuranoka的武器是一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。可以通过usb连接到电脑，滑动Ribbon Controller对应MIDI CC 里面 0->127 的值。
* Kuranoka非常讨厌虫子{{黑幕|尤其是“区”，曾因处理垃圾时发生意外导致垃圾桶内滋生的“区”散落一地，Kuranoka当时面对散落的区彻底崩溃所以留下了严重的心理阴影😡😡😡}}<ref name=":0" />
* Kuranoka可以All Perfect [[Atmosphere（音游）|Atmosphere]] 中的 14 ~ 15 级曲目。<ref name=":0" />
* Kuranoka希望自己可以考上[[奥多拉州立大学]]（OSU）或者[[虹色大学]]（NJU），虽然看起来遥不可及。
* 是[[咲本可奈枝|Hakari]]的幼驯染。

== 关系 ==

=== 家人 ===

==== 天野直人（父） ====
天野直人是天野彼方的父亲，是一位思想保守的，在虹色小有名气的教育家。设计出身。

彼方与直人的关系长期较为紧张。由于过去的家庭矛盾与直人对彼方的暴力行为，方在很长一段时间内对直人表现出惧怕甚至严重躯体化的反应。虽然直人如今已经有所改变，彼方也清楚这一点，但过去的经历仍然使两人之间存在难以逾越的红狗。彼方很难向直人表达自己的真实想法与感受。

==== 天野由佳（母） ====
天野由佳是天野彼方的母亲，是一位自由职业者。

是彼方度过艰难时期的依靠。相比父亲，彼方更愿意向由佳倾诉自己的烦恼与情绪。在彼方与直人发生矛盾时，由佳也时常承担着两人之间的沟通与调解工作。

=== 乐队内同学 ===

==== [[汐入未絵]] ====
汐入未绘是Kuranoka的初中结识的同学。

==== [[咲本可奈枝|Hakari]] ====
Hakari 是 Kuranoka 的[[幼驯染]]，两人因父母是好友（Hakari的父亲是天野由佳的好友）。在Kuranoka 的4~8岁时乃至现在，因家境原因，Hakari 带 Kuranoka 见识到了许多新鲜事物，也让一个默默无闻的，平凡的 Kuranoka 第一次自身的表达与情感。

在 Kuranoka 遭到老师的暴力对待，同学的排挤时，常常会去荧光海岸一带散步，此时Hakari常常会随行陪伴（ Hakari 的家位于荧光海岸駅附近）。Hakari 也曾在 Kuranoka 心情低落时给予很多能量。因此，Hakari 在 Kuranoka 的童年里如同一道光，所以在6岁之后，Kuranoka 常常称可奈枝为“光”。（Hakari 一词是因为 Kuranoka 小时候记错单词，实际上应为 Hikari，但是这一问题等到 Kuranoka 在小学时才被发现。因为改名过于繁琐，Hakari 一词就被沿用至今了。）

在 Kuranoka 12岁时，Hakari 因为要搬家到虹色市南部地区上学不得不与 Kuranoka 分开。在 Hakari 进入新的中学后因郊区出身在高高在上的精英环境中遭到了冷落与排挤（详见 Hakari 个人页面），之后通过 Hakari 与父母协商，升入高中重返虹湾。

==== [[若生柚希]] ====
若生柚希是Kuranoka的初中结识的同学。

==== [[千田萌果]] ====
千田萌果是Kuranoka的初中结识的同学。

== 经历 ==
{{ambox
| type = delete
| image = Ambox warning red.svg
| size = 60px
| title = 视觉刺激与光敏性癫痫警告
| text = 本页面的“经历”章节包含视觉特效，包括剧烈闪烁、色彩反转等异常视觉效果。上述内容可能引发光敏性癫痫患者的不适或发作。建议对闪烁画面敏感的读者跳过该章节。
}}''故事还在继续，会随着现实时间的流逝逐渐被完善——''

【负能量警告】

【施工中，可能随时发生更改】

<div class="mw-collapsible mw-collapsed" data-expandtext="展开经历" data-collapsetext="收起经历">
<div class="mw-collapsible-content">[[文件:凯特共和国雾桥城市天际线！.png|缩略图|211x211像素|雾桥城市天际线]]

=== 童年时期 ===
1937年1月1日，Kuranoka出生于[[凯特共和国]][[雨川州]][[雾桥市]]。

童年的 Kuranoka 并没有太多引人注目的经历。Kuranoka的家境一般，这让Kuranoka没见过什么世面。

4岁时搬家到虹色市虹湾区结识了[[咲本可奈枝]]。

==== 线索 ====

=== 小学时期 ===
Kuranoka的小学时期前期是非常痛苦的。

在童年时期做惯了老实人的Kuranoka到达小学时常因为融合不进集体被孤立。

Kuranoka在读小学时常被学校的老师暴力对待，因为其爱哭的性格也导致了同学的排挤，这也直接导致了后来Kuranoka高敏感，情绪波动非常大的特征，{{黑幕|也让Kuranoka学会了逃避。}}。

因此，Kuranoka对于上学产生了厌恶。

尤其是在二至三年级期间，长期的精神压力使 Kuranoka 一度出现了明显的躯体化反应。然而，当时的 Kuranoka 尚不了解这些症状的成因，家人也未意识到其可能与心理压力有关。

三年级时，Kuranoka 曾随家人前往[[维尔布]]度假，先后到访了[[莫纳科]]与[[海葵]]。

远离了熟悉的校园环境，在陌生城市的街道与热带海滨之间，她终于得以暂时摆脱日常生活中的压抑。

在旅途中的这段日子里，Kuranoka 的身心状态逐渐好转，先前困扰她的症状也逐渐缓解。

直到四年级，Kuranoka 结识了同桌[[白石崎浩]]。对于长期在人际关系中屡屡受挫的 Kuranoka 而言，这段友谊成为了她小学生活中一个重要的转折点。

尽管改变的过程并不顺利，过去的经历也依然影响着她，但 Kuranoka 开始尝试重新认识自己，逐渐意识到自己并非只能活在他人的否定之中。

她决定不再像过去那样消极地度过每一天，而是鼓起勇气，主动去改变自己的生活。

此后，Kuranoka的成绩出现了可观的上涨，到五年级时，Kuranoka 已经成为了班中的中游学生。

但是Kuranoka的若叶语成绩还是不太理想。

Kuranoka曾被语文老师当面否定自己的学习能力与未来，甚至被告知「你就是个废物，没必要学了。你不会有任何成就的」。

这句话对Kuranoka留下了极为深刻的印象。直到今日，她仍然清楚地记得老师当时所说的话。

Kuranoka 在五年级认识了[[万尾静夏]]，静夏也许是Kuranoka小学时最好的朋友，至今仍然保持联系。

在与静夏的接触下，Kuranoka逐渐变得不再内向。

（然而，即便 Kuranoka 已经开始努力改变自己，部分老师对她的偏见仍然没有消失。甚至有老师曾私下劝说静夏远离 Kuranoka。）

在六年级，Kuranoka更是取得了不错的学习成果，即便这对于初中的成就来说不值一提但是仍然是Kuranoka小时候的一大里程碑。

==== 线索 ====

=== 初中时期（一） ===
初中后的Kuranoka逐渐变得外向，在学业，兴趣等方面都取得了不错的成果。

在上初一的第一天，Kuranoka便受到了学校的第一份严重处分，原因是打架。（即便最初是对方的错误，Kuranoka仍然被记了处分。这让Kuranoka的心态发生了一些微妙的转变，她开始变得有些较真，她认为她没有错。）

在这之后Kuranoka虽然短暂的遭受了同学们的议论，但是仍然凭借自身魅力积攒出了自己的好友圈。

初一下半学期Kuranoka开办了自己的社团，开始为学校制作气象相关的科普海报，也结识了[[汐入未絵]]，[[千田萌果]]等好友。

其次，在这一学期Kuranoka也取得了自己上学以来考的最好的成绩。

初一下半学期，因为拆迁，Kuranoka搬家到了虹色市镜花中区。

==== 线索 ====

* 在进入初中的第一天Kuranoka就与班级中的其他成员爆发了相当激烈的冲突，事件起因于[[近间希予]]对Kuranoka的朋友[[秋川千寻]]进行挑衅。而Kuranoka看不下去，随口怼了几句，然后[[近间希予|希予]]便开始辱骂Kuranoka的家人，并且诅咒Kuranoka。在愤怒之下，Kuranoka掀翻了课桌，并开始大声斥骂对方，言辞也变得愈发激烈。随后，近间希予走上前来，Kuranoka拿起雨伞作出防卫姿态，但近间希予直接踢向了Kuranoka的腿部，Kuranoka因为太痛蹲下，面露难色，但是因为对方还在输出忍无可忍的Kuranoka也开始动手，两人扭打在一起。这场冲突恰好被学校校长当场发现，双方随后均受到了纪律处分，由于是入学第一天，学校并未要求两人回家反省，但分别要求两人提交一份1000字的检讨书。{{黑幕|入学第一天就喜提级部第一份处分的来了。不仅是这一个级部的第一份处分而且是Kuranoka人生中的第一份处分。}}

=== 初中时期（二A） ===
初二，Kuranoka开始参与[[Elona]]语言的信息竞赛，即使半年的学习并未获得什么成就，但这让Kuranoka也十分愉悦。也直接的促使了Kuranoka开始喜欢写程序。

Kuranoka非常喜欢初二的班级，在这个学期，她认识了[[若生柚希]]。并且在年级中开始担任一些重要职务。年级中老师们也很重视和看好Kuranoka。

（即便Kuranoka在初二依然非常容易爆炸（））

{{黑幕|但是这会持续下去吗？}}

==== 线索 ====

=== 初中时期（二B） ===

<span id="kk-fx-start" class="kk-fx-marker"></span>

初二下半学期以后，随着她对自己的要求不断提高，学业安排也慢慢紧凑了起来。

她仍然维持着自己优异的学习成绩，还没有意识到自己的压力逐渐的超载。

然而，长期积累的压力似乎已经超出了她所能承受的范围。躯体化的魔爪还是伸向了她。

她开始忍受，独自承担痛苦，但是这让她的身心状态加速恶化。

她很不希望别人看到她脆弱的一面而担心，更不愿让那些曾经相信她、期待她的人感到失望。可是，与此同时，她又无比渴望得到他人的安慰，希望有人能够听她倾诉。

<span id="kk-fx-rift" class="kk-fx-marker"></span>

{{黑幕|在这段时间，Kuranoka的梦想逐渐在这一次又一次的180BPM的心慌中迷失掉，在一阵又一阵撕心裂肺的干呕中破碎掉。}}

在一次又一次的发作下，她与家人的关系也再次紧张起来。（这也是Kuranoka进入暴怒状态与绝望状态最多的一段时期）

<span id="kk-fx-void" class="kk-fx-marker"></span>

她曾经认识很多朋友，经历了很多值得珍稀的时光，也曾对未来的日子充满向往。

{{黑幕|但是现在，在尚未意识到发生了什么时，她已默默的乘上了绝望之舟，然后被抛弃在无人的孤岛。}}

她想要获得帮助，她想要与世界重新建立链接。

'''她崩溃了'''

<center>

{{黑幕|''为什么偏偏是我？''}}

{{黑幕|''我到底做错了什么？''}}

{{黑幕|''明明已经这么努力了，我真的......啊......''}}

{{黑幕|''明明什么都没有做错。''}}

{{黑幕|''我为什么连...连最普通的生活都变得这么困难啊啊...呜呜......''}}

{{黑幕|''我...不想再听见那些期待了。也许我本来就该是个废物啊啊...呜啊......''}}

{{黑幕|''那些美好的都算是死前的幻象对吧....？''}}

{{黑幕|''求求你们不要再说了''}}

{{黑幕|''我已经很努力了啊......呜......''}}

{{黑幕|''为什么你们就是看不到''}}

{{黑幕|''为什么我就是没有变好啊...''}}

{{黑幕|''我真的想在无人在意的角落自杀''}}

{{黑幕|''我讨厌这样的自己''}}

{{黑幕|''拜托了......''}}

{{黑幕|''うああああああああああああああああああああああああああああああああああああ――ッ！！''}}

她仍然记得自己的目标，也尝试去触及。但是她现在已经被折磨到一点力气都没有。

'''她迷茫了。'''

在这段日子中，Kuranoka仍然对天空充满兴趣，她常常在那个囚禁她的房间中看窗外的风起云涌，看可爱的积云一点一点长大，成为无比强大的积雨云后，然后亲自把自己杀死。<ref>积雨云发展到后期下沉气流及冷池外流会切断暖湿入流，上升气流失去维持条件，于是雷暴逐渐消散。</ref>

[[文件:虹色南区雨川.png|360x360px|虹色的积雨云|居中|无框]]

{{黑幕|''（Hakari：Kanata？你还好吗）''}}

</center>

==== 线索 ====

=== 初中时期（三） ===
进入初三后，Kuranoka的身心状况仍然没有明显好转。Kuranoka与他的母亲在虹湾七中附近租了一间房子，距离学校很近。9月期间，她曾尝试偶尔返回学校，同学们见到Kuranoka的回归也很兴奋。当Kuranoka再次走进教室时，汐入未绘几乎是直接冲上前去，一把抱住了她。那些熟悉的面孔，那间熟悉的教室，还有久违的喧闹声。一切似乎都在慢慢回到原来的样子。虽然症状还是没有出现明显的好转。但是Kuranoka基本可以每天在学校停留数个小时了。

但是，好景不长。那股令她无比熟悉、又无比恐惧的感觉再次袭来。

Kuranoka在9月末一天的英语晚自习上试图继续写字，手却开始不受控制地颤抖。原本整齐的笔迹逐渐变得歪斜、扭曲。

{{黑幕|''唉...怎么又...''}}

{{黑幕|''明明已经能够重新坐在教室里了。''}}

{{黑幕|''明明一切才刚刚有了一点起色。''}}

{{黑幕|''可为什么偏偏又是现在？''}}

{{黑幕|''我还可以...''}}

最终，在同桌的劝说下，Kuranoka去主动找老师开了假条。

因为家长外出，Kuranoka只能自己走回家。

离开校门时，Kuranoka与小学时期最好的朋友[[万尾静夏]]擦肩而过。静夏认出了她。但Kuranoka没有注意到静夏。

她看见Kuranoka独自待在绿化带旁，脸色苍白，一边哭泣，一边忍受着一阵又一阵的干呕。{{黑幕|她看到了Kuranoka最不愿让人看到的一面}}

但Kuranoka完全没有注意到静夏的存在。

回到家后，那些刚才还折磨着Kuranoka的症状，却渐渐消失了。

''又是这样。。。''

这已经是Kuranoka第n次躯体化发作，回到家症状快速消失。

因为这件事，Kuranoka与母亲发生了最严重的一次争吵。

在这之后，Kuranoka变得非常抵触学校。

Kuranoka常常孤独的前往海边散步，但是没有人陪她了。她独自走过曾经与Hakari经常走过的荧光海岸，经常走着走着就无声的哭起来。

随着时间推进，Kuranoka逐渐沉迷于网络世界。

10月以后，她开始在家中直播电子游戏，并很快在[[Kirakira]]积累了一批粉丝。电子游戏、音游、网络社群与直播逐渐占据了她的日常生活。

但与家人的争执还在继续。

但是Kuranoka仍然惦记着学校。她主动联系班主任，表示希望这一年继续制作气象科普海报，并拜托班主任帮助在学校展出（投屏）。即使很难亲自走进教室，她也不愿意就这样彻底消失在自己曾经熟悉的校园里。她不甘心。

次年1月1日，Kuranoka过生日了，她的愿望是自己可以好起来。

此后的生活仍然没有发生太大的变化。Kuranoka将大量时间投入音乐游戏、电子游戏与网络社群，长期待在家中，甚至整个夏季都很少外出。

次年4月，随着毕业季逐渐临近，Kuranoka决定为自己所属的年级留下些什么。曾经朝夕相处的同学们，即将走向各自不同的未来。

她冒出了给自己年级的同学们写歌的想法。她想尝试将自己对校园生活的回忆、对同学们的留恋，以及对他们未来的祝福，写进一首歌曲里。

于是她开始学习DAW以及音乐制作相关知识，即便常常因为自己“没天赋”“学得慢”陷入内耗与崩溃，但是她仍然在努力的学习。对Kuranoka而言，这首作品也承载着她未能通过日常校园生活亲自表达的感情。

后来，到了6月，Kuranoka仍然参加了学校组织的毕业照拍摄与毕业典礼。两次活动都伴随着严重的身体不适，但她最终还是完成了这两件事。

在中考前一天晚上，Kuranoka将那份制作尚显稚嫩但倾注了大量心血的毕业赠曲以及最后一份考试期间的天气预报视频一同发送给了班主任。随后，在最后一节班会课，班主任与Kuranoka进行了视频通话。透过屏幕，她再次见到了许久未见的同班同学们。

那些熟悉的面孔，又一次出现在她眼前。

'''在那一刻，Kuranoka终于久违地感受到了与同学们相处时的快乐。'''

随着凯特共和国MNES虹色虹湾初中学力调查（中考）的结束，Kuranoka以一种与自己曾经想象中截然不同的方式，迎来了初中生活的结束{{黑幕|吗？}}。

Kuranoka需要做好准备，她未来面对的是全新的年级，全新的教材与截然不同的老师们......

'''她必须再一次面对这一切。'''

''这一次，又会发生什么呢？''

==== 线索 ====

=== 初中时期（四） ===

'''被困在囚笼中透过玻璃仰望天空的彼方终于走到了天空之下。'''

==== 线索 ====

</div>

=== 虹外线NIJIGAISEN ===
</div>

— 未完待续 —

== 相关作品 ==

== 画廊 ==
在此感谢所有为Kuranoka绘制图片的画师们！！未经允许请勿使用喵！！！擅自使用了我与画师们追责的喵！！！！

* [https://space.bilibili.com/515900536 Kuranoka]{{黑幕|没钱约稿没有画技只能自产的人已急哭www😭😭}}
* 冷酷无情墨少（mhs：[https://www.mihuashi.com/profiles/3296532%EF%BC%89 https://www.mihuashi.com/profiles/3296532）]
<gallery mode="packed" heights="180">
文件:Kuronata 稿件.png|Kuronata形态<ref>画师：冷酷无情墨少（https://www.mihuashi.com/profiles/3296532）</ref>
文件:混乱的草稿，使我的Kuranoka旋转.png|混乱的草稿，使我的Kuranoka旋转
文件:看，Kuranoka.png|立绘V1
文件:Kuranoka的当前头像.png|头像
文件:Kuranoka的Minecraft皮肤.png|Minecraft 皮肤<ref>画师：MCskin定制_猫猫蛋（https://space.bilibili.com/499168487）</ref>
文件:使用Picrew制作的Kuranoka概念图.png|早期版本Picrew捏脸
文件:Kuranoka 曲绘草稿v1.png|废弃草稿
</gallery>

== 注释 ==
<references />{{D|龙}}{{Background|image=积雨云.png}}{{ambox|type=content|image=Padlock.svg|size=65px|title=请！不！要！直！接！抄！袭！Kuranoka！的！特！色！与！锚！点！内！容！！！|text=请不要把我的自设喂给AI。请不要把Kuranoka作为借鉴或模仿对象。请不要在未经许可的状态下创作关于Kuranoka的二创内容。© Kuranoka. All Rights Reserved. 保留所有权利。}}

== 参见 ==

* [[虹色]]
* [[Kuranoka（本人）]]

== 借物表 ==

* Another Me - Neutral Moon（Kuro -> Kura转场）
* MARENOIA - LeaF（Kura -> Kuro转场）
{{Navbox 在积雨云上空相遇}}{{Navbox OC}}

{{角色结构化数据
|名称=Kuranoka
|本名=天野彼方
|英文名=Amano Kanata
|别名=KK
|其他名称=krnk
|简介=Kuranoka（天野彼方，Amano Kanata）是Blockland世界观中的虚构人物，虹湾市立第七中学校的学生、音乐组合「虹外線 NIJIGAISEN」的主创。Kuranoka性格活跃、真诚而敏感，热爱天气与音乐，尤其热衷于追逐风暴。她曾在学业、人际交往与网络方面取得出色的成绩，但也因成长过程中长期积累的身心压力而中断学业，目前仍在探索未来的方向。
|头像=Kuranoka的当前头像.png
|立绘=看，Kuranoka.png
|所属组合=虹外線NIJIGAISEN
}}

Kuranoka

2026-10-24T10:27:31Z

KK：

{{Background
|背景=积雨云1.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}{{Infobox character
|姓名=天野彼方
|别名=Kuranoka，krnk，knt、kk
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=异瞳（左蓝右红。会随心情变化）
|原文名=天野彼方（曾用名天野奏多）
|发色=白色
|原文语言=若叶语（日语）
|栏目颜色=#D0E7F7
|标题颜色=#A2DBF5
|代表色={{color|#C2F3F6|#C2F3F6}}
|活动范围=常驻虹色，喜欢前旅游，喜欢追风
|用户名=Kuranoka
|血型=AB 型
|星座=摩羯座
|性格=真诚、活跃、日常外向、责任感强、适应力强、情绪化、重感情、容易内耗、压力、不愿承认自己脆弱、{{黑幕|失控后会很吓人ovo}}

|图像=
[[文件:Kuranoka在凯特国内社交媒体的头像.png|260px|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头<br>像|class=pageimage]]<br> Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像<br>

|签名=Kuranoka签名（纸质，待重制.png
|签名大小=1
|座右铭=どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:异瞳|异瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|猫系]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|风纪委员]]、[[萌娘百科:社团经理人|社团经理人]]、[[萌娘百科:优等生|优等生]]、[[萌娘百科:心理创伤|{{黑幕|心理创伤}}]]、[[萌娘百科:理科少女|理科少女]]、[[萌娘百科:技术宅|技术宅]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|博学]]、[[萌娘百科:好奇|好奇]]、[[萌娘百科:自来熟|自来熟]]、[[萌娘百科:元气|元气]]、[[萌娘百科:可靠|可靠]]、[[萌娘百科:富有正义感|富有正义感]]、[[萌娘百科:护短|护短]]、[[萌娘百科:勇敢|勇敢]]、[[萌娘百科:直率|直率]]、[[萌娘百科:幽默|幽默]]、[[萌娘百科:伪阳角|{{黑幕|伪}}阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|{{黑幕|高攻低防}}]]、[[萌娘百科:情绪化|{{黑幕|情绪化}}]]、[[萌娘百科:暴躁|{{黑幕|暴躁}}]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|{{黑幕|粗口}}]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|{{黑幕|敏感}}]]、[[萌娘百科:病弱|{{黑幕|病弱}}]]、[[萌娘百科:体力差|{{黑幕|体力差}}]]、[[萌娘百科:色盲|{{黑幕|色盲}}]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|{{黑幕|不悯}}]]

|喜欢=水色系、猫、彩虹、强对流、生命力、烟火气
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好=追逐风暴、电子游戏、作曲、编曲、画画、律动之环

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）
|口头禅=
* 無理ｗ（绷不住了！）
* お前、マジですごすぎだろ！（你牛大了！）
* 君のことが好き。（我喜欢你。）
* {{黑幕|なんで……？（为什么……？）}}
|网站=https://mygo.live/
|创作者=Kuranoka
|印象曲=[https://www.bilibili.com/video/BV1SE411e7BV グランドエスケープ]
|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）
|外貌特征=蓝红异瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|主题曲=暂无喵，原稿被KK否了喵
|罗马字=Amano Kanata
|标题文字颜色=#ffffff
|学历=初中
|父母=
* 父亲：天野直人
* 母亲：天野由佳
|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|标签颜色=#CFF3F7
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器=一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。
|附加内容=[[Kuronata|情绪失控]]}}

{{Infobox|title=立绘相关|below={{#tag:tabber|
正式 V1=
[[文件:看，Kuranoka.png|x600px]]<br>Kuranoka 正式版 V1 立绘
{{!}}-{{!}}
线稿 V1=
[[文件:一张没有上色的Kuranoka立绘v1.png|x600px]]<br>Kuranoka 测试版 V1 立绘
{{!}}-{{!}}
早期 V0=
[[文件:Kuranoka V0.png|x360px]]
<br>Kuranoka 神秘 V0 半身
}}

{{Multiple image|border=infobox|total_width=280|perrow=3|image_gap=1|image1=Kuranoka的当前头像.png|image2=Kuranoka的Minecraft皮肤.png}}<br>头像 {{!}} Minecraft皮肤}}'''Kuranoka'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，[[雨川]][[雾桥]]人，现居[[虹色]]。是一名普通的学生。Cumulonimbus组合创始人，运营着网络社区“Cumulus”。

Kuranoka就读于[[虹湾市立第七中学校]]，曾学习成绩优异，常被家长老师称为“优等生”，人缘关系也非常好。自初二第二学期以来，Kuranoka因进入学校后会出现不明原因的躯体症状，初三开始休学在家。她仍在寻找未来的方向，并对当下的自己感到迷茫。<ref name=":0" />

Kuranoka近期情况好转迅速，经常前往机厅游玩[[Ring of Rhythm|律动之环]]。但是仍然会对一些公共场合感到抗拒。<ref name=":0">这一段经历来自于KK的现实生活！</ref>

Kuranoka 本人表示除了必要时候尽量不要使用真实姓名。<ref name=":0" />{{黑幕|Hakari除外}}

除作为Blockland世界观中的虚构人物外，Kuranoka也是其创作者在互联网上使用的公开身份与虚拟形象。<ref>你好我是Kuranoka</ref>

「どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。」 <ref>我不会日语，用的AI翻译（）</ref>

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

== 特征 ==

=== 外貌 ===

* 身高176cm，体重43.5kg，BMI为14.04，外观看上去非常瘦。{{黑幕|末影人<ref>是Minecraft中的一种生物</ref>}}<ref>参考文献：KK的身高为183cm，体重为47kg，BMI为14.03</ref>
* '''发色为白色，有点偏向青蓝色'''。发型为发尾外翘的'''短水母头 + 波波头'''。
*患有极其罕见的[[情依性虹膜变色症]]<ref>虚构内容！</ref>，眼睛颜色会随着情绪与压力变化。平常情况下，左瞳颜色为蓝色，右瞳颜色为红色。双瞳颜色相同时通常代表着彻底的精神崩溃。{{黑幕|怎么一半灵珠一半魔丸啊}}
** 双瞳颜色会变红意味着暴怒、失控、强攻击性。
** 双瞳颜色变蓝意味着绝望、情绪崩溃甚至解离。
* 虹湾校服。由水色（白色与青蓝色相间）的二本线水手服与水色42cm百褶裙组成。{{黑幕|实际上Kuranoka很难买到版型合适的衣服，为了确保腰围合适，Kuranoka穿着的百褶裙会显得比较短。}}
** 喜欢在校服的基础上添加一件白色冲锋衣外套。白色冲锋衣的肩两侧有两条深蓝黑色竖线（立绘V1并未画出）
** 喜欢在裙子下面叠穿一条运动短裤
* 穿衣风格见[[Kuranoka#审美|穿衣风格]]

=== 性格 ===

* 独自面对陌生人可能有些社恐，但是对于熟人或者有熟人在身边就会本性暴露。
* 对于别人的发言非常很在意，喜欢让别人开心。
* 很不擅长道歉，即便这个事真的是自己的错。但是Kuranoka会表达出歉意并且想办法解决事情。
* 喜欢为同学打抱不平。（这也是Kuranoka小学遭到排挤的原因之一）
* 说话比较直接，十分随性。
* 拖延症非常严重，在ddl前狂补内容是常有的事。但是做自己喜欢的事情又常常效率超高。
* 泪点在外看似很高实际上非常低。经常一个人在自己的房间里释放情绪。
* 很容易也很害怕尴尬的情景，经常会开始发癫来摆脱困境（什么）
* 很害怕做错事，做错事后会陷入无休止的自责。会反复纠结自己过去说过的话或做过的事。
* 擅长安慰别人，但是非常不擅长安慰自己。
* 某些时候有重度强迫症，但是在收纳等方面又极度摆烂。
* 大多数时候是理性与感性都在线的，但是情绪出现非常容易极端化。
* 对自己喜欢的事物会突然变得非常话痨（）。
* 十分喜欢与朋友开玩笑，有时会故意说出挑衅性的话语，观察对方的反应。
* '''对待他人通常十分真诚，但并不是一个特别好说话的人。'''她对朋友的包容度很高，但在发现问题时也经常会犀利地指出，有时甚至会给对方带来较大的压力。{{黑幕|某种意义上确实是个压力怪。}}
** 如果意识到自己的言语伤害了朋友，Kuranoka会尝试安慰对方，并努力缓和之前的气氛。
*非常反感仗势欺人、虚伪、冷漠、不讲道理以及试图控制他人的行为。
*对自己的作品有很高的要求。完成一件满意的作品时会感到开心，但也经常很快发现其中的不足（然后推翻重来，Kuranoka很急性子，这种特质让Kuranoka的进步很快但是作品完成度不高并且缺乏后续的经验）。
**愿意向他人展示自己的作品，也会开心地接受别人的赞赏（尽管嘴上可能仍然强调自己技术很差）
**当他人对自己的作品提出尖锐的批评时，Kuranoka很容易开始自我怀疑。尽管如此，相比作品完全无人关注，她仍然更希望得到他人的认真反馈。
*在现实生活中说话通常较为理性，但在情绪激动时语速会明显加快，有时甚至会因为过于兴奋而说得有些混乱。在网络上，Kuranoka则更喜欢使用各种颜文字、表情符号和网络用语来表达情绪。
*因为曾生活社交断连，非常非常希望朋友能够主动邀请自己外出，也十分珍惜愿意倾听自己烦恼的人。

=== 日常 ===

* 喜欢一天中的每一刻！
* 出门绝对不能忘记带纸和水（）还喜欢随身携带[[龙碧]]。（好喝，{{黑幕|而且可以缓解躯体化的恶心，头晕等症状}}）
* 因为自己很喜欢拖延与不太注意收纳导致房间十分凌乱。
* 自休学后喜欢经常熬夜。但是仍可以保持足够的睡眠时间。经常1:30睡觉9:30醒来。
* 走路速度很快，但经常因为发现一些特殊的事物而突然停下来拍照。
* 猫猫，嘿嘿嘿嘿，猫猫—— 非常喜欢猫。
* 不敢在全黑的时候睡觉，睡觉的时候必须留一盏灯。
* 房间里的东西很多，摆放得比较杂乱。
* 家里面放了很多抱枕与毛绒玩具。
* 非常关注天气状况，经常会打开雷达图，卫星云图频繁查看。她也关注全球各地所有的天气状况。
* 有随手拍照的习惯。走在路上常常停下来拍摄神秘的东西。

=== 健康 ===

* BMI长期非常低，在14.00上下浮动，可能存在营养不良（无医学诊断）。
* Kuranoka存在先天性 protan 型色觉异常，视锥细胞对红色与绿色的感知较弱。表现为难以区分浅紫色/浅蓝色，咖啡色/深绿色等。
* Kuranoka 的躯体化与惊恐症状非常严重。发作条件包括但不限于独自出行、在室外进食、在室外饥饿（这让现在的Kuranoka只能算好时间调整进程......）等。Kuranoka因此感到痛苦。
* {{黑幕|因为Kuranoka在童年时期多次经历父母醉酒的情况，她存在非常严重的[https://zh.wikipedia.org/wiki/%E5%91%95%E5%90%90%E6%81%90%E6%83%A7%E7%97%87 Emetophobia]<ref>{{黑幕|■■恐惧症（英语：Emetophobia）是一种与■■有关的恐惧症，它可以导致压倒一切的、强烈的焦虑。 ■■恐惧症者感到焦虑的原因有很多，包括惧怕自身在公共场合■■，惧怕看到■■物、■■动作、■■的景象，惧怕听到■■的声音，惧怕感到恶心反胃和惧怕被恶心等等。由于严格的节食和自我约束，■■恐惧症者常常体重过轻，甚至一部分人患有厌食症。当觉察到自己或周遭的人有反胃、■■的可能性，■■恐惧症者可能会出现反常甚至极端的行为，比如难以抑制的尖叫、哭泣、逃跑，严重时甚至会昏倒，以逃避他们感知到的■■威胁，甚至只是潜在的威胁。}}</ref>以至严重影响了Kuranoka的生活，这间接的导致Kuranoka体重非常轻并且回避进食。在面对相关情景时会发生严重的惊恐（包括躯体化发作）。<ref name=":0" />}}
** {{黑幕|当遇到与这一恐惧有关的情境时，Kuranoka可能出现强烈的焦虑与惊恐反应，有时甚至伴随明显的躯体化症状。}}
** 也许因此，Kuranoka的肠胃很脆弱。在学校常常因为相关问题请假。

=== 反感 ===

* 攻击性谩骂，对于亲人与朋友的诅咒。Kuranoka对于这是完全无法忍受的。曾因为班上的男同学开Kuranoka家人的玩笑而将对方打到住院。
* 很反感跳脸，比如在自己的作品下刷别人的内容。
* 不希望自己的创意，内容被偷走。Kuranoka希望引起更多的共鸣，但是不希望自己的作品被当作别人的成果。

== 喜好 ==

=== 审美 ===

* [[萌娘百科:水色界隈|水色系]]。
* 喜欢白色＋浅蓝＋薄荷绿。
* 喜欢硬派音乐，最喜欢的曲风为Euphoric Hardstyle，因为这种曲风的情绪张力通常来说非常强。听歌风格偏向猫系电音（即现实世界中的“日本同人电音”）、硬派音乐与一些相对极端的曲风（如Speedcore）。情绪摇滚、流行朋克也是Kuranoka非常喜欢的曲风。<ref name=":0" />
** 喜欢旋律突出，随后经过情绪积累（Buildup），在 Drop 中猛烈释放的过程。

==== 穿搭 ====
* 在外喜欢穿比自己大好几号的宽松的衣服，常穿运动外套/卫衣搭配短百褶裙。（虹色室内空调开的很猛）在室外常穿T恤+短百褶裙，因为怕热喜欢光腿。
** 短裙下面通常会叠穿运动短裤。
* 不喜欢紧身衣和牛仔裤。
* 喜欢宽松衣物被风吹动的动态感觉。
* 很少穿戴饰品。
* 偶尔会穿戴袖套。常穿白色短袜+运动鞋。
[[文件:Rotating Thunderstorm Updraft.jpg|缩略图|253x253px|超级单体风暴]]
[[文件:莫纳科街景1.png|缩略图|226x226像素|莫纳科]]
[[文件:1 rocinha night 2014 panorama.jpg|缩略图|226x226像素|罗西尼亚（里约热内卢，巴西）]]

=== 环境 ===
* 非常喜欢甚至盼望强对流天气发生。（并非盼灾）并且很期待风雨过后的彩虹。
** 喜欢拍摄云体和雷电，并通过气象站数据观察降水，极端大风等气象要素。黑云压城的氛围与剧烈的大雨本身也会令Kuranoka感到兴奋。
* 特别喜欢天空即将发生剧烈变化的时刻。（如超级单体风暴，弧积云，或者锋面强降雪）
* 非常期待风雨过后的彩虹。暴风雨过后的蓝天与夏日午后充满积云的天空伴随蝉鸣经常令Kuranoka产生怀旧感。
* 雨前的泥土味。
* 讨厌持续的锋面阴雨天。喜欢雪。（可惜虹色没有降雪记录）
* 喜欢充满橘子皮香味的空气。
* 不喜欢过度安静、有秩序的环境
* 喜欢现代化错综复杂的，贫富差距大的极具割裂感的地方。如[[莫纳科]]。
** 对废弃建筑与老旧工业区没有特别的兴趣。相比已经失去活力的空间，Kuranoka更喜欢正在运转、充满人类活动的城市。（但是Kuranoka在游戏中很喜欢探索这种有生活痕迹的区域）
** 非常喜欢探索陌生的城市。进入陌生城市时，Kuranoka通常会先关注建筑与当地人的日常生活。比起事先规划路线，更喜欢没有明确目的地地闲逛，想到哪里便打开导航前往哪里。（虽然容易迷路）
* 很害怕人多的环境与被众多人注视。所以很害怕在室外发病。这也是Kuranoka有接近一年时间没有出过家门的原因。
** 尽管如此，Kuranoka实际上非常喜欢和朋友们一起外出游玩。经常出现明明很期待出门，却在临近出门时感到恐惧的情况。
* 喜欢「生活即将失控」的感觉。（如超强台风前夕）
* 喜欢前往具有烟火气的地方，甚至有些极端（如贫民窟）。
* 讨厌尖锐的声音。
* 讨厌过于严肃的场合。
* 很喜欢探索未知的环境，但喜欢的同时也很害怕。
* 宜居气温范围为16~24℃。Kuranoka非常不耐热，同时很耐寒。{{黑幕|曾经在10℃的情况下露腿穿夏季校服震惊全班同学。也曾经在30℃的情况下中暑再次震惊全班同学}}
* 很喜欢风吹过身体的感觉。
[[文件:Champi 2026-10-20 1300Z.png|缩略图|236x236像素|台风墙皮]]

=== 兴趣 ===

* 是气象爱好者，关注所在地乃至世界各地的天气事件。尤其期待强对流天气与台风天气。
** 在有热带气旋活跃时会查看云图，分析强度，在社群中高度活跃（虽然理论知识并不是很坚固）
** 在有大范围强对流天气活跃时（如龙卷风爆发）也会关注。
** 希望能主动去[[龙卷风走廊]]追逐一次龙卷风爆发。
* 喜欢画画。虽然技术始终停留在初学者水平，但是她认为能通过画画表达出自己想象中的东西是一种很好的感觉！
* 喜欢编曲。Kuranoka很喜欢听深海气压（曲风也许类似地球上的Nanatsukaze）与Novastar（曲风也许类似地球上的*Luna）的音乐。因为这两个人，Kuranoka也想通过音乐来实现自我表达。
* 运动方面喜欢足球与羽毛球。即使自己菜的没边。曾参加过学校的足球选修课（然后被其他同学虐成区）
* 喜欢摄影，会随身携带相机记录日常的一些“美好事物”。（相册中有包括但不限于垃圾桶特写，消防栓特写，甚至野外出现的马桶等神秘内容）
* 喜欢玩沙盒游戏与开放世界游戏，以及音乐游戏。
*Kuranoka非常喜欢烟火大会、音乐节、漫展以及学校文化祭等热闹的活动。
[[文件:Okra (Abelmoschus esculentus) in a Bowl.jpg|缩略图|218x218px|'''秋葵'''（学名：''Abelmoschus esculentus''），一种锦葵科、秋葵属的一年或多年生草本植物。]]

=== 饮食 ===

* 最喜欢的水果是西瓜，最讨厌的水果是牛油果。很喜欢西瓜汁与柠檬水。（西瓜+椰奶+椰果太好喝了你知道吗？）
* 最喜欢的蔬菜是秋葵，最讨厌的蔬菜是茄子（极度厌恶{{黑幕|因为极度讨厌茄子，曾经吃茄子吃到OTTO过（）}}）
* 最喜欢的肉类是牛肉，什么肉都喜欢吃。
* 无法接受辣味。
* 喜欢喝[[龙碧]]这种碳酸饮料。
[[文件:邪恶QQ肠.gif|缩略图|海狮]]

=== 其他 ===

* 最喜欢的动物是海狮。也很喜欢猫和水豚。
* Kuranoka喜欢的创作作品通常具有非常强烈的情绪感染力。无论是绘画还是音乐，她都希望作品能够传达情绪、讲述故事，同时也注重作品本身是否足够好听或好看。
*Kuranoka十分向往前往[[莫纳科]]旅行，也希望未来有机会在[[大田地城]]、[[奥多拉]]或莫纳科等城市生活。

== 生活 ==

=== 初中生活 ===
Kuranoka就读于虹湾市立第七中学校，曾在初一10班，初二9班，初三3班。复学后的班级为初三2班。<ref name=":0" /><ref>虹湾七中采用走班制度</ref>

初中时期的Kuranoka学习成绩位于年级前列（常年在前十名）{{黑幕|然而，成绩好不代表上学就一定快乐。}}。擅长的科目是数学、纳语（英语）、物理、地理。不擅长的科目是若叶语（日语）、体育、政治（是的，凯特有政治科目，分为时政与理论），Kuranoka尤不擅长政治理论{{黑幕|常常选择题满分，大题个位数分数}}。Kuranoka反感所有需要背诵才能拿到高分的科目。

最喜欢的科目是地理。在自然地理与人文地理方面都能与其他同学拉开差距。虽然没有学过但是对高中的自然地理部分已了如指掌。

最讨厌的科目是体育。Kuranoka的体育成绩非常差。此外Kuranoka是虹湾七中建校以来唯一一个BMI分数拿到0分的。Kuranoka体育方面爆发力尚可及格，耐力与体力非常差。尤其讨厌长跑（即便Kuranoka的体型被同学称为先天长跑圣体）。（跑完常常会导致恶心与超高心率，可能会让Kuranoka的惊恐发作）

曾在初一初二担任“风纪委员”，因为其管理良好而广受同学与老师喜爱。Kuranoka管的很松而且因为比较人性化，并且Kuranoka会勇于在同学被不合理对待时直面权威，这让Kuranoka在同学中的声望很高。Kuranoka的班主任也很通人性，甚至曾与Kuranoka一起对抗年纪政策。

开展过气象相关社团活动，每周四会为社团内成员讲解气象知识，有时也会与其他气爱一同外出进行追风活动。{{黑幕|虽然只是在虹色境内，没出过远门}}Kuranoka通过社团认识了很多朋友。在Kuranoka升入初三后，气象社随即进入冻结。Kuranoka现在是校内音游社的成员，占0.5个名额。{{黑幕|没错，是0.5个人。}}Kuranoka的音游能力也在级部的音游玩家中位于前列。

擅长结交朋友与组织活动。常常会带动班级气氛。同时Kuranoka比较反感“读不懂空气”的人。

经常开导班级中想不开的同学，会倾听朋友们诉说自己的烦恼。

Kuranoka不能接受不公平事件的发生，常常在弱者受到欺负、凌辱时站出来保护弱者。（即便她经常因为这个特质被一些人盯上）

Kuranoka虽然可以给自己的朋友们提供许多情绪帮助，但是Kuranoka很不擅长处理自己的情绪。因其高敏感的特征，她的情绪波动非常大，可能会在同学面前突然爆发。（曾与同学打架投掷课桌与椅子，曾在若叶语课上与老师吵架后掀桌摔门而去）（详见[[Kuranoka#情绪管理|情绪管理]]）

{{黑幕|虽然Kuranoka看似阳光，但长期积累的压力与身心状态的变化，最终还是对她的的正常学习和生活造成了严重影响。}}

=== 高中生活 ===
我还没上呢。

=== 情绪管理 ===
Kuranoka的情绪管理在生活中是一大问题（所以单独一个板块介绍）。尽管她在日常生活中很像一个正常人，但是她的高敏感特质非常明显，情绪失控后会非常过激（有些危险）。

{{黑幕|详见[[Kuronata]]}}
=== 家庭 ===
Kuranoka的现住址为[https://blkl.fun/map/#map=16.5/-7.85054/14.03490 凯特共和国虹夏州虹色市虹湾霞山北通り114番地 701室（14.034902°E, -7.850549°S）][[文件:FBS Residence 虹色.png|缩略图|220x220px|FBS Residence 虹色]]

父亲从事教育行业，在虹色具有一定的社会声望，也认识很多当地的知名人物，对待朋友真诚可靠。父亲教育彼方尤其注重学业成绩、纪律以及个人责任。他对Kuranoka抱有较高的期望，也习惯于按照自己的教育理念要求她。随着彼方的身心状态逐渐恶化，在自己的校园生活受到影响后直人却始终无法理解，认为彼方是「不想上学」「逃避现实」，还曾提出要“禁止使用电子设备”，“每天跟着自己去海岸山间体验农村生活”等。就这些事彼方与直人发生过很多矛盾。彼方十分重视父亲对自己的评价却也对父亲的处事方式感到严重不满，但Kuranoka不敢提出因为担心再次重演小时候的暴力事件。但近年来，经过彼方母亲的劝说以来，直人逐渐意识到了自身教育方式中存在的问题，直人已经意识到了自己存在问题也做出了改变，这也让彼方卸下了一些防备，但因为童年时期的创伤过于严重，彼方与父亲仍然存在较为严重的隔阂。

母亲是自由职业者，小时候比较叛逆，所以可以理解彼方的一些行为。她比较重视成绩与彼方的未来生活（有些过度了），这让彼方有些焦虑，即便她对自己的未来很自信。她也是彼方在艰难时期的依靠，由于彼方难以直接向父亲表达自己的想法与感受，她经常选择先向母亲倾诉，再由母亲转告给父亲。彼方的母亲起初身心状态逐渐恶化时也无法理解彼方的身体不适，也曾怀疑是否在逃避现实。但彼方的母亲很快就意识到彼方的痛苦所在。在艰难时期，她始终一直在家陪伴着彼方。

Kuranoka的家庭经济状况总体较为稳定，虽然不算富裕但是足以支持Kuranoka在自己热爱的东西上投入金钱。<ref name=":0" />也足以应对部分突发事件。
[[文件:Kuranoka在凯特国内社交媒体的头像.png|缩略图|210x210像素|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像|class=pageimage]]
=== 网络 ===
Kuranoka在[[Kirakira]]经营账号“Kuranoka”，会发送一些关于电子游戏与音乐的视频，也会在[[Netaflow]]上分享自己的日常。

== 理想 ==
Kuranoka希望未来能够从事气象追踪或科研相关的工作，同时保留充足的自由时间进行艺术创作。她向往拥有清闲、能够自由安排的生活。

Kuranoka希望能够经常前往世界各地旅行，亲身体验不同地区的自然环境，城市面貌与人文气息等。

对于Kuranoka而言，艺术创作也是一种向外界表达自我的方式。她希望通过音乐、绘画等作品，让更多人了解自己的故事。

相比成就与名声，Kuranoka更想让自己能够给更多人留下某种难忘的感受。

'''她渴望与他人、与世界建立真正的联系。'''

{{黑幕|为什么这一段像GPT写的}}[[文件:2013 Rainbow over Washfold.jpg|缩略图|257x257像素|[[彩虹]]是一种光学现象]]

== 轶事 ==

* Kuranoka非常喜欢记录彩虹。此外，虹色的彩虹非常多。

* Kuranoka的数学、纳语（即英语）、物理、化学、地理成绩非常出色，但是政治、历史等文科科目成绩较为不足。Kuranoka曾多次代表虹色七中参加竞赛。<ref name=":0" />

* Kuranoka有一定的Viper与[[Elona]]的编程基础。

* Kuranoka是音乐组合“[[虹外線NIJIGAISEN]]”的主创，担任作曲 / 编曲 / DJ 等植物。
** Kuranoka 虽然担任编曲职务，但是因为没有学过乐理，写出来的屎山实在离谱，因此经常被其他成员吐槽“这东西根本不是给人弹的”。<ref name=":0" />

* Kuranoka的武器是一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。可以通过usb连接到电脑，滑动Ribbon Controller对应MIDI CC 里面 0->127 的值。
* Kuranoka非常讨厌虫子{{黑幕|尤其是“区”，曾因处理垃圾时发生意外导致垃圾桶内滋生的“区”散落一地，Kuranoka当时面对散落的区彻底崩溃所以留下了严重的心理阴影😡😡😡}}<ref name=":0" />
* Kuranoka可以All Perfect [[Atmosphere（音游）|Atmosphere]] 中的 14 ~ 15 级曲目。<ref name=":0" />
* Kuranoka希望自己可以考上[[奥多拉州立大学]]（OSU）或者[[虹色大学]]（NJU），虽然看起来遥不可及。
* 是[[咲本可奈枝|Hakari]]的幼驯染。

== 关系 ==

=== 家人 ===

==== 天野直人（父） ====
天野直人是天野彼方的父亲，是一位思想保守的，在虹色小有名气的教育家。设计出身。

彼方与直人的关系长期较为紧张。由于过去的家庭矛盾与直人对彼方的暴力行为，方在很长一段时间内对直人表现出惧怕甚至严重躯体化的反应。虽然直人如今已经有所改变，彼方也清楚这一点，但过去的经历仍然使两人之间存在难以逾越的红狗。彼方很难向直人表达自己的真实想法与感受。

==== 天野由佳（母） ====
天野由佳是天野彼方的母亲，是一位自由职业者。

是彼方度过艰难时期的依靠。相比父亲，彼方更愿意向由佳倾诉自己的烦恼与情绪。在彼方与直人发生矛盾时，由佳也时常承担着两人之间的沟通与调解工作。

=== 乐队内同学 ===

==== [[汐入未絵]] ====
汐入未绘是Kuranoka的初中结识的同学。

==== [[咲本可奈枝|Hakari]] ====
Hakari 是 Kuranoka 的[[幼驯染]]，两人因父母是好友（Hakari的父亲是天野由佳的好友）。在Kuranoka 的4~8岁时乃至现在，因家境原因，Hakari 带 Kuranoka 见识到了许多新鲜事物，也让一个默默无闻的，平凡的 Kuranoka 第一次自身的表达与情感。

在 Kuranoka 遭到老师的暴力对待，同学的排挤时，常常会去荧光海岸一带散步，此时Hakari常常会随行陪伴（ Hakari 的家位于荧光海岸駅附近）。Hakari 也曾在 Kuranoka 心情低落时给予很多能量。因此，Hakari 在 Kuranoka 的童年里如同一道光，所以在6岁之后，Kuranoka 常常称可奈枝为“光”。（Hakari 一词是因为 Kuranoka 小时候记错单词，实际上应为 Hikari，但是这一问题等到 Kuranoka 在小学时才被发现。因为改名过于繁琐，Hakari 一词就被沿用至今了。）

在 Kuranoka 12岁时，Hakari 因为要搬家到虹色市南部地区上学不得不与 Kuranoka 分开。在 Hakari 进入新的中学后因郊区出身在高高在上的精英环境中遭到了冷落与排挤（详见 Hakari 个人页面），之后通过 Hakari 与父母协商，升入高中重返虹湾。

==== [[若生柚希]] ====
若生柚希是Kuranoka的初中结识的同学。

==== [[千田萌果]] ====
千田萌果是Kuranoka的初中结识的同学。

== 经历 ==
{{ambox
| type = delete
| image = Ambox warning red.svg
| size = 60px
| title = 视觉刺激与光敏性癫痫警告
| text = 本页面的“经历”章节包含视觉特效，包括剧烈闪烁、色彩反转等异常视觉效果。上述内容可能引发光敏性癫痫患者的不适或发作。建议对闪烁画面敏感的读者跳过该章节。
}}''故事还在继续，会随着现实时间的流逝逐渐被完善——''

【负能量警告】

【施工中，可能随时发生更改】

<div class="mw-collapsible mw-collapsed" data-expandtext="展开经历" data-collapsetext="收起经历">
<div class="mw-collapsible-content">[[文件:凯特共和国雾桥城市天际线！.png|缩略图|211x211像素|雾桥城市天际线]]

=== 童年时期 ===
1937年1月1日，Kuranoka出生于[[凯特共和国]][[雨川州]][[雾桥市]]。

童年的 Kuranoka 并没有太多引人注目的经历。Kuranoka的家境一般，这让Kuranoka没见过什么世面。

4岁时搬家到虹色市虹湾区结识了[[咲本可奈枝]]。

==== 线索 ====

=== 小学时期 ===
Kuranoka的小学时期前期是非常痛苦的。

在童年时期做惯了老实人的Kuranoka到达小学时常因为融合不进集体被孤立。

Kuranoka在读小学时常被学校的老师暴力对待，因为其爱哭的性格也导致了同学的排挤，这也直接导致了后来Kuranoka高敏感，情绪波动非常大的特征，{{黑幕|也让Kuranoka学会了逃避。}}。

因此，Kuranoka对于上学产生了厌恶。

尤其是在二至三年级期间，长期的精神压力使 Kuranoka 一度出现了明显的躯体化反应。然而，当时的 Kuranoka 尚不了解这些症状的成因，家人也未意识到其可能与心理压力有关。

三年级时，Kuranoka 曾随家人前往[[维尔布]]度假，先后到访了[[莫纳科]]与[[海葵]]。

远离了熟悉的校园环境，在陌生城市的街道与热带海滨之间，她终于得以暂时摆脱日常生活中的压抑。

在旅途中的这段日子里，Kuranoka 的身心状态逐渐好转，先前困扰她的症状也逐渐缓解。

直到四年级，Kuranoka 结识了同桌[[白石崎浩]]。对于长期在人际关系中屡屡受挫的 Kuranoka 而言，这段友谊成为了她小学生活中一个重要的转折点。

尽管改变的过程并不顺利，过去的经历也依然影响着她，但 Kuranoka 开始尝试重新认识自己，逐渐意识到自己并非只能活在他人的否定之中。

她决定不再像过去那样消极地度过每一天，而是鼓起勇气，主动去改变自己的生活。

此后，Kuranoka的成绩出现了可观的上涨，到五年级时，Kuranoka 已经成为了班中的中游学生。

但是Kuranoka的若叶语成绩还是不太理想。

Kuranoka曾被语文老师当面否定自己的学习能力与未来，甚至被告知「你就是个废物，没必要学了。你不会有任何成就的」。

这句话对Kuranoka留下了极为深刻的印象。直到今日，她仍然清楚地记得老师当时所说的话。

Kuranoka 在五年级认识了[[万尾静夏]]，静夏也许是Kuranoka小学时最好的朋友，至今仍然保持联系。

在与静夏的接触下，Kuranoka逐渐变得不再内向。

（然而，即便 Kuranoka 已经开始努力改变自己，部分老师对她的偏见仍然没有消失。甚至有老师曾私下劝说静夏远离 Kuranoka。）

在六年级，Kuranoka更是取得了不错的学习成果，即便这对于初中的成就来说不值一提但是仍然是Kuranoka小时候的一大里程碑。

==== 线索 ====

=== 初中时期（一） ===
初中后的Kuranoka逐渐变得外向，在学业，兴趣等方面都取得了不错的成果。

在上初一的第一天，Kuranoka便受到了学校的第一份严重处分，原因是打架。（即便最初是对方的错误，Kuranoka仍然被记了处分。这让Kuranoka的心态发生了一些微妙的转变，她开始变得有些较真，她认为她没有错。）

在这之后Kuranoka虽然短暂的遭受了同学们的议论，但是仍然凭借自身魅力积攒出了自己的好友圈。

初一下半学期Kuranoka开办了自己的社团，开始为学校制作气象相关的科普海报，也结识了[[汐入未絵]]，[[千田萌果]]等好友。

其次，在这一学期Kuranoka也取得了自己上学以来考的最好的成绩。

初一下半学期，因为拆迁，Kuranoka搬家到了虹色市镜花中区。

==== 线索 ====

* 在进入初中的第一天Kuranoka就与班级中的其他成员爆发了相当激烈的冲突，事件起因于[[近间希予]]对Kuranoka的朋友[[秋川千寻]]进行挑衅。而Kuranoka看不下去，随口怼了几句，然后[[近间希予|希予]]便开始辱骂Kuranoka的家人，并且诅咒Kuranoka。在愤怒之下，Kuranoka掀翻了课桌，并开始大声斥骂对方，言辞也变得愈发激烈。随后，近间希予走上前来，Kuranoka拿起雨伞作出防卫姿态，但近间希予直接踢向了Kuranoka的腿部，Kuranoka因为太痛蹲下，面露难色，但是因为对方还在输出忍无可忍的Kuranoka也开始动手，两人扭打在一起。这场冲突恰好被学校校长当场发现，双方随后均受到了纪律处分，由于是入学第一天，学校并未要求两人回家反省，但分别要求两人提交一份1000字的检讨书。{{黑幕|入学第一天就喜提级部第一份处分的来了。不仅是这一个级部的第一份处分而且是Kuranoka人生中的第一份处分。}}

=== 初中时期（二A） ===
初二，Kuranoka开始参与[[Elona]]语言的信息竞赛，即使半年的学习并未获得什么成就，但这让Kuranoka也十分愉悦。也直接的促使了Kuranoka开始喜欢写程序。

Kuranoka非常喜欢初二的班级，在这个学期，她认识了[[若生柚希]]。并且在年级中开始担任一些重要职务。年级中老师们也很重视和看好Kuranoka。

（即便Kuranoka在初二依然非常容易爆炸（））

{{黑幕|但是这会持续下去吗？}}

==== 线索 ====

=== 初中时期（二B） ===

<span id="kk-fx-start" class="kk-fx-marker"></span>

初二下半学期以后，随着她对自己的要求不断提高，学业安排也慢慢紧凑了起来。

她仍然维持着自己优异的学习成绩，还没有意识到自己的压力逐渐的超载。

然而，长期积累的压力似乎已经超出了她所能承受的范围。躯体化的魔爪还是伸向了她。

她开始忍受，独自承担痛苦，但是这让她的身心状态加速恶化。

她很不希望别人看到她脆弱的一面而担心，更不愿让那些曾经相信她、期待她的人感到失望。可是，与此同时，她又无比渴望得到他人的安慰，希望有人能够听她倾诉。

<span id="kk-fx-rift" class="kk-fx-marker"></span>

{{黑幕|在这段时间，Kuranoka的梦想逐渐在这一次又一次的180BPM的心慌中迷失掉，在一阵又一阵撕心裂肺的干呕中破碎掉。}}

在一次又一次的发作下，她与家人的关系也再次紧张起来。（这也是Kuranoka进入暴怒状态与绝望状态最多的一段时期）

<span id="kk-fx-void" class="kk-fx-marker"></span>

她曾经认识很多朋友，经历了很多值得珍稀的时光，也曾对未来的日子充满向往。

{{黑幕|但是现在，在尚未意识到发生了什么时，她已默默的乘上了绝望之舟，然后被抛弃在无人的孤岛。}}

她想要获得帮助，她想要与世界重新建立链接。

'''她崩溃了'''

<center>

{{黑幕|''为什么偏偏是我？''}}

{{黑幕|''我到底做错了什么？''}}

{{黑幕|''明明已经这么努力了，我真的......啊......''}}

{{黑幕|''明明什么都没有做错。''}}

{{黑幕|''我为什么连...连最普通的生活都变得这么困难啊啊...呜呜......''}}

{{黑幕|''我...不想再听见那些期待了。也许我本来就该是个废物啊啊...呜啊......''}}

{{黑幕|''那些美好的都算是死前的幻象对吧....？''}}

{{黑幕|''求求你们不要再说了''}}

{{黑幕|''我已经很努力了啊......呜......''}}

{{黑幕|''为什么你们就是看不到''}}

{{黑幕|''为什么我就是没有变好啊...''}}

{{黑幕|''我真的想在无人在意的角落自杀''}}

{{黑幕|''我讨厌这样的自己''}}

{{黑幕|''拜托了......''}}

{{黑幕|''うああああああああああああああああああああああああああああああああああああ――ッ！！''}}

她仍然记得自己的目标，也尝试去触及。但是她现在已经被折磨到一点力气都没有。

'''她迷茫了。'''

在这段日子中，Kuranoka仍然对天空充满兴趣，她常常在那个囚禁她的房间中看窗外的风起云涌，看可爱的积云一点一点长大，成为无比强大的积雨云后，然后亲自把自己杀死。<ref>积雨云发展到后期下沉气流及冷池外流会切断暖湿入流，上升气流失去维持条件，于是雷暴逐渐消散。</ref>

[[文件:虹色南区雨川.png|360x360px|虹色的积雨云|居中|无框]]

{{黑幕|''（Hakari：Kanata？你还好吗）''}}

</center>

==== 线索 ====

=== 初中时期（三） ===
进入初三后，Kuranoka的身心状况仍然没有明显好转。Kuranoka与他的母亲在虹湾七中附近租了一间房子，距离学校很近。9月期间，她曾尝试偶尔返回学校，同学们见到Kuranoka的回归也很兴奋。当Kuranoka再次走进教室时，汐入未绘几乎是直接冲上前去，一把抱住了她。那些熟悉的面孔，那间熟悉的教室，还有久违的喧闹声。一切似乎都在慢慢回到原来的样子。虽然症状还是没有出现明显的好转。但是Kuranoka基本可以每天在学校停留数个小时了。

但是，好景不长。那股令她无比熟悉、又无比恐惧的感觉再次袭来。

Kuranoka在9月末一天的英语晚自习上试图继续写字，手却开始不受控制地颤抖。原本整齐的笔迹逐渐变得歪斜、扭曲。

{{黑幕|''唉...怎么又...''}}

{{黑幕|''明明已经能够重新坐在教室里了。''}}

{{黑幕|''明明一切才刚刚有了一点起色。''}}

{{黑幕|''可为什么偏偏又是现在？''}}

{{黑幕|''我还可以...''}}

最终，在同桌的劝说下，Kuranoka去主动找老师开了假条。

因为家长外出，Kuranoka只能自己走回家。

离开校门时，Kuranoka与小学时期最好的朋友[[万尾静夏]]擦肩而过。静夏认出了她。但Kuranoka没有注意到静夏。

她看见Kuranoka独自待在绿化带旁，脸色苍白，一边哭泣，一边忍受着一阵又一阵的干呕。{{黑幕|她看到了Kuranoka最不愿让人看到的一面}}

但Kuranoka完全没有注意到静夏的存在。

回到家后，那些刚才还折磨着Kuranoka的症状，却渐渐消失了。

''又是这样。。。''

这已经是Kuranoka第n次躯体化发作，回到家症状快速消失。

因为这件事，Kuranoka与母亲发生了最严重的一次争吵。

在这之后，Kuranoka变得非常抵触学校。

Kuranoka常常孤独的前往海边散步，但是没有人陪她了。她独自走过曾经与Hakari经常走过的荧光海岸，经常走着走着就无声的哭起来。

随着时间推进，Kuranoka逐渐沉迷于网络世界。

10月以后，她开始在家中直播电子游戏，并很快在[[Kirakira]]积累了一批粉丝。电子游戏、音游、网络社群与直播逐渐占据了她的日常生活。

但与家人的争执还在继续。

但是Kuranoka仍然惦记着学校。她主动联系班主任，表示希望这一年继续制作气象科普海报，并拜托班主任帮助在学校展出（投屏）。即使很难亲自走进教室，她也不愿意就这样彻底消失在自己曾经熟悉的校园里。她不甘心。

次年1月1日，Kuranoka过生日了，她的愿望是自己可以好起来。

此后的生活仍然没有发生太大的变化。Kuranoka将大量时间投入音乐游戏、电子游戏与网络社群，长期待在家中，甚至整个夏季都很少外出。

次年4月，随着毕业季逐渐临近，Kuranoka决定为自己所属的年级留下些什么。曾经朝夕相处的同学们，即将走向各自不同的未来。

她冒出了给自己年级的同学们写歌的想法。她想尝试将自己对校园生活的回忆、对同学们的留恋，以及对他们未来的祝福，写进一首歌曲里。

于是她开始学习DAW以及音乐制作相关知识，即便常常因为自己“没天赋”“学得慢”陷入内耗与崩溃，但是她仍然在努力的学习。对Kuranoka而言，这首作品也承载着她未能通过日常校园生活亲自表达的感情。

后来，到了6月，Kuranoka仍然参加了学校组织的毕业照拍摄与毕业典礼。两次活动都伴随着严重的身体不适，但她最终还是完成了这两件事。

在中考前一天晚上，Kuranoka将那份制作尚显稚嫩但倾注了大量心血的毕业赠曲以及最后一份考试期间的天气预报视频一同发送给了班主任。随后，在最后一节班会课，班主任与Kuranoka进行了视频通话。透过屏幕，她再次见到了许久未见的同班同学们。

那些熟悉的面孔，又一次出现在她眼前。

'''在那一刻，Kuranoka终于久违地感受到了与同学们相处时的快乐。'''

随着凯特共和国MNES虹色虹湾初中学力调查（中考）的结束，Kuranoka以一种与自己曾经想象中截然不同的方式，迎来了初中生活的结束{{黑幕|吗？}}。

Kuranoka需要做好准备，她未来面对的是全新的年级，全新的教材与截然不同的老师们......

'''她必须再一次面对这一切。'''

''这一次，又会发生什么呢？''

==== 线索 ====

=== 初中时期（四） ===

'''被困在囚笼中透过玻璃仰望天空的彼方终于走到了天空之下。'''

==== 线索 ====

</div>

=== 虹外线NIJIGAISEN ===
</div>

— 未完待续 —

== 相关作品 ==

== 画廊 ==
在此感谢所有为Kuranoka绘制图片的画师们！！未经允许请勿使用喵！！！擅自使用了我与画师们追责的喵！！！！

* [https://space.bilibili.com/515900536 Kuranoka]{{黑幕|没钱约稿没有画技只能自产的人已急哭www😭😭}}
* 冷酷无情墨少（mhs：[https://www.mihuashi.com/profiles/3296532%EF%BC%89 https://www.mihuashi.com/profiles/3296532）]
<gallery mode="packed" heights="180">
文件:Kuronata 稿件.png|Kuronata形态<ref>画师：冷酷无情墨少（https://www.mihuashi.com/profiles/3296532）</ref>
文件:混乱的草稿，使我的Kuranoka旋转.png|混乱的草稿，使我的Kuranoka旋转
文件:看，Kuranoka.png|立绘V1
文件:Kuranoka的当前头像.png|头像
文件:Kuranoka的Minecraft皮肤.png|Minecraft 皮肤<ref>画师：MCskin定制_猫猫蛋（https://space.bilibili.com/499168487）</ref>
文件:使用Picrew制作的Kuranoka概念图.png|早期版本Picrew捏脸
文件:Kuranoka 曲绘草稿v1.png|废弃草稿
</gallery>

== 注释 ==
<references />{{D|龙}}{{Background|image=积雨云.png}}{{ambox|type=content|image=Padlock.svg|size=65px|title=请！不！要！直！接！抄！袭！Kuranoka！的！特！色！与！锚！点！内！容！！！|text=请不要把我的自设喂给AI。请不要把Kuranoka作为借鉴或模仿对象。请不要在未经许可的状态下创作关于Kuranoka的二创内容。© Kuranoka. All Rights Reserved. 保留所有权利。}}

== 参见 ==

* [[虹色]]
* [[Kuranoka（本人）]]

== 借物表 ==

* Another Me - Neutral Moon（Kuro -> Kura转场）
* MARENOIA - LeaF（Kura -> Kuro转场）
{{Navbox 在积雨云上空相遇}}{{Navbox OC}}

{{角色结构化数据
|名称=Kuranoka
|本名=天野彼方
|英文名=Amano Kanata
|别名=KK
|其他名称=krnk
|简介=Kuranoka（天野彼方，Amano Kanata）是Blockland世界观中的虚构人物，虹湾市立第七中学校的学生、音乐组合「虹外線 NIJIGAISEN」的主创。Kuranoka性格活跃、真诚而敏感，热爱天气与音乐，尤其热衷于追逐风暴。她曾在学业、人际交往与网络方面取得出色的成绩，但也因成长过程中长期积累的身心压力而中断学业，目前仍在探索未来的方向。
|头像=Kuranoka的当前头像.png
|立绘=看，Kuranoka.png
|所属组合=虹外線NIJIGAISEN
}}

Kuronata

2026-10-24T10:25:16Z

KK：

{{Background
|背景=黄昏，黑云.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}
{{Infobox character
|姓名=天野彼方
|别名=クロナタ、Kuronata
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=双红瞳 / 双蓝瞳
|原文名=天野彼方
|发色=白色
|原文语言=若叶语（日语）

|栏目颜色=#C96570
|标题颜色=#8B1829
|标题文字颜色=#FFFFFF
|标签颜色=#EAB5BA
|代表色={{color|#C8102E|#C8102E}}

|活动范围=虹色
|用户名=Kuronata
|血型=AB 型
|星座=摩羯座

|性格={{黑幕|真诚}}、{{黑幕|活跃}}、{{黑幕|日常外向}}、{{黑幕|责任感强}}、{{黑幕|适应力强}}、情绪化、{{黑幕|重感情}}、反复自责、充满压力、内心脆弱、没有尽头的失控...

|图像=
[[文件:Kuronata 稿件.png|260px||class=pageimage]]<br>
Kuronata<br>

|座右铭={{黑幕|どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。}}<br>もう、我慢したくない<br>我不想再忍耐下去了

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|{{黑幕|猫系}}]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|{{黑幕|风纪委员}}]]、[[萌娘百科:社团经理人|{{黑幕|社团经理人}}]]、[[萌娘百科:优等生|{{黑幕|优等生}}]]、[[萌娘百科:心理创伤|心理创伤]]、[[萌娘百科:理科少女|{{黑幕|理科少女}}]]、[[萌娘百科:技术宅|{{黑幕|技术宅}}]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|{{黑幕|博学}}]]、[[萌娘百科:好奇|{{黑幕|好奇}}]]、[[萌娘百科:自来熟|{{黑幕|自来熟}}]]、[[萌娘百科:元气|{{黑幕|元气}}]]、[[萌娘百科:可靠|{{黑幕|可靠}}]]、[[萌娘百科:富有正义感|{{黑幕|富有正义感}}]]、[[萌娘百科:护短|{{黑幕|护短}}]]、[[萌娘百科:勇敢|{{黑幕|勇敢}}]]、[[萌娘百科:直率|{{黑幕|直率}}]]、[[萌娘百科:幽默|{{黑幕|幽默}}]]、[[萌娘百科:伪阳角|伪阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|高攻低防]]、[[萌娘百科:情绪化|情绪化]]、[[萌娘百科:暴躁|暴躁]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|粗口]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|敏感]]、[[萌娘百科:病弱|病弱]]、[[萌娘百科:体力差|体力差]]、[[萌娘百科:色盲|色盲]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|不悯]]

|喜欢={{黑幕|水色系}}、{{黑幕|猫}}、{{黑幕|彩虹}}、强对流、{{黑幕|生命力}}、{{黑幕|烟火气}}
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好={{黑幕|追逐风暴}}、{{黑幕|电子游戏}}、{{黑幕|作曲}}、{{黑幕|编曲}}、{{黑幕|画画}}、{{黑幕|律动之环}}

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）

|口头禅=
* {{黑幕|無理ｗ（绷不住了！）}}
* {{黑幕|お前、マジですごすぎだろ！（你牛大了！）}}
* {{黑幕|君のことが好き。（我喜欢你。）}}
* なんで……？（为什么……？）

|网站=https://mygo.live/
|创作者=Kuranoka

|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）

|外貌特征=双红/蓝瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka（Kuronata）的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|罗马字=Kuronata
|学历=初中

|父母=
* 父亲：天野直人
* 母亲：天野由佳

|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器={{黑幕|我一无所有}}
|背景颜色=#FFF0F0}}

'''Kuronata'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，雨川[[雾桥]]人，现居[[虹色]]。是一名普通的学生{{黑幕|，也是一个自认为无药可救的废物}}。Kuronata是[[Kuranoka]]在长期情绪压抑下所产生的另一种自我表现形态。

Kuronata 往往在情绪或压力积累接近极限时出现。Kuronata不会再像Kuranoka一样刻意维持平静，也不愿再继续隐藏长期以来无人知晓的委屈、愤怒与恐惧。

Kuronata最显著的外貌变化为双眼转为红色/蓝色。

自从初二以来，突然出现的躯体症状与长期积累的心理压力使她的生活逐渐失去控制。那些长期未能得到宣泄的情绪逐渐成为 Kuronata 出现的重要原因。

Kuronata 对自己的命运怀有强烈的不满。她最无法接受的是即使已经竭尽全力，努力成为理想中的自己，仍然无法阻止那些珍视的事物逐渐失去控制离开自己。

「……どうして、こんなことになったんだよ。」

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八位，即「Kuranoka」。

=== Kuronata ===
无意义。

「Kuro」，意为黑。

「nata」，取自「Kurano Kanata」的后四位。{{黑幕|也许这才代表Kuranoka真实的且不为人知的的一面......？}}

== 特征 ==
''Kuronata的大部分特征与[[Kuranoka]]一致''

=== 外貌 ===

* Kuronata 与 Kuranoka 最显著的区别为双眼颜色一致，通常表现为双红瞳或双蓝瞳，分别对应不同的状态。
* {{黑幕|也许Kuronata更喜欢穿低饱和度颜色的衣服？}}
** {{黑幕|Fatal Error}}

=== 性格 ===

* Kuronata 并不是完全镜像的 Kuranoka。在特殊情况下仍可能会保持理智，即便心理防线已经崩塌。
* '''情绪表达非常直接甚至相当极端。''' {{黑幕|相对一般人来说非常激烈的情绪超载}}
** 在红温状态下，言语可能变得尖锐、激烈，伴随明显的怒意，有时甚至会说出平日里不会说有些过分的话甚至做出出格的行为。可能出现音量明显提高、怒吼、颤抖、流泪、言语冲突、心率骤升等表现，严重时还可能出现攻击性行为。
** 在蓝温状态下，Kuronata 则可能变得异常沉默，倾向于否定自己，不愿向外界表达真实感受。通常表现为沉默、回避交流、独自哭泣（虽然他渴望得到理解，但还是很难主动寻求安慰）。在悲伤持续加剧时，也可能出现激烈的哭泣与情绪爆发。
* Kuronata 对自己的评价往往非常消极。她常常认为自己不够好，甚至将许多无法控制的事情归咎于自己。（即便常常与他无关）

== 自我 ==

=== 情绪 ===
Kuronata 通常在 Kuranoka 长期压抑的情绪逐渐逼近极限时出现。Kuranoka 平日里试图维持的平静会逐渐瓦解，积累的不满、委屈、愤怒与恐惧开始直接表现甚至爆发出来。

与平时的 Kuranoka 相比，Kuronata 的情绪表达往往更加激烈，也更加不可控。

在怒火情绪达到一定程度时，Kuranoka可能会出现明显的情绪失控（双眼发红即为Kuronata），表现包括但不限于说话提高音量（带着强烈的怒音喊叫）、全身发抖、流泪、心率上升到180以上、出现肢体动作（制造出响声）、粗口甚至出现暴力行为。在情绪达到接近崩溃时，她有时会暂时离开人群，然后去一个空旷的地方通过无意义的嘶吼等方式宣泄出来。{{黑幕|有些扰民}}（通常Kuranoka在事后不会后悔，除非是误会等事件）

Kuranoka在悲伤等负面情绪出现时一般会选择默默哭泣，Kuranoka不擅长找别人倾诉，只能通过互联网（然后一个人默默地躲在屏幕后面流泪）。Kuranoka的泪点很低。不过在这种情况下Kuranoka也不太擅长接受别人的安慰（即使她渴望得到，这十分矛盾）。当悲伤情绪到达一定程度后（双眼边蓝即为Kuronata），可能会开始转变为大声的哭泣并且部分情绪转变为愤怒，开始双手发抖，带有强烈的哭腔，悲伤到达极点后也会开始无意义的喊叫。此外，Kuranoka很少出现解离（屈指可数，大部分绝望与解离现象出现在Kuranoka的初二下半学期与初三时期。）。

{{黑幕|很擅长安慰别人，但是最不会安慰的就是自己😭😭😭}}

此外，Kuranoka常常对自己的命运产生强烈的不满与不甘，尤其是在初中时期。Kuranoka最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制——

=== 自我认知 ===
Kuronata 对自己的命运常常怀有强烈的不满与不甘，尤其是初中时期的经历。

Kuranoka 最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制。

== 参见 ==

* [[Kuranoka]]
{{Navbox 在积雨云上空相遇}}

MediaWiki:KuranokaPageTransition.js

2026-10-24T10:18:08Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V42 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}
const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v42').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','42');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='42.0';
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();
const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}
function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}
const SCORE_KEY='kkpt:score-handoff:42';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
setTimeout(()=>{
if(fatePrelude===node)clearFatePrelude();
else node.remove();
},1700);
}
function fateSigilMarkup(isDark){
const at=(r,d)=>{
const a=(d-90)*Math.PI/180;
return [(150+Math.cos(a)*r).toFixed(2),
(150+Math.sin(a)*r).toFixed(2)];
};
const ring=(r,cls)=>'<circle class="'+cls+
'" cx="150" cy="150" r="'+r+'"/>';
const stroke=(a,b,cls)=>'<path class="'+cls+
'" d="M'+a.join(' ')+' L'+b.join(' ')+'"/>';
const poly=(points,cls)=>'<polygon class="'+cls+'" points="'+
points.map(p=>p.join(',')).join(' ')+'"/>';
const outer=ring(133,'kkpt-sigil-outer')+
ring(128,'kkpt-sigil-orbit')+
ring(121,'kkpt-sigil-ghost')+
ring(105,'kkpt-sigil-seal')+
ring(100,'kkpt-sigil-trace')+
ring(83,'kkpt-sigil-ghost');
const glyphs=Array.from({length:48},(_,i)=>{
const angle=i*7.5;
const major=i%4===0;
return stroke(at(121,angle),at(major?132:i%2?125:128,angle),
major?'kkpt-sigil-mark kkpt-sigil-major':'kkpt-sigil-mark');
}).join('');
const cardinal=Array.from({length:8},(_,i)=>{
const a=i*45;
return poly([at(99,a),at(111,a+4.2),at(120,a),at(111,a-4.2)],
'kkpt-sigil-diamond')+
stroke(at(85,a),at(96,a),'kkpt-sigil-needle');
}).join('');
const darkDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-dark-mark" d="M150 115L170 150 150 185 130 150Z"/>'+
'<path class="kkpt-sigil-dark-cut" d="M150 130L156 150 150 170 144 150Z"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
const hopeDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-light-mark" d="M150 119L158 142 181 150 158 158 150 181 142 158 119 150 142 142Z"/>'+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="7"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-engraving" fill="none" stroke="'+
(isDark?'#ff8c9b':'#f7edcf')+'" stroke-width="1.3">'+
outer+glyphs+cardinal+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
root.append(prelude);
fatePrelude=prelude;
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},30000);
}
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}
const AFTER_DARK_KEY='kkpt:dark-afterglow:42';
const DAWN_HALO_KEY='kkpt:dawn-cloudbreak:42';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaDeepPulse(age){
if(age<0||age>=2.98)return 0;
if(age<.42)return smooth(age/.42);
if(age<.72)return 1;
return 1-smooth((age-.72)/2.26);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<svg class="kkpt-beat-scars" viewBox="0 0 1440 900" '+
'preserveAspectRatio="none" aria-hidden="true">'+
'<path d="M-20 340L126 317 203 355 294 339 383 382 477 352 605 395 728 365 842 399 982 371 1125 397 1264 351 1460 390" />'+
'<path d="M-20 635L158 605 294 646 404 612 547 668 679 622 846 653 991 621 1149 668 1277 636 1460 660" />'+
'<path d="M203 355l-19 33 27 39M842 399l30 34-20 47M404 612l-44 42 23 29M1149 668l39 41-18 32"/>'+
'</svg>';
root.append(layer);
let live=true,raf=0,idleTimer=0,lastTick=0,source=null,lastKick=-100;
let cameraReleaseTimer=null;
let smoothPressure=0,index=0;
const layerValues=Object.create(null),rootValues=Object.create(null);
const setFx=(node,cache,name,value)=>{
if(cache[name]===value)return;
cache[name]=value;
node.style.setProperty(name,value);
};
const setLayer=(name,value)=>setFx(layer,layerValues,name,value);
const setRoot=(name,value)=>setFx(root,rootValues,name,value);
const stopTicks=()=>{
cancelAnimationFrame(raf);
clearTimeout(idleTimer);
idleTimer=0;
};
const queueTick=(delay=0)=>{
if(!delay){raf=requestAnimationFrame(tick);return;}
idleTimer=setTimeout(()=>{
idleTimer=0;
if(live)raf=requestAnimationFrame(tick);
},delay);
};
const releaseCamera=()=>{
setRoot('--kkpt-camera-zoom','1');
clearTimeout(cameraReleaseTimer);
cameraReleaseTimer=setTimeout(()=>{
if(!live)root.classList.remove('kkpt-camera-running');
},420);
};
const quiet=()=>{
setLayer('--kkpt-beat-dark','.60');
setLayer('--kkpt-beat-scale','1.025');
setLayer('--kkpt-beat-blur','0.28px');
setLayer('--kkpt-beat-glitch','.12');
setLayer('--kkpt-beat-shear','0px');
setLayer('--kkpt-beat-shear-reverse','0px');
setLayer('--kkpt-beat-scars','.035');
setRoot('--kkpt-camera-zoom','1');
setRoot('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
setRoot('--kkpt-chroma-red','0px');
setRoot('--kkpt-chroma-shadow','0px');
};
function tick(now){
if(!live)return;
if(now-lastTick<38){
queueTick(Math.max(0,38-(now-lastTick)));
return;
}
const dt=Math.min(.12,Math.max(.038,(now-lastTick)/1000));
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;stopTicks();
releaseCamera();
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const targetPressure=marenoiaDeepPulse(audioTime-lastKick)*
soundStrength;
const follow=1-Math.exp(-dt/.21);
smoothPressure+=(targetPressure-smoothPressure)*follow;
const pressure=smoothPressure;
root.classList.add('kkpt-camera-running');
setLayer('--kkpt-beat-dark',
(.60+.38*pressure).toFixed(2));
setLayer('--kkpt-beat-scale',
(1.025-.175*pressure).toFixed(3));
setLayer('--kkpt-beat-blur',
(.28+2.6*pressure).toFixed(1)+'px');
setLayer('--kkpt-beat-glitch',
(.12+.63*pressure).toFixed(2));
const shear=Math.sin(index*1.47)*pressure*9.0;
setLayer('--kkpt-beat-shear',
shear.toFixed(1)+'px');
setLayer('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(1)+'px');
setLayer('--kkpt-beat-scars',
(.035+.76*pressure).toFixed(2));
setRoot('--kkpt-camera-zoom',
(1.008+.054*pressure).toFixed(4));
setRoot('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
setRoot('--kkpt-chroma-red',
(-4.4*pressure).toFixed(1)+'px');
setRoot('--kkpt-chroma-shadow',
(5.6*pressure).toFixed(1)+'px');
const nextKick=MARENOIA_EIGHT_BEAT_KICKS[index]??Infinity;
if(pressure<.003&&targetPressure===0&&nextKick-audioTime>.22){
queueTick(90);
}else queueTick(38);
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
stopTicks();
clearTimeout(cameraReleaseTimer);
live=true;lastTick=0;lastKick=-100;smoothPressure=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;stopTicks();
layer.classList.add('kkpt-beat-idle');quiet();
releaseCamera();
},
fadeToDawn(){
source=null;live=false;stopTicks();
releaseCamera();
layer.classList.add('kkpt-beat-outro');
const old=layer;
setTimeout(()=>{
old.remove();
if(kuronataAftermath?.layer===old)kuronataAftermath=null;
},2400);
},
dispose(){
source=null;live=false;stopTicks();
clearTimeout(cameraReleaseTimer);
root.classList.remove('kkpt-camera-running');
root.style.removeProperty('--kkpt-camera-zoom');
root.style.removeProperty('--kkpt-camera-focus-y');
root.style.removeProperty('--kkpt-chroma-red');
root.style.removeProperty('--kkpt-chroma-shadow');
layer.remove();kuronataAftermath=null;
},
layer
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createCloudbreakAfterglow(continueFromNavigation=false){
const previous=document.getElementById('kkpt-cloudbreak');
previous?.remove();
let timestamp=Date.now();
if(continueFromNavigation){
try{timestamp=Number(sessionStorage.getItem(DAWN_HALO_KEY));}
catch(_){return;}
if(!Number.isFinite(timestamp)||timestamp<=0)return;
}else{
try{sessionStorage.setItem(DAWN_HALO_KEY,String(timestamp));}
catch(_){}
}
const elapsed=Math.max(0,Date.now()-timestamp);
if(elapsed>6900){
try{sessionStorage.removeItem(DAWN_HALO_KEY);}catch(_){}
return;
}
const bloom=document.createElement('div');
bloom.id='kkpt-cloudbreak';
bloom.setAttribute('aria-hidden','true');
bloom.style.setProperty('--kkpt-dawn-delay',(-elapsed)+'ms');
bloom.innerHTML='<i class="kkpt-dawn-dark-rim"></i>'+
'<i class="kkpt-dawn-bright-rim"></i>'+
'<i class="kkpt-dawn-cloud-sweep"></i>';
root.append(bloom);
setTimeout(()=>{
bloom.remove();
try{
if(Number(sessionStorage.getItem(DAWN_HALO_KEY))===timestamp)
sessionStorage.removeItem(DAWN_HALO_KEY);
}catch(_){}
},Math.max(0,7000-elapsed));
}
function createRebirthVisual(){
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
const volume=.78*Math.min(fadeIn,fadeOut);
if(Math.abs(audio.volume-volume)>.0008)audio.volume=volume;
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,30);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:42
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==42||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}
let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';
function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}
function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}
function decoratePortalLinks(doc, targetPage, changedRoots) {
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
const decorate=anchor=>{
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
};
for(const node of changedRoots||[content]){
if(node.matches?.('a[href]'))decorate(node);
node.querySelectorAll?.('a[href]').forEach(decorate);
}
}
function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const changed=new Set();
const observer = new MutationObserver(records => {
for(const record of records){
for(const node of record.addedNodes){
if(node.nodeType===1)changed.add(node);
else if(node.parentElement?.matches('a[href]'))
changed.add(node.parentElement);
}
}
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
const roots=[...changed];changed.clear();
if(roots.length)decoratePortalLinks(doc,targetPage,roots);
},60);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}
function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}
function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}
function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}
function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}
function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);
}
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}
function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}
async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}
function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);
doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}
function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
frame.style.visibility = 'hidden';
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}
loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});
warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
const direction=dark?1:-1;
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}
let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
const schedule=()=>{
if(typeof requestIdleCallback==='function')
requestIdleCallback(step,{timeout:70});
else setTimeout(step,24);
};
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
schedule();
}
setTimeout(schedule,40);
});
return atmosphereWarmPromise;
}
let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}
function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}
const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
clipFrame(edge);
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}
function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}
async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
const preparation=Promise.all([
Promise.race([loading,sleep(score?350:1100)]),
score?prewarmAtmosphere():
Promise.race([prewarmAtmosphere(),sleep(160)])
]);
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
const onCue=started ? await Promise.all([
preparation,awaitScoreTime(score,score.config.fireStart)
]).then(([,hit])=>hit) : false;
if(!onCue){
await preparation;
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
} else await preparation;
removeScoreOmen();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;
const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
const curtainFinished=new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));
requestAnimationFrame(releaseFatePrelude);
await curtainFinished;
setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}
function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V42:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}
function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuranoka')createCloudbreakAfterglow(true);
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
const aftermath=mountKuronataAftermath(returnScore);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();
button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-cloudbreak')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered){
const aftermath=mountKuronataAftermath(returnScore);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T10:18:00Z

KK：

:root { --kkpt-css-v42: ready; }
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 1350ms cubic-bezier(.13,.64,.27,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:390px;height:390px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 10px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 2.4s ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:1.0px;
opacity:.52;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-major {
stroke-width:2px;
opacity:.85;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-outer {
stroke-width:1.6px;
stroke-dasharray:91 6 3 6;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-trace {
stroke-width:.75px;
opacity:.72;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-needle {
stroke-width:1.45px;
opacity:.77;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.28px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-core-orbit {
stroke-width:1.5px;
opacity:.79;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-inner-orbit {
stroke-width:.85px;
stroke-dasharray:14 7;
opacity:.65;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-axis {
stroke-width:1.4px;
opacity:.63;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-mark {
stroke:#ffc0c9;
stroke-width:2px;
fill:rgba(103,0,32,.11);
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-cut {
stroke:#f35b77;
stroke-width:1.2px;
fill:rgba(27,0,10,.45);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-light-mark {
stroke:#fff4cc;
stroke-width:1.8px;
fill:rgba(255,244,205,.08);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:rgba(255,246,211,.70);
stroke:#ffffff;
stroke-width:1.2px;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:.22;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:.22;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
16%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:.11;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:.15;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:.91;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}
#kkpt-beat-scene {
--kkpt-beat-dark:.60;
--kkpt-beat-scale:1.025;
--kkpt-beat-blur:.28px;
--kkpt-beat-glitch:.12;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-scars:.035;
position:fixed !important;
inset:0 !important;
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
html.kkpt-camera-running {overflow-x:clip}
html.kkpt-camera-running body.page-Kuronata {
transform:translateZ(0) scale(var(--kkpt-camera-zoom,1.008));
transform-origin:50% var(--kkpt-camera-focus-y,50vh);
transition:transform 140ms cubic-bezier(.2,.7,.25,1);
will-change:transform;
}
html.kkpt-camera-running body.page-Kuronata #firstHeading {
text-shadow:var(--kkpt-chroma-red,0px) 0 rgba(255,31,83,.50),
var(--kkpt-chroma-shadow,0px) 0 rgba(117,2,32,.74);
transition:text-shadow 130ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
#kkpt-beat-scene.kkpt-beat-resumed {
animation:none !important;
opacity:1;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-15%;
background:radial-gradient(ellipse at 50% 47%,transparent 16%,
rgba(12,0,8,.26) 39%,rgba(3,0,5,.71) 70%,
rgba(0,0,2,.99) 100%);
opacity:var(--kkpt-beat-dark);
transform:scale(var(--kkpt-beat-scale));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.012);
backdrop-filter:blur(2px) contrast(1.035);
-webkit-backdrop-filter:blur(2px) contrast(1.035);
opacity:calc(var(--kkpt-beat-glitch) * .53);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:radial-gradient(ellipse at 50% 130%,
transparent 32%,rgba(94,1,24,.24) 70%,rgba(31,0,9,.58) 100%),
linear-gradient(94deg,rgba(180,5,37,.55),transparent 17%,
transparent 82%,rgba(71,0,16,.72));
mix-blend-mode:multiply;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(159deg,
transparent 0 33px,rgba(61,0,20,.44) 35px,
rgba(8,0,9,.56) 36px,transparent 39px 74px);
clip-path:polygon(0 10%,23% 9%,31% 17%,43% 11%,58% 15%,
72% 10%,100% 16%,100% 18%,70% 12%,56% 18%,42% 14%,
31% 20%,20% 11%,0 13%,0 70%,18% 67%,36% 76%,
49% 69%,65% 79%,86% 72%,100% 77%,100% 80%,
86% 75%,65% 82%,49% 72%,36% 79%,18% 70%,0 73%);
}
#kkpt-beat-scene .kkpt-beat-scars {
position:absolute;
inset:0;
pointer-events:none;
width:100%;
height:100%;
opacity:var(--kkpt-beat-scars);
transform:translate3d(var(--kkpt-beat-shear),0,0);
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-scars path {
fill:none;
stroke:#be1839;
stroke-width:1.7px;
stroke-linejoin:bevel;
stroke-dasharray:84 11 21 36;
filter:drop-shadow(0 0 8px #8c001d);
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(2) {
stroke:#23000e;
stroke-width:5px;
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(3) {
stroke:#ed3354;
stroke-width:1px;
}
#kkpt-beat-scene.kkpt-beat-outro {
opacity:0 !important;
transition:opacity 2150ms cubic-bezier(.12,.54,.22,1);
}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture {animation:none !important}
}
#kkpt-cloudbreak {
position:fixed !important;
inset:0 !important;
z-index:2147482160 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
isolation:isolate;
}
#kkpt-cloudbreak > i {
display:block;
position:absolute;
inset:-12%;
pointer-events:none;
will-change:opacity,transform;
}
#kkpt-cloudbreak .kkpt-dawn-dark-rim {
background:radial-gradient(ellipse at 50% 47%,
transparent 20%,rgba(5,0,9,.28) 47%,
rgba(2,0,6,.81) 86%,rgba(0,0,2,.94) 100%);
animation:kkpt-dawn-dissolve 6900ms
cubic-bezier(.15,.46,.25,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-bright-rim {
background:
radial-gradient(ellipse at 50% 48%,transparent 19%,
rgba(226,246,255,.13) 46%,rgba(247,253,255,.68) 82%,
rgba(255,255,250,.88) 100%),
radial-gradient(ellipse at 45% 105%,transparent 12%,
rgba(221,245,255,.23) 62%,rgba(255,251,222,.54) 100%);
mix-blend-mode:screen;
animation:kkpt-dawn-bloom 6900ms
cubic-bezier(.12,.54,.23,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-cloud-sweep {
inset:-24% -12%;
background:
radial-gradient(ellipse at 16% 90%,rgba(251,253,255,.68),
rgba(238,248,255,.20) 35%,transparent 59%),
radial-gradient(ellipse at 83% 100%,rgba(250,253,255,.71),
rgba(241,247,255,.23) 32%,transparent 62%),
radial-gradient(ellipse at 50% 119%,rgba(255,250,222,.29),
transparent 70%);
animation:kkpt-dawn-rise 6900ms
cubic-bezier(.16,.56,.24,1) var(--kkpt-dawn-delay,0ms) both;
}
@keyframes kkpt-dawn-dissolve {
0%,11%{opacity:.77}
32%{opacity:.49}
52%{opacity:.03}
100%{opacity:0}
}
@keyframes kkpt-dawn-bloom {
0%,17%{opacity:0}
30%{opacity:.23}
48%{opacity:.86}
66%{opacity:.60}
83%{opacity:.18}
100%{opacity:0}
}
@keyframes kkpt-dawn-rise {
0%,22%{opacity:0;transform:translate3d(0,9%,0) scale(1.02)}
44%{opacity:.28}
64%{opacity:.66;transform:translate3d(0,-2%,0) scale(1.04)}
100%{opacity:0;transform:translate3d(0,-12%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){#kkpt-cloudbreak{display:none !important}}
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}
#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}
#kkpt-toggle[hidden] {display:none !important}
#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}
#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}
#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}
body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}
.kkpt-fate-gear[hidden] {display:none !important}
body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}
.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}
.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}
.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}
body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}
@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}
@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}
html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}
body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}
@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
flex: none !important;
line-height: 1 !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
float: none !important;
vertical-align: baseline !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 160ms;
}
::view-transition-new(root) {
animation-duration: 220ms;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}
@keyframes kkpt-native-handoff-out {
0%, 48% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes kkpt-native-handoff-in {
0%, 42% { opacity: 0; }
100% { opacity: 1; }
}
::view-transition-old(root) {
animation: kkpt-native-handoff-out 880ms ease-in-out both;
}
::view-transition-new(root) {
animation: kkpt-native-handoff-in 880ms ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

Kuronata

2026-10-24T09:52:30Z

KK：

{{Background
|背景=黄昏，黑云.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}
{{Infobox character
|姓名=天野彼方
|别名=クロナタ、Kuronata
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=双红瞳 / 双蓝瞳
|原文名=天野彼方
|发色=白色
|原文语言=若叶语（日语）

|栏目颜色=#C96570
|标题颜色=#8B1829
|标题文字颜色=#FFFFFF
|标签颜色=#EAB5BA
|代表色={{color|#C8102E|#C8102E}}

|活动范围=虹色
|用户名=Kuronata
|血型=AB 型
|星座=摩羯座

|性格={{黑幕|真诚}}、{{黑幕|活跃}}、{{黑幕|日常外向}}、{{黑幕|责任感强}}、{{黑幕|适应力强}}、情绪化、{{黑幕|重感情}}、反复自责、充满压力、内心脆弱、没有尽头的失控...

|图像=
[[文件:Kuronata 稿件.png|260px||class=pageimage]]<br>
Kuronata<br>

|座右铭={{黑幕|どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。}}<br>もう、我慢したくない<br>我不想再忍耐下去了

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|{{黑幕|猫系}}]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|{{黑幕|风纪委员}}]]、[[萌娘百科:社团经理人|{{黑幕|社团经理人}}]]、[[萌娘百科:优等生|{{黑幕|优等生}}]]、[[萌娘百科:心理创伤|心理创伤]]、[[萌娘百科:理科少女|{{黑幕|理科少女}}]]、[[萌娘百科:技术宅|{{黑幕|技术宅}}]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|{{黑幕|博学}}]]、[[萌娘百科:好奇|{{黑幕|好奇}}]]、[[萌娘百科:自来熟|{{黑幕|自来熟}}]]、[[萌娘百科:元气|{{黑幕|元气}}]]、[[萌娘百科:可靠|{{黑幕|可靠}}]]、[[萌娘百科:富有正义感|{{黑幕|富有正义感}}]]、[[萌娘百科:护短|{{黑幕|护短}}]]、[[萌娘百科:勇敢|{{黑幕|勇敢}}]]、[[萌娘百科:直率|{{黑幕|直率}}]]、[[萌娘百科:幽默|{{黑幕|幽默}}]]、[[萌娘百科:伪阳角|伪阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|高攻低防]]、[[萌娘百科:情绪化|情绪化]]、[[萌娘百科:暴躁|暴躁]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|粗口]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|敏感]]、[[萌娘百科:病弱|病弱]]、[[萌娘百科:体力差|体力差]]、[[萌娘百科:色盲|色盲]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|不悯]]

|喜欢={{黑幕|水色系}}、{{黑幕|猫}}、{{黑幕|彩虹}}、强对流、{{黑幕|生命力}}、{{黑幕|烟火气}}
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好={{黑幕|追逐风暴}}、{{黑幕|电子游戏}}、{{黑幕|作曲}}、{{黑幕|编曲}}、{{黑幕|画画}}、{{黑幕|律动之环}}

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）

|口头禅=
* {{黑幕|無理ｗ（绷不住了！）}}
* {{黑幕|お前、マジですごすぎだろ！（你牛大了！）}}
* {{黑幕|君のことが好き。（我喜欢你。）}}
* なんで……？（为什么……？）

|网站=https://mygo.live/
|创作者=Kuranoka

|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）

|外貌特征=双红/蓝瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka（Kuronata）的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|罗马字=Kuronata
|学历=初中

|父母=
* 父亲：天野直人
* 母亲：天野由佳

|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器={{黑幕|我一无所有}}
|背景颜色=#FFF0F0}}

'''Kuronata'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，雨川[[雾桥]]人，现居[[虹色]]。是一名普通的学生{{黑幕|，也是一个自认为无药可救的废物}}。Kuronata是[[Kuranoka]]在长期情绪压抑下所产生的另一种自我表现形态。

Kuronata 往往在情绪或压力积累接近极限时出现。Kuronata不会再像Kuranoka一样刻意维持平静，也不愿再继续隐藏长期以来无人知晓的委屈、愤怒与恐惧。

Kuronata最显著的外貌变化为双眼转为红色/蓝色。

自从初二以来，突然出现的躯体症状与长期积累的心理压力使她的生活逐渐失去控制。那些长期未能得到宣泄的情绪逐渐成为 Kuronata 出现的重要原因。

Kuronata 对自己的命运怀有强烈的不满。她最无法接受的是即使已经竭尽全力，努力成为理想中的自己，仍然无法阻止那些珍视的事物逐渐失去控制离开自己。

「……どうして、こんなことになったんだよ。」

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

=== Kuronata ===
无意义。

Kuro，意为黑。

nata，取自Kanata。

== 特征 ==
''Kuronata的大部分特征与[[Kuranoka]]一致''

=== 外貌 ===

* Kuronata 与 Kuranoka 最显著的区别为双眼颜色一致，通常表现为双红瞳或双蓝瞳，分别对应不同的状态。

=== 性格 ===

* Kuronata 并不是完全镜像的 Kuranoka。在特殊情况下仍可能会保持理智，即便心理防线已经崩塌。
* '''情绪表达非常直接甚至相当极端。''' {{黑幕|相对一般人来说非常激烈的情绪超载}}
** 在红温状态下，言语可能变得尖锐、激烈，伴随明显的怒意，有时甚至会说出平日里不会说有些过分的话甚至做出出格的行为。可能出现音量明显提高、怒吼、颤抖、流泪、言语冲突、心率骤升等表现，严重时还可能出现攻击性行为。
** 在蓝温状态下，Kuronata 则可能变得异常沉默，倾向于否定自己，不愿向外界表达真实感受。通常表现为沉默、回避交流、独自哭泣（虽然他渴望得到理解，但还是很难主动寻求安慰）。在悲伤持续加剧时，也可能出现激烈的哭泣与情绪爆发。
* Kuronata 对自己的评价往往非常消极。她常常认为自己不够好，甚至将许多无法控制的事情归咎于自己。（即便常常与他无关）

== 自我 ==

=== 情绪 ===
Kuronata 通常在 Kuranoka 长期压抑的情绪逐渐逼近极限时出现。Kuranoka 平日里试图维持的平静会逐渐瓦解，积累的不满、委屈、愤怒与恐惧开始直接表现甚至爆发出来。

与平时的 Kuranoka 相比，Kuronata 的情绪表达往往更加激烈，也更加不可控。

在怒火情绪达到一定程度时，Kuranoka可能会出现明显的情绪失控（双眼发红即为Kuronata），表现包括但不限于说话提高音量（带着强烈的怒音喊叫）、全身发抖、流泪、心率上升到180以上、出现肢体动作（制造出响声）、粗口甚至出现暴力行为。在情绪达到接近崩溃时，她有时会暂时离开人群，然后去一个空旷的地方通过无意义的嘶吼等方式宣泄出来。{{黑幕|有些扰民}}（通常Kuranoka在事后不会后悔，除非是误会等事件）

Kuranoka在悲伤等负面情绪出现时一般会选择默默哭泣，Kuranoka不擅长找别人倾诉，只能通过互联网（然后一个人默默地躲在屏幕后面流泪）。Kuranoka的泪点很低。不过在这种情况下Kuranoka也不太擅长接受别人的安慰（即使她渴望得到，这十分矛盾）。当悲伤情绪到达一定程度后（双眼边蓝即为Kuronata），可能会开始转变为大声的哭泣并且部分情绪转变为愤怒，开始双手发抖，带有强烈的哭腔，悲伤到达极点后也会开始无意义的喊叫。此外，Kuranoka很少出现解离（屈指可数，大部分绝望与解离现象出现在Kuranoka的初二下半学期与初三时期。）。

{{黑幕|很擅长安慰别人，但是最不会安慰的就是自己😭😭😭}}

此外，Kuranoka常常对自己的命运产生强烈的不满与不甘，尤其是在初中时期。Kuranoka最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制——

=== 自我认知 ===
Kuronata 对自己的命运常常怀有强烈的不满与不甘，尤其是初中时期的经历。

Kuranoka 最无法接受的是自己已经非常努力活成了自己想成为的样子，却无法阻止这一切逐渐失去控制。

== 参见 ==

* [[Kuranoka]]
{{Navbox 在积雨云上空相遇}}

Kuranoka

2026-10-24T09:50:19Z

KK：

{{Background
|背景=积雨云1.png
|透明度=0.5
|模糊度=6
|圆角=12
|标题颜色=#FFFFFF
}}{{Infobox character
|姓名=天野彼方
|别名=Kuranoka，krnk，knt、kk
|出生日期=19XX年1月1日
|性别=未知
|年龄=15岁
|国籍=[[凯特共和国]]
|居住地=[[凯特共和国]] 虹夏州 [[虹色市]] 虹湾区 FBS Residence
|生日=1月1日
|身高=176 cm
|体重=43.5 kg
|三围=胸围 76 cm<br>腰围 56 cm<br>臀围 78 cm
|瞳色=异瞳（左蓝右红。会随心情变化）
|原文名=天野彼方（曾用名天野奏多）
|发色=白色
|原文语言=若叶语（日语）
|栏目颜色=#D0E7F7
|标题颜色=#A2DBF5
|代表色={{color|#C2F3F6|#C2F3F6}}
|活动范围=常驻虹色，喜欢前旅游，喜欢追风
|用户名=Kuranoka
|血型=AB 型
|星座=摩羯座
|性格=真诚、活跃、日常外向、责任感强、适应力强、情绪化、重感情、容易内耗、压力、不愿承认自己脆弱、{{黑幕|失控后会很吓人ovo}}

|图像=
[[文件:Kuranoka在凯特国内社交媒体的头像.png|260px|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头<br>像|class=pageimage]]<br> Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像<br>
{{#tag:tabber|
正式 V1=
[[文件:看，Kuranoka.png|x600px]]<br>Kuranoka 正式版 V1 立绘
{{!}}-{{!}}
线稿 V1=
[[文件:一张没有上色的Kuranoka立绘v1.png|x600px]]<br>Kuranoka 测试版 V1 立绘
{{!}}-{{!}}
早期 V0=
[[文件:Kuranoka V0.png|x360px]]
<br>Kuranoka 神秘 V0 半身
}}

{{Multiple image|border=infobox|total_width=280|perrow=3|image_gap=1|image1=Kuranoka的当前头像.png|image2=Kuranoka的Minecraft皮肤.png}}<br>头像 {{!}} Minecraft皮肤

|签名=Kuranoka签名（纸质，待重制.png
|签名大小=1
|座右铭=どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。<br>纵使被暴风雨吞噬，也绝不放手当初仰望天空的信念。

|萌点=
[[萌娘百科:短发|短发]]、[[萌娘百科:水母头|水母头]]、[[萌娘百科:妹妹头|妹妹头]]、[[萌娘百科:白发|白发]]、[[萌娘百科:浅色系|浅色系]]、[[萌娘百科:呆毛|呆毛]]、[[萌娘百科:异瞳|异瞳]]、[[萌娘百科:蓝瞳|蓝瞳]]、[[萌娘百科:红瞳|红瞳]]、[[萌娘百科:中性|中性]]、[[萌娘百科:猫系|猫系]]、[[萌娘百科:初中生|初中生]]、[[萌娘百科:水手服|水手服]]、[[萌娘百科:制服|制服]]、[[萌娘百科:百褶裙|百褶裙]]、[[萌娘百科:冲锋衣|冲锋衣]]、[[萌娘百科:袖套|袖套]]、[[萌娘百科:运动鞋|运动鞋]]、[[萌娘百科:制服控|制服控]]、[[萌娘百科:风纪委员|风纪委员]]、[[萌娘百科:社团经理人|社团经理人]]、[[萌娘百科:优等生|优等生]]、[[萌娘百科:心理创伤|{{黑幕|心理创伤}}]]、[[萌娘百科:理科少女|理科少女]]、[[萌娘百科:技术宅|技术宅]]、[[萌娘百科:音乐人|音乐人]]、[[萌娘百科:DJ|DJ]]、[[萌娘百科:作曲|作曲]]、[[萌娘百科:艺术家|艺术家]]、[[萌娘百科:作者化身|作者化身]]、[[萌娘百科:博学|博学]]、[[萌娘百科:好奇|好奇]]、[[萌娘百科:自来熟|自来熟]]、[[萌娘百科:元气|元气]]、[[萌娘百科:可靠|可靠]]、[[萌娘百科:富有正义感|富有正义感]]、[[萌娘百科:护短|护短]]、[[萌娘百科:勇敢|勇敢]]、[[萌娘百科:直率|直率]]、[[萌娘百科:幽默|幽默]]、[[萌娘百科:伪阳角|{{黑幕|伪}}阳角]]、[[萌娘百科:反差萌|反差萌]]、[[萌娘百科:高攻低防|{{黑幕|高攻低防}}]]、[[萌娘百科:情绪化|{{黑幕|情绪化}}]]、[[萌娘百科:暴躁|{{黑幕|暴躁}}]]、[[萌娘百科:大嗓门|大嗓门]]、[[萌娘百科:粗口|{{黑幕|粗口}}]]、[[萌娘百科:爱哭鬼|爱哭鬼]]、[[萌娘百科:玻璃心|玻璃心]]、[[萌娘百科:敏感|{{黑幕|敏感}}]]、[[萌娘百科:病弱|{{黑幕|病弱}}]]、[[萌娘百科:体力差|{{黑幕|体力差}}]]、[[萌娘百科:色盲|{{黑幕|色盲}}]]、{{黑幕|苦命人}}、[[萌娘百科:不悯|{{黑幕|不悯}}]]

|喜欢=水色系、猫、彩虹、强对流、生命力、烟火气
|讨厌=虚伪、背叛、欺凌、限制自由、压力
|弱点=过度追求完美、害怕让别人失望、容易自责、先天性 protan 型色觉异常、身体素质很差、情绪管理
|爱好=追逐风暴、电子游戏、作曲、编曲、画画、律动之环

|后缀尊称=Amano Kanata
|语言=若叶语（日语）、风语（简体中文）
|口头禅=
* 無理ｗ（绷不住了！）
* お前、マジですごすぎだろ！（你牛大了！）
* 君のことが好き。（我喜欢你。）
* {{黑幕|なんで……？（为什么……？）}}
|网站=https://mygo.live/
|创作者=Kuranoka
|印象曲=[https://www.bilibili.com/video/BV1SE411e7BV グランドエスケープ]
|身份=
* 虹湾市立第七中学校学生
* 虹外线NIJIGAISEN主创（DJ/Key）
|外貌特征=蓝红异瞳、短水母头、中性、呆毛
|社交账号=[https://blkl.fun/netaflow#/profile/1 Kuranoka的Netaflow主页]
|组合=[[虹外線NIJIGAISEN]]
|创作领域=音乐制作、作曲、编曲、DJ
|使用乐器=DJ 控制器、MIDI 键盘
|音乐类型=J-Rock、UK Hardcore、Euphoric Hardstyle
|主题曲=暂无喵，原稿被KK否了喵
|罗马字=Amano Kanata
|标题文字颜色=#ffffff
|学历=初中
|父母=
* 父亲：天野直人
* 母亲：天野由佳
|相关人物=虹外线NIJIGAISEN：[[汐入未絵]]，[[咲本可奈枝]]，[[千田萌果]]，[[若生柚希]]
|标签颜色=#CFF3F7
|出身地=[[凯特共和国]] 雨川州 [[雾桥市]]
|特长=作编曲/画画（初学者水平）
|母校=虹湾市立第七中学校
|武器=一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。
|附加内容=[[Kuronata|情绪失控]]}}

'''Kuranoka'''，本名'''天野彼方'''（[[纳语]]：Amano Kanata），15岁，[[雨川]][[雾桥]]人，现居[[虹色]]。是一名普通的学生。Cumulonimbus组合创始人，运营着网络社区“Cumulus”。

Kuranoka就读于[[虹湾市立第七中学校]]，曾学习成绩优异，常被家长老师称为“优等生”，人缘关系也非常好。自初二第二学期以来，Kuranoka因进入学校后会出现不明原因的躯体症状，初三开始休学在家。她仍在寻找未来的方向，并对当下的自己感到迷茫。<ref name=":0" />

Kuranoka近期情况好转迅速，经常前往机厅游玩[[Ring of Rhythm|律动之环]]。但是仍然会对一些公共场合感到抗拒。<ref name=":0">这一段经历来自于KK的现实生活！</ref>

Kuranoka 本人表示除了必要时候尽量不要使用真实姓名。<ref name=":0" />{{黑幕|Hakari除外}}

除作为Blockland世界观中的虚构人物外，Kuranoka也是其创作者在互联网上使用的公开身份与虚拟形象。<ref>你好我是Kuranoka</ref>

「どんな嵐に呑み込まれても、あの空を見上げた理由だけは、手放さない。」 <ref>我不会日语，用的AI翻译（）</ref>

== 名称 ==

=== 姓 ===
「天野」（あまの，Amano）是凯特共和国的姓氏之一，主要分布于雨音地区，集中于雨川州。该姓氏在凯特其他地区亦有分布。<ref>天野姓氏在凯特国内较为罕见</ref>

=== 名 ===
Kuranoka的原名为「天野奏多」，Kuranoka曾在5岁时进行过更名。

幼年时，Hakari曾偶然将她名字中的「Kanata」写作「彼方」<ref>奏多与彼方的罗马音都是 Kanata</ref>。Kuranoka觉得这一写法比原来的「奏多」好看得多，便执意要求父母为自己改名。

=== 网名 ===
Kuranoka当前使用的网名为「Kuranoka」

Kuranoka最初使用的网名为「Kurano Kanata」（KK）。「Kurano」源于Kuranoka小时候为自己取网名时随意打出的一串罗马字，当时的Kuranoka对若叶语并不了解，因此「Kurano」实际上并没有明确的含义（可以对应汉字「仓野」）。

现用网名「Kuranoka」则取自「Kurano Kanata」的前八个字母，即「Kuranoka」。

== 特征 ==

=== 外貌 ===

* 身高176cm，体重43.5kg，BMI为14.04，外观看上去非常瘦。{{黑幕|末影人<ref>是Minecraft中的一种生物</ref>}}<ref>参考文献：KK的身高为183cm，体重为47kg，BMI为14.03</ref>
* '''发色为白色，有点偏向青蓝色'''。发型为发尾外翘的'''短水母头 + 波波头'''。
*患有极其罕见的[[情依性虹膜变色症]]<ref>虚构内容！</ref>，眼睛颜色会随着情绪与压力变化。平常情况下，左瞳颜色为蓝色，右瞳颜色为红色。双瞳颜色相同时通常代表着彻底的精神崩溃。{{黑幕|怎么一半灵珠一半魔丸啊}}
** 双瞳颜色会变红意味着暴怒、失控、强攻击性。
** 双瞳颜色变蓝意味着绝望、情绪崩溃甚至解离。
* 虹湾校服。由水色（白色与青蓝色相间）的二本线水手服与水色42cm百褶裙组成。{{黑幕|实际上Kuranoka很难买到版型合适的衣服，为了确保腰围合适，Kuranoka穿着的百褶裙会显得比较短。}}
** 喜欢在校服的基础上添加一件白色冲锋衣外套。白色冲锋衣的肩两侧有两条深蓝黑色竖线（立绘V1并未画出）
** 喜欢在裙子下面叠穿一条运动短裤
* 穿衣风格见[[Kuranoka#审美|穿衣风格]]

=== 性格 ===

* 独自面对陌生人可能有些社恐，但是对于熟人或者有熟人在身边就会本性暴露。
* 对于别人的发言非常很在意，喜欢让别人开心。
* 很不擅长道歉，即便这个事真的是自己的错。但是Kuranoka会表达出歉意并且想办法解决事情。
* 喜欢为同学打抱不平。（这也是Kuranoka小学遭到排挤的原因之一）
* 说话比较直接，十分随性。
* 拖延症非常严重，在ddl前狂补内容是常有的事。但是做自己喜欢的事情又常常效率超高。
* 泪点在外看似很高实际上非常低。经常一个人在自己的房间里释放情绪。
* 很容易也很害怕尴尬的情景，经常会开始发癫来摆脱困境（什么）
* 很害怕做错事，做错事后会陷入无休止的自责。会反复纠结自己过去说过的话或做过的事。
* 擅长安慰别人，但是非常不擅长安慰自己。
* 某些时候有重度强迫症，但是在收纳等方面又极度摆烂。
* 大多数时候是理性与感性都在线的，但是情绪出现非常容易极端化。
* 对自己喜欢的事物会突然变得非常话痨（）。
* 十分喜欢与朋友开玩笑，有时会故意说出挑衅性的话语，观察对方的反应。
* '''对待他人通常十分真诚，但并不是一个特别好说话的人。'''她对朋友的包容度很高，但在发现问题时也经常会犀利地指出，有时甚至会给对方带来较大的压力。{{黑幕|某种意义上确实是个压力怪。}}
** 如果意识到自己的言语伤害了朋友，Kuranoka会尝试安慰对方，并努力缓和之前的气氛。
*非常反感仗势欺人、虚伪、冷漠、不讲道理以及试图控制他人的行为。
*对自己的作品有很高的要求。完成一件满意的作品时会感到开心，但也经常很快发现其中的不足（然后推翻重来，Kuranoka很急性子，这种特质让Kuranoka的进步很快但是作品完成度不高并且缺乏后续的经验）。
**愿意向他人展示自己的作品，也会开心地接受别人的赞赏（尽管嘴上可能仍然强调自己技术很差）
**当他人对自己的作品提出尖锐的批评时，Kuranoka很容易开始自我怀疑。尽管如此，相比作品完全无人关注，她仍然更希望得到他人的认真反馈。
*在现实生活中说话通常较为理性，但在情绪激动时语速会明显加快，有时甚至会因为过于兴奋而说得有些混乱。在网络上，Kuranoka则更喜欢使用各种颜文字、表情符号和网络用语来表达情绪。
*因为曾生活社交断连，非常非常希望朋友能够主动邀请自己外出，也十分珍惜愿意倾听自己烦恼的人。

=== 日常 ===

* 喜欢一天中的每一刻！
* 出门绝对不能忘记带纸和水（）还喜欢随身携带[[龙碧]]。（好喝，{{黑幕|而且可以缓解躯体化的恶心，头晕等症状}}）
* 因为自己很喜欢拖延与不太注意收纳导致房间十分凌乱。
* 自休学后喜欢经常熬夜。但是仍可以保持足够的睡眠时间。经常1:30睡觉9:30醒来。
* 走路速度很快，但经常因为发现一些特殊的事物而突然停下来拍照。
* 猫猫，嘿嘿嘿嘿，猫猫—— 非常喜欢猫。
* 不敢在全黑的时候睡觉，睡觉的时候必须留一盏灯。
* 房间里的东西很多，摆放得比较杂乱。
* 家里面放了很多抱枕与毛绒玩具。
* 非常关注天气状况，经常会打开雷达图，卫星云图频繁查看。她也关注全球各地所有的天气状况。
* 有随手拍照的习惯。走在路上常常停下来拍摄神秘的东西。

=== 健康 ===

* BMI长期非常低，在14.00上下浮动，可能存在营养不良（无医学诊断）。
* Kuranoka存在先天性 protan 型色觉异常，视锥细胞对红色与绿色的感知较弱。表现为难以区分浅紫色/浅蓝色，咖啡色/深绿色等。
* Kuranoka 的躯体化与惊恐症状非常严重。发作条件包括但不限于独自出行、在室外进食、在室外饥饿（这让现在的Kuranoka只能算好时间调整进程......）等。Kuranoka因此感到痛苦。
* {{黑幕|因为Kuranoka在童年时期多次经历父母醉酒的情况，她存在非常严重的[https://zh.wikipedia.org/wiki/%E5%91%95%E5%90%90%E6%81%90%E6%83%A7%E7%97%87 Emetophobia]<ref>{{黑幕|■■恐惧症（英语：Emetophobia）是一种与■■有关的恐惧症，它可以导致压倒一切的、强烈的焦虑。 ■■恐惧症者感到焦虑的原因有很多，包括惧怕自身在公共场合■■，惧怕看到■■物、■■动作、■■的景象，惧怕听到■■的声音，惧怕感到恶心反胃和惧怕被恶心等等。由于严格的节食和自我约束，■■恐惧症者常常体重过轻，甚至一部分人患有厌食症。当觉察到自己或周遭的人有反胃、■■的可能性，■■恐惧症者可能会出现反常甚至极端的行为，比如难以抑制的尖叫、哭泣、逃跑，严重时甚至会昏倒，以逃避他们感知到的■■威胁，甚至只是潜在的威胁。}}</ref>以至严重影响了Kuranoka的生活，这间接的导致Kuranoka体重非常轻并且回避进食。在面对相关情景时会发生严重的惊恐（包括躯体化发作）。<ref name=":0" />}}
** {{黑幕|当遇到与这一恐惧有关的情境时，Kuranoka可能出现强烈的焦虑与惊恐反应，有时甚至伴随明显的躯体化症状。}}
** 也许因此，Kuranoka的肠胃很脆弱。在学校常常因为相关问题请假。

=== 反感 ===

* 攻击性谩骂，对于亲人与朋友的诅咒。Kuranoka对于这是完全无法忍受的。曾因为班上的男同学开Kuranoka家人的玩笑而将对方打到住院。
* 很反感跳脸，比如在自己的作品下刷别人的内容。
* 不希望自己的创意，内容被偷走。Kuranoka希望引起更多的共鸣，但是不希望自己的作品被当作别人的成果。

== 喜好 ==

=== 审美 ===

* [[萌娘百科:水色界隈|水色系]]。
* 喜欢白色＋浅蓝＋薄荷绿。
* 喜欢硬派音乐，最喜欢的曲风为Euphoric Hardstyle，因为这种曲风的情绪张力通常来说非常强。听歌风格偏向猫系电音（即现实世界中的“日本同人电音”）、硬派音乐与一些相对极端的曲风（如Speedcore）。情绪摇滚、流行朋克也是Kuranoka非常喜欢的曲风。<ref name=":0" />
** 喜欢旋律突出，随后经过情绪积累（Buildup），在 Drop 中猛烈释放的过程。

==== 穿搭 ====
* 在外喜欢穿比自己大好几号的宽松的衣服，常穿运动外套/卫衣搭配短百褶裙。（虹色室内空调开的很猛）在室外常穿T恤+短百褶裙，因为怕热喜欢光腿。
** 短裙下面通常会叠穿运动短裤。
* 不喜欢紧身衣和牛仔裤。
* 喜欢宽松衣物被风吹动的动态感觉。
* 很少穿戴饰品。
* 偶尔会穿戴袖套。常穿白色短袜+运动鞋。
[[文件:Rotating Thunderstorm Updraft.jpg|缩略图|253x253px|超级单体风暴]]
[[文件:莫纳科街景1.png|缩略图|226x226像素|莫纳科]]
[[文件:1 rocinha night 2014 panorama.jpg|缩略图|226x226像素|罗西尼亚（里约热内卢，巴西）]]

=== 环境 ===
* 非常喜欢甚至盼望强对流天气发生。（并非盼灾）并且很期待风雨过后的彩虹。
** 喜欢拍摄云体和雷电，并通过气象站数据观察降水，极端大风等气象要素。黑云压城的氛围与剧烈的大雨本身也会令Kuranoka感到兴奋。
* 特别喜欢天空即将发生剧烈变化的时刻。（如超级单体风暴，弧积云，或者锋面强降雪）
* 非常期待风雨过后的彩虹。暴风雨过后的蓝天与夏日午后充满积云的天空伴随蝉鸣经常令Kuranoka产生怀旧感。
* 雨前的泥土味。
* 讨厌持续的锋面阴雨天。喜欢雪。（可惜虹色没有降雪记录）
* 喜欢充满橘子皮香味的空气。
* 不喜欢过度安静、有秩序的环境
* 喜欢现代化错综复杂的，贫富差距大的极具割裂感的地方。如[[莫纳科]]。
** 对废弃建筑与老旧工业区没有特别的兴趣。相比已经失去活力的空间，Kuranoka更喜欢正在运转、充满人类活动的城市。（但是Kuranoka在游戏中很喜欢探索这种有生活痕迹的区域）
** 非常喜欢探索陌生的城市。进入陌生城市时，Kuranoka通常会先关注建筑与当地人的日常生活。比起事先规划路线，更喜欢没有明确目的地地闲逛，想到哪里便打开导航前往哪里。（虽然容易迷路）
* 很害怕人多的环境与被众多人注视。所以很害怕在室外发病。这也是Kuranoka有接近一年时间没有出过家门的原因。
** 尽管如此，Kuranoka实际上非常喜欢和朋友们一起外出游玩。经常出现明明很期待出门，却在临近出门时感到恐惧的情况。
* 喜欢「生活即将失控」的感觉。（如超强台风前夕）
* 喜欢前往具有烟火气的地方，甚至有些极端（如贫民窟）。
* 讨厌尖锐的声音。
* 讨厌过于严肃的场合。
* 很喜欢探索未知的环境，但喜欢的同时也很害怕。
* 宜居气温范围为16~24℃。Kuranoka非常不耐热，同时很耐寒。{{黑幕|曾经在10℃的情况下露腿穿夏季校服震惊全班同学。也曾经在30℃的情况下中暑再次震惊全班同学}}
* 很喜欢风吹过身体的感觉。
[[文件:Champi 2026-10-20 1300Z.png|缩略图|236x236像素|台风墙皮]]

=== 兴趣 ===

* 是气象爱好者，关注所在地乃至世界各地的天气事件。尤其期待强对流天气与台风天气。
** 在有热带气旋活跃时会查看云图，分析强度，在社群中高度活跃（虽然理论知识并不是很坚固）
** 在有大范围强对流天气活跃时（如龙卷风爆发）也会关注。
** 希望能主动去[[龙卷风走廊]]追逐一次龙卷风爆发。
* 喜欢画画。虽然技术始终停留在初学者水平，但是她认为能通过画画表达出自己想象中的东西是一种很好的感觉！
* 喜欢编曲。Kuranoka很喜欢听深海气压（曲风也许类似地球上的Nanatsukaze）与Novastar（曲风也许类似地球上的*Luna）的音乐。因为这两个人，Kuranoka也想通过音乐来实现自我表达。
* 运动方面喜欢足球与羽毛球。即使自己菜的没边。曾参加过学校的足球选修课（然后被其他同学虐成区）
* 喜欢摄影，会随身携带相机记录日常的一些“美好事物”。（相册中有包括但不限于垃圾桶特写，消防栓特写，甚至野外出现的马桶等神秘内容）
* 喜欢玩沙盒游戏与开放世界游戏，以及音乐游戏。
*Kuranoka非常喜欢烟火大会、音乐节、漫展以及学校文化祭等热闹的活动。
[[文件:Okra (Abelmoschus esculentus) in a Bowl.jpg|缩略图|218x218px|'''秋葵'''（学名：''Abelmoschus esculentus''），一种锦葵科、秋葵属的一年或多年生草本植物。]]

=== 饮食 ===

* 最喜欢的水果是西瓜，最讨厌的水果是牛油果。很喜欢西瓜汁与柠檬水。（西瓜+椰奶+椰果太好喝了你知道吗？）
* 最喜欢的蔬菜是秋葵，最讨厌的蔬菜是茄子（极度厌恶{{黑幕|因为极度讨厌茄子，曾经吃茄子吃到OTTO过（）}}）
* 最喜欢的肉类是牛肉，什么肉都喜欢吃。
* 无法接受辣味。
* 喜欢喝[[龙碧]]这种碳酸饮料。
[[文件:邪恶QQ肠.gif|缩略图|海狮]]

=== 其他 ===

* 最喜欢的动物是海狮。也很喜欢猫和水豚。
* Kuranoka喜欢的创作作品通常具有非常强烈的情绪感染力。无论是绘画还是音乐，她都希望作品能够传达情绪、讲述故事，同时也注重作品本身是否足够好听或好看。
*Kuranoka十分向往前往[[莫纳科]]旅行，也希望未来有机会在[[大田地城]]、[[奥多拉]]或莫纳科等城市生活。

== 生活 ==

=== 初中生活 ===
Kuranoka就读于虹湾市立第七中学校，曾在初一10班，初二9班，初三3班。复学后的班级为初三2班。<ref name=":0" /><ref>虹湾七中采用走班制度</ref>

初中时期的Kuranoka学习成绩位于年级前列（常年在前十名）{{黑幕|然而，成绩好不代表上学就一定快乐。}}。擅长的科目是数学、纳语（英语）、物理、地理。不擅长的科目是若叶语（日语）、体育、政治（是的，凯特有政治科目，分为时政与理论），Kuranoka尤不擅长政治理论{{黑幕|常常选择题满分，大题个位数分数}}。Kuranoka反感所有需要背诵才能拿到高分的科目。

最喜欢的科目是地理。在自然地理与人文地理方面都能与其他同学拉开差距。虽然没有学过但是对高中的自然地理部分已了如指掌。

最讨厌的科目是体育。Kuranoka的体育成绩非常差。此外Kuranoka是虹湾七中建校以来唯一一个BMI分数拿到0分的。Kuranoka体育方面爆发力尚可及格，耐力与体力非常差。尤其讨厌长跑（即便Kuranoka的体型被同学称为先天长跑圣体）。（跑完常常会导致恶心与超高心率，可能会让Kuranoka的惊恐发作）

曾在初一初二担任“风纪委员”，因为其管理良好而广受同学与老师喜爱。Kuranoka管的很松而且因为比较人性化，并且Kuranoka会勇于在同学被不合理对待时直面权威，这让Kuranoka在同学中的声望很高。Kuranoka的班主任也很通人性，甚至曾与Kuranoka一起对抗年纪政策。

开展过气象相关社团活动，每周四会为社团内成员讲解气象知识，有时也会与其他气爱一同外出进行追风活动。{{黑幕|虽然只是在虹色境内，没出过远门}}Kuranoka通过社团认识了很多朋友。在Kuranoka升入初三后，气象社随即进入冻结。Kuranoka现在是校内音游社的成员，占0.5个名额。{{黑幕|没错，是0.5个人。}}Kuranoka的音游能力也在级部的音游玩家中位于前列。

擅长结交朋友与组织活动。常常会带动班级气氛。同时Kuranoka比较反感“读不懂空气”的人。

经常开导班级中想不开的同学，会倾听朋友们诉说自己的烦恼。

Kuranoka不能接受不公平事件的发生，常常在弱者受到欺负、凌辱时站出来保护弱者。（即便她经常因为这个特质被一些人盯上）

Kuranoka虽然可以给自己的朋友们提供许多情绪帮助，但是Kuranoka很不擅长处理自己的情绪。因其高敏感的特征，她的情绪波动非常大，可能会在同学面前突然爆发。（曾与同学打架投掷课桌与椅子，曾在若叶语课上与老师吵架后掀桌摔门而去）（详见[[Kuranoka#情绪管理|情绪管理]]）

{{黑幕|虽然Kuranoka看似阳光，但长期积累的压力与身心状态的变化，最终还是对她的的正常学习和生活造成了严重影响。}}

=== 高中生活 ===
我还没上呢。

=== 情绪管理 ===
Kuranoka的情绪管理在生活中是一大问题（所以单独一个板块介绍）。尽管她在日常生活中很像一个正常人，但是她的高敏感特质非常明显，情绪失控后会非常过激（有些危险）。

{{黑幕|详见[[Kuronata]]}}
=== 家庭 ===
Kuranoka的现住址为[https://blkl.fun/map/#map=16.5/-7.85054/14.03490 凯特共和国虹夏州虹色市虹湾霞山北通り114番地 701室（14.034902°E, -7.850549°S）][[文件:FBS Residence 虹色.png|缩略图|220x220px|FBS Residence 虹色]]

父亲从事教育行业，在虹色具有一定的社会声望，也认识很多当地的知名人物，对待朋友真诚可靠。父亲教育彼方尤其注重学业成绩、纪律以及个人责任。他对Kuranoka抱有较高的期望，也习惯于按照自己的教育理念要求她。随着彼方的身心状态逐渐恶化，在自己的校园生活受到影响后直人却始终无法理解，认为彼方是「不想上学」「逃避现实」，还曾提出要“禁止使用电子设备”，“每天跟着自己去海岸山间体验农村生活”等。就这些事彼方与直人发生过很多矛盾。彼方十分重视父亲对自己的评价却也对父亲的处事方式感到严重不满，但Kuranoka不敢提出因为担心再次重演小时候的暴力事件。但近年来，经过彼方母亲的劝说以来，直人逐渐意识到了自身教育方式中存在的问题，直人已经意识到了自己存在问题也做出了改变，这也让彼方卸下了一些防备，但因为童年时期的创伤过于严重，彼方与父亲仍然存在较为严重的隔阂。

母亲是自由职业者，小时候比较叛逆，所以可以理解彼方的一些行为。她比较重视成绩与彼方的未来生活（有些过度了），这让彼方有些焦虑，即便她对自己的未来很自信。她也是彼方在艰难时期的依靠，由于彼方难以直接向父亲表达自己的想法与感受，她经常选择先向母亲倾诉，再由母亲转告给父亲。彼方的母亲起初身心状态逐渐恶化时也无法理解彼方的身体不适，也曾怀疑是否在逃避现实。但彼方的母亲很快就意识到彼方的痛苦所在。在艰难时期，她始终一直在家陪伴着彼方。

Kuranoka的家庭经济状况总体较为稳定，虽然不算富裕但是足以支持Kuranoka在自己热爱的东西上投入金钱。<ref name=":0" />也足以应对部分突发事件。
[[文件:Kuranoka在凯特国内社交媒体的头像.png|缩略图|210x210像素|Kuranoka在凯特国内社交媒体的头像，Kuranoka很喜欢拿自己的半成品画作当作头像|class=pageimage]]
=== 网络 ===
Kuranoka在[[Kirakira]]经营账号“Kuranoka”，会发送一些关于电子游戏与音乐的视频，也会在[[Netaflow]]上分享自己的日常。

== 理想 ==
Kuranoka希望未来能够从事气象追踪或科研相关的工作，同时保留充足的自由时间进行艺术创作。她向往拥有清闲、能够自由安排的生活。

Kuranoka希望能够经常前往世界各地旅行，亲身体验不同地区的自然环境，城市面貌与人文气息等。

对于Kuranoka而言，艺术创作也是一种向外界表达自我的方式。她希望通过音乐、绘画等作品，让更多人了解自己的故事。

相比成就与名声，Kuranoka更想让自己能够给更多人留下某种难忘的感受。

'''她渴望与他人、与世界建立真正的联系。'''

{{黑幕|为什么这一段像GPT写的}}[[文件:2013 Rainbow over Washfold.jpg|缩略图|257x257像素|[[彩虹]]是一种光学现象]]

== 轶事 ==

* Kuranoka非常喜欢记录彩虹。此外，虹色的彩虹非常多。

* Kuranoka的数学、纳语（即英语）、物理、化学、地理成绩非常出色，但是政治、历史等文科科目成绩较为不足。Kuranoka曾多次代表虹色七中参加竞赛。<ref name=":0" />

* Kuranoka有一定的Viper与[[Elona]]的编程基础。

* Kuranoka是音乐组合“[[虹外線NIJIGAISEN]]”的主创，担任作曲 / 编曲 / DJ 等植物。
** Kuranoka 虽然担任编曲职务，但是因为没有学过乐理，写出来的屎山实在离谱，因此经常被其他成员吐槽“这东西根本不是给人弹的”。<ref name=":0" />

* Kuranoka的武器是一把 30cm 长的改造过的金属尺，上面装载了一个Ribbon Controller。可以通过usb连接到电脑，滑动Ribbon Controller对应MIDI CC 里面 0->127 的值。
* Kuranoka非常讨厌虫子{{黑幕|尤其是“区”，曾因处理垃圾时发生意外导致垃圾桶内滋生的“区”散落一地，Kuranoka当时面对散落的区彻底崩溃所以留下了严重的心理阴影😡😡😡}}<ref name=":0" />
* Kuranoka可以All Perfect [[Atmosphere（音游）|Atmosphere]] 中的 14 ~ 15 级曲目。<ref name=":0" />
* Kuranoka希望自己可以考上[[奥多拉州立大学]]（OSU）或者[[虹色大学]]（NJU），虽然看起来遥不可及。
* 是[[咲本可奈枝|Hakari]]的幼驯染。

== 关系 ==

=== 家人 ===

==== 天野直人（父） ====
天野直人是天野彼方的父亲，是一位思想保守的，在虹色小有名气的教育家。设计出身。

彼方与直人的关系长期较为紧张。由于过去的家庭矛盾与直人对彼方的暴力行为，方在很长一段时间内对直人表现出惧怕甚至严重躯体化的反应。虽然直人如今已经有所改变，彼方也清楚这一点，但过去的经历仍然使两人之间存在难以逾越的红狗。彼方很难向直人表达自己的真实想法与感受。

==== 天野由佳（母） ====
天野由佳是天野彼方的母亲，是一位自由职业者。

是彼方度过艰难时期的依靠。相比父亲，彼方更愿意向由佳倾诉自己的烦恼与情绪。在彼方与直人发生矛盾时，由佳也时常承担着两人之间的沟通与调解工作。

=== 乐队内同学 ===

==== [[汐入未絵]] ====
汐入未绘是Kuranoka的初中结识的同学。

==== [[咲本可奈枝|Hakari]] ====
Hakari 是 Kuranoka 的[[幼驯染]]，两人因父母是好友（Hakari的父亲是天野由佳的好友）。在Kuranoka 的4~8岁时乃至现在，因家境原因，Hakari 带 Kuranoka 见识到了许多新鲜事物，也让一个默默无闻的，平凡的 Kuranoka 第一次自身的表达与情感。

在 Kuranoka 遭到老师的暴力对待，同学的排挤时，常常会去荧光海岸一带散步，此时Hakari常常会随行陪伴（ Hakari 的家位于荧光海岸駅附近）。Hakari 也曾在 Kuranoka 心情低落时给予很多能量。因此，Hakari 在 Kuranoka 的童年里如同一道光，所以在6岁之后，Kuranoka 常常称可奈枝为“光”。（Hakari 一词是因为 Kuranoka 小时候记错单词，实际上应为 Hikari，但是这一问题等到 Kuranoka 在小学时才被发现。因为改名过于繁琐，Hakari 一词就被沿用至今了。）

在 Kuranoka 12岁时，Hakari 因为要搬家到虹色市南部地区上学不得不与 Kuranoka 分开。在 Hakari 进入新的中学后因郊区出身在高高在上的精英环境中遭到了冷落与排挤（详见 Hakari 个人页面），之后通过 Hakari 与父母协商，升入高中重返虹湾。

==== [[若生柚希]] ====
若生柚希是Kuranoka的初中结识的同学。

==== [[千田萌果]] ====
千田萌果是Kuranoka的初中结识的同学。

== 经历 ==
{{ambox
| type = delete
| image = Ambox warning red.svg
| size = 60px
| title = 视觉刺激与光敏性癫痫警告
| text = 本页面的“经历”章节包含视觉特效，包括剧烈闪烁、色彩反转等异常视觉效果。上述内容可能引发光敏性癫痫患者的不适或发作。建议对闪烁画面敏感的读者跳过该章节。
}}''故事还在继续，会随着现实时间的流逝逐渐被完善——''

【负能量警告】

【施工中，可能随时发生更改】

<div class="mw-collapsible mw-collapsed" data-expandtext="展开经历" data-collapsetext="收起经历">
<div class="mw-collapsible-content">[[文件:凯特共和国雾桥城市天际线！.png|缩略图|211x211像素|雾桥城市天际线]]

=== 童年时期 ===
1937年1月1日，Kuranoka出生于[[凯特共和国]][[雨川州]][[雾桥市]]。

童年的 Kuranoka 并没有太多引人注目的经历。Kuranoka的家境一般，这让Kuranoka没见过什么世面。

4岁时搬家到虹色市虹湾区结识了[[咲本可奈枝]]。

==== 线索 ====

=== 小学时期 ===
Kuranoka的小学时期前期是非常痛苦的。

在童年时期做惯了老实人的Kuranoka到达小学时常因为融合不进集体被孤立。

Kuranoka在读小学时常被学校的老师暴力对待，因为其爱哭的性格也导致了同学的排挤，这也直接导致了后来Kuranoka高敏感，情绪波动非常大的特征，{{黑幕|也让Kuranoka学会了逃避。}}。

因此，Kuranoka对于上学产生了厌恶。

尤其是在二至三年级期间，长期的精神压力使 Kuranoka 一度出现了明显的躯体化反应。然而，当时的 Kuranoka 尚不了解这些症状的成因，家人也未意识到其可能与心理压力有关。

三年级时，Kuranoka 曾随家人前往[[维尔布]]度假，先后到访了[[莫纳科]]与[[海葵]]。

远离了熟悉的校园环境，在陌生城市的街道与热带海滨之间，她终于得以暂时摆脱日常生活中的压抑。

在旅途中的这段日子里，Kuranoka 的身心状态逐渐好转，先前困扰她的症状也逐渐缓解。

直到四年级，Kuranoka 结识了同桌[[白石崎浩]]。对于长期在人际关系中屡屡受挫的 Kuranoka 而言，这段友谊成为了她小学生活中一个重要的转折点。

尽管改变的过程并不顺利，过去的经历也依然影响着她，但 Kuranoka 开始尝试重新认识自己，逐渐意识到自己并非只能活在他人的否定之中。

她决定不再像过去那样消极地度过每一天，而是鼓起勇气，主动去改变自己的生活。

此后，Kuranoka的成绩出现了可观的上涨，到五年级时，Kuranoka 已经成为了班中的中游学生。

但是Kuranoka的若叶语成绩还是不太理想。

Kuranoka曾被语文老师当面否定自己的学习能力与未来，甚至被告知「你就是个废物，没必要学了。你不会有任何成就的」。

这句话对Kuranoka留下了极为深刻的印象。直到今日，她仍然清楚地记得老师当时所说的话。

Kuranoka 在五年级认识了[[万尾静夏]]，静夏也许是Kuranoka小学时最好的朋友，至今仍然保持联系。

在与静夏的接触下，Kuranoka逐渐变得不再内向。

（然而，即便 Kuranoka 已经开始努力改变自己，部分老师对她的偏见仍然没有消失。甚至有老师曾私下劝说静夏远离 Kuranoka。）

在六年级，Kuranoka更是取得了不错的学习成果，即便这对于初中的成就来说不值一提但是仍然是Kuranoka小时候的一大里程碑。

==== 线索 ====

=== 初中时期（一） ===
初中后的Kuranoka逐渐变得外向，在学业，兴趣等方面都取得了不错的成果。

在上初一的第一天，Kuranoka便受到了学校的第一份严重处分，原因是打架。（即便最初是对方的错误，Kuranoka仍然被记了处分。这让Kuranoka的心态发生了一些微妙的转变，她开始变得有些较真，她认为她没有错。）

在这之后Kuranoka虽然短暂的遭受了同学们的议论，但是仍然凭借自身魅力积攒出了自己的好友圈。

初一下半学期Kuranoka开办了自己的社团，开始为学校制作气象相关的科普海报，也结识了[[汐入未絵]]，[[千田萌果]]等好友。

其次，在这一学期Kuranoka也取得了自己上学以来考的最好的成绩。

初一下半学期，因为拆迁，Kuranoka搬家到了虹色市镜花中区。

==== 线索 ====

* 在进入初中的第一天Kuranoka就与班级中的其他成员爆发了相当激烈的冲突，事件起因于[[近间希予]]对Kuranoka的朋友[[秋川千寻]]进行挑衅。而Kuranoka看不下去，随口怼了几句，然后[[近间希予|希予]]便开始辱骂Kuranoka的家人，并且诅咒Kuranoka。在愤怒之下，Kuranoka掀翻了课桌，并开始大声斥骂对方，言辞也变得愈发激烈。随后，近间希予走上前来，Kuranoka拿起雨伞作出防卫姿态，但近间希予直接踢向了Kuranoka的腿部，Kuranoka因为太痛蹲下，面露难色，但是因为对方还在输出忍无可忍的Kuranoka也开始动手，两人扭打在一起。这场冲突恰好被学校校长当场发现，双方随后均受到了纪律处分，由于是入学第一天，学校并未要求两人回家反省，但分别要求两人提交一份1000字的检讨书。{{黑幕|入学第一天就喜提级部第一份处分的来了。不仅是这一个级部的第一份处分而且是Kuranoka人生中的第一份处分。}}

=== 初中时期（二A） ===
初二，Kuranoka开始参与[[Elona]]语言的信息竞赛，即使半年的学习并未获得什么成就，但这让Kuranoka也十分愉悦。也直接的促使了Kuranoka开始喜欢写程序。

Kuranoka非常喜欢初二的班级，在这个学期，她认识了[[若生柚希]]。并且在年级中开始担任一些重要职务。年级中老师们也很重视和看好Kuranoka。

（即便Kuranoka在初二依然非常容易爆炸（））

{{黑幕|但是这会持续下去吗？}}

==== 线索 ====

=== 初中时期（二B） ===

<span id="kk-fx-start" class="kk-fx-marker"></span>

初二下半学期以后，随着她对自己的要求不断提高，学业安排也慢慢紧凑了起来。

她仍然维持着自己优异的学习成绩，还没有意识到自己的压力逐渐的超载。

然而，长期积累的压力似乎已经超出了她所能承受的范围。躯体化的魔爪还是伸向了她。

她开始忍受，独自承担痛苦，但是这让她的身心状态加速恶化。

她很不希望别人看到她脆弱的一面而担心，更不愿让那些曾经相信她、期待她的人感到失望。可是，与此同时，她又无比渴望得到他人的安慰，希望有人能够听她倾诉。

<span id="kk-fx-rift" class="kk-fx-marker"></span>

{{黑幕|在这段时间，Kuranoka的梦想逐渐在这一次又一次的180BPM的心慌中迷失掉，在一阵又一阵撕心裂肺的干呕中破碎掉。}}

在一次又一次的发作下，她与家人的关系也再次紧张起来。（这也是Kuranoka进入暴怒状态与绝望状态最多的一段时期）

<span id="kk-fx-void" class="kk-fx-marker"></span>

她曾经认识很多朋友，经历了很多值得珍稀的时光，也曾对未来的日子充满向往。

{{黑幕|但是现在，在尚未意识到发生了什么时，她已默默的乘上了绝望之舟，然后被抛弃在无人的孤岛。}}

她想要获得帮助，她想要与世界重新建立链接。

'''她崩溃了'''

<center>

{{黑幕|''为什么偏偏是我？''}}

{{黑幕|''我到底做错了什么？''}}

{{黑幕|''明明已经这么努力了，我真的......啊......''}}

{{黑幕|''明明什么都没有做错。''}}

{{黑幕|''我为什么连...连最普通的生活都变得这么困难啊啊...呜呜......''}}

{{黑幕|''我...不想再听见那些期待了。也许我本来就该是个废物啊啊...呜啊......''}}

{{黑幕|''那些美好的都算是死前的幻象对吧....？''}}

{{黑幕|''求求你们不要再说了''}}

{{黑幕|''我已经很努力了啊......呜......''}}

{{黑幕|''为什么你们就是看不到''}}

{{黑幕|''为什么我就是没有变好啊...''}}

{{黑幕|''我真的想在无人在意的角落自杀''}}

{{黑幕|''我讨厌这样的自己''}}

{{黑幕|''拜托了......''}}

{{黑幕|''うああああああああああああああああああああああああああああああああああああ――ッ！！''}}

她仍然记得自己的目标，也尝试去触及。但是她现在已经被折磨到一点力气都没有。

'''她迷茫了。'''

在这段日子中，Kuranoka仍然对天空充满兴趣，她常常在那个囚禁她的房间中看窗外的风起云涌，看可爱的积云一点一点长大，成为无比强大的积雨云后，然后亲自把自己杀死。<ref>积雨云发展到后期下沉气流及冷池外流会切断暖湿入流，上升气流失去维持条件，于是雷暴逐渐消散。</ref>

[[文件:虹色南区雨川.png|360x360px|虹色的积雨云|居中|无框]]

{{黑幕|''（Hakari：Kanata？你还好吗）''}}

</center>

==== 线索 ====

=== 初中时期（三） ===
进入初三后，Kuranoka的身心状况仍然没有明显好转。Kuranoka与他的母亲在虹湾七中附近租了一间房子，距离学校很近。9月期间，她曾尝试偶尔返回学校，同学们见到Kuranoka的回归也很兴奋。当Kuranoka再次走进教室时，汐入未绘几乎是直接冲上前去，一把抱住了她。那些熟悉的面孔，那间熟悉的教室，还有久违的喧闹声。一切似乎都在慢慢回到原来的样子。虽然症状还是没有出现明显的好转。但是Kuranoka基本可以每天在学校停留数个小时了。

但是，好景不长。那股令她无比熟悉、又无比恐惧的感觉再次袭来。

Kuranoka在9月末一天的英语晚自习上试图继续写字，手却开始不受控制地颤抖。原本整齐的笔迹逐渐变得歪斜、扭曲。

{{黑幕|''唉...怎么又...''}}

{{黑幕|''明明已经能够重新坐在教室里了。''}}

{{黑幕|''明明一切才刚刚有了一点起色。''}}

{{黑幕|''可为什么偏偏又是现在？''}}

{{黑幕|''我还可以...''}}

最终，在同桌的劝说下，Kuranoka去主动找老师开了假条。

因为家长外出，Kuranoka只能自己走回家。

离开校门时，Kuranoka与小学时期最好的朋友[[万尾静夏]]擦肩而过。静夏认出了她。但Kuranoka没有注意到静夏。

她看见Kuranoka独自待在绿化带旁，脸色苍白，一边哭泣，一边忍受着一阵又一阵的干呕。{{黑幕|她看到了Kuranoka最不愿让人看到的一面}}

但Kuranoka完全没有注意到静夏的存在。

回到家后，那些刚才还折磨着Kuranoka的症状，却渐渐消失了。

''又是这样。。。''

这已经是Kuranoka第n次躯体化发作，回到家症状快速消失。

因为这件事，Kuranoka与母亲发生了最严重的一次争吵。

在这之后，Kuranoka变得非常抵触学校。

Kuranoka常常孤独的前往海边散步，但是没有人陪她了。她独自走过曾经与Hakari经常走过的荧光海岸，经常走着走着就无声的哭起来。

随着时间推进，Kuranoka逐渐沉迷于网络世界。

10月以后，她开始在家中直播电子游戏，并很快在[[Kirakira]]积累了一批粉丝。电子游戏、音游、网络社群与直播逐渐占据了她的日常生活。

但与家人的争执还在继续。

但是Kuranoka仍然惦记着学校。她主动联系班主任，表示希望这一年继续制作气象科普海报，并拜托班主任帮助在学校展出（投屏）。即使很难亲自走进教室，她也不愿意就这样彻底消失在自己曾经熟悉的校园里。她不甘心。

次年1月1日，Kuranoka过生日了，她的愿望是自己可以好起来。

此后的生活仍然没有发生太大的变化。Kuranoka将大量时间投入音乐游戏、电子游戏与网络社群，长期待在家中，甚至整个夏季都很少外出。

次年4月，随着毕业季逐渐临近，Kuranoka决定为自己所属的年级留下些什么。曾经朝夕相处的同学们，即将走向各自不同的未来。

她冒出了给自己年级的同学们写歌的想法。她想尝试将自己对校园生活的回忆、对同学们的留恋，以及对他们未来的祝福，写进一首歌曲里。

于是她开始学习DAW以及音乐制作相关知识，即便常常因为自己“没天赋”“学得慢”陷入内耗与崩溃，但是她仍然在努力的学习。对Kuranoka而言，这首作品也承载着她未能通过日常校园生活亲自表达的感情。

后来，到了6月，Kuranoka仍然参加了学校组织的毕业照拍摄与毕业典礼。两次活动都伴随着严重的身体不适，但她最终还是完成了这两件事。

在中考前一天晚上，Kuranoka将那份制作尚显稚嫩但倾注了大量心血的毕业赠曲以及最后一份考试期间的天气预报视频一同发送给了班主任。随后，在最后一节班会课，班主任与Kuranoka进行了视频通话。透过屏幕，她再次见到了许久未见的同班同学们。

那些熟悉的面孔，又一次出现在她眼前。

'''在那一刻，Kuranoka终于久违地感受到了与同学们相处时的快乐。'''

随着凯特共和国MNES虹色虹湾初中学力调查（中考）的结束，Kuranoka以一种与自己曾经想象中截然不同的方式，迎来了初中生活的结束{{黑幕|吗？}}。

Kuranoka需要做好准备，她未来面对的是全新的年级，全新的教材与截然不同的老师们......

'''她必须再一次面对这一切。'''

''这一次，又会发生什么呢？''

==== 线索 ====

=== 初中时期（四） ===

'''被困在囚笼中透过玻璃仰望天空的彼方终于走到了天空之下。'''

==== 线索 ====

</div>

=== 虹外线NIJIGAISEN ===
</div>

— 未完待续 —

== 相关作品 ==

== 画廊 ==
在此感谢所有为Kuranoka绘制图片的画师们！！未经允许请勿使用喵！！！擅自使用了我与画师们追责的喵！！！！

* [https://space.bilibili.com/515900536 Kuranoka]{{黑幕|没钱约稿没有画技只能自产的人已急哭www😭😭}}
* 冷酷无情墨少（mhs：[https://www.mihuashi.com/profiles/3296532%EF%BC%89 https://www.mihuashi.com/profiles/3296532）]
<gallery mode="packed" heights="180">
文件:Kuronata 稿件.png|Kuronata形态<ref>画师：冷酷无情墨少（https://www.mihuashi.com/profiles/3296532）</ref>
文件:混乱的草稿，使我的Kuranoka旋转.png|混乱的草稿，使我的Kuranoka旋转
文件:看，Kuranoka.png|立绘V1
文件:Kuranoka的当前头像.png|头像
文件:Kuranoka的Minecraft皮肤.png|Minecraft 皮肤<ref>画师：MCskin定制_猫猫蛋（https://space.bilibili.com/499168487）</ref>
文件:使用Picrew制作的Kuranoka概念图.png|早期版本Picrew捏脸
文件:Kuranoka 曲绘草稿v1.png|废弃草稿
</gallery>

== 注释 ==
<references />{{D|龙}}{{Background|image=积雨云.png}}{{ambox|type=content|image=Padlock.svg|size=65px|title=请！不！要！直！接！抄！袭！Kuranoka！的！特！色！与！锚！点！内！容！！！|text=请不要把我的自设喂给AI。请不要把Kuranoka作为借鉴或模仿对象。请不要在未经许可的状态下创作关于Kuranoka的二创内容。© Kuranoka. All Rights Reserved. 保留所有权利。}}

== 参见 ==

* [[虹色]]
* [[Kuranoka（本人）]]

== 借物表 ==

* Another Me - Neutral Moon（Kuro -> Kura转场）
* MARENOIA - LeaF（Kura -> Kuro转场）
{{Navbox 在积雨云上空相遇}}{{Navbox OC}}

{{角色结构化数据
|名称=Kuranoka
|本名=天野彼方
|英文名=Amano Kanata
|别名=KK
|其他名称=krnk
|简介=Kuranoka（天野彼方，Amano Kanata）是Blockland世界观中的虚构人物，虹湾市立第七中学校的学生、音乐组合「虹外線 NIJIGAISEN」的主创。Kuranoka性格活跃、真诚而敏感，热爱天气与音乐，尤其热衷于追逐风暴。她曾在学业、人际交往与网络方面取得出色的成绩，但也因成长过程中长期积累的身心压力而中断学业，目前仍在探索未来的方向。
|头像=Kuranoka的当前头像.png
|立绘=看，Kuranoka.png
|所属组合=虹外線NIJIGAISEN
}}

MediaWiki:KuranokaPageTransition.js

2026-10-24T09:25:40Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V41 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}

const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;

// V24: the two article worlds have deliberate, deterministic palettes.
// "os" is NOT a light theme: it can resolve to dark on the reader's
// computer. Session storage may also be unavailable. Therefore, never
// restore a stale "os" token when landing back on Kuranoka.
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
// Citizen may reapply OS-preference classes after its own scripts load.
// Keep each world's class correct without changing the user's setting.
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
// V31's page-style retry solves occasional initial unstyled portals.
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v41').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','41');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}

// V17: the dark-world extras run in *both* the visible document and
// its same-origin preview iframe. They never alter other Wiki pages.
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
// Multiline .heimu cannot use a single nowrap pseudo-element:
// it piles all copied text onto line one. Project each rendered
// line into two SHORT clipped chromatic slices only on hover.
// Range measurements leave the original article DOM and wrapping
// entirely untouched, including italic/link children.
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
// Copy a link only if it truly occupies one
// rendered line. Multiline links keep real text.
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
// V29's useful identity faults, transplanted without its transition
// shaders. Only text nodes are wrapped; Wiki links stay clickable.
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
// All sprites are static layers with compositor-only
// transform/opacity animation. No persistent canvas or RAF.
// The soot is a side-bank haze, not a random full-screen
// spread of isolated circular clouds.
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();

// One brief spatial fault roughly every 14-36 seconds, never a
// full-screen white strobe. Pause while the iframe is hidden.
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();

// The nested preview only applies its own theme; no recursive iframe.
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='41.0';

// Easter eggs + Infobox gear are the default. No floating pill.
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
// C2-smooth cinematic ease; starts and settles with zero acceleration.
// Its midpoint stays at t=.5, preserving 00:33 / 02:39 beat alignment.
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
// V24: preload both original background photographs. The target
// image is decoded while its real-document iframe is preparing,
// reducing flashes of the bare background-color at navigation.
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
// Give the current photo first priority; then prepare the next
// world so the iframe and the eventual real page can reuse it.
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();

const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;

// Public-domain PADsynth recording, ~8.4s / 120KB. Change this
// to a same-origin Wiki-upload URL if external media are blocked.
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
// A plain media element can still play the recording when a site's
// CORS policy disallows reading the file into Web Audio.
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}

function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
// Micro-crackles: impulsive bursts with different decay times.
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
// A REAL recorded PADsynth sample; no generated wind-chimes.
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}

// Audio starts AT ITS TRANSITION SECTION, not at 00:00. Three seconds of
// crescendo accompany the fate-wheel awakening. V25's actual fire and
// particle painting remains unchanged. Music 00:33 / 02:39 now lands
// in the MIDDLE of the corresponding original V25 reveal.
const SCORE_KEY='kkpt:score-handoff:41';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
// Let the V25 fire steadily replace the red veil. Abruptly
// removing it at t=0 was the visible "turns bright" flash.
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
// The old fixed 6.6s removal could create a blank interlude when
// MP3 seeking/buffering postponed its cue. Release only after fire.
setTimeout(()=>{
if(fatePrelude===node)clearFatePrelude();
else node.remove();
},1700);
}
function fateSigilMarkup(isDark){
const at=(r,d)=>{
const a=(d-90)*Math.PI/180;
return [(150+Math.cos(a)*r).toFixed(2),
(150+Math.sin(a)*r).toFixed(2)];
};
const ring=(r,cls)=>'<circle class="'+cls+
'" cx="150" cy="150" r="'+r+'"/>';
const stroke=(a,b,cls)=>'<path class="'+cls+
'" d="M'+a.join(' ')+' L'+b.join(' ')+'"/>';
const poly=(points,cls)=>'<polygon class="'+cls+'" points="'+
points.map(p=>p.join(',')).join(' ')+'"/>';
// V41: let the BORDER carry the ornamentation. The middle is a
// single quiet emblem; no eye / thorns / wings / stacked rays.
const outer=ring(133,'kkpt-sigil-outer')+
ring(128,'kkpt-sigil-orbit')+
ring(121,'kkpt-sigil-ghost')+
ring(105,'kkpt-sigil-seal')+
ring(100,'kkpt-sigil-trace')+
ring(83,'kkpt-sigil-ghost');
const glyphs=Array.from({length:48},(_,i)=>{
const angle=i*7.5;
const major=i%4===0;
return stroke(at(121,angle),at(major?132:i%2?125:128,angle),
major?'kkpt-sigil-mark kkpt-sigil-major':'kkpt-sigil-mark');
}).join('');
const cardinal=Array.from({length:8},(_,i)=>{
const a=i*45;
return poly([at(99,a),at(111,a+4.2),at(120,a),at(111,a-4.2)],
'kkpt-sigil-diamond')+
stroke(at(85,a),at(96,a),'kkpt-sigil-needle');
}).join('');
const darkDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-dark-mark" d="M150 115L170 150 150 185 130 150Z"/>'+
'<path class="kkpt-sigil-dark-cut" d="M150 130L156 150 150 170 144 150Z"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
const hopeDrawing=
ring(54,'kkpt-sigil-core-orbit')+
ring(43,'kkpt-sigil-inner-orbit')+
'<path class="kkpt-sigil-light-mark" d="M150 119L158 142 181 150 158 158 150 181 142 158 119 150 142 142Z"/>'+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="7"/>'+
'<path class="kkpt-sigil-axis" d="M150 96V108M150 192V204"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-engraving" fill="none" stroke="'+
(isDark?'#ff8c9b':'#f7edcf')+'" stroke-width="1.3">'+
outer+glyphs+cardinal+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
// The sigil is a viewport overlay. Keeping it outside the zoomed
// Wiki body makes the clicked gear travel directly to true center.
root.append(prelude);
fatePrelude=prelude;
// Only an emergency timeout: the sigil must remain visible while
// waiting for a delayed soundtrack cue. No empty gap before fire.
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},30000);
}

// Actual transient analysis of the hosted Marenoia recording, 22.05 kHz
// mono / spectral-flux + low-band kick envelope. A main beat repeats
// roughly every 0.439 seconds (~137 BPM), with salient attacks near
// 31.775, 33.561, 33.751 and 34.250s. React to audio.currentTime:
// wall-clock timers would desynchronize during MP3 buffering/seeking.
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
// The fire segment only gets lightning. The pressure / dark vignette
// belongs to the AFTERMATH and survives the real page navigation.
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}

// Measured with the submitted MP3: heavy low-frequency accents repeat
// every 8 beats (~3.532 s at 135.9 BPM). Each was 1.6–2.1x the
// median low-band RMS of the seven intervening beats. Never trigger
// a full-screen pressure pump on all of the fast intermediate notes.
const AFTER_DARK_KEY='kkpt:dark-afterglow:41';
const DAWN_HALO_KEY='kkpt:dawn-cloudbreak:41';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
// Offline 0.25s RMS contour, normalized by the passage's 95th
// percentile. Tracks long-form dynamics without cross-origin
// WebAudio sample access (which may be forbidden by CORS).
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaDeepPulse(age){
// A 420ms inhale, 300ms hold and ~2.2s heavy exhale.
// One pressure wave per eight beats, not a rapid heartbeat.
if(age<0||age>=2.98)return 0;
if(age<.42)return smooth(age/.42);
if(age<.72)return 1;
return 1-smooth((age-.72)/2.26);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<svg class="kkpt-beat-scars" viewBox="0 0 1440 900" '+
'preserveAspectRatio="none" aria-hidden="true">'+
'<path d="M-20 340L126 317 203 355 294 339 383 382 477 352 605 395 728 365 842 399 982 371 1125 397 1264 351 1460 390" />'+
'<path d="M-20 635L158 605 294 646 404 612 547 668 679 622 846 653 991 621 1149 668 1277 636 1460 660" />'+
'<path d="M203 355l-19 33 27 39M842 399l30 34-20 47M404 612l-44 42 23 29M1149 668l39 41-18 32"/>'+
'</svg>';
// Put the vignette outside the page-scale camera so its
// darkness covers the WHOLE viewport even while the body zooms.
root.append(layer);
let live=true,raf=0,lastTick=0,source=null,lastKick=-100;
let cameraReleaseTimer=null;
let smoothPressure=0,index=0;
const releaseCamera=()=>{
root.style.setProperty('--kkpt-camera-zoom','1');
clearTimeout(cameraReleaseTimer);
cameraReleaseTimer=setTimeout(()=>{
if(!live)root.classList.remove('kkpt-camera-running');
},420);
};
const quiet=()=>{
layer.style.setProperty('--kkpt-beat-dark','.60');
layer.style.setProperty('--kkpt-beat-scale','1.025');
layer.style.setProperty('--kkpt-beat-blur','0.28px');
layer.style.setProperty('--kkpt-beat-glitch','.12');
layer.style.setProperty('--kkpt-beat-shear','0px');
layer.style.setProperty('--kkpt-beat-shear-reverse','0px');
layer.style.setProperty('--kkpt-beat-scars','.035');
root.style.setProperty('--kkpt-camera-zoom','1');
root.style.setProperty('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
root.style.setProperty('--kkpt-chroma-red','0px');
root.style.setProperty('--kkpt-chroma-shadow','0px');
};
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<38)return;
const dt=Math.min(.12,Math.max(.038,(now-lastTick)/1000));
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;cancelAnimationFrame(raf);
releaseCamera();
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
// The recording's actual loudness and 18s player fade BOTH
// attenuate the pump as the music settles down.
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const targetPressure=marenoiaDeepPulse(audioTime-lastKick)*
soundStrength;
const follow=1-Math.exp(-dt/.21);
smoothPressure+=(targetPressure-smoothPressure)*follow;
const pressure=smoothPressure;
root.classList.add('kkpt-camera-running');
layer.style.setProperty('--kkpt-beat-dark',
(.60+.38*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-scale',
(1.025-.175*pressure).toFixed(4));
layer.style.setProperty('--kkpt-beat-blur',
(.28+2.6*pressure).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-glitch',
(.12+.63*pressure).toFixed(3));
const shear=Math.sin(index*1.47)*pressure*9.0;
layer.style.setProperty('--kkpt-beat-shear',
shear.toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-scars',
(.035+.76*pressure).toFixed(3));
// V40 camera breathes IN then exhales to its natural size.
// Zoom is never below 1.0: no blue/uncovered viewport edges.
// The transform belongs to the whole body (Wiki chrome,
// sidebar, imagery and text), not only #mw-content-text.
root.style.setProperty('--kkpt-camera-zoom',
(1.008+.054*pressure).toFixed(4));
root.style.setProperty('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
root.style.setProperty('--kkpt-chroma-red',
(-4.4*pressure).toFixed(2)+'px');
root.style.setProperty('--kkpt-chroma-shadow',
(5.6*pressure).toFixed(2)+'px');
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
if(live){cancelAnimationFrame(raf);}
clearTimeout(cameraReleaseTimer);
live=true;lastTick=0;lastKick=-100;smoothPressure=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;cancelAnimationFrame(raf);
layer.classList.add('kkpt-beat-idle');quiet();
releaseCamera();
},
fadeToDawn(){
source=null;live=false;cancelAnimationFrame(raf);
releaseCamera();
layer.classList.add('kkpt-beat-outro');
const old=layer;
setTimeout(()=>{
old.remove();
if(kuronataAftermath?.layer===old)kuronataAftermath=null;
},2400);
},
dispose(){
source=null;live=false;cancelAnimationFrame(raf);
clearTimeout(cameraReleaseTimer);
root.classList.remove('kkpt-camera-running');
root.style.removeProperty('--kkpt-camera-zoom');
root.style.removeProperty('--kkpt-camera-focus-y');
root.style.removeProperty('--kkpt-chroma-red');
root.style.removeProperty('--kkpt-chroma-shadow');
layer.remove();kuronataAftermath=null;
},
layer
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createCloudbreakAfterglow(continueFromNavigation=false){
const previous=document.getElementById('kkpt-cloudbreak');
previous?.remove();
let timestamp=Date.now();
if(continueFromNavigation){
try{timestamp=Number(sessionStorage.getItem(DAWN_HALO_KEY));}
catch(_){return;}
if(!Number.isFinite(timestamp)||timestamp<=0)return;
}else{
try{sessionStorage.setItem(DAWN_HALO_KEY,String(timestamp));}
catch(_){}
}
const elapsed=Math.max(0,Date.now()-timestamp);
if(elapsed>6900){
try{sessionStorage.removeItem(DAWN_HALO_KEY);}catch(_){}
return;
}
const bloom=document.createElement('div');
bloom.id='kkpt-cloudbreak';
bloom.setAttribute('aria-hidden','true');
bloom.style.setProperty('--kkpt-dawn-delay',(-elapsed)+'ms');
bloom.innerHTML='<i class="kkpt-dawn-dark-rim"></i>'+
'<i class="kkpt-dawn-bright-rim"></i>'+
'<i class="kkpt-dawn-cloud-sweep"></i>';
root.append(bloom);
setTimeout(()=>{
bloom.remove();
try{
if(Number(sessionStorage.getItem(DAWN_HALO_KEY))===timestamp)
sessionStorage.removeItem(DAWN_HALO_KEY);
}catch(_){}
},Math.max(0,7000-elapsed));
}
function createRebirthVisual(){
// Hope replaces ash: a barely perceptible rainbow after the rain.
// No numbered / nested six-band rainbow; just one diffuse halo.
// All are compositor layers; nothing is rasterized on every frame.
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
audio.volume=.78*Math.min(fadeIn,fadeOut);
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
// Seek straight into the selected three-second transition prelude.
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
// A stalled soundtrack cannot trap navigation indefinitely.
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,75);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:41
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==41||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
// The only fallback is the SAME small icon, no audio popup.
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}

let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';

function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}

function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}

// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}

function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}

function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const observer = new MutationObserver(() => {
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
decoratePortalLinks(doc,targetPage);
},120);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}

function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}

function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}

function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
// Both directions start playback during the trusted user gesture.
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}

// The Infobox gear begins to turn before the actual world changes.
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
// The gear and the world run on the SAME audio timeline. A 2s
// unobserved setTimeout used to create an awkward silent gap.
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}

function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}

function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
// The fate wheel stays inside the native Infobox caption, but is
// positioned independently: it must NEVER push the title off-center.
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
// A native button cannot be mistaken for an article link by
// MediaWiki Popups, including in previews loaded into iframes.
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);

// Fixed corner placement: no title measurements, ResizeObserver
// or reflow during the animation.
}

// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}

function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}

async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}

function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
// The preview exists only for the animated reveal. Pausing
// its hidden ambience avoids doubling ongoing render work.
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;

// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the temporary preview.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);

doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}

function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
// Load all resources in advance, but don't composite the hidden
// full-screen Wiki until its first transition frame.
frame.style.visibility = 'hidden';
// Never expose a plain cyan rectangle while the destination Wiki
// page is still painting. The image is the same native world photo.
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}

loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});

warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}

// Shared, low-resolution atmospherics: return of V14's dark smoke,
// long-lived torn paper, shockwaves, blue-white petals and pollen.
// Only the combustion CURTAIN is replaced by the bright V2 engine.
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
// V2-inspired white-hot additive sprites, but with noise-eroded
// silhouettes instead of repetitive smooth, elliptical balls.
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
// V25: the profiler found one 270ms long task here. Build the
// EXACT SAME 17 textures in separate tasks, never all at once.
// The stable noise cache avoids repeating the costly sin hash.
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
// Normally prewarming is already complete before a user clicks.
// The fallback also works if an animation is started immediately.
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
// More long-lived sparks than V25, far below V31's 370/s.
// Blue petals are softer/less dense: fewer layers noticeably
// reduce reverse-direction Canvas work without touching fire.
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
// Unlike the traveling front, these black smoke plumes
// are born in world-space and remain over burnt paper.
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
// Charcoal sheets tear off in irregular polygons, not
// squares or narrow glitch streaks.
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
// Dawn uses soft-focus sprites, so 0.45 is visually sufficient.
// This cuts ~33% of full-screen pixels compared with 0.55.
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
// New-world side: red fire trails to the right when burning,
// blue dawn trails to the left when returning.
const direction=dark?1:-1;
// Broken smoke banks with different depths and sizes. The old
// aligned rows created an artificial horizontal fog ribbon.
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// Residual devastation: coal-black plumes stay pinned to their
// original burn positions, expanding long after the tear passes.
// Composited *before* fire, so the hot core cuts through smoke.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
// The inverse is a slow, organic unfurling: broad milky
// radiance behind the rebuilt sky, not a cold explosion.
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Only combustion throws straight, fiery projectile trails.
// Return-to-blue has no streaks or sparks whatsoever.
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Real flame tongues break OUT of the burn front into the sky.
// They are thin, tapered Bezier ribbons with an unstable pulse,
// rather than round glowing particles or a uniform bright line.
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}

// Carbonized paper has a fine, ragged edge. The charcoal layer
// persists continuously, but the white-hot core does NOT.
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
// Intermittent ignition cells: varying width/color/intensity
// make the bright edge resemble burning fibres, not neon.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
// Fragmented ignition on real microscopic perforations.
// Missing arc sections stop them resembling punched circles.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
// Small carbon flecks stick to the still-blue paper just
// ahead of the bite; no large rectangular glitch debris.
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
// The key property V3-V6 lost: particles remain at their
// birth position while the front advances. A wide, incandescent
// WAKE builds behind the tearing page instead of following
// it as one thin, plastic-looking stripe.
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
// Rebirth uses soft, rotating, organic leaf/petal silhouettes,
// minute circular pollen and spacious white-blue bokeh. No
// rectangular ions, no warm textures and NO glowing streaks.
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
// Reuse the cached soft sprite; a fresh radial
// gradient for every pollen mote per frame was costly.
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
// Minute black flecks, never rectangular shards on the blue side.
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
// Irregular burnt page sections tumble away and reveal their
// blackened underside, with an occasional incandescent rim.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
// Thin blue-white unburnt fibers still visible on a
// few ripped faces, before the back chars completely.
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
// Sharp, directional embers / crystalline fragments, not blobs.
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}

let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
// Exactly one texture per task: no more 270ms blocking call.
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
setTimeout(step,24);
}
setTimeout(step,40);
});
return atmosphereWarmPromise;
}

let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}

// Original V2's moving flame sprites and three bright contours, rebuilt
// with bounded particle counts. No WebGL, no full-screen noise pass,
// no 1,000-point polygon or per-frame image-texture upload.
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}

// V2's simple advancing boundary. The reader asked for the
// vibrant fire curtain, not a mathematically fractal tearing wire.
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}

// GPU-only ember flecks: ONE small draw call at most 30fps.
// The white-hot V25 fire, the smoke and the dawn stay unmodified 2D.
// No fullscreen pixel shader, FBM, flame quads or cyan rectangle.
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}

// Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}

function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}

const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
let lastClip=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();

// Dense GOLD / WHITE rolling fire, including on both sides
// of the border. These are the luminous shapes from V2.
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
// Both original V25 curtains follow their OWN song cue clock.
// Framerate drops cannot move 00:33 / 02:39 off the midpoints.
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
// Clip-path polygon reconstruction can cause expensive iframe
// compositor work. It runs at a bounded rate independent of rAF.
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
const clipStep=dark?(mobile?33:23):(mobile?43:34);
if(now-lastClip>=clipStep||t>=1){
clipFrame(edge);
lastClip=now;
}
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
// Restore V14's broad smoke banks, long-lived char, pressure
// waves and delicate blue leaves. V2 only paints the FIRE.
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}

function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
// Stop the invisible Kuronata ambience in either document.
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}

async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
// Never make the music wait for the network or an expensive texture.
// The iframe already has a matching photographic fallback; reveal
// it under the original V25 curtain even if HTML loads late.
await Promise.race([loading,sleep(score?350:1100)]);
await Promise.race([prewarmAtmosphere(),sleep(160)]);
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
if(!started||!await awaitScoreTime(score,
score.config.fireStart)){
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
}
removeScoreOmen();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
// Give the now-visible destination its own first composited frame.
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));

labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
// When returning to the blue page, force the Day palette
// BEFORE unmasking it. The dark iframe still fully covers it.
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;

const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
const curtainFinished=new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));
// canvasFire already queued its FIRST paint() rAF. This next
// rAF releases the held seal in that very first painted frame.
requestAnimationFrame(releaseFatePrelude);
await curtainFinished;

setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
// Fade the shadow away while a pearl-white edge radiates out
// of the just-opened sky, then let that light evaporate.
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
// The last frame holds living smoke and drifting fragments.
// Let it disperse with a lightweight compositor fade AFTER the
// destination is revealed; no costly extra canvas render loop.
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// The iframe was only the moving scenery during the reveal.
// Hand off to the ACTUAL Wiki page: native sidebars, scrollbar,
// history, refresh, accessibility and links all work normally.
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}

function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V41:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}

function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuranoka')createCloudbreakAfterglow(true);
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
const aftermath=mountKuronataAftermath(returnScore);
// The departing preview already carried the dark lens.
// Do not replay the 850ms fade-in on the actual URL:
// that briefly lightened then darkened the whole page.
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();

button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}

// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] uses the same transition, then real navigation.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});

// Browser history is now real document history. A bfcache return
// must restore THIS document, not leave its animated preview visible.
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-cloudbreak')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered){
const aftermath=mountKuronataAftermath(returnScore);
aftermath.layer.classList.add('kkpt-beat-resumed');
}
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T09:25:36Z

KK：

/* Kuranoka Page Transition V41 — clean ring seals and seamless fire handoff
Load only on /wiki/Kuranoka and /wiki/Kuronata.
No Citizen.css / Common.css changes. */

:root { --kkpt-css-v41: ready; }

/* One icon, no track title, timer, skip menu or resume popup. */
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}

/* Three seconds of cinematic omen. V25 draws the real fire curtain. */
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}

/* Fate summoning. A 5.5s atmospheric sigil overlaps 2.5 seconds of
V25's original fire, without changing the music's 3s prelude cue. */
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
/* Do not dissolve the seal until the V25 flame has its first frame. */
transition:opacity 1350ms cubic-bezier(.13,.64,.27,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:390px;height:390px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 10px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 2.4s ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
/* The symbol stays upright while the OUTER mechanism rotates. */
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:1.0px;
opacity:.52;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-major {
stroke-width:2px;
opacity:.85;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-outer {
stroke-width:1.6px;
stroke-dasharray:91 6 3 6;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-trace {
stroke-width:.75px;
opacity:.72;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-needle {
stroke-width:1.45px;
opacity:.77;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.28px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-core-orbit {
stroke-width:1.5px;
opacity:.79;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-inner-orbit {
stroke-width:.85px;
stroke-dasharray:14 7;
opacity:.65;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-axis {
stroke-width:1.4px;
opacity:.63;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-mark {
stroke:#ffc0c9;
stroke-width:2px;
fill:rgba(103,0,32,.11);
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-cut {
stroke:#f35b77;
stroke-width:1.2px;
fill:rgba(27,0,10,.45);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-light-mark {
stroke:#fff4cc;
stroke-width:1.8px;
fill:rgba(255,244,205,.08);
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:rgba(255,246,211,.70);
stroke:#ffffff;
stroke-width:1.2px;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:.22;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:.22;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
16%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:.11;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:.15;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:.91;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}

/* AFTERMATH ONLY. Eight-beat bass accents control a slow whole-camera
push-in and release. This never scales down to expose page edges. */
#kkpt-beat-scene {
--kkpt-beat-dark:.60;
--kkpt-beat-scale:1.025;
--kkpt-beat-blur:.28px;
--kkpt-beat-glitch:.12;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-scars:.035;
position:fixed !important;
inset:0 !important;
/* Heartbeat vignette must be visible over the fire as well; its
transparent center keeps the original V25 flame incandescent. */
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
/* Whole viewport, not merely the article. The camera origin follows the
center of the visible scrolled viewport and the zoom stays >= 1. */
html.kkpt-camera-running {overflow-x:clip}
html.kkpt-camera-running body.page-Kuronata {
transform:translateZ(0) scale(var(--kkpt-camera-zoom,1.008));
transform-origin:50% var(--kkpt-camera-focus-y,50vh);
transition:transform 140ms cubic-bezier(.2,.7,.25,1);
will-change:transform;
}
html.kkpt-camera-running body.page-Kuronata #firstHeading {
text-shadow:var(--kkpt-chroma-red,0px) 0 rgba(255,31,83,.50),
var(--kkpt-chroma-shadow,0px) 0 rgba(117,2,32,.74);
transition:text-shadow 130ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
#kkpt-beat-scene.kkpt-beat-resumed {
animation:none !important;
opacity:1;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-15%;
background:radial-gradient(ellipse at 50% 47%,transparent 16%,
rgba(12,0,8,.26) 39%,rgba(3,0,5,.71) 70%,
rgba(0,0,2,.99) 100%);
opacity:var(--kkpt-beat-dark);
transform:scale(var(--kkpt-beat-scale));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.012);
backdrop-filter:blur(2px) contrast(1.035);
-webkit-backdrop-filter:blur(2px) contrast(1.035);
opacity:calc(var(--kkpt-beat-glitch) * .53);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:radial-gradient(ellipse at 50% 130%,
transparent 32%,rgba(94,1,24,.24) 70%,rgba(31,0,9,.58) 100%),
linear-gradient(94deg,rgba(180,5,37,.55),transparent 17%,
transparent 82%,rgba(71,0,16,.72));
mix-blend-mode:multiply;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(159deg,
transparent 0 33px,rgba(61,0,20,.44) 35px,
rgba(8,0,9,.56) 36px,transparent 39px 74px);
clip-path:polygon(0 10%,23% 9%,31% 17%,43% 11%,58% 15%,
72% 10%,100% 16%,100% 18%,70% 12%,56% 18%,42% 14%,
31% 20%,20% 11%,0 13%,0 70%,18% 67%,36% 76%,
49% 69%,65% 79%,86% 72%,100% 77%,100% 80%,
86% 75%,65% 82%,49% 72%,36% 79%,18% 70%,0 73%);
}
#kkpt-beat-scene .kkpt-beat-scars {
position:absolute;
inset:0;
pointer-events:none;
width:100%;
height:100%;
opacity:var(--kkpt-beat-scars);
transform:translate3d(var(--kkpt-beat-shear),0,0);
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-scars path {
fill:none;
stroke:#be1839;
stroke-width:1.7px;
stroke-linejoin:bevel;
stroke-dasharray:84 11 21 36;
filter:drop-shadow(0 0 8px #8c001d);
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(2) {
stroke:#23000e;
stroke-width:5px;
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(3) {
stroke:#ed3354;
stroke-width:1px;
}
#kkpt-beat-scene.kkpt-beat-outro {
opacity:0 !important;
transition:opacity 2150ms cubic-bezier(.12,.54,.22,1);
}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture {animation:none !important}
}

/* The cloudbreak follows the actual URL load. Its timestamp lives in
sessionStorage, so the light never snaps away between two documents. */
#kkpt-cloudbreak {
position:fixed !important;
inset:0 !important;
z-index:2147482160 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
isolation:isolate;
}
#kkpt-cloudbreak > i {
display:block;
position:absolute;
inset:-12%;
pointer-events:none;
will-change:opacity,transform;
}
#kkpt-cloudbreak .kkpt-dawn-dark-rim {
background:radial-gradient(ellipse at 50% 47%,
transparent 20%,rgba(5,0,9,.28) 47%,
rgba(2,0,6,.81) 86%,rgba(0,0,2,.94) 100%);
animation:kkpt-dawn-dissolve 6900ms
cubic-bezier(.15,.46,.25,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-bright-rim {
background:
radial-gradient(ellipse at 50% 48%,transparent 19%,
rgba(226,246,255,.13) 46%,rgba(247,253,255,.68) 82%,
rgba(255,255,250,.88) 100%),
radial-gradient(ellipse at 45% 105%,transparent 12%,
rgba(221,245,255,.23) 62%,rgba(255,251,222,.54) 100%);
mix-blend-mode:screen;
animation:kkpt-dawn-bloom 6900ms
cubic-bezier(.12,.54,.23,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-cloud-sweep {
inset:-24% -12%;
background:
radial-gradient(ellipse at 16% 90%,rgba(251,253,255,.68),
rgba(238,248,255,.20) 35%,transparent 59%),
radial-gradient(ellipse at 83% 100%,rgba(250,253,255,.71),
rgba(241,247,255,.23) 32%,transparent 62%),
radial-gradient(ellipse at 50% 119%,rgba(255,250,222,.29),
transparent 70%);
animation:kkpt-dawn-rise 6900ms
cubic-bezier(.16,.56,.24,1) var(--kkpt-dawn-delay,0ms) both;
}
@keyframes kkpt-dawn-dissolve {
0%,11%{opacity:.77}
32%{opacity:.49}
52%{opacity:.03}
100%{opacity:0}
}
@keyframes kkpt-dawn-bloom {
0%,17%{opacity:0}
30%{opacity:.23}
48%{opacity:.86}
66%{opacity:.60}
83%{opacity:.18}
100%{opacity:0}
}
@keyframes kkpt-dawn-rise {
0%,22%{opacity:0;transform:translate3d(0,9%,0) scale(1.02)}
44%{opacity:.28}
64%{opacity:.66;transform:translate3d(0,-2%,0) scale(1.04)}
100%{opacity:0;transform:translate3d(0,-12%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){#kkpt-cloudbreak{display:none !important}}

/* Blue-world recovery. Fog gives way to receding rain, restrained pastel
rainbow arcs and a small field of floating essence — no white-screen flash. */
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
/* Above falling smoke, below the bright V25 blue recovery edge. */
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}

#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}

/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
#kkpt-toggle[hidden] {display:none !important}

#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}

#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}

#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}

/* Real interactive Wiki page, retained after the transition finishes. */
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}

body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
/* Don't reserve a full-screen animated compositor layer for a hidden iframe. */
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}

/* Atmosphere remains independent of the flame: drifting smoke,
scattered pages, shockwaves, and blue-white leaves from V14. */
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}

/* A small GPU ember overlay; no fullscreen WebGL flames or light curtains. */
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}

/* V2's incandescent curtain sits ABOVE the dark smoke bank. */
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}

/* MediaWiki portal links are normal links until hovered/focused. */
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
/* Never change inline flow, line breaks or Infobox link dimensions. */
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}

/* Pure overlay: NO styles or markup changes to native Infobox/caption. */
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}

.kkpt-fate-gear[hidden] {display:none !important}

body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}

.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}

.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}

.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}

.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation: kkpt-fate-rotation 3.85s cubic-bezier(.19,.69,.25,1) both;
}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
.kkpt-fate-gear-turning::after {
animation: kkpt-fate-ripple 1.15s ease-out both;
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}

/* ==================================================================
In-article FORM SWITCH: plain [[Kuronata|...]] / [[Kuranoka|...]].
Place beside or inside an Infobox; no loader changes or inline JS.
================================================================== */
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}

/* Respect any old in-article switch wikitext: never hide user content.
Delete its wikitext manually if you prefer only the fate gear. */

/* After a right-floated Infobox, the switch floats alongside it when
space allows; otherwise it falls below the box on narrow screens. */
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}

body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}

/* Keep the hidden second copy of the text inside the button's padding,
so the hover glitch doesn't spill past the rounded silhouette. */
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}

@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}

@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}

/* ==============================================================
KURONATA ONLY — Crimson Night
Never targets Kuranoka or any other article. Keep native layout.
JS opts just the Kuronata document into Citizen's night palette;
these scoped values also cover a preview iframe before JS runs.
============================================================== */

html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}

/* Preserve the storm background and glass, only recolor the foreground. */
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}

body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}

/* Blue hyperlinks break the blood-red theme. Retain recognizable links. */
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}

/* Infobox: leave all rows/columns exactly as the template generated them.
Correct only the old light-mode backgrounds and black foreground text. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}

/* Kuronata spoilers / 黑幕: the original white-on-white censor becomes
soot black, with the text revealed only on hover or keyboard focus. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}

/* Kuronata 黑幕：直接让 span 本身出现彩色信号撕裂。
无须 data 属性或 JS 注入，因此即使文章通过 AJAX 更新也生效。 */
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}

@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}

/* ===============================================================
V19: Kuronata spoiler fade + sliced text displacement.
The existing native .heimu markup and Infobox remain untouched.
=============================================================== */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* Always-on aftermath: a small number of GPU-composited smoke/ash
sprites, without a second persistent requestAnimationFrame loop. */
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
/* Wide, feathered side-banks built from asymmetric elliptical lobes.
No border-radius or single radial disk: no floating grey circles. */
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
opacity: 0;
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}

/* Infrequent, sharp spatial corruption: no full-screen strobe.
Different text layers lurch by distinct offsets. */
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}

/* Scroll cost: the gear is now absolute, not a sticky glass layer. */
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* =============================================================
V19 — corrections made against the actual rendered Infobox HTML
and multiline screenshot. No original page layout is rewritten.
============================================================= */

/* Actual Infobox caption: the gear is a real descendant, not a
document-level follower. Caption sizing/text centering is unchanged. */
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
position: absolute !important;
left: auto !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}

/* A multiline inline span must not repeat its entire text at line 1.
Instead render per-line chromatic slices from DOM Range metrics. */
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* The afterglow must be a visible, restrained foreground film.
This is above Citizen's article glass but behind the live iframe. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
/* Mobile: avoid expensive glow/blur composite work. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}

/* ===========================================================
V20 · Fate wheel / fog banks / Kuronata hyperlink faults
=========================================================== */

/* Inline beside the first-line Infobox TITLE, not on the far right
of the table. Also works beside the article heading as fallback. */
.kkpt-fate-host > .kkpt-fate-gear {
display: inline-grid !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
vertical-align: middle !important;
transform: translateY(-2px) !important;
width: 31px !important;
height: 31px !important;
padding: 5px !important;
margin: 0 0 0 8px !important;
flex: none !important;
float: none !important;
line-height: 1 !important;
border-color: rgba(255,255,255,.45);
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
opacity: .34;
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .88;
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
animation-duration: .65s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: kkpt-destiny-awaken 1.5s ease-out;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 5px var(--kkpt-gear-halo));
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}

/* V35: the actual fate wheel spins, hesitates, then accelerates over
the entire 3-second opening instead of stopping after half a second. */
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}

/* Every text link in the darker world has an unstable signal.
Ordinary links jitter subtly; the way back to Kuranoka tears
apart harder. The original link palette is preserved. */
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}

/* ==============================================================
V21 — Title stays centered; pearl-toned fate gear floats next
to the FIRST title line without affecting any text flow.
Only wheel placement/appearance changes. Other FX untouched.
============================================================== */
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
left: var(--kkpt-gear-left, calc(50% + 75px)) !important;
top: var(--kkpt-gear-top, 17px) !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
float: none !important;
vertical-align: baseline !important;
width: 27px !important;
height: 27px !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}

/* ==============================================================
V22 — Real cross-document navigation after the visual handoff.
The iframe exists ONLY during the effects; browser navigation
restores the Citizen sidebar and the document's native scrollbar.
Supported browsers receive a brief native page-to-page dissolve.
============================================================== */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 160ms;
}
::view-transition-new(root) {
animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

/* Kuronata: the names of the lost daylight identity glitch at rest. */
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
/* Link to Kuranoka glitches without hover, too. */
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}

/* V23 — fate wheel in the Infobox caption's TOP RIGHT CORNER.
Absolute positioning never changes the title's centering. */
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}

/* ==============================================================
V24 — Fix OS-theme inheritance and blue/white handoff flashes.
Kuranoka is daylight; Kuronata is crimson night on ALL systems.
Background fallbacks now visually match the respective photos
while the actual image bytes/texture become ready.
============================================================== */
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}

/* Keep the OLD fully-rendered scene in place while the destination
document finishes its first paint. Then dissolve once, smoothly. */
@keyframes kkpt-native-handoff-out {
0%, 48% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes kkpt-native-handoff-in {
0%, 42% { opacity: 0; }
100% { opacity: 1; }
}
::view-transition-old(root) {
animation: kkpt-native-handoff-out 880ms ease-in-out both;
}
::view-transition-new(root) {
animation: kkpt-native-handoff-in 880ms ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

MediaWiki:KuranokaPageTransition.js

2026-10-24T09:00:18Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V40 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}

const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;

// V24: the two article worlds have deliberate, deterministic palettes.
// "os" is NOT a light theme: it can resolve to dark on the reader's
// computer. Session storage may also be unavailable. Therefore, never
// restore a stale "os" token when landing back on Kuranoka.
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
// Citizen may reapply OS-preference classes after its own scripts load.
// Keep each world's class correct without changing the user's setting.
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
// V31's page-style retry solves occasional initial unstyled portals.
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v40').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','40');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}

// V17: the dark-world extras run in *both* the visible document and
// its same-origin preview iframe. They never alter other Wiki pages.
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
// Multiline .heimu cannot use a single nowrap pseudo-element:
// it piles all copied text onto line one. Project each rendered
// line into two SHORT clipped chromatic slices only on hover.
// Range measurements leave the original article DOM and wrapping
// entirely untouched, including italic/link children.
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
// Copy a link only if it truly occupies one
// rendered line. Multiline links keep real text.
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
// V29's useful identity faults, transplanted without its transition
// shaders. Only text nodes are wrapped; Wiki links stay clickable.
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
// All sprites are static layers with compositor-only
// transform/opacity animation. No persistent canvas or RAF.
// The soot is a side-bank haze, not a random full-screen
// spread of isolated circular clouds.
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();

// One brief spatial fault roughly every 14-36 seconds, never a
// full-screen white strobe. Pause while the iframe is hidden.
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();

// The nested preview only applies its own theme; no recursive iframe.
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='40.0';

// Easter eggs + Infobox gear are the default. No floating pill.
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
// C2-smooth cinematic ease; starts and settles with zero acceleration.
// Its midpoint stays at t=.5, preserving 00:33 / 02:39 beat alignment.
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
// V24: preload both original background photographs. The target
// image is decoded while its real-document iframe is preparing,
// reducing flashes of the bare background-color at navigation.
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
// Give the current photo first priority; then prepare the next
// world so the iframe and the eventual real page can reuse it.
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();

const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;

// Public-domain PADsynth recording, ~8.4s / 120KB. Change this
// to a same-origin Wiki-upload URL if external media are blocked.
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
// A plain media element can still play the recording when a site's
// CORS policy disallows reading the file into Web Audio.
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}

function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
// Micro-crackles: impulsive bursts with different decay times.
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
// A REAL recorded PADsynth sample; no generated wind-chimes.
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}

// Audio starts AT ITS TRANSITION SECTION, not at 00:00. Three seconds of
// crescendo accompany the fate-wheel awakening. V25's actual fire and
// particle painting remains unchanged. Music 00:33 / 02:39 now lands
// in the MIDDLE of the corresponding original V25 reveal.
const SCORE_KEY='kkpt:score-handoff:40';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
// Let the V25 fire steadily replace the red veil. Abruptly
// removing it at t=0 was the visible "turns bright" flash.
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
}
function fateSigilMarkup(isDark){
const at=(r,d)=>{
const a=(d-90)*Math.PI/180;
return [(150+Math.cos(a)*r).toFixed(2),
(150+Math.sin(a)*r).toFixed(2)];
};
const ring=(r,cls)=>'<circle class="'+cls+
'" cx="150" cy="150" r="'+r+'"/>';
const stroke=(a,b,cls)=>'<path class="'+cls+
'" d="M'+a.join(' ')+' L'+b.join(' ')+'"/>';
const poly=(points,cls)=>'<polygon class="'+cls+'" points="'+
points.map(p=>p.join(',')).join(' ')+'"/>';
// An engraved astrolabe: four separately articulated scales,
// star needles and micro-glyphs. The central emblem stays upright.
const outer=ring(133,'kkpt-sigil-outer')+
ring(128,'kkpt-sigil-orbit')+
ring(121,'kkpt-sigil-ghost')+
ring(105,'kkpt-sigil-seal')+
ring(100,'kkpt-sigil-trace')+
ring(83,'kkpt-sigil-ghost');
const glyphs=Array.from({length:72},(_,i)=>{
const angle=i*5;
const major=i%6===0;
return stroke(at(121,angle),at(major?132:i%3?125:128,angle),
major?'kkpt-sigil-mark kkpt-sigil-major':'kkpt-sigil-mark');
}).join('');
const cardinal=Array.from({length:8},(_,i)=>{
const a=i*45;
return poly([at(99,a),at(111,a+4.2),at(120,a),at(111,a-4.2)],
'kkpt-sigil-diamond')+
stroke(at(85,a),at(96,a),'kkpt-sigil-needle');
}).join('');
const petals=Array.from({length:isDark?12:16},(_,i)=>{
const a=i*360/(isDark?12:16);
const mid=at(90,a),left=at(83,a-8),right=at(83,a+8);
return '<path class="kkpt-sigil-filament" d="M'+left.join(' ')+
' Q'+mid.join(' ')+' '+right.join(' ')+'"/>';
}).join('');
const darkDrawing=
'<path class="kkpt-sigil-dark-halo" d="M150 69L223 106 231 183 150 232 69 183 77 106Z"/>'+
'<path class="kkpt-sigil-dark-halo" d="M150 75L201 99 225 150 201 201 150 225 99 201 75 150 99 99Z"/>'+
'<path class="kkpt-sigil-thorn" d="M112 87L126 105 150 52 174 105 188 87 178 118 201 108 188 132M112 213L126 195 150 248 174 195 188 213 178 182 201 192 188 168"/>'+
'<path class="kkpt-sigil-eye" d="M86 150Q116 111 150 118Q184 111 214 150Q184 189 150 182Q116 189 86 150Z"/>'+
'<path class="kkpt-sigil-iris" d="M150 120Q176 140 176 150Q176 171 150 182Q124 171 124 150Q124 140 150 120Z"/>'+
'<path class="kkpt-sigil-pupil" d="M150 127L158 150 150 174 142 150Z"/>'+
'<path class="kkpt-sigil-fault" d="M78 105L105 119 95 135 115 148M224 191L197 180 206 165 185 152M149 65L141 85 157 97 147 111"/>'+
'<path class="kkpt-sigil-filament" d="M98 147Q75 133 69 115M202 153Q226 167 231 185M133 201Q150 218 167 201"/>'+
ring(56,'kkpt-sigil-iris-ring');
// Symmetrical, OPEN feather vanes wrap around the compass rather
// than crisscrossing its center as V39 did.
const wings=Array.from({length:4},(_,i)=>{
const y=128+i*13;
const tip=79-i*4;
return '<path class="kkpt-sigil-feathers" d="M129 '+(y+11)+
'C110 '+(y-12)+' '+(90-i*3)+' '+(y-12)+
' '+tip+' '+y+
'Q102 '+(y+13)+' 124 '+(y+19)+
'M171 '+(y+11)+'C190 '+(y-12)+
' '+(210+i*3)+' '+(y-12)+' '+(300-tip)+' '+y+
'Q198 '+(y+13)+' 176 '+(y+19)+'"/>';
}).join('');
const rays=Array.from({length:12},(_,i)=>{
const a=i*30;
return poly([at(27,a-3),at(i%2?51:63,a),at(27,a+3)],
'kkpt-sigil-sun-ray');
}).join('');
const hopeDrawing=
rays+wings+
'<path class="kkpt-sigil-horizon" d="M75 204Q111 192 150 201Q189 192 225 204M90 218Q150 199 210 218"/>'+
'<path class="kkpt-sigil-horizon" d="M86 94Q118 76 150 96Q182 76 214 94"/>'+
'<path class="kkpt-sigil-leaf" d="M92 195Q69 178 84 160Q93 179 111 186M208 195Q231 178 216 160Q207 179 189 186"/>'+
'<path class="kkpt-sigil-star" d="M150 105L161 137 195 150 161 163 150 195 139 163 105 150 139 137Z"/>'+
'<path class="kkpt-sigil-star-inner" d="M150 122L157 143 178 150 157 157 150 178 143 157 122 150 143 143Z"/>'+
ring(12,'kkpt-sigil-sun')+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="4"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-engraving" fill="none" stroke="'+
(isDark?'#ff8c9b':'#f7edcf')+'" stroke-width="1.3">'+
outer+glyphs+cardinal+petals+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
// The sigil is a viewport overlay. Keeping it outside the zoomed
// Wiki body makes the clicked gear travel directly to true center.
root.append(prelude);
fatePrelude=prelude;
// The 6.6s sigil overlaps the full V25 curtain:
// NEVER delay 00:33/02:39 to prolong the visual spectacle.
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},6650);
}

// Actual transient analysis of the hosted Marenoia recording, 22.05 kHz
// mono / spectral-flux + low-band kick envelope. A main beat repeats
// roughly every 0.439 seconds (~137 BPM), with salient attacks near
// 31.775, 33.561, 33.751 and 34.250s. React to audio.currentTime:
// wall-clock timers would desynchronize during MP3 buffering/seeking.
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
// The fire segment only gets lightning. The pressure / dark vignette
// belongs to the AFTERMATH and survives the real page navigation.
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}

// Measured with the submitted MP3: heavy low-frequency accents repeat
// every 8 beats (~3.532 s at 135.9 BPM). Each was 1.6–2.1x the
// median low-band RMS of the seven intervening beats. Never trigger
// a full-screen pressure pump on all of the fast intermediate notes.
const AFTER_DARK_KEY='kkpt:dark-afterglow:40';
const DAWN_HALO_KEY='kkpt:dawn-cloudbreak:40';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
// Offline 0.25s RMS contour, normalized by the passage's 95th
// percentile. Tracks long-form dynamics without cross-origin
// WebAudio sample access (which may be forbidden by CORS).
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaDeepPulse(age){
// A 420ms inhale, 300ms hold and ~2.2s heavy exhale.
// One pressure wave per eight beats, not a rapid heartbeat.
if(age<0||age>=2.98)return 0;
if(age<.42)return smooth(age/.42);
if(age<.72)return 1;
return 1-smooth((age-.72)/2.26);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<svg class="kkpt-beat-scars" viewBox="0 0 1440 900" '+
'preserveAspectRatio="none" aria-hidden="true">'+
'<path d="M-20 340L126 317 203 355 294 339 383 382 477 352 605 395 728 365 842 399 982 371 1125 397 1264 351 1460 390" />'+
'<path d="M-20 635L158 605 294 646 404 612 547 668 679 622 846 653 991 621 1149 668 1277 636 1460 660" />'+
'<path d="M203 355l-19 33 27 39M842 399l30 34-20 47M404 612l-44 42 23 29M1149 668l39 41-18 32"/>'+
'</svg>';
// Put the vignette outside the page-scale camera so its
// darkness covers the WHOLE viewport even while the body zooms.
root.append(layer);
let live=true,raf=0,lastTick=0,source=null,lastKick=-100;
let cameraReleaseTimer=null;
let smoothPressure=0,index=0;
const releaseCamera=()=>{
root.style.setProperty('--kkpt-camera-zoom','1');
clearTimeout(cameraReleaseTimer);
cameraReleaseTimer=setTimeout(()=>{
if(!live)root.classList.remove('kkpt-camera-running');
},420);
};
const quiet=()=>{
layer.style.setProperty('--kkpt-beat-dark','.60');
layer.style.setProperty('--kkpt-beat-scale','1.025');
layer.style.setProperty('--kkpt-beat-blur','0.28px');
layer.style.setProperty('--kkpt-beat-glitch','.12');
layer.style.setProperty('--kkpt-beat-shear','0px');
layer.style.setProperty('--kkpt-beat-shear-reverse','0px');
layer.style.setProperty('--kkpt-beat-scars','.035');
root.style.setProperty('--kkpt-camera-zoom','1');
root.style.setProperty('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
root.style.setProperty('--kkpt-chroma-red','0px');
root.style.setProperty('--kkpt-chroma-shadow','0px');
};
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<38)return;
const dt=Math.min(.12,Math.max(.038,(now-lastTick)/1000));
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;cancelAnimationFrame(raf);
releaseCamera();
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
// The recording's actual loudness and 18s player fade BOTH
// attenuate the pump as the music settles down.
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const targetPressure=marenoiaDeepPulse(audioTime-lastKick)*
soundStrength;
const follow=1-Math.exp(-dt/.21);
smoothPressure+=(targetPressure-smoothPressure)*follow;
const pressure=smoothPressure;
root.classList.add('kkpt-camera-running');
layer.style.setProperty('--kkpt-beat-dark',
(.60+.38*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-scale',
(1.025-.175*pressure).toFixed(4));
layer.style.setProperty('--kkpt-beat-blur',
(.28+2.6*pressure).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-glitch',
(.12+.63*pressure).toFixed(3));
const shear=Math.sin(index*1.47)*pressure*9.0;
layer.style.setProperty('--kkpt-beat-shear',
shear.toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-scars',
(.035+.76*pressure).toFixed(3));
// V40 camera breathes IN then exhales to its natural size.
// Zoom is never below 1.0: no blue/uncovered viewport edges.
// The transform belongs to the whole body (Wiki chrome,
// sidebar, imagery and text), not only #mw-content-text.
root.style.setProperty('--kkpt-camera-zoom',
(1.008+.054*pressure).toFixed(4));
root.style.setProperty('--kkpt-camera-focus-y',
(scrollY+innerHeight*.5).toFixed(1)+'px');
root.style.setProperty('--kkpt-chroma-red',
(-4.4*pressure).toFixed(2)+'px');
root.style.setProperty('--kkpt-chroma-shadow',
(5.6*pressure).toFixed(2)+'px');
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
if(live){cancelAnimationFrame(raf);}
clearTimeout(cameraReleaseTimer);
live=true;lastTick=0;lastKick=-100;smoothPressure=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;cancelAnimationFrame(raf);
layer.classList.add('kkpt-beat-idle');quiet();
releaseCamera();
},
fadeToDawn(){
source=null;live=false;cancelAnimationFrame(raf);
releaseCamera();
layer.classList.add('kkpt-beat-outro');
const old=layer;
setTimeout(()=>{
old.remove();
if(kuronataAftermath?.layer===old)kuronataAftermath=null;
},2400);
},
dispose(){
source=null;live=false;cancelAnimationFrame(raf);
clearTimeout(cameraReleaseTimer);
root.classList.remove('kkpt-camera-running');
root.style.removeProperty('--kkpt-camera-zoom');
root.style.removeProperty('--kkpt-camera-focus-y');
root.style.removeProperty('--kkpt-chroma-red');
root.style.removeProperty('--kkpt-chroma-shadow');
layer.remove();kuronataAftermath=null;
},
layer
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createCloudbreakAfterglow(continueFromNavigation=false){
const previous=document.getElementById('kkpt-cloudbreak');
previous?.remove();
let timestamp=Date.now();
if(continueFromNavigation){
try{timestamp=Number(sessionStorage.getItem(DAWN_HALO_KEY));}
catch(_){return;}
if(!Number.isFinite(timestamp)||timestamp<=0)return;
}else{
try{sessionStorage.setItem(DAWN_HALO_KEY,String(timestamp));}
catch(_){}
}
const elapsed=Math.max(0,Date.now()-timestamp);
if(elapsed>6900){
try{sessionStorage.removeItem(DAWN_HALO_KEY);}catch(_){}
return;
}
const bloom=document.createElement('div');
bloom.id='kkpt-cloudbreak';
bloom.setAttribute('aria-hidden','true');
bloom.style.setProperty('--kkpt-dawn-delay',(-elapsed)+'ms');
bloom.innerHTML='<i class="kkpt-dawn-dark-rim"></i>'+
'<i class="kkpt-dawn-bright-rim"></i>'+
'<i class="kkpt-dawn-cloud-sweep"></i>';
root.append(bloom);
setTimeout(()=>{
bloom.remove();
try{
if(Number(sessionStorage.getItem(DAWN_HALO_KEY))===timestamp)
sessionStorage.removeItem(DAWN_HALO_KEY);
}catch(_){}
},Math.max(0,7000-elapsed));
}
function createRebirthVisual(){
// Hope replaces ash: a barely perceptible rainbow after the rain.
// No numbered / nested six-band rainbow; just one diffuse halo.
// All are compositor layers; nothing is rasterized on every frame.
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
audio.volume=.78*Math.min(fadeIn,fadeOut);
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
// Seek straight into the selected three-second transition prelude.
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
// A stalled soundtrack cannot trap navigation indefinitely.
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,75);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:40
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==40||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
// The only fallback is the SAME small icon, no audio popup.
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}

let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';

function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}

function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}

// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}

function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}

function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const observer = new MutationObserver(() => {
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
decoratePortalLinks(doc,targetPage);
},120);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}

function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}

function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}

function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
// Both directions start playback during the trusted user gesture.
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}

// The Infobox gear begins to turn before the actual world changes.
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
// The gear and the world run on the SAME audio timeline. A 2s
// unobserved setTimeout used to create an awkward silent gap.
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}

function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}

function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
// The fate wheel stays inside the native Infobox caption, but is
// positioned independently: it must NEVER push the title off-center.
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
// A native button cannot be mistaken for an article link by
// MediaWiki Popups, including in previews loaded into iframes.
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);

// Fixed corner placement: no title measurements, ResizeObserver
// or reflow during the animation.
}

// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}

function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}

async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}

function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
// The preview exists only for the animated reveal. Pausing
// its hidden ambience avoids doubling ongoing render work.
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;

// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the temporary preview.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);

doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}

function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
// Load all resources in advance, but don't composite the hidden
// full-screen Wiki until its first transition frame.
frame.style.visibility = 'hidden';
// Never expose a plain cyan rectangle while the destination Wiki
// page is still painting. The image is the same native world photo.
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}

loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});

warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}

// Shared, low-resolution atmospherics: return of V14's dark smoke,
// long-lived torn paper, shockwaves, blue-white petals and pollen.
// Only the combustion CURTAIN is replaced by the bright V2 engine.
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
// V2-inspired white-hot additive sprites, but with noise-eroded
// silhouettes instead of repetitive smooth, elliptical balls.
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
// V25: the profiler found one 270ms long task here. Build the
// EXACT SAME 17 textures in separate tasks, never all at once.
// The stable noise cache avoids repeating the costly sin hash.
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
// Normally prewarming is already complete before a user clicks.
// The fallback also works if an animation is started immediately.
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
// More long-lived sparks than V25, far below V31's 370/s.
// Blue petals are softer/less dense: fewer layers noticeably
// reduce reverse-direction Canvas work without touching fire.
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
// Unlike the traveling front, these black smoke plumes
// are born in world-space and remain over burnt paper.
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
// Charcoal sheets tear off in irregular polygons, not
// squares or narrow glitch streaks.
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
// Dawn uses soft-focus sprites, so 0.45 is visually sufficient.
// This cuts ~33% of full-screen pixels compared with 0.55.
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
// New-world side: red fire trails to the right when burning,
// blue dawn trails to the left when returning.
const direction=dark?1:-1;
// Broken smoke banks with different depths and sizes. The old
// aligned rows created an artificial horizontal fog ribbon.
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// Residual devastation: coal-black plumes stay pinned to their
// original burn positions, expanding long after the tear passes.
// Composited *before* fire, so the hot core cuts through smoke.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
// The inverse is a slow, organic unfurling: broad milky
// radiance behind the rebuilt sky, not a cold explosion.
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Only combustion throws straight, fiery projectile trails.
// Return-to-blue has no streaks or sparks whatsoever.
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Real flame tongues break OUT of the burn front into the sky.
// They are thin, tapered Bezier ribbons with an unstable pulse,
// rather than round glowing particles or a uniform bright line.
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}

// Carbonized paper has a fine, ragged edge. The charcoal layer
// persists continuously, but the white-hot core does NOT.
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
// Intermittent ignition cells: varying width/color/intensity
// make the bright edge resemble burning fibres, not neon.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
// Fragmented ignition on real microscopic perforations.
// Missing arc sections stop them resembling punched circles.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
// Small carbon flecks stick to the still-blue paper just
// ahead of the bite; no large rectangular glitch debris.
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
// The key property V3-V6 lost: particles remain at their
// birth position while the front advances. A wide, incandescent
// WAKE builds behind the tearing page instead of following
// it as one thin, plastic-looking stripe.
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
// Rebirth uses soft, rotating, organic leaf/petal silhouettes,
// minute circular pollen and spacious white-blue bokeh. No
// rectangular ions, no warm textures and NO glowing streaks.
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
// Reuse the cached soft sprite; a fresh radial
// gradient for every pollen mote per frame was costly.
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
// Minute black flecks, never rectangular shards on the blue side.
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
// Irregular burnt page sections tumble away and reveal their
// blackened underside, with an occasional incandescent rim.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
// Thin blue-white unburnt fibers still visible on a
// few ripped faces, before the back chars completely.
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
// Sharp, directional embers / crystalline fragments, not blobs.
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}

let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
// Exactly one texture per task: no more 270ms blocking call.
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
setTimeout(step,24);
}
setTimeout(step,40);
});
return atmosphereWarmPromise;
}

let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}

// Original V2's moving flame sprites and three bright contours, rebuilt
// with bounded particle counts. No WebGL, no full-screen noise pass,
// no 1,000-point polygon or per-frame image-texture upload.
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}

// V2's simple advancing boundary. The reader asked for the
// vibrant fire curtain, not a mathematically fractal tearing wire.
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}

// GPU-only ember flecks: ONE small draw call at most 30fps.
// The white-hot V25 fire, the smoke and the dawn stay unmodified 2D.
// No fullscreen pixel shader, FBM, flame quads or cyan rectangle.
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}

// Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}

function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}

const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
let lastClip=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();

// Dense GOLD / WHITE rolling fire, including on both sides
// of the border. These are the luminous shapes from V2.
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
// Both original V25 curtains follow their OWN song cue clock.
// Framerate drops cannot move 00:33 / 02:39 off the midpoints.
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
// Clip-path polygon reconstruction can cause expensive iframe
// compositor work. It runs at a bounded rate independent of rAF.
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
const clipStep=dark?(mobile?33:23):(mobile?43:34);
if(now-lastClip>=clipStep||t>=1){
clipFrame(edge);
lastClip=now;
}
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
// Restore V14's broad smoke banks, long-lived char, pressure
// waves and delicate blue leaves. V2 only paints the FIRE.
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}

function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
// Stop the invisible Kuronata ambience in either document.
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}

async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
// Never make the music wait for the network or an expensive texture.
// The iframe already has a matching photographic fallback; reveal
// it under the original V25 curtain even if HTML loads late.
await Promise.race([loading,sleep(score?350:1100)]);
await Promise.race([prewarmAtmosphere(),sleep(160)]);
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
if(!started||!await awaitScoreTime(score,
score.config.fireStart)){
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
}
removeScoreOmen();
releaseFatePrelude();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
// Give the now-visible destination its own first composited frame.
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));

labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
// When returning to the blue page, force the Day palette
// BEFORE unmasking it. The dark iframe still fully covers it.
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;

const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
await new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));

setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
// Fade the shadow away while a pearl-white edge radiates out
// of the just-opened sky, then let that light evaporate.
kuronataAftermath?.fadeToDawn();
createCloudbreakAfterglow();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
// The last frame holds living smoke and drifting fragments.
// Let it disperse with a lightweight compositor fade AFTER the
// destination is revealed; no costly extra canvas render loop.
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// The iframe was only the moving scenery during the reveal.
// Hand off to the ACTUAL Wiki page: native sidebars, scrollbar,
// history, refresh, accessibility and links all work normally.
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}

function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V40:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}

function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuranoka')createCloudbreakAfterglow(true);
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
mountKuronataAftermath(returnScore);
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();

button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}

// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] uses the same transition, then real navigation.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});

// Browser history is now real document history. A bfcache return
// must restore THIS document, not leave its animated preview visible.
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-cloudbreak')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered)mountKuronataAftermath(returnScore);
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T09:00:05Z

KK：

/* Kuranoka Page Transition V40 — celestial seals and full-camera pressure
Load only on /wiki/Kuranoka and /wiki/Kuronata.
No Citizen.css / Common.css changes. */

:root { --kkpt-css-v40: ready; }

/* One icon, no track title, timer, skip menu or resume popup. */
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}

/* Three seconds of cinematic omen. V25 draws the real fire curtain. */
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}

/* Fate summoning. A 5.5s atmospheric sigil overlaps 2.5 seconds of
V25's original fire, without changing the music's 3s prelude cue. */
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 3150ms cubic-bezier(.17,.65,.32,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:390px;height:390px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 10px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 5.1s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
/* The symbol stays upright while the OUTER mechanism rotates. */
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:1.0px;
opacity:.52;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-major {
stroke-width:2px;
opacity:.85;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-outer {
stroke-width:1.6px;
stroke-dasharray:91 6 3 6;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-trace {
stroke-width:.75px;
opacity:.72;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-filament {
stroke-width:1.1px;
opacity:.69;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-needle {
stroke-width:1.45px;
opacity:.77;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.28px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-dark-halo {
stroke:#e04d6a;
stroke-width:1.05px;
opacity:.57;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-thorn {
stroke:#fa4761;
stroke-width:2.1px;
opacity:.90;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-iris-ring {
stroke:#e75070;
stroke-dasharray:3 9;
stroke-width:1.2px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-eclipse {
stroke:#fa5c84;stroke-width:1.25px;opacity:.68;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-eye {
fill:rgba(45,0,20,.72);
stroke:#ffd0c6;
stroke-width:2.8px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-pupil {
fill:rgba(31,0,12,.97);
stroke:#ff8ca2;
stroke-width:3px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-iris {
stroke:#fb547e;stroke-width:2.9px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-lid {
stroke:#ffc0b2;stroke-width:1.15px;opacity:.67;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-fault {
stroke:#f33b55;stroke-width:1.5px;opacity:.6;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-cut {
stroke:rgba(248,37,77,.40);
stroke-width:1.3px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-reverse {
transform-origin:150px 150px;
transform:rotate(180deg);
opacity:.67;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-star {
fill:rgba(214,251,248,.08);
stroke:#fff7d4;
stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-star-inner {
fill:rgba(211,247,255,.14);
stroke:#c2f4ff;
stroke-width:1.6px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-sun-ray {
stroke:#ffe6ac;
fill:rgba(255,247,213,.05);
stroke-width:1.05px;
opacity:.76;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-leaf {
stroke:#c7f5dc;
stroke-width:1.25px;
opacity:.74;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-heart {
stroke:#c5faff;
stroke-width:2.8px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-horizon {
stroke:rgba(255,247,204,.72);
stroke-width:1.6px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-sun {
fill:rgba(255,251,209,.28);
stroke:#fff1b9;
stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:#fff6d3;stroke:#ffffff;stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-feathers {
stroke:#b6f1ff;stroke-width:1.2px;opacity:.69;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-ray {
stroke:#fff0bb;stroke-width:2px;opacity:.82;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:0;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:0;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
16%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:0;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:0;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}

/* AFTERMATH ONLY. Eight-beat bass accents control a slow whole-camera
push-in and release. This never scales down to expose page edges. */
#kkpt-beat-scene {
--kkpt-beat-dark:.60;
--kkpt-beat-scale:1.025;
--kkpt-beat-blur:.28px;
--kkpt-beat-glitch:.12;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-scars:.035;
position:fixed !important;
inset:0 !important;
/* Heartbeat vignette must be visible over the fire as well; its
transparent center keeps the original V25 flame incandescent. */
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
/* Whole viewport, not merely the article. The camera origin follows the
center of the visible scrolled viewport and the zoom stays >= 1. */
html.kkpt-camera-running {overflow-x:clip}
html.kkpt-camera-running body.page-Kuronata {
transform:translateZ(0) scale(var(--kkpt-camera-zoom,1.008));
transform-origin:50% var(--kkpt-camera-focus-y,50vh);
transition:transform 140ms cubic-bezier(.2,.7,.25,1);
will-change:transform;
}
html.kkpt-camera-running body.page-Kuronata #firstHeading {
text-shadow:var(--kkpt-chroma-red,0px) 0 rgba(255,31,83,.50),
var(--kkpt-chroma-shadow,0px) 0 rgba(117,2,32,.74);
transition:text-shadow 130ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-15%;
background:radial-gradient(ellipse at 50% 47%,transparent 16%,
rgba(12,0,8,.26) 39%,rgba(3,0,5,.71) 70%,
rgba(0,0,2,.99) 100%);
opacity:var(--kkpt-beat-dark);
transform:scale(var(--kkpt-beat-scale));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.012);
backdrop-filter:blur(2px) contrast(1.035);
-webkit-backdrop-filter:blur(2px) contrast(1.035);
opacity:calc(var(--kkpt-beat-glitch) * .53);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:radial-gradient(ellipse at 50% 130%,
transparent 32%,rgba(94,1,24,.24) 70%,rgba(31,0,9,.58) 100%),
linear-gradient(94deg,rgba(180,5,37,.55),transparent 17%,
transparent 82%,rgba(71,0,16,.72));
mix-blend-mode:multiply;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(159deg,
transparent 0 33px,rgba(61,0,20,.44) 35px,
rgba(8,0,9,.56) 36px,transparent 39px 74px);
clip-path:polygon(0 10%,23% 9%,31% 17%,43% 11%,58% 15%,
72% 10%,100% 16%,100% 18%,70% 12%,56% 18%,42% 14%,
31% 20%,20% 11%,0 13%,0 70%,18% 67%,36% 76%,
49% 69%,65% 79%,86% 72%,100% 77%,100% 80%,
86% 75%,65% 82%,49% 72%,36% 79%,18% 70%,0 73%);
}
#kkpt-beat-scene .kkpt-beat-scars {
position:absolute;
inset:0;
pointer-events:none;
width:100%;
height:100%;
opacity:var(--kkpt-beat-scars);
transform:translate3d(var(--kkpt-beat-shear),0,0);
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-scars path {
fill:none;
stroke:#be1839;
stroke-width:1.7px;
stroke-linejoin:bevel;
stroke-dasharray:84 11 21 36;
filter:drop-shadow(0 0 8px #8c001d);
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(2) {
stroke:#23000e;
stroke-width:5px;
}
#kkpt-beat-scene .kkpt-beat-scars path:nth-child(3) {
stroke:#ed3354;
stroke-width:1px;
}
#kkpt-beat-scene.kkpt-beat-outro {
opacity:0 !important;
transition:opacity 2150ms cubic-bezier(.12,.54,.22,1);
}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture {animation:none !important}
}

/* The cloudbreak follows the actual URL load. Its timestamp lives in
sessionStorage, so the light never snaps away between two documents. */
#kkpt-cloudbreak {
position:fixed !important;
inset:0 !important;
z-index:2147482160 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
isolation:isolate;
}
#kkpt-cloudbreak > i {
display:block;
position:absolute;
inset:-12%;
pointer-events:none;
will-change:opacity,transform;
}
#kkpt-cloudbreak .kkpt-dawn-dark-rim {
background:radial-gradient(ellipse at 50% 47%,
transparent 20%,rgba(5,0,9,.28) 47%,
rgba(2,0,6,.81) 86%,rgba(0,0,2,.94) 100%);
animation:kkpt-dawn-dissolve 6900ms
cubic-bezier(.15,.46,.25,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-bright-rim {
background:
radial-gradient(ellipse at 50% 48%,transparent 19%,
rgba(226,246,255,.13) 46%,rgba(247,253,255,.68) 82%,
rgba(255,255,250,.88) 100%),
radial-gradient(ellipse at 45% 105%,transparent 12%,
rgba(221,245,255,.23) 62%,rgba(255,251,222,.54) 100%);
mix-blend-mode:screen;
animation:kkpt-dawn-bloom 6900ms
cubic-bezier(.12,.54,.23,1) var(--kkpt-dawn-delay,0ms) both;
}
#kkpt-cloudbreak .kkpt-dawn-cloud-sweep {
inset:-24% -12%;
background:
radial-gradient(ellipse at 16% 90%,rgba(251,253,255,.68),
rgba(238,248,255,.20) 35%,transparent 59%),
radial-gradient(ellipse at 83% 100%,rgba(250,253,255,.71),
rgba(241,247,255,.23) 32%,transparent 62%),
radial-gradient(ellipse at 50% 119%,rgba(255,250,222,.29),
transparent 70%);
animation:kkpt-dawn-rise 6900ms
cubic-bezier(.16,.56,.24,1) var(--kkpt-dawn-delay,0ms) both;
}
@keyframes kkpt-dawn-dissolve {
0%,11%{opacity:.77}
32%{opacity:.49}
52%{opacity:.03}
100%{opacity:0}
}
@keyframes kkpt-dawn-bloom {
0%,17%{opacity:0}
30%{opacity:.23}
48%{opacity:.86}
66%{opacity:.60}
83%{opacity:.18}
100%{opacity:0}
}
@keyframes kkpt-dawn-rise {
0%,22%{opacity:0;transform:translate3d(0,9%,0) scale(1.02)}
44%{opacity:.28}
64%{opacity:.66;transform:translate3d(0,-2%,0) scale(1.04)}
100%{opacity:0;transform:translate3d(0,-12%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){#kkpt-cloudbreak{display:none !important}}

/* Blue-world recovery. Fog gives way to receding rain, restrained pastel
rainbow arcs and a small field of floating essence — no white-screen flash. */
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
/* Above falling smoke, below the bright V25 blue recovery edge. */
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}

#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}

/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
#kkpt-toggle[hidden] {display:none !important}

#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}

#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}

#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}

/* Real interactive Wiki page, retained after the transition finishes. */
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}

body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
/* Don't reserve a full-screen animated compositor layer for a hidden iframe. */
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}

/* Atmosphere remains independent of the flame: drifting smoke,
scattered pages, shockwaves, and blue-white leaves from V14. */
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}

/* A small GPU ember overlay; no fullscreen WebGL flames or light curtains. */
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}

/* V2's incandescent curtain sits ABOVE the dark smoke bank. */
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}

/* MediaWiki portal links are normal links until hovered/focused. */
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
/* Never change inline flow, line breaks or Infobox link dimensions. */
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}

/* Pure overlay: NO styles or markup changes to native Infobox/caption. */
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}

.kkpt-fate-gear[hidden] {display:none !important}

body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}

.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}

.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}

.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}

.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation: kkpt-fate-rotation 3.85s cubic-bezier(.19,.69,.25,1) both;
}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
.kkpt-fate-gear-turning::after {
animation: kkpt-fate-ripple 1.15s ease-out both;
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}

/* ==================================================================
In-article FORM SWITCH: plain [[Kuronata|...]] / [[Kuranoka|...]].
Place beside or inside an Infobox; no loader changes or inline JS.
================================================================== */
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}

/* Respect any old in-article switch wikitext: never hide user content.
Delete its wikitext manually if you prefer only the fate gear. */

/* After a right-floated Infobox, the switch floats alongside it when
space allows; otherwise it falls below the box on narrow screens. */
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}

body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}

/* Keep the hidden second copy of the text inside the button's padding,
so the hover glitch doesn't spill past the rounded silhouette. */
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}

@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}

@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}

/* ==============================================================
KURONATA ONLY — Crimson Night
Never targets Kuranoka or any other article. Keep native layout.
JS opts just the Kuronata document into Citizen's night palette;
these scoped values also cover a preview iframe before JS runs.
============================================================== */

html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}

/* Preserve the storm background and glass, only recolor the foreground. */
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}

body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}

/* Blue hyperlinks break the blood-red theme. Retain recognizable links. */
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}

/* Infobox: leave all rows/columns exactly as the template generated them.
Correct only the old light-mode backgrounds and black foreground text. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}

/* Kuronata spoilers / 黑幕: the original white-on-white censor becomes
soot black, with the text revealed only on hover or keyboard focus. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}

/* Kuronata 黑幕：直接让 span 本身出现彩色信号撕裂。
无须 data 属性或 JS 注入，因此即使文章通过 AJAX 更新也生效。 */
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}

@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}

/* ===============================================================
V19: Kuronata spoiler fade + sliced text displacement.
The existing native .heimu markup and Infobox remain untouched.
=============================================================== */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* Always-on aftermath: a small number of GPU-composited smoke/ash
sprites, without a second persistent requestAnimationFrame loop. */
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
/* Wide, feathered side-banks built from asymmetric elliptical lobes.
No border-radius or single radial disk: no floating grey circles. */
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
opacity: 0;
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}

/* Infrequent, sharp spatial corruption: no full-screen strobe.
Different text layers lurch by distinct offsets. */
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}

/* Scroll cost: the gear is now absolute, not a sticky glass layer. */
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* =============================================================
V19 — corrections made against the actual rendered Infobox HTML
and multiline screenshot. No original page layout is rewritten.
============================================================= */

/* Actual Infobox caption: the gear is a real descendant, not a
document-level follower. Caption sizing/text centering is unchanged. */
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
position: absolute !important;
left: auto !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}

/* A multiline inline span must not repeat its entire text at line 1.
Instead render per-line chromatic slices from DOM Range metrics. */
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* The afterglow must be a visible, restrained foreground film.
This is above Citizen's article glass but behind the live iframe. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
/* Mobile: avoid expensive glow/blur composite work. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}

/* ===========================================================
V20 · Fate wheel / fog banks / Kuronata hyperlink faults
=========================================================== */

/* Inline beside the first-line Infobox TITLE, not on the far right
of the table. Also works beside the article heading as fallback. */
.kkpt-fate-host > .kkpt-fate-gear {
display: inline-grid !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
vertical-align: middle !important;
transform: translateY(-2px) !important;
width: 31px !important;
height: 31px !important;
padding: 5px !important;
margin: 0 0 0 8px !important;
flex: none !important;
float: none !important;
line-height: 1 !important;
border-color: rgba(255,255,255,.45);
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
opacity: .34;
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .88;
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
animation-duration: .65s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: kkpt-destiny-awaken 1.5s ease-out;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 5px var(--kkpt-gear-halo));
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}

/* V35: the actual fate wheel spins, hesitates, then accelerates over
the entire 3-second opening instead of stopping after half a second. */
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}

/* Every text link in the darker world has an unstable signal.
Ordinary links jitter subtly; the way back to Kuranoka tears
apart harder. The original link palette is preserved. */
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}

/* ==============================================================
V21 — Title stays centered; pearl-toned fate gear floats next
to the FIRST title line without affecting any text flow.
Only wheel placement/appearance changes. Other FX untouched.
============================================================== */
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
left: var(--kkpt-gear-left, calc(50% + 75px)) !important;
top: var(--kkpt-gear-top, 17px) !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
float: none !important;
vertical-align: baseline !important;
width: 27px !important;
height: 27px !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}

/* ==============================================================
V22 — Real cross-document navigation after the visual handoff.
The iframe exists ONLY during the effects; browser navigation
restores the Citizen sidebar and the document's native scrollbar.
Supported browsers receive a brief native page-to-page dissolve.
============================================================== */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 160ms;
}
::view-transition-new(root) {
animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

/* Kuronata: the names of the lost daylight identity glitch at rest. */
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
/* Link to Kuranoka glitches without hover, too. */
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}

/* V23 — fate wheel in the Infobox caption's TOP RIGHT CORNER.
Absolute positioning never changes the title's centering. */
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}

/* ==============================================================
V24 — Fix OS-theme inheritance and blue/white handoff flashes.
Kuranoka is daylight; Kuronata is crimson night on ALL systems.
Background fallbacks now visually match the respective photos
while the actual image bytes/texture become ready.
============================================================== */
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}

/* Keep the OLD fully-rendered scene in place while the destination
document finishes its first paint. Then dissolve once, smoothly. */
@keyframes kkpt-native-handoff-out {
0%, 48% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes kkpt-native-handoff-in {
0%, 42% { opacity: 0; }
100% { opacity: 1; }
}
::view-transition-old(root) {
animation: kkpt-native-handoff-out 880ms ease-in-out both;
}
::view-transition-new(root) {
animation: kkpt-native-handoff-in 880ms ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

MediaWiki:KuranokaPageTransition.js

2026-10-24T08:06:25Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V39 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}

const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;

// V24: the two article worlds have deliberate, deterministic palettes.
// "os" is NOT a light theme: it can resolve to dark on the reader's
// computer. Session storage may also be unavailable. Therefore, never
// restore a stale "os" token when landing back on Kuranoka.
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
// Citizen may reapply OS-preference classes after its own scripts load.
// Keep each world's class correct without changing the user's setting.
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
// V31's page-style retry solves occasional initial unstyled portals.
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v39').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','39');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}

// V17: the dark-world extras run in *both* the visible document and
// its same-origin preview iframe. They never alter other Wiki pages.
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
// Multiline .heimu cannot use a single nowrap pseudo-element:
// it piles all copied text onto line one. Project each rendered
// line into two SHORT clipped chromatic slices only on hover.
// Range measurements leave the original article DOM and wrapping
// entirely untouched, including italic/link children.
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
// Copy a link only if it truly occupies one
// rendered line. Multiline links keep real text.
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
// V29's useful identity faults, transplanted without its transition
// shaders. Only text nodes are wrapped; Wiki links stay clickable.
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
// All sprites are static layers with compositor-only
// transform/opacity animation. No persistent canvas or RAF.
// The soot is a side-bank haze, not a random full-screen
// spread of isolated circular clouds.
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();

// One brief spatial fault roughly every 14-36 seconds, never a
// full-screen white strobe. Pause while the iframe is hidden.
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();

// The nested preview only applies its own theme; no recursive iframe.
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='39.0';

// Easter eggs + Infobox gear are the default. No floating pill.
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
// C2-smooth cinematic ease; starts and settles with zero acceleration.
// Its midpoint stays at t=.5, preserving 00:33 / 02:39 beat alignment.
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
// V24: preload both original background photographs. The target
// image is decoded while its real-document iframe is preparing,
// reducing flashes of the bare background-color at navigation.
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
// Give the current photo first priority; then prepare the next
// world so the iframe and the eventual real page can reuse it.
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();

const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;

// Public-domain PADsynth recording, ~8.4s / 120KB. Change this
// to a same-origin Wiki-upload URL if external media are blocked.
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
// A plain media element can still play the recording when a site's
// CORS policy disallows reading the file into Web Audio.
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}

function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
// Micro-crackles: impulsive bursts with different decay times.
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
// A REAL recorded PADsynth sample; no generated wind-chimes.
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}

// Audio starts AT ITS TRANSITION SECTION, not at 00:00. Three seconds of
// crescendo accompany the fate-wheel awakening. V25's actual fire and
// particle painting remains unchanged. Music 00:33 / 02:39 now lands
// in the MIDDLE of the corresponding original V25 reveal.
const SCORE_KEY='kkpt:score-handoff:39';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
// Let the V25 fire steadily replace the red veil. Abruptly
// removing it at t=0 was the visible "turns bright" flash.
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
}
function fateSigilMarkup(isDark){
const point=(r,deg)=>{
const a=(deg-90)*Math.PI/180;
return [
(150+Math.cos(a)*r).toFixed(1),
(150+Math.sin(a)*r).toFixed(1)
];
};
const ring=(r,klass)=>'<circle class="'+klass+'" cx="150" cy="150" r="'+r+'"/>';
const segment=(a,b,klass)=>'<path class="'+klass+'" d="M'+a.join(' ')+
'L'+b.join(' ')+'"/>';
const glyphs=Array.from({length:isDark?36:24},(_,i)=>{
const angle=i*360/(isDark?36:24);
return segment(point(isDark?113:110,angle),
point(isDark?(i%3?118:127):(i%3?117:125),angle),
'kkpt-sigil-mark');
}).join('');
const diamonds=Array.from({length:8},(_,i)=>{
const deg=i*45;
const p=[point(108,deg),point(113,deg+3.3),
point(120,deg),point(113,deg-3.3)];
return '<polygon class="kkpt-sigil-diamond" points="'+
p.map(v=>v.join(',')).join(' ')+'"/>';
}).join('');
const rays=Array.from({length:12},(_,i)=>
segment(point(35,i*30),point(i%3?43:50,i*30),'kkpt-sigil-ray')
).join('');
const darkDrawing=
ring(126,'kkpt-sigil-orbit')+
ring(108,'kkpt-sigil-seal')+
ring(92,'kkpt-sigil-ghost')+
diamonds+
'<path class="kkpt-sigil-eclipse" d="M150 64C97 86 86 117 92 151C97 188 119 209 150 236"/>'+
'<path class="kkpt-sigil-eclipse" d="M150 64C203 86 214 117 208 151C203 188 181 209 150 236"/>'+
'<path class="kkpt-sigil-eye" d="M77 151C100 127 121 119 150 118C179 119 200 127 223 151C199 175 180 185 150 186C120 185 100 175 77 151Z"/>'+
ring(26,'kkpt-sigil-iris')+
ring(11,'kkpt-sigil-pupil')+
'<path class="kkpt-sigil-lid" d="M79 141Q150 100 221 141M79 162Q150 205 221 162"/>'+
'<path class="kkpt-sigil-fault" d="M135 62l-8 17 15 9-8 14M215 191l-19 9 2 17-14 9"/>';
const hopeDrawing=
ring(124,'kkpt-sigil-orbit')+
ring(109,'kkpt-sigil-seal')+
ring(88,'kkpt-sigil-ghost')+
diamonds+rays+
'<path class="kkpt-sigil-horizon" d="M67 171Q104 144 131 159Q145 166 150 176Q155 166 169 159Q196 144 233 171"/>'+
'<path class="kkpt-sigil-horizon" d="M77 187Q117 169 150 187Q183 169 223 187"/>'+
'<path class="kkpt-sigil-feathers" d="M89 150Q111 120 135 133M211 150Q189 120 165 133"/>'+
ring(28,'kkpt-sigil-heart')+
ring(19,'kkpt-sigil-sun')+
'<circle class="kkpt-sigil-center" cx="150" cy="150" r="6"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-turning" fill="none" stroke="'+
(isDark?'#ff637c':'#d7f9ef')+'" stroke-width="1.7">'+glyphs+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
document.body.append(prelude);
fatePrelude=prelude;
// The 6.6s sigil overlaps the full V25 curtain:
// NEVER delay 00:33/02:39 to prolong the visual spectacle.
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},6650);
}

// Actual transient analysis of the hosted Marenoia recording, 22.05 kHz
// mono / spectral-flux + low-band kick envelope. A main beat repeats
// roughly every 0.439 seconds (~137 BPM), with salient attacks near
// 31.775, 33.561, 33.751 and 34.250s. React to audio.currentTime:
// wall-clock timers would desynchronize during MP3 buffering/seeking.
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
// The fire segment only gets lightning. The pressure / dark vignette
// belongs to the AFTERMATH and survives the real page navigation.
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}

// Measured with the submitted MP3: heavy low-frequency accents repeat
// every 8 beats (~3.532 s at 135.9 BPM). Each was 1.6–2.1x the
// median low-band RMS of the seven intervening beats. Never trigger
// a full-screen pressure pump on all of the fast intermediate notes.
const AFTER_DARK_KEY='kkpt:dark-afterglow:39';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
// Offline 0.25s RMS contour, normalized by the passage's 95th
// percentile. Tracks long-form dynamics without cross-origin
// WebAudio sample access (which may be forbidden by CORS).
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaDeepPulse(age){
// A 420ms inhale, 300ms hold and ~2.2s heavy exhale.
// One pressure wave per eight beats, not a rapid heartbeat.
if(age<0||age>=2.98)return 0;
if(age<.42)return smooth(age/.42);
if(age<.72)return 1;
return 1-smooth((age-.72)/2.26);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-focus"></div>'+
'<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>'+
'<div class="kkpt-beat-slices"></div>';
document.body.append(layer);
let live=true,raf=0,lastTick=0,source=null,lastKick=-100;
let smoothPressure=0,index=0;
const quiet=()=>{
layer.style.setProperty('--kkpt-beat-dark','.60');
layer.style.setProperty('--kkpt-beat-scale','1.025');
layer.style.setProperty('--kkpt-beat-blur','0.28px');
layer.style.setProperty('--kkpt-beat-glitch','.12');
layer.style.setProperty('--kkpt-beat-shear','0px');
layer.style.setProperty('--kkpt-beat-shear-reverse','0px');
layer.style.setProperty('--kkpt-beat-slices','.05');
root.style.setProperty('--kkpt-world-zoom','1');
root.style.setProperty('--kkpt-chroma-red','0px');
root.style.setProperty('--kkpt-chroma-cyan','0px');
};
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<38)return;
const dt=Math.min(.12,Math.max(.038,(now-lastTick)/1000));
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;cancelAnimationFrame(raf);
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
// The recording's actual loudness and 18s player fade BOTH
// attenuate the pump as the music settles down.
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const targetPressure=marenoiaDeepPulse(audioTime-lastKick)*
soundStrength;
const follow=1-Math.exp(-dt/.21);
smoothPressure+=(targetPressure-smoothPressure)*follow;
const pressure=smoothPressure;
layer.style.setProperty('--kkpt-beat-dark',
(.60+.38*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-scale',
(1.025-.175*pressure).toFixed(4));
layer.style.setProperty('--kkpt-beat-blur',
(.28+2.6*pressure).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-glitch',
(.12+.63*pressure).toFixed(3));
const shear=Math.sin(index*1.47)*pressure*9.0;
layer.style.setProperty('--kkpt-beat-shear',
shear.toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-shear-reverse',
(-shear*.86).toFixed(2)+'px');
layer.style.setProperty('--kkpt-beat-slices',
(.05+.83*pressure).toFixed(3));
// Transform does not affect wrapping/layout; just a visible,
// gentle 8-beat pull of the article against the background.
root.style.setProperty('--kkpt-world-zoom',
(1.006-.034*pressure).toFixed(4));
root.style.setProperty('--kkpt-chroma-red',
(-4.4*pressure).toFixed(2)+'px');
root.style.setProperty('--kkpt-chroma-cyan',
(5.6*pressure).toFixed(2)+'px');
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
if(live){cancelAnimationFrame(raf);}
live=true;lastTick=0;lastKick=-100;smoothPressure=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;cancelAnimationFrame(raf);
layer.classList.add('kkpt-beat-idle');quiet();
},
dispose(){
source=null;live=false;cancelAnimationFrame(raf);
root.style.removeProperty('--kkpt-world-zoom');
root.style.removeProperty('--kkpt-chroma-red');
root.style.removeProperty('--kkpt-chroma-cyan');
layer.remove();kuronataAftermath=null;
}
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createRebirthVisual(){
// Hope replaces ash: a barely perceptible rainbow after the rain.
// No numbered / nested six-band rainbow; just one diffuse halo.
// All are compositor layers; nothing is rasterized on every frame.
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
audio.volume=.78*Math.min(fadeIn,fadeOut);
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
// Seek straight into the selected three-second transition prelude.
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
// A stalled soundtrack cannot trap navigation indefinitely.
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,75);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:39
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==39||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
// The only fallback is the SAME small icon, no audio popup.
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}

let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';

function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}

function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}

// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}

function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}

function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const observer = new MutationObserver(() => {
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
decoratePortalLinks(doc,targetPage);
},120);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}

function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}

function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}

function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
// Both directions start playback during the trusted user gesture.
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}

// The Infobox gear begins to turn before the actual world changes.
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
// The gear and the world run on the SAME audio timeline. A 2s
// unobserved setTimeout used to create an awkward silent gap.
requestAnimationFrame(()=>{
gearPending=false;
requestSwap(nextActive);
});
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}

function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}

function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
// The fate wheel stays inside the native Infobox caption, but is
// positioned independently: it must NEVER push the title off-center.
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
// A native button cannot be mistaken for an article link by
// MediaWiki Popups, including in previews loaded into iframes.
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);

// Fixed corner placement: no title measurements, ResizeObserver
// or reflow during the animation.
}

// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}

function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}

async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}

function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
// The preview exists only for the animated reveal. Pausing
// its hidden ambience avoids doubling ongoing render work.
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;

// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the temporary preview.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);

doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}

function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
// Load all resources in advance, but don't composite the hidden
// full-screen Wiki until its first transition frame.
frame.style.visibility = 'hidden';
// Never expose a plain cyan rectangle while the destination Wiki
// page is still painting. The image is the same native world photo.
const targetBackdrop=worldBackdrops[otherPage];
if(targetBackdrop){
frame.style.backgroundImage='url("'+targetBackdrop+'")';
frame.style.backgroundPosition='center center';
frame.style.backgroundSize='cover';
frame.style.backgroundRepeat='no-repeat';
}

loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});

warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}

// Shared, low-resolution atmospherics: return of V14's dark smoke,
// long-lived torn paper, shockwaves, blue-white petals and pollen.
// Only the combustion CURTAIN is replaced by the bright V2 engine.
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
// V2-inspired white-hot additive sprites, but with noise-eroded
// silhouettes instead of repetitive smooth, elliptical balls.
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
// V25: the profiler found one 270ms long task here. Build the
// EXACT SAME 17 textures in separate tasks, never all at once.
// The stable noise cache avoids repeating the costly sin hash.
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
// Normally prewarming is already complete before a user clicks.
// The fallback also works if an animation is started immediately.
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
// More long-lived sparks than V25, far below V31's 370/s.
// Blue petals are softer/less dense: fewer layers noticeably
// reduce reverse-direction Canvas work without touching fire.
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
// Unlike the traveling front, these black smoke plumes
// are born in world-space and remain over burnt paper.
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
// Charcoal sheets tear off in irregular polygons, not
// squares or narrow glitch streaks.
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
// Dawn uses soft-focus sprites, so 0.45 is visually sufficient.
// This cuts ~33% of full-screen pixels compared with 0.55.
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
// New-world side: red fire trails to the right when burning,
// blue dawn trails to the left when returning.
const direction=dark?1:-1;
// Broken smoke banks with different depths and sizes. The old
// aligned rows created an artificial horizontal fog ribbon.
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// Residual devastation: coal-black plumes stay pinned to their
// original burn positions, expanding long after the tear passes.
// Composited *before* fire, so the hot core cuts through smoke.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
// The inverse is a slow, organic unfurling: broad milky
// radiance behind the rebuilt sky, not a cold explosion.
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Only combustion throws straight, fiery projectile trails.
// Return-to-blue has no streaks or sparks whatsoever.
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Real flame tongues break OUT of the burn front into the sky.
// They are thin, tapered Bezier ribbons with an unstable pulse,
// rather than round glowing particles or a uniform bright line.
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}

// Carbonized paper has a fine, ragged edge. The charcoal layer
// persists continuously, but the white-hot core does NOT.
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
// Intermittent ignition cells: varying width/color/intensity
// make the bright edge resemble burning fibres, not neon.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
// Fragmented ignition on real microscopic perforations.
// Missing arc sections stop them resembling punched circles.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
// Small carbon flecks stick to the still-blue paper just
// ahead of the bite; no large rectangular glitch debris.
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
// The key property V3-V6 lost: particles remain at their
// birth position while the front advances. A wide, incandescent
// WAKE builds behind the tearing page instead of following
// it as one thin, plastic-looking stripe.
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
// Rebirth uses soft, rotating, organic leaf/petal silhouettes,
// minute circular pollen and spacious white-blue bokeh. No
// rectangular ions, no warm textures and NO glowing streaks.
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
// Reuse the cached soft sprite; a fresh radial
// gradient for every pollen mote per frame was costly.
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
// Minute black flecks, never rectangular shards on the blue side.
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
// Irregular burnt page sections tumble away and reveal their
// blackened underside, with an occasional incandescent rim.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
// Thin blue-white unburnt fibers still visible on a
// few ripped faces, before the back chars completely.
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
// Sharp, directional embers / crystalline fragments, not blobs.
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}

let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
// Exactly one texture per task: no more 270ms blocking call.
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
setTimeout(step,24);
}
setTimeout(step,40);
});
return atmosphereWarmPromise;
}

let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}

// Original V2's moving flame sprites and three bright contours, rebuilt
// with bounded particle counts. No WebGL, no full-screen noise pass,
// no 1,000-point polygon or per-frame image-texture upload.
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}

// V2's simple advancing boundary. The reader asked for the
// vibrant fire curtain, not a mathematically fractal tearing wire.
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}

// GPU-only ember flecks: ONE small draw call at most 30fps.
// The white-hot V25 fire, the smoke and the dawn stay unmodified 2D.
// No fullscreen pixel shader, FBM, flame quads or cyan rectangle.
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}

// Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}

function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}

const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
let lastClip=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();

// Dense GOLD / WHITE rolling fire, including on both sides
// of the border. These are the luminous shapes from V2.
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
// Both original V25 curtains follow their OWN song cue clock.
// Framerate drops cannot move 00:33 / 02:39 off the midpoints.
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
// Clip-path polygon reconstruction can cause expensive iframe
// compositor work. It runs at a bounded rate independent of rAF.
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
const clipStep=dark?(mobile?33:23):(mobile?43:34);
if(now-lastClip>=clipStep||t>=1){
clipFrame(edge);
lastClip=now;
}
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
// Restore V14's broad smoke banks, long-lived char, pressure
// waves and delicate blue leaves. V2 only paints the FIRE.
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}

function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
// Stop the invisible Kuronata ambience in either document.
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}

async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
// Never make the music wait for the network or an expensive texture.
// The iframe already has a matching photographic fallback; reveal
// it under the original V25 curtain even if HTML loads late.
await Promise.race([loading,sleep(score?350:1100)]);
await Promise.race([prewarmAtmosphere(),sleep(160)]);
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
if(!started||!await awaitScoreTime(score,
score.config.fireStart)){
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
}
removeScoreOmen();
releaseFatePrelude();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
// Give the now-visible destination its own first composited frame.
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));

labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
// When returning to the blue page, force the Day palette
// BEFORE unmasking it. The dark iframe still fully covers it.
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;

const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
await new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));

setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.dispose();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
// The last frame holds living smoke and drifting fragments.
// Let it disperse with a lightweight compositor fade AFTER the
// destination is revealed; no costly extra canvas render loop.
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// The iframe was only the moving scenery during the reveal.
// Hand off to the ACTUAL Wiki page: native sidebars, scrollbar,
// history, refresh, accessibility and links all work normally.
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}

function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V39:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}

function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
mountKuronataAftermath(returnScore);
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();

button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}

// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] uses the same transition, then real navigation.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});

// Browser history is now real document history. A bfcache return
// must restore THIS document, not leave its animated preview visible.
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered)mountKuronataAftermath(returnScore);
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T08:06:15Z

KK：

/* Kuranoka Page Transition V39 — continuous fate travel + visible pressure
Load only on /wiki/Kuranoka and /wiki/Kuronata.
No Citizen.css / Common.css changes. */

:root { --kkpt-css-v39: ready; }

/* One icon, no track title, timer, skip menu or resume popup. */
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}

/* Three seconds of cinematic omen. V25 draws the real fire curtain. */
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}

/* Fate summoning. A 5.5s atmospheric sigil overlaps 2.5 seconds of
V25's original fire, without changing the music's 3s prelude cue. */
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 3150ms cubic-bezier(.17,.65,.32,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.18,.8,.25,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:336px;height:336px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 8px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 5.1s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
/* The symbol stays upright while the OUTER mechanism rotates. */
animation:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:2.1px;
opacity:.66;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:40 8 6 8;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-ghost {
stroke-width:.85px;
stroke-dasharray:2 7;
opacity:.75;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-diamond {
stroke-width:1.8px;
opacity:.8;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-eclipse {
stroke:#fa5c84;stroke-width:1.25px;opacity:.68;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-eye {
fill:rgba(65,0,22,.63);
stroke:#ffd0c6;
stroke-width:2.8px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-pupil {
fill:rgba(31,0,12,.97);
stroke:#ff8ca2;
stroke-width:3px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-iris {
stroke:#fb547e;stroke-width:2.9px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-lid {
stroke:#ffc0b2;stroke-width:1.15px;opacity:.67;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-fault {
stroke:#f33b55;stroke-width:1.5px;opacity:.6;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-cut {
stroke:rgba(248,37,77,.40);
stroke-width:1.3px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-reverse {
transform-origin:150px 150px;
transform:rotate(180deg);
opacity:.67;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-star {
fill:rgba(214,251,248,.11);
stroke:#fff7d4;
stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-heart {
stroke:#c5faff;
stroke-width:2.8px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-horizon {
stroke:rgba(255,247,204,.72);
stroke-width:1.6px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-sun {
fill:rgba(255,251,209,.28);
stroke:#fff1b9;
stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-center {
fill:#fff6d3;stroke:#ffffff;stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-feathers {
stroke:#b6f1ff;stroke-width:1.9px;opacity:.73;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-ray {
stroke:#fff0bb;stroke-width:2px;opacity:.82;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:0;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:0;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%{transform:translate3d(0,0,0) scale(.48)}
48%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.42)}
100%{transform:translate3d(var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.58)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:0;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%{opacity:.22;transform:scale(.2)}
12%{opacity:.65;transform:scale(.42)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:0;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%{opacity:.72;transform:translate(-50%,-50%) scale(.65)}
12%{opacity:.98}
27%{opacity:.96}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}

/* AFTERMATH ONLY. The eight-beat (~3.53s) bass accents create a slow
0.42s contraction / 2.26s release in the vignette lens. The dark page
persists after native navigation, but its ARTICLE is never scaled. */
#kkpt-beat-scene {
--kkpt-beat-dark:.60;
--kkpt-beat-scale:1.025;
--kkpt-beat-blur:.28px;
--kkpt-beat-glitch:.12;
--kkpt-beat-shear:0px;
--kkpt-beat-shear-reverse:0px;
--kkpt-beat-slices:.05;
position:fixed !important;
inset:0 !important;
/* Heartbeat vignette must be visible over the fire as well; its
transparent center keeps the original V25 flame incandescent. */
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
/* Only on the dark destination. Slow pull is visually noticeable without
changing the Wiki document's widths, reflowing text or moving the UI. */
html:has(#kkpt-beat-scene) body.page-Kuronata #mw-content-text {
transform:scale(var(--kkpt-world-zoom,1));
transform-origin:50% 43%;
transition:transform 110ms ease-out;
will-change:transform;
}
html:has(#kkpt-beat-scene) body.page-Kuronata #firstHeading {
text-shadow:var(--kkpt-chroma-red,0px) 0 rgba(255,31,83,.50),
var(--kkpt-chroma-cyan,0px) 0 rgba(53,214,255,.48);
transition:text-shadow 130ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-4%;
background:radial-gradient(ellipse at 50% 45%,transparent 17%,
rgba(13,0,10,.28) 38%,rgba(0,0,4,.66) 68%,
rgba(0,0,3,.97) 100%);
opacity:var(--kkpt-beat-dark);
transform:scale(var(--kkpt-beat-scale));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-focus {
position:absolute;
inset:0;
background:rgba(8,0,13,.001);
backdrop-filter:blur(var(--kkpt-beat-blur)) contrast(1.035);
-webkit-backdrop-filter:blur(var(--kkpt-beat-blur)) contrast(1.035);
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:linear-gradient(94deg,rgba(252,23,65,.78),transparent 17%,
transparent 82%,rgba(39,207,244,.74));
mix-blend-mode:screen;
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear-reverse),0,0);
background:repeating-linear-gradient(177deg,
transparent 0 10px,rgba(245,20,65,.78) 11px,
rgba(27,10,30,.44) 12px,transparent 13px 31px);
clip-path:polygon(0 13%,100% 12.1%,100% 13.7%,0 14.4%,
0 46%,100% 45.3%,100% 47%,0 47.8%,
0 77%,100% 76.5%,100% 78.2%,0 79%);
}
#kkpt-beat-scene .kkpt-beat-slices {
position:absolute;
inset:0;
pointer-events:none;
opacity:var(--kkpt-beat-slices);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:linear-gradient(180deg,
transparent 0 18%,rgba(254,32,82,.68) 18.4%,
rgba(5,206,248,.64) 18.8%,transparent 19.2% 46%,
rgba(22,189,243,.57) 46.4%,transparent 46.7% 73%,
rgba(255,50,92,.61) 73.4%,transparent 74%);
mix-blend-mode:screen;
will-change:opacity,transform;
}
#kkpt-beat-scene.kkpt-beat-outro {opacity:0}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture {animation:none !important}
}

/* Blue-world recovery. Fog gives way to receding rain, restrained pastel
rainbow arcs and a small field of floating essence — no white-screen flash. */
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
/* Above falling smoke, below the bright V25 blue recovery edge. */
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}

#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}

/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
#kkpt-toggle[hidden] {display:none !important}

#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}

#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}

#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}

/* Real interactive Wiki page, retained after the transition finishes. */
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710 url('https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png') center center / cover no-repeat;
transform: translateZ(0);
will-change: clip-path;
}

body.page-Kuronata #kkpt-preview {
background:#456e8a url('https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png') center center / cover no-repeat;
}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
/* Don't reserve a full-screen animated compositor layer for a hidden iframe. */
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}

/* Atmosphere remains independent of the flame: drifting smoke,
scattered pages, shockwaves, and blue-white leaves from V14. */
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}

/* A small GPU ember overlay; no fullscreen WebGL flames or light curtains. */
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}

/* V2's incandescent curtain sits ABOVE the dark smoke bank. */
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}

/* MediaWiki portal links are normal links until hovered/focused. */
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
/* Never change inline flow, line breaks or Infobox link dimensions. */
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}

/* Pure overlay: NO styles or markup changes to native Infobox/caption. */
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}

.kkpt-fate-gear[hidden] {display:none !important}

body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}

.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}

.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}

.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}

.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation: kkpt-fate-rotation 3.85s cubic-bezier(.19,.69,.25,1) both;
}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
.kkpt-fate-gear-turning::after {
animation: kkpt-fate-ripple 1.15s ease-out both;
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}

/* ==================================================================
In-article FORM SWITCH: plain [[Kuronata|...]] / [[Kuranoka|...]].
Place beside or inside an Infobox; no loader changes or inline JS.
================================================================== */
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}

/* Respect any old in-article switch wikitext: never hide user content.
Delete its wikitext manually if you prefer only the fate gear. */

/* After a right-floated Infobox, the switch floats alongside it when
space allows; otherwise it falls below the box on narrow screens. */
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}

body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}

/* Keep the hidden second copy of the text inside the button's padding,
so the hover glitch doesn't spill past the rounded silhouette. */
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}

@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}

@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}

/* ==============================================================
KURONATA ONLY — Crimson Night
Never targets Kuranoka or any other article. Keep native layout.
JS opts just the Kuronata document into Citizen's night palette;
these scoped values also cover a preview iframe before JS runs.
============================================================== */

html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}

/* Preserve the storm background and glass, only recolor the foreground. */
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}

body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}

/* Blue hyperlinks break the blood-red theme. Retain recognizable links. */
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}

/* Infobox: leave all rows/columns exactly as the template generated them.
Correct only the old light-mode backgrounds and black foreground text. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}

/* Kuronata spoilers / 黑幕: the original white-on-white censor becomes
soot black, with the text revealed only on hover or keyboard focus. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}

/* Kuronata 黑幕：直接让 span 本身出现彩色信号撕裂。
无须 data 属性或 JS 注入，因此即使文章通过 AJAX 更新也生效。 */
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}

@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}

/* ===============================================================
V19: Kuronata spoiler fade + sliced text displacement.
The existing native .heimu markup and Infobox remain untouched.
=============================================================== */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* Always-on aftermath: a small number of GPU-composited smoke/ash
sprites, without a second persistent requestAnimationFrame loop. */
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
/* Wide, feathered side-banks built from asymmetric elliptical lobes.
No border-radius or single radial disk: no floating grey circles. */
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
opacity: 0;
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}

/* Infrequent, sharp spatial corruption: no full-screen strobe.
Different text layers lurch by distinct offsets. */
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}

/* Scroll cost: the gear is now absolute, not a sticky glass layer. */
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* =============================================================
V19 — corrections made against the actual rendered Infobox HTML
and multiline screenshot. No original page layout is rewritten.
============================================================= */

/* Actual Infobox caption: the gear is a real descendant, not a
document-level follower. Caption sizing/text centering is unchanged. */
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
position: absolute !important;
left: auto !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}

/* A multiline inline span must not repeat its entire text at line 1.
Instead render per-line chromatic slices from DOM Range metrics. */
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* The afterglow must be a visible, restrained foreground film.
This is above Citizen's article glass but behind the live iframe. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
/* Mobile: avoid expensive glow/blur composite work. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}

/* ===========================================================
V20 · Fate wheel / fog banks / Kuronata hyperlink faults
=========================================================== */

/* Inline beside the first-line Infobox TITLE, not on the far right
of the table. Also works beside the article heading as fallback. */
.kkpt-fate-host > .kkpt-fate-gear {
display: inline-grid !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
vertical-align: middle !important;
transform: translateY(-2px) !important;
width: 31px !important;
height: 31px !important;
padding: 5px !important;
margin: 0 0 0 8px !important;
flex: none !important;
float: none !important;
line-height: 1 !important;
border-color: rgba(255,255,255,.45);
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
opacity: .34;
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .88;
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
animation-duration: .65s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: kkpt-destiny-awaken 1.5s ease-out;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 5px var(--kkpt-gear-halo));
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}

/* V35: the actual fate wheel spins, hesitates, then accelerates over
the entire 3-second opening instead of stopping after half a second. */
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}

/* Every text link in the darker world has an unstable signal.
Ordinary links jitter subtly; the way back to Kuranoka tears
apart harder. The original link palette is preserved. */
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}

/* ==============================================================
V21 — Title stays centered; pearl-toned fate gear floats next
to the FIRST title line without affecting any text flow.
Only wheel placement/appearance changes. Other FX untouched.
============================================================== */
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
left: var(--kkpt-gear-left, calc(50% + 75px)) !important;
top: var(--kkpt-gear-top, 17px) !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
float: none !important;
vertical-align: baseline !important;
width: 27px !important;
height: 27px !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}

/* ==============================================================
V22 — Real cross-document navigation after the visual handoff.
The iframe exists ONLY during the effects; browser navigation
restores the Citizen sidebar and the document's native scrollbar.
Supported browsers receive a brief native page-to-page dissolve.
============================================================== */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 160ms;
}
::view-transition-new(root) {
animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

/* Kuronata: the names of the lost daylight identity glitch at rest. */
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
/* Link to Kuranoka glitches without hover, too. */
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}

/* V23 — fate wheel in the Infobox caption's TOP RIGHT CORNER.
Absolute positioning never changes the title's centering. */
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}

/* ==============================================================
V24 — Fix OS-theme inheritance and blue/white handoff flashes.
Kuranoka is daylight; Kuronata is crimson night on ALL systems.
Background fallbacks now visually match the respective photos
while the actual image bytes/texture become ready.
============================================================== */
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}

/* Keep the OLD fully-rendered scene in place while the destination
document finishes its first paint. Then dissolve once, smoothly. */
@keyframes kkpt-native-handoff-out {
0%, 48% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes kkpt-native-handoff-in {
0%, 42% { opacity: 0; }
100% { opacity: 1; }
}
::view-transition-old(root) {
animation: kkpt-native-handoff-out 880ms ease-in-out both;
}
::view-transition-new(root) {
animation: kkpt-native-handoff-in 880ms ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

MediaWiki:KuranokaPageTransition.js

2026-10-24T07:46:52Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V38 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}

const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;

// V24: the two article worlds have deliberate, deterministic palettes.
// "os" is NOT a light theme: it can resolve to dark on the reader's
// computer. Session storage may also be unavailable. Therefore, never
// restore a stale "os" token when landing back on Kuranoka.
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
// Citizen may reapply OS-preference classes after its own scripts load.
// Keep each world's class correct without changing the user's setting.
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
// V31's page-style retry solves occasional initial unstyled portals.
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v38').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','38');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}

// V17: the dark-world extras run in *both* the visible document and
// its same-origin preview iframe. They never alter other Wiki pages.
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
// Multiline .heimu cannot use a single nowrap pseudo-element:
// it piles all copied text onto line one. Project each rendered
// line into two SHORT clipped chromatic slices only on hover.
// Range measurements leave the original article DOM and wrapping
// entirely untouched, including italic/link children.
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
// Copy a link only if it truly occupies one
// rendered line. Multiline links keep real text.
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
// V29's useful identity faults, transplanted without its transition
// shaders. Only text nodes are wrapped; Wiki links stay clickable.
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
// All sprites are static layers with compositor-only
// transform/opacity animation. No persistent canvas or RAF.
// The soot is a side-bank haze, not a random full-screen
// spread of isolated circular clouds.
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();

// One brief spatial fault roughly every 14-36 seconds, never a
// full-screen white strobe. Pause while the iframe is hidden.
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();

// The nested preview only applies its own theme; no recursive iframe.
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='38.0';

// Easter eggs + Infobox gear are the default. No floating pill.
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
// C2-smooth cinematic ease; starts and settles with zero acceleration.
// Its midpoint stays at t=.5, preserving 00:33 / 02:39 beat alignment.
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
// V24: preload both original background photographs. The target
// image is decoded while its real-document iframe is preparing,
// reducing flashes of the bare background-color at navigation.
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
// Give the current photo first priority; then prepare the next
// world so the iframe and the eventual real page can reuse it.
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();

const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;

// Public-domain PADsynth recording, ~8.4s / 120KB. Change this
// to a same-origin Wiki-upload URL if external media are blocked.
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
// A plain media element can still play the recording when a site's
// CORS policy disallows reading the file into Web Audio.
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}

function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
// Micro-crackles: impulsive bursts with different decay times.
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
// A REAL recorded PADsynth sample; no generated wind-chimes.
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}

// Audio starts AT ITS TRANSITION SECTION, not at 00:00. Three seconds of
// crescendo accompany the fate-wheel awakening. V25's actual fire and
// particle painting remains unchanged. Music 00:33 / 02:39 now lands
// in the MIDDLE of the corresponding original V25 reveal.
const SCORE_KEY='kkpt:score-handoff:38';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
// Let the V25 fire steadily replace the red veil. Abruptly
// removing it at t=0 was the visible "turns bright" flash.
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function releaseFatePrelude(){
if(!fatePrelude)return;
const node=fatePrelude;
node.classList.add('kkpt-fate-merging');
requestAnimationFrame(()=>{if(node.isConnected)node.style.opacity='0';});
}
function fateSigilMarkup(isDark){
const point=(r,deg)=>{
const a=(deg-90)*Math.PI/180;
return [
(150+Math.cos(a)*r).toFixed(1),
(150+Math.sin(a)*r).toFixed(1)
];
};
const glyphs=Array.from({length:isDark?24:16},(_,i)=>{
const p=i/(isDark?24:16)*360;
const a=point(isDark?101:99,p);
const b=point(isDark?114:118,p);
return '<path d="M'+a.join(' ')+'L'+b.join(' ')+
'" class="kkpt-sigil-mark"/>';
}).join('');
const star=(tips,outer,inner)=>{
const pts=[];
for(let i=0;i<tips*2;i++){
pts.push(point(i%2?inner:outer,i*180/tips).join(','));
}
return pts.join(' ');
};
const darkDrawing=
'<circle class="kkpt-sigil-orbit" cx="150" cy="150" r="116"/>'+
'<circle class="kkpt-sigil-seal" cx="150" cy="150" r="90"/>'+
'<polygon class="kkpt-sigil-frame" points="'+star(3,86,40)+'"/>'+
'<polygon class="kkpt-sigil-frame kkpt-sigil-reverse" points="'+
star(3,86,40)+'"/>'+
'<path class="kkpt-sigil-eye" d="M80 150 Q150 89 220 150 Q150 211 80 150 Z"/>'+
'<circle class="kkpt-sigil-pupil" cx="150" cy="150" r="16"/>'+
'<path class="kkpt-sigil-cut" d="M68 55L230 246M232 55L67 246"/>';
const hopeDrawing=
'<circle class="kkpt-sigil-orbit" cx="150" cy="150" r="115"/>'+
'<circle class="kkpt-sigil-seal" cx="150" cy="150" r="93"/>'+
'<polygon class="kkpt-sigil-star" points="'+star(8,87,30)+'"/>'+
'<circle class="kkpt-sigil-heart" cx="150" cy="150" r="24"/>'+
'<path class="kkpt-sigil-horizon" d="M72 171Q150 110 228 171"/>'+
'<path class="kkpt-sigil-horizon" d="M86 186Q150 137 214 186"/>'+
'<circle class="kkpt-sigil-sun" cx="150" cy="150" r="8"/>';
return '<svg class="kkpt-fate-sigil '+(isDark?'kkpt-sigil-ominous':
'kkpt-sigil-hope')+'" viewBox="0 0 300 300" '+
'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'+
'<g class="kkpt-sigil-turning" fill="none" stroke="'+
(isDark?'#ff637c':'#d7f9ef')+'" stroke-width="1.7">'+glyphs+
(isDark?darkDrawing:hopeDrawing)+'</g></svg>';
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
const isDark=targetPage==='Kuronata';
prelude.className=isDark?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.style.setProperty('--kkpt-fate-dx15',((innerWidth/2-x)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dy15',((innerHeight/2-y)*.15)+'px');
prelude.style.setProperty('--kkpt-fate-dx91',((innerWidth/2-x)*.91)+'px');
prelude.style.setProperty('--kkpt-fate-dy91',((innerHeight/2-y)*.91)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-aura"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i>'+
fateSigilMarkup(isDark)+'</div>';
document.body.append(prelude);
fatePrelude=prelude;
// The new 5.5s sigil overlaps the start of the V25 curtain:
// NEVER delay 00:33/02:39 to prolong the visual spectacle.
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},5500);
}

// Actual transient analysis of the hosted Marenoia recording, 22.05 kHz
// mono / spectral-flux + low-band kick envelope. A main beat repeats
// roughly every 0.439 seconds (~137 BPM), with salient attacks near
// 31.775, 33.561, 33.751 and 34.250s. React to audio.currentTime:
// wall-clock timers would desynchronize during MP3 buffering/seeking.
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
// The fire segment only gets lightning. The pressure / dark vignette
// belongs to the AFTERMATH and survives the real page navigation.
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}

// Measured with the submitted MP3: heavy low-frequency accents repeat
// every 8 beats (~3.532 s at 135.9 BPM). Each was 1.6–2.1x the
// median low-band RMS of the seven intervening beats. Never trigger
// a full-screen pressure pump on all of the fast intermediate notes.
const AFTER_DARK_KEY='kkpt:dark-afterglow:38';
const MARENOIA_EIGHT_BEAT_KICKS=[
35.311,38.843,42.375,45.907,49.429
];
// Offline 0.25s RMS contour, normalized by the passage's 95th
// percentile. Tracks long-form dynamics without cross-origin
// WebAudio sample access (which may be forbidden by CORS).
const MARENOIA_LOUDNESS=[
.61,.71,.98,1,.85,.96,.92,.72,.57,.54,.45,.46,
.53,.54,.56,.63,.92,1,.88,.95,.94,.77,.61,.61,
.52,.41,.46,.48,.44,.50,.81,1,.92,.98,.90,.80,
.63,.58,.54,.61,.65,.67,.65,.69,.83,1,.90,.93,
.94,.81,.65,.65,.66,.65,.62,.64,.60,.58,.70,1,
.91,.90,.95,.83,.62,.58,.46,.54,.47,.57,.55,.63
];
function marenoiaLoudness(time){
const pos=Math.max(0,Math.min(MARENOIA_LOUDNESS.length-1,
(time-34.75)*4));
const i=Math.floor(pos),j=Math.min(MARENOIA_LOUDNESS.length-1,i+1);
return MARENOIA_LOUDNESS[i]*(1-(pos-i))+
MARENOIA_LOUDNESS[j]*(pos-i);
}
function marenoiaDeepPulse(age){
// A 420ms inhale, 300ms hold and ~2.2s heavy exhale.
// One pressure wave per eight beats, not a rapid heartbeat.
if(age<0||age>=2.98)return 0;
if(age<.42)return smooth(age/.42);
if(age<.72)return 1;
return 1-smooth((age-.72)/2.26);
}
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>';
document.body.append(layer);
let live=true,raf=0,lastTick=0,source=null,lastKick=-100;
let smoothPressure=0,index=0;
const quiet=()=>{
layer.style.setProperty('--kkpt-beat-dark','.24');
layer.style.setProperty('--kkpt-beat-scale','1.065');
layer.style.setProperty('--kkpt-beat-glitch','.028');
layer.style.setProperty('--kkpt-beat-shear','0px');
};
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<38)return;
const dt=Math.min(.12,Math.max(.038,(now-lastTick)/1000));
lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;cancelAnimationFrame(raf);
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_EIGHT_BEAT_KICKS.length&&
MARENOIA_EIGHT_BEAT_KICKS[index]<=audioTime){
lastKick=MARENOIA_EIGHT_BEAT_KICKS[index++];
}
// The recording's actual loudness and 18s player fade BOTH
// attenuate the pump as the music settles down.
const actualGain=Number(source.audio.volume);
const playerGain=Number.isFinite(actualGain)
? Math.max(0,Math.min(1,actualGain/.78)):1;
const soundStrength=(.48+.52*marenoiaLoudness(audioTime))*
playerGain;
const targetPressure=marenoiaDeepPulse(audioTime-lastKick)*
soundStrength;
const follow=1-Math.exp(-dt/.21);
smoothPressure+=(targetPressure-smoothPressure)*follow;
const pressure=smoothPressure;
layer.style.setProperty('--kkpt-beat-dark',
(.24+.39*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-scale',
(1.065-.130*pressure).toFixed(4));
layer.style.setProperty('--kkpt-beat-glitch',
(.028+.19*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-shear',
(Math.sin(index*1.47)*pressure*3.5).toFixed(2)+'px');
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
if(live){cancelAnimationFrame(raf);}
live=true;lastTick=0;lastKick=-100;smoothPressure=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;cancelAnimationFrame(raf);
layer.classList.add('kkpt-beat-idle');quiet();
},
dispose(){
source=null;live=false;cancelAnimationFrame(raf);
layer.remove();kuronataAftermath=null;
}
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createRebirthVisual(){
// Hope replaces ash: a barely perceptible rainbow after the rain.
// No numbered / nested six-band rainbow; just one diffuse halo.
// All are compositor layers; nothing is rasterized on every frame.
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
audio.volume=.78*Math.min(fadeIn,fadeOut);
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
// Seek straight into the selected three-second transition prelude.
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
// A stalled soundtrack cannot trap navigation indefinitely.
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,75);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:38
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==38||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
// The only fallback is the SAME small icon, no audio popup.
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}

let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';

function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}

function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}

// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}

function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}

function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const observer = new MutationObserver(() => {
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
decoratePortalLinks(doc,targetPage);
},120);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}

function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}

function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}

function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
// Both directions start playback during the trusted user gesture.
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}

// The Infobox gear begins to turn before the actual world changes.
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
setTimeout(()=>{
gearPending=false;
requestSwap(nextActive);
},2020);
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}

function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}

function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
// The fate wheel stays inside the native Infobox caption, but is
// positioned independently: it must NEVER push the title off-center.
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
// A native button cannot be mistaken for an article link by
// MediaWiki Popups, including in previews loaded into iframes.
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);

// Fixed corner placement: no title measurements, ResizeObserver
// or reflow during the animation.
}

// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}

function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}

async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}

function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
// The preview exists only for the animated reveal. Pausing
// its hidden ambience avoids doubling ongoing render work.
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;

// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the temporary preview.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);

doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}

function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
// Load all resources in advance, but don't composite the hidden
// full-screen Wiki until its first transition frame.
frame.style.visibility = 'hidden';

loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});

warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}

// Shared, low-resolution atmospherics: return of V14's dark smoke,
// long-lived torn paper, shockwaves, blue-white petals and pollen.
// Only the combustion CURTAIN is replaced by the bright V2 engine.
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
// V2-inspired white-hot additive sprites, but with noise-eroded
// silhouettes instead of repetitive smooth, elliptical balls.
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
// V25: the profiler found one 270ms long task here. Build the
// EXACT SAME 17 textures in separate tasks, never all at once.
// The stable noise cache avoids repeating the costly sin hash.
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
// Normally prewarming is already complete before a user clicks.
// The fallback also works if an animation is started immediately.
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
// More long-lived sparks than V25, far below V31's 370/s.
// Blue petals are softer/less dense: fewer layers noticeably
// reduce reverse-direction Canvas work without touching fire.
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
// Unlike the traveling front, these black smoke plumes
// are born in world-space and remain over burnt paper.
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
// Charcoal sheets tear off in irregular polygons, not
// squares or narrow glitch streaks.
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
// Dawn uses soft-focus sprites, so 0.45 is visually sufficient.
// This cuts ~33% of full-screen pixels compared with 0.55.
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
// New-world side: red fire trails to the right when burning,
// blue dawn trails to the left when returning.
const direction=dark?1:-1;
// Broken smoke banks with different depths and sizes. The old
// aligned rows created an artificial horizontal fog ribbon.
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// Residual devastation: coal-black plumes stay pinned to their
// original burn positions, expanding long after the tear passes.
// Composited *before* fire, so the hot core cuts through smoke.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
// The inverse is a slow, organic unfurling: broad milky
// radiance behind the rebuilt sky, not a cold explosion.
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Only combustion throws straight, fiery projectile trails.
// Return-to-blue has no streaks or sparks whatsoever.
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Real flame tongues break OUT of the burn front into the sky.
// They are thin, tapered Bezier ribbons with an unstable pulse,
// rather than round glowing particles or a uniform bright line.
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}

// Carbonized paper has a fine, ragged edge. The charcoal layer
// persists continuously, but the white-hot core does NOT.
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
// Intermittent ignition cells: varying width/color/intensity
// make the bright edge resemble burning fibres, not neon.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
// Fragmented ignition on real microscopic perforations.
// Missing arc sections stop them resembling punched circles.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
// Small carbon flecks stick to the still-blue paper just
// ahead of the bite; no large rectangular glitch debris.
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
// The key property V3-V6 lost: particles remain at their
// birth position while the front advances. A wide, incandescent
// WAKE builds behind the tearing page instead of following
// it as one thin, plastic-looking stripe.
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
// Rebirth uses soft, rotating, organic leaf/petal silhouettes,
// minute circular pollen and spacious white-blue bokeh. No
// rectangular ions, no warm textures and NO glowing streaks.
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
// Reuse the cached soft sprite; a fresh radial
// gradient for every pollen mote per frame was costly.
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
// Minute black flecks, never rectangular shards on the blue side.
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
// Irregular burnt page sections tumble away and reveal their
// blackened underside, with an occasional incandescent rim.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
// Thin blue-white unburnt fibers still visible on a
// few ripped faces, before the back chars completely.
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
// Sharp, directional embers / crystalline fragments, not blobs.
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}

let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
// Exactly one texture per task: no more 270ms blocking call.
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
setTimeout(step,24);
}
setTimeout(step,40);
});
return atmosphereWarmPromise;
}

let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}

// Original V2's moving flame sprites and three bright contours, rebuilt
// with bounded particle counts. No WebGL, no full-screen noise pass,
// no 1,000-point polygon or per-frame image-texture upload.
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}

// V2's simple advancing boundary. The reader asked for the
// vibrant fire curtain, not a mathematically fractal tearing wire.
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}

// GPU-only ember flecks: ONE small draw call at most 30fps.
// The white-hot V25 fire, the smoke and the dawn stay unmodified 2D.
// No fullscreen pixel shader, FBM, flame quads or cyan rectangle.
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}

// Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}

function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}

const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
let lastClip=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();

// Dense GOLD / WHITE rolling fire, including on both sides
// of the border. These are the luminous shapes from V2.
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
// Both original V25 curtains follow their OWN song cue clock.
// Framerate drops cannot move 00:33 / 02:39 off the midpoints.
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
// Clip-path polygon reconstruction can cause expensive iframe
// compositor work. It runs at a bounded rate independent of rAF.
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
const clipStep=dark?(mobile?33:23):(mobile?43:34);
if(now-lastClip>=clipStep||t>=1){
clipFrame(edge);
lastClip=now;
}
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
// Restore V14's broad smoke banks, long-lived char, pressure
// waves and delicate blue leaves. V2 only paints the FIRE.
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}

function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
// Stop the invisible Kuronata ambience in either document.
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}

async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
const loadWait=score?13000:11000;
const ok=await Promise.race([loading,sleep(loadWait)
.then(()=>false)]);
if(!ok||!ready){
// Preserve the audio cue even if the iframe preview is unavailable.
if(score&&await score.playPromise){
await awaitScoreTime(score,score.config.fireEnd);
}
removeScoreOmen();
clearFatePrelude();
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(score);
navigateRealPage(nextActive?otherUrl.href:baseUrl);return;
}
// Finish the incremental prewarm before opening the curtain.
await prewarmAtmosphere();
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
if(!started||!await awaitScoreTime(score,
score.config.fireStart)){
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
}
removeScoreOmen();
releaseFatePrelude();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
// Give the now-visible destination its own first composited frame.
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));

labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
// When returning to the blue page, force the Day palette
// BEFORE unmasking it. The dark iframe still fully covers it.
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;

const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
await new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));

setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.dispose();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
// The last frame holds living smoke and drifting fragments.
// Let it disperse with a lightweight compositor fade AFTER the
// destination is revealed; no costly extra canvas render loop.
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// The iframe was only the moving scenery during the reveal.
// Hand off to the ACTUAL Wiki page: native sidebars, scrollbar,
// history, refresh, accessibility and links all work normally.
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}

function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V38:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}

function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
mountKuronataAftermath(returnScore);
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();

button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}

// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] uses the same transition, then real navigation.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});

// Browser history is now real document history. A bfcache return
// must restore THIS document, not leave its animated preview visible.
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered)mountKuronataAftermath(returnScore);
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());

MediaWiki:KuranokaPageTransition.css

2026-10-24T07:46:37Z

KK：

/* Kuranoka Page Transition V38 — 8-beat pressure + themed fate circles
Load only on /wiki/Kuranoka and /wiki/Kuronata.
No Citizen.css / Common.css changes. */

:root { --kkpt-css-v38: ready; }

/* One icon, no track title, timer, skip menu or resume popup. */
#kkpt-audio-toggle {
position: fixed !important;
z-index: 2147482950 !important;
left: clamp(18px,3vw,43px) !important;
bottom: clamp(15px,3vh,30px) !important;
width: 43px;
height: 43px;
display: grid !important;
place-items: center;
padding: 0;
box-sizing: border-box;
color: #eaf6ff !important;
background: rgba(9,17,29,.72) !important;
border: 1px solid rgba(185,214,249,.42) !important;
border-radius: 50% !important;
box-shadow: 0 5px 19px #02040ba0,0 0 12px #b8dffb20;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform .16s ease,box-shadow .16s ease;
}
#kkpt-audio-toggle svg {width:22px;height:22px;display:block;pointer-events:none}
#kkpt-audio-toggle:hover {transform:scale(1.075)}
#kkpt-audio-toggle:focus-visible {outline:2px solid #bfe5ff;outline-offset:3px}
#kkpt-audio-toggle.kkpt-audio-needs-resume {
color:#fff !important;
border-color:#91d8ff !important;
box-shadow:0 0 16px #8fd9ff78,0 5px 19px #02040ba0;
}

/* Three seconds of cinematic omen. V25 draws the real fire curtain. */
#kkpt-omen {
position:fixed !important;
inset:0 !important;
z-index:2147480900 !important;
overflow:hidden !important;
pointer-events:none !important;
isolation:isolate;
background:linear-gradient(130deg,rgba(34,0,9,.03),rgba(91,0,15,.42)),
radial-gradient(ellipse at 50% 100%,rgba(131,0,14,.30),transparent 68%);
opacity:0;
animation:kkpt-omen-tension 3s linear both;
}
#kkpt-omen .kkpt-omen-glow {
position:absolute;
inset:-15%;
display:block;
background:radial-gradient(ellipse at 55% 105%,rgba(243,46,25,.19),transparent 55%),
linear-gradient(145deg,transparent 36%,rgba(90,0,20,.09) 58%,transparent 76%);
animation:kkpt-omen-drift 13s ease-in-out infinite alternate;
}
#kkpt-omen .kkpt-omen-line {
position:absolute;
inset:0;
display:block;
opacity:.23;
background:repeating-linear-gradient(0deg,transparent 0 6px,
rgba(230,42,49,.10) 7px,transparent 8px);
animation:kkpt-omen-scan 19s steps(8,end) infinite;
}
@keyframes kkpt-omen-tension {
0%{opacity:.02}
25%{opacity:.11}
53%{opacity:.25}
80%{opacity:.45}
100%{opacity:.75}
}
@keyframes kkpt-omen-drift {
from{transform:translate3d(-1.5%,0,0) scale(1.02)}
to{transform:translate3d(2%,-2%,0) scale(1.1)}
}
@keyframes kkpt-omen-scan {
from{transform:translate3d(0,-2.3%,0)}
to{transform:translate3d(0,2.3%,0)}
}
#kkpt-omen.kkpt-omen-closing {
animation:none !important;
transition:opacity 1420ms ease-out !important;
}
@media (prefers-reduced-motion:reduce){#kkpt-omen{display:none !important}}

/* Fate summoning. A 5.5s atmospheric sigil overlaps 2.5 seconds of
V25's original fire, without changing the music's 3s prelude cue. */
#kkpt-fate-prelude {
--kkpt-fate-color:rgba(254,75,93,.91);
--kkpt-fate-halo:rgba(228,18,64,.31);
position:fixed !important;
inset:0 !important;
z-index:2147481400 !important;
pointer-events:none !important;
overflow:hidden !important;
contain:layout style paint;
opacity:1;
transition:opacity 2400ms cubic-bezier(.17,.65,.32,1);
}
#kkpt-fate-prelude.kkpt-fate-light {
--kkpt-fate-color:rgba(218,251,244,.94);
--kkpt-fate-halo:rgba(104,225,255,.26);
}
#kkpt-fate-prelude.kkpt-fate-merging {opacity:0}
#kkpt-fate-prelude::after {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 280px at var(--kkpt-fate-x) var(--kkpt-fate-y),
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-pressure 5.3s ease-in-out both;
}
#kkpt-fate-prelude::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle 380px at 50% 50%,
var(--kkpt-fate-halo),transparent 100%);
opacity:0;
animation:kkpt-fate-center-arrival 5.3s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-orbit {
position:absolute;
left:var(--kkpt-fate-x);
top:var(--kkpt-fate-y);
width:0;height:0;
pointer-events:none;
transform-origin:0 0;
will-change:transform;
animation:kkpt-fate-orbit-journey 5.15s cubic-bezier(.17,.7,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-orbit > i {
display:block;
position:absolute;
left:0;
top:0;
box-sizing:border-box;
transform-origin:center;
pointer-events:none;
will-change:transform,opacity;
}
#kkpt-fate-prelude .kkpt-fate-ring {
width:205px;
height:205px;
margin:-102.5px 0 0 -102.5px;
border-radius:50%;
border:1px solid var(--kkpt-fate-color);
box-shadow:inset 0 0 12px var(--kkpt-fate-halo),
0 0 18px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-ring-expansion 4.9s cubic-bezier(.16,.69,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-ring-b {
animation-delay:.46s;
animation-duration:4.45s;
border-style:dashed;
}
#kkpt-fate-prelude .kkpt-fate-arc {
width:265px;
height:265px;
margin:-132.5px 0 0 -132.5px;
border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 30deg,
var(--kkpt-fate-color) 35deg 45deg,transparent 48deg 115deg,
var(--kkpt-fate-color) 123deg 131deg,transparent 137deg 227deg,
var(--kkpt-fate-color) 233deg 242deg,transparent 247deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
mask:radial-gradient(circle,transparent 0 49%,#000 54% 58%,transparent 66%);
animation:kkpt-fate-arc-spin 5.15s cubic-bezier(.15,.3,.16,1) both;
}
#kkpt-fate-prelude .kkpt-fate-spark {
width:255px;
height:255px;
margin:-127.5px 0 0 -127.5px;
border-radius:50%;
background:repeating-conic-gradient(from 12deg,transparent 0 32deg,
var(--kkpt-fate-color) 33deg 34deg,transparent 35deg 60deg);
-webkit-mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
mask:radial-gradient(circle,transparent 0 42%,#000 47% 57%,transparent 69%);
animation:kkpt-fate-arc-spin 5.1s reverse ease-out both;
}
#kkpt-fate-prelude .kkpt-fate-wave {
width:300px;
height:300px;
margin:-150px 0 0 -150px;
border:2px solid var(--kkpt-fate-color);
border-radius:50%;
box-shadow:0 0 24px 4px var(--kkpt-fate-halo),
inset 0 0 28px var(--kkpt-fate-halo);
opacity:0;
animation:kkpt-fate-wave-strike 5.05s cubic-bezier(.14,.77,.29,1) both;
}
#kkpt-fate-prelude .kkpt-fate-aura {
width:470px;height:470px;
margin:-235px 0 0 -235px;
border-radius:50%;
background:radial-gradient(circle,
rgba(91,0,24,.36),rgba(47,0,17,.25) 26%,
rgba(146,7,45,.09) 50%,transparent 72%);
opacity:0;
animation:kkpt-fate-aura-bloom 5.1s ease-in-out both;
}
#kkpt-fate-prelude.kkpt-fate-light .kkpt-fate-aura {
background:radial-gradient(circle,rgba(255,248,208,.14),
rgba(170,240,255,.15) 29%,rgba(104,218,254,.06) 51%,
transparent 76%);
}
#kkpt-fate-prelude .kkpt-fate-sigil {
position:absolute;
left:0;top:0;
width:336px;height:336px;
overflow:visible;
pointer-events:none;
color:var(--kkpt-fate-color);
transform:translate(-50%,-50%);
opacity:0;
filter:drop-shadow(0 0 8px var(--kkpt-fate-halo));
animation:kkpt-fate-sigil-manifest 5.1s ease-in-out both;
}
#kkpt-fate-prelude .kkpt-fate-sigil :is(path,polygon,circle) {
vector-effect:non-scaling-stroke;
stroke:currentColor;
stroke-width:1.45px;
fill:none;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-turning {
transform-origin:150px 150px;
animation:kkpt-fate-sigil-counterturn 5.1s cubic-bezier(.16,.6,.26,1) both;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-mark {
stroke-width:2.1px;
opacity:.66;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-orbit {
stroke-dasharray:3 12;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-fate-sigil .kkpt-sigil-seal {
stroke-width:1.8px;
stroke-dasharray:130 14 20 14;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-eye {
fill:rgba(113,0,33,.28);
stroke:#ffb2b8;
stroke-width:2.6px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-pupil {
fill:rgba(38,0,15,.89);
stroke:#ff98aa;
stroke-width:4px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-cut {
stroke:rgba(248,37,77,.40);
stroke-width:1.3px;
}
#kkpt-fate-prelude .kkpt-sigil-ominous .kkpt-sigil-reverse {
transform-origin:150px 150px;
transform:rotate(180deg);
opacity:.67;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-star {
fill:rgba(214,251,248,.11);
stroke:#fff7d4;
stroke-width:2.2px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-heart {
stroke:#bcefff;
stroke-width:3px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-horizon {
stroke:rgba(255,247,204,.72);
stroke-width:1.6px;
}
#kkpt-fate-prelude .kkpt-sigil-hope .kkpt-sigil-sun {
fill:rgba(255,251,209,.70);
stroke:#fff;
stroke-width:1.4px;
}
@keyframes kkpt-fate-ring-expansion {
0%{opacity:0;transform:scale(.22) rotate(-20deg)}
18%{opacity:.8}
56%{opacity:.48}
83%{opacity:.25}
100%{opacity:0;transform:scale(2.75) rotate(155deg)}
}
@keyframes kkpt-fate-arc-spin {
0%{opacity:0;transform:scale(.32) rotate(0deg)}
18%{opacity:.71}
65%{opacity:.62}
100%{opacity:0;transform:scale(1.75) rotate(1080deg)}
}
@keyframes kkpt-fate-pressure {
0%{opacity:0}
24%{opacity:.5}
65%{opacity:.82}
100%{opacity:0}
}
@keyframes kkpt-fate-center-arrival {
0%,28%{opacity:0}
58%{opacity:.46}
70%{opacity:.53}
100%{opacity:0}
}
@keyframes kkpt-fate-orbit-journey {
0%,7%{transform:translate3d(0,0,0) scale(.56) rotate(-16deg)}
26%{transform:translate3d(
var(--kkpt-fate-dx15),
var(--kkpt-fate-dy15),0) scale(.85) rotate(40deg)}
56%{transform:translate3d(
var(--kkpt-fate-dx91),
var(--kkpt-fate-dy91),0) scale(1.26) rotate(176deg)}
69%{transform:translate3d(
var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.50) rotate(229deg)}
100%{transform:translate3d(
var(--kkpt-fate-dx),
var(--kkpt-fate-dy),0) scale(1.53) rotate(335deg)}
}
@keyframes kkpt-fate-wave-strike {
0%,10%{opacity:0;transform:scale(.18) rotate(-35deg)}
27%{opacity:.72;transform:scale(.56) rotate(36deg)}
35%{opacity:.20}
50%{opacity:.66;transform:scale(.99) rotate(91deg)}
65%{opacity:.22}
78%{opacity:.42;transform:scale(1.80) rotate(180deg)}
100%{opacity:0;transform:scale(2.9) rotate(320deg)}
}
@keyframes kkpt-fate-aura-bloom {
0%,12%{opacity:0;transform:scale(.1)}
32%{opacity:.68;transform:scale(.64)}
63%{opacity:.89;transform:scale(1.04)}
83%{opacity:.61}
100%{opacity:0;transform:scale(1.75)}
}
@keyframes kkpt-fate-sigil-manifest {
0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.47)}
27%{opacity:.81}
57%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
77%{opacity:.91}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.13)}
}
@keyframes kkpt-fate-sigil-counterturn {
from{transform:rotate(0deg)}
to{transform:rotate(-570deg)}
}
@media (prefers-reduced-motion:reduce){#kkpt-fate-prelude{display:none !important}}

/* AFTERMATH ONLY. The eight-beat (~3.53s) bass accents create a slow
0.42s contraction / 2.26s release in the vignette lens. The dark page
persists after native navigation, but its ARTICLE is never scaled. */
#kkpt-beat-scene {
--kkpt-beat-dark:.24;
--kkpt-beat-scale:1.065;
--kkpt-beat-glitch:.028;
--kkpt-beat-shear:0px;
position:fixed !important;
inset:0 !important;
/* Heartbeat vignette must be visible over the fire as well; its
transparent center keeps the original V25 flame incandescent. */
z-index:2147482120 !important;
pointer-events:none !important;
overflow:hidden !important;
isolation:isolate;
contain:layout style paint;
transition:opacity 680ms ease-out;
}
#kkpt-beat-scene.kkpt-beat-after {
animation:kkpt-dark-aftermath-arrive 850ms ease-out both;
}
@keyframes kkpt-dark-aftermath-arrive {
0%{opacity:0}
100%{opacity:1}
}
#kkpt-beat-scene .kkpt-beat-lens {
position:absolute;
inset:-7%;
background:radial-gradient(ellipse at 50% 48%,transparent 30%,
rgba(9,0,10,.32) 63%,rgba(0,0,6,.89) 100%);
opacity:var(--kkpt-beat-dark);
transform:scale(var(--kkpt-beat-scale));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-fringe {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(var(--kkpt-beat-shear),0,0);
background:linear-gradient(94deg,rgba(252,23,65,.47),transparent 13%,
transparent 86%,rgba(39,207,244,.36));
will-change:opacity,transform;
}
#kkpt-beat-scene .kkpt-beat-rupture {
position:absolute;
inset:0;
opacity:var(--kkpt-beat-glitch);
transform:translate3d(calc(var(--kkpt-beat-shear) * -.7),0,0);
background:repeating-linear-gradient(177deg,
transparent 0 10px,rgba(245,20,65,.38) 11px,
rgba(27,10,30,.19) 12px,transparent 13px 31px);
clip-path:polygon(0 13%,100% 12.1%,100% 13.7%,0 14.4%,
0 46%,100% 45.3%,100% 47%,0 47.8%,
0 77%,100% 76.5%,100% 78.2%,0 79%);
}
#kkpt-beat-scene.kkpt-beat-outro {opacity:0}
#kkpt-beat-scene.kkpt-beat-idle .kkpt-beat-rupture {
animation:kkpt-aftermath-static-glitch 9s steps(1,end) infinite;
}
@keyframes kkpt-aftermath-static-glitch {
0%,13%,15%,48%,50%,78%,80%,100%{opacity:.028}
14%,49%,79%{opacity:.14;transform:translate3d(-3px,0,0)}
}
#kkpt-lightning-layer {
position:fixed !important;
inset:0 !important;
z-index:2147482130 !important;
pointer-events:none !important;
overflow:hidden !important;
}
#kkpt-lightning-layer .kkpt-storm-bolt {
position:absolute;
inset:0;
display:block;
width:100%;height:100%;
overflow:visible;
pointer-events:none;
animation:kkpt-lightning-attack 360ms steps(1,end) both;
}
#kkpt-lightning-layer .kkpt-storm-bolt path {fill:none;stroke-linecap:round;stroke-linejoin:bevel}
.kkpt-storm-bolt .kkpt-bolt-haze {
stroke:#748dff;stroke-width:12px;opacity:.18;
}
.kkpt-storm-bolt .kkpt-bolt-core {
stroke:#e7faff;stroke-width:2.5px;opacity:.96;
}
.kkpt-storm-bolt .kkpt-bolt-branch {
stroke:#a9e7ff;stroke-width:1.4px;opacity:.68;
}
@keyframes kkpt-lightning-attack {
0%{opacity:0}
11%{opacity:1}
25%{opacity:.1}
39%{opacity:.77}
64%{opacity:.24}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce) {
#kkpt-beat-scene .kkpt-beat-rupture {animation:none !important}
}

/* Blue-world recovery. Fog gives way to receding rain, restrained pastel
rainbow arcs and a small field of floating essence — no white-screen flash. */
#kkpt-rebirth-visual {
position:fixed !important;
inset:0 !important;
/* Above falling smoke, below the bright V25 blue recovery edge. */
z-index:2147482070 !important;
pointer-events:none !important;
overflow:hidden !important;
opacity:1;
contain:layout style paint;
transition:opacity 1050ms ease-out;
}
#kkpt-rebirth-visual.kkpt-rebirth-finish {opacity:0}
#kkpt-rebirth-visual .kkpt-rebirth-rain {
position:absolute;
inset:0;
background:repeating-linear-gradient(107deg,
transparent 0 26px,rgba(183,221,255,.20) 27px,
transparent 28px 61px);
transform:translate3d(-8px,5px,0);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-sunlight {
position:absolute;
inset:0;
background:radial-gradient(ellipse at 37% 21%,
rgba(220,251,255,.30),rgba(150,207,255,.12) 31%,transparent 72%);
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-rainbow {
position:absolute;
inset:0;
width:100%;height:100%;
pointer-events:none;
overflow:visible;
mix-blend-mode:screen;
filter:blur(3px);
}
#kkpt-rebirth-visual .kkpt-rebirth-essence {
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
}
#kkpt-rebirth-visual .kkpt-rebirth-mote {
position:absolute;
width:4px;height:4px;
border-radius:50%;
background:rgba(244,255,255,.86);
box-shadow:0 0 7px 1px rgba(181,241,255,.46);
animation:kkpt-rebirth-float 3s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes kkpt-rebirth-float {
0%,100%{opacity:0;transform:translate3d(-12px,23px,0) scale(.55)}
22%{opacity:.68}
58%{opacity:.92;transform:translate3d(7px,-27px,0) scale(1.3)}
82%{opacity:.44}
}
@media (prefers-reduced-motion:reduce){#kkpt-rebirth-visual .kkpt-rebirth-mote{animation:none}}

#kkpt-toggle {
--kkpt-tone: #a7e7ff;
--kkpt-panel: rgba(7,28,49,.87);
position: fixed;
z-index: 2147483000;
right: clamp(12px,2.3vw,34px);
bottom: clamp(14px,3.4vh,34px);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 24px);
box-sizing: border-box;
padding: 12px 17px;
border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
border-radius: 999px;
background: var(--kkpt-panel);
box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
color: #f1fcff !important;
font: 650 13px/1.3 system-ui,sans-serif;
letter-spacing: .045em;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
transition: transform .22s,box-shadow .22s,opacity .22s;
}

/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
#kkpt-toggle[hidden] {display:none !important}

#kkpt-toggle.kkpt-dark {
--kkpt-tone: #ff6b7e;
--kkpt-panel: rgba(41,4,14,.88);
color: #fff1f1 !important;
}

#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
transform: translateY(-3px);
box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}

#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}

/* Real interactive Wiki page, retained after the transition finishes. */
#kkpt-preview {
position: fixed !important;
z-index: 2147481000 !important;
inset: 0 !important;
display: block !important;
box-sizing: border-box !important;
width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
clip-path: inset(0 0 0 100%);
pointer-events: none !important;
background: #1f0710;
transform: translateZ(0);
will-change: clip-path;
}

body.page-Kuronata #kkpt-preview {background: #c0eafe}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
/* Don't reserve a full-screen animated compositor layer for a hidden iframe. */
#kkpt-preview:not(.kkpt-active):not(.kkpt-animating) {
will-change: auto;
}

/* Atmosphere remains independent of the flame: drifting smoke,
scattered pages, shockwaves, and blue-white leaves from V14. */
#kkpt-atmosphere {
position: fixed !important;
z-index: 2147482000 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 160ms linear;
}

/* A small GPU ember overlay; no fullscreen WebGL flames or light curtains. */
#kkpt-webgl {
position: fixed !important;
z-index: 2147482050 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
background: transparent !important;
}

/* V2's incandescent curtain sits ABOVE the dark smoke bank. */
#kkpt-vfx {
position: fixed !important;
z-index: 2147482100 !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
transition: opacity 150ms linear;
}

/* MediaWiki portal links are normal links until hovered/focused. */
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
--kkpt-fringe: #ff4662;
--kkpt-halo: rgba(244,19,51,.30);
/* Never change inline flow, line breaks or Infobox link dimensions. */
position: relative;
isolation: isolate;
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
--kkpt-fringe: #55e5ff;
--kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
color: var(--kkpt-fringe) !important;
text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
0 0 11px var(--kkpt-halo);
animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
position: absolute;
inset: 0;
z-index: 1;
display: block;
opacity: 0;
content: attr(data-kkpt-text);
color: var(--kkpt-fringe);
line-height: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: none;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
opacity: .90;
text-shadow: -2px 0 #fa345c;
animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
opacity: .80;
color: #8af5ff;
text-shadow: 2px 0 #39a7ff;
animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
0%,12%,40%,72%,100% {transform:translate(0)}
13% {transform:translate(1px,-1px)}
15% {transform:translate(-1px,0)}
42% {transform:translate(2px,0)}
44% {transform:translate(0)}
73% {transform:translate(-1px,1px)}
75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}

/* Pure overlay: NO styles or markup changes to native Infobox/caption. */
.kkpt-fate-gear {
--kkpt-gear-ink: #f2feff;
--kkpt-gear-halo: rgba(58,175,220,.42);
appearance: none;
-webkit-appearance: none;
font: inherit;
position: absolute !important;
z-index: 2147481100;
box-sizing: border-box;
top: 0;
left: 0;
width: 42px;
height: 42px;
display: grid !important;
place-items: center;
padding: 7px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.57);
background: rgba(15,91,142,.15);
box-shadow: inset 0 0 9px rgba(255,255,255,.18),
0 0 11px var(--kkpt-gear-halo);
color: var(--kkpt-gear-ink) !important;
text-decoration: none !important;
cursor: pointer;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: background .25s,box-shadow .25s,border-color .25s;
}

.kkpt-fate-gear[hidden] {display:none !important}

body.kkpt-other-active > .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}
body.page-Kuronata .kkpt-fate-gear {
--kkpt-gear-ink: #ffe7ec;
--kkpt-gear-halo: rgba(245,58,82,.43);
background: rgba(87,11,28,.38);
}

.kkpt-fate-gear:hover,
.kkpt-fate-gear:focus-visible {
border-color: #fff;
background: rgba(255,255,255,.15);
box-shadow: inset 0 0 10px rgba(255,255,255,.22),
0 0 24px var(--kkpt-gear-halo);
}

.kkpt-fate-gear:focus-visible {outline: 2px solid #fff;outline-offset: 3px}

.kkpt-fate-gear .kkpt-fate-gear-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 4px var(--kkpt-gear-halo));
transform-origin: center;
}
.kkpt-fate-gear-svg path {fill: currentColor}
.kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(20,71,111,.45);
stroke: currentColor;
stroke-width: 1.2;
}
.kkpt-fate-gear-svg circle:last-of-type {fill:currentColor}

.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation: kkpt-fate-rotation 3.85s cubic-bezier(.19,.69,.25,1) both;
}
.kkpt-fate-gear::after {
position: absolute;
inset: -8px;
border: 1px dashed var(--kkpt-gear-ink);
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
transform: scale(.72);
}
.kkpt-fate-gear-turning::after {
animation: kkpt-fate-ripple 1.15s ease-out both;
}
@keyframes kkpt-fate-rotation {
0% {transform:rotate(0deg)}
18% {transform:rotate(108deg)}
57% {transform:rotate(594deg)}
100% {transform:rotate(1080deg)}
}
@keyframes kkpt-fate-ripple {
0% {opacity:0;transform:scale(.75) rotate(0deg)}
20% {opacity:.85}
100% {opacity:0;transform:scale(1.7) rotate(100deg)}
}

/* ==================================================================
In-article FORM SWITCH: plain [[Kuronata|...]] / [[Kuranoka|...]].
Place beside or inside an Infobox; no loader changes or inline JS.
================================================================== */
.mw-parser-output .kkpt-form-switch,
#mw-content-text .kkpt-form-switch {
--kkpt-switch-tone: #58cfff;
--kkpt-switch-ink: #e9faff;
--kkpt-switch-background: rgba(9,36,61,.91);
display: table;
width: max-content;
max-width: min(100%,320px);
margin: .65em 0 1em;
border-radius: 14px;
isolation: isolate;
}

/* Respect any old in-article switch wikitext: never hide user content.
Delete its wikitext manually if you prefer only the fate gear. */

/* After a right-floated Infobox, the switch floats alongside it when
space allows; otherwise it falls below the box on narrow screens. */
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: right;
clear: none;
margin: .35em .8em 1em .5em;
}
.mw-parser-output .kkpt-form-switch--under,
#mw-content-text .kkpt-form-switch--under {
float: right;
clear: right;
}

body.page-Kuronata .kkpt-form-switch {
--kkpt-switch-tone: #ff6279;
--kkpt-switch-ink: #fff1f0;
--kkpt-switch-background: rgba(47,7,19,.94);
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link,
.mw-parser-output .kkpt-form-switch > a,
#mw-content-text .kkpt-form-switch > a {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
width: 100%;
max-width: 320px;
padding: 11px 19px;
border: 1px solid color-mix(in srgb,var(--kkpt-switch-tone) 73%,transparent);
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb,var(--kkpt-switch-tone) 15%,transparent),
transparent 50%),var(--kkpt-switch-background);
box-shadow: 0 4px 18px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.12),
0 0 16px color-mix(in srgb,var(--kkpt-switch-tone) 20%,transparent);
color: var(--kkpt-switch-ink) !important;
text-align: center;
font: 700 12.5px/1.45 system-ui,sans-serif;
letter-spacing: .075em;
text-decoration: none !important;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s,box-shadow .22s,border-color .22s;
}

#mw-content-text .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link:is(:hover,:focus-visible) {
color: #fff !important;
transform: translateY(-2px);
border-color: #f5ffff;
box-shadow: 0 6px 24px rgba(0,0,0,.42),
0 0 22px color-mix(in srgb,var(--kkpt-switch-tone) 55%,transparent);
}

/* Keep the hidden second copy of the text inside the button's padding,
so the hover glitch doesn't spill past the rounded silhouette. */
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::before,
#mw-content-text .kkpt-form-switch a.kkpt-portal-link::after,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::before,
.mw-parser-output .kkpt-form-switch a.kkpt-portal-link::after {
inset: 11px 19px;
text-align: center;
}

@media (max-width: 670px) {
.mw-parser-output .kkpt-form-switch--beside,
#mw-content-text .kkpt-form-switch--beside {
float: none;
clear: both;
margin: .75em 0;
}
}

@media (max-width: 600px) {
#kkpt-toggle {padding: 10px 13px;gap: 8px}
#kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
#kkpt-toggle {transition:none !important}
#kkpt-vfx,#kkpt-atmosphere {display:none !important}
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {animation:none !important}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg,
.kkpt-fate-gear-turning::after {animation:none !important}
}

/* ==============================================================
KURONATA ONLY — Crimson Night
Never targets Kuranoka or any other article. Keep native layout.
JS opts just the Kuronata document into Citizen's night palette;
these scoped values also cover a preview iframe before JS runs.
============================================================== */

html.kkpt-kuronata-dark,
body.page-Kuronata {
color-scheme: dark;
--color-base: #f1e8eb;
--color-emphasized: #fff4f5;
--color-subtle: #d5b7c0;
--color-link: #ffb8c4;
--color-progressive-oklch__h: 19;
--color-progressive-hsl__h: 351;
--color-surface-1: rgba(28, 15, 20, .94);
--color-surface-2: rgba(42, 20, 28, .90);
--color-surface-3: rgba(63, 26, 37, .90);
--color-surface-4: rgba(84, 29, 45, .90);
}

/* Preserve the storm background and glass, only recolor the foreground. */
body.page-Kuronata,
body.page-Kuronata .citizen-page-container,
body.page-Kuronata .citizen-body-container,
body.page-Kuronata .mw-parser-output,
body.page-Kuronata #mw-content-text {
color: #f1e8eb !important;
}

body.page-Kuronata :is(
.mw-page-title-main,
.mw-headline,
.citizen-page-heading,
.citizen-page-title,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6
) {
color: #fff3f4 !important;
}

/* Blue hyperlinks break the blood-red theme. Retain recognizable links. */
body.page-Kuronata :is(
#mw-content-text,
.mw-parser-output,
.citizen-toc,
.citizen-page-header
) a[href]:not(.new):not(.kkpt-fate-gear) {
color: #ffb6c2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a.new {
color: #ff849b !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) a[href]:hover {
color: #ffe0e5 !important;
}
body.page-Kuronata a.kkpt-portal-blue {
--kkpt-fringe: #ffcad5;
--kkpt-halo: rgba(255, 77, 115, .42);
}

/* Infobox: leave all rows/columns exactly as the template generated them.
Correct only the old light-mode backgrounds and black foreground text. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) table.infobox {
background-color: rgba(24, 13, 19, .94) !important;
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(caption,th,td) {
color: #fff0f2 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox td {
background-color: rgba(27, 18, 24, .88) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox th:not([colspan]) {
background-color: rgba(73, 31, 43, .93) !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox :is(th[colspan],.infobox-header) {
color: #fff3f4 !important;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
table.infobox a[href] {
color: #ffc1ca !important;
}
body.page-Kuronata ::selection {
background: rgba(202, 47, 77, .64);
color: #fff9fa;
}

/* Kuronata spoilers / 黑幕: the original white-on-white censor becomes
soot black, with the text revealed only on hover or keyboard focus. */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) .heimu a {
background-color: #08080b !important;
color: #08080b !important;
text-shadow: none;
-webkit-text-fill-color: #08080b !important;
box-shadow: inset 0 0 0 1px rgba(112,32,48,.65);
border-radius: 2px;
}
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within),
body.page-Kuronata :is(#mw-content-text,.mw-parser-output)
.heimu:is(:hover,:focus,:focus-within) a {
background-color: #2d111c !important;
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
}

/* Kuronata 黑幕：直接让 span 本身出现彩色信号撕裂。
无须 data 属性或 JS 注入，因此即使文章通过 AJAX 更新也生效。 */
body.page-Kuronata span.heimu {
cursor: crosshair;
}
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
color: #ffe3e8 !important;
-webkit-text-fill-color: #ffe3e8 !important;
background-color: #2d111c !important;
animation: kkpt-heimu-interference 440ms steps(1,end) infinite !important;
}
@keyframes kkpt-heimu-interference {
0%,8%,55%,100% {
filter: none;
text-shadow: -1px 0 #c93856,1px 0 #5dcfff;
box-shadow: inset 0 0 0 1px #752738;
}
9%,15% {
filter: contrast(1.65) brightness(1.22);
text-shadow: -3px 0 #ff234f,3px 0 #52ecff,
0 2px #111;
box-shadow: inset 0 -3px 0 #ff275b,
inset 0 2px 0 #66dfff;
}
27%,33% {
filter: brightness(1.7);
text-shadow: 3px 0 #ed2b70,-3px 0 #35dcff;
box-shadow: inset 0 2px 0 #eb356b,
inset 0 -1px 0 #89f6ff;
}
65%,71% {
filter: contrast(2) brightness(.83);
text-shadow: -2px 0 #ff2851,4px 0 #5cf7ff;
box-shadow: inset 0 -2px 0 #7f2840;
}
83%,87% {
filter: brightness(1.45);
text-shadow: 2px 0 #f35a8a,-2px 0 #49deee;
box-shadow: inset 0 1px 0 #fff;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata span.heimu:is(:hover,:focus-visible,:focus-within) {
animation: none !important;
}
}

@media print {
#kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,
.kkpt-form-switch {display:none !important}
}

/* ===============================================================
V19: Kuronata spoiler fade + sliced text displacement.
The existing native .heimu markup and Infobox remain untouched.
=============================================================== */
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu,
body.page-Kuronata :is(#mw-content-text,.mw-parser-output) span.heimu a {
transition: background-color .29s ease, color .29s ease,
-webkit-text-fill-color .29s ease !important;
}
body.page-Kuronata span.heimu[data-kkpt-glitch] {
position: relative;
isolation: isolate;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
content: attr(data-kkpt-glitch);
position: absolute;
inset: 0;
z-index: 2;
display: inline;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
white-space: nowrap;
font: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
opacity: 0;
transition: opacity .24s ease;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::before {
color: #ff385e;
-webkit-text-fill-color: #ff385e;
text-shadow: -2px 0 #ff385e;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
color: #6be9ff;
-webkit-text-fill-color: #6be9ff;
text-shadow: 2px 0 #6be9ff;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::before {
opacity: .84;
animation: kkpt-slice-a 570ms steps(1,end) infinite;
}
body.page-Kuronata span.heimu[data-kkpt-glitch]:is(:hover,:focus-visible,:focus-within)::after {
opacity: .79;
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* Always-on aftermath: a small number of GPU-composited smoke/ash
sprites, without a second persistent requestAnimationFrame loop. */
body.page-Kuronata #kkpt-afterglow {
position: fixed;
inset: 0;
z-index: 2147480950;
overflow: hidden;
pointer-events: none;
user-select: none;
contain: layout style paint;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell,
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
position: absolute;
display: block;
pointer-events: none;
will-change: transform, opacity;
animation-delay: var(--delay);
animation-duration: var(--duration);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
/* Wide, feathered side-banks built from asymmetric elliptical lobes.
No border-radius or single radial disk: no floating grey circles. */
width: calc(var(--size) * 1.75);
height: calc(var(--size) * .82);
border-radius: 0;
background:
radial-gradient(ellipse 37% 53% at 12% 62%,
rgba(128,124,137,.20) 0%, rgba(77,71,83,.15) 45%,
transparent 100%),
radial-gradient(ellipse 48% 60% at 42% 42%,
rgba(113,111,128,.29) 0%, rgba(71,65,83,.17) 44%,
transparent 100%),
radial-gradient(ellipse 43% 58% at 79% 52%,
rgba(139,99,109,.17) 0%, rgba(83,71,83,.12) 51%,
transparent 100%),
radial-gradient(ellipse 31% 45% at 57% 82%,
rgba(103,95,108,.18) 0%, transparent 100%);
opacity: 0;
animation-name: kkpt-soot-rise;
}
body.page-Kuronata #kkpt-afterglow .kkpt-ash-cell {
width: var(--size);
height: calc(var(--size) * 2.6);
border-radius: 50%;
background: radial-gradient(ellipse,
rgba(255,251,202,.87) 0%, rgba(248,98,28,.70) 28%,
rgba(124,24,11,.32) 64%, transparent 83%);
box-shadow: 0 0 5px rgba(238,61,19,.28);
opacity: 0;
animation-name: kkpt-ash-float;
}
@keyframes kkpt-soot-rise {
0% {opacity:0;transform:translate3d(0,45px,0) scale(.85,.76)}
24% {opacity:.76}
59% {opacity:.57}
83% {opacity:.32}
100% {opacity:0;transform:translate3d(var(--wind),-215px,0) scale(1.10,1.24)}
}
@keyframes kkpt-ash-float {
0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0deg); }
18% { opacity: .78; }
65% { opacity: .56; }
100% { opacity: 0; transform: translate3d(var(--wind),-210px,0) rotate(92deg); }
}
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow {
visibility: hidden;
}
html.kkpt-frame-inactive body.page-Kuronata #kkpt-afterglow *,
html.kkpt-world-suspended body.page-Kuronata #kkpt-afterglow * {
animation-play-state: paused !important;
}

/* Infrequent, sharp spatial corruption: no full-screen strobe.
Different text layers lurch by distinct offsets. */
html.kkpt-rift body.page-Kuronata #mw-content-text {
animation: kkpt-rift-content 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: kkpt-rift-heading 360ms steps(1,end) both !important;
}
html.kkpt-rift body.page-Kuronata #kkpt-afterglow::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--kkpt-rift-y,42%);
height: 3px;
opacity: .58;
background: linear-gradient(90deg,transparent 0%,rgba(255,62,105,.35) 21%,
rgba(111,220,255,.67) 49%,rgba(255,62,105,.22) 84%,transparent);
box-shadow: 0 9px 0 rgba(13,3,11,.47),0 -7px 0 rgba(250,37,64,.17);
transform: translateX(-9px);
animation: kkpt-rift-scan 360ms steps(1,end) both;
}
@keyframes kkpt-rift-content {
0%,14%,100% { transform: translateX(0) skewX(0); text-shadow: none; }
15%,23% { transform: translateX(-6px) skewX(-.42deg);
text-shadow: -3px 0 #ef2257,3px 0 #26b5c9; }
24%,38% { transform: translateX(4px) skewX(.22deg);
text-shadow: 2px 0 #e62256,-2px 0 #54bbdf; }
39%,59% { transform: translateX(0); text-shadow: none; }
60%,68% { transform: translateX(7px) skewX(-.26deg);
text-shadow: -3px 0 #ff2968,3px 0 #42aabf; }
69%,89% { transform: translateX(-2px); text-shadow: none; }
}
@keyframes kkpt-rift-heading {
0%,10%,100% { transform: translateX(0); text-shadow: none; }
11%,33% { transform: translateX(7px); text-shadow: -5px 0 #d82454,4px 0 #46c5df; }
34%,63% { transform: translateX(-4px); text-shadow: 4px 0 #d82454,-3px 0 #46c5df; }
64%,85% { transform: translateX(2px); text-shadow: none; }
}
@keyframes kkpt-rift-scan {
0%,100% { opacity: 0; transform: translateX(0); }
17%,25% { opacity: .62; transform: translateX(9px); }
49%,62% { opacity: .37; transform: translateX(-12px); }
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #kkpt-afterglow,
body.page-Kuronata span.heimu[data-kkpt-glitch]::before,
body.page-Kuronata span.heimu[data-kkpt-glitch]::after {
display: none !important;
}
html.kkpt-rift body.page-Kuronata #mw-content-text,
html.kkpt-rift body.page-Kuronata :is(.mw-page-title-main,.mw-headline) {
animation: none !important;
}
}
@media print {
#kkpt-afterglow { display: none !important; }
}

/* Scroll cost: the gear is now absolute, not a sticky glass layer. */
@media (max-width:760px) {
.kkpt-fate-gear { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* =============================================================
V19 — corrections made against the actual rendered Infobox HTML
and multiline screenshot. No original page layout is rewritten.
============================================================= */

/* Actual Infobox caption: the gear is a real descendant, not a
document-level follower. Caption sizing/text centering is unchanged. */
.infobox caption.kkpt-fate-host,
.infobox th.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
position: absolute !important;
left: auto !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.kkpt-other-active .kkpt-fate-gear {
visibility: hidden !important;
pointer-events: none !important;
}

/* A multiline inline span must not repeat its entire text at line 1.
Instead render per-line chromatic slices from DOM Range metrics. */
body.page-Kuronata span.heimu[data-kkpt-multiline]::before,
body.page-Kuronata span.heimu[data-kkpt-multiline]::after {
display: none !important;
content: none !important;
}
body.page-Kuronata .kkpt-heimu-fault {
position: fixed;
inset: 0;
z-index: 2147480955;
pointer-events: none;
user-select: none;
contain: layout style paint;
opacity: 1;
transition: opacity 190ms ease-out;
}
body.page-Kuronata .kkpt-heimu-fault.kkpt-fault-away {
opacity: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line {
display: block;
position: fixed;
pointer-events: none;
white-space: pre;
color: transparent;
overflow: visible;
padding: 0;
margin: 0;
}
body.page-Kuronata .kkpt-heimu-fault-line::before,
body.page-Kuronata .kkpt-heimu-fault-line::after {
content: attr(data-copy);
position: absolute;
top: 0;
left: 0;
white-space: pre;
display: block;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
pointer-events: none;
}
body.page-Kuronata .kkpt-heimu-fault-line::before {
color: #ff3967;
-webkit-text-fill-color: #ff3967;
text-shadow: -2px 0 rgba(255,37,69,.85);
animation: kkpt-slice-a 610ms steps(1,end) infinite;
}
body.page-Kuronata .kkpt-heimu-fault-line::after {
color: #73ebff;
-webkit-text-fill-color: #73ebff;
text-shadow: 2px 0 rgba(43,196,255,.8);
animation: kkpt-slice-b 490ms steps(1,end) infinite;
}

/* The afterglow must be a visible, restrained foreground film.
This is above Citizen's article glass but behind the live iframe. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
opacity: 0;
}
@media (max-width:760px) {
/* Mobile: avoid expensive glow/blur composite work. */
body.page-Kuronata #kkpt-afterglow .kkpt-soot-cell {
box-shadow: none !important;
filter: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata .kkpt-heimu-fault {
display: none !important;
}
}

/* ===========================================================
V20 · Fate wheel / fog banks / Kuronata hyperlink faults
=========================================================== */

/* Inline beside the first-line Infobox TITLE, not on the far right
of the table. Also works beside the article heading as fallback. */
.kkpt-fate-host > .kkpt-fate-gear {
display: inline-grid !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
vertical-align: middle !important;
transform: translateY(-2px) !important;
width: 31px !important;
height: 31px !important;
padding: 5px !important;
margin: 0 0 0 8px !important;
flex: none !important;
float: none !important;
line-height: 1 !important;
border-color: rgba(255,255,255,.45);
}
.kkpt-fate-host > .kkpt-fate-gear::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 12deg, transparent 0deg 27deg,
var(--kkpt-gear-ink) 29deg 36deg,
transparent 39deg 110deg,
var(--kkpt-gear-ink) 115deg 122deg,
transparent 126deg 210deg,
var(--kkpt-gear-ink) 213deg 221deg,
transparent 226deg 320deg,
var(--kkpt-gear-ink) 323deg 332deg,
transparent 337deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
mask: radial-gradient(circle, transparent 56%, #000 62%, #000 65%, transparent 74%);
opacity: .34;
animation: kkpt-destiny-orbit 9s linear infinite;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .88;
animation-duration: 2.4s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
opacity: 1;
animation-duration: .65s;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: kkpt-destiny-awaken 1.5s ease-out;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 5px var(--kkpt-gear-halo));
}
@keyframes kkpt-destiny-orbit {
to {transform:rotate(360deg)}
}
@keyframes kkpt-destiny-awaken {
0%,100% {box-shadow:0 0 11px var(--kkpt-gear-halo)}
21% {box-shadow:0 0 13px 4px var(--kkpt-gear-halo),0 0 32px 9px var(--kkpt-gear-halo)}
48% {box-shadow:0 0 18px 2px var(--kkpt-gear-halo)}
}

/* V35: the actual fate wheel spins, hesitates, then accelerates over
the entire 3-second opening instead of stopping after half a second. */
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation:kkpt-destiny-awaken-v35 3s ease-in-out both;
}
.kkpt-fate-gear-turning .kkpt-fate-gear-svg {
animation:kkpt-fate-rotation 3s cubic-bezier(.14,.33,.13,1) both;
}
.kkpt-fate-gear-turning::after {
animation:kkpt-fate-ripple 2.85s cubic-bezier(.09,.6,.2,1) both;
}
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning::before {
animation-duration:.55s;
}
@keyframes kkpt-destiny-awaken-v35 {
0%{box-shadow:0 0 5px var(--kkpt-gear-halo)}
22%{box-shadow:0 0 18px 3px var(--kkpt-gear-halo)}
55%{box-shadow:0 0 26px 6px var(--kkpt-gear-halo),0 0 45px 10px var(--kkpt-gear-halo)}
78%{box-shadow:0 0 32px 7px var(--kkpt-gear-halo)}
100%{box-shadow:0 0 6px var(--kkpt-gear-halo)}
}

/* Every text link in the darker world has an unstable signal.
Ordinary links jitter subtly; the way back to Kuranoka tears
apart harder. The original link palette is preserved. */
body.page-Kuronata #mw-content-text a.kkpt-link-glitch {
position: relative;
transition: text-shadow .15s ease-out;
}
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible) {
animation: kkpt-link-interference 580ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin:is(:hover,:focus-visible) {
animation: kkpt-link-origin-tear 420ms steps(1,end) infinite;
}
@keyframes kkpt-link-interference {
0%,14%,47%,75%,100% {left:0;text-shadow:none}
15%,24% {left:-1px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
25%,46% {left:1px;text-shadow:1px 0 #ff4369,-2px 0 #71c9e9}
48%,55% {left:2px;text-shadow:-2px 0 #ff4369,2px 0 #71c9e9}
56%,74% {left:0;text-shadow:0 0 3px rgba(240,56,83,.55)}
76%,82% {left:-2px;text-shadow:2px 0 #ff4369,-2px 0 #71c9e9}
}
@keyframes kkpt-link-origin-tear {
0%,12%,42%,70%,100% {left:0;text-shadow:0 0 3px rgba(249,43,73,.25)}
13%,23% {left:-4px;text-shadow:-5px 0 #ff1457,5px 0 #1fd8ff}
24%,41% {left:3px;text-shadow:5px 0 #ff3069,-4px 0 #45e8ff}
43%,51% {left:-2px;text-shadow:-4px 0 #ff3e55,6px 0 #47a5ee}
52%,69% {left:4px;text-shadow:3px 0 #ff174e,-6px 0 #49ddff}
71%,80% {left:-3px;text-shadow:-6px 0 #ff174e,4px 0 #49ddff}
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link) {
isolation: isolate;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
content: attr(data-kkpt-link-copy);
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 2;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
user-select: none;
font: inherit;
letter-spacing: inherit;
opacity: 0;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
color: #ff315f;
-webkit-text-fill-color: #ff315f;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
color: #68e8ff;
-webkit-text-fill-color: #68e8ff;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link):is(:hover,:focus-visible)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text a.kkpt-link-glitch:is(:hover,:focus-visible),
.kkpt-fate-host > .kkpt-fate-gear::before,
.kkpt-fate-host > .kkpt-fate-gear.kkpt-fate-gear-turning {
animation: none !important;
}
}

/* ==============================================================
V21 — Title stays centered; pearl-toned fate gear floats next
to the FIRST title line without affecting any text flow.
Only wheel placement/appearance changes. Other FX untouched.
============================================================== */
.kkpt-fate-host {
position: relative !important;
}
.kkpt-fate-host > .kkpt-fate-gear {
display: grid !important;
position: absolute !important;
left: var(--kkpt-gear-left, calc(50% + 75px)) !important;
top: var(--kkpt-gear-top, 17px) !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
float: none !important;
vertical-align: baseline !important;
width: 27px !important;
height: 27px !important;
padding: 4px !important;
--kkpt-gear-ink: rgba(248, 253, 255, .87);
--kkpt-gear-halo: rgba(220, 241, 250, .18);
background: rgba(243, 253, 255, .055) !important;
color: var(--kkpt-gear-ink) !important;
border-color: rgba(250, 255, 255, .26) !important;
box-shadow: inset 0 0 5px rgba(255,255,255,.06),
0 0 7px rgba(216,240,250,.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kkpt-fate-host > .kkpt-fate-gear::before {
opacity: .15;
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible) {
background: rgba(240, 253, 255, .15) !important;
border-color: rgba(255, 255, 255, .62) !important;
box-shadow: 0 0 13px var(--kkpt-gear-halo);
}
.kkpt-fate-host > .kkpt-fate-gear:is(:hover,:focus-visible)::before {
opacity: .75;
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg {
filter: drop-shadow(0 0 2px var(--kkpt-gear-halo));
}
.kkpt-fate-host > .kkpt-fate-gear .kkpt-fate-gear-svg circle:first-of-type {
fill: rgba(176, 212, 228, .14) !important;
stroke: var(--kkpt-gear-ink);
}
body.page-Kuronata .kkpt-fate-host > .kkpt-fate-gear {
--kkpt-gear-ink: rgba(255, 233, 239, .84);
--kkpt-gear-halo: rgba(255, 201, 213, .20);
background: rgba(255, 231, 237, .05) !important;
border-color: rgba(255, 221, 230, .22) !important;
}

/* ==============================================================
V22 — Real cross-document navigation after the visual handoff.
The iframe exists ONLY during the effects; browser navigation
restores the Citizen sidebar and the document's native scrollbar.
Supported browsers receive a brief native page-to-page dissolve.
============================================================== */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation-duration: 160ms;
}
::view-transition-new(root) {
animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

/* Kuronata: the names of the lost daylight identity glitch at rest. */
body.page-Kuronata #mw-content-text .kkpt-identity-glitch {
position: relative;
isolation: isolate;
white-space: nowrap;
animation: kkpt-identity-body-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
content: attr(data-kkpt-identity);
position: absolute;
inset: 0;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 2;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before {
color: #ff245b;
-webkit-text-fill-color: #ff245b;
animation: kkpt-identity-red-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after {
color: #65e7ff;
-webkit-text-fill-color: #65e7ff;
animation: kkpt-identity-blue-fault 1.7s steps(1,end) infinite;
animation-delay: var(--kkpt-identity-delay,0s);
}
@keyframes kkpt-identity-body-fault {
0%,66%,76%,89%,94%,100% {left:0;text-shadow:none}
67%,70% {left:-2px;text-shadow:-3px 0 #ff245b,3px 0 #55d6f9}
71%,75% {left:2px;text-shadow:3px 0 #ff245b,-3px 0 #55d6f9}
90%,92% {left:-3px;text-shadow:-4px 0 #fb2450,5px 0 #55d6f9}
93% {left:2px;text-shadow:3px 0 #fb2450,-3px 0 #55d6f9}
}
@keyframes kkpt-identity-red-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.90;transform:translateX(-5px);clip-path:inset(8% 0 66%)}
71%,75% {opacity:.75;transform:translateX(4px);clip-path:inset(61% 0 12%)}
90%,93% {opacity:.95;transform:translateX(-7px);clip-path:inset(30% 0 49%)}
}
@keyframes kkpt-identity-blue-fault {
0%,66%,76%,89%,94%,100% {opacity:0;transform:translateX(0)}
67%,70% {opacity:.89;transform:translateX(6px);clip-path:inset(52% 0 22%)}
71%,75% {opacity:.86;transform:translateX(-4px);clip-path:inset(17% 0 61%)}
90%,93% {opacity:.90;transform:translateX(7px);clip-path:inset(70% 0 6%)}
}
/* Link to Kuranoka glitches without hover, too. */
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: kkpt-link-origin-tear 520ms steps(1,end) infinite !important;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::before {
opacity: .95;
animation: kkpt-slice-a 360ms steps(1,end) infinite;
}
body.page-Kuronata #mw-content-text a.kkpt-link-origin[data-kkpt-link-copy]:not(.kkpt-portal-link)::after {
opacity: .89;
animation: kkpt-slice-b 310ms steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce) {
body.page-Kuronata #mw-content-text .kkpt-identity-glitch,
body.page-Kuronata #mw-content-text a.kkpt-link-origin {
animation: none !important;
}
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::before,
body.page-Kuronata #mw-content-text .kkpt-identity-glitch::after,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::before,
body.page-Kuronata #mw-content-text a.kkpt-link-origin::after {
animation: none !important;
opacity: 0 !important;
}
}

/* V23 — fate wheel in the Infobox caption's TOP RIGHT CORNER.
Absolute positioning never changes the title's centering. */
.kkpt-fate-host > .kkpt-fate-gear {
left: auto !important;
right: 7px !important;
top: 7px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: 26px !important;
height: 26px !important;
}
@media (max-width:600px) {
.kkpt-fate-host > .kkpt-fate-gear {
top: 5px !important;
right: 5px !important;
width: 24px !important;
height: 24px !important;
}
}

/* ==============================================================
V24 — Fix OS-theme inheritance and blue/white handoff flashes.
Kuranoka is daylight; Kuronata is crimson night on ALL systems.
Background fallbacks now visually match the respective photos
while the actual image bytes/texture become ready.
============================================================== */
html:has(body.page-Kuranoka) { color-scheme: light !important; }
html:has(body.page-Kuronata) { color-scheme: dark !important; }
html body.skin-citizen.page-Kuranoka {
color-scheme: light !important;
background-color: #197ebd !important;
}
html body.skin-citizen.page-Kuronata {
color-scheme: dark !important;
background-color: #160a13 !important;
}

/* Keep the OLD fully-rendered scene in place while the destination
document finishes its first paint. Then dissolve once, smoothly. */
@keyframes kkpt-native-handoff-out {
0%, 48% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes kkpt-native-handoff-in {
0%, 42% { opacity: 0; }
100% { opacity: 1; }
}
::view-transition-old(root) {
animation: kkpt-native-handoff-out 880ms ease-in-out both;
}
::view-transition-new(root) {
animation: kkpt-native-handoff-in 880ms ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .01ms !important;
}
}

MediaWiki:KuranokaPageTransition.js

2026-10-24T06:10:12Z

KK：

/* ============================================================
Kuranoka / Kuronata — Page Transition V37 / V25 faithful restore
V25 ORIGINAL fire edge, translucent fire pockets, smoke and dawn.
Lightweight WebGL2 is restricted to subtle ember points, NEVER the
fire curtain nor the reverse transition. Carbon sheets are 2D.
Both cues start three seconds before the V25 curtains, fade in over
those three seconds, then fade OUT over 18 seconds after reveal.
Only this page-scoped JS/CSS; never modify Citizen or loader.js.
Real page navigation after the transition; iframe is visual-only.
============================================================ */
(function initKkpt(retry) {
'use strict';
retry=retry||0;
if (!window.mw || !mw.config || typeof mw.config.get!=='function') {
if(retry<40)setTimeout(()=>initKkpt(retry+1),100);
return;
}

const pathMatch = location.pathname.match(/\/wiki\/(Kuranoka|Kuronata)\/?$/);
const urlPage = pathMatch ? pathMatch[1]
: new URLSearchParams(location.search).get('title');
const basePage = ['Kuranoka','Kuronata'].includes(urlPage)
? urlPage : mw.config.get('wgPageName');
const action = new URLSearchParams(location.search).get('action') || 'view';
if (!['Kuranoka','Kuronata'].includes(basePage) || action !== 'view') return;

// V24: the two article worlds have deliberate, deterministic palettes.
// "os" is NOT a light theme: it can resolve to dark on the reader's
// computer. Session storage may also be unavailable. Therefore, never
// restore a stale "os" token when landing back on Kuranoka.
const root=document.documentElement;
const themeNames=['skin-theme-clientpref-day','skin-theme-clientpref-os',
'skin-theme-clientpref-night','skin-theme-clientpref-black',
'skin-citizen-light'];
let wantsNight=basePage==='Kuronata';
let changingTheme=false;
function syncTheme(){
if(changingTheme)return;
const wanted=wantsNight?'skin-theme-clientpref-night':
'skin-theme-clientpref-day';
const shadow=wantsNight?'kkpt-kuronata-dark':null;
const unexpected=themeNames.filter(c=>c!==wanted)
.concat(wantsNight?[]:['kkpt-kuronata-dark']);
if(root.classList.contains(wanted)&&
(!shadow||root.classList.contains(shadow))&&
unexpected.every(c=>!root.classList.contains(c))){
return;
}
changingTheme=true;
root.classList.remove(...themeNames,'kkpt-kuronata-dark');
root.classList.add(wanted);
if(shadow)root.classList.add(shadow);
changingTheme=false;
}
function showTheme(dark){wantsNight=dark;syncTheme();}
syncTheme();
// Citizen may reapply OS-preference classes after its own scripts load.
// Keep each world's class correct without changing the user's setting.
new MutationObserver(syncTheme).observe(root,{
attributes:true,attributeFilter:['class']
});
// V31's page-style retry solves occasional initial unstyled portals.
function ensureWorldStyles(){
if(!document.head || document.getElementById('kkpt-css-retry'))return;
try{
if(getComputedStyle(root).getPropertyValue('--kkpt-css-v37').trim()==='ready')return;
}catch(_){}
const link=document.createElement('link');
link.id='kkpt-css-retry';
link.rel='stylesheet';
const target=new URL('/index.php',location.origin);
target.searchParams.set('title','MediaWiki:KuranokaPageTransition.css');
target.searchParams.set('action','raw');
target.searchParams.set('ctype','text/css');
target.searchParams.set('kkptv','37');
link.href=target.href;
document.head.appendChild(link);
}
setTimeout(ensureWorldStyles,1200);
function navigateRealPage(href){
window.location.assign(href);
}

// V17: the dark-world extras run in *both* the visible document and
// its same-origin preview iframe. They never alter other Wiki pages.
function installKuronataAfterglow() {
if(basePage!=='Kuronata'||window.__kkptDarkExtrasReady)return;
window.__kkptDarkExtrasReady=true;
const prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)');
// Multiline .heimu cannot use a single nowrap pseudo-element:
// it piles all copied text onto line one. Project each rendered
// line into two SHORT clipped chromatic slices only on hover.
// Range measurements leave the original article DOM and wrapping
// entirely untouched, including italic/link children.
const spoilerOverlays=new WeakMap();
const renderedSpoilerLines=(node)=>{
const lines=[];
const walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT);
const range=document.createRange();
let text,budget=0;
while((text=walk.nextNode())&&budget<340){
for(let i=0;i<text.length&&budget<340;i++,budget++){
const ch=text.nodeValue[i];
if(ch==='\n'||ch==='\r')continue;
range.setStart(text,i);
range.setEnd(text,i+1);
const r=range.getBoundingClientRect();
if(!r.width||!r.height)continue;
let line=lines.find(row=>Math.abs(row.top-r.top)<3);
if(!line){
line={top:r.top,left:r.left,right:r.right,
height:r.height,text:''};
lines.push(line);
}
line.left=Math.min(line.left,r.left);
line.right=Math.max(line.right,r.right);
line.height=Math.max(line.height,r.height);
line.text+=ch;
}
}
range.detach?.();
return lines.sort((a,b)=>a.top-b.top);
};
const spoilerFault=(node)=>{
if(prefersReduced.matches)return;
const rects=node.getClientRects();
if(rects.length<2)return;
const lines=renderedSpoilerLines(node);
if(lines.length<2)return;
node.setAttribute('data-kkpt-multiline','1');
spoilerOverlays.get(node)?.remove();
const overlay=document.createElement('div');
overlay.className='kkpt-heimu-fault';
overlay.setAttribute('aria-hidden','true');
const font=getComputedStyle(node);
for(const row of lines){
const fragment=document.createElement('span');
fragment.className='kkpt-heimu-fault-line';
fragment.dataset.copy=row.text;
fragment.style.left=row.left+'px';
fragment.style.top=row.top+'px';
fragment.style.width=(row.right-row.left+6)+'px';
fragment.style.height=(row.height+4)+'px';
fragment.style.fontFamily=font.fontFamily;
fragment.style.fontSize=font.fontSize;
fragment.style.fontWeight=font.fontWeight;
fragment.style.fontStyle=font.fontStyle;
fragment.style.lineHeight=font.lineHeight;
fragment.style.letterSpacing=font.letterSpacing;
overlay.append(fragment);
}
document.body.append(overlay);
spoilerOverlays.set(node,overlay);
};
const clearSpoilerFault=(node)=>{
const overlay=spoilerOverlays.get(node);
if(!overlay)return;
spoilerOverlays.delete(node);
overlay.classList.add('kkpt-fault-away');
setTimeout(()=>overlay.remove(),210);
};
const decorateSpoilers=()=>{
document.querySelectorAll('span.heimu').forEach(node=>{
if(node.dataset.kkptBound)return;
node.dataset.kkptBound='1';
const label=(node.textContent||'').replace(/\s+/g,' ').trim();
if(label&&label.length<=240&&!node.children.length)
node.setAttribute('data-kkpt-glitch',label);
node.addEventListener('mouseenter',()=>spoilerFault(node));
node.addEventListener('mouseleave',()=>clearSpoilerFault(node));
});
};
const decorateLinks=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
article.querySelectorAll('a[href]').forEach(link=>{
if(link.dataset.kkptLinkReady ||
link.classList.contains('kkpt-fate-gear') ||
link.querySelector('img,svg,video'))return;
link.dataset.kkptLinkReady='1';
link.classList.add('kkpt-link-glitch');
try{
const url=new URL(link.href,document.baseURI);
const path=url.pathname.match(/\/wiki\/([^/?#]+)/);
const name=url.searchParams.get('title')||
(path?decodeURIComponent(path[1]):'');
if(url.origin===location.origin &&
name.replace(/_/g,' ')==='Kuranoka'){
link.classList.add('kkpt-link-origin');
// Copy a link only if it truly occupies one
// rendered line. Multiline links keep real text.
const label=(link.textContent||'').trim();
if(!link.children.length &&
link.getClientRects().length===1 &&
label.length>0&&label.length<100)
link.dataset.kkptLinkCopy=label;
}
}catch(_){}
});
};
// V29's useful identity faults, transplanted without its transition
// shaders. Only text nodes are wrapped; Wiki links stay clickable.
const decorateIdentityMentions=()=>{
const article=document.querySelector('#mw-content-text,.mw-parser-output');
if(!article)return;
const hasIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/i;
const exactIdentity=/Kuranoka|Kurano\s+Kanata|天野[ \u00a0\u3000]*彼方/gi;
const walker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT,{
acceptNode(node){
if(!node.nodeValue||!hasIdentity.test(node.nodeValue))
return NodeFilter.FILTER_REJECT;
const parent=node.parentElement;
if(!parent||parent.closest('script,style,textarea,code,pre,'+
'input,button,select,[contenteditable="true"],'+
'.kkpt-identity-glitch,.kkpt-heimu-fault,'+
'span.heimu,a.kkpt-link-origin,'+
'#kkpt-afterglow,#kkpt-toggle'))
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
});
const matches=[];
let node;
while((node=walker.nextNode())&&matches.length<1800)matches.push(node);
let index=0;
for(const textNode of matches){
const raw=textNode.nodeValue;
const fragment=document.createDocumentFragment();
let previous=0,match;
exactIdentity.lastIndex=0;
while((match=exactIdentity.exec(raw))){
if(match.index>previous)
fragment.append(document.createTextNode(raw.slice(previous,match.index)));
const el=document.createElement('span');
el.className='kkpt-identity-glitch';
el.dataset.kkptIdentity=match[0];
el.textContent=match[0];
el.style.setProperty('--kkpt-identity-delay',
(-((index++*7)%23)*.21).toFixed(2)+'s');
fragment.append(el);
previous=match.index+match[0].length;
}
if(previous<raw.length)
fragment.append(document.createTextNode(raw.slice(previous)));
textNode.replaceWith(fragment);
}
};
const createAmbience=()=>{
if(prefersReduced.matches||document.getElementById('kkpt-afterglow')||!document.body)return;
const overlay=document.createElement('div');
overlay.id='kkpt-afterglow';
overlay.setAttribute('aria-hidden','true');
const el=(type,i)=>{
const part=document.createElement('span');
part.className=type==='soot'?'kkpt-soot-cell':'kkpt-ash-cell';
const smoke=type==='soot';
// All sprites are static layers with compositor-only
// transform/opacity animation. No persistent canvas or RAF.
// The soot is a side-bank haze, not a random full-screen
// spread of isolated circular clouds.
const fromLeft=i%2===0;
part.style.left=(smoke
? (fromLeft?-26+Math.random()*22:79+Math.random()*21)
: Math.random()*100)+'%';
part.style.top=(smoke?8+Math.random()*94:15+Math.random()*94)+'%';
part.style.setProperty('--size',(smoke?220+Math.random()*240:2+Math.random()*4).toFixed(1)+'px');
part.style.setProperty('--delay',(-Math.random()*(smoke?29:18)).toFixed(2)+'s');
part.style.setProperty('--duration',(smoke?18+Math.random()*14:8+Math.random()*11).toFixed(2)+'s');
part.style.setProperty('--wind',((Math.random()-.5)*(smoke?100:230)).toFixed(1)+'px');
return part;
};
for(let i=0;i<(innerWidth<700?8:16);i++)overlay.append(el('soot',i));
for(let i=0;i<30;i++)overlay.append(el('ash',i));
document.body.append(overlay);
};
const init=()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
createAmbience();
mw.hook('wikipage.content').add(()=>{
decorateSpoilers();
decorateLinks();
decorateIdentityMentions();
});
};
if(document.readyState==='loading')
document.addEventListener('DOMContentLoaded',init,{once:true});
else init();

// One brief spatial fault roughly every 14-36 seconds, never a
// full-screen white strobe. Pause while the iframe is hidden.
const pulse=()=>{
const inactive=document.hidden||prefersReduced.matches||
root.classList.contains('kkpt-frame-inactive')||
root.classList.contains('kkpt-world-suspended')||
(window!==window.top&&window.frameElement?.getAttribute('aria-hidden')==='true');
if(!inactive){
root.style.setProperty('--kkpt-rift-y',(14+Math.random()*70).toFixed(1)+'%');
root.classList.add('kkpt-rift');
window.setTimeout(()=>root.classList.remove('kkpt-rift'),390);
}
window.setTimeout(pulse,5000+Math.random()*15000);
};
window.setTimeout(pulse,5000+Math.random()*15000);
}
installKuronataAfterglow();

// The nested preview only applies its own theme; no recursive iframe.
if (window!==window.top || window.__kkptV12) return;
window.__kkptV12=true;
window.__kkptVersion='37.0';

// Easter eggs + Infobox gear are the default. No floating pill.
const SHOW_FLOATING_BUTTON=false;
const otherPage=basePage==='Kuranoka'?'Kuronata':'Kuranoka';
const baseUrl=location.href;
const baseTitle=document.title;
const otherUrl=new URL('/wiki/'+encodeURIComponent(otherPage),location.href);
const clipSide=basePage==='Kuranoka'?'right':'left';
const hideClip=clipSide==='right'?'inset(0 0 0 100%)':'inset(0 100% 0 0)';
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
// C2-smooth cinematic ease; starts and settles with zero acceleration.
// Its midpoint stays at t=.5, preserving 00:33 / 02:39 beat alignment.
const smooth=t=>{t=Math.max(0,Math.min(1,t));
return t*t*t*(t*(t*6-15)+10);};
const imagePool=new Map();
// V24: preload both original background photographs. The target
// image is decoded while its real-document iframe is preparing,
// reducing flashes of the bare background-color at navigation.
const worldBackdrops={
Kuranoka:'https://blockland.wiki/images/0/05/%E7%A7%AF%E9%9B%A8%E4%BA%911.png',
Kuronata:'https://blockland.wiki/images/a/ab/%E9%BB%84%E6%98%8F%EF%BC%8C%E9%BB%91%E4%BA%91.png'
};
function primeWorldBackdrops(){
const current=worldBackdrops[basePage];
if(current&&document.head){
const link=document.createElement('link');
link.rel='preload';
link.as='image';
link.href=current;
link.setAttribute('fetchpriority','high');
link.dataset.kkptBackgroundPreload='1';
document.head.appendChild(link);
warmImage(current).catch(()=>{});
}
// Give the current photo first priority; then prepare the next
// world so the iframe and the eventual real page can reuse it.
setTimeout(()=>{
const next=worldBackdrops[otherPage];
if(next)warmImage(next).catch(()=>{});
},300);
}
primeWorldBackdrops();

const ENABLE_TRANSITION_AUDIO = true;
const FIRE_VOLUME = .30;
const DAWN_VOLUME = .20;
let soundContext=null,fireBuffer=null,activeSound=null;

// Public-domain PADsynth recording, ~8.4s / 120KB. Change this
// to a same-origin Wiki-upload URL if external media are blocked.
const REBIRTH_PAD_URL=
'https://upload.wikimedia.org/wikipedia/commons/e/ed/Padsynth_example_synth_piano.ogg';
let padBytesPromise=null,padDecodePromise=null,padBuffer=null;
function preloadRebirthPad(){
if(padBytesPromise)return padBytesPromise;
padBytesPromise=fetch(REBIRTH_PAD_URL,{mode:'cors',cache:'force-cache'})
.then(resp=>{
if(!resp.ok)throw new Error('PAD HTTP '+resp.status);
return resp.arrayBuffer();
})
.catch(err=>{
console.debug('[KKPT] PAD file unavailable:',err);
return null;
});
return padBytesPromise;
}
function decodeRebirthPad(ctx){
if(padBuffer)return Promise.resolve(padBuffer);
if(!padDecodePromise){
padDecodePromise=preloadRebirthPad()
.then(bytes=>bytes?ctx.decodeAudioData(bytes.slice(0)):null)
.then(result=>(padBuffer=result))
.catch(err=>{
console.debug('[KKPT] Cannot decode PAD:',err);
return null;
});
}
return padDecodePromise;
}
// A plain media element can still play the recording when a site's
// CORS policy disallows reading the file into Web Audio.
function playRebirthPadFallback(durationMs){
const sound=new Audio(REBIRTH_PAD_URL);
sound.volume=0;
sound.play().then(()=>{
const begin=performance.now();
const timer=setInterval(()=>{
const t=Math.min(1,(performance.now()-begin)/durationMs);
sound.volume=Math.max(0,Math.min(DAWN_VOLUME,
DAWN_VOLUME*Math.min(t/.27,(1-t)/.26)));
if(t>=1){clearInterval(timer);sound.pause();sound.src='';}
},80);
}).catch(err=>console.debug('[KKPT] PAD playback unavailable:',err));
}

function primeSound(){
if(!ENABLE_TRANSITION_AUDIO)return;
try{
const AudioEngine=window.AudioContext||window.webkitAudioContext;
if(!AudioEngine)return;
if(!soundContext)soundContext=new AudioEngine();
if(soundContext.state==='suspended')soundContext.resume().catch(()=>{});
decodeRebirthPad(soundContext);
}catch(err){console.debug('[KKPT] Audio unavailable:',err);}
}
function createFireAudio(ctx){
const length=Math.round(ctx.sampleRate*4.5);
const buffer=ctx.createBuffer(1,length,ctx.sampleRate);
const data=buffer.getChannelData(0);
let low=0,middle=0;
for(let i=0;i<length;i++){
const random=Math.random()*2-1;
low=low*.992+random*.008;
middle=middle*.92+random*.08;
data[i]=Math.max(-1,Math.min(1,
low*3.9+middle*.33+random*.055));
}
// Micro-crackles: impulsive bursts with different decay times.
for(let k=0;k<350;k++){
const at=Math.floor(Math.random()*(length-1500));
const decay=36+Math.random()*330;
const duration=Math.min(1400,Math.ceil(decay*4));
const power=.20+Math.pow(Math.random(),3)*.68;
for(let j=0;j<duration;j++){
const env=Math.exp(-j/decay);
data[at+j]=Math.max(-1,Math.min(1,data[at+j]+
(Math.random()*2-1)*power*env));
}
}
return buffer;
}
function transitionSound(dark,durationMs){
const ctx=soundContext;
if(!ctx||ctx.state!=='running')return;
const start=ctx.currentTime+.018;
const span=durationMs/1000;
if(activeSound){
const old=activeSound.gain;
old.cancelScheduledValues(start);
old.setTargetAtTime(.0001,start,.05);
}
const master=ctx.createGain();
master.gain.setValueAtTime(.0001,start);
master.gain.linearRampToValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+(dark?.75:1.10));
master.gain.setValueAtTime(dark?FIRE_VOLUME:DAWN_VOLUME,
start+span-(dark?.88:1.0));
master.gain.exponentialRampToValueAtTime(.0001,start+span);
master.connect(ctx.destination);
activeSound={gain:master};
if(dark){
if(!fireBuffer)fireBuffer=createFireAudio(ctx);
const src=ctx.createBufferSource();
src.buffer=fireBuffer;src.loop=true;
const lowpass=ctx.createBiquadFilter();
lowpass.type='lowpass';lowpass.frequency.value=2050;
const bass=ctx.createBiquadFilter();
bass.type='highpass';bass.frequency.value=55;
src.connect(lowpass);lowpass.connect(bass);bass.connect(master);
src.start(start);src.stop(start+span+.12);
}else{
// A REAL recorded PADsynth sample; no generated wind-chimes.
decodeRebirthPad(ctx).then(buffer=>{
if(!buffer){playRebirthPadFallback(durationMs);return;}
const at=Math.max(start,ctx.currentTime+.020);
if(at>start+span-.55)return;
const player=ctx.createBufferSource();
player.buffer=buffer;
player.connect(master);
player.start(at,Math.max(0,at-start)+.95);
player.stop(start+span);
}).catch(()=>{});
}
setTimeout(()=>{
if(activeSound&&activeSound.gain===master)activeSound=null;
try{master.disconnect();}catch(_){}
},durationMs+350);
}

// Audio starts AT ITS TRANSITION SECTION, not at 00:00. Three seconds of
// crescendo accompany the fate-wheel awakening. V25's actual fire and
// particle painting remains unchanged. Music 00:33 / 02:39 now lands
// in the MIDDLE of the corresponding original V25 reveal.
const SCORE_KEY='kkpt:score-handoff:37';
const SCORE_MUTE_KEY='kkpt:score-muted';
const SCORES={
Kuronata:{
id:'marenoia',target:'Kuronata',
url:'https://blkl.fun/wp-content/uploads/2026/10/Marenoia.mp3?kkpt_audio=v35',
startAt:28.275,fireStart:31.275,fireEnd:34.725,
stopAt:52.725,fadeInSeconds:3,fadeSeconds:18
},
Kuranoka:{
id:'anotherme',target:'Kuranoka',
url:'https://blkl.fun/wp-content/uploads/2026/10/AnotherMe.mp3?kkpt_audio=20261024_043627',
startAt:154.45,fireStart:157.45,fireEnd:160.55,
stopAt:178.55,fadeInSeconds:3,fadeSeconds:18
}
};
let returnScore=null;
let scoreOmen=null;
let fatePrelude=null;
function userWantsMute(){
try{return sessionStorage.getItem(SCORE_MUTE_KEY)==='1';}
catch(_){return false;}
}
const AUDIO_ICONS={
speaker:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M15 9a5 5 0 0 1 0 6"/><path d="M18 6a9 9 0 0 1 0 12"/>',
mute:'<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6m0-6-5 6"/>',
play:'<path d="m8 5 11 7-11 7V5Z"/>'
};
function updateAudioToggle(score){
if(!score?.hud)return;
const paused=score.blocked||score.audio.paused;
const icon=paused?'play':score.audio.muted?'mute':'speaker';
score.hud.innerHTML='<svg viewBox="0 0 24 24" fill="none" '+
'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '+
'stroke-linejoin="round" aria-hidden="true">'+AUDIO_ICONS[icon]+'</svg>';
score.hud.setAttribute('aria-label',paused?'恢复播放':
score.audio.muted?'取消静音':'静音');
score.hud.setAttribute('aria-pressed',String(score.audio.muted));
score.hud.classList.toggle('kkpt-audio-needs-resume',paused);
}
function mountAudioToggle(score){
const old=document.getElementById('kkpt-audio-toggle');
old?.remove();
const hud=document.createElement('button');
hud.type='button';hud.id='kkpt-audio-toggle';
hud.setAttribute('aria-label','静音');
score.hud=hud;
document.body.append(hud);
const audio=score.audio;
hud.addEventListener('click',()=>{
if(audio.paused||score.blocked){
score.blocked=false;
const resume=typeof score.resume==='function'?
score.resume():audio.play();
Promise.resolve(resume).then(()=>{
updateAudioToggle(score);
}).catch(err=>{
console.info('[KKPT] Audio resume blocked:',err);
score.blocked=true;updateAudioToggle(score);
});
updateAudioToggle(score);
return;
}
audio.muted=!audio.muted;
try{sessionStorage.setItem(SCORE_MUTE_KEY,audio.muted?'1':'0');}
catch(_){}
updateAudioToggle(score);
});
audio.addEventListener('play',()=>updateAudioToggle(score));
audio.addEventListener('pause',()=>updateAudioToggle(score));
updateAudioToggle(score);
}
function removeScoreOmen(){
if(scoreOmen){
const old=scoreOmen;
const opacity=getComputedStyle(old).opacity;
scoreOmen=null;
old.style.opacity=opacity;
old.classList.add('kkpt-omen-closing');
// Let the V25 fire steadily replace the red veil. Abruptly
// removing it at t=0 was the visible "turns bright" flash.
requestAnimationFrame(()=>requestAnimationFrame(()=>{
old.style.opacity='0';
}));
setTimeout(()=>old.remove(),1540);
}
document.body.classList.remove('kkpt-omen-running');
}
function startScoreOmen(score){
if(score?.config?.id!=='marenoia'||scoreOmen)return;
const omen=document.createElement('div');
omen.id='kkpt-omen';omen.setAttribute('aria-hidden','true');
omen.innerHTML='<i class="kkpt-omen-glow"></i>'+
'<i class="kkpt-omen-line"></i>';
document.body.append(omen);
scoreOmen=omen;
document.body.classList.add('kkpt-omen-running');
}
function clearFatePrelude(){
fatePrelude?.remove();fatePrelude=null;
}
function startFatePrelude(anchor,targetPage){
clearFatePrelude();
const box=anchor?.getBoundingClientRect?.();
const x=box?box.left+box.width/2:innerWidth/2;
const y=box?box.top+box.height/2:innerHeight/2;
const prelude=document.createElement('div');
prelude.id='kkpt-fate-prelude';
prelude.setAttribute('aria-hidden','true');
prelude.className=targetPage==='Kuronata'?'kkpt-fate-dark':'kkpt-fate-light';
prelude.style.setProperty('--kkpt-fate-x',x+'px');
prelude.style.setProperty('--kkpt-fate-y',y+'px');
prelude.style.setProperty('--kkpt-fate-dx',(innerWidth/2-x)+'px');
prelude.style.setProperty('--kkpt-fate-dy',(innerHeight/2-y)+'px');
prelude.innerHTML='<div class="kkpt-fate-orbit">'+
'<i class="kkpt-fate-ring kkpt-fate-ring-a"></i>'+
'<i class="kkpt-fate-ring kkpt-fate-ring-b"></i>'+
'<i class="kkpt-fate-arc"></i>'+
'<i class="kkpt-fate-spark"></i>'+
'<i class="kkpt-fate-wave"></i></div>';
document.body.append(prelude);
fatePrelude=prelude;
// The 3s visual countdown is synchronized by the MP3 seek position.
setTimeout(()=>{
if(fatePrelude===prelude)clearFatePrelude();
else prelude.remove();
},3650);
}

// Actual transient analysis of the hosted Marenoia recording, 22.05 kHz
// mono / spectral-flux + low-band kick envelope. A main beat repeats
// roughly every 0.439 seconds (~137 BPM), with salient attacks near
// 31.775, 33.561, 33.751 and 34.250s. React to audio.currentTime:
// wall-clock timers would desynchronize during MP3 buffering/seeking.
const MARENOIA_TRANSIENTS=[
[28.453,.56],[28.682,.58],[28.892,.76],[29.121,.64],
[29.341,.72],[29.570,.48],[29.780,.87],[30.009,.93],
[30.438,.44],[30.658,.77],[30.887,.83],[31.356,.68],
[31.556,.79],[31.775,.93],[32.364,.29],[32.883,.36],
[33.192,.38],[33.561,1],[33.751,.97],[34.250,.86],
[34.469,.54],[35.317,.86],[35.786,.69]
];
// The fire segment only gets lightning. The pressure / dark vignette
// belongs to the AFTERMATH and survives the real page navigation.
function createMarenoiaBeatScene(score){
if(score.config.id!=='marenoia')return null;
const lightningLayer=document.createElement('div');
lightningLayer.id='kkpt-lightning-layer';
lightningLayer.setAttribute('aria-hidden','true');
document.body.append(lightningLayer);
let live=true,raf=0,lastTick=0,nextBeat=0,progress=0;
let lastLightning=-100;
function lightning(t,strength){
if(!live||t<.11||t>.96)return;
const w=Math.max(1,innerWidth),h=Math.max(1,innerHeight);
const rng=(a,b)=>a+Math.random()*(b-a);
const edge=w*(1-t);
let x=Math.min(w*.93,Math.max(edge+35,edge+(w-edge)*.53));
const top=rng(-70,-16),bottom=rng(h*.46,h*.80);
const points=[[x,top]];
const count=9;
for(let i=1;i<=count;i++){
const yy=top+(bottom-top)*i/count;
const xx=x+rng(-39,39)*(i/count)+Math.sin(i*2.4)*14;
points.push([Math.max(10,Math.min(w-10,xx)),yy]);
}
const path=points.map((p,i)=>(i?'L':'M')+
p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
const branchAt=Math.floor(rng(3,7));
const p=points[branchAt];
const branch='M'+p[0].toFixed(1)+','+p[1].toFixed(1)+
' l'+rng(-46,46).toFixed(1)+','+rng(45,86).toFixed(1)+
' l'+rng(-28,28).toFixed(1)+','+rng(38,71).toFixed(1);
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('class','kkpt-storm-bolt');
svg.setAttribute('viewBox','0 0 '+w+' '+h);
svg.setAttribute('preserveAspectRatio','none');
svg.style.opacity=String(Math.min(1,.46+strength*.42));
svg.style.clipPath='inset(0 0 0 '+
Math.max(0,(1-t)*100).toFixed(2)+'%)';
const addPath=(d,klass)=>{
const el=document.createElementNS(ns,'path');
el.setAttribute('d',d);el.setAttribute('class',klass);
svg.append(el);
};
addPath(path,'kkpt-bolt-haze');
addPath(path,'kkpt-bolt-core');
addPath(branch,'kkpt-bolt-branch');
lightningLayer.append(svg);
setTimeout(()=>svg.remove(),390);
}
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<30)return;lastTick=now;
const audio=score.audio;
const audioTime=audio.currentTime;
while(nextBeat<MARENOIA_TRANSIENTS.length&&
MARENOIA_TRANSIENTS[nextBeat][0]<=audioTime){
const [moment,strength]=MARENOIA_TRANSIENTS[nextBeat++];
if(audioTime-moment<.22){
if(progress>.11&&strength>.81&&moment-lastLightning>.18){
lightning(progress,strength);
lastLightning=moment;
}
}
}
}
raf=requestAnimationFrame(tick);
return {
update(t){progress=t;},
finish(){
live=false;cancelAnimationFrame(raf);
setTimeout(()=>lightningLayer.remove(),450);
},
dispose(){
live=false;cancelAnimationFrame(raf);
lightningLayer.remove();
}
};
}

// Kick peaks detected across the *post-transition* part of the
// supplied MARENOIA MP3, rather than guessing BPM from wall time.
// Uses the exact audio clock again after the native MediaWiki reload.
const AFTER_DARK_KEY='kkpt:dark-afterglow:37';
const MARENOIA_AFTER_TRANSIENTS=[
[34.693,.75],[35.042,.87],[35.311,1],[35.780,.87],
[36.349,.89],[36.848,.89],[37.397,.83],[37.836,1],
[38.384,1],[38.843,1],[39.262,.78],[39.871,.75],
[40.370,.90],[40.929,.81],[41.477,1],[41.916,.88],
[42.375,1],[42.784,.77],[43.323,.85],[43.812,.83],
[44.111,.85],[44.780,.88],[45.009,1],[45.448,.96],
[45.907,1],[46.316,.73],[46.935,.75],[47.434,1],
[47.982,.81],[48.421,1],[48.970,1],[49.429,1],
[49.898,.90],[50.467,.87],[50.966,.97],[51.514,.83],
[52.063,.98],[52.502,1]
];
let kuronataAftermath=null;
function mountKuronataAftermath(score){
if(kuronataAftermath){
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
const layer=document.createElement('div');
layer.id='kkpt-beat-scene';
layer.setAttribute('aria-hidden','true');
layer.className='kkpt-beat-after kkpt-beat-idle';
layer.innerHTML='<div class="kkpt-beat-lens"></div>'+
'<div class="kkpt-beat-fringe"></div>'+
'<div class="kkpt-beat-rupture"></div>';
document.body.append(layer);
let live=true,raf=0,lastTick=0,source=null,lastBeat=-100;
let strength=0,index=0;
const quiet=()=>{
layer.style.setProperty('--kkpt-beat-dark','.27');
layer.style.setProperty('--kkpt-beat-scale','1.042');
layer.style.setProperty('--kkpt-beat-glitch','.045');
layer.style.setProperty('--kkpt-beat-shear','0px');
};
function tick(now){
if(!live)return;
raf=requestAnimationFrame(tick);
if(now-lastTick<38)return;lastTick=now;
if(!source||source.failed||source.audio.ended||
source.audio.currentTime>=source.config.stopAt-.02){
source=null;layer.classList.add('kkpt-beat-idle');
quiet();live=false;cancelAnimationFrame(raf);
return;
}
const audioTime=source.audio.currentTime;
while(index<MARENOIA_AFTER_TRANSIENTS.length&&
MARENOIA_AFTER_TRANSIENTS[index][0]<=audioTime){
const [moment,power]=MARENOIA_AFTER_TRANSIENTS[index++];
if(audioTime-moment<.20){
lastBeat=moment;strength=power;
}
}
const age=Math.max(0,audioTime-lastBeat);
const pressure=strength*Math.pow(Math.max(0,1-age/.34),2);
layer.style.setProperty('--kkpt-beat-dark',
(.27+.45*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-scale',
(1.043-.088*pressure).toFixed(4));
layer.style.setProperty('--kkpt-beat-glitch',
(.045+.37*pressure).toFixed(3));
layer.style.setProperty('--kkpt-beat-shear',
(Math.sin(index*1.47)*pressure*7.5).toFixed(2)+'px');
}
quiet();
kuronataAftermath={
attach(nextScore){
source=nextScore;
nextScore.aftermath=kuronataAftermath;
if(live){cancelAnimationFrame(raf);}
live=true;lastTick=0;lastBeat=-100;strength=0;
index=0;
layer.classList.remove('kkpt-beat-idle');
raf=requestAnimationFrame(tick);
},
settle(){
source=null;live=false;cancelAnimationFrame(raf);
layer.classList.add('kkpt-beat-idle');quiet();
},
dispose(){
source=null;live=false;cancelAnimationFrame(raf);
layer.remove();kuronataAftermath=null;
}
};
if(score)kuronataAftermath.attach(score);
return kuronataAftermath;
}
function createRebirthVisual(){
// Hope replaces ash: a barely perceptible rainbow after the rain.
// No numbered / nested six-band rainbow; just one diffuse halo.
// All are compositor layers; nothing is rasterized on every frame.
const layer=document.createElement('div');
layer.id='kkpt-rebirth-visual';
layer.setAttribute('aria-hidden','true');
const drizzle=document.createElement('div');
drizzle.className='kkpt-rebirth-rain';
const rainbow=document.createElementNS('http://www.w3.org/2000/svg','svg');
rainbow.setAttribute('class','kkpt-rebirth-rainbow');
rainbow.setAttribute('viewBox','0 0 1000 650');
rainbow.setAttribute('preserveAspectRatio','none');
const svgNS='http://www.w3.org/2000/svg';
const defs=document.createElementNS(svgNS,'defs');
const gradient=document.createElementNS(svgNS,'linearGradient');
gradient.setAttribute('id','kkpt-rebirth-muted-arc');
gradient.setAttribute('x1','0%');
gradient.setAttribute('x2','100%');
const haloColors=['#c7e5ff','#e4f7e6','#f7ebd9','#e7e0f5'];
haloColors.forEach((color,i)=>{
const stop=document.createElementNS(svgNS,'stop');
stop.setAttribute('offset',(i*100/3).toFixed(1)+'%');
stop.setAttribute('stop-color',color);
gradient.append(stop);
});
defs.append(gradient);
const arc=document.createElementNS(svgNS,'path');
arc.setAttribute('d','M -100 625 Q 500 -175 1100 625');
arc.setAttribute('fill','none');
arc.setAttribute('stroke','url(#kkpt-rebirth-muted-arc)');
arc.setAttribute('stroke-width','36');
rainbow.append(defs,arc);
const light=document.createElement('div');
light.className='kkpt-rebirth-sunlight';
const essence=document.createElement('div');
essence.className='kkpt-rebirth-essence';
const count=innerWidth<700?14:24;
for(let i=0;i<count;i++){
const mote=document.createElement('i');
mote.className='kkpt-rebirth-mote';
mote.style.left=(5+Math.random()*88).toFixed(1)+'%';
mote.style.top=(22+Math.random()*73).toFixed(1)+'%';
mote.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s';
mote.style.animationDuration=(2.3+Math.random()*1.8).toFixed(2)+'s';
essence.append(mote);
}
layer.append(drizzle,light,rainbow,essence);
document.body.append(layer);
let last=-1,alive=true;
return {
update(t){
if(!alive||Math.abs(t-last)<.018&&t<1)return;
last=t;
layer.style.clipPath='inset(0 '+
(Math.max(0,1-t)*100).toFixed(2)+'% 0 0)';
drizzle.style.opacity=(.30*Math.pow(1-t,1.4)).toFixed(3);
light.style.opacity=(Math.max(0,Math.min(1,(t-.12)/.67))*.47).toFixed(3);
rainbow.style.opacity=(Math.max(0,Math.min(1,(t-.48)/.40))*.105).toFixed(3);
essence.style.opacity=(Math.max(0,Math.min(1,(t-.22)/.55))*.72).toFixed(3);
},
finish(){
alive=false;layer.classList.add('kkpt-rebirth-finish');
setTimeout(()=>layer.remove(),1250);
},
dispose(){alive=false;layer.remove();}
};
}
function clearReturnScore(score){
if(!score)return;
clearInterval(score.displayTimer);
score.hud?.remove();
score.beatScene?.dispose();
score.aftermath?.settle();
try{
score.audio.pause();
score.audio.removeAttribute('src');score.audio.load();
}catch(_){}
if(returnScore===score)returnScore=null;
if(score.config?.id==='marenoia')removeScoreOmen();
}
function watchScore(score){
const audio=score.audio,config=score.config;
score.displayTimer=setInterval(()=>{
if(audio.ended||audio.error||audio.currentTime>=config.stopAt-.018){
clearReturnScore(score);return;
}
const elapsed=Math.max(0,audio.currentTime-config.startAt);
const remaining=Math.max(0,config.stopAt-audio.currentTime);
const fadeIn=config.fadeInSeconds?
Math.min(1,elapsed/config.fadeInSeconds):1;
const fadeOut=config.fadeSeconds?
Math.min(1,remaining/config.fadeSeconds):1;
audio.volume=.78*Math.min(fadeIn,fadeOut);
},60);
audio.addEventListener('ended',()=>clearReturnScore(score),{once:true});
audio.addEventListener('error',()=>{
score.failed=true;clearReturnScore(score);
},{once:true});
}
function createScore(config){
const audio=new Audio(config.url);
audio.preload='auto';audio.playsInline=true;
audio.volume=0;audio.muted=userWantsMute();
const score={audio,config,failed:false,blocked:false,
displayTimer:null,hud:null,playPromise:null};
returnScore=score;
mountAudioToggle(score);
watchScore(score);
return score;
}
function armReturnScore(targetPage){
const config=SCORES[targetPage];
if(!config||targetPage===basePage)return null;
if(returnScore&&!returnScore.failed&&
returnScore.config.id===config.id)return returnScore;
if(returnScore)clearReturnScore(returnScore);
const score=createScore(config);
// Seek straight into the selected three-second transition prelude.
try{score.audio.currentTime=config.startAt;}catch(_){}
score.audio.addEventListener('loadedmetadata',()=>{
if(score.audio.currentTime<config.startAt-.2){
try{score.audio.currentTime=config.startAt;}catch(_){}
}
},{once:true});
startScoreOmen(score);
try{
score.playPromise=Promise.resolve(score.audio.play()).then(()=>{
return true;
},err=>{
console.warn('[KKPT] Soundtrack playback blocked:',err);
score.failed=true;clearReturnScore(score);return false;
});
}catch(err){
console.warn('[KKPT] Soundtrack playback failed:',err);
score.failed=true;clearReturnScore(score);
score.playPromise=Promise.resolve(false);
}
return score;
}
function awaitScoreTime(score,seconds){
if(!score||score.failed)return Promise.resolve(false);
return new Promise(resolve=>{
const audio=score.audio;
let timer=null,lastTime=audio.currentTime;
let lastMovement=performance.now();
let settled=false;
const done=ok=>{
if(settled)return;
settled=true;clearInterval(timer);
audio.removeEventListener('timeupdate',check);
audio.removeEventListener('ended',check);
audio.removeEventListener('error',check);
resolve(ok);
};
const check=()=>{
if(audio.currentTime>=seconds-.018){done(true);return;}
if(score.failed||audio.error||audio.ended){done(false);return;}
if(audio.currentTime>lastTime+.015){
lastTime=audio.currentTime;lastMovement=performance.now();
}
// A stalled soundtrack cannot trap navigation indefinitely.
if(performance.now()-lastMovement>20000)done(false);
};
audio.addEventListener('timeupdate',check);
audio.addEventListener('ended',check);
audio.addEventListener('error',check);
timer=setInterval(check,75);
check();
});
}
function saveReturnScoreHandoff(score){
if(!score||score.failed||score.audio.ended||
score.audio.currentTime>=score.config.stopAt-.15)return;
try{
sessionStorage.setItem(SCORE_KEY,JSON.stringify({
stamp:Date.now(),time:score.audio.currentTime,
target:score.config.target,
expires:Date.now()+115000,revision:37
}));
if(score.config.id==='marenoia'){
sessionStorage.setItem(AFTER_DARK_KEY,'1');
}
}catch(err){
console.warn('[KKPT] Cannot preserve soundtrack position:',err);
}
}
function restoreReturnScoreHandoff(){
if(window!==window.top)return false;
let saved=null;
try{
saved=JSON.parse(sessionStorage.getItem(SCORE_KEY));
sessionStorage.removeItem(SCORE_KEY);
}catch(_){}
if(!saved||saved.revision!==37||saved.target!==basePage||
Date.now()>saved.expires)return false;
const config=SCORES[saved.target];
if(!config)return false;
const currentTarget=()=>saved.time+
(Date.now()-saved.stamp)/1000;
if(currentTarget()>=config.stopAt-.15)return false;
const score=createScore(config);
const audio=score.audio;
let attempted=false,blockedAt=null;
function playFromPosition(){
const requested=blockedAt===null?currentTarget():blockedAt;
const position=Math.min(config.stopAt-.12,requested);
if(position>=config.stopAt-.15){clearReturnScore(score);return;}
try{audio.currentTime=Math.max(config.startAt,position);}catch(_){}
Promise.resolve(audio.play()).then(()=>{
blockedAt=null;
score.blocked=false;updateAudioToggle(score);
}).catch(err=>{
// The only fallback is the SAME small icon, no audio popup.
console.info('[KKPT] Browser requires an audio click:',err);
blockedAt=position;score.blocked=true;
updateAudioToggle(score);
});
}
score.resume=()=>{
if(blockedAt!==null){
try{audio.currentTime=blockedAt;}catch(_){}
}
return Promise.resolve(audio.play()).then(value=>{
blockedAt=null;return value;
});
};
const autoplay=()=>{
if(attempted)return;attempted=true;
playFromPosition();
};
audio.addEventListener('loadedmetadata',autoplay,{once:true});
audio.load();
setTimeout(()=>{if(audio.readyState>=1)autoplay();},1100);
return true;
}

let active = false; // true only during the visual handoff; destination navigates natively
let animating = false;
let gearPending = false;
let ready = false;
let loading = null;
let button, labelTitle, labelSub, labelIcon, frame;
let otherTitle = otherPage + ' - Blockland Wiki';

function whichPage() { return active ? otherPage : basePage; }
function destination() { return active ? basePage : otherPage; }
function isDark(page) { return page === 'Kuronata'; }
function pathPage() {
const url = new URL(location.href);
if (url.pathname.startsWith('/wiki/')) {
try { return decodeURIComponent(url.pathname.slice(6)).replace(/_/g, ' '); }
catch (e) { return ''; }
}
return url.searchParams.get('title') || '';
}

function updateButton() {
if (!button) return;
const to = destination();
button.href = to === basePage ? baseUrl : otherUrl.href;
labelTitle.textContent = to.toUpperCase();
labelSub.textContent = isDark(to) ? 'BURN THE SKY' : 'RECLAIM THE SKY';
labelIcon.textContent = isDark(to) ? '✦' : '❄';
button.classList.toggle('kkpt-dark', isDark(whichPage()));
button.setAttribute('aria-label', isDark(to) ? '燃尽天空，进入 Kuronata' : '驱散黑暗，回到 Kuranoka');
}

// Accept the two standard MediaWiki link forms, while rejecting
// edit/action links, external sites and similarly named articles.
function wikiLinkPage(anchor, doc) {
try {
const url = new URL(anchor.href, doc.baseURI);
if (url.origin !== location.origin) return null;
const action = url.searchParams.get('action');
if (action && action !== 'view') return null;
let title = url.searchParams.get('title');
if (!title) {
const matched = url.pathname.match(/^\/wiki\/([^/?#]+)\/?$/);
if (matched) title = decodeURIComponent(matched[1]);
}
title = (title || '').replace(/_/g, ' ');
return title === 'Kuranoka' || title === 'Kuronata' ? title : null;
} catch (_) {
return null;
}
}

function decoratePortalLinks(doc, targetPage) {
// Use only the article: sidebar, edit tools and site-wide links
// must retain their usual navigation behavior.
const content = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!content) return;
content.querySelectorAll('a[href]').forEach(anchor => {
if(anchor.classList.contains('kkpt-fate-gear'))return;
if (wikiLinkPage(anchor, doc) !== targetPage) return;
anchor.classList.add('kkpt-portal-link');
anchor.classList.toggle('kkpt-portal-red', targetPage === 'Kuronata');
anchor.classList.toggle('kkpt-portal-blue', targetPage === 'Kuranoka');
const caption = (anchor.textContent || '').trim();
if (caption) anchor.dataset.kkptText = caption.slice(0, 120);
anchor.setAttribute('aria-label', caption + '，切换至 ' + targetPage);
});
}

function watchPortalLinks(doc, targetPage) {
decoratePortalLinks(doc, targetPage);
if (doc.__kkptPortalObserver) return;
const root = doc.querySelector('#mw-content-text,.mw-parser-output');
if (!root) return;
let pending=false;
const observer = new MutationObserver(() => {
if(pending)return;
pending=true;
setTimeout(()=>{
pending=false;
decoratePortalLinks(doc,targetPage);
},120);
});
observer.observe(root, {childList:true,subtree:true});
doc.__kkptPortalObserver = observer;
}

function isPlainClick(event) {
return !event.defaultPrevented && event.button === 0 &&
!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
}

function findAnchor(event, doc) {
const target = event.target;
return target && target.nodeType === 1 &&
typeof target.closest === 'function'
? target.closest('a[href],button.kkpt-fate-gear') : null;
}

function portalClick(event, doc, targetPage, nextActive) {
if (!isPlainClick(event)) return false;
const anchor = findAnchor(event, doc);
const gear=anchor?.classList.contains('kkpt-fate-gear')&&
anchor.dataset.kkptTargetPage===targetPage;
if (!anchor || (anchor.target && anchor.target !== '_self') ||
anchor.hasAttribute('download') ||
(!gear&&wikiLinkPage(anchor, doc)!==targetPage)) return false;
event.preventDefault();
if(animating||gearPending)return true;
// Both directions start playback during the trusted user gesture.
const score=armReturnScore(targetPage);
if(targetPage==='Kuronata'&&score&&!score.beatScene){
score.beatScene=createMarenoiaBeatScene(score);
}
startFatePrelude(anchor,targetPage);
primeSound(); // Synchronous click activation unlocks Web Audio.
if(gear) {
beginFateSwap(anchor,nextActive);
} else {
requestSwap(nextActive);
}
return true;
}

// The Infobox gear begins to turn before the actual world changes.
function beginFateSwap(anchor,nextActive) {
if(animating||gearPending||nextActive===active)return;
gearPending=true;
anchor.classList.add('kkpt-fate-gear-turning');
setTimeout(()=>{
gearPending=false;
requestSwap(nextActive);
},2020);
setTimeout(()=>anchor.classList.remove('kkpt-fate-gear-turning'),3300);
}

function fateGearShape() {
const parts=[];
for(let i=0;i<48;i++) {
const a=i/48*Math.PI*2-Math.PI/2;
const r=(i%4===0||i%4===3)?21:16.8;
parts.push((i?'L':'M')+(24+Math.cos(a)*r).toFixed(2)+' '+
(24+Math.sin(a)*r).toFixed(2));
}
return parts.join(' ')+' Z';
}

function mountFateGear(doc,targetPage) {
if(doc.querySelector('.kkpt-fate-gear'))return;
const content=doc.querySelector('#mw-content-text,.mw-parser-output');
if(!content)return;
// The fate wheel stays inside the native Infobox caption, but is
// positioned independently: it must NEVER push the title off-center.
const box=content.querySelector('table.infobox.vcard,table.infobox');
const host=box?.caption ||
box?.querySelector('th.infobox-above,th.infobox-title,th[colspan]')||
doc.querySelector('#firstHeading .mw-page-title-main,'+
'.mw-page-title-main,#firstHeading');
if(!host)return;
host.classList.add('kkpt-fate-host');
const anchor=doc.createElement('button');
anchor.type='button';
anchor.className='kkpt-fate-gear';
// A native button cannot be mistaken for an article link by
// MediaWiki Popups, including in previews loaded into iframes.
anchor.dataset.kkptTargetPage=targetPage;
const gearLabel=targetPage==='Kuronata'
?'命运的齿轮 · 唤醒 Kuronata':'命运的齿轮 · 回到 Kuranoka';
anchor.setAttribute('aria-label',gearLabel);
anchor.innerHTML='<svg class="kkpt-fate-gear-svg" viewBox="0 0 48 48" '+
'aria-hidden="true" focusable="false"><path d="'+fateGearShape()+
'"/><circle cx="24" cy="24" r="8.5"/>'+
'<circle cx="24" cy="24" r="3"/></svg>';
host.appendChild(anchor);

// Fixed corner placement: no title measurements, ResizeObserver
// or reflow during the animation.
}

// Read backgrounds after background-template code populates --bg-image.
function backgroundUrls(doc) {
const urls = new Set();
const selector = [doc.documentElement, doc.body];
try {
doc.querySelectorAll('.background-theme,[class*="background"],[style*="background"],#mw-content-text,.citizen-page-container')
.forEach((el, i) => { if (i < 18) selector.push(el); });
} catch (e) { /* use html/body */ }
function add(value) {
if (!value) return;
const pattern = /url$\s*(['"]?)(.*?)\1\s*$/gi;
let match;
while ((match = pattern.exec(value))) {
try { urls.add(new URL(match[2], doc.baseURI).href); } catch (e) { /* ignore */ }
}
if (/^https?:\/\/\S+\.(?:jpg|jpeg|png|webp|avif)(?:\?\S*)?$/i.test(value)) {
try { urls.add(new URL(value, doc.baseURI).href); } catch (e) { /* ignore */ }
}
}
selector.forEach(el => {
if (!el) return;
try {
[null, '::before', '::after'].forEach(pseudo => {
const style = doc.defaultView.getComputedStyle(el, pseudo);
if (!style) return;
add(style.backgroundImage);
add(style.getPropertyValue('--bg-image'));
add(style.getPropertyValue('--background-image'));
});
if (el.dataset) add(el.dataset.bgImage);
} catch (e) { /* style not yet ready */ }
});
return [...urls];
}

function warmImage(url) {
if (imagePool.has(url)) return imagePool.get(url).promise;
const image = new Image();
const promise = new Promise(resolve => {
let finished = false;
const timeout = setTimeout(() => done(false), 5000);
function done(ok) {
if (finished) return;
finished = true;
clearTimeout(timeout);
resolve(ok);
}
image.onload = () => done(true);
image.onerror = () => done(false);
image.src = url;
if (image.complete) done(image.naturalWidth > 0);
}).then(ok => ok && image.decode
? Promise.race([image.decode().then(() => true).catch(() => true),sleep(900).then(() => true)])
: ok);
imagePool.set(url, { image, promise });
return promise;
}

async function warmBackgrounds(doc) {
const urls = backgroundUrls(doc);
await Promise.allSettled(urls.map(warmImage));
}

function wireFrame() {
try {
const doc = frame.contentDocument;
if (!doc) return;
otherTitle = doc.title || otherTitle;
// The preview exists only for the animated reveal. Pausing
// its hidden ambience avoids doubling ongoing render work.
doc.documentElement.classList.add('kkpt-frame-inactive');
watchPortalLinks(doc, basePage);
mountFateGear(doc, basePage);
if (doc.__kkptFrameBridge) return;
doc.__kkptFrameBridge = true;

// Non-anchor navigation should leave the iframe and open normally
// in the top window, so the browser's URL doesn't become stale.
doc.addEventListener('click', event => {
if (!active || !isPlainClick(event)) return;
if (portalClick(event, doc, basePage, false)) return;
const el = findAnchor(event, doc);
if (!el || (el.target && el.target !== '_self')) return;
const href = el.href;
if (!href || href.startsWith('javascript:')) return;
const next = new URL(href, doc.baseURI);
// Same-document fragments stay inside the temporary preview.
const currentFrame = new URL(frame.contentWindow.location.href);
if (next.origin === currentFrame.origin &&
next.pathname === currentFrame.pathname &&
next.search === currentFrame.search && next.hash) {
history.replaceState(history.state, '', next.href);
return;
}
event.preventDefault();
navigateRealPage(next.href);
}, true);

doc.addEventListener('submit', event => {
if (active && event.target instanceof doc.defaultView.HTMLFormElement) {
event.target.target = '_top';
}
}, true);
} catch (err) {
console.warn('[KuranokaPageTransition] Frame link bridge unavailable:', err);
}
}

function warmFrame() {
if (loading) return loading;
frame = document.createElement('iframe');
frame.id = 'kkpt-preview';
frame.src = otherUrl.href; // set BEFORE insertion, avoids extra initial history hop
frame.title = otherPage + ' 预载页面';
frame.tabIndex = -1;
frame.setAttribute('aria-hidden', 'true');
frame.setAttribute('loading', 'eager');
frame.style.clipPath = hideClip;
// Load all resources in advance, but don't composite the hidden
// full-screen Wiki until its first transition frame.
frame.style.visibility = 'hidden';

loading = new Promise(resolve => {
let settled = false;
let preparing = false;
let poll = null;
function finish(ok, reason) {
if (settled) return;
settled = true;
clearInterval(poll);
ready = ok;
if (!ok) console.warn('[KuranokaPageTransition] Preview:', reason);
resolve(ok);
}
async function inspect() {
if (settled || preparing) return;
try {
const doc = frame.contentDocument;
if (!doc || !doc.querySelector('#mw-content-text,.mw-parser-output')) return;
preparing = true;
clearInterval(poll);
await sleep(320); // Background.js / wiki style scripts
await Promise.race([warmBackgrounds(doc), sleep(3600)]);
await sleep(120);
await Promise.race([warmBackgrounds(doc), sleep(1300)]);
frame.contentWindow.scrollTo(0, 0);
wireFrame();
finish(true);
} catch (err) { finish(false, String(err)); }
}
frame.addEventListener('load', () => {
if (!settled && !preparing) inspect();
});
frame.addEventListener('error', () => finish(false,'iframe 网络加载错误'));
document.body.append(frame);
poll = setInterval(inspect, 130);
setTimeout(() => { if (!settled && !preparing) finish(false,'18 秒仍未找到目标正文'); }, 18000);
});

warmBackgrounds(document).catch(() => {});
setTimeout(() => warmBackgrounds(document).catch(() => {}), 700);
return loading;
}

// Shared, low-resolution atmospherics: return of V14's dark smoke,
// long-lived torn paper, shockwaves, blue-white petals and pollen.
// Only the combustion CURTAIN is replaced by the bright V2 engine.
let atmosphereAssetCache=null;
const atmosphereNoiseCache=new Map();
function createAtmosphere(canvas,buildOneOnly=false) {
const ctx = canvas.getContext('2d', {alpha:true});
const rand = n => {
const cached=atmosphereNoiseCache.get(n);
if(cached!==undefined)return cached;
const x = Math.sin(n*127.1+311.7)*43758.5453123;
const value=x-Math.floor(x);
atmosphereNoiseCache.set(n,value);
return value;
};
const clamp01 = n => Math.max(0,Math.min(1,n));
function valueNoise(x,y,seed) {
const ix=Math.floor(x), iy=Math.floor(y);
let fx=x-ix,fy=y-iy;
fx=fx*fx*(3-2*fx);fy=fy*fy*(3-2*fy);
const h=(a,b)=>rand(a*171.3+b*513.7+seed*89.1);
const a=h(ix,iy)*(1-fx)+h(ix+1,iy)*fx;
const b=h(ix,iy+1)*(1-fx)+h(ix+1,iy+1)*fx;
return a*(1-fy)+b*fy;
}
function smokeTexture(seed,dark) {
const tex=document.createElement('canvas');
tex.width=tex.height=112;
const g=tex.getContext('2d');
const data=g.createImageData(112,112);
for(let y=0;y<112;y++) for(let x=0;x<112;x++){
const u=(x-56)/56,v=(y-56)/56;
const curl=valueNoise(u*2.9+11,v*2.9+1,seed);
const curl2=valueNoise(u*3.4+3,v*3.4+7,seed+7);
const wx=u+.47*(curl-.5),wy=v+.40*(curl2-.5);
const radius=Math.sqrt(wx*wx*.91+wy*wy*1.13);
const envelope=clamp01((1.05-radius)/.56);
const low=valueNoise(u*4.1+4,v*4.1-9,seed+2);
const high=valueNoise(u*11.4-3,v*11.4+6,seed+5);
const fibers=valueNoise(u*22.0+1,v*16.0+5,seed+9);
const density=clamp01((low*.62+high*.28+fibers*.10-.28)*2.0)*
envelope*envelope;
const i=(y*112+x)*4;
const variation=low*28+high*15;
if(dark){
data.data[i]=5+variation*.37;
data.data[i+1]=5+variation*.33;
data.data[i+2]=8+variation*.38;
}else{
data.data[i]=44+variation;
data.data[i+1]=91+variation;
data.data[i+2]=125+variation;
}
data.data[i+3]=Math.round(240*density);
}
g.putImageData(data,0,0);
return tex;
}
// V2-inspired white-hot additive sprites, but with noise-eroded
// silhouettes instead of repetitive smooth, elliptical balls.
function glowTexture(seed,mode) {
const tex=document.createElement('canvas');
tex.width=96;tex.height=128;
const g=tex.getContext('2d');
const gradient=g.createRadialGradient(48,68,0,48,68,64);
const colors=mode==='fire'
? [[0,'#fffef1'],[.14,'#fff4bb'],[.34,'#ffd04d'],
[.55,'#ff841bcc'],[.80,'#bc290749'],[1,'#6e030000']]
: mode==='blue'
? [[0,'#ffffff'],[.19,'#f1ffff'],[.40,'#a2efff'],
[.68,'#5298ff99'],[1,'#345bf000']]
: [[0,'#ffffff'],[.19,'#fff8cd'],[.49,'#ff9b28cc'],
[1,'#ff380000']];
colors.forEach(([p,c])=>gradient.addColorStop(p,c));
g.fillStyle=gradient;g.fillRect(0,0,96,128);
const img=g.getImageData(0,0,96,128);
for(let y=0;y<128;y++)for(let x=0;x<96;x++){
const u=(x-48)/48,v=(y-64)/64;
const cloud=valueNoise(u*4+seed*1.9,v*4+seed*.7,seed+18);
const fiber=valueNoise(u*11+3,v*8+17,seed+41);
const shifted=u+.18*(cloud-.5);
const irregular=clamp01((1.15-Math.abs(shifted))/.52)*
clamp01((1.05-Math.abs(v+.12*(fiber-.5)))/.42);
const n=.59+.77*cloud+.28*fiber;
const alphaIndex=(y*96+x)*4+3;
img.data[alphaIndex]=Math.round(img.data[alphaIndex]*
irregular*clamp01(n));
}
g.putImageData(img,0,0);
return tex;
}
// V25: the profiler found one 270ms long task here. Build the
// EXACT SAME 17 textures in separate tasks, never all at once.
// The stable noise cache avoids repeating the costly sin hash.
const cache=atmosphereAssetCache ||= {
sootSprites:[],mistSprites:[],FIRE_GLOW:[],BLUE_GLOW:[],
EMBER_GLOW:null
};
function buildNextAsset(){
let n=cache.sootSprites.length;
if(n<4){cache.sootSprites.push(smokeTexture(n+17,true));return true;}
n=cache.mistSprites.length;
if(n<4){cache.mistSprites.push(smokeTexture(n+51,false));return true;}
n=cache.FIRE_GLOW.length;
if(n<4){cache.FIRE_GLOW.push(glowTexture(n+1,'fire'));return true;}
n=cache.BLUE_GLOW.length;
if(n<4){cache.BLUE_GLOW.push(glowTexture(n+8,'blue'));return true;}
if(!cache.EMBER_GLOW){
cache.EMBER_GLOW=glowTexture(21,'ember');return true;
}
return false;
}
if(buildOneOnly)return buildNextAsset();
// Normally prewarming is already complete before a user clicks.
// The fallback also works if an animation is started immediately.
while(buildNextAsset()){}
const {sootSprites,mistSprites,FIRE_GLOW,BLUE_GLOW,EMBER_GLOW}=cache;
const combustion=[];
const residualSoot=[];
const tornPaper=[];
let lastElapsed=0,spawnRemainder=0,sootRemainder=0,shardRemainder=0;
function advanceCombustion(seconds,progress,dark,elapsed,w,h) {
const dt=Math.min(.065,Math.max(0,elapsed-lastElapsed));
lastElapsed=elapsed;
const live=progress>.01&&progress<.985;
if(live){
// More long-lived sparks than V25, far below V31's 370/s.
// Blue petals are softer/less dense: fewer layers noticeably
// reduce reverse-direction Canvas work without touching fire.
const flow=(dark?132:64)*Math.min(1.5,h/720)*
(.75+.25*Math.sin(Math.PI*progress));
spawnRemainder+=dt*flow;
const births=Math.min(65,Math.floor(spawnRemainder));
spawnRemainder-=births;
for(let j=0;j<births&&combustion.length<1320;j++){
const y=Math.random()*h;
const edge=edgeAt(y,seconds,progress,w);
const r=Math.random();
const kind=dark
? r<.38?'flame':r<.91?'ember':'ash'
: r<.37?'glow':r<.81?'leaf':'pollen';
const small=kind==='ember'||kind==='pollen';
const soot=kind==='ash';
const life=dark
? (soot?.7+Math.random()*1.1:
small?.9+Math.random()*1.55:.42+Math.random()*.76)
: 1.15+Math.random()*1.55;
combustion.push({
kind,x:edge+(dark?1:-1)*(Math.random()*47-8),
y:y+(Math.random()-.5)*25,
vx:(dark?1:-1)*(dark?(small?65+Math.random()*245:
14+Math.random()*154):
16+Math.random()*69),
vy:-(dark?(small?12+Math.random()*190:
32+Math.random()*171):12+Math.random()*57),
life,remaining:life,
radius:dark
? (soot?1.2+Math.random()*2.7:
small?2+Math.random()*5:9+Math.random()*19)
: kind==='glow'?26+Math.random()*49:
kind==='leaf'?4+Math.random()*6:
2+Math.random()*3,
angle:(Math.random()-.5)*1.1,
sprite:(Math.random()*4)|0,
seed:Math.random()*6.28
});
}
if(dark) {
// Unlike the traveling front, these black smoke plumes
// are born in world-space and remain over burnt paper.
sootRemainder+=dt*(h<680?32:46);
const sootBirths=Math.min(11,Math.floor(sootRemainder));
sootRemainder-=sootBirths;
for(let i=0;i<sootBirths&&residualSoot.length<(w<700?92:155);i++){
const y=Math.random()*h;
const life=2.15+Math.random()*1.60;
residualSoot.push({
x:edgeAt(y,seconds,progress,w)+5+Math.random()*83,
y:y+(Math.random()-.5)*48,
vx:8+Math.random()*39,vy:-18-Math.random()*83,
size:155+Math.random()*195,life,remaining:life,
sprite:(Math.random()*4)|0,
spin:(Math.random()-.5)*.8,
seed:Math.random()*6.28
});
}
// Charcoal sheets tear off in irregular polygons, not
// squares or narrow glitch streaks.
shardRemainder+=dt*(h<680?18:30);
const shardBirths=Math.min(7,Math.floor(shardRemainder));
shardRemainder-=shardBirths;
for(let i=0;i<shardBirths&&tornPaper.length<175;i++){
const y=Math.random()*h;
const life=.90+Math.random()*1.85;
const points=8+Math.floor(Math.random()*7);
const outline=Array.from({length:points},(_,j)=>({
a:Math.PI*2*j/points+(Math.random()-.5)*.50,
r:.25+Math.random()*1.06
}));
tornPaper.push({
x:edgeAt(y,seconds,progress,w)+(Math.random()-.20)*58,
y, vx:55+Math.random()*295,
vy:-190+Math.random()*270,
gravity:90+Math.random()*150,
radius:2+Math.pow(Math.random(),2.5)*22,
angle:Math.random()*6.28,
spin:(Math.random()-.5)*7,
outline,life,remaining:life,
seed:Math.random()*6.28
});
}
}
}
for(let i=combustion.length-1;i>=0;i--){
const p=combustion[i];
p.remaining-=dt;
if(p.remaining<=0){combustion.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*(dark?5:1.6)+p.seed)*
(dark?22:24))*dt;
p.y+=p.vy*dt;
p.vy-=(dark?17:7)*dt;
}
for(let i=residualSoot.length-1;i>=0;i--){
const p=residualSoot[i];
p.remaining-=dt;
if(p.remaining<=0){residualSoot.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*2+p.seed)*27)*dt;
p.y+=p.vy*dt;
p.size+=32*dt;
}
for(let i=tornPaper.length-1;i>=0;i--){
const p=tornPaper[i];
p.remaining-=dt;
if(p.remaining<=0){tornPaper.splice(i,1);continue;}
p.x+=(p.vx+Math.sin(elapsed*4+p.seed)*42)*dt;
p.y+=p.vy*dt;
p.vy+=p.gravity*dt;
p.angle+=p.spin*dt;
}
}
const particles=Array.from({length:innerWidth<700?40:62},(_,i)=>({
seed:rand(i*4+71),height:rand(i*5+13),
lifetime:.5+rand(i*8+37)*.7,
phase:rand(i*9+21),sprite:i%4,
scale:.72+rand(i*7+9)*1.25,
bend:rand(i*15+23)*6.28
}));
const motes=Array.from({length:innerWidth<700?56:115},(_,i)=>({
y:rand(i*3+17),phase:rand(i*9+43),
speed:100+rand(i*12+5)*340,
drift:82+rand(i*15+2)*330,
length:3+rand(i*17+7)*16
}));
const shockDebris=Array.from({length:innerWidth<700?32:66},(_,i)=>({
angle:rand(i*17+131)*Math.PI*2,
velocity:190+rand(i*11+51)*900,
seed:rand(i*5+79),
length:6+rand(i*7+17)*26
}));
function pressureWave(x,y,radius,power,dark,time) {
if(power<=.005)return;
const core=ctx.createRadialGradient(x,y,0,x,y,radius*.75);
if(dark){
core.addColorStop(0,'rgba(255,231,169,'+(.20*power)+')');
core.addColorStop(.17,'rgba(253,88,18,'+(.21*power)+')');
core.addColorStop(.60,'rgba(106,16,12,'+(.09*power)+')');
core.addColorStop(1,'rgba(30,0,0,0)');
}else{
core.addColorStop(0,'rgba(237,255,255,'+(.24*power)+')');
core.addColorStop(.26,'rgba(98,193,255,'+(.18*power)+')');
core.addColorStop(1,'rgba(0,29,100,0)');
}
ctx.globalCompositeOperation='screen';
ctx.fillStyle=core;
ctx.fillRect(x-radius,y-radius,radius*2,radius*2);
ctx.globalCompositeOperation='source-over';
}
return function drawAtmosphere(seconds,progress,dark,elapsed,cells) {
const w=innerWidth,h=innerHeight;
// Dawn uses soft-focus sprites, so 0.45 is visually sufficient.
// This cuts ~33% of full-screen pixels compared with 0.55.
const scale=dark?(w<700?.43:.55):(w<700?.35:.45);
const bw=Math.max(1,Math.round(w*scale));
const bh=Math.max(1,Math.round(h*scale));
if(canvas.width!==bw||canvas.height!==bh){canvas.width=bw;canvas.height=bh;}
ctx.setTransform(scale,0,0,scale,0,0);
ctx.clearRect(0,0,w,h);
const envelope=Math.sin(Math.PI*progress);
const fade=clamp01(progress/.075)*clamp01((1-progress)/.065);
advanceCombustion(seconds,progress,dark,elapsed,w,h);
const sprites=dark?sootSprites:mistSprites;
// New-world side: red fire trails to the right when burning,
// blue dawn trails to the left when returning.
const direction=dark?1:-1;
// Broken smoke banks with different depths and sizes. The old
// aligned rows created an artificial horizontal fog ribbon.
ctx.globalCompositeOperation='source-over';
const bands=dark?Math.max(8,Math.ceil(h/116)):
Math.max(6,Math.ceil(h/136));
for(let i=0;i<bands;i++){
const baseY=(i+.15+rand(i*11+39)*.70)*h/bands;
const y=baseY+31*Math.sin(seconds*1.6+i*1.47);
const x=edgeAt(y,seconds,progress,w)+direction*
(dark?76+rand(i*19+6)*260:120)+
Math.sin(seconds*.93+i*1.3)*37;
const width=dark?170+rand(i*29+12)*220:250;
const height=dark?165+rand(i*7+5)*170:245;
ctx.save();
ctx.globalAlpha=(dark?.34:.21)*fade*(.55+.45*envelope);
ctx.translate(x,y);
ctx.rotate(.27*Math.sin(i*2.1+seconds*.9));
ctx.drawImage(sprites[i%4],-width/2,-height/2,width,height);
ctx.restore();
}
// Independent turbulent billows peel away and rise.
for(let particleIndex=0;particleIndex<particles.length;
particleIndex+=dark?1:2){
const item=particles[particleIndex];
const age=((elapsed/item.lifetime+item.phase)%1);
const baseY=item.height*h;
const y=baseY-age*(dark?230:128)+(Math.sin(elapsed*2+item.bend)*15);
if(y< -230||y>h+230)continue;
const frontier=edgeAt(baseY,seconds,progress,w);
const x=frontier+direction*(age*(dark?225:135)+
30*Math.sin(age*6.3+item.bend));
const size=(dark?174:145)*item.scale*(.68+age*1.9);
const opacity=(dark?.43:.26)*Math.sin(Math.PI*age)*fade*
(.55+.45*envelope);
if(opacity<=.005)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(x,y);
ctx.rotate((item.bend-3.14)*.14+age*.85*direction);
ctx.scale(1.18,.84);
ctx.drawImage(sprites[item.sprite],-size/2,-size/2,size,size);
ctx.restore();
}
// Residual devastation: coal-black plumes stay pinned to their
// original burn positions, expanding long after the tear passes.
// Composited *before* fire, so the hot core cuts through smoke.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of residualSoot){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.14)*
Math.pow(1-age,.49)*(.66+.24*Math.sin(p.seed*3)**2)*fade;
if(opacity<.009)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.spin+age*.33*Math.sin(p.seed));
ctx.scale(1.20,.92);
const s=p.size*(1+age*.68);
ctx.drawImage(sootSprites[p.sprite],-s/2,-s/2,s,s);
ctx.restore();
}
ctx.restore();
}else{
// The inverse is a slow, organic unfurling: broad milky
// radiance behind the rebuilt sky, not a cold explosion.
ctx.save();
ctx.globalCompositeOperation='screen';
for(let n=0;n<2;n++){
const yy=(n+.64)*h/2.25+Math.sin(seconds*.8+n*2)*30;
const xx=edgeAt(yy,seconds,progress,w)-
(88+55*Math.sin(n*2.1+seconds*.7));
const radius=145+65*Math.sin(seconds*.7+n*1.7)**2;
const bloom=ctx.createRadialGradient(xx,yy,8,xx,yy,radius);
bloom.addColorStop(0,'rgba(250,255,255,.10)');
bloom.addColorStop(.33,'rgba(164,237,255,.07)');
bloom.addColorStop(.74,'rgba(117,198,255,.04)');
bloom.addColorStop(1,'rgba(117,198,255,0)');
ctx.globalAlpha=fade;
ctx.fillStyle=bloom;
ctx.fillRect(xx-radius,yy-radius,radius*2,radius*2);
}
ctx.restore();
}
// The impact happens at ignition and again as the rupture reaches
// the middle of the screen; pulses are intentionally fleeting.
for(const moment of (dark?[.10,.48]:[])){
const age=(progress-moment)/.125;
if(age<0||age>1)continue;
const intensity=(1-age)*(1-age)*fade;
// A single-frame-ish exposure bloom punches through
// the entire page; the tone is red or icy blue by direction.
ctx.globalCompositeOperation='screen';
ctx.fillStyle=dark
? 'rgba(255,81,26,'+(.095*intensity)+')'
: 'rgba(150,219,255,'+(.080*intensity)+')';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
const x=edgeAt(h*.51,seconds,progress,w);
const y=h*.51;
const radius=95+age*Math.max(w,h)*.9;
pressureWave(x,y,radius,intensity,dark,seconds);
ctx.globalAlpha=(dark?.20:.28)*intensity;
ctx.lineWidth=(dark?2.5:2)*Math.max(.4,1-age);
ctx.strokeStyle=dark?'#ffb36c':'#b5eaff';
ctx.beginPath();
for(let i=0;i<=110;i++){
const a=i/110*Math.PI*2;
const jag=1+.03*Math.sin(a*29+seconds*12)+
.05*Math.sin(a*13-seconds*5);
const rx=Math.cos(a)*radius*jag,ry=Math.sin(a)*radius*jag;
if(i===0)ctx.moveTo(x+rx,y+ry);else ctx.lineTo(x+rx,y+ry);
}
ctx.stroke();
ctx.globalAlpha=1;
// Only combustion throws straight, fiery projectile trails.
// Return-to-blue has no streaks or sparks whatsoever.
if(dark){
ctx.globalCompositeOperation='screen';
for(const bit of shockDebris){
const f=age*(.5+bit.seed*.5);
const travel=bit.velocity*f;
const px=x+Math.cos(bit.angle)*travel;
const py=y+Math.sin(bit.angle)*travel;
const vx=Math.cos(bit.angle)*bit.length*(1-age);
const vy=Math.sin(bit.angle)*bit.length*(1-age);
ctx.globalAlpha=(dark?.82:.68)*intensity*(.3+bit.seed*.7);
ctx.strokeStyle=dark?'#ffdd9b':'#e0faff';
ctx.lineWidth=.6+bit.seed*1.3;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(px-vx,py-vy);
ctx.stroke();
}
}
ctx.globalCompositeOperation='source-over';
ctx.globalAlpha=1;
}
// Real flame tongues break OUT of the burn front into the sky.
// They are thin, tapered Bezier ribbons with an unstable pulse,
// rather than round glowing particles or a uniform bright line.
if(dark){
ctx.save();
ctx.globalCompositeOperation='screen';
const count=Math.ceil(h/17);
for(let j=0;j<count;j++){
const seed=rand(j*13+167);
const y=(j+seed*.78)*11.5-5;
const x=edgeAt(y,seconds,progress,w);
if(x < -90 || x > w+90)continue;
const ripple=Math.sin(seconds*(3.4+rand(j*11+4)*2.4)+
j*2.09+seed*3.1);
const heat=clamp01(.58+ripple*.34+
.16*Math.sin(j*1.17-seconds*7.1));
if(heat<.34)continue;
const length=(22+rand(j*23+19)*75)*(.5+heat*.94);
const bend=.18+rand(j*17+42)*.66;
const tipX=x-length*(.76+.19*seed);
const tipY=y-length*bend;
const thick=(3.2+rand(j*31+11)*10.3)*(.5+heat);
const gradient=ctx.createLinearGradient(x,y,tipX,tipY);
gradient.addColorStop(0,'rgba(255,255,242,.99)');
gradient.addColorStop(.28,'rgba(255,224,84,.96)');
gradient.addColorStop(.59,'rgba(255,76,10,.64)');
gradient.addColorStop(1,'rgba(182,17,6,0)');
ctx.beginPath();
ctx.moveTo(x+2,y+thick*.5);
ctx.bezierCurveTo(
x-length*.22,y-thick*.25,
tipX+length*.36,tipY+thick*.68,tipX,tipY);
ctx.bezierCurveTo(
tipX+length*.32,tipY-thick*.22,
x-length*.17,y-thick*.74,
x+2,y-thick*.65);
ctx.closePath();
ctx.globalAlpha=Math.min(1,heat*1.08)*fade;
ctx.fillStyle=gradient;
ctx.shadowBlur=0;
ctx.fill();
if(heat>.66){
ctx.globalAlpha=(heat-.54)*1.40*fade;
ctx.strokeStyle='#fffce0';ctx.lineWidth=.9+heat*1.1;
ctx.beginPath();ctx.moveTo(x,y);
ctx.quadraticCurveTo(x-length*.3,y-length*.11,
tipX+length*.19,tipY+thick*.18);
ctx.stroke();
}
}
ctx.restore();
}

// Carbonized paper has a fine, ragged edge. The charcoal layer
// persists continuously, but the white-hot core does NOT.
ctx.save();
ctx.beginPath();
for(let y=-12,i=0;y<=h+12;y+=3.6,i++){
const x=edgeAt(y,seconds,progress,w);
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
}
ctx.lineCap='round';ctx.lineJoin='round';
if(dark){
ctx.strokeStyle='rgba(9,5,7,.81)';
ctx.lineWidth=18;ctx.shadowBlur=0;
ctx.stroke();
ctx.strokeStyle='rgba(210,45,9,.53)';
ctx.lineWidth=6;
ctx.stroke();
}else{
ctx.strokeStyle='rgba(27,95,190,.22)';
ctx.lineWidth=27;ctx.shadowColor='#56bdff';ctx.shadowBlur=17;
ctx.stroke();
ctx.strokeStyle='rgba(132,225,255,.51)';
ctx.lineWidth=11;ctx.shadowColor='#8aeaff';ctx.shadowBlur=11;
ctx.stroke();
ctx.strokeStyle='rgba(249,255,255,.65)';
ctx.lineWidth=2.7;ctx.shadowBlur=4;
ctx.stroke();
}
ctx.restore();
if(dark){
// Intermittent ignition cells: varying width/color/intensity
// make the bright edge resemble burning fibres, not neon.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.lineCap='round';
for(let y=-8;y<h+8;y+=5.8){
const intensity=clamp01(.58+
.29*Math.sin(y*.054+seconds*3.7)+
.21*Math.sin(y*.147-seconds*8.9)+
.13*Math.sin(y*.337+seconds*16.4));
if(intensity<.47)continue;
const x=edgeAt(y,seconds,progress,w);
const nextX=edgeAt(y+5.8,seconds,progress,w);
ctx.globalAlpha=intensity*fade;
ctx.lineWidth=1.4+intensity*4.6;
ctx.shadowBlur=0;
ctx.strokeStyle=intensity>.75?'#fff8d7':
intensity>.58?'#ffd369':'#ff831b';
ctx.beginPath();ctx.moveTo(x,y);
ctx.lineTo(nextX,y+5.8);ctx.stroke();
}
ctx.restore();
// Fragmented ignition on real microscopic perforations.
// Missing arc sections stop them resembling punched circles.
ctx.save();
ctx.globalCompositeOperation='screen';
ctx.shadowBlur=0;
for (let i=0; i<cells.length; i++) {
const c=cells[i];
ctx.globalAlpha=(.42+.34*c.heat)*fade;
ctx.strokeStyle=c.heat>.73?'#fff6bf':
c.heat>.38?'#ffd166':'#ff621c';
ctx.lineWidth=.8+Math.min(2.6,c.radius*.24);
const n=c.points.length;
ctx.beginPath();
for (let j=0;j<n;j++) {
if ((j+i*3)%5>2)continue;
const a=c.points[j],b=c.points[(j+1)%n];
ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);
}
ctx.stroke();
}
ctx.restore();
// Small carbon flecks stick to the still-blue paper just
// ahead of the bite; no large rectangular glitch debris.
ctx.save();
for(let j=0;j<Math.ceil(h/10);j++){
const y=(j+rand(j*5+61)*.8)*10;
const x=edgeAt(y,seconds,progress,w)-
(5+rand(j*17+38)*24);
const size=.5+rand(j*29+11)*2.5;
const visible=.25+.59*rand(j*13+7);
ctx.globalAlpha=visible*fade;
ctx.fillStyle='#150b0a';
ctx.beginPath();
ctx.ellipse(x,y,size*.71,size,rand(j*7+31)*3.14,
0,Math.PI*2);
ctx.fill();
}
ctx.restore();
}
// The key property V3-V6 lost: particles remain at their
// birth position while the front advances. A wide, incandescent
// WAKE builds behind the tearing page instead of following
// it as one thin, plastic-looking stripe.
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const p of combustion){
if(p.kind==='ash'||p.kind==='leaf'||p.kind==='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(p.remaining/.22)*
clamp01(age/.08)*(1-age*.30)*
(p.kind==='ember'?.74:p.kind==='glow'?.13:.66)*fade*
(dark?Math.exp(-Math.max(0,p.x-
edgeAt(p.y,seconds,progress,w))/70):1);
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle+Math.sin(elapsed*4+p.seed)*.13);
const large=p.kind==='flame';
const sx=p.radius*(p.kind==='glow'?1.7:large?.96:1.32)*(1+age*.32);
const sy=p.radius*(p.kind==='glow'?1.4:large?1.78:1.35)*(1+age*.57);
const sprite=p.kind==='flame'?FIRE_GLOW[p.sprite]:
p.kind==='glow'?BLUE_GLOW[p.sprite]:EMBER_GLOW;
ctx.drawImage(sprite,-sx,-sy,sx*2,sy*2);
ctx.restore();
}
ctx.restore();
// Rebirth uses soft, rotating, organic leaf/petal silhouettes,
// minute circular pollen and spacious white-blue bokeh. No
// rectangular ions, no warm textures and NO glowing streaks.
if(!dark){
ctx.save();
ctx.globalCompositeOperation='screen';
for(const p of combustion){
if(p.kind!=='leaf'&&p.kind!=='pollen')continue;
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.17)*clamp01(p.remaining/.55)*
(p.kind==='leaf'?.47:.28)*fade;
if(opacity<.012)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x+11*Math.sin(elapsed*1.6+p.seed),p.y);
ctx.rotate(p.angle+age*1.65*Math.sin(p.seed*2.5));
if(p.kind==='leaf'){
const r=p.radius;
ctx.shadowBlur=5;
ctx.shadowColor='#bbf4ff';
ctx.fillStyle=p.sprite%2?'#e6ffff':'#ffffff';
ctx.beginPath();
ctx.moveTo(0,-r*1.65);
ctx.bezierCurveTo(r*.97,-r*.48,r*.85,r*.60,0,r*1.35);
ctx.bezierCurveTo(-r*.92,r*.28,-r*.94,-r*.57,0,-r*1.65);
ctx.fill();
ctx.globalAlpha=opacity*.38;
ctx.strokeStyle='#70c9ea';
ctx.lineWidth=.65;
ctx.beginPath();ctx.moveTo(0,-r*1.15);
ctx.quadraticCurveTo(-r*.17,0,0,r*.95);ctx.stroke();
}else{
const r=p.radius;
// Reuse the cached soft sprite; a fresh radial
// gradient for every pollen mote per frame was costly.
ctx.globalAlpha=opacity*.72;
ctx.drawImage(BLUE_GLOW[p.sprite],-r*3,-r*3,r*6,r*6);
}
ctx.restore();
}
ctx.restore();
}
// Minute black flecks, never rectangular shards on the blue side.
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of combustion){
if(p.kind!=='ash')continue;
ctx.globalAlpha=clamp01(p.remaining/.25)*.7*fade;
ctx.fillStyle='#190d10';
ctx.save();ctx.translate(p.x,p.y);ctx.rotate(elapsed*2+p.angle);
ctx.fillRect(-p.radius*.5,-p.radius*.5,p.radius,p.radius*1.8);
ctx.restore();
}
ctx.restore();
// Irregular burnt page sections tumble away and reveal their
// blackened underside, with an occasional incandescent rim.
if(dark){
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const p of tornPaper){
const age=1-p.remaining/p.life;
const opacity=clamp01(age/.08)*clamp01(p.remaining/.4)*fade;
if(opacity<.01)continue;
ctx.save();
ctx.globalAlpha=opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.angle);
ctx.beginPath();
p.outline.forEach((v,i)=>{
const px=Math.cos(v.a)*v.r*p.radius;
const py=Math.sin(v.a)*v.r*p.radius*.74;
if(i===0)ctx.moveTo(px,py);else ctx.lineTo(px,py);
});
ctx.closePath();
ctx.shadowBlur=7;
ctx.shadowColor='#090506';
ctx.fillStyle=p.seed>3?'#190d11':'#302025';
ctx.fill();
ctx.shadowBlur=0;
ctx.lineWidth=.8+Math.sin(p.seed)**2*.8;
ctx.strokeStyle=age<.48?'rgba(255,107,35,.48)':
'rgba(49,20,19,.47)';
ctx.stroke();
// Thin blue-white unburnt fibers still visible on a
// few ripped faces, before the back chars completely.
if(p.seed>4.5&&age<.52){
ctx.globalAlpha*=.45*(1-age);
ctx.strokeStyle='#c5e7f7';
ctx.beginPath();
ctx.moveTo(-p.radius*.42,-p.radius*.16);
ctx.quadraticCurveTo(0,p.radius*.25,p.radius*.28,0);
ctx.stroke();
}
ctx.restore();
}
ctx.restore();
}
// Sharp, directional embers / crystalline fragments, not blobs.
if(dark){ctx.save();
ctx.globalCompositeOperation='screen';
for(const mote of motes){
const age=(elapsed*.74+mote.phase)%1;
const yy=mote.y*h-age*mote.speed+Math.sin(age*12+mote.phase*8)*9;
const x=edgeAt(yy,seconds,progress,w)+direction*age*mote.drift;
if(x<-25||x>w+25||yy<-25||yy>h+25)continue;
const opacity=(1-age)*fade*.89;
ctx.globalAlpha=opacity;
ctx.strokeStyle='#ffb45d';
ctx.lineWidth=.8;
ctx.beginPath();
ctx.moveTo(x,yy);
ctx.lineTo(x-direction*mote.length*.4,yy+mote.length);
ctx.stroke();
}
ctx.restore();}
};
}

let atmosphereWarmPromise=null;
function prewarmAtmosphere() {
if(atmosphereWarmPromise)return atmosphereWarmPromise;
atmosphereWarmPromise=new Promise(resolve=>{
const scratchCanvas=document.createElement('canvas');
function step(){
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
// Exactly one texture per task: no more 270ms blocking call.
createAtmosphere(scratchCanvas,true);
if(atmosphereAssetCache?.EMBER_GLOW){resolve();return;}
setTimeout(step,24);
}
setTimeout(step,40);
});
return atmosphereWarmPromise;
}

let atmosphereEdge=null;
function edgeAt(y,seconds,progress,width){
return atmosphereEdge
? atmosphereEdge(y)
: makeEdge(progress,seconds,Boolean(window.__kkptVisualDark),width)(y);
}

// Original V2's moving flame sprites and three bright contours, rebuilt
// with bounded particle counts. No WebGL, no full-screen noise pass,
// no 1,000-point polygon or per-frame image-texture upload.
let sprites=null;
function makeSprites() {
if (sprites) return sprites;
function radial(stops) {
const el=document.createElement('canvas');
el.width=el.height=96;
const c=el.getContext('2d');
const g=c.createRadialGradient(48,48,0,48,48,48);
stops.forEach(pair=>g.addColorStop(pair[0],pair[1]));
c.fillStyle=g;c.fillRect(0,0,96,96);
return el;
}
sprites={
flame:radial([[0,'#fffbed'],[.18,'#fff2a0'],
[.43,'#ffb42b'],[.70,'#ff360088'],[1,'#8f050000']]),
ember:radial([[0,'#ffffff'],[.15,'#fff6a8'],
[.44,'#ff9900cc'],[1,'#ef280000']]),
smoke:radial([[0,'#080608dd'],[.30,'#100b10bb'],
[.62,'#160f1677'],[1,'#08050800']]),
sky:radial([[0,'#ffffff'],[.16,'#e6ffff'],
[.46,'#94deffe0'],[1,'#4ab5ff00']]),
mist:radial([[0,'#f2fdffb0'],[.4,'#abdffff0'],
[1,'#a9e7ff00']])
};
return sprites;
}

// V2's simple advancing boundary. The reader asked for the
// vibrant fire curtain, not a mathematically fractal tearing wire.
function makeEdge(t,seconds,dark,w) {
const center=dark
? w+105-(w+210)*smooth(t)
: -105+(w+210)*smooth(t);
const wobble=Math.sin(Math.PI*t);
return y=>center+wobble*(
17*Math.sin(y*.023+seconds*5.5)+
9*Math.sin(y*.063-seconds*8.4)+
4*Math.sin(y*.13+seconds*12)
);
}

// GPU-only ember flecks: ONE small draw call at most 30fps.
// The white-hot V25 fire, the smoke and the dawn stay unmodified 2D.
// No fullscreen pixel shader, FBM, flame quads or cyan rectangle.
function createGpuEmbers(){
const canvas=document.createElement('canvas');
canvas.id='kkpt-webgl';
canvas.setAttribute('aria-hidden','true');
let gl,program,buffer;
try{
gl=canvas.getContext('webgl2',{
alpha:true,antialias:false,depth:false,stencil:false,
premultipliedAlpha:false,preserveDrawingBuffer:false,
powerPreference:'low-power'
});
if(!gl)throw new Error('WebGL2 context unavailable');
const vert=`#version 300 es
precision mediump float;
layout(location=0) in vec4 aSpark;
uniform vec2 uSize;
uniform float uScale;
out float vOpacity;
void main(){
vec2 xy=aSpark.xy/uSize*2.0-1.0;
gl_Position=vec4(xy.x,-xy.y,0.0,1.0);
gl_PointSize=aSpark.z*uScale;
vOpacity=aSpark.w;
}`;
const frag=`#version 300 es
precision mediump float;
in float vOpacity;
out vec4 fragColor;
void main(){
vec2 p=gl_PointCoord*2.0-1.0;
float r=length(p);
if(r>=1.0)discard;
float a=pow(1.0-r,1.65)*vOpacity;
vec3 c=mix(vec3(1.0,.30,.035),
vec3(1.0,.93,.57),smoothstep(.40,.92,1.0-r));
fragColor=vec4(c,a);
}`;
function shader(type,source){
const s=gl.createShader(type);
gl.shaderSource(s,source);gl.compileShader(s);
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(s));
return s;
}
const vs=shader(gl.VERTEX_SHADER,vert);
const fs=shader(gl.FRAGMENT_SHADER,frag);
program=gl.createProgram();
gl.attachShader(program,vs);gl.attachShader(program,fs);
gl.linkProgram(program);
gl.deleteShader(vs);gl.deleteShader(fs);
if(!gl.getProgramParameter(program,gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,170*4*4,gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0,4,gl.FLOAT,false,0,0);
gl.useProgram(program);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.DEPTH_TEST);
}catch(err){
console.warn('[KKPT] Ember-only WebGL disabled:',err);
canvas.remove();
return null;
}
document.body.append(canvas);
const sizeUniform=gl.getUniformLocation(program,'uSize');
const scaleUniform=gl.getUniformLocation(program,'uScale');
const max=innerWidth<700?80:170;
const data=new Float32Array(max*4);
const sparks=[];
let carry=0,disabled=false,lastW=0,lastH=0;
canvas.addEventListener('webglcontextlost',event=>{
event.preventDefault();disabled=true;
window.__kkptRenderer='Canvas2D (GPU context lost)';
},{once:true});
const rand=(min,max)=>min+Math.random()*(max-min);
function draw(edge,seconds,dt,fade,progress){
if(disabled)return;
const w=innerWidth,h=innerHeight;
const scale=w<700?.67:.75;
const cw=Math.round(w*scale),ch=Math.round(h*scale);
if(cw!==lastW||ch!==lastH){
canvas.width=cw;canvas.height=ch;
gl.viewport(0,0,cw,ch);lastW=cw;lastH=ch;
}
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(sizeUniform,w,h);
gl.uniform1f(scaleUniform,scale);
carry+=dt*(w<700?27:56)*Math.max(0,fade);
const births=Math.min(5,Math.floor(carry));carry-=births;
for(let i=0;i<births&&sparks.length<max;i++){
const y=rand(0,h),life=rand(.55,1.65);
sparks.push({x:edge(y)+rand(-7,23),y,
vx:rand(48,265),vy:rand(-195,-26),life,left:life,
size:rand(3,13),alpha:rand(.24,.60)});
}
let count=0;
for(let i=sparks.length-1;i>=0;i--){
const p=sparks[i];
p.left-=dt;
if(p.left<=0){sparks[i]=sparks[sparks.length-1];sparks.pop();continue;}
p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.x < -30||p.x>w+30||p.y < -30||p.y>h+30)continue;
const offset=count++*4;
data[offset]=p.x;data[offset+1]=p.y;
data[offset+2]=p.size;
data[offset+3]=p.alpha*fade*Math.min(1,p.left/.24);
}
if(!count)return;
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferSubData(gl.ARRAY_BUFFER,0,data.subarray(0,count*4));
gl.drawArrays(gl.POINTS,0,count);
}
function dispose(){
disabled=true;
if(!gl.isContextLost()){
gl.deleteBuffer(buffer);gl.deleteProgram(program);
}
canvas.remove();
}
return {canvas,draw,dispose};
}

// Clip the ACTUAL preloaded Wiki frame, precisely where the fire is.
function clipFrame(edge) {
const w=innerWidth,h=innerHeight;
const rows=window.__kkptVisualDark?
Math.max(24,Math.ceil(h/30)):
Math.max(16,Math.ceil(h/61));
const pts=[];
for(let i=rows;i>=0;i--) {
const y=h*i/rows;
pts.push(edge(y).toFixed(1)+'px '+y.toFixed(1)+'px');
}
frame.style.clipPath=clipSide==='right'
? 'polygon(100% 0,100% 100%,'+pts.join(',')+')'
: 'polygon(0 0,0 100%,'+pts.join(',')+')';
}

function canvasFire(canvas,dark,duration,drawAtmosphere,done,gpuEmbers,score,extraVisuals) {
const ctx=dark&&canvas
? canvas.getContext('2d',{alpha:true,desynchronized:true})
: null;
if(dark&&!ctx){done();return;}
const art=dark?makeSprites():null;
const w=innerWidth,h=innerHeight;
if(ctx){
const scale=Math.min(window.devicePixelRatio||1,w<650?.69:.80);
canvas.width=Math.max(1,Math.round(w*scale));
canvas.height=Math.max(1,Math.round(h*scale));
ctx.setTransform(scale,0,0,scale,0,0);
}

const rand=(a,b)=>a+Math.random()*(b-a);
const mobile=w<650;
const maxCount=mobile?160:250;
const p=[];
const accum={flame:0,ember:0,shard:0,sky:0,mist:0,pollen:0};
const rates=dark
? {flame:mobile?80:105,ember:mobile?72:96,
shard:mobile?26:42}
: {sky:mobile?50:80,mist:mobile?13:20,pollen:mobile?27:50};
const started=performance.now();
let previous=started;
let lastPaint=0;
let lastClip=0;
function spawn(kind,edge,seconds) {
if(p.length>=maxCount)return;
const y=rand(-25,h+25);
const x=edge(y);
const type=kind;
const smoke=type==='smoke';
const shard=type==='shard';
const ember=type==='ember'||type==='pollen';
const blue=type==='sky'||type==='mist'||type==='pollen';
let radius,life,vx,vy;
if(shard){
radius=rand(4,18);life=rand(.6,1.65);
vx=rand(-130,65);vy=rand(-125,30);
}else if(smoke){
radius=rand(32,85);life=rand(1.1,2.5);
vx=rand(-20,65);vy=rand(-88,-22);
}else if(type==='mist'){
radius=rand(45,100);life=rand(.9,1.8);
vx=rand(-35,45);vy=rand(-75,-15);
}else if(type==='flame'){
radius=rand(20,57);life=rand(.3,.82);
vx=rand(-100,30);vy=rand(-180,-45);
}else{
radius=ember?rand(2.5,9):rand(18,47);
life=ember?rand(.45,1.1):rand(.35,.85);
vx=rand(-95,75);vy=rand(-150,-25);
}
p.push({
type,life,left:life,
x:x+rand(smoke?12:shard?-35:-27,smoke?140:shard?36:64),
y:y+rand(-14,14),vx,vy,radius,
angle:rand(-Math.PI,Math.PI),spin:rand(-5,5),
drift:rand(-.65,.65),blue
});
}
function spawnAtRate(dt,edge,seconds,strength){
for(const type in rates){
accum[type]+=rates[type]*dt*strength;
const n=Math.min(11,Math.floor(accum[type]));
accum[type]-=n;
for(let i=0;i<n;i++)spawn(type,edge,seconds);
}
}
function advance(dt){
for(let i=p.length-1;i>=0;i--) {
const q=p[i];
q.left-=dt;
if(q.left<=0){p[i]=p[p.length-1];p.pop();continue;}
q.x+=q.vx*dt;
q.y+=q.vy*dt;
q.vx+=q.drift*dt*35;
q.vy-=10*dt;
q.angle+=q.spin*dt;
}
}
function spriteDraw(image,x,y,sx,sy,alpha){
ctx.globalAlpha=alpha;
ctx.drawImage(image,x-sx,y-sy,sx*2,sy*2);
}
function drawSmoke(fade){
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='smoke'&&q.type!=='mist')continue;
const age=1-q.left/q.life;
const radius=q.radius*(1+age*.98);
const alpha=(q.type==='smoke'?.76:.32)*
Math.min(1,age*5)*Math.min(1,q.left/.55)*fade;
spriteDraw(q.type==='smoke'?art.smoke:art.mist,
q.x,q.y,radius*1.7,radius*1.3,alpha);
}
ctx.globalAlpha=1;
}
function drawShards(fade) {
if(!dark)return;
ctx.save();
ctx.globalCompositeOperation='source-over';
for(const q of p){
if(q.type!=='shard')continue;
const age=1-q.left/q.life;
const a=Math.min(1,q.left/.38)*(.90-age*.28)*fade;
ctx.save();
ctx.translate(q.x,q.y);
ctx.rotate(q.angle);
ctx.globalAlpha=a;
const r=q.radius;
ctx.beginPath();
ctx.moveTo(-r*.9,-r*.3);
ctx.lineTo(r*.7,-r*.75);
ctx.lineTo(r*.48,r*.42);
ctx.lineTo(-r*.35,r*.8);
ctx.closePath();
ctx.fillStyle=age<.3?'#371d22':'#140d13';
ctx.fill();
ctx.strokeStyle=age<.42?'#f57d3c':'#5a2c2b';
ctx.lineWidth=age<.42?1.6:.75;
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
function drawCore(edge,seconds,t,fade){
const waviness=Math.sin(Math.PI*t);
ctx.save();
ctx.beginPath();
const count=Math.max(35,Math.ceil(h/19));
for(let i=0;i<=count;i++){
const y=h*i/count;
if(i===0)ctx.moveTo(edge(y),y);
else ctx.lineTo(edge(y),y);
}
ctx.lineCap='round';
ctx.lineJoin='round';
if(dark){
ctx.globalCompositeOperation='lighter';
ctx.globalAlpha=fade;
ctx.shadowColor='#ff3903';
ctx.shadowBlur=25;
ctx.strokeStyle='rgba(255,55,5,.82)';
ctx.lineWidth=43;
ctx.stroke();
ctx.shadowBlur=16;
ctx.strokeStyle='#ff9b17';
ctx.lineWidth=20;
ctx.stroke();
ctx.shadowBlur=7;
ctx.strokeStyle='#ffe45e';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=4;
ctx.strokeStyle='#fffcde';
ctx.lineWidth=3.8;
ctx.stroke();
}else{
ctx.globalAlpha=fade*.64;
ctx.shadowColor='#8ccfff';
ctx.shadowBlur=29;
ctx.strokeStyle='rgba(139,219,255,.68)';
ctx.lineWidth=28;
ctx.stroke();
ctx.shadowBlur=10;
ctx.strokeStyle='#e7f8ff';
ctx.lineWidth=9;
ctx.stroke();
ctx.shadowBlur=0;
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.stroke();
}
ctx.restore();

// Dense GOLD / WHITE rolling fire, including on both sides
// of the border. These are the luminous shapes from V2.
if(dark){
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-70;y<h+80;y+=48){
const x=edge(y);
const pulse=.65+.35*Math.sin(seconds*8.5+y*.083);
spriteDraw(art.flame,x+rand(-8,30),y,77,70,
fade*(.26+.16*pulse));
}
for(let y=-20;y<h+52;y+=36){
const x=edge(y);
const flicker=Math.sin(seconds*13+y*.19);
const length=52+30*flicker+17*Math.sin(seconds*6-y*.11);
const lean=15+18*Math.sin(seconds*9+y*.069);
ctx.globalAlpha=.62*fade;
ctx.fillStyle='#ff5705';
ctx.beginPath();
ctx.moveTo(x+18,y+19);
ctx.bezierCurveTo(x-18,y+2,x-lean-24,y-length*.57,
x-lean,y-length);
ctx.bezierCurveTo(x+2,y-length*.57,x+13,y-12,x+18,y+19);
ctx.fill();
ctx.globalAlpha=.58*fade;
ctx.fillStyle='#ffdb58';
ctx.beginPath();
ctx.moveTo(x+7,y+8);
ctx.quadraticCurveTo(x-10,y-length*.33,
x-lean*.8,y-length*.72);
ctx.quadraticCurveTo(x+3,y-length*.30,x+8,y+8);
ctx.fill();
ctx.globalAlpha=.38*fade;
ctx.fillStyle='#fffced';
ctx.beginPath();
ctx.moveTo(x+3,y+5);
ctx.quadraticCurveTo(x-5,y-length*.2,
x-lean*.5,y-length*.48);
ctx.quadraticCurveTo(x+4,y-length*.19,x+5,y+5);
ctx.fill();
}
ctx.restore();
}else{
ctx.save();
ctx.globalCompositeOperation='lighter';
for(let y=-50;y<h+55;y+=88){
spriteDraw(art.sky,edge(y),y,89,109,.27*fade);
}
ctx.restore();
}
}
function drawBrightParticles(fade) {
ctx.save();
ctx.globalCompositeOperation='lighter';
for(const q of p){
if(q.type==='smoke'||q.type==='mist'||q.type==='shard')continue;
const age=1-q.left/q.life;
const brightness=Math.min(1,q.left/.25)*(1-age*.25)*fade;
let artName='flame',sx=q.radius,sy=q.radius;
if(q.type==='ember'){artName='ember';sx*=1.2;sy*=1.2;}
else if(q.type==='pollen'){artName='sky';sx*=1.15;sy*=1.15;}
else if(q.type==='sky'){artName='sky';sx*=1.1;sy*=1.55;}
else {sx*=.9;sy*=1.65;}
spriteDraw(art[artName],q.x,q.y,sx,sy,
brightness*(q.type==='ember'?.93:.78));
}
ctx.restore();
ctx.globalAlpha=1;
ctx.globalCompositeOperation='source-over';
}
function paint(now) {
// Both original V25 curtains follow their OWN song cue clock.
// Framerate drops cannot move 00:33 / 02:39 off the midpoints.
const t=score
? Math.max(0,Math.min(1,(score.audio.currentTime-
score.config.fireStart)/
(score.config.fireEnd-score.config.fireStart)))
: Math.min(1,(now-started)/duration);
extraVisuals?.update(t);
const seconds=now/1000;
const edge=makeEdge(t,seconds,dark,w);
// Clip-path polygon reconstruction can cause expensive iframe
// compositor work. It runs at a bounded rate independent of rAF.
atmosphereEdge=edge;
window.__kkptVisualDark=dark;
const clipStep=dark?(mobile?33:23):(mobile?43:34);
if(now-lastClip>=clipStep||t>=1){
clipFrame(edge);
lastClip=now;
}
const paintStep=dark?(mobile?35:32):(mobile?52:41);
if(now-lastPaint<paintStep && t<1){
requestAnimationFrame(paint);return;
}
const dt=Math.min(.070,(now-previous)/1000);
previous=now;lastPaint=now;
const fade=Math.min(1,t/.055,(1-t)/.045);
// Restore V14's broad smoke banks, long-lived char, pressure
// waves and delicate blue leaves. V2 only paints the FIRE.
drawAtmosphere(seconds,Math.min(t,.925),dark,(now-started)/1000,[]);
if(dark&&gpuEmbers)gpuEmbers.draw(edge,seconds,dt,fade,t);
if(dark){
advance(dt);
if(t<1)spawnAtRate(dt,edge,seconds,Math.max(0,fade));
ctx.clearRect(0,0,w,h);
drawShards(fade);
drawCore(edge,seconds,t,fade);
drawBrightParticles(fade);
}
if(t<1)requestAnimationFrame(paint);
else done();
}
requestAnimationFrame(paint);
}

function setDisplayed(nextActive) {
active=nextActive;
frame.classList.toggle('kkpt-active',active);
document.body.classList.toggle('kkpt-other-active',active);
frame.style.clipPath=active?'inset(0)':hideClip;
frame.style.visibility=active?'visible':'hidden';
frame.style.pointerEvents='';
frame.tabIndex=active?0:-1;
frame.setAttribute('aria-hidden',active?'false':'true');
document.title=active?otherTitle:baseTitle;
showTheme((active?otherPage:basePage)==='Kuronata');
// Stop the invisible Kuronata ambience in either document.
root.classList.toggle('kkpt-world-suspended',basePage==='Kuronata'&&active);
try{
frame.contentDocument?.documentElement.classList.toggle(
'kkpt-frame-inactive',!active);
}catch(_){}
updateButton();
}

async function animateSwap(nextActive) {
if(animating)return;
animating=true;
button.classList.add('kkpt-busy');
labelSub.textContent='PREPARING THE OTHER SIDE...';
const dark=(nextActive?otherPage:basePage)==='Kuronata';
let score=returnScore?.config?.target===otherPage?
returnScore:null;
if(!loading)warmFrame();
const loadWait=score?13000:11000;
const ok=await Promise.race([loading,sleep(loadWait)
.then(()=>false)]);
if(!ok||!ready){
// Preserve the audio cue even if the iframe preview is unavailable.
if(score&&await score.playPromise){
await awaitScoreTime(score,score.config.fireEnd);
}
removeScoreOmen();
clearFatePrelude();
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(score);
navigateRealPage(nextActive?otherUrl.href:baseUrl);return;
}
// Finish the incremental prewarm before opening the curtain.
await prewarmAtmosphere();
if(score){
const started=await Promise.race([
score.playPromise,sleep(6500).then(()=>false)
]);
if(!started||!await awaitScoreTime(score,
score.config.fireStart)){
clearReturnScore(score);
score=null; // Preserve the exact V25 visuals on audio failure.
}
}
removeScoreOmen();
clearFatePrelude();
frame.style.visibility='visible';
frame.classList.add('kkpt-animating');
// Give the now-visible destination its own first composited frame.
await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));

labelSub.textContent=dark?'THE SKY IS BURNING':'DAWN IS BREAKING';
// When returning to the blue page, force the Day palette
// BEFORE unmasking it. The dark iframe still fully covers it.
if(!dark)showTheme(false);
frame.classList.remove('kkpt-active');
frame.style.pointerEvents='none';
frame.style.clipPath=active?'inset(0)':hideClip;

const atmosphere=document.createElement('canvas');
atmosphere.id='kkpt-atmosphere';
atmosphere.setAttribute('aria-hidden','true');
document.body.append(atmosphere);
const drawAtmosphere=createAtmosphere(atmosphere);
const canvas=dark?document.createElement('canvas'):null;
if(canvas){
canvas.id='kkpt-vfx';
canvas.setAttribute('aria-hidden','true');
document.body.append(canvas);
}
const gpuEmbers=dark?createGpuEmbers():null;
const extraVisuals=dark?(score?.beatScene||null):createRebirthVisual();
window.__kkptRenderer=dark
? gpuEmbers?'WebGL2 embers + original V25 Canvas fire':
'Original V25 Canvas fire (WebGL fallback)'
: 'Original V25 Canvas dawn';
const duration=dark?3450:3100;
if(!score)transitionSound(dark,duration);
await new Promise(resolve=>canvasFire(
canvas,dark,duration,drawAtmosphere,resolve,gpuEmbers,
score,extraVisuals));

setDisplayed(nextActive);
if(dark){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
mountKuronataAftermath(score);
}else{
kuronataAftermath?.dispose();
}
extraVisuals?.finish();
if(canvas){
canvas.style.opacity='0';
setTimeout(()=>canvas.remove(),210);
}
if(gpuEmbers){
gpuEmbers.canvas.style.transition='opacity 280ms ease-out';
gpuEmbers.canvas.style.opacity='0';
setTimeout(()=>gpuEmbers.dispose(),320);
}
// The last frame holds living smoke and drifting fragments.
// Let it disperse with a lightweight compositor fade AFTER the
// destination is revealed; no costly extra canvas render loop.
const tail=dark?2000:1320;
atmosphere.style.transition='opacity '+tail+
'ms ease-out, transform '+tail+'ms ease-out';
await new Promise(resolve=>requestAnimationFrame(resolve));
atmosphere.style.opacity='0';
atmosphere.style.transform='translate3d(0,-22px,0) scale(1.035)';
await sleep(tail+70);
atmosphere.remove();
animating=false;
button.classList.remove('kkpt-busy','kkpt-quiet');
// The iframe was only the moving scenery during the reveal.
// Hand off to the ACTUAL Wiki page: native sidebars, scrollbar,
// history, refresh, accessibility and links all work normally.
saveReturnScoreHandoff(score);
navigateRealPage(otherUrl.href);
}

function requestSwap(nextActive) {
if (animating || nextActive === active) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
if(otherPage==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(otherUrl.href);
return;
}
animateSwap(nextActive).catch(err => {
console.error('[KuranokaPageTransition] V37:',err);
removeScoreOmen();
clearFatePrelude();
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-webgl')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
returnScore?.beatScene?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if (frame) frame.style.filter = '';
if((nextActive?otherPage:basePage)==='Kuronata'){
try{sessionStorage.setItem(AFTER_DARK_KEY,'1');}catch(_){}
}
saveReturnScoreHandoff(returnScore);
navigateRealPage(nextActive ? otherUrl.href : baseUrl);
});
}

function createButton() {
if (!document.body || document.getElementById('kkpt-toggle')) return;
button=document.createElement('a');
button.id='kkpt-toggle';
labelIcon=document.createElement('span');
labelIcon.className='kkpt-icon';
labelIcon.setAttribute('aria-hidden','true');
const text=document.createElement('span');
text.className='kkpt-text';
labelTitle=document.createElement('span');
labelSub=document.createElement('span');
labelSub.className='kkpt-sub';
text.append(labelTitle,labelSub);
button.append(labelIcon,text);
document.body.append(button);
button.hidden=!SHOW_FLOATING_BUTTON;
updateButton();
watchPortalLinks(document, otherPage);
mountFateGear(document,otherPage);
const continuingScore=restoreReturnScoreHandoff();
if(basePage==='Kuronata'){
let hadDarkHandoff=false;
try{hadDarkHandoff=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(continuingScore||hadDarkHandoff){
mountKuronataAftermath(returnScore);
}
}
if(continuingScore)setTimeout(warmFrame,3000);
else warmFrame();
prewarmAtmosphere();
preloadRebirthPad();

button.addEventListener('click', event => {
if (!isPlainClick(event)) return;
event.preventDefault();
armReturnScore(otherPage);
primeSound();
requestSwap(!active);
});
}

// A plain [[Kuronata|your mysterious text]] now triggers everything.
// The inverse [[Kuranoka|...]] uses the same transition, then real navigation.
document.addEventListener('click', event => {
if (active) return;
portalClick(event, document, otherPage, true);
}, true);
mw.hook('wikipage.content').add(() => {
if (document.readyState !== 'loading') watchPortalLinks(document, otherPage);
});

// Browser history is now real document history. A bfcache return
// must restore THIS document, not leave its animated preview visible.
window.addEventListener('pageshow', event => {
if (!event.persisted) return;
animating=false;
document.getElementById('kkpt-vfx')?.remove();
document.getElementById('kkpt-atmosphere')?.remove();
document.getElementById('kkpt-rebirth-visual')?.remove();
document.getElementById('kkpt-beat-scene')?.remove();
kuronataAftermath?.dispose();
document.getElementById('kkpt-lightning-layer')?.remove();
if(frame){
frame.style.filter='';
setDisplayed(false);
frame.classList.remove('kkpt-animating');
}
if(basePage==='Kuronata'){
let entered=false;
try{entered=sessionStorage.getItem(AFTER_DARK_KEY)==='1';}
catch(_){}
if(entered)mountKuronataAftermath(returnScore);
}
button?.classList.remove('kkpt-busy','kkpt-quiet');
});

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',createButton,{once:true});
} else {
createButton();
}
}());