/* ── About portrait: Kai framed inside a digital portal (3D) ── */
  .cosmic-portrait { isolation: isolate; }
.cosmic-portrait .cosmic-halo { z-index: 0; opacity: .7; }
.cosmic-stage { position: relative; z-index: 2; width: min(560px, 94%); aspect-ratio: 1; margin: 0 auto; transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--cz-rx, 0deg)) rotateY(var(--cz-ry, 0deg)); transition: transform 1s cubic-bezier(.16,1,.3,1); animation: cosmicFloat 7s ease-in-out infinite; }
.cosmic-world { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(120,100,255,.5), rgba(24,22,110,.85) 52%, rgba(5,6,32,.97) 100%); box-shadow: 0 0 80px rgba(110,90,255,.45), 0 30px 70px rgba(4,6,30,.5); transform: translateZ(0); }
.cosmic-depth { position: absolute; inset: -8%; transform: translate3d(var(--cz-bx, 0px), var(--cz-by, 0px), 0); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.cosmic-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmic-grid { position: absolute; left: -30%; right: -30%; bottom: -6%; height: 55%; background-image: linear-gradient(rgba(170,190,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(170,190,255,.5) 1px, transparent 1px); background-size: 34px 34px; transform: perspective(360px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); animation: cosmicGrid 9s linear infinite; }
.cosmic-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 46%, rgba(160,220,255,.14) 50%, transparent 54% 100%); background-size: 100% 220%; animation: cosmicScan 7s ease-in-out infinite; mix-blend-mode: screen; }
.cosmic-portrait .cosmic-world img.cosmic-photo { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 94%; max-width: none; height: auto; margin: 0; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; transform: translate3d(calc(-55.5% + var(--cz-px, 0px)), var(--cz-py, 0px), 0); transition: transform 1s cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 18px 30px rgba(4,6,30,.55)); }
.cosmic-glass { position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--cz-gx, 32%) var(--cz-gy, 18%), rgba(255,255,255,.16), transparent 42%), radial-gradient(circle at 50% 50%, transparent 64%, rgba(4,6,30,.5) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 12px 30px rgba(4,6,30,.45); }
.cosmic-frame { position: absolute; inset: -12px; z-index: 4; border-radius: 50%; padding: 12px; pointer-events: none; background: conic-gradient(from var(--app-glow-angle, 0deg), #7ec6ff, #b7a8ff 20%, #4f36d8 38%, #eef3ff 52%, #8f7bff 70%, #3b2bb8 86%, #7ec6ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transform: translateZ(22px); animation: app-border-glow 14s linear infinite; }
.cosmic-frame::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.55), transparent 35%, transparent 65%, rgba(0,0,0,.35)); }
.cosmic-orbit { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; transform: translateZ(-30px); }
.cosmic-orbit--1 { inset: -9%; border: 1px solid rgba(190,176,255,.24); animation: cosmicBreathe 6s ease-in-out infinite; }
.cosmic-orbit--2 { inset: -18%; border: 1px dashed rgba(126,198,255,.2); animation: cosmicBreathe 8s ease-in-out 1.5s infinite; }
.cosmic-tag { position: absolute; z-index: 5; padding: 7px 12px; border: 1px solid rgba(220,226,255,.3); border-radius: 12px; background: linear-gradient(145deg, rgba(31,42,91,.7), rgba(7,9,27,.55)); backdrop-filter: blur(14px); font-size: 10px !important; letter-spacing: .06em; white-space: nowrap; color: rgba(241,239,255,.9) !important; box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 0 22px rgba(105,88,235,.18); transform: translateZ(60px); animation: cosmicTag 6s ease-in-out infinite; }
.cosmic-tag--1 { left: -8%; top: 20%; }
.cosmic-tag--2 { right: -4%; top: 76%; animation-delay: 3s; }
@keyframes cosmicFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes cosmicGrid { from { background-position: 0 0; } to { background-position: 0 34px; } }
@keyframes cosmicScan { 0%, 100% { background-position: 0 100%; } 50% { background-position: 0 0; } }
@keyframes cosmicBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes cosmicTag { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 600px) { .cosmic-stage { width: min(380px, 88%); } .cosmic-tag { display: none; } .cosmic-frame { inset: -9px; padding: 9px; } }
@media (prefers-reduced-motion: reduce) { .cosmic-stage, .cosmic-grid, .cosmic-scan, .cosmic-orbit, .cosmic-tag, .cosmic-frame { animation: none; } }