/* Hover-lift card interaction (from DESIGN.md "Interactive Depth") */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Bouncy press interaction for buttons */
.bouncy-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.95);
}
.bouncy-button {
    transition: all 0.2s ease;
}
.bouncy-button:disabled,
.bouncy-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Auth input focus ring (login mockup) */
.auth-input:focus {
    box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.1);
}

/* Brand gradient (login mockup left panel) */
.vibrant-gradient {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
}

/* Glass overlay over gradient */
.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Material Symbols default settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/*
 * Rich-text typography for admin-entered HTML content
 * (competition description, terms, video description, etc.)
 * Tailwind CDN doesn't ship @tailwindcss/typography — this is a minimal replacement.
 */
.prose-stemcube { line-height: 1.6; }

.prose-stemcube h1,
.prose-stemcube h2,
.prose-stemcube h3,
.prose-stemcube h4 {
    color: #191b23; /* on-surface */
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}
.prose-stemcube h1 { font-size: 1.875rem; }
.prose-stemcube h2 { font-size: 1.5rem; }
.prose-stemcube h3 { font-size: 1.25rem; }
.prose-stemcube h4 { font-size: 1.125rem; }

.prose-stemcube p {
    margin-bottom: 1em;
}

.prose-stemcube a {
    color: #004ac6; /* primary */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-stemcube a:hover { color: #003ea8; }

.prose-stemcube strong { color: #191b23; font-weight: 700; }
.prose-stemcube em { font-style: italic; }
.prose-stemcube u { text-decoration: underline; }

.prose-stemcube ul,
.prose-stemcube ol {
    margin: 1em 0;
    padding-left: 1.5rem;
}
.prose-stemcube ul { list-style: disc; }
.prose-stemcube ol { list-style: decimal; }
.prose-stemcube li { margin-bottom: 0.25em; }
.prose-stemcube ul ul,
.prose-stemcube ol ol,
.prose-stemcube ul ol,
.prose-stemcube ol ul { margin: 0.25em 0; }

.prose-stemcube blockquote {
    border-left: 4px solid #c3c6d7; /* outline-variant */
    padding-left: 1rem;
    margin: 1em 0;
    color: #434655; /* on-surface-variant */
    font-style: italic;
}

.prose-stemcube img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1em 0;
}

.prose-stemcube table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
.prose-stemcube th,
.prose-stemcube td {
    border: 1px solid #c3c6d7;
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.prose-stemcube th {
    background: #ededf9; /* surface-container */
    font-weight: 600;
}

.prose-stemcube hr {
    border: 0;
    border-top: 1px solid #c3c6d7;
    margin: 1.5em 0;
}

.prose-stemcube code {
    background: #ededf9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.875em;
}
.prose-stemcube pre {
    background: #2e3039; /* inverse-surface */
    color: #f0f0fb;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1em 0;
}
.prose-stemcube pre code { background: transparent; padding: 0; color: inherit; }

/* Iframes (YouTube embeds inside descriptions) */
.prose-stemcube iframe {
    max-width: 100%;
    margin: 1em 0;
    border-radius: 0.75rem;
}