/* Global layout background */
html,
body {
    min-height: 100vh;
    background-color: #fafafa;
    margin: 0;
    padding: 0;
}

/* clickable surface helper */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--mud-elevation-8);
}

.hover-lift:active {
    transform: translateY(0);
    box-shadow: var(--mud-elevation-2);
}

.no-underline,
.no-underline:hover {
    text-decoration: none;
    color: inherit;
}

.dialog-background-title {
    background: rgba(var(--mud-palette-primary-rgb), 0.85);
    color: var(--mud-palette-white);
}

.dialog-background-title-warning {
    background: rgba(var(--mud-palette-error-rgb), 0.15);
    border-bottom: 2px solid var(--mud-palette-error);
    color: var(--mud-palette-error-darken);
}


/* scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Direction helpers */
.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-left.in-view,
.reveal-right.in-view {
    transform: translateX(0);
}

.reveal.delay-1 {
    transition-delay: 100ms;
}

.reveal.delay-2 {
    transition-delay: 200ms;
}

.reveal.delay-3 {
    transition-delay: 300ms;
}

.join-dialog-blur {
    backdrop-filter: blur(10px);
}

/*TODO - update theme settings rather than bespoke css*/
.mud-typography-h1 {
    font-weight: 700;
}

.gradient-text {
    background: linear-gradient(82deg, rgb(89, 74, 226) 0%, rgb(255, 102, 153) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* This covers the container AND everything inside it */
.hero:focus-within,
.hero :focus {
    outline: none !important;
    box-shadow: none !important;
}