html, body {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root {
    --wb-primary: #2b59ff;
    --wb-primary-dark: #1f43cc;
    --wb-ink: #0f172a;
    --wb-muted: #64748b;
    --wb-border: #e2e8f0;
    --wb-surface: #f4f6f9;
}

/* Default anchor color, layered so Tailwind color utilities (text-white etc.)
   always win — these used to be unlayered and silently overrode every button
   and nav link that set its own color. Layered base rules lose to utilities
   and keep losing to daisyUI's own .btn colors. */
@layer base {
    a:not(.btn), .btn-link {
        color: var(--wb-primary);
    }

    /* .btn anchors take daisyUI's own colors; other anchors follow the daisyUI
       theme under /admin. */
    html[data-theme="light"] a:not(.btn),
    html[data-theme="light"] .btn-link,
    html[data-theme="dark"] a:not(.btn),
    html[data-theme="dark"] .btn-link {
        color: var(--color-primary);
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.825rem;
    margin-top: 0.25rem;
}

.validation-summary {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    background: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yOTY1TDI2Ny4wNTIgNTMuNjI4M0wyNjcuMDUyIDUzLjYyODMgMjY3LjUzOSA1My42MjgzIDI5MC4xODUgOTIuMTgzMSAyOTAuNTQ1IDkyLjc5NkMyOTAuODc3IDkzLjUxMyAyOTEgOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiA5NC42NzgyIDIzNiA5NC4zNzk5IDIzNi4wMzEgOTQuMDg4NiAyMzYuMDg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44MzggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVpNMjYzLjU4NiA2Ni4wMTgzQzI2MC43MzcgNjYuMDE4MyAyNTkuMzEzIDY3LjEyNDUgMjU5LjMxMyA2OS4zMzcyIDI1OS4zMTMgNjkuNjEwMiAyNTkuMzEzIDY5Ljg4NjggMjU5LjMxMyA3MC4wODg3TDI2MS43OTUgODQuMDE2MUwyNjUuMzggODQuMDE2MUwyNjcuODIxIDY5LjczMDlDMjY3Ljg2OSA2OS41ODc3IDI2Ny44NzkgNjkuMzA5IDI2Ny44NzkgNjkuMTM3MiAyNjcuODc5IDY3LjExODIgMjY2LjQ0OCA2Ni4wMTgzIDI2My41ODYgNjYuMDE4M1pNMjYzLjU3NiA4Ni4wNTQ3QzI2MS4wNDkgODYuMDU0NyAyNTkuNzg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3LjM4NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Shared form styles (auth + settings) ===== */

.form-field {
    margin-bottom: 1.15rem;
}

.form-field > label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wb-ink);
    margin-bottom: 0.4rem;
}

.form-field .required {
    color: var(--wb-primary);
}

.form-field input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    color: var(--wb-ink);
    background: #fff;
    border: 1px solid var(--wb-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input::placeholder {
    color: #94a3b8;
}

.form-field input:focus {
    outline: none;
    border-color: var(--wb-primary);
    box-shadow: 0 0 0 3px rgba(43, 89, 255, 0.15);
}

.form-field input:disabled {
    background: var(--wb-surface);
    color: var(--wb-muted);
    cursor: not-allowed;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--wb-ink);
    cursor: pointer;
}

.form-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--wb-primary);
}

.form-link {
    font-size: 0.875rem;
    color: var(--wb-primary);
    text-decoration: none;
    font-weight: 500;
}

.form-link:hover {
    text-decoration: underline;
}

.btn-action {
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--wb-primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-action:hover {
    background: var(--wb-primary-dark);
}

.btn-secondary-action {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wb-primary);
    background: #eef2ff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary-action:hover {
    background: #e0e7ff;
}

.btn-danger-action {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #b91c1c;
    background: #fef2f2;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.btn-danger-action:hover {
    background: #fee2e2;
}

.form-note {
    font-size: 0.875rem;
    color: var(--wb-muted);
    margin: 0 0 1.25rem;
}

/* Alerts (replacement for bootstrap) */

.alert {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.alert p {
    margin: 0.25rem 0;
}

.alert a {
    text-decoration: underline;
}

.alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.text-danger {
    color: #e50000;
}

.form-inline-group {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

.form-inline-group input {
    flex: 1;
}

/* ===== Auth pages (login, reset, 2fa) ===== */

.auth-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #edf0f5 0%, #e4e9f2 100%);
    display: flex;
    flex-direction: column;
}

.auth-header {
    padding: 1.25rem 2rem;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wb-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--wb-primary);
}

.auth-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 1rem 4rem;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--wb-border);
    border-radius: 18px;
    padding: 2.75rem 2.25rem;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.07);
}

.auth-title {
    text-align: center;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--wb-ink);
    margin: 0 0 0.35rem;
}

.auth-subtitle {
    text-align: center;
    font-size: 0.925rem;
    color: var(--wb-muted);
    margin: 0 0 1.9rem;
}

.auth-footnote {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--wb-muted);
    text-align: center;
}

@media (max-width: 520px) {
    .auth-header {
        padding: 1rem 1.25rem;
    }

    .auth-card {
        padding: 2rem 1.35rem;
        border-radius: 14px;
    }
}

/* ===== Public site shell ===== */

.site-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wb-surface);
}

.site-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 2rem;
    background: #fff;
    border-bottom: 1px solid var(--wb-border);
    flex-wrap: wrap;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wb-ink);
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.site-nav-link {
    font-size: 0.9rem;
    color: var(--wb-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.site-nav-link:hover, .site-nav-link.active {
    color: var(--wb-ink);
}

.site-nav-button {
    color: var(--wb-primary);
    font-weight: 500;
}

.site-main {
    flex: 1;
    padding: 2rem;
}

/* ===== Admin themes (daisyUI) =====
   data-theme lives on <html> for /admin paths only (see lucide-init.js), so the
   public landing stays on the default light theme. Here we just re-point the
   theme colors at the Workbench brand: blue in light, indigo-on-near-black in
   dark (the ops-dashboard look). */

[data-theme="light"] {
    --color-primary: #2b59ff;
    --color-primary-content: #ffffff;
}

[data-theme="dark"] {
    --color-base-100: oklch(17% 0.015 265);
    --color-base-200: oklch(20% 0.015 265);
    --color-base-300: oklch(25% 0.015 265);
    --color-base-content: oklch(93% 0.01 265);
    --color-primary: oklch(68% 0.17 268);
    --color-primary-content: oklch(14% 0.02 268);
    --color-neutral: oklch(23% 0.015 265);
    --color-neutral-content: oklch(90% 0.01 265);
}

/* ===== Admin shell (CRM reference: soft grey sidebar, floating active pill) =====
   data-theme is only set under /admin, so none of this leaks into the public site. */
html[data-theme],
html[data-theme] body {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Sidebar nav: muted items; the active item floats as a light pill with a hairline
   ring and whisper shadow instead of daisyUI's neutral block. */
.menu.admin-nav {
    --menu-active-bg: transparent;
    --menu-active-fg: var(--color-base-content);
}

.menu.admin-nav :where(li:not(.menu-title, .menu-disabled) > *) {
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
    transition: background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.menu.admin-nav :where(li > .menu-active) {
    color: var(--color-base-content);
    font-weight: 500;
    background-color: var(--color-base-100);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04),
        0 0 0 1px color-mix(in oklab, var(--color-base-content) 7%, transparent);
}

/* Collapsible section headers (details > summary; daisyUI supplies the chevron
   and the open/close animation). */
.menu .admin-nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
    list-style: none;
    cursor: pointer;
}

.menu.admin-nav .admin-nav-section:hover {
    color: var(--color-base-content);
}

/* Flatten daisyUI's tree indentation inside sections. */
.menu.admin-nav :where(li ul) {
    margin-inline-start: 0;
    padding-inline-start: 0;
}

.menu.admin-nav :where(li ul)::before {
    display: none;
}

/* Sidebar search: borderless soft fill. */
.input.admin-search,
.input.admin-search:focus,
.input.admin-search:focus-within {
    border-color: transparent;
    background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
    box-shadow: none;
}

/* Theme-toggle icon: sun shows in dark mode, moon in light mode. */
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html:not([data-theme="dark"]) .theme-icon-sun { display: none; }
html:not([data-theme="dark"]) .theme-icon-moon { display: block; }

/* ===== Account settings ===== */

.settings-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1rem;
}

.settings-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wb-ink);
    margin: 0 0 1.25rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 1.75rem;
    background: #fff;
    border: 1px solid var(--wb-border);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}

.settings-nav {
    border-right: 1px solid var(--wb-border);
    padding-right: 1.5rem;
}

.settings-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-menu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--wb-muted);
    text-decoration: none;
}

.settings-menu-link:hover {
    background: var(--wb-surface);
    color: var(--wb-ink);
}

.settings-menu-link.active {
    background: #eef2ff;
    color: var(--wb-primary);
    font-weight: 600;
}

.settings-heading {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wb-ink);
    margin: 0 0 1.25rem;
}

.settings-subheading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wb-ink);
    margin: 1.75rem 0 0.75rem;
}

.settings-form {
    max-width: 480px;
}

.confirmed {
    color: #16a34a;
    font-weight: 400;
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .settings-grid {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .settings-nav {
        border-right: none;
        border-bottom: 1px solid var(--wb-border);
        padding: 0 0 1rem;
    }

    .settings-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .site-topbar {
        padding: 0.75rem 1.25rem;
    }
}

/* ===== Rendered block-editor bodies (projects + blog) � public SSR never runs editor JS ===== */
.case-study-body, .post-body {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
}
.case-study-body h2, .post-body h2 { margin: 2rem 0 0.75rem; font-size: 1.5rem; font-weight: 600; color: #0f172a; }
.case-study-body h3, .post-body h3 { margin: 1.75rem 0 0.5rem; font-size: 1.25rem; font-weight: 600; color: #0f172a; }
.case-study-body h4, .post-body h4 { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.case-study-body p, .post-body p { margin: 0.75rem 0; }
.case-study-body a, .post-body a { color: #2b59ff; text-decoration: underline; text-underline-offset: 2px; }
.case-study-body ul, .post-body ul { margin: 0.75rem 0; padding-left: 1.25rem; list-style: disc; }
.case-study-body ol, .post-body ol { margin: 0.75rem 0; padding-left: 1.25rem; list-style: decimal; }
.case-study-body li, .post-body li { margin: 0.25rem 0; }
.case-study-body blockquote, .post-body blockquote {
    margin: 1.25rem 0; padding: 0.75rem 1.25rem;
    border-left: 3px solid #2b59ff; background: #f8fafc; border-radius: 0 0.75rem 0.75rem 0;
}
.case-study-body blockquote footer, .post-body blockquote footer { margin-top: 0.5rem; font-size: 0.875rem; color: #64748b; }
.case-study-body pre, .post-body pre {
    margin: 1.25rem 0; padding: 1rem 1.25rem; overflow-x: auto;
    background: #0f172a; color: #e2e8f0; border-radius: 0.75rem; font-size: 0.875rem;
}
.case-study-body code, .post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.case-study-body figure, .post-body figure { margin: 1.5rem 0; }
.case-study-body img, .post-body img { width: 100%; border-radius: 0.75rem; border: 1px solid #e2e8f0; }
.case-study-body figcaption, .post-body figcaption { margin-top: 0.5rem; text-align: center; font-size: 0.8rem; color: #94a3b8; }
.video-embed { position: relative; margin: 1.5rem 0; padding-bottom: 56.25%; height: 0; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0.75rem; }

/* Dark-theme overrides for rendered block bodies. These base rules are unlayered,
   so they beat Tailwind dark: utilities — the [data-theme="dark"] variants must
   live here. Palette matches the public pages (zinc surfaces, slate text). */
html[data-theme="dark"] .case-study-body, html[data-theme="dark"] .post-body { color: #cbd5e1; }
html[data-theme="dark"] .case-study-body h2, html[data-theme="dark"] .post-body h2,
html[data-theme="dark"] .case-study-body h3, html[data-theme="dark"] .post-body h3,
html[data-theme="dark"] .case-study-body h4, html[data-theme="dark"] .post-body h4 { color: #e2e8f0; }
html[data-theme="dark"] .case-study-body a, html[data-theme="dark"] .post-body a { color: #8ba3ff; }
html[data-theme="dark"] .case-study-body blockquote, html[data-theme="dark"] .post-body blockquote {
    border-left-color: #5b7cff; background: #18181b;
}
html[data-theme="dark"] .case-study-body blockquote footer, html[data-theme="dark"] .post-body blockquote footer { color: #94a3b8; }
html[data-theme="dark"] .case-study-body pre, html[data-theme="dark"] .post-body pre {
    background: #0b1120; border: 1px solid #27272a;
}
html[data-theme="dark"] .case-study-body img, html[data-theme="dark"] .post-body img { border-color: #27272a; }
html[data-theme="dark"] .case-study-body figcaption, html[data-theme="dark"] .post-body figcaption { color: #71717a; }

/* Editor.js inside the daisyUI admin shell */
.wb-editor { --editorjs-bg: transparent; }
.wb-editor .codex-editor { padding-bottom: 3rem; }
.wb-editor .codex-editor__redactor { padding-bottom: 0 !important; }
.wb-editor .ce-toolbar__plus, .wb-editor .ce-toolbar__settings-btn { color: #64748b; }

/* ===== Public landing: reveal-on-scroll (progressive enhancement) =====
   The `js-reveal` class is set by the inline script in App.razor only when
   IntersectionObserver exists and motion is allowed — no JS, no hidden content. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.995);
    filter: blur(5px);
    transition:
        opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Fixed film grain over the landing; never intercepts pointer events. */
.landing-grain {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* Dotted pattern accents (About hero). */

html[data-theme="dark"] .landing-grain {
    opacity: 0.05;
}

/* ===== Landing hero card deck =====
   The project card takes its tilt from the active slide (--card-rotate, set by
   js/lucide-init.js) and straightens on hover. Quote cards stack in one grid
   cell, each with its own random tilt/offset. First cards ship .is-active, so
   no-JS visitors see a stable card. */
.hero-card {
    transform: rotate(var(--card-rotate, 0deg));
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.quote-card {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transform: rotate(var(--card-rotate, 0deg)) translate(var(--card-x, 0px), var(--card-y, 0px)) scale(0.96);
    transition:
        opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.quote-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(var(--card-rotate, 0deg)) translate(var(--card-x, 0px), var(--card-y, 0px)) scale(1);
}

@media (hover: hover) {
    .hero-card:hover {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card,
    .hero-slide,
    .quote-card {
        transition: none;
    }
}