/* Academy Connect (connect.html): light 3D and animation (connect-fx.js, founder 2026-10-09: make the app pages
   beautiful with 3D animations like Website Analytics). A chat must stay calm and fast, so everything here is small,
   uses only transform and opacity, and never moves while someone reads or types. */

/* The sky behind the messages: two slow glows and faint stars (one layer, moved by transform only) */
.cn-page .cn-main { isolation: isolate; }
.kx-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--cn-bg, #070d1d); }
.kx-sky i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50% !important; filter: blur(40px); opacity: .85; }
.kx-sky i:nth-child(1) { left: -10%; top: -20%; background: radial-gradient(closest-side, rgba(31, 123, 255, .22), transparent); animation: kxDrift 26s ease-in-out infinite alternate; }
.kx-sky i:nth-child(2) { right: -15%; bottom: -25%; background: radial-gradient(closest-side, rgba(139, 92, 246, .2), transparent); animation: kxDrift 32s ease-in-out infinite alternate-reverse; }
.kx-sky b { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1px 1px at 12% 18%, #c7d2fe, transparent), radial-gradient(1px 1px at 72% 12%, #c7d2fe, transparent), radial-gradient(1.5px 1.5px at 40% 64%, #93c5fd, transparent),
  radial-gradient(1px 1px at 86% 72%, #c7d2fe, transparent), radial-gradient(1px 1px at 22% 88%, #c7d2fe, transparent), radial-gradient(1.5px 1.5px at 58% 34%, #c4b5fd, transparent), radial-gradient(1px 1px at 94% 40%, #c7d2fe, transparent); animation: kxTwinkle 7s ease-in-out infinite; }
@keyframes kxDrift { to { transform: translate(18%, 14%) scale(1.15); } }
@keyframes kxTwinkle { 50% { opacity: .2; } }
.cn-page .cn-scroll { background: transparent; }
.cn-page .cn-head, .cn-page .cn-scroll, .cn-page .cn-compose { position: relative; z-index: 1; }
.cn-page .cn-jump { z-index: 2; }

/* The Connect logo: a speech bubble that hops in 3D now and then, with a ring of light */
.cn-page .cn-logo { position: relative; animation: kxHop 7s 1.5s ease-in-out infinite; transform-style: preserve-3d; }
.cn-page .cn-logo::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid rgba(56, 182, 255, .6); opacity: 0; animation: kxRing 7s 1.5s ease-out infinite; pointer-events: none; }
@keyframes kxHop { 0%, 82%, 100% { transform: perspective(300px) rotateY(0) translateY(0); } 87% { transform: perspective(300px) rotateY(180deg) translateY(-4px); } 92% { transform: perspective(300px) rotateY(360deg) translateY(0); } }
@keyframes kxRing { 0%, 84% { opacity: 0; transform: scale(.9); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }

/* Online now: the green dot sends out a ring */
.cn-page .cn-on-h .cn-dot { position: relative; }
.cn-page .cn-on-h .cn-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50% !important; border: 2px solid var(--cn-ok, #34d399); animation: kxPing 2s ease-out infinite; }
@keyframes kxPing { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }

/* Conversations in the list lean in a little on hover */
.cn-page .cn-list > * { transition: transform .18s ease, background .15s; }
@media (hover: hover) { .cn-page .cn-list > *:hover { transform: perspective(600px) translateX(3px) rotateY(-4deg); } }

/* A new message arrives in 3D: yours from the right, others from the left */
.kx-pop.is-mine { animation: kxMine .5s cubic-bezier(.2, .8, .2, 1.05) both; transform-origin: 100% 100%; }
.kx-pop.is-theirs { animation: kxTheirs .5s cubic-bezier(.2, .8, .2, 1.05) both; transform-origin: 0 100%; }
@keyframes kxMine { from { opacity: 0; transform: perspective(700px) translate(26px, 14px) rotateY(-22deg) scale(.92); } }
@keyframes kxTheirs { from { opacity: 0; transform: perspective(700px) translate(-26px, 14px) rotateY(22deg) scale(.92); } }
.kx-pop.is-theirs .cn-bubble { animation: kxGlow 1.6s .3s ease-out; }
@keyframes kxGlow { 0% { box-shadow: 0 0 0 0 rgba(56, 182, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(56, 182, 255, 0); } }

/* Send: the paper plane flies off and comes back */
.cn-page .cn-send { position: relative; overflow: hidden; transition: transform .15s ease; }
.cn-page .cn-send:active { transform: perspective(300px) rotateX(14deg) scale(.94); }
.cn-page .cn-send.kx-fly svg { animation: kxFly .6s ease-in both; }
@keyframes kxFly { 0% { transform: none; } 45% { transform: translate(22px, -22px) rotate(-12deg) scale(.6); opacity: 0; } 46% { transform: translate(-22px, 22px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* The message box glows a little while you type */
.cn-page .cn-box { transition: box-shadow .25s ease; }
.cn-page .cn-box:focus-within { box-shadow: 0 0 0 1px rgba(56, 182, 255, .45), 0 12px 34px -16px rgba(56, 182, 255, .7); }

/* An empty conversation: chat bubbles floating in 3D above the welcome */
.kx-art { position: relative; width: 150px; height: 96px; margin: 0 auto 10px; perspective: 500px; }
.kx-art span { position: absolute; display: block; height: 26px; border-radius: 13px 13px 13px 4px !important; background: linear-gradient(135deg, #1e2a4d, #26365f); border: 1px solid rgba(124, 196, 255, .3);
  transform: rotateY(-18deg) rotateX(8deg); animation: kxFloat 4.5s ease-in-out infinite; }
.kx-art span:nth-child(1) { left: 6px; top: 8px; width: 92px; animation-delay: 0s; }
.kx-art span:nth-child(2) { right: 4px; top: 38px; width: 78px; border-radius: 13px 13px 4px 13px !important; background: linear-gradient(135deg, #1d4ed8, #1f7bff); border-color: transparent; animation-delay: -1.5s; }
.kx-art span:nth-child(3) { left: 22px; top: 68px; width: 56px; animation-delay: -3s; }
.kx-art span::after { content: ""; position: absolute; left: 12px; right: 16px; top: 11px; height: 3px; border-radius: 2px !important; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 0 transparent; }
@keyframes kxFloat { 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .kx-sky i, .kx-sky b, .cn-page .cn-logo, .cn-page .cn-logo::after, .cn-page .cn-on-h .cn-dot::after, .kx-pop, .kx-pop .cn-bubble, .cn-page .cn-send.kx-fly svg, .kx-art span { animation: none !important; }
  .cn-page .cn-list > * { transition: none; }
}