Grosse Noix \u2014 Hero<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap\" rel=\"stylesheet\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n margin: 0;\n background: #05000a;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: #f9fafb;\n overflow-x: hidden;\n transition: background 0.3s ease;\n }\n\n \/* HERO BASE (SECTION 01) *\/\n .gn-hero {\n position: relative;\n min-height: 100vh;\n padding: 2.5rem 1.5rem 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow: hidden;\n background: radial-gradient(circle at top, #ff9aff 0, #1a0228 32%, #05000a 70%),\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08) 0,\n rgba(255, 255, 255, 0.08) 1px,\n transparent 1px,\n transparent 3px\n );\n transform-origin: center center;\n transition:\n opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .gn-hero.gn-fade-out {\n opacity: 0;\n transform: scale(1.03);\n }\n\n .gn-hero::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.35) 0,\n rgba(0, 0, 0, 0.35) 1px,\n transparent 1px,\n transparent 3px\n );\n mix-blend-mode: multiply;\n opacity: 0.9;\n z-index: 0;\n }\n\n \/* Green noise overlay on hero (static) *\/\n .gn-hero-noise {\n position: absolute;\n inset: -20px;\n pointer-events: none;\n background-image:\n repeating-linear-gradient(\n to bottom,\n rgba(34, 197, 94, 0.08) 0,\n rgba(34, 197, 94, 0.08) 2px,\n transparent 2px,\n transparent 4px\n ),\n repeating-linear-gradient(\n to right,\n rgba(22, 163, 74, 0.06) 0,\n rgba(22, 163, 74, 0.06) 1px,\n transparent 1px,\n transparent 3px\n );\n mix-blend-mode: screen;\n opacity: 0.18;\n z-index: 0;\n }\n\n .gn-hero-inner {\n position: relative;\n z-index: 1;\n max-width: 900px;\n width: 100%;\n }\n\n .gn-pixel-frame {\n border: 4px solid #ffb8ff;\n box-shadow: 0 0 0 4px #2d022f, 0 0 18px rgba(255, 137, 255, 0.7);\n padding: 1.75rem 1.25rem 2rem;\n position: relative;\n background: rgba(5, 0, 10, 0.9);\n backdrop-filter: blur(6px);\n transition: box-shadow 0.25s ease;\n }\n\n .gn-pixel-frame::before,\n .gn-pixel-frame::after {\n content: \"\";\n position: absolute;\n width: 12px;\n height: 12px;\n border: 3px solid #ff5ddd;\n border-radius: 0;\n }\n .gn-pixel-frame::before {\n left: -6px;\n top: -6px;\n border-right: none;\n border-bottom: none;\n }\n .gn-pixel-frame::after {\n right: -6px;\n bottom: -6px;\n border-left: none;\n border-top: none;\n }\n\n \/* GROSSE NOIX TITLE \u2014 RESPONSIVE *\/\n .gn-logo {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(1.6rem, 6vw, 3.2rem);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 1.4rem;\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n opacity: 0;\n transform: translateY(18px) scale(0.9);\n animation:\n gnLogoAppear 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,\n gnLogoGlow 3s ease-in-out 1.7s infinite alternate;\n transition: transform 0.12s ease-out;\n will-change: transform, text-shadow, color;\n max-width: 100%;\n overflow-wrap: break-word;\n word-break: break-word;\n line-height: 1.15;\n margin-inline: auto;\n }\n\n @keyframes gnLogoAppear {\n 0% {\n opacity: 0;\n transform: translateY(18px) scale(0.9);\n filter: blur(3px);\n text-shadow: none;\n }\n 45% {\n opacity: 1;\n transform: translateY(-4px) scale(1.05);\n filter: blur(0);\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.9),\n 0 0 14px rgba(0, 255, 213, 0.9),\n 3px 3px 0 #000000;\n }\n 70% {\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n }\n }\n\n @keyframes gnLogoGlow {\n 0% {\n color: #ffffff;\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.7),\n 0 0 10px rgba(0, 255, 213, 0.6),\n 3px 3px 0 #000000;\n }\n 50% {\n color: #ffe7ff;\n text-shadow:\n 0 0 10px rgba(255, 154, 255, 1),\n 0 0 18px rgba(0, 255, 213, 0.9),\n 0 0 28px rgba(255, 255, 255, 0.85),\n 3px 3px 0 #000000;\n }\n 100% {\n color: #ffffff;\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.7),\n 0 0 10px rgba(0, 255, 213, 0.6),\n 3px 3px 0 #000000;\n }\n }\n\n .gn-subtitle {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(0.6rem, 1.4vw, 0.75rem);\n line-height: 1.7;\n text-transform: uppercase;\n color: #faccff;\n margin-bottom: 1.8rem;\n }\n\n .gn-description {\n font-size: 0.95rem;\n line-height: 1.7;\n max-width: 48rem;\n margin: 0 auto 2.1rem;\n }\n\n \/* MATRIX TEXT STYLE FOR DESCRIPTION (SECTION 01) *\/\n .gn-matrix-text {\n font-family: \"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1.1rem;\n line-height: 1.6;\n color: #16a34a;\n text-shadow:\n 0 0 4px rgba(22, 163, 74, 0.8),\n 0 0 8px rgba(22, 163, 74, 0.7),\n 0 0 16px rgba(22, 163, 74, 0.5);\n letter-spacing: 0.03em;\n background: radial-gradient(circle at top, rgba(15, 118, 110, 0.12), transparent 60%);\n padding: 0.85rem 0.75rem;\n border-radius: 0.35rem;\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(6px);\n filter: blur(2px);\n animation: gnMatrixTextFadeIn 1s ease-out forwards 0.8s;\n\t text-align: center\n }\n\n @keyframes gnMatrixTextFadeIn {\n 0% {\n opacity: 0;\n transform: translateY(6px);\n filter: blur(2px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0);\n }\n }\n\n .gn-matrix-char {\n display: inline-block;\n animation-name: gnMatrixCharGlow;\n animation-timing-function: steps(2, end);\n animation-iteration-count: infinite;\n will-change: opacity, text-shadow, transform;\n }\n\n .gn-matrix-char.gn-matrix-char--space {\n min-width: 0.33em;\n }\n\n @keyframes gnMatrixCharGlow {\n 0% {\n opacity: 0.15;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.4),\n 0 0 4px rgba(22, 163, 74, 0.3);\n transform: translateY(0);\n }\n 20% {\n opacity: 1;\n text-shadow:\n 0 0 4px rgba(34, 197, 94, 0.9),\n 0 0 10px rgba(34, 197, 94, 0.9),\n 0 0 18px rgba(34, 197, 94, 0.7);\n transform: translateY(-0.5px);\n }\n 45% {\n opacity: 0.6;\n text-shadow:\n 0 0 3px rgba(22, 163, 74, 0.7),\n 0 0 8px rgba(22, 163, 74, 0.6);\n transform: translateY(0.5px);\n }\n 70% {\n opacity: 0.35;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.5);\n transform: translateY(0);\n }\n 100% {\n opacity: 0.18;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.3);\n transform: translateY(0);\n }\n }\n\n .gn-matrix-text:hover .gn-matrix-char {\n animation-play-state: paused;\n opacity: 0.96 !important;\n text-shadow:\n 0 0 5px rgba(34, 197, 94, 0.9),\n 0 0 14px rgba(34, 197, 94, 0.8),\n 0 0 24px rgba(34, 197, 94, 0.75);\n transform: translateY(0);\n }\n\n .gn-tag-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1.0rem;\n margin-bottom: 2rem;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n }\n\n .gn-tag {\n border: 2px solid #ffb8ff;\n padding: 0.7rem 0.7rem;\n background: #140016;\n box-shadow: 2px 2px 0 #000000;\n cursor: default;\n transform: translate3d(0, 0, 0);\n transition:\n transform 0.18s ease-out,\n box-shadow 0.18s ease-out,\n border-color 0.18s ease-out;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-tag:hover {\n transform: translateY(-2px) scale(1.05);\n box-shadow: 4px 4px 0 #000000;\n border-color: #ff9af2;\n }\n }\n\n .gn-cta-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1rem;\n margin-top: 2rem;\n }\n\n .gn-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.9rem 1.7rem;\n border: 3px solid #ffb8ff;\n background: #ff5ddd;\n color: #05000a;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: 0.08em;\n cursor: pointer;\n box-shadow: 0 0 0 3px #2d022f, 4px 4px 0 #000000;\n transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;\n white-space: nowrap;\n }\n\n .gn-btn span {\n position: relative;\n z-index: 1;\n }\n\n .gn-btn::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 45deg,\n rgba(250, 250, 250, 0.35) 0,\n rgba(250, 250, 250, 0.35) 3px,\n transparent 3px,\n transparent 6px\n );\n mix-blend-mode: screen;\n opacity: 0;\n transition: opacity 0.2s linear;\n pointer-events: none;\n }\n\n .gn-btn:hover,\n .gn-btn:focus-visible {\n transform: translate(-2px, -2px);\n box-shadow: 0 0 0 3px #2d022f, 6px 6px 0 #000000;\n background: #ff9af2;\n }\n\n .gn-btn:hover::before,\n .gn-btn:focus-visible::before {\n opacity: 0.6;\n }\n\n .gn-btn-secondary {\n background: #05000a;\n color: #f9fafb;\n border-color: #00ffd5;\n box-shadow: 0 0 0 3px #022828, 4px 4px 0 #000000;\n }\n .gn-btn-secondary:hover,\n .gn-btn-secondary:focus-visible {\n background: #0b1720;\n box-shadow: 0 0 0 3px #022828, 6px 6px 0 #000000;\n }\n\n .gn-flash-row {\n margin-top: 1.4rem;\n margin-bottom: 0.5rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n justify-content: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.5rem;\n text-transform: uppercase;\n opacity: 0.9;\n }\n\n .gn-flash-text {\n letter-spacing: 0.08em;\n opacity: 0.7;\n animation: gnFlash 1.6s infinite steps(2, end);\n }\n\n .gn-flash-text--soft {\n opacity: 0.55;\n animation-duration: 2.4s;\n animation-delay: 0.4s;\n }\n\n .gn-flash-text--alt {\n animation-duration: 2s;\n animation-delay: 0.9s;\n }\n\n @keyframes gnFlash {\n 0%, 15% { opacity: 0.18; }\n 16%, 55% { opacity: 1; }\n 56%, 100% { opacity: 0.4; }\n }\n\n .gn-pixel {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #ff9aff;\n box-shadow: -2px 0 0 #00ffd5, 2px 0 0 #05000a;\n opacity: 0.85;\n pointer-events: none;\n transform-origin: center;\n animation: gnPixelFade 0.5s ease-out forwards;\n z-index: 3;\n }\n\n @keyframes gnPixelFade {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 0.9;\n }\n 60% {\n transform: translate(-4px, 4px) scale(1.1) rotate(3deg);\n opacity: 0.7;\n }\n 100% {\n transform: translate(-8px, 8px) scale(0.1);\n opacity: 0;\n }\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-hero:hover .gn-pixel-frame {\n box-shadow: 0 0 0 4px #2d022f, 0 0 24px rgba(255, 137, 255, 0.9);\n }\n }\n\n @media (max-width: 768px) {\n .gn-hero {\n padding: 1.75rem 1.25rem 2.5rem;\n }\n .gn-pixel-frame {\n padding: 1.4rem 1rem 1.7rem;\n }\n .gn-description {\n font-size: 0.9rem;\n }\n .gn-tag-row {\n font-size: 0.48rem;\n }\n .gn-tag {\n padding: 0.35rem 0.55rem;\n }\n .gn-btn {\n width: 100%;\n justify-content: center;\n font-size: 0.6rem;\n padding-inline: 1.2rem;\n }\n .gn-flash-row {\n margin-top: 1.1rem;\n }\n }\n\n \/* Extra small devices: tighten logo a bit more *\/\n @media (max-width: 400px) {\n .gn-logo {\n font-size: 1.5rem;\n letter-spacing: 0.05em;\n }\n }\n\n @media (max-width: 480px) {\n .gn-subtitle {\n font-size: 0.55rem;\n }\n .gn-description {\n font-size: 0.85rem;\n }\n }\n\n \/* CRASH \/ GLITCH (SOFTER) *\/\n body.gn-crash {\n background: #05000a;\n }\n body.gn-crash .gn-hero {\n animation: gnCrash 0.45s ease-out;\n }\n\n @keyframes gnCrash {\n 0% {\n transform: translate(0, 0) skewX(0) scale(1);\n filter: none;\n }\n 30% {\n transform: translate(-6px, 3px) skewX(3deg) scale(1.01);\n filter: hue-rotate(15deg) contrast(1.3);\n }\n 60% {\n transform: translate(4px, -3px) skewX(-2deg) scale(1.02);\n filter: hue-rotate(-10deg) contrast(1.4);\n }\n 100% {\n transform: translate(0, 0) skewX(0) scale(1);\n filter: none;\n }\n }\n\n .gn-crash-overlay {\n position: fixed;\n inset: 0;\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.75rem;\n text-transform: uppercase;\n color: #fffbeb;\n background: repeating-linear-gradient(\n to bottom,\n #05000a 0,\n #05000a 3px,\n #0f172a 3px,\n #0f172a 5px\n );\n opacity: 0;\n z-index: 4;\n transition: opacity 0.25s ease-out;\n }\n\n .gn-crash-overlay span {\n display: block;\n margin-top: 0.75rem;\n font-size: 0.6rem;\n opacity: 0.8;\n }\n\n body.gn-crash .gn-crash-overlay {\n opacity: 1;\n }\n\n \/* SECTION 02 \u2013 MATRIX CORE *\/\n .gn-matrix {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at top, #04111d 0, #020617 40%, #000000 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n opacity: 0;\n pointer-events: none;\n transform: scale(1.04) translateY(10px);\n transition:\n opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);\n z-index: 2;\n overflow-y: auto;\n }\n\n body.gn-show-matrix .gn-matrix {\n opacity: 1;\n pointer-events: auto;\n transform: scale(1) translateY(0);\n }\n\n .gn-matrix-bg {\n position: fixed;\n inset: -50px;\n background-image: linear-gradient(\n to bottom,\n rgba(22, 163, 74, 0.03) 0,\n rgba(22, 163, 74, 0.4) 50%,\n rgba(22, 163, 74, 0.05) 100%\n ),\n repeating-linear-gradient(\n to bottom,\n rgba(15, 23, 42, 0.6) 0,\n rgba(15, 23, 42, 0.6) 2px,\n transparent 2px,\n transparent 4px\n );\n mix-blend-mode: screen;\n opacity: 0.4;\n animation: gnMatrixBg 8s linear infinite;\n z-index: 0;\n }\n\n @keyframes gnMatrixBg {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(40px); }\n }\n\n .gn-walnut-cloud {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n }\n\n .gn-walnut {\n position: absolute;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.55rem;\n text-transform: uppercase;\n color: #f9a8ff;\n opacity: 0.35;\n white-space: nowrap;\n mix-blend-mode: screen;\n letter-spacing: 0.05em;\n text-shadow:\n 0 0 2px rgba(249, 168, 255, 0.7),\n 0 0 4px rgba(14, 165, 233, 0.5);\n image-rendering: pixelated;\n animation:\n gnWalnutFloat 10s ease-in-out infinite alternate,\n gnWalnutFlicker 2.2s infinite steps(3, end);\n }\n\n @keyframes gnWalnutFloat {\n 0% { transform: translate3d(0, 0, 0); }\n 50% { transform: translate3d(4px, -8px, 0); }\n 100% { transform: translate3d(-4px, 6px, 0); }\n }\n\n @keyframes gnWalnutFlicker {\n 0%, 10% { opacity: 0.18; }\n 11%, 55% { opacity: 0.45; }\n 56%, 90% { opacity: 0.35; }\n 91%, 100% { opacity: 0.2; }\n }\n\n .gn-matrix-inner {\n position: relative;\n z-index: 1;\n max-width: 920px;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n }\n\n .gn-matrix-scene {\n position: relative;\n width: 100%;\n height: 260px;\n perspective: 900px;\n }\n\n .gn-matrix-track {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: gnTrackDrift 9s ease-in-out infinite alternate;\n }\n\n @keyframes gnTrackDrift {\n 0% { transform: rotateY(-8deg) translateY(8px); }\n 100% { transform: rotateY(10deg) translateY(-8px); }\n }\n\n .gn-letter {\n position: absolute;\n top: 50%;\n left: 50%;\n transform-style: preserve-3d;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(2.2rem, 4vw, 3rem);\n color: #22c55e;\n text-shadow: 0 0 16px rgba(34, 197, 94, 0.9), 0 0 30px rgba(34, 197, 94, 0.9);\n animation: gnLetterTravel 4.2s linear infinite;\n }\n\n .gn-letter::after {\n content: attr(data-letter);\n position: absolute;\n inset: 0;\n color: rgba(15, 23, 42, 0.9);\n transform: translate3d(1px, 3px, -30px);\n filter: blur(1px);\n opacity: 0.8;\n }\n\n @keyframes gnLetterTravel {\n 0% {\n transform: translate3d(var(--x), -50%, -900px) rotateY(-16deg);\n opacity: 0;\n }\n 25% { opacity: 1; }\n 70% { opacity: 1; }\n 100% {\n transform: translate3d(var(--x), -50%, 300px) rotateY(16deg);\n opacity: 0;\n }\n }\n\n .gn-letter:nth-child(1) { --x: -225px; animation-delay: 0s; }\n .gn-letter:nth-child(2) { --x: -175px; animation-delay: 0.15s; }\n .gn-letter:nth-child(3) { --x: -125px; animation-delay: 0.3s; }\n .gn-letter:nth-child(4) { --x: -75px; animation-delay: 0.45s; }\n .gn-letter:nth-child(5) { --x: -25px; animation-delay: 0.6s; }\n .gn-letter:nth-child(6) { --x: 25px; animation-delay: 0.75s; }\n .gn-letter:nth-child(7) { --x: 75px; animation-delay: 0.9s; }\n .gn-letter:nth-child(8) { --x: 125px; animation-delay: 1.05s; }\n .gn-letter:nth-child(9) { --x: 175px; animation-delay: 1.2s; }\n .gn-letter:nth-child(10){ --x: 225px; animation-delay: 1.35s; }\n\n .gn-matrix-label {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.75rem;\n text-transform: uppercase;\n color: #a5f3fc;\n text-align: center;\n }\n\n .gn-matrix-label span {\n display: block;\n margin-top: 0.4rem;\n font-size: 0.6rem;\n opacity: 0.8;\n }\n\n .gn-matrix-cta {\n margin-top: 0.75rem;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n display: flex;\n -content: center;\n }\n\n .gn-matrix-cta.gn-show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .gn-btn-enter {\n background: #22c55e;\n border-color: #bbf7d0;\n box-shadow: 0 0 0 3px #052e16, 4px 4px 0 #000000;\n color: #020617;\n }\n\n .gn-btn-enter:hover,\n .gn-btn-enter:focus-visible {\n background: #4ade80;\n box-shadow: 0 0 0 3px #052e16, 6px 6px 0 #000000;\n }\n\n \/* SECTION 03 \u2013 BROWSE EXPERIENCES \/ PORTFOLIO *\/\n .gn-matrix-alt {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at top, #2b021f 0, #1a0228 40%, #000000 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n opacity: 0;\n pointer-events: none;\n transform: scale(1.04) translateY(10px);\n transition:\n opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);\n z-index: 2;\n overflow-y: auto;\n }\n\n body.gn-show-matrix-alt .gn-matrix-alt {\n opacity: 1;\n pointer-events: auto;\n transform: scale(1) translateY(0);\n }\n\n .gn-matrix-alt .gn-matrix-bg {\n background-image: linear-gradient(\n to bottom,\n rgba(236, 72, 153, 0.05) 0,\n rgba(236, 72, 153, 0.5) 50%,\n rgba(236, 72, 153, 0.08) 100%\n ),\n repeating-linear-gradient(\n to bottom,\n rgba(126, 34, 206, 0.7) 0,\n rgba(126, 34, 206, 0.7) 2px,\n transparent 2px,\n transparent 4px\n );\n }\n\n .gn-matrix-alt .gn-matrix-inner {\n max-width: 1020px;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 1.75rem;\n }\n\n .gn-section-03-title {\n width: 100%;\n text-align: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(2rem, 4.5vw, 3.2rem);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 1.4rem;\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n animation: gnLogoGlow 3s ease-in-out 0s infinite alternate;\n }\n\n .gn-portfolio-grid {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 1.2rem;\n max-width: 980px;\n width: 100%;\n margin: 0 auto;\n }\n\n @media (max-width: 1024px) {\n .gn-portfolio-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 680px) {\n .gn-matrix-alt {\n padding: 1.5rem 1.1rem;\n }\n .gn-section-03-title {\n font-size: clamp(1.7rem, 7vw, 2.2rem);\n margin-bottom: 1rem;\n }\n .gn-portfolio-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: 1rem;\n }\n }\n\n .gn-project-card {\n position: relative;\n display: block;\n aspect-ratio: 4 \/ 3;\n border-radius: 0.9rem;\n overflow: hidden;\n border: 3px solid #fecaca;\n box-shadow: 0 0 0 3px #4c0519, 4px 4px 0 #000;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-image: var(--bg, linear-gradient(135deg, #f97316, #ec4899));\n cursor: pointer;\n text-decoration: none;\n color: #fef2f2;\n isolation: isolate;\n opacity: 0;\n transform: translateY(20px) scale(0.96);\n transition:\n opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),\n transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.2s ease,\n border-color 0.2s ease;\n }\n\n .gn-project-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at top, rgba(248, 250, 252, 0.22), transparent 55%);\n mix-blend-mode: screen;\n opacity: 0.7;\n pointer-events: none;\n transition: opacity 0.2s ease;\n }\n\n .gn-project-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n to bottom,\n rgba(15, 23, 42, 0.65) 0,\n rgba(15, 23, 42, 0.65) 2px,\n transparent 2px,\n transparent 4px\n );\n mix-blend-mode: soft-light;\n opacity: 0.7;\n pointer-events: none;\n }\n\n .gn-project-card-inner {\n position: absolute;\n inset: 0;\n padding: 0.85rem 0.95rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: 1;\n }\n\n .gn-project-tag {\n display: inline-flex;\n align-items: center;\n padding: 0.3rem 0.6rem;\n border-radius: 999px;\n border: 1px solid rgba(254, 242, 242, 0.4);\n background: rgba(15, 23, 42, 0.7);\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.45rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n\n .gn-project-title {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n text-shadow: 0 0 6px rgba(248, 250, 252, 0.8);\n }\n\n .gn-project-meta {\n font-size: 0.65rem;\n opacity: 0.82;\n margin-top: 0.35rem;\n }\n\n .gn-project-card.gn-visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-project-card[data-effect=\"tilt\"]:hover,\n .gn-project-card[data-effect=\"tilt\"]:focus-visible {\n transform: translateY(-4px) scale(1.03);\n box-shadow: 0 0 0 3px #4c0519, 8px 10px 0 #000;\n border-color: #f97316;\n }\n\n .gn-project-card[data-effect=\"glitch\"]:hover .gn-project-title,\n .gn-project-card[data-effect=\"glitch\"]:focus-visible .gn-project-title {\n animation: gnTitleGlitch 0.3s steps(2, end) infinite;\n }\n\n .gn-project-card[data-effect=\"glitch\"]:hover::before,\n .gn-project-card[data-effect=\"glitch\"]:focus-visible::before {\n opacity: 1;\n }\n\n .gn-project-card[data-effect=\"pulse\"]:hover,\n .gn-project-card[data-effect=\"pulse\"]:focus-visible {\n animation: gnCardPulse 0.8s ease-out;\n box-shadow: 0 0 0 3px #4c0519, 6px 8px 0 #000;\n border-color: #fb7185;\n }\n\n .gn-project-card[data-effect=\"slide\"]:hover .gn-project-meta,\n .gn-project-card[data-effect=\"slide\"]:focus-visible .gn-project-meta {\n transform: translateY(-2px);\n text-decoration: underline;\n }\n }\n\n @keyframes gnTitleGlitch {\n 0% { transform: translate(0, 0); text-shadow: -2px 0 #fb7185, 2px 0 #22c55e; }\n 50% { transform: translate(-1px, 1px); text-shadow: 2px 0 #0ea5e9, -2px 0 #f97316; }\n 100% { transform: translate(0, 0); text-shadow: 0 0 6px rgba(248, 250, 252, 0.8); }\n }\n\n @keyframes gnCardPulse {\n 0% { transform: translateY(0) scale(1); }\n 40% { transform: translateY(-3px) scale(1.04); }\n 100% { transform: translateY(0) scale(1); }\n }\n\n .gn-project-card[data-effect=\"slide\"] .gn-project-meta {\n transition: transform 0.18s ease, text-decoration-color 0.18s ease;\n }\n\n .gn-matrix-alt .gn-matrix-label {\n color: #fecaca;\n margin-top: 1rem;\n text-align: center;\n }\n\n .gn-matrix-alt .gn-matrix-label span {\n color: #fed7ff;\n opacity: 0.85;\n }\n\n .gn-matrix-alt .gn-btn-enter {\n background: #f97316;\n border-color: #fed7aa;\n box-shadow: 0 0 0 3px #7c2d12, 4px 4px 0 #000000;\n color: #020617;\n }\n\n .gn-matrix-alt .gn-btn-enter:hover,\n .gn-matrix-alt .gn-btn-enter:focus-visible {\n background: #fdba74;\n box-shadow: 0 0 0 3px #7c2d12, 6px 6px 0 #000000;\n }\n\n @media (max-width: 768px) {\n .gn-matrix-scene {\n height: 220px;\n }\n .gn-letter {\n font-size: clamp(1.6rem, 7vw, 2.4rem);\n }\n\n .gn-letter:nth-child(1) { --x: -135px; }\n .gn-letter:nth-child(2) { --x: -105px; }\n .gn-letter:nth-child(3) { --x: -75px; }\n .gn-letter:nth-child(4) { --x: -45px; }\n .gn-letter:nth-child(5) { --x: -15px; }\n .gn-letter:nth-child(6) { --x: 15px; }\n .gn-letter:nth-child(7) { --x: 45px; }\n .gn-letter:nth-child(8) { --x: 75px; }\n .gn-letter:nth-child(9) { --x: 105px; }\n .gn-letter:nth-child(10){ --x: 135px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"gn-hero\" id=\"gn-hero\">\n <div class=\"gn-hero-noise\" id=\"gn-hero-noise\"><\/div>\n <div class=\"gn-hero-inner\">\n <div class=\"gn-pixel-frame\">\n <div class=\"gn-logo\">GrosseNoix<\/div>\n <div class=\"gn-subtitle\">\n Nothing exists until you feel it.\n <\/div>\n\n <p class=\"gn-description gn-matrix-text\" id=\"gn-matrix-text\">GrosseNoix is not an agency, not a studio\u2026 it\u2019s a creative cult with no leader, and no rules. It\u2019s a chaos fueled by chaos. We design structures for misfit projects, brand architectures, products, digital worlds, and business systems. If you\u2019re not sure what your idea is yet, you\u2019re probably in the right place. We are the shadows that might ignite your light.<\/p>\n <\/p>\n <div class=\"gn-tag-row\">\n <div class=\"gn-tag\">Creative Business Architecture<\/div>\n <div class=\"gn-tag\">Concept & Prototype Lab<\/div>\n <div class=\"gn-tag\">Non-Traditional Structures<\/div>\n <div class=\"gn-tag\">Webcraft & Interactive Experiences <\/div>\n <div class=\"gn-tag\">Digital Graphic Art & Wearable <\/div>\n <\/div>\n\n <div class=\"gn-flash-row\">\n <span class=\"gn-flash-text\">[ INPUT: UNKNOWN SIGNAL ]<\/span>\n <span class=\"gn-flash-text gn-flash-text--soft\">booting creative kernel…<\/span>\n <span class=\"gn-flash-text gn-flash-text--alt\">touch to collapse the chaos<\/span>\n <\/div>\n\n <div class=\"gn-cta-row\">\n <button class=\"gn-btn\" type=\"button\" id=\"gn-enter-btn\">\n <span>Boot the Core<\/span>\n <\/button>\n <button class=\"gn-btn gn-btn-secondary\" type=\"button\" id=\"gn-browse-btn\">\n <span>Browse Experiences<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"gn-crash-overlay\" id=\"gn-crash-overlay\">\n SYSTEM OVERRUN\n <span>> booting GROSSE NOIX kernel…<\/span>\n <\/div>\n\n \n <section class=\"gn-matrix\" id=\"gn-matrix\">\n <div class=\"gn-matrix-bg\"><\/div>\n <div class=\"gn-walnut-cloud\" id=\"gn-walnut-cloud\"><\/div>\n\n <div class=\"gn-matrix-inner\">\n <div class=\"gn-matrix-scene\">\n <div class=\"gn-matrix-track\">\n <div class=\"gn-letter\" data-letter=\"G\">G<\/div>\n <div class=\"gn-letter\" data-letter=\"R\">R<\/div>\n <div class=\"gn-letter\" data-letter=\"O\">O<\/div>\n <div class=\"gn-letter\" data-letter=\"S\">S<\/div>\n <div class=\"gn-letter\" data-letter=\"S\">S<\/div>\n <div class=\"gn-letter\" data-letter=\"E\">E<\/div>\n <div class=\"gn-letter\" data-letter=\"N\">N<\/div>\n <div class=\"gn-letter\" data-letter=\"O\">O<\/div>\n <div class=\"gn-letter\" data-letter=\"I\">I<\/div>\n <div class=\"gn-letter\" data-letter=\"X\">X<\/div>\n <\/div>\n <\/div>\n\n <div class=\"gn-matrix-label\">\n GROSSE NOIX \/ CORE SPACE\n <span>Spiritual cousin of a vending machine that only dispenses breakthroughs and questionable life choices<\/span>\n <\/div>\n\n <div class=\"gn-matrix-cta\" id=\"gn-enter-now-wrapper\">\n <a\n class=\"gn-btn gn-btn-enter\"\n id=\"gn-enter-now\"\n href=\"https:\/\/grossenoix.com\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <span>Enter Now<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"gn-matrix-alt\" id=\"gn-matrix-alt\">\n <div class=\"gn-matrix-bg\"><\/div>\n\n <div class=\"gn-matrix-inner\">\n <div class=\"gn-section-03-title\">BROWSE EXPERIENCES<\/div>\n\n <div class=\"gn-portfolio-grid\">\n <a href=\"#project1\" class=\"gn-project-card\" data-effect=\"tilt\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_florus2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Human System<\/div>\n <div>\n <div class=\"gn-project-title\">Florus \/ Living Label<\/div>\n <div class=\"gn-project-meta\">Hybrid brand, product & ecosystem frame.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project3\" class=\"gn-project-card\" data-effect=\"pulse\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_hr2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">For the braves<\/div>\n <div>\n <div class=\"gn-project-title\">Headrush Brand<\/div>\n <div class=\"gn-project-meta\">Ultimate spaces for misfits wearable.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project5\" class=\"gn-project-card\" data-effect=\"tilt\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_vangro2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Product Lab<\/div>\n <div>\n <div class=\"gn-project-title\">VANGR\u00d6<\/div>\n <div class=\"gn-project-meta\">Limited maple artefacts with ritual.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project6\" class=\"gn-project-card\" data-effect=\"glitch\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_TT2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Trading Fanatics<\/div>\n <div>\n <div class=\"gn-project-title\">TTRADE<\/div>\n <div class=\"gn-project-meta\">Apparel systems from risk & intuition.<\/div>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n\n <div class=\"gn-matrix-label\">\n GROSSE NOIX \/ EXPERIMENT ZONE\n <span>Clickable fragments from the kernel: touch to open side channels, prototypes and live structures.<\/span>\n <\/div>\n\n <div class=\"gn-matrix-cta\" id=\"gn-enter-now-wrapper-2\">\n <a\n class=\"gn-btn gn-btn-enter\"\n id=\"gn-enter-now-2\"\n href=\"https:\/\/grossenoix.com\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <span>Enter Now<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n (function () {\n const hero = document.getElementById(\"gn-hero\");\n const enterBtn = document.getElementById(\"gn-enter-btn\");\n const browseBtn = document.getElementById(\"gn-browse-btn\");\n const enterNowWrapper = document.getElementById(\"gn-enter-now-wrapper\");\n const enterNowWrapper2 = document.getElementById(\"gn-enter-now-wrapper-2\");\n const walnutCloud = document.getElementById(\"gn-walnut-cloud\");\n const body = document.body;\n const projectCards = document.querySelectorAll(\".gn-project-card\");\n const matrixTextEl = document.getElementById(\"gn-matrix-text\");\n const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n if (!hero) return;\n\n \/* MATRIX EFFECT FOR DESCRIPTION TEXT (build char spans) *\/\n if (matrixTextEl) {\n const originalText = matrixTextEl.textContent;\n matrixTextEl.textContent = \"\";\n\n originalText.split(\"\").forEach((ch) => {\n const span = document.createElement(\"span\");\n\n if (ch === \" \" || ch === \"n\" || ch === \"t\") {\n span.className = \"gn-matrix-char gn-matrix-char--space\";\n span.textContent = \" \";\n } else {\n span.className = \"gn-matrix-char\";\n span.textContent = ch;\n }\n\n const duration = 1.6 + Math.random() * 2.4; \/\/ 1.6s \u2013 4.0s\n const delay = Math.random() * 2.5; \/\/ 0 \u2013 2.5s\n\n span.style.animationDuration = duration.toFixed(2) + \"s\";\n span.style.animationDelay = delay.toFixed(2) + \"s\";\n\n matrixTextEl.appendChild(span);\n });\n }\n\n \/* PIXEL TRAIL (pointer reactive, but no parallax) *\/\n let lastSpawn = 0;\n const spawnInterval = 18;\n const maxPixels = 140;\n let pixelCount = 0;\n\n function spawnPixel(x, y) {\n if (prefersReducedMotion) return;\n const rect = hero.getBoundingClientRect();\n const px = document.createElement(\"div\");\n px.className = \"gn-pixel\";\n\n const size = 6 + Math.floor(Math.random() * 10);\n px.style.width = size + \"px\";\n px.style.height = size + \"px\";\n\n px.style.left = x - rect.left - size \/ 2 + \"px\";\n px.style.top = y - rect.top - size \/ 2 + \"px\";\n\n const hueShift = Math.random();\n if (hueShift < 0.33) {\n px.style.background = \"#ff9aff\";\n } else if (hueShift < 0.66) {\n px.style.background = \"#00ffd5\";\n } else {\n px.style.background = \"#ffe66d\";\n }\n\n hero.appendChild(px);\n pixelCount++;\n\n px.addEventListener(\"animationend\", () => {\n px.remove();\n pixelCount = Math.max(0, pixelCount - 1);\n });\n\n if (pixelCount > maxPixels) {\n const oldPixels = hero.querySelectorAll(\".gn-pixel\");\n const removeCount = pixelCount - maxPixels;\n for (let i = 0; i < removeCount && i < oldPixels.length; i++) {\n oldPixels[i].remove();\n pixelCount--;\n }\n }\n }\n\n function handlePointerMove(e) {\n const now = performance.now();\n if (now - lastSpawn >= spawnInterval) {\n lastSpawn = now;\n\n if (e.touches && e.touches.length > 0) {\n const t = e.touches[0];\n spawnPixel(t.clientX, t.clientY);\n } else {\n spawnPixel(e.clientX, e.clientY);\n }\n }\n }\n\n hero.addEventListener(\"mousemove\", handlePointerMove);\n hero.addEventListener(\"touchstart\", handlePointerMove, { passive: true });\n hero.addEventListener(\"touchmove\", handlePointerMove, { passive: true });\n\n \/* WALNUTS IN SECTION 2 *\/\n function createWalnutCloud(container) {\n if (!container) return;\n\n const phrases = [\n \"\ud83c\udf30 GROSSE NOIX\",\n \"\ud83c\udf30 creative kernel \/ GROSSE NOIX\",\n \"\ud83c\udf30 nothing exists until you touch it\",\n \"\ud83c\udf30 chaos \u2192 structure \/ GROSSE NOIX\",\n \"\ud83c\udf30 side-channel ideas online\"\n ];\n\n const WALNUT_COUNT = 22;\n container.innerHTML = \"\";\n\n for (let i = 0; i < WALNUT_COUNT; i++) {\n const node = document.createElement(\"div\");\n node.className = \"gn-walnut\";\n\n const phrase = phrases[Math.floor(Math.random() * phrases.length)];\n node.textContent = phrase;\n\n const top = 5 + Math.random() * 90;\n const left = 2 + Math.random() * 96;\n\n node.style.top = top + \"%\";\n node.style.left = left + \"%\";\n\n const duration = 8 + Math.random() * 8;\n const delay = Math.random() * 5;\n\n node.style.animationDuration = duration + \"s, 2.2s\";\n node.style.animationDelay = delay.toFixed(2) + \"s, \" + (delay \/ 2).toFixed(2) + \"s\";\n\n container.appendChild(node);\n }\n }\n\n createWalnutCloud(walnutCloud);\n window.addEventListener(\"resize\", () => {\n createWalnutCloud(walnutCloud);\n });\n\n \/* RANDOM REVEAL FOR PORTFOLIO CARDS (SECTION 3) *\/\n function revealPortfolioCards() {\n projectCards.forEach((card) => {\n const delay = 200 + Math.random() * 900;\n card.style.transitionDelay = delay + \"ms\";\n requestAnimationFrame(() => {\n card.classList.add(\"gn-visible\");\n });\n });\n }\n\n \/* TRANSITION TO MATRIX \/ MATRIX-ALT *\/\n let hasTransitioned = false;\n\n function startTransition(target) {\n if (hasTransitioned) return;\n hasTransitioned = true;\n\n hero.classList.add(\"gn-fade-out\");\n body.classList.add(\"gn-crash\");\n\n setTimeout(() => {\n body.classList.remove(\"gn-crash\");\n if (target === \"matrix\") {\n body.classList.add(\"gn-show-matrix\");\n } else if (target === \"matrix-alt\") {\n body.classList.add(\"gn-show-matrix-alt\");\n revealPortfolioCards();\n }\n }, 450);\n\n const revealDelay = 450 + 5000;\n setTimeout(() => {\n if (target === \"matrix\" && enterNowWrapper) {\n enterNowWrapper.classList.add(\"gn-show\");\n } else if (target === \"matrix-alt\" && enterNowWrapper2) {\n enterNowWrapper2.classList.add(\"gn-show\");\n }\n }, revealDelay);\n }\n\n if (enterBtn) {\n enterBtn.addEventListener(\"click\", () => {\n startTransition(\"matrix\");\n });\n }\n\n if (browseBtn) {\n browseBtn.addEventListener(\"click\", () => {\n startTransition(\"matrix-alt\");\n });\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-landingpage.php","meta":{"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":34,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":97,"date":"2025-11-26T01:18:10","date_gmt":"2025-11-26T01:18:10","guid":{"rendered":"https:\/\/grossenoix.com\/?page_id=97"},"modified":"2025-12-09T05:40:31","modified_gmt":"2025-12-09T05:40:31","slug":"intro-games","status":"publish","type":"page","link":"https:\/\/grossenoix.com\/index.php\/intro-games\/","title":{"rendered":"Intro Games"},"content":{"rendered":"\n\n\n\n\n\n \n Grosse Noix \u2014 Hero<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap\" rel=\"stylesheet\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Code+Pro:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n margin: 0;\n background: #05000a;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: #f9fafb;\n overflow-x: hidden;\n transition: background 0.3s ease;\n }\n\n \/* HERO BASE (SECTION 01) *\/\n .gn-hero {\n position: relative;\n min-height: 100vh;\n padding: 2.5rem 1.5rem 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow: hidden;\n background: radial-gradient(circle at top, #ff9aff 0, #1a0228 32%, #05000a 70%),\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08) 0,\n rgba(255, 255, 255, 0.08) 1px,\n transparent 1px,\n transparent 3px\n );\n transform-origin: center center;\n transition:\n opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .gn-hero.gn-fade-out {\n opacity: 0;\n transform: scale(1.03);\n }\n\n .gn-hero::before {\n content: \"\";\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.35) 0,\n rgba(0, 0, 0, 0.35) 1px,\n transparent 1px,\n transparent 3px\n );\n mix-blend-mode: multiply;\n opacity: 0.9;\n z-index: 0;\n }\n\n \/* Green noise overlay on hero (static) *\/\n .gn-hero-noise {\n position: absolute;\n inset: -20px;\n pointer-events: none;\n background-image:\n repeating-linear-gradient(\n to bottom,\n rgba(34, 197, 94, 0.08) 0,\n rgba(34, 197, 94, 0.08) 2px,\n transparent 2px,\n transparent 4px\n ),\n repeating-linear-gradient(\n to right,\n rgba(22, 163, 74, 0.06) 0,\n rgba(22, 163, 74, 0.06) 1px,\n transparent 1px,\n transparent 3px\n );\n mix-blend-mode: screen;\n opacity: 0.18;\n z-index: 0;\n }\n\n .gn-hero-inner {\n position: relative;\n z-index: 1;\n max-width: 900px;\n width: 100%;\n }\n\n .gn-pixel-frame {\n border: 4px solid #ffb8ff;\n box-shadow: 0 0 0 4px #2d022f, 0 0 18px rgba(255, 137, 255, 0.7);\n padding: 1.75rem 1.25rem 2rem;\n position: relative;\n background: rgba(5, 0, 10, 0.9);\n backdrop-filter: blur(6px);\n transition: box-shadow 0.25s ease;\n }\n\n .gn-pixel-frame::before,\n .gn-pixel-frame::after {\n content: \"\";\n position: absolute;\n width: 12px;\n height: 12px;\n border: 3px solid #ff5ddd;\n border-radius: 0;\n }\n .gn-pixel-frame::before {\n left: -6px;\n top: -6px;\n border-right: none;\n border-bottom: none;\n }\n .gn-pixel-frame::after {\n right: -6px;\n bottom: -6px;\n border-left: none;\n border-top: none;\n }\n\n \/* GROSSE NOIX TITLE \u2014 RESPONSIVE *\/\n .gn-logo {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(1.6rem, 6vw, 3.2rem);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 1.4rem;\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n opacity: 0;\n transform: translateY(18px) scale(0.9);\n animation:\n gnLogoAppear 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,\n gnLogoGlow 3s ease-in-out 1.7s infinite alternate;\n transition: transform 0.12s ease-out;\n will-change: transform, text-shadow, color;\n max-width: 100%;\n overflow-wrap: break-word;\n word-break: break-word;\n line-height: 1.15;\n margin-inline: auto;\n }\n\n @keyframes gnLogoAppear {\n 0% {\n opacity: 0;\n transform: translateY(18px) scale(0.9);\n filter: blur(3px);\n text-shadow: none;\n }\n 45% {\n opacity: 1;\n transform: translateY(-4px) scale(1.05);\n filter: blur(0);\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.9),\n 0 0 14px rgba(0, 255, 213, 0.9),\n 3px 3px 0 #000000;\n }\n 70% {\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n }\n }\n\n @keyframes gnLogoGlow {\n 0% {\n color: #ffffff;\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.7),\n 0 0 10px rgba(0, 255, 213, 0.6),\n 3px 3px 0 #000000;\n }\n 50% {\n color: #ffe7ff;\n text-shadow:\n 0 0 10px rgba(255, 154, 255, 1),\n 0 0 18px rgba(0, 255, 213, 0.9),\n 0 0 28px rgba(255, 255, 255, 0.85),\n 3px 3px 0 #000000;\n }\n 100% {\n color: #ffffff;\n text-shadow:\n 0 0 6px rgba(255, 154, 255, 0.7),\n 0 0 10px rgba(0, 255, 213, 0.6),\n 3px 3px 0 #000000;\n }\n }\n\n .gn-subtitle {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(0.6rem, 1.4vw, 0.75rem);\n line-height: 1.7;\n text-transform: uppercase;\n color: #faccff;\n margin-bottom: 1.8rem;\n }\n\n .gn-description {\n font-size: 0.95rem;\n line-height: 1.7;\n max-width: 48rem;\n margin: 0 auto 2.1rem;\n }\n\n \/* MATRIX TEXT STYLE FOR DESCRIPTION (SECTION 01) *\/\n .gn-matrix-text {\n font-family: \"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1.1rem;\n line-height: 1.6;\n color: #16a34a;\n text-shadow:\n 0 0 4px rgba(22, 163, 74, 0.8),\n 0 0 8px rgba(22, 163, 74, 0.7),\n 0 0 16px rgba(22, 163, 74, 0.5);\n letter-spacing: 0.03em;\n background: radial-gradient(circle at top, rgba(15, 118, 110, 0.12), transparent 60%);\n padding: 0.85rem 0.75rem;\n border-radius: 0.35rem;\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(6px);\n filter: blur(2px);\n animation: gnMatrixTextFadeIn 1s ease-out forwards 0.8s;\n\t text-align: center\n }\n\n @keyframes gnMatrixTextFadeIn {\n 0% {\n opacity: 0;\n transform: translateY(6px);\n filter: blur(2px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0);\n }\n }\n\n .gn-matrix-char {\n display: inline-block;\n animation-name: gnMatrixCharGlow;\n animation-timing-function: steps(2, end);\n animation-iteration-count: infinite;\n will-change: opacity, text-shadow, transform;\n }\n\n .gn-matrix-char.gn-matrix-char--space {\n min-width: 0.33em;\n }\n\n @keyframes gnMatrixCharGlow {\n 0% {\n opacity: 0.15;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.4),\n 0 0 4px rgba(22, 163, 74, 0.3);\n transform: translateY(0);\n }\n 20% {\n opacity: 1;\n text-shadow:\n 0 0 4px rgba(34, 197, 94, 0.9),\n 0 0 10px rgba(34, 197, 94, 0.9),\n 0 0 18px rgba(34, 197, 94, 0.7);\n transform: translateY(-0.5px);\n }\n 45% {\n opacity: 0.6;\n text-shadow:\n 0 0 3px rgba(22, 163, 74, 0.7),\n 0 0 8px rgba(22, 163, 74, 0.6);\n transform: translateY(0.5px);\n }\n 70% {\n opacity: 0.35;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.5);\n transform: translateY(0);\n }\n 100% {\n opacity: 0.18;\n text-shadow:\n 0 0 2px rgba(22, 163, 74, 0.3);\n transform: translateY(0);\n }\n }\n\n .gn-matrix-text:hover .gn-matrix-char {\n animation-play-state: paused;\n opacity: 0.96 !important;\n text-shadow:\n 0 0 5px rgba(34, 197, 94, 0.9),\n 0 0 14px rgba(34, 197, 94, 0.8),\n 0 0 24px rgba(34, 197, 94, 0.75);\n transform: translateY(0);\n }\n\n .gn-tag-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1.0rem;\n margin-bottom: 2rem;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n }\n\n .gn-tag {\n border: 2px solid #ffb8ff;\n padding: 0.7rem 0.7rem;\n background: #140016;\n box-shadow: 2px 2px 0 #000000;\n cursor: default;\n transform: translate3d(0, 0, 0);\n transition:\n transform 0.18s ease-out,\n box-shadow 0.18s ease-out,\n border-color 0.18s ease-out;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-tag:hover {\n transform: translateY(-2px) scale(1.05);\n box-shadow: 4px 4px 0 #000000;\n border-color: #ff9af2;\n }\n }\n\n .gn-cta-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1rem;\n margin-top: 2rem;\n }\n\n .gn-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.9rem 1.7rem;\n border: 3px solid #ffb8ff;\n background: #ff5ddd;\n color: #05000a;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: 0.08em;\n cursor: pointer;\n box-shadow: 0 0 0 3px #2d022f, 4px 4px 0 #000000;\n transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;\n white-space: nowrap;\n }\n\n .gn-btn span {\n position: relative;\n z-index: 1;\n }\n\n .gn-btn::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 45deg,\n rgba(250, 250, 250, 0.35) 0,\n rgba(250, 250, 250, 0.35) 3px,\n transparent 3px,\n transparent 6px\n );\n mix-blend-mode: screen;\n opacity: 0;\n transition: opacity 0.2s linear;\n pointer-events: none;\n }\n\n .gn-btn:hover,\n .gn-btn:focus-visible {\n transform: translate(-2px, -2px);\n box-shadow: 0 0 0 3px #2d022f, 6px 6px 0 #000000;\n background: #ff9af2;\n }\n\n .gn-btn:hover::before,\n .gn-btn:focus-visible::before {\n opacity: 0.6;\n }\n\n .gn-btn-secondary {\n background: #05000a;\n color: #f9fafb;\n border-color: #00ffd5;\n box-shadow: 0 0 0 3px #022828, 4px 4px 0 #000000;\n }\n .gn-btn-secondary:hover,\n .gn-btn-secondary:focus-visible {\n background: #0b1720;\n box-shadow: 0 0 0 3px #022828, 6px 6px 0 #000000;\n }\n\n .gn-flash-row {\n margin-top: 1.4rem;\n margin-bottom: 0.5rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n justify-content: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.5rem;\n text-transform: uppercase;\n opacity: 0.9;\n }\n\n .gn-flash-text {\n letter-spacing: 0.08em;\n opacity: 0.7;\n animation: gnFlash 1.6s infinite steps(2, end);\n }\n\n .gn-flash-text--soft {\n opacity: 0.55;\n animation-duration: 2.4s;\n animation-delay: 0.4s;\n }\n\n .gn-flash-text--alt {\n animation-duration: 2s;\n animation-delay: 0.9s;\n }\n\n @keyframes gnFlash {\n 0%, 15% { opacity: 0.18; }\n 16%, 55% { opacity: 1; }\n 56%, 100% { opacity: 0.4; }\n }\n\n .gn-pixel {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #ff9aff;\n box-shadow: -2px 0 0 #00ffd5, 2px 0 0 #05000a;\n opacity: 0.85;\n pointer-events: none;\n transform-origin: center;\n animation: gnPixelFade 0.5s ease-out forwards;\n z-index: 3;\n }\n\n @keyframes gnPixelFade {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 0.9;\n }\n 60% {\n transform: translate(-4px, 4px) scale(1.1) rotate(3deg);\n opacity: 0.7;\n }\n 100% {\n transform: translate(-8px, 8px) scale(0.1);\n opacity: 0;\n }\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-hero:hover .gn-pixel-frame {\n box-shadow: 0 0 0 4px #2d022f, 0 0 24px rgba(255, 137, 255, 0.9);\n }\n }\n\n @media (max-width: 768px) {\n .gn-hero {\n padding: 1.75rem 1.25rem 2.5rem;\n }\n .gn-pixel-frame {\n padding: 1.4rem 1rem 1.7rem;\n }\n .gn-description {\n font-size: 0.9rem;\n }\n .gn-tag-row {\n font-size: 0.48rem;\n }\n .gn-tag {\n padding: 0.35rem 0.55rem;\n }\n .gn-btn {\n width: 100%;\n justify-content: center;\n font-size: 0.6rem;\n padding-inline: 1.2rem;\n }\n .gn-flash-row {\n margin-top: 1.1rem;\n }\n }\n\n \/* Extra small devices: tighten logo a bit more *\/\n @media (max-width: 400px) {\n .gn-logo {\n font-size: 1.5rem;\n letter-spacing: 0.05em;\n }\n }\n\n @media (max-width: 480px) {\n .gn-subtitle {\n font-size: 0.55rem;\n }\n .gn-description {\n font-size: 0.85rem;\n }\n }\n\n \/* CRASH \/ GLITCH (SOFTER) *\/\n body.gn-crash {\n background: #05000a;\n }\n body.gn-crash .gn-hero {\n animation: gnCrash 0.45s ease-out;\n }\n\n @keyframes gnCrash {\n 0% {\n transform: translate(0, 0) skewX(0) scale(1);\n filter: none;\n }\n 30% {\n transform: translate(-6px, 3px) skewX(3deg) scale(1.01);\n filter: hue-rotate(15deg) contrast(1.3);\n }\n 60% {\n transform: translate(4px, -3px) skewX(-2deg) scale(1.02);\n filter: hue-rotate(-10deg) contrast(1.4);\n }\n 100% {\n transform: translate(0, 0) skewX(0) scale(1);\n filter: none;\n }\n }\n\n .gn-crash-overlay {\n position: fixed;\n inset: 0;\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.75rem;\n text-transform: uppercase;\n color: #fffbeb;\n background: repeating-linear-gradient(\n to bottom,\n #05000a 0,\n #05000a 3px,\n #0f172a 3px,\n #0f172a 5px\n );\n opacity: 0;\n z-index: 4;\n transition: opacity 0.25s ease-out;\n }\n\n .gn-crash-overlay span {\n display: block;\n margin-top: 0.75rem;\n font-size: 0.6rem;\n opacity: 0.8;\n }\n\n body.gn-crash .gn-crash-overlay {\n opacity: 1;\n }\n\n \/* SECTION 02 \u2013 MATRIX CORE *\/\n .gn-matrix {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at top, #04111d 0, #020617 40%, #000000 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n opacity: 0;\n pointer-events: none;\n transform: scale(1.04) translateY(10px);\n transition:\n opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);\n z-index: 2;\n overflow-y: auto;\n }\n\n body.gn-show-matrix .gn-matrix {\n opacity: 1;\n pointer-events: auto;\n transform: scale(1) translateY(0);\n }\n\n .gn-matrix-bg {\n position: fixed;\n inset: -50px;\n background-image: linear-gradient(\n to bottom,\n rgba(22, 163, 74, 0.03) 0,\n rgba(22, 163, 74, 0.4) 50%,\n rgba(22, 163, 74, 0.05) 100%\n ),\n repeating-linear-gradient(\n to bottom,\n rgba(15, 23, 42, 0.6) 0,\n rgba(15, 23, 42, 0.6) 2px,\n transparent 2px,\n transparent 4px\n );\n mix-blend-mode: screen;\n opacity: 0.4;\n animation: gnMatrixBg 8s linear infinite;\n z-index: 0;\n }\n\n @keyframes gnMatrixBg {\n 0% { transform: translateY(0); }\n 100% { transform: translateY(40px); }\n }\n\n .gn-walnut-cloud {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n }\n\n .gn-walnut {\n position: absolute;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.55rem;\n text-transform: uppercase;\n color: #f9a8ff;\n opacity: 0.35;\n white-space: nowrap;\n mix-blend-mode: screen;\n letter-spacing: 0.05em;\n text-shadow:\n 0 0 2px rgba(249, 168, 255, 0.7),\n 0 0 4px rgba(14, 165, 233, 0.5);\n image-rendering: pixelated;\n animation:\n gnWalnutFloat 10s ease-in-out infinite alternate,\n gnWalnutFlicker 2.2s infinite steps(3, end);\n }\n\n @keyframes gnWalnutFloat {\n 0% { transform: translate3d(0, 0, 0); }\n 50% { transform: translate3d(4px, -8px, 0); }\n 100% { transform: translate3d(-4px, 6px, 0); }\n }\n\n @keyframes gnWalnutFlicker {\n 0%, 10% { opacity: 0.18; }\n 11%, 55% { opacity: 0.45; }\n 56%, 90% { opacity: 0.35; }\n 91%, 100% { opacity: 0.2; }\n }\n\n .gn-matrix-inner {\n position: relative;\n z-index: 1;\n max-width: 920px;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n }\n\n .gn-matrix-scene {\n position: relative;\n width: 100%;\n height: 260px;\n perspective: 900px;\n }\n\n .gn-matrix-track {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: gnTrackDrift 9s ease-in-out infinite alternate;\n }\n\n @keyframes gnTrackDrift {\n 0% { transform: rotateY(-8deg) translateY(8px); }\n 100% { transform: rotateY(10deg) translateY(-8px); }\n }\n\n .gn-letter {\n position: absolute;\n top: 50%;\n left: 50%;\n transform-style: preserve-3d;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(2.2rem, 4vw, 3rem);\n color: #22c55e;\n text-shadow: 0 0 16px rgba(34, 197, 94, 0.9), 0 0 30px rgba(34, 197, 94, 0.9);\n animation: gnLetterTravel 4.2s linear infinite;\n }\n\n .gn-letter::after {\n content: attr(data-letter);\n position: absolute;\n inset: 0;\n color: rgba(15, 23, 42, 0.9);\n transform: translate3d(1px, 3px, -30px);\n filter: blur(1px);\n opacity: 0.8;\n }\n\n @keyframes gnLetterTravel {\n 0% {\n transform: translate3d(var(--x), -50%, -900px) rotateY(-16deg);\n opacity: 0;\n }\n 25% { opacity: 1; }\n 70% { opacity: 1; }\n 100% {\n transform: translate3d(var(--x), -50%, 300px) rotateY(16deg);\n opacity: 0;\n }\n }\n\n .gn-letter:nth-child(1) { --x: -225px; animation-delay: 0s; }\n .gn-letter:nth-child(2) { --x: -175px; animation-delay: 0.15s; }\n .gn-letter:nth-child(3) { --x: -125px; animation-delay: 0.3s; }\n .gn-letter:nth-child(4) { --x: -75px; animation-delay: 0.45s; }\n .gn-letter:nth-child(5) { --x: -25px; animation-delay: 0.6s; }\n .gn-letter:nth-child(6) { --x: 25px; animation-delay: 0.75s; }\n .gn-letter:nth-child(7) { --x: 75px; animation-delay: 0.9s; }\n .gn-letter:nth-child(8) { --x: 125px; animation-delay: 1.05s; }\n .gn-letter:nth-child(9) { --x: 175px; animation-delay: 1.2s; }\n .gn-letter:nth-child(10){ --x: 225px; animation-delay: 1.35s; }\n\n .gn-matrix-label {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.75rem;\n text-transform: uppercase;\n color: #a5f3fc;\n text-align: center;\n }\n\n .gn-matrix-label span {\n display: block;\n margin-top: 0.4rem;\n font-size: 0.6rem;\n opacity: 0.8;\n }\n\n .gn-matrix-cta {\n margin-top: 0.75rem;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n display: flex;\n -content: center;\n }\n\n .gn-matrix-cta.gn-show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .gn-btn-enter {\n background: #22c55e;\n border-color: #bbf7d0;\n box-shadow: 0 0 0 3px #052e16, 4px 4px 0 #000000;\n color: #020617;\n }\n\n .gn-btn-enter:hover,\n .gn-btn-enter:focus-visible {\n background: #4ade80;\n box-shadow: 0 0 0 3px #052e16, 6px 6px 0 #000000;\n }\n\n \/* SECTION 03 \u2013 BROWSE EXPERIENCES \/ PORTFOLIO *\/\n .gn-matrix-alt {\n position: fixed;\n inset: 0;\n background: radial-gradient(circle at top, #2b021f 0, #1a0228 40%, #000000 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n opacity: 0;\n pointer-events: none;\n transform: scale(1.04) translateY(10px);\n transition:\n opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),\n transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);\n z-index: 2;\n overflow-y: auto;\n }\n\n body.gn-show-matrix-alt .gn-matrix-alt {\n opacity: 1;\n pointer-events: auto;\n transform: scale(1) translateY(0);\n }\n\n .gn-matrix-alt .gn-matrix-bg {\n background-image: linear-gradient(\n to bottom,\n rgba(236, 72, 153, 0.05) 0,\n rgba(236, 72, 153, 0.5) 50%,\n rgba(236, 72, 153, 0.08) 100%\n ),\n repeating-linear-gradient(\n to bottom,\n rgba(126, 34, 206, 0.7) 0,\n rgba(126, 34, 206, 0.7) 2px,\n transparent 2px,\n transparent 4px\n );\n }\n\n .gn-matrix-alt .gn-matrix-inner {\n max-width: 1020px;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 1.75rem;\n }\n\n .gn-section-03-title {\n width: 100%;\n text-align: center;\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: clamp(2rem, 4.5vw, 3.2rem);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 1.4rem;\n text-shadow: 3px 3px 0 #000000, -2px 0 0 #ff5ddd, 0 2px 0 #00ffd5;\n animation: gnLogoGlow 3s ease-in-out 0s infinite alternate;\n }\n\n .gn-portfolio-grid {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 1.2rem;\n max-width: 980px;\n width: 100%;\n margin: 0 auto;\n }\n\n @media (max-width: 1024px) {\n .gn-portfolio-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 680px) {\n .gn-matrix-alt {\n padding: 1.5rem 1.1rem;\n }\n .gn-section-03-title {\n font-size: clamp(1.7rem, 7vw, 2.2rem);\n margin-bottom: 1rem;\n }\n .gn-portfolio-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: 1rem;\n }\n }\n\n .gn-project-card {\n position: relative;\n display: block;\n aspect-ratio: 4 \/ 3;\n border-radius: 0.9rem;\n overflow: hidden;\n border: 3px solid #fecaca;\n box-shadow: 0 0 0 3px #4c0519, 4px 4px 0 #000;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-image: var(--bg, linear-gradient(135deg, #f97316, #ec4899));\n cursor: pointer;\n text-decoration: none;\n color: #fef2f2;\n isolation: isolate;\n opacity: 0;\n transform: translateY(20px) scale(0.96);\n transition:\n opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),\n transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.2s ease,\n border-color 0.2s ease;\n }\n\n .gn-project-card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at top, rgba(248, 250, 252, 0.22), transparent 55%);\n mix-blend-mode: screen;\n opacity: 0.7;\n pointer-events: none;\n transition: opacity 0.2s ease;\n }\n\n .gn-project-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n to bottom,\n rgba(15, 23, 42, 0.65) 0,\n rgba(15, 23, 42, 0.65) 2px,\n transparent 2px,\n transparent 4px\n );\n mix-blend-mode: soft-light;\n opacity: 0.7;\n pointer-events: none;\n }\n\n .gn-project-card-inner {\n position: absolute;\n inset: 0;\n padding: 0.85rem 0.95rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: 1;\n }\n\n .gn-project-tag {\n display: inline-flex;\n align-items: center;\n padding: 0.3rem 0.6rem;\n border-radius: 999px;\n border: 1px solid rgba(254, 242, 242, 0.4);\n background: rgba(15, 23, 42, 0.7);\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.45rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n\n .gn-project-title {\n font-family: \"Press Start 2P\", system-ui, sans-serif;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n text-shadow: 0 0 6px rgba(248, 250, 252, 0.8);\n }\n\n .gn-project-meta {\n font-size: 0.65rem;\n opacity: 0.82;\n margin-top: 0.35rem;\n }\n\n .gn-project-card.gn-visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .gn-project-card[data-effect=\"tilt\"]:hover,\n .gn-project-card[data-effect=\"tilt\"]:focus-visible {\n transform: translateY(-4px) scale(1.03);\n box-shadow: 0 0 0 3px #4c0519, 8px 10px 0 #000;\n border-color: #f97316;\n }\n\n .gn-project-card[data-effect=\"glitch\"]:hover .gn-project-title,\n .gn-project-card[data-effect=\"glitch\"]:focus-visible .gn-project-title {\n animation: gnTitleGlitch 0.3s steps(2, end) infinite;\n }\n\n .gn-project-card[data-effect=\"glitch\"]:hover::before,\n .gn-project-card[data-effect=\"glitch\"]:focus-visible::before {\n opacity: 1;\n }\n\n .gn-project-card[data-effect=\"pulse\"]:hover,\n .gn-project-card[data-effect=\"pulse\"]:focus-visible {\n animation: gnCardPulse 0.8s ease-out;\n box-shadow: 0 0 0 3px #4c0519, 6px 8px 0 #000;\n border-color: #fb7185;\n }\n\n .gn-project-card[data-effect=\"slide\"]:hover .gn-project-meta,\n .gn-project-card[data-effect=\"slide\"]:focus-visible .gn-project-meta {\n transform: translateY(-2px);\n text-decoration: underline;\n }\n }\n\n @keyframes gnTitleGlitch {\n 0% { transform: translate(0, 0); text-shadow: -2px 0 #fb7185, 2px 0 #22c55e; }\n 50% { transform: translate(-1px, 1px); text-shadow: 2px 0 #0ea5e9, -2px 0 #f97316; }\n 100% { transform: translate(0, 0); text-shadow: 0 0 6px rgba(248, 250, 252, 0.8); }\n }\n\n @keyframes gnCardPulse {\n 0% { transform: translateY(0) scale(1); }\n 40% { transform: translateY(-3px) scale(1.04); }\n 100% { transform: translateY(0) scale(1); }\n }\n\n .gn-project-card[data-effect=\"slide\"] .gn-project-meta {\n transition: transform 0.18s ease, text-decoration-color 0.18s ease;\n }\n\n .gn-matrix-alt .gn-matrix-label {\n color: #fecaca;\n margin-top: 1rem;\n text-align: center;\n }\n\n .gn-matrix-alt .gn-matrix-label span {\n color: #fed7ff;\n opacity: 0.85;\n }\n\n .gn-matrix-alt .gn-btn-enter {\n background: #f97316;\n border-color: #fed7aa;\n box-shadow: 0 0 0 3px #7c2d12, 4px 4px 0 #000000;\n color: #020617;\n }\n\n .gn-matrix-alt .gn-btn-enter:hover,\n .gn-matrix-alt .gn-btn-enter:focus-visible {\n background: #fdba74;\n box-shadow: 0 0 0 3px #7c2d12, 6px 6px 0 #000000;\n }\n\n @media (max-width: 768px) {\n .gn-matrix-scene {\n height: 220px;\n }\n .gn-letter {\n font-size: clamp(1.6rem, 7vw, 2.4rem);\n }\n\n .gn-letter:nth-child(1) { --x: -135px; }\n .gn-letter:nth-child(2) { --x: -105px; }\n .gn-letter:nth-child(3) { --x: -75px; }\n .gn-letter:nth-child(4) { --x: -45px; }\n .gn-letter:nth-child(5) { --x: -15px; }\n .gn-letter:nth-child(6) { --x: 15px; }\n .gn-letter:nth-child(7) { --x: 45px; }\n .gn-letter:nth-child(8) { --x: 75px; }\n .gn-letter:nth-child(9) { --x: 105px; }\n .gn-letter:nth-child(10){ --x: 135px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"gn-hero\" id=\"gn-hero\">\n <div class=\"gn-hero-noise\" id=\"gn-hero-noise\"><\/div>\n <div class=\"gn-hero-inner\">\n <div class=\"gn-pixel-frame\">\n <div class=\"gn-logo\">GrosseNoix<\/div>\n <div class=\"gn-subtitle\">\n Nothing exists until you feel it.\n <\/div>\n\n <p class=\"gn-description gn-matrix-text\" id=\"gn-matrix-text\">GrosseNoix is not an agency, not a studio\u2026 it\u2019s a creative cult with no leader, and no rules. It\u2019s a chaos fueled by chaos. We design structures for misfit projects, brand architectures, products, digital worlds, and business systems. If you\u2019re not sure what your idea is yet, you\u2019re probably in the right place. We are the shadows that might ignite your light.<\/p>\n <\/p>\n <div class=\"gn-tag-row\">\n <div class=\"gn-tag\">Creative Business Architecture<\/div>\n <div class=\"gn-tag\">Concept & Prototype Lab<\/div>\n <div class=\"gn-tag\">Non-Traditional Structures<\/div>\n <div class=\"gn-tag\">Webcraft & Interactive Experiences <\/div>\n <div class=\"gn-tag\">Digital Graphic Art & Wearable <\/div>\n <\/div>\n\n <div class=\"gn-flash-row\">\n <span class=\"gn-flash-text\">[ INPUT: UNKNOWN SIGNAL ]<\/span>\n <span class=\"gn-flash-text gn-flash-text--soft\">booting creative kernel…<\/span>\n <span class=\"gn-flash-text gn-flash-text--alt\">touch to collapse the chaos<\/span>\n <\/div>\n\n <div class=\"gn-cta-row\">\n <button class=\"gn-btn\" type=\"button\" id=\"gn-enter-btn\">\n <span>Boot the Core<\/span>\n <\/button>\n <button class=\"gn-btn gn-btn-secondary\" type=\"button\" id=\"gn-browse-btn\">\n <span>Browse Experiences<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"gn-crash-overlay\" id=\"gn-crash-overlay\">\n SYSTEM OVERRUN\n <span>> booting GROSSE NOIX kernel…<\/span>\n <\/div>\n\n \n <section class=\"gn-matrix\" id=\"gn-matrix\">\n <div class=\"gn-matrix-bg\"><\/div>\n <div class=\"gn-walnut-cloud\" id=\"gn-walnut-cloud\"><\/div>\n\n <div class=\"gn-matrix-inner\">\n <div class=\"gn-matrix-scene\">\n <div class=\"gn-matrix-track\">\n <div class=\"gn-letter\" data-letter=\"G\">G<\/div>\n <div class=\"gn-letter\" data-letter=\"R\">R<\/div>\n <div class=\"gn-letter\" data-letter=\"O\">O<\/div>\n <div class=\"gn-letter\" data-letter=\"S\">S<\/div>\n <div class=\"gn-letter\" data-letter=\"S\">S<\/div>\n <div class=\"gn-letter\" data-letter=\"E\">E<\/div>\n <div class=\"gn-letter\" data-letter=\"N\">N<\/div>\n <div class=\"gn-letter\" data-letter=\"O\">O<\/div>\n <div class=\"gn-letter\" data-letter=\"I\">I<\/div>\n <div class=\"gn-letter\" data-letter=\"X\">X<\/div>\n <\/div>\n <\/div>\n\n <div class=\"gn-matrix-label\">\n GROSSE NOIX \/ CORE SPACE\n <span>Spiritual cousin of a vending machine that only dispenses breakthroughs and questionable life choices<\/span>\n <\/div>\n\n <div class=\"gn-matrix-cta\" id=\"gn-enter-now-wrapper\">\n <a\n class=\"gn-btn gn-btn-enter\"\n id=\"gn-enter-now\"\n href=\"https:\/\/grossenoix.com\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <span>Enter Now<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"gn-matrix-alt\" id=\"gn-matrix-alt\">\n <div class=\"gn-matrix-bg\"><\/div>\n\n <div class=\"gn-matrix-inner\">\n <div class=\"gn-section-03-title\">BROWSE EXPERIENCES<\/div>\n\n <div class=\"gn-portfolio-grid\">\n <a href=\"#project1\" class=\"gn-project-card\" data-effect=\"tilt\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_florus2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Human System<\/div>\n <div>\n <div class=\"gn-project-title\">Florus \/ Living Label<\/div>\n <div class=\"gn-project-meta\">Hybrid brand, product & ecosystem frame.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project3\" class=\"gn-project-card\" data-effect=\"pulse\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_hr2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">For the braves<\/div>\n <div>\n <div class=\"gn-project-title\">Headrush Brand<\/div>\n <div class=\"gn-project-meta\">Ultimate spaces for misfits wearable.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project5\" class=\"gn-project-card\" data-effect=\"tilt\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_vangro2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Product Lab<\/div>\n <div>\n <div class=\"gn-project-title\">VANGR\u00d6<\/div>\n <div class=\"gn-project-meta\">Limited maple artefacts with ritual.<\/div>\n <\/div>\n <\/div>\n <\/a>\n\n <a href=\"#project6\" class=\"gn-project-card\" data-effect=\"glitch\" style=\"--bg: url('https:\/\/grossenoix.com\/wp-content\/uploads\/2025\/12\/gn_TT2.png');\">\n <div class=\"gn-project-card-inner\">\n <div class=\"gn-project-tag\">Trading Fanatics<\/div>\n <div>\n <div class=\"gn-project-title\">TTRADE<\/div>\n <div class=\"gn-project-meta\">Apparel systems from risk & intuition.<\/div>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n\n <div class=\"gn-matrix-label\">\n GROSSE NOIX \/ EXPERIMENT ZONE\n <span>Clickable fragments from the kernel: touch to open side channels, prototypes and live structures.<\/span>\n <\/div>\n\n <div class=\"gn-matrix-cta\" id=\"gn-enter-now-wrapper-2\">\n <a\n class=\"gn-btn gn-btn-enter\"\n id=\"gn-enter-now-2\"\n href=\"https:\/\/grossenoix.com\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <span>Enter Now<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n (function () {\n const hero = document.getElementById(\"gn-hero\");\n const enterBtn = document.getElementById(\"gn-enter-btn\");\n const browseBtn = document.getElementById(\"gn-browse-btn\");\n const enterNowWrapper = document.getElementById(\"gn-enter-now-wrapper\");\n const enterNowWrapper2 = document.getElementById(\"gn-enter-now-wrapper-2\");\n const walnutCloud = document.getElementById(\"gn-walnut-cloud\");\n const body = document.body;\n const projectCards = document.querySelectorAll(\".gn-project-card\");\n const matrixTextEl = document.getElementById(\"gn-matrix-text\");\n const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n if (!hero) return;\n\n \/* MATRIX EFFECT FOR DESCRIPTION TEXT (build char spans) *\/\n if (matrixTextEl) {\n const originalText = matrixTextEl.textContent;\n matrixTextEl.textContent = \"\";\n\n originalText.split(\"\").forEach((ch) => {\n const span = document.createElement(\"span\");\n\n if (ch === \" \" || ch === \"n\" || ch === \"t\") {\n span.className = \"gn-matrix-char gn-matrix-char--space\";\n span.textContent = \" \";\n } else {\n span.className = \"gn-matrix-char\";\n span.textContent = ch;\n }\n\n const duration = 1.6 + Math.random() * 2.4; \/\/ 1.6s \u2013 4.0s\n const delay = Math.random() * 2.5; \/\/ 0 \u2013 2.5s\n\n span.style.animationDuration = duration.toFixed(2) + \"s\";\n span.style.animationDelay = delay.toFixed(2) + \"s\";\n\n matrixTextEl.appendChild(span);\n });\n }\n\n \/* PIXEL TRAIL (pointer reactive, but no parallax) *\/\n let lastSpawn = 0;\n const spawnInterval = 18;\n const maxPixels = 140;\n let pixelCount = 0;\n\n function spawnPixel(x, y) {\n if (prefersReducedMotion) return;\n const rect = hero.getBoundingClientRect();\n const px = document.createElement(\"div\");\n px.className = \"gn-pixel\";\n\n const size = 6 + Math.floor(Math.random() * 10);\n px.style.width = size + \"px\";\n px.style.height = size + \"px\";\n\n px.style.left = x - rect.left - size \/ 2 + \"px\";\n px.style.top = y - rect.top - size \/ 2 + \"px\";\n\n const hueShift = Math.random();\n if (hueShift < 0.33) {\n px.style.background = \"#ff9aff\";\n } else if (hueShift < 0.66) {\n px.style.background = \"#00ffd5\";\n } else {\n px.style.background = \"#ffe66d\";\n }\n\n hero.appendChild(px);\n pixelCount++;\n\n px.addEventListener(\"animationend\", () => {\n px.remove();\n pixelCount = Math.max(0, pixelCount - 1);\n });\n\n if (pixelCount > maxPixels) {\n const oldPixels = hero.querySelectorAll(\".gn-pixel\");\n const removeCount = pixelCount - maxPixels;\n for (let i = 0; i < removeCount && i < oldPixels.length; i++) {\n oldPixels[i].remove();\n pixelCount--;\n }\n }\n }\n\n function handlePointerMove(e) {\n const now = performance.now();\n if (now - lastSpawn >= spawnInterval) {\n lastSpawn = now;\n\n if (e.touches && e.touches.length > 0) {\n const t = e.touches[0];\n spawnPixel(t.clientX, t.clientY);\n } else {\n spawnPixel(e.clientX, e.clientY);\n }\n }\n }\n\n hero.addEventListener(\"mousemove\", handlePointerMove);\n hero.addEventListener(\"touchstart\", handlePointerMove, { passive: true });\n hero.addEventListener(\"touchmove\", handlePointerMove, { passive: true });\n\n \/* WALNUTS IN SECTION 2 *\/\n function createWalnutCloud(container) {\n if (!container) return;\n\n const phrases = [\n \"\ud83c\udf30 GROSSE NOIX\",\n \"\ud83c\udf30 creative kernel \/ GROSSE NOIX\",\n \"\ud83c\udf30 nothing exists until you touch it\",\n \"\ud83c\udf30 chaos \u2192 structure \/ GROSSE NOIX\",\n \"\ud83c\udf30 side-channel ideas online\"\n ];\n\n const WALNUT_COUNT = 22;\n container.innerHTML = \"\";\n\n for (let i = 0; i < WALNUT_COUNT; i++) {\n const node = document.createElement(\"div\");\n node.className = \"gn-walnut\";\n\n const phrase = phrases[Math.floor(Math.random() * phrases.length)];\n node.textContent = phrase;\n\n const top = 5 + Math.random() * 90;\n const left = 2 + Math.random() * 96;\n\n node.style.top = top + \"%\";\n node.style.left = left + \"%\";\n\n const duration = 8 + Math.random() * 8;\n const delay = Math.random() * 5;\n\n node.style.animationDuration = duration + \"s, 2.2s\";\n node.style.animationDelay = delay.toFixed(2) + \"s, \" + (delay \/ 2).toFixed(2) + \"s\";\n\n container.appendChild(node);\n }\n }\n\n createWalnutCloud(walnutCloud);\n window.addEventListener(\"resize\", () => {\n createWalnutCloud(walnutCloud);\n });\n\n \/* RANDOM REVEAL FOR PORTFOLIO CARDS (SECTION 3) *\/\n function revealPortfolioCards() {\n projectCards.forEach((card) => {\n const delay = 200 + Math.random() * 900;\n card.style.transitionDelay = delay + \"ms\";\n requestAnimationFrame(() => {\n card.classList.add(\"gn-visible\");\n });\n });\n }\n\n \/* TRANSITION TO MATRIX \/ MATRIX-ALT *\/\n let hasTransitioned = false;\n\n function startTransition(target) {\n if (hasTransitioned) return;\n hasTransitioned = true;\n\n hero.classList.add(\"gn-fade-out\");\n body.classList.add(\"gn-crash\");\n\n setTimeout(() => {\n body.classList.remove(\"gn-crash\");\n if (target === \"matrix\") {\n body.classList.add(\"gn-show-matrix\");\n } else if (target === \"matrix-alt\") {\n body.classList.add(\"gn-show-matrix-alt\");\n revealPortfolioCards();\n }\n }, 450);\n\n const revealDelay = 450 + 5000;\n setTimeout(() => {\n if (target === \"matrix\" && enterNowWrapper) {\n enterNowWrapper.classList.add(\"gn-show\");\n } else if (target === \"matrix-alt\" && enterNowWrapper2) {\n enterNowWrapper2.classList.add(\"gn-show\");\n }\n }, revealDelay);\n }\n\n if (enterBtn) {\n enterBtn.addEventListener(\"click\", () => {\n startTransition(\"matrix\");\n });\n }\n\n if (browseBtn) {\n browseBtn.addEventListener(\"click\", () => {\n startTransition(\"matrix-alt\");\n });\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-landingpage.php","meta":{"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":34,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/97\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}