M contact.html => contact.html +4 -4
@@ 98,8 98,8 @@
<!-- 无 JS 降级：直接显示联系方式 -->
<noscript>
<div class="realm-content">
- <p>电子邮箱：<a href="mailto:boo@cytrogen.icu">boo@cytrogen.icu</a></p>
- <p>长毛象：<a href="https://m.otter.homes/@Cytrogen">@Cytrogen@m.otter.homes</a></p>
+ <p>电子邮箱：<a href="mailto:realm@cytrogen.icu">realm@cytrogen.icu</a></p>
+ <p>长毛象：<a href="https://gts.cytrogen.icu/@Cytrogen">@Cytrogen@gts.cytrogen.icu</a></p>
<p>GitHub：<a href="https://github.com/cytrogen">github.com/cytrogen</a></p>
</div>
</noscript>
@@ 117,8 117,8 @@
const result = phone.querySelector('.phone-result');
const link = phone.querySelector('.phone-result__link');
const codes = {
- '114': { label: 'boo@cytrogen.icu', href: 'mailto:boo@cytrogen.icu' },
- '520': { label: '@Cytrogen@m.otter.homes', href: 'https://m.otter.homes/@Cytrogen' },
+ '114': { label: 'realm@cytrogen.icu', href: 'mailto:realm@cytrogen.icu' },
+ '520': { label: '@Cytrogen@gts.cytrogen.icu', href: 'https://gts.cytrogen.icu/@Cytrogen' },
'404': { label: 'github.com/cytrogen', href: 'https://github.com/cytrogen' },
'818': { label: '@Cytrogen@pixelfed.feddit.social', href: 'https://pixelfed.feddit.social/Cytrogen' },
'886': { label: '@Cytrogen@pxlmo.com', href: 'https://pxlmo.com/Cytrogen' },
M index.html => index.html +2 -0
@@ 6,6 6,8 @@
<title>Realm — cytrogen.icu</title>
<meta name="description" content="Realm — the visual exploration territory of cytrogen.icu">
<meta name="theme-color" content="#1a1a2e">
+ <link rel="me" href="https://gts.cytrogen.icu/@Cytrogen">
+ <link rel="me" href="mailto:realm@cytrogen.icu">
<link rel="stylesheet" href="realm.css">
</head>
<body>
M realm.css => realm.css +162 -0
@@ 66,6 66,31 @@
50% { opacity: 0.4; }
}
+@keyframes star-twinkle {
+ 0%, 100% { opacity: 0.3; }
+ 50% { opacity: 1; }
+}
+
+@keyframes leaf-fall {
+ 0% { transform: translateY(0) rotate(0deg); }
+ 100% { transform: translateY(550px) rotate(540deg); }
+}
+
+@keyframes fog-drift {
+ 0% { transform: translateX(-80px); }
+ 100% { transform: translateX(80px); }
+}
+
+@keyframes hand-emerge {
+ 0% { transform: translateY(40px); opacity: 0; }
+ 15% { transform: translateY(28px); opacity: 0.3; }
+ 35% { transform: translateY(8px); opacity: 0.8; }
+ 50% { transform: translateY(0); opacity: 1; }
+ 70% { transform: translateY(0); opacity: 1; }
+ 85% { transform: translateY(8px); opacity: 0.8; }
+ 100% { transform: translateY(40px); opacity: 0; }
+}
+
/* ================================================================
RESET
@@ 525,6 550,8 @@
.fill-board { fill: var(--bg-elevated); }
.fill-accent-shape { fill: var(--accent); }
.fill-accent-dim { fill: var(--accent-dim); }
+ .fill-fence { fill: oklch(0.30 0.03 280); }
+ .fill-zombie { fill: oklch(0.22 0.06 145); }
/* --- Skull SVG fills --- */
.fill-skull { fill: oklch(0.25 0.04 280); }
@@ 1402,6 1429,141 @@
fill: var(--text-secondary);
}
+ /* --- Death / Graveyard scene --- */
+
+ .star-twinkle {
+ animation: star-twinkle 3s var(--ease-default) infinite;
+ }
+
+ .leaf-anim {
+ animation: leaf-fall 10s linear infinite;
+ transform-box: fill-box;
+ transform-origin: center;
+ }
+
+ .fog-anim {
+ animation: fog-drift 20s ease-in-out infinite alternate;
+ }
+
+ .hand-decor {
+ animation: hand-emerge 6s var(--ease-default) infinite;
+ transform-box: fill-box;
+ transform-origin: center bottom;
+ }
+
+ .tombstone-entry {
+ cursor: pointer;
+ fill: oklch(0.42 0.03 285);
+ transition: fill var(--duration-normal) var(--ease-default);
+ }
+
+ .tombstone-entry:hover,
+ .tombstone-entry:focus-visible {
+ fill: var(--accent);
+ }
+
+ .tombstone-entry:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
+
+ .adventure-hand {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
+ transform-box: fill-box;
+ transform-origin: center bottom;
+ }
+
+ #adventure-trigger:target .adventure-hand {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .adventure-speech {
+ opacity: 0;
+ }
+
+ #adventure-trigger:target .adventure-speech {
+ animation: lock-text-appear 3s var(--ease-default) forwards;
+ }
+
+ .crow-body {
+ transform-box: fill-box;
+ transform-origin: center bottom;
+ }
+
+ #crow-says:target .crow-body {
+ animation: lock-shake 0.6s var(--ease-default);
+ }
+
+ .egg-speech {
+ opacity: 0;
+ transition: opacity var(--duration-normal) var(--ease-default);
+ }
+
+ #crow-says:target .egg-speech,
+ #pumpkin-cat:target .egg-speech {
+ opacity: 1;
+ }
+
+ .egg-close {
+ cursor: pointer;
+ }
+
+ .egg-close text {
+ transition: fill var(--duration-fast) var(--ease-default);
+ }
+
+ .egg-close:hover text,
+ .egg-close:focus-visible text {
+ fill: var(--accent);
+ }
+
+ .pumpkin-shell {
+ transition: fill var(--duration-normal) var(--ease-default);
+ }
+
+ #pumpkin-cat:target .pumpkin-shell {
+ fill: var(--accent-bright);
+ }
+
+ .pumpkin-glow {
+ opacity: 0;
+ transition: opacity var(--duration-normal) var(--ease-default);
+ }
+
+ #pumpkin-cat:target .pumpkin-glow {
+ opacity: 1;
+ animation: forge-pulse 2s var(--ease-default) infinite;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .star-twinkle,
+ .leaf-anim,
+ .fog-anim,
+ .hand-decor {
+ animation: none;
+ }
+
+ .star-twinkle {
+ opacity: 0.7;
+ }
+
+ #adventure-trigger:target .adventure-speech {
+ animation: none;
+ opacity: 1;
+ }
+
+ #crow-says:target .crow-body {
+ animation: none;
+ }
+
+ #pumpkin-cat:target .pumpkin-glow {
+ animation: none;
+ }
+ }
+
/* --- Responsive scene rules --- */
@container (max-width: 25rem) {