/* ═══ Initial Loader — themed per decoration world (v3) ═══ Replaces the old generic spinner in #initial-loader (index.html). Reuses the same [data-style]/[data-theme] tokens the rest of the app is built on (set synchronously by the inline boot-theme script in index.html , before first paint, so this never flashes the wrong world). Structure: shared skeleton (grid backdrop, floating brand mark with sonar pings, label, striped progress bar) + per-world ambient layers that reuse each world's real palette/motif from style.css. Pattern borrowed from home/page-transition.css (itself following the "cover before ready, reveal once loaded" technique from JIEJOE tutorial 006), adapted from a two-theme light/dark wipe into an eight-world splash. v2: every world gained a second detail layer (the ::after slot) and the default 光泡 world got its own blobs + conic sweep echoing the in-app field. Centre-stage elements carry z-index:1 so ::after layers stay behind them. */ #initial-loader{ flex-direction:column; gap:18px; overflow:hidden; } /* --- Ambient blueprint grid (default backdrop, most worlds keep this subtle) --- */ #initial-loader .il-grid{ position:absolute;inset:0;pointer-events:none;opacity:.35; background-image: linear-gradient(color-mix(in srgb,var(--on-surface) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--on-surface) 6%,transparent) 1px,transparent 1px); background-size:48px 48px; } /* --- Centre stage: floating brand mark with sonar pings, label, striped bar --- */ #initial-loader .il-mark{ position:relative;width:64px;height:64px;flex-shrink:0;z-index:1; display:grid;place-items:center;border-radius:var(--radius-md); background:linear-gradient(140deg,var(--primary),var(--primary-light)); box-shadow:0 10px 26px -10px color-mix(in srgb,var(--primary) 60%,transparent); animation:ilFloat 2.2s ease-in-out infinite; } #initial-loader .il-icon{position:relative;z-index:1;color:var(--on-primary,#fff);font-size:30px} @keyframes ilFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} #initial-loader .il-ping{ position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:var(--radius-md); border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);opacity:0; animation:ilPing 1.7s ease-out infinite; } #initial-loader .il-ping.p2{animation-delay:.85s} @keyframes ilPing{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.5);opacity:0}} #initial-loader .il-label{ position:relative;z-index:1;font-family:var(--font-display);font-size:var(--text-md);font-weight:700; letter-spacing:.02em;color:var(--on-surface); } #initial-loader .il-bar{ position:relative;z-index:1;width:132px;height:6px;border-radius:var(--radius-pill);overflow:hidden; background:repeating-linear-gradient(-45deg,var(--primary) 0 8px,transparent 8px 16px); background-size:23px 6px;animation:ilBarSlide .7s linear infinite; } @keyframes ilBarSlide{from{background-position:0 0}to{background-position:23px 0}} /* ═══ Per-world ambient layers — reuse each world's real tokens/motif ═══ */ /* 光泡 (default "none"): two accent blobs + a slow conic sweep, echoing the in-app field */ [data-style="none"] #initial-loader::before{ content:'';position:absolute;inset:0;pointer-events:none;filter:blur(46px); background: radial-gradient(circle 30vmax at 22% 26%,color-mix(in srgb,var(--primary) 30%,transparent),transparent 65%), radial-gradient(circle 26vmax at 78% 72%,color-mix(in srgb,var(--primary-light) 26%,transparent),transparent 65%); animation:ilNoneBlobs 9s ease-in-out infinite alternate; } @keyframes ilNoneBlobs{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2vmax,-2vmax,0) scale(1.06)}} [data-style="none"] #initial-loader::after{ content:'';position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax; pointer-events:none;opacity:.2;filter:blur(50px); background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--primary) 36%,transparent) 45deg,transparent 120deg, color-mix(in srgb,var(--primary-light) 26%,transparent) 210deg,transparent 300deg); animation:ilNoneSweep 16s linear infinite; } @keyframes ilNoneSweep{to{transform:rotate(360deg)}} /* Cyberpunk: neon scanline sweep + occasional glitch slice, grid recolored teal */ [data-style="cyberpunk"] #initial-loader .il-grid{ background-image: linear-gradient(rgba(126,222,215,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(126,222,215,.07) 1px,transparent 1px); } [data-style="cyberpunk"] #initial-loader::before{ content:'';position:absolute;left:0;right:0;height:40%;top:-40%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,0,64,.14),rgba(126,222,215,.10),transparent); animation:ilCyberScan 2.6s linear infinite; } @keyframes ilCyberScan{to{transform:translateY(250%)}} [data-style="cyberpunk"] #initial-loader::after{ content:'';position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(255,0,64,.5),rgba(126,222,215,.4),transparent); animation:ilCyberGlitch 3.4s steps(1,end) infinite; } @keyframes ilCyberGlitch{ 0%,100%{opacity:0;transform:translateY(18vh)} 8%{opacity:1;transform:translateY(18vh)} 12%{opacity:0;transform:translateY(18vh)} 55%{opacity:1;transform:translateY(62vh)} 61%{opacity:0;transform:translateY(62vh)} } /* Aurora: mesh glow + three mini light curtains swaying (whole-loader hue-rotate removed in v2) */ [data-style="aurora"] #initial-loader::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 60% 50% at 50% 32%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 60%), radial-gradient(ellipse 50% 40% at 50% 82%,rgba(168,85,247,.10),transparent 55%); animation:ilAuroraMesh 15s ease infinite alternate; } @keyframes ilAuroraMesh{0%{opacity:.5;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}} [data-style="aurora"] #initial-loader::after{ content:'';position:absolute;inset:0;pointer-events:none;filter:blur(26px);opacity:.55; background: linear-gradient(180deg,color-mix(in srgb,var(--primary) 45%,transparent),transparent 70%), linear-gradient(180deg,rgba(168,85,247,.4),transparent 65%), linear-gradient(180deg,rgba(56,189,248,.38),transparent 72%); background-size:9% 100%,7% 100%,8% 100%; background-position:12% 0,48% 0,84% 0;background-repeat:no-repeat; animation:ilAuroraBands 6.5s ease-in-out infinite alternate; } @keyframes ilAuroraBands{from{transform:translateX(-2%) skewX(-6deg)}to{transform:translateX(2%) skewX(5deg)}} /* Starfield: twinkling star dots replace the blueprint grid; a second phase-shifted star layer + one shooting streak every few seconds */ [data-style="starfield"] #initial-loader .il-grid{ opacity:1;background-size:auto; background-image: radial-gradient(1.3px 1.3px at 20% 24%,#fff,transparent),radial-gradient(1px 1px at 74% 18%,rgba(255,255,255,.85),transparent), radial-gradient(1.2px 1.2px at 36% 66%,#fff,transparent),radial-gradient(1px 1px at 82% 60%,rgba(255,255,255,.7),transparent), radial-gradient(1px 1px at 58% 42%,rgba(255,255,255,.8),transparent),radial-gradient(1.2px 1.2px at 14% 80%,#fff,transparent), radial-gradient(1px 1px at 90% 86%,rgba(255,255,255,.7),transparent); animation:ilStarTwinkle 5.5s ease-in-out infinite; } @keyframes ilStarTwinkle{0%,100%{opacity:.45}30%{opacity:.95}55%{opacity:.6}80%{opacity:1}} [data-style="starfield"] #initial-loader::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(1px 1px at 30% 38%,rgba(255,255,255,.9),transparent),radial-gradient(1.2px 1.2px at 66% 30%,#fff,transparent), radial-gradient(1px 1px at 12% 58%,rgba(255,255,255,.75),transparent),radial-gradient(1.1px 1.1px at 86% 44%,#fff,transparent), radial-gradient(1px 1px at 44% 12%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 54% 78%,rgba(255,255,255,.8),transparent); animation:ilStarTwinkleB 7.5s ease-in-out infinite;animation-delay:-3s; } @keyframes ilStarTwinkleB{0%,100%{opacity:.9}25%{opacity:.4}50%{opacity:.85}75%{opacity:.5}} [data-style="starfield"] #initial-loader::after{ content:'';position:absolute;left:8%;top:18%;width:90px;height:1.5px;border-radius:2px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 60%,#fff); animation:ilStarShoot 6s linear infinite; } @keyframes ilStarShoot{ 0%,70%{opacity:0;transform:translate3d(0,0,0) rotate(30deg)} 72%{opacity:.9} 80%,100%{opacity:0;transform:translate3d(40vw,26vh,0) rotate(30deg)} } /* Warm Paper「午后书房」: paper-grain grid + slanting sunbeam + rising dust motes, pings switched off (calm world) */ [data-style="paper"] #initial-loader .il-grid{ opacity:1;background-size:auto; background-image: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(120,90,50,.035) 2px,rgba(120,90,50,.035) 3px), repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(120,90,50,.03) 2px,rgba(120,90,50,.03) 3px); } [data-style="paper"] #initial-loader .il-mark{box-shadow:var(--shadow-md)} [data-style="paper"] #initial-loader .il-ping{display:none} [data-style="paper"] #initial-loader::before{ content:'';position:absolute;left:60%;top:-20%;width:24vmax;height:140%;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(233,180,90,.45) 30%,rgba(255,243,208,.8) 50%,rgba(233,180,90,.45) 70%,transparent); filter:blur(14px); transform:rotate(24deg);transform-origin:50% 0; animation:ilPaperBeam 7s ease-in-out infinite alternate; } @keyframes ilPaperBeam{from{opacity:.6}to{opacity:.9}} [data-style="paper"] #initial-loader::after{ content:'';position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(3px 3px at 30% 60%,rgba(122,94,58,.65),transparent),radial-gradient(2.4px 2.4px at 55% 40%,rgba(214,152,60,.75),transparent), radial-gradient(3.2px 3.2px at 68% 66%,rgba(122,94,58,.55),transparent),radial-gradient(2.2px 2.2px at 44% 74%,rgba(214,152,60,.7),transparent), radial-gradient(2.8px 2.8px at 76% 30%,rgba(122,94,58,.6),transparent); animation:ilPaperMotes 10s linear infinite; } @keyframes ilPaperMotes{ 0%{transform:translateY(16px);opacity:0} 18%{opacity:.7} 82%{opacity:.7} 100%{transform:translateY(-28px);opacity:0} } /* Holographic: rotating iridescent halo + micro-sparkles */ [data-style="holo"] #initial-loader::before{ content:'';position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax; border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.55; background:conic-gradient(from 0deg,#C77DFF,#5EE0D0,#FF8AD8,#7AA0FF,#C77DFF); animation:ilHoloSpin 6s linear infinite; } @keyframes ilHoloSpin{to{transform:rotate(360deg)}} [data-style="holo"] #initial-loader::after{ content:'';position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(1.4px 1.4px at 24% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 24%,#E0AAFF,transparent), radial-gradient(1.5px 1.5px at 82% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 36% 72%,#5EE0D0,transparent), radial-gradient(1.3px 1.3px at 56% 46%,#E0AAFF,transparent),radial-gradient(1.2px 1.2px at 14% 54%,#fff,transparent); animation:ilHoloSparkle 4.8s ease-in-out infinite; } @keyframes ilHoloSparkle{0%,100%{opacity:.2}25%{opacity:.9}50%{opacity:.4}75%{opacity:1}} /* Sky「夏日晴空」: soft drifting cloud blobs + pulsing sun in the corner */ [data-style="sky"] #initial-loader::before{ content:'';position:absolute;inset:0;pointer-events:none;filter:blur(50px); background: radial-gradient(circle at 30% 70%,rgba(143,197,255,.7),transparent 60%), radial-gradient(circle at 70% 75%,rgba(186,178,255,.55),transparent 60%), radial-gradient(circle at 50% 88%,rgba(160,225,255,.55),transparent 55%); animation:ilSkyDrift 12s ease-in-out infinite alternate; } @keyframes ilSkyDrift{from{transform:translateY(0)}to{transform:translateY(-14px)}} [data-style="sky"] #initial-loader::after{ content:'';position:absolute;right:-6vmax;top:-8vmax;width:26vmax;height:26vmax;border-radius:50%; pointer-events:none;filter:blur(24px); background:radial-gradient(circle,rgba(255,224,150,.7),rgba(255,214,130,.24) 45%,transparent 68%); animation:ilSunPulse 6s ease-in-out infinite alternate; } @keyframes ilSunPulse{from{transform:scale(1);opacity:.7}to{transform:scale(1.08);opacity:1}} /* Mist「山谷晨雾」: breathing fog blob + low fog bank sliding along the bottom */ [data-style="mist"] #initial-loader::before{ content:'';position:absolute;left:50%;top:56%;width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax; border-radius:50%;pointer-events:none;filter:blur(80px);opacity:.6; background:radial-gradient(circle,rgba(131,173,146,.5),transparent 66%); animation:ilMistDrift 30s ease-in-out infinite alternate; } @keyframes ilMistDrift{from{transform:scale(1)}to{transform:scale(1.08)}} [data-style="mist"] #initial-loader::after{ content:'';position:absolute;left:-10%;bottom:-6%;width:120%;height:30%;pointer-events:none;filter:blur(34px);opacity:.8; background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.95),rgba(131,173,146,.3) 55%,transparent 75%); animation:ilMistBank 16s ease-in-out infinite alternate; } @keyframes ilMistBank{from{transform:translateX(-4%)}to{transform:translateX(4%)}} /* ═══ Motion & perf guards ═══ */ @media(prefers-reduced-motion:reduce){ #initial-loader,#initial-loader *{animation:none!important} #initial-loader .il-grid,#initial-loader .il-ping, #initial-loader::before,#initial-loader::after{display:none} } @media(max-width:768px){ #initial-loader .il-grid{display:none} /* !important needed: per-world layers ([data-style] #initial-loader::before) out-specify this guard */ #initial-loader::before,#initial-loader::after{animation:none!important} }