Input
{
"patchText": "*** Begin Patch\n*** Update File: /var/www/ocpncord.gulasch.site/index.html\n@@\n body {\n min-height: 100vh;\n margin: 0;\n color: var(--green-soft);\n@@\n overflow-x: hidden;\n+ cursor: crosshair;\n }\n@@\n a { color: inherit; text-decoration: none; }\n+\n+ .fx-canvas {\n+ position: fixed;\n+ inset: 0;\n+ width: 100%;\n+ height: 100%;\n+ pointer-events: none;\n+ z-index: 1;\n+ mix-blend-mode: screen;\n+ }\n+\n+ .aurora,\n+ .gridfloor,\n+ .target,\n+ .warp,\n+ .noise {\n+ position: fixed;\n+ inset: 0;\n+ pointer-events: none;\n+ }\n+\n+ .aurora {\n+ z-index: 0;\n+ opacity: 0.65;\n+ filter: blur(18px) saturate(1.35);\n+ background:\n+ conic-gradient(from 0deg at 18% 36%, transparent, rgba(39, 255, 154, 0.24), transparent 26%, rgba(61, 231, 255, 0.16), transparent 52%),\n+ conic-gradient(from 180deg at 82% 58%, transparent, rgba(255, 75, 125, 0.16), transparent 30%, rgba(255, 207, 90, 0.12), transparent 62%);\n+ animation: auroraSpin 18s linear infinite, auroraDrift 9s ease-in-out infinite alternate;\n+ }\n+\n+ .gridfloor {\n+ z-index: 1;\n+ top: 48%;\n+ background:\n+ linear-gradient(rgba(39, 255, 154, 0.16) 1px, transparent 1px),\n+ linear-gradient(90deg, rgba(39, 255, 154, 0.16) 1px, transparent 1px);\n+ background-size: 48px 48px;\n+ transform: perspective(520px) rotateX(63deg) translateY(20%);\n+ transform-origin: top;\n+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 70%);\n+ animation: gridRun 780ms linear infinite;\n+ }\n+\n+ .target {\n+ z-index: 2;\n+ background:\n+ radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(39, 255, 154, 0.18), transparent 110px),\n+ linear-gradient(to right, transparent calc(var(--mx, 50%) - 1px), rgba(61, 231, 255, 0.24) var(--mx, 50%), transparent calc(var(--mx, 50%) + 1px)),\n+ linear-gradient(to bottom, transparent calc(var(--my, 50%) - 1px), rgba(61, 231, 255, 0.24) var(--my, 50%), transparent calc(var(--my, 50%) + 1px));\n+ opacity: 0.42;\n+ }\n+\n+ .warp {\n+ z-index: 3;\n+ opacity: 0.22;\n+ background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 9deg, rgba(39, 255, 154, 0.22) 10deg, transparent 11deg 20deg);\n+ animation: warpSpin 16s linear infinite;\n+ mask-image: radial-gradient(circle, transparent 0 15%, #000 26%, transparent 62%);\n+ }\n+\n+ .noise {\n+ z-index: 6;\n+ opacity: 0.09;\n+ background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E\");\n+ animation: noiseShift 480ms steps(2) infinite;\n+ }\n@@\n .matrix {\n position: fixed;\n inset: 0;\n overflow: hidden;\n opacity: 0.32;\n pointer-events: none;\n+ z-index: 1;\n }\n+\n+ .comets {\n+ position: fixed;\n+ inset: 0;\n+ overflow: hidden;\n+ pointer-events: none;\n+ z-index: 2;\n+ }\n+\n+ .comet {\n+ position: absolute;\n+ width: 170px;\n+ height: 2px;\n+ border-radius: 999px;\n+ background: linear-gradient(90deg, transparent, rgba(61, 231, 255, 0.95), rgba(39, 255, 154, 0.0));\n+ filter: drop-shadow(0 0 12px rgba(61, 231, 255, 0.9));\n+ transform: rotate(-18deg);\n+ animation: cometFly linear infinite;\n+ }\n@@\n .terminal {\n+ position: relative;\n border: 1px solid var(--line);\n border-radius: 22px;\n background: linear-gradient(180deg, var(--panel-strong), var(--panel));\n box-shadow: var(--shadow);\n overflow: hidden;\n backdrop-filter: blur(14px);\n+ animation: terminalFloat 5.5s ease-in-out infinite, borderStorm 3.4s linear infinite;\n }\n+\n+ .terminal::before,\n+ .terminal::after {\n+ content: \"\";\n+ position: absolute;\n+ pointer-events: none;\n+ }\n+\n+ .terminal::before {\n+ inset: -2px;\n+ background: conic-gradient(from var(--spin, 0deg), transparent, rgba(39, 255, 154, 0.65), transparent, rgba(61, 231, 255, 0.5), transparent);\n+ animation: ringSpin 4s linear infinite;\n+ opacity: 0.22;\n+ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n+ mask-composite: exclude;\n+ padding: 2px;\n+ }\n+\n+ .terminal::after {\n+ left: -20%;\n+ right: -20%;\n+ height: 90px;\n+ top: -120px;\n+ background: linear-gradient(to bottom, transparent, rgba(39, 255, 154, 0.18), transparent);\n+ animation: scannerBeam 4.2s ease-in-out infinite;\n+ }\n@@\n h1 {\n+ position: relative;\n margin: 0;\n color: var(--green);\n font-size: clamp(48px, 10vw, 118px);\n@@\n animation: glitch 4.8s steps(1) infinite;\n }\n+\n+ h1::before,\n+ h1::after {\n+ content: \"ocpncord\";\n+ position: absolute;\n+ inset: 0;\n+ pointer-events: none;\n+ opacity: 0.7;\n+ }\n+\n+ h1::before {\n+ color: var(--cyan);\n+ clip-path: inset(0 0 58% 0);\n+ transform: translateX(-4px);\n+ animation: chromaTop 2.2s steps(2) infinite;\n+ }\n+\n+ h1::after {\n+ color: var(--red);\n+ clip-path: inset(52% 0 0 0);\n+ transform: translateX(4px);\n+ animation: chromaBottom 1.9s steps(2) infinite;\n+ }\n+\n+ .orbital {\n+ position: relative;\n+ width: min(260px, 64vw);\n+ aspect-ratio: 1;\n+ margin: 28px 0 0;\n+ border-radius: 50%;\n+ display: grid;\n+ place-items: center;\n+ isolation: isolate;\n+ }\n+\n+ .orbital::before,\n+ .orbital::after,\n+ .core {\n+ content: \"\";\n+ position: absolute;\n+ border-radius: 50%;\n+ }\n+\n+ .orbital::before {\n+ inset: 8%;\n+ border: 1px dashed rgba(61, 231, 255, 0.48);\n+ animation: orbitalSpin 7s linear infinite;\n+ }\n+\n+ .orbital::after {\n+ inset: 22%;\n+ border: 1px solid rgba(39, 255, 154, 0.55);\n+ box-shadow: 0 0 30px rgba(39, 255, 154, 0.22), inset 0 0 28px rgba(39, 255, 154, 0.12);\n+ animation: orbitalSpin 4.5s linear infinite reverse;\n+ }\n+\n+ .core {\n+ width: 38%;\n+ aspect-ratio: 1;\n+ background: radial-gradient(circle, #edfff6, var(--green) 20%, rgba(39, 255, 154, 0.16) 54%, transparent 68%);\n+ box-shadow: 0 0 40px rgba(39, 255, 154, 0.74), 0 0 90px rgba(61, 231, 255, 0.34);\n+ animation: corePulse 1.6s ease-in-out infinite;\n+ }\n+\n+ .satellite {\n+ position: absolute;\n+ width: 13px;\n+ height: 13px;\n+ border-radius: 50%;\n+ background: var(--amber);\n+ box-shadow: 0 0 18px var(--amber);\n+ animation: satelliteOrbit 3.2s linear infinite;\n+ transform-origin: 96px 96px;\n+ translate: -96px -96px;\n+ }\n@@\n .button {\n+ position: relative;\n+ overflow: hidden;\n display: inline-flex;\n@@\n transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;\n }\n+\n+ .button::before {\n+ content: \"\";\n+ position: absolute;\n+ inset: -60% -30%;\n+ background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55), transparent 65%);\n+ transform: translateX(-130%) rotate(12deg);\n+ animation: buttonSweep 3.2s ease-in-out infinite;\n+ }\n@@\n .card {\n+ position: relative;\n+ overflow: hidden;\n border: 1px solid var(--line);\n@@\n box-shadow: inset 0 0 22px rgba(39, 255, 154, 0.04);\n }\n+\n+ .card::after {\n+ content: \"\";\n+ position: absolute;\n+ inset: 0;\n+ background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(61, 231, 255, 0.18), transparent 46%);\n+ opacity: 0;\n+ transition: opacity 160ms ease;\n+ }\n+\n+ .card:hover::after { opacity: 1; }\n@@\n .log {\n min-height: 148px;\n color: #ccffe3;\n@@\n white-space: pre-wrap;\n }\n+\n+ .meters {\n+ display: grid;\n+ gap: 9px;\n+ margin-top: 14px;\n+ }\n+\n+ .meter {\n+ height: 10px;\n+ overflow: hidden;\n+ border: 1px solid rgba(39, 255, 154, 0.28);\n+ border-radius: 999px;\n+ background: rgba(0, 0, 0, 0.34);\n+ }\n+\n+ .meter span {\n+ display: block;\n+ height: 100%;\n+ width: var(--w);\n+ background: linear-gradient(90deg, var(--green), var(--cyan), var(--amber));\n+ box-shadow: 0 0 18px rgba(39, 255, 154, 0.8);\n+ animation: meterFlux 1.3s ease-in-out infinite alternate;\n+ }\n@@\n .feature {\n+ position: relative;\n+ overflow: hidden;\n min-height: 150px;\n@@\n animation: rise 700ms ease forwards;\n }\n+\n+ .feature::before {\n+ content: \"\";\n+ position: absolute;\n+ inset: -1px;\n+ background: linear-gradient(120deg, transparent, rgba(39, 255, 154, 0.18), transparent);\n+ transform: translateX(-100%);\n+ animation: featureSweep 5s ease-in-out infinite;\n+ }\n@@\n .footer {\n@@\n font-size: 13px;\n }\n+\n+ .spark {\n+ position: fixed;\n+ width: 6px;\n+ height: 6px;\n+ pointer-events: none;\n+ z-index: 8;\n+ border-radius: 50%;\n+ background: var(--green);\n+ box-shadow: 0 0 14px var(--green), 0 0 28px var(--cyan);\n+ animation: sparkPop 720ms ease-out forwards;\n+ }\n@@\n @keyframes fall { to { transform: translateY(calc(100vh + 8rem)); } }\n+ @keyframes cometFly { from { transform: translate(-25vw, -10vh) rotate(-18deg); } to { transform: translate(125vw, 60vh) rotate(-18deg); } }\n @keyframes blink { 50% { opacity: 0; } }\n @keyframes pulse { 50% { opacity: 0.38; transform: scale(1.35); } }\n @keyframes scanlines { to { transform: translateY(16px); } }\n @keyframes rise { to { transform: translateY(0); opacity: 1; } }\n @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }\n+ @keyframes auroraSpin { to { rotate: 360deg; } }\n+ @keyframes auroraDrift { to { scale: 1.18; translate: 2% -2%; } }\n+ @keyframes gridRun { to { background-position: 0 48px, 48px 0; } }\n+ @keyframes warpSpin { to { rotate: -360deg; } }\n+ @keyframes noiseShift { to { transform: translate3d(-4%, 3%, 0); } }\n+ @keyframes terminalFloat { 50% { transform: translateY(-6px); } }\n+ @keyframes borderStorm { 50% { box-shadow: 0 0 54px rgba(39, 255, 154, 0.26), inset 0 0 58px rgba(61, 231, 255, 0.08); } }\n+ @keyframes ringSpin { to { --spin: 360deg; } }\n+ @keyframes scannerBeam { 0% { top: -120px; } 55%, 100% { top: 110%; } }\n+ @keyframes chromaTop { 50% { transform: translate(8px, -2px); } }\n+ @keyframes chromaBottom { 50% { transform: translate(-7px, 2px); } }\n+ @keyframes orbitalSpin { to { rotate: 360deg; } }\n+ @keyframes satelliteOrbit { to { rotate: 360deg; } }\n+ @keyframes corePulse { 50% { scale: 1.12; filter: hue-rotate(42deg); } }\n+ @keyframes buttonSweep { 45%, 100% { transform: translateX(130%) rotate(12deg); } }\n+ @keyframes meterFlux { to { filter: hue-rotate(90deg); transform: scaleX(0.82); } }\n+ @keyframes featureSweep { 40%, 100% { transform: translateX(100%); } }\n+ @keyframes sparkPop { to { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; } }\n*** End Patch"
}