/* ===== floating code block ===== */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --bg: #08080c;
     --border: rgba(255, 255, 255, 0.09);
     --text-muted: #9898a8;
     --purple-light: #c084fc;
     --gradient: linear-gradient(120deg, #a855f7, #6366f1, #ec4899);
 }

 body {
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
 }

 /* container that positions the orbs + window + cards together */
 .hero-visual {
     position: relative;
     min-height: 550px;
     width: min(100%, 600px);
     display: grid;
     place-items: center;
 }

 /* soft background glows */
 .orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(1px);
     pointer-events: none;
 }

 .orb-one {
     width: 350px;
     height: 350px;
     background: radial-gradient(circle, rgba(168, 85, 247, 0.23), transparent 68%);
     animation: floatOrb 7s ease-in-out infinite;
 }

 .orb-two {
     width: 240px;
     height: 240px;
     background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 68%);
     transform: translate(100px, 120px);
     animation: floatOrb 9s ease-in-out infinite reverse;
 }

 @keyframes floatOrb {
     50% {
         transform: translateY(-22px);
     }
 }

 /* the code window itself */
 .code-window {
     position: relative;
     z-index: 3;
     width: min(100%, 520px);
     border: 1px solid var(--border);
     border-radius: 18px;
     overflow: hidden;
     background: rgba(14, 14, 20, 0.92);
     box-shadow:
         0 30px 90px rgba(0, 0, 0, 0.35),
         0 0 80px rgba(168, 85, 247, 0.08);
     transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
     transition: transform 0.6s ease;
 }

 .code-window:hover {
     transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-6px);
 }

 .window-header {
     display: flex;
     align-items: center;
     height: 43px;
     padding: 0 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
     background: rgba(255, 255, 255, 0.025);
 }

 .window-dots {
     display: flex;
     gap: 6px;
 }

 .window-dots span {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
 }

 .window-title {
     position: absolute;
     left: 50%;
     color: rgba(255, 255, 255, 0.4);
     font-size: 0.65rem;
     transform: translateX(-50%);
 }

 .window-spacer {
     flex: 1;
 }

 .code-content {
     padding: 30px 30px 35px;
     overflow: auto;
 }

 .code-content pre {
     color: #e4e4eb;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
     font-size: 0.78rem;
     line-height: 1.5;
     white-space: pre;
 }

 .code-purple {
     color: #c084fc;
 }

 .code-blue {
     color: #67e8f9;
 }

 .code-green {
     color: #86efac;
 }

 .cursor {
     display: inline-block;
     width: 7px;
     height: 15px;
     margin-left: 2px;
     vertical-align: -2px;
     background: #c084fc;
     animation: blink 1s steps(1) infinite;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 /* the two small pills that float beside the window */
 .floating-card {
     position: absolute;
     z-index: 5;
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 12px 15px;
     border: 1px solid var(--border);
     border-radius: 13px;
     background: rgba(20, 20, 27, 0.82);
     backdrop-filter: blur(15px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
     animation: floatingCard 5s ease-in-out infinite;
 }

 .floating-card strong,
 .floating-card small {
     display: block;
 }

 .floating-card strong {
     font-size: 0.75rem;
 }

 .floating-card small {
     color: var(--text-muted);
     font-size: 0.62rem;
 }

 .floating-icon {
     display: grid;
     place-items: center;
     width: 31px;
     height: 31px;
     border-radius: 9px;
     color: var(--purple-light);
     background: rgba(168, 85, 247, 0.12);
 }

 .card-top {
     top: 9%;
     right: -3%;
 }

 .card-bottom {
     bottom: 10%;
     left: -5%;
     animation-delay: -2s;
 }

 @keyframes floatingCard {
     50% {
         transform: translateY(-9px);
     }
 }

 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* ===== Block Grid (jwk-portfolio/block-grid) =====
    Mirrors plugins/jwk-portfolio/blocks/block-grid/style.css — the SPA
    only gets content.rendered, never the plugin's stylesheet, so the
    front-end rules live here. Keep the two in sync. */
 .block-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1.5rem;
     align-items: start;
 }

 .block-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
 .block-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .block-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

 /* "Span full row" toggle in the editor adds .is-full */
 .block-grid > .is-full,
 .block-grid > .alignwide,
 .block-grid > .alignfull {
     grid-column: 1 / -1;
 }

 @media (max-width: 1024px) {
     .block-grid--cols-3,
     .block-grid--cols-4 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (max-width: 768px) {
     .block-grid,
     .block-grid[class*="block-grid--cols-"] {
         grid-template-columns: minmax(0, 1fr);
     }
 }

 /* Native blocks inside a cell shouldn't overflow it */
 .block-grid img,
 .block-grid video,
 .block-grid iframe {
     max-width: 100%;
     height: auto;
 }