/* (c) 2026 Noetive */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/SpaceGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/SpaceGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/SpaceGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/Outfit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/Outfit-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/Outfit-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

a,
button,
select,
summary,
label[for],
[type="submit"],
[type="button"],
[role="button"] {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 5px;
    border: 2px solid #FDFBF7;
}

.text-stroke-black {
    -webkit-text-stroke: 1px black;
}

@keyframes shadow-morph {
    0% {
        box-shadow:
            4px 4px 0 0 #a855f7,
            -4px -4px 0 0 #2dd4bf,
            4px -4px 0 0 #60a5fa,
            -4px 4px 0 0 #f472b6;
    }
    25% {
        box-shadow:
            -4px 4px 0 0 #60a5fa,
            4px -4px 0 0 #f472b6,
            -4px -4px 0 0 #a855f7,
            4px 4px 0 0 #2dd4bf;
    }
    50% {
        box-shadow:
            -4px -4px 0 0 #f472b6,
            4px 4px 0 0 #60a5fa,
            -4px 4px 0 0 #2dd4bf,
            4px -4px 0 0 #a855f7;
    }
    75% {
        box-shadow:
            4px -4px 0 0 #2dd4bf,
            -4px 4px 0 0 #a855f7,
            4px 4px 0 0 #f472b6,
            -4px -4px 0 0 #60a5fa;
    }
    100% {
        box-shadow:
            4px 4px 0 0 #a855f7,
            -4px -4px 0 0 #2dd4bf,
            4px -4px 0 0 #60a5fa,
            -4px 4px 0 0 #f472b6;
    }
}

.cta-shadow {
    animation: shadow-morph 3s ease-in-out infinite;
}

.cta-shadow:hover {
    animation-name: shadow-morph-lg;
}

.cta-shadow-static {
    box-shadow:
        3px 3px 0 0 #a855f7,
        -3px -3px 0 0 #2dd4bf,
        3px -3px 0 0 #60a5fa,
        -3px 3px 0 0 #f472b6;
}

/* Claim CTA — shadow tracks gloss light direction as if the card were tilted.
   Shares the gloss's 700ms ease-in-out timing so the shadow shrinks through
   zero at mid-sweep (card "level") and grows on the opposite side as the
   gloss finishes — reading as a slow tilt under a moving light. */
.claim-cta {
    position: relative;
    overflow: hidden;
    box-shadow:
        -4px -4px 0 0 rgba(0, 0, 0, 1),
        0 0 26px 5px rgba(192, 132, 252, 0.7);
    transition: box-shadow 700ms ease-in-out;
}

.claim-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.25) 45%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 300%;
    background-position: 0% 0%;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.claim-cta:hover {
    box-shadow:
        4px 4px 0 0 rgba(0, 0, 0, 1),
        0 0 26px 5px rgba(192, 132, 252, 0.7);
}

.claim-cta:hover::after {
    opacity: 1;
    animation: claim-gloss 700ms ease-in-out forwards;
}

.claim-cta > * {
    position: relative;
    z-index: 1;
}

@keyframes claim-gloss {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Clay casino chip logo */
.chip-logo {
    background: radial-gradient(circle at 40% 35%, #a855f7 0%, #7c3aed 60%, #6d28d9 100%) !important;
    box-shadow:
        3px 3px 0 0 #000,
        inset 0 0 0 3px rgba(255,255,255,0.15),
        inset 0 0 0 5px rgba(0,0,0,0.2),
        inset 0 0 0 7px rgba(255,255,255,0.1);
    position: relative;
    z-index: 2;
}

/* Stack wrapper — pseudo-elements live here, not on the chip */
.chip-stack {
    position: relative;
    display: inline-block;
}

.chip-stack::before,
.chip-stack::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    border: 2px solid #1e1b4b;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.chip-stack::before {
    z-index: 1;
    background: radial-gradient(circle at 40% 35%, #9333ea 0%, #6d28d9 60%, #5b21b6 100%);
    box-shadow:
        2px 3px 0 0 #000,
        4px 5px 8px rgba(0,0,0,0.3),
        inset 0 0 0 3px rgba(255,255,255,0.12),
        inset 0 0 0 5px rgba(0,0,0,0.18),
        inset 0 0 0 7px rgba(255,255,255,0.08);
}

.chip-stack::after {
    z-index: 0;
    background: radial-gradient(circle at 40% 35%, #7c3aed 0%, #5b21b6 60%, #4c1d95 100%);
    box-shadow:
        2px 3px 0 0 #000,
        5px 6px 10px rgba(0,0,0,0.35),
        inset 0 0 0 3px rgba(255,255,255,0.1),
        inset 0 0 0 5px rgba(0,0,0,0.15),
        inset 0 0 0 7px rgba(255,255,255,0.06);
}

.logo-link:hover .chip-stack::before {
    opacity: 1;
    transform: translate(-6px, 8px) rotate(-12deg);
}

.logo-link:hover .chip-stack::after {
    opacity: 1;
    transform: translate(8px, 10px) rotate(8deg);
}

/* Small variant for footer */
.logo-link:hover .chip-stack-sm::before {
    transform: translate(-4px, 6px) rotate(-12deg);
}

.logo-link:hover .chip-stack-sm::after {
    transform: translate(6px, 7px) rotate(8deg);
}

/* Easter egg: chips fall off after repeated hover cycles */
@keyframes chip-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    60%  { opacity: 1; }
    85%  { transform: translateY(120vh) rotate(540deg); opacity: 0; }
    86%  { transform: translateY(0) rotate(0deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.chip-dropping .chip-logo {
    animation: chip-fall 4s ease-in forwards;
}

.chip-dropping::before {
    transition: none !important;
    animation: chip-fall 4s 0.1s ease-in both;
}

.chip-dropping::after {
    transition: none !important;
    animation: chip-fall 4s 0.2s ease-in both;
}

/* Marketing-page atmosphere: soft pastel tints pinned to viewport corners
   (twenty.com-style). Applied as a fixed-attachment body background so it
   sits under all content naturally — no stacking context games needed.
   Scoped via :has() so it only appears on pages that include a
   .marketing-atmosphere marker (marketing pages only). */
body:has(.marketing-atmosphere) {
    /* Bottom-right uses --color-pastel-teal (#ccfbf1) — already an established
       brand accent (see .step-indicator bg-pastel-teal, shadow-morph teal
       keyframe). Top-left peach kept as a warm counterpoint. */
    background-image:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(245, 226, 220, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 70% 55% at 100% 100%, rgba(204, 251, 241, 0.55) 0%, transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Let the atmosphere shine through the footer on marketing pages — the
   footer's opaque bg-background-light would otherwise mask the bottom-right
   lilac tint. */
body:has(.marketing-atmosphere) > footer {
    background-color: transparent;
}

/* Blog prose — typography for rendered markdown content */
.prose-blog {
    overflow-wrap: break-word;
}

.prose-blog h2 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #000;
    letter-spacing: -0.025em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    scroll-margin-top: 5rem;
}

.prose-blog h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #000;
    letter-spacing: -0.025em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    scroll-margin-top: 5rem;
}

.prose-blog p {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 1.25rem;
}

.prose-blog a {
    color: #a855f7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose-blog a:hover {
    color: #7c3aed;
}

.prose-blog strong {
    font-weight: 700;
    color: #000;
}

.prose-blog ul,
.prose-blog ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.prose-blog ul {
    list-style-type: disc;
}

.prose-blog ol {
    list-style-type: decimal;
}

.prose-blog li {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 0.25rem;
}

.prose-blog blockquote {
    border-left: 4px solid #a855f7;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #475569;
    font-style: italic;
}

.prose-blog code {
    font-size: 0.875rem;
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
}

.prose-blog pre {
    background: #1e1b4b;
    color: #e2e8f0;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 0 rgba(0,0,0,1);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.prose-blog pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
}

.prose-blog img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 0 rgba(0,0,0,1);
    margin: 1.5rem 0;
}

.prose-blog table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    border: 2px solid #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.prose-blog th {
    background: #f8fafc;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #000;
    font-size: 0.875rem;
}

.prose-blog td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: #334155;
}

.prose-blog hr {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 2rem 0;
}

.prose-blog h2:first-child,
.prose-blog h3:first-child {
    margin-top: 0;
}

/* Active TOC link indicator */
[data-toc-link].toc-active {
    color: #000;
    font-weight: 700;
}

/* Mobile nav — slide-in panel from the right */
.mobile-nav-panel {
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
}

.mobile-nav-open .mobile-nav-panel {
    transform: translateX(0);
}

/* Tilt hover — element presses flat toward its shadow origin (bottom-right) */
.hover-tilt:hover {
    transform: perspective(800px) rotateX(-2deg) rotateY(1deg);
}

/* Nav pills — subtle drop shadow on bordered pills. Group triggers are
   buttons rather than links, so both element types are listed. */
nav a.border-border-light.rounded-full,
nav button.border-border-light.rounded-full {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Nav dropdown groups
   ------------------------------------------------------------------------
   A submenu opens on hover for fine pointers, and on click or keyboard
   everywhere via data-open set by nav-menu.js. Only the visibility
   transition is delayed, which gives a 150ms grace period on leave so a
   pointer crossing between pill and panel does not close it, while keeping
   the panel unreachable by tab or click while shut. The panel's top padding
   (not margin) means there is no dead gap to cross in the first place.

   Horizontal placement lives here rather than in a utility class because
   the panel's transform is animated, and a Tailwind translate utility
   would win on source order and freeze the open animation. Panels hang
   from the left of their pill, except in the right-hand account bar where
   they hang from the right so they cannot run off the viewport edge. */
.nav-group-panel {
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition:
        opacity 0.12s ease-out,
        transform 0.12s ease-out,
        visibility 0s linear 0.15s;
}

.nav-bar-account .nav-group-panel {
    left: auto;
    right: 0;
}

.nav-group[data-open="true"] > .nav-group-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.nav-caret {
    transition: transform 0.12s ease-out;
}

.nav-group[data-open="true"] .nav-caret {
    transform: rotate(180deg);
}

/* Hover opening is gated on a fine pointer so a tap on a touch device never
   leaves a panel stuck open with no way to dismiss it. */
@media (hover: hover) and (pointer: fine) {
    .nav-group:not([data-hover-off]):hover > .nav-group-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .nav-group:not([data-hover-off]):hover .nav-caret {
        transform: rotate(180deg);
    }
}

/* Panel entries — pastel wash on hover, matching the settings sidebar, with
   the blackboard banner's gloss sweeping across it. Same -45deg band and
   300% background travelling from 0% 100% to 100% 0%, but opaque enough to
   read as a sheen over a light pastel rather than over near-black, and short
   enough to finish within a pointer's pass over a single row. */
.nav-item {
    position: relative;
    overflow: hidden;
}

.nav-item:hover {
    background-color: #e2e8e4;
}

/* The active entry keeps its own tint on hover; only the gloss responds. */
.nav-item[data-nav-current]:hover {
    background-color: #ccfbf1;
}

.nav-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.5) 55%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 300%;
    background-position: 0% 100%;
}

.nav-item:hover::after {
    opacity: 1;
    animation: nav-item-gloss 600ms ease-out forwards;
}

/* Label and blurb sit above the sweep, so the sheen passes behind the text
   instead of washing it out. */
.nav-item > * {
    position: relative;
    z-index: 1;
}

@keyframes nav-item-gloss {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-item:hover::after {
        animation: none;
        opacity: 0;
    }
}

/* Single-destination entries are text links inside the pill bar. They brighten
   and underline rather than growing a pill, so the pill shape stays reserved
   for entries that open a submenu. */
.nav-text-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Idle pill hover. One group template serves both bars, so the inactive
   pill carries no hover colour of its own and the bar supplies it. */
.nav-bar-main [data-nav-idle]:hover,
.nav-bar-main .nav-group[data-open="true"] > [data-nav-idle] {
    background-color: #334155;
}

.nav-bar-account [data-nav-idle]:hover,
.nav-bar-account .nav-group[data-open="true"] > [data-nav-idle] {
    background-color: #9333ea;
}

@media (hover: hover) and (pointer: fine) {
    .nav-bar-main .nav-group:not([data-hover-off]):hover > [data-nav-idle] {
        background-color: #334155;
    }

    .nav-bar-account .nav-group:not([data-hover-off]):hover > [data-nav-idle] {
        background-color: #9333ea;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-group-panel,
    .nav-caret {
        transition: none;
    }
}

/* Blackboard banner — dark chalkboard with gloss sweep */
.blackboard {
    position: relative;
    background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.blackboard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 300%;
    background-position: 0% 100%;
    border-radius: inherit;
    pointer-events: none;
    animation: blackboard-gloss 2.5s 0.3s ease-in-out forwards;
}

.blackboard > :not(.absolute) {
    position: relative;
    z-index: 1;
}

@keyframes blackboard-gloss {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

/* Channel card — arrow launches from right edge beyond viewport, card recoils */
.channel-card {
    position: relative;
    overflow: visible;
    transition: transform 0.1s ease-out;
}

.channel-card:hover {
    animation: card-recoil 300ms ease-out;
}

@keyframes card-recoil {
    0%   { transform: translateX(0); filter: blur(0); }
    20%  { transform: translateX(-6px); filter: blur(1.5px); }
    55%  { transform: translateX(2px); filter: blur(0.5px); }
    80%  { transform: translateX(-1px); filter: blur(0); }
    100% { transform: translateX(0); filter: blur(0); }
}



@keyframes shadow-morph-lg {
    0% {
        box-shadow:
            8px 8px 0 0 #a855f7,
            -8px -8px 0 0 #2dd4bf,
            8px -8px 0 0 #60a5fa,
            -8px 8px 0 0 #f472b6;
    }
    25% {
        box-shadow:
            -8px 8px 0 0 #60a5fa,
            8px -8px 0 0 #f472b6,
            -8px -8px 0 0 #a855f7,
            8px 8px 0 0 #2dd4bf;
    }
    50% {
        box-shadow:
            -8px -8px 0 0 #f472b6,
            8px 8px 0 0 #60a5fa,
            -8px 8px 0 0 #2dd4bf,
            8px -8px 0 0 #a855f7;
    }
    75% {
        box-shadow:
            8px -8px 0 0 #2dd4bf,
            -8px 8px 0 0 #a855f7,
            8px 8px 0 0 #f472b6,
            -8px -8px 0 0 #60a5fa;
    }
    100% {
        box-shadow:
            8px 8px 0 0 #a855f7,
            -8px -8px 0 0 #2dd4bf,
            8px -8px 0 0 #60a5fa,
            -8px 8px 0 0 #f472b6;
    }
}