/* about.css — "关于" page: 深空 dark atmosphere matching the home portal,
   plus the editorial split layout. Background canvases are created by cosmos.js. */

.saya-cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--surface-page); }
.saya-fluid {
  position: absolute; inset: -4%; width: 108%; height: 108%; display: block;
  filter: blur(40px) saturate(1.2); opacity: 0.82;
}
.saya-stardust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0.9; mix-blend-mode: screen; }
/* faint structural grid, softly vignetted toward the portrait side */
.saya-grid { position: absolute; inset: -12%; }
.saya-grid::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cream) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cream) 5%, transparent) 1px, transparent 1px);
  background-size: 92px 92px, 92px 92px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 86%);
          mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 86%);
}
.saya-cosmos-glow {
  position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; opacity: 0; transition: opacity 600ms ease; will-change: transform; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent) 0%, color-mix(in oklab, var(--teal) 12%, transparent) 38%, transparent 64%);
}
.saya-content { position: relative; z-index: 1; }

/* portrait plate — a lit photograph floating in deep space */
@keyframes aboutDrift { 0% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-14px) rotate(0.6deg); } 100% { transform: translateY(0) rotate(-0.6deg); } }
@keyframes aboutRingSpin { to { transform: rotate(360deg); } }
.about-plate { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .about-plate { animation: aboutDrift 13s ease-in-out infinite; }
  .about-ring { animation: aboutRingSpin 60s linear infinite; transform-origin: 50% 50%; }
}

.about-link { transition: color 200ms ease, border-color 200ms ease; }
.about-link:hover { color: var(--text-primary) !important; }
.about-thread { transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.about-thread:hover { transform: translateY(-2px); }

/* portrait plate frame — a violet/teal conic light tracing the border */
@property --about-edge { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes aboutEdgeSpin { to { --about-edge: 360deg; } }
.about-frame {
  position: absolute; inset: -2px; border-radius: 10px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--about-edge),
    transparent 0deg,
    color-mix(in oklab, var(--teal) 85%, white) 40deg,
    color-mix(in oklab, var(--accent) 90%, white) 90deg,
    transparent 150deg,
    transparent 210deg,
    color-mix(in oklab, var(--accent-gallery) 80%, white) 280deg,
    color-mix(in oklab, var(--teal) 85%, white) 320deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) { .about-frame { animation: aboutEdgeSpin 7s linear infinite; } }

/* title glow — soft violet bloom, gently breathing (decorative heading only) */
@keyframes aboutGlow {
  0%, 100% { text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 26%, transparent), 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent); }
  50%      { text-shadow: 0 0 52px color-mix(in oklab, var(--accent) 46%, transparent), 0 0 8px color-mix(in oklab, var(--accent) 28%, transparent); }
}
.about-glow { text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) { .about-glow { animation: aboutGlow 6.5s ease-in-out infinite; } }

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr !important; gap: 48px !important; padding-top: 96px !important; }
  .about-portrait-col { order: -1; }
  .about-plate { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .about-nav-links { gap: 14px !important; }
  .about-nav-links a { font-size: 12px !important; }
  .about-split { padding: 88px 22px 48px !important; }
}