@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root { color-scheme: dark; --ink: #121212; --lime: #9cab13; --cream: #f8f6ef; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--cream); font-family: Poppins, Arial, Helvetica, sans-serif; }
button, a { font: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; transform: translateY(-160%); padding: 10px 14px; background: var(--lime); color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; z-index: 20; top: 0; left: 50%; width: min(100%, 1920px); height: clamp(52px, 5.99vw, 115px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: height .38s ease; }
.site-header nav { display: flex; width: 67.4%; height: 100%; align-items: center; justify-content: center; gap: clamp(18px, 3.8vw, 72px); border-radius: 0 0 clamp(18px, 2.1vw, 40px) clamp(18px, 2.1vw, 40px); background: #121212; box-shadow: 0 10px 24px rgb(0 0 0 / .16); pointer-events: auto; transition: border-radius .38s ease, box-shadow .38s ease; }
.site-header nav a { color: #a9bd18; font-size: clamp(9px, .72vw, 14px); font-weight: 700; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px 1px #000; transition: color .18s ease, text-shadow .18s ease, transform .18s ease, opacity .22s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; text-shadow: 0 0 12px #c9e32c; transform: translateY(-2px); }
.site-header.is-compact { height: 14px; }.site-header.is-compact nav { border-radius: 0 0 10px 10px; box-shadow: 0 4px 12px rgb(0 0 0 / .18); }.site-header.is-compact nav a { opacity: 0; transform: translateY(-10px); }.site-header.is-compact:hover, .site-header.is-compact:focus-within { height: clamp(52px, 5.99vw, 115px); }.site-header.is-compact:hover nav, .site-header.is-compact:focus-within nav { border-radius: 0 0 clamp(18px, 2.1vw, 40px) clamp(18px, 2.1vw, 40px); }.site-header.is-compact:hover nav a, .site-header.is-compact:focus-within nav a { opacity: 1; transform: translateY(0); }
.brand, .menu-button, .mobile-menu { display: none; }
.visual-page { position: relative; width: min(100%, 1920px); margin: 0 auto; container-type: inline-size; }
.artwork { display: block; width: 100%; height: auto; }
.hero-flower { position: absolute; z-index: 4; display: block; height: auto; pointer-events: none; transform-origin: center; animation: flower-rotate 24s linear infinite; }.flower-left { top: 13.21%; left: -3.7%; width: 17.5%; animation-duration: 28s; }.flower-right { top: 4.43%; left: 86.15%; width: 12.3%; animation-duration: 22s; animation-delay: -5s; }
@keyframes flower-rotate { to { transform: rotate(360deg); } }
.copy, .exhibition-ribbons, .art-card, .nft-card { position: absolute; z-index: 2; }
.copy p, .copy h2 { margin: 0; }
.hero-copy { position: static; }
.hero-kicker { position: absolute; top: 13.4%; left: 68.9%; color: var(--lime); font-size: 1.67cqw; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.button { border: 0; border-radius: 999px; cursor: pointer; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
.button:hover, .button:focus-visible { background: #d5ef2d; color: #151515; box-shadow: 0 0 0 .25cqw #f8f6ef, 0 .5cqw 1.2cqw rgb(0 0 0 / .35); outline: 0; transform: translateY(-.25cqw) scale(1.025); }
.hero-button { position: absolute; top: 14.47%; left: 74.8%; width: 16.2%; height: 1.37%; background: var(--lime); color: #111; font-size: .89cqw; }.hero-button::before { content: "▷"; margin-right: .45em; font-size: 1.15em; }.hero-button:hover, .hero-button:focus-visible { background: #d5ef2d; box-shadow: 0 0 0 .18cqw var(--cream), 0 .4cqw 1cqw rgb(0 0 0 / .25); color: #111; }
.exhibition-ribbons { top: 19.99%; left: 0; width: 100%; height: 3.41%; overflow: visible; }.ribbon { position: absolute; left: 0; width: 100%; overflow: hidden; color: #121212; }.ribbon-back { z-index: 1; top: 11.4%; height: 76%; background: #71800b; transform: skewY(2deg); transform-origin: left center; }.ribbon-front { z-index: 2; top: 0; height: 60%; background: var(--lime); box-shadow: 0 .55cqw 1.15cqw rgb(0 0 0 / .42); }.ribbon-track { display: flex; width: max-content; height: 100%; animation: exhibition-scroll 22s linear infinite; animation-delay: 0s; animation-fill-mode: both; white-space: nowrap; }.ribbon-content { display: flex; flex: none; height: 100%; align-items: center; gap: 3.1cqw; padding-right: 3.1cqw; }.ribbon-front .ribbon-track { animation-duration: 25s; }.ribbon-back .ribbon-track { position: absolute; inset: 0; height: 100%; }.ribbon span { font-size: 1.7cqw; font-weight: 900; letter-spacing: .28em; }.ribbon b { font-size: 2cqw; font-weight: 900; }.ribbon-back span { font-size: 1.52cqw; font-weight: 900; }.ribbon-back b { font-size: 1.76cqw; font-weight: 900; }.ribbon-eye { position: absolute; z-index: 3; top: 39.7%; left: 15.36%; display: block; width: 36%; height: auto; pointer-events: none; animation: ribbon-eye-float 8.5s ease-in-out infinite; } @keyframes exhibition-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ribbon-eye-float { 0%, 100% { transform: translate(0, 0); } 19% { transform: translate(.65cqw, -.55cqw); } 43% { transform: translate(-.38cqw, .62cqw); } 71% { transform: translate(.48cqw, .25cqw); } }
.art-cards { position: absolute; z-index: 2; top: 25.77%; left: 0; width: 100%; height: 11.35%; }.art-card-viewport { position: absolute; inset: 0 8.75%; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }.art-card-viewport:active { cursor: grabbing; }.art-card-track { display: flex; width: 100%; height: 100%; gap: 6.6%; transition: transform .58s cubic-bezier(.22, .75, .25, 1); will-change: transform; }.art-card-track.is-dragging { transition: none; }.art-card { position: relative; z-index: 2; display: flex; flex: 0 0 calc((100% - 13.2%) / 3); width: calc((100% - 13.2%) / 3); height: 100%; flex-direction: column; align-items: center; overflow: hidden; padding: 1.25cqw 1.15cqw .9cqw; border-radius: 1cqw; background: #f7f6ef; color: #141414; text-decoration: none; box-shadow: 0 .28cqw .8cqw rgb(0 0 0 / .2); transform: translateY(0); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }.art-card::after, .nft-card::after { content: ""; position: absolute; inset: 0; border: .15cqw solid transparent; border-radius: 1cqw; box-shadow: 0 0 0 0 transparent; pointer-events: none; transition: border-color .2s ease, box-shadow .2s ease; }.art-card img { display: block; width: 100%; height: 63%; border-radius: .35cqw; object-fit: cover; object-position: center 39%; -webkit-user-drag: none; user-select: none; }.art-card-copy { display: flex; width: 74%; height: 37%; flex-direction: column; align-items: center; justify-content: center; gap: .58cqw; text-align: center; }.art-card-copy strong { display: block; width: 100%; text-align: center; font-size: 1.9cqw; font-weight: 900; line-height: .95; letter-spacing: -.04em; }.art-card-copy > span { display: block; width: 100%; text-align: center; font-size: .79cqw; font-weight: 500; line-height: 1.42; }.art-card:hover, .art-card:focus-visible { outline: 0; transform: translateY(-.75cqw) scale(1.02); filter: brightness(1.04); box-shadow: 0 1cqw 2cqw rgb(0 0 0 / .35); }.art-card:hover::after, .art-card:focus-visible::after { border-color: var(--lime); box-shadow: 0 0 0 .18cqw rgb(156 171 19 / .32); }.carousel-control { position: absolute; z-index: 4; top: 50%; display: grid; width: 3.7cqw; height: 3.7cqw; place-items: center; padding: 0; border: .12cqw solid var(--lime); border-radius: 50%; background: rgb(18 18 18 / .9); color: var(--cream); cursor: pointer; font-size: 2.15cqw; font-weight: 700; line-height: 1; transform: translateY(-50%); transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease; }.carousel-prev { left: 2.15%; }.carousel-next { right: 2.15%; }.carousel-control:not(:disabled):hover, .carousel-control:not(:disabled):focus-visible { border-color: var(--cream); background: var(--lime); color: var(--ink); outline: 0; }.carousel-control:disabled { cursor: not-allowed; opacity: .3; }.carousel-prev:not(:disabled):hover, .carousel-prev:not(:disabled):focus-visible { transform: translate(-.22cqw, -50%); }.carousel-next:not(:disabled):hover, .carousel-next:not(:disabled):focus-visible { transform: translate(.22cqw, -50%); }
.story-monster { position: absolute; z-index: 3; top: 36.41%; left: 0; width: 18.49%; height: 9.3%; pointer-events: none; animation: story-monster-float 7.6s ease-in-out infinite alternate; }.story-monster img { position: absolute; display: block; height: auto; }.story-monster-core { top: 22.71%; left: 0; width: 93.52%; }.story-monster-sparkle { top: 24.5%; left: 81.97%; width: 18.03%; }.story-monster-dot { top: 19.92%; left: 65.63%; width: 13.52%; }.story-monster-smoke { top: 0; left: 0; width: 54.65%; }.story-copy { top: 46.35%; left: 7.2%; width: 42%; }.story-copy h2 { font-size: 3.4cqw; font-weight: 900; letter-spacing: .07em; line-height: 1; }.story-copy p { width: 76%; margin-top: 1.05cqw; font-size: 1.28cqw; font-weight: 500; line-height: 1.37; text-align: justify; text-align-last: left; }.dark-button { position: absolute; top: 21.6cqw; left: -.25cqw; width: 16.2cqw; height: 4.64cqw; border-radius: 1.2cqw; background: #151515; color: var(--cream); font-size: 1.2cqw; } @keyframes story-monster-float { from { transform: translateY(-.55cqw); } to { transform: translateY(.55cqw); } }
.nft-sticker, .nft-character, .nft-flower, .nft-bubbles { position: absolute; z-index: 3; display: block; pointer-events: none; }.nft-sticker { top: 62.45%; left: 24.53%; width: 13.23%; height: auto; }.nft-character { top: 61.37%; left: 86.15%; width: 20.1%; height: auto; animation: nft-character-float 11s ease-in-out infinite; }.nft-flower { top: 75.49%; left: 84.74%; width: 9.48%; height: auto; transform-origin: center; animation: nft-flower-rotate 27s linear infinite; }.nft-bubbles { top: 65.17%; left: 0; width: 15.1%; height: 9.75%; animation: nft-bubbles-float 8.5s ease-in-out infinite alternate; }.nft-bubbles img { position: absolute; display: block; height: auto; }.nft-bubble-small { top: 0; left: 64.48%; width: 35.52%; }.nft-bubble-large { top: 44.11%; left: 0; width: 79.66%; }.nft-copy { top: 62.55%; left: 40.6%; width: 37%; }.nft-copy h2 { font-size: 2.55cqw; line-height: 1; }.nft-copy p { margin-top: 1.15cqw; font-size: 1.04cqw; line-height: 1.42; }.nft-cards { position: absolute; z-index: 2; top: 67.2%; left: 0; width: 100%; height: 9.86%; }.nft-card { position: absolute; z-index: 2; top: 0; display: block; width: 21.67%; height: 100%; padding: 0; border: .13cqw solid rgb(120 145 71 / .72); background: rgb(18 18 18 / .92); color: var(--cream); text-decoration: none; box-shadow: 0 .45cqw 1.1cqw rgb(0 0 0 / .2); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease; }.nft-card::before { content: ""; position: absolute; z-index: 1; inset: 3.45%; border: .13cqw solid rgb(112 112 112 / .27); pointer-events: none; }.nft-card::after { display: none; }.nft-card > img { position: absolute; z-index: 2; top: 9.5%; left: 10%; display: block; width: 80%; height: 60%; object-fit: cover; object-position: center; }.nft-card-copy { position: absolute; z-index: 2; bottom: 9.2%; left: 9.85%; display: grid; width: 80.5%; height: 17.1%; align-content: center; padding: .45cqw 4.1cqw .45cqw 1.45cqw; border: .13cqw solid rgb(120 145 71 / .58); border-radius: 1.2cqw; background: #252525; line-height: 1.1; }.nft-card-copy b { color: #aaa; font-size: .85cqw; font-weight: 700; }.nft-card-copy > span { margin-top: .28cqw; color: var(--cream); font-size: 1cqw; font-weight: 800; }.nft-card-copy i { position: absolute; right: 1.15cqw; top: 50%; display: grid; width: 2.35cqw; height: 2.35cqw; place-items: center; border-radius: 50%; background: var(--lime); color: #111; font-size: 1.45cqw; font-style: normal; transform: translateY(-50%); }.nft-card:hover, .nft-card:focus-visible { border-color: var(--lime); outline: 0; transform: translateY(-.45cqw) scale(1.015); filter: brightness(1.05); box-shadow: 0 .85cqw 1.6cqw rgb(0 0 0 / .34); }.nft-card:hover::after, .nft-card:focus-visible::after { display: none; }.nft-one { left: 14.17%; }.nft-two { left: 39.17%; }.nft-three { left: 64.17%; } @keyframes nft-character-float { 0%, 100% { transform: translate(0, 0); } 26% { transform: translate(-.7cqw, .48cqw); } 52% { transform: translate(.4cqw, -.55cqw); } 75% { transform: translate(.65cqw, .25cqw); } } @keyframes nft-flower-rotate { to { transform: rotate(360deg); } } @keyframes nft-bubbles-float { from { transform: translate(-.24cqw, .45cqw); } to { transform: translate(.35cqw, -.55cqw); } }
.about-copy { top: 84.98%; left: 35.5%; width: 44%; }.about-copy h2 { font-size: 2.55cqw; }.about-copy p { width: 100%; margin-top: 1.3cqw; font-size: 1.04cqw; line-height: 1.35; }.profile-social-links { position: absolute; z-index: 3; inset: 0; pointer-events: none; }.profile-social-links a { position: absolute; top: 89.75%; display: block; height: .86%; border-radius: .35cqw; pointer-events: auto; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }.profile-instagram { left: 35.47%; width: 2.14%; }.profile-discord { left: 39.38%; width: 2.19%; }.profile-x { left: 43.07%; width: 2.08%; }.profile-social-links a:hover, .profile-social-links a:focus-visible { background: rgb(248 246 239 / .12); box-shadow: 0 0 0 .16cqw rgb(156 171 19 / .7); outline: 0; transform: translateY(-.14cqw); }
.footer-copy { top: 97.3%; left: 72%; }.footer-copy p { font-size: 1.2cqw; font-weight: 700; text-transform: uppercase; }
.footer-social-links { position: absolute; z-index: 3; inset: 0; pointer-events: none; }.footer-social-links a { position: absolute; top: 96.98%; display: block; height: 1.25%; border-radius: .45cqw; pointer-events: auto; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }.footer-instagram { left: 42.14%; width: 3.39%; }.footer-discord { left: 48.33%; width: 3.44%; }.footer-x { left: 54.17%; width: 3.29%; }.footer-social-links a:hover, .footer-social-links a:focus-visible { background: rgb(248 246 239 / .12); box-shadow: 0 0 0 .18cqw rgb(156 171 19 / .7); outline: 0; transform: translateY(-.16cqw); }
.toast { position: fixed; z-index: 40; bottom: 20px; left: 50%; margin: 0; padding: 10px 14px; border: 1px solid var(--lime); background: #151515; color: var(--cream); font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 720px) { .site-header, .site-header.is-compact, .site-header.is-compact:hover, .site-header.is-compact:focus-within { justify-content: space-between; height: 56px; padding: 0 18px; background: rgb(18 18 18 / .9); backdrop-filter: blur(8px); pointer-events: auto; }.brand { display: block; color: var(--cream); font-size: 15px; font-weight: 900; letter-spacing: .06em; text-decoration: none; }.site-header nav { display: none; }.menu-button { display: block; padding: 8px 10px; border: 1px solid var(--lime); background: transparent; color: var(--lime); font: inherit; font-weight: 800; text-transform: uppercase; }.menu-button:hover, .menu-button:focus-visible { background: var(--lime); color: var(--ink); outline: 0; }.mobile-menu { position: fixed; z-index: 19; top: 56px; right: 12px; display: grid; min-width: 160px; padding: 8px; border: 1px solid #3b3b3b; background: #171717; box-shadow: 0 14px 28px rgb(0 0 0 / .35); }.mobile-menu[hidden] { display: none; }.mobile-menu a { padding: 10px; color: var(--cream); font-weight: 700; text-decoration: none; text-transform: uppercase; }.mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--lime); color: var(--ink); outline: 0; } }