/*
  Theme ported from 10xeartraining.com (src/styles/global.css).
  Dark is the default: pages render <html data-theme="dark">.
  Keep tokens in sync with js/tailwind-config.js.
*/
:root {
    --color-primary: #171717;
    --color-on-primary: #ffffff;
    --color-ink: #171717;
    --color-body: #4d4d4d;
    --color-mute: #707070;
    --color-hairline: #ebebeb;
    --color-canvas: #ffffff;
    --color-canvas-soft: #fafafa;
    --color-canvas-soft-2: #f5f5f5;

    --color-gradient-ship-start: #ff4d4d;
    --color-gradient-ship-end: #f9cb28;

    --shadow-card-2: 0px 1px 1px #00000005, 0px 2px 2px #0000000a, inset 0 0 0 1px #00000014;

    --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
    --color-primary: #ededed;
    --color-on-primary: #171717;
    --color-ink: #ededed;
    --color-body: #b4b4b4;
    --color-mute: #8a8a8a;
    --color-hairline: #2e2e2e;
    --color-canvas: #0a0a0a;
    --color-canvas-soft: #171717;
    --color-canvas-soft-2: #212121;

    --shadow-card-2: 0px 1px 1px #00000030, 0px 2px 2px #00000030, inset 0 0 0 1px #ffffff1a;
}

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

body {
    background-color: var(--color-canvas-soft);
    color: var(--color-ink);
    font-family: var(--font-sans);
}

/* Gradient accent text */
.fx-accent {
    background: linear-gradient(95deg, var(--color-gradient-ship-start), var(--color-gradient-ship-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Fading grid + warm glow behind the top of the page (body needs position: relative + isolation: isolate) */
.fx-backdrop {
    position: absolute;
    inset: 0 0 auto 0;
    height: 900px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(45% 55% at 85% 0%, color-mix(in srgb, var(--color-gradient-ship-end) 16%, transparent), transparent 70%),
        radial-gradient(35% 45% at 100% 40%, color-mix(in srgb, var(--color-gradient-ship-start) 10%, transparent), transparent 70%);
}
.fx-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-ink) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 6%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 90% at 60% 0%, #000 25%, transparent 75%);
    mask-image: radial-gradient(80% 90% at 60% 0%, #000 25%, transparent 75%);
}

/* Non-blocking promo card (js/promo-toast.js) */
/* Its resting state is fully on screen; the slide-in is only an entry animation,
   so it can never get stuck part-way off the bottom edge. */
.promo-toast {
    position: fixed;
    z-index: 50;
    left: 0.75rem;
    right: 0.75rem;
    /* --promo-vv-offset: height of any browser UI covering the bottom of the
       page (set from visualViewport in js/promo-toast.js) */
    bottom: calc(1rem + env(safe-area-inset-bottom) + var(--promo-vv-offset, 0px));
}
/* Very short windows: scroll inside the card rather than push it off screen */
.promo-toast-card > a {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
/* Entry: fades in while flying up from below the screen, overshoots a touch
   and settles; then the icon pops and the text rises in, staggered. */
.promo-toast.is-visible {
    animation: promo-in 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.promo-toast.is-visible .promo-icon {
    animation: promo-icon-pop 650ms 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.promo-toast.is-visible .promo-body > * {
    animation: promo-rise 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.promo-toast.is-visible .promo-body > :nth-child(1) { animation-delay: 460ms; }
.promo-toast.is-visible .promo-body > :nth-child(2) { animation-delay: 540ms; }
.promo-toast.is-visible .promo-body > :nth-child(3) { animation-delay: 620ms; }
.promo-toast.is-leaving {
    animation: promo-out 380ms cubic-bezier(0.55, 0, 0.75, 0) forwards;
    pointer-events: none;
}
@keyframes promo-in {
    0% {
        opacity: 0;
        transform: translateY(calc(100% + 2rem)) scale(0.9) rotate(-3deg);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(-10px) scale(1.02) rotate(0.5deg);
        filter: blur(0);
    }
    78% {
        transform: translateY(3px) scale(0.995) rotate(0deg);
    }
    100% {
        transform: none;
    }
}
@keyframes promo-icon-pop {
    from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
}
@keyframes promo-rise {
    from { opacity: 0; transform: translateY(8px); }
}
@keyframes promo-out {
    to { opacity: 0; transform: translateY(calc(100% + 2rem)) scale(0.95); }
}
@media (min-width: 640px) {
    .promo-toast {
        left: auto;
        right: 1.5rem;
        bottom: calc(1.5rem + env(safe-area-inset-bottom) + var(--promo-vv-offset, 0px));
        width: 26rem;
    }
}
/* Light card on the dark page + warm glow so it stands out */
.promo-toast-card {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--color-gradient-ship-start) 70%, transparent),
        0 0 32px 6px color-mix(in srgb, var(--color-gradient-ship-start) 35%, transparent),
        0 24px 48px -12px #000000cc;
    transition: transform 150ms;
}
.promo-toast-card:hover {
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: no-preference) {
    .promo-toast.is-visible .promo-toast-card {
        animation: promo-glow 2.6s 900ms ease-in-out infinite;
    }
}
@keyframes promo-glow {
    0%, 100% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--color-gradient-ship-start) 60%, transparent),
            0 0 24px 4px color-mix(in srgb, var(--color-gradient-ship-start) 28%, transparent),
            0 24px 48px -12px #000000cc;
    }
    50% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--color-gradient-ship-end) 85%, transparent),
            0 0 44px 10px color-mix(in srgb, var(--color-gradient-ship-start) 45%, transparent),
            0 24px 48px -12px #000000cc;
    }
}
@media (prefers-reduced-motion: reduce) {
    .promo-toast.is-visible,
    .promo-toast.is-visible .promo-icon,
    .promo-toast.is-visible .promo-body > * { animation: none; }
    .promo-toast.is-leaving { animation: promo-fade-out 200ms forwards; }
    @keyframes promo-fade-out { to { opacity: 0; } }
}

/* Pill buttons */
.fx-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding-inline: 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 150ms, box-shadow 150ms, opacity 150ms;
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-gradient-ship-start) 35%, transparent),
        0 8px 24px -8px color-mix(in srgb, var(--color-gradient-ship-start) 60%, transparent);
}
.fx-btn-primary:hover {
    transform: translateY(-1px) scale(1.02);
}
.fx-btn-primary:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}
@media (pointer: coarse) {
    .fx-btn-primary:active {
        transform: scale(0.97);
        opacity: 0.85;
        transition-duration: 75ms;
    }
}