/* =========================================================
   BRAND ACCENTS
   The Palm Mind app mark used as a quiet signature across the app,
   plus Pali the mascot where the product introduces itself.
   Keep the mark upright and use it sparingly — watermarks, loaders,
   identity marks. Never stretch it; it is always `contain`.
========================================================= */

.emblem,
#bootSplash .boot-emblem,
.page-hero::after,
.page-hero-eyebrow::before,
.cs-gen-spinner::after,
.orientation-card::after,
.orientation-eyebrow::before,
.empty::before,
.section-divider::before {
    background: var(--primary);
    -webkit-mask: var(--emblem-mask-image) center / contain no-repeat;
    mask: var(--emblem-mask-image) center / contain no-repeat;
}

/* ---------- boot splash (while components + scripts load) ---------- */

#bootSplash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity 320ms ease, visibility 320ms;
}

#bootSplash.done {
    opacity: 0;
    visibility: hidden;
}

#bootSplash .boot-emblem {
    width: 64px;
    height: 64px;
    animation: emblem-breathe 1.4s ease-in-out infinite;
}

@keyframes emblem-breathe {
    0%, 100% { opacity: .45; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1); }
}

/* ---------- overview greeting banner ---------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, #fff 0%, #f4f9ff 55%, #dbecfd 100%);
    box-shadow: var(--shadow-sm);
}

.page-hero > * {
    position: relative;
    z-index: 1;
}

.page-hero::after {
    content: "";
    position: absolute;
    width: 230px;
    aspect-ratio: 1;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .08;
    pointer-events: none;
}

.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--primary-soft);
    box-shadow: 0 1px 2px rgba(0, 113, 219, .12);
    color: var(--primary-dark);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* What the product does, as a quiet pipeline under the greeting */
.dma-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 0;
    list-style: none;
    counter-reset: dma-step;
}

.dma-flow li {
    counter-increment: dma-step;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
}

.dma-flow li::before {
    content: counter(dma-step);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
}

.dma-flow li:not(:last-child) {
    margin-right: 14px;
    position: relative;
}

.dma-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--border-strong);
}

.page-hero-eyebrow::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
}

/* ---------- content studio: emblem inside the progress ring ---------- */

.cs-gen-spinner {
    position: relative;
    border: none !important;
    animation: none !important;
}

.cs-gen-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--primary-soft);
    border-top-color: var(--primary);
    animation: csSpin .9s linear infinite;
}

.cs-gen-spinner::after {
    content: "";
    position: absolute;
    inset: 12px;
    animation: emblem-breathe 1.4s ease-in-out infinite;
}

/* ---------- orientation (first-login welcome) ---------- */

.orientation-card {
    position: relative;
    overflow: hidden;
}

.orientation-card > * {
    position: relative;
    z-index: 1;
}

.orientation-card::after {
    content: "";
    position: absolute;
    width: 200px;
    aspect-ratio: 1;
    right: -46px;
    bottom: -56px;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}

.orientation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.orientation-eyebrow::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
}

/* ---------- empty states: faint emblem behind the icon ---------- */

.empty {
    position: relative;
    overflow: hidden;
}

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

.empty::before {
    content: "";
    position: absolute;
    width: 120px;
    aspect-ratio: 1;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    opacity: .06;
    pointer-events: none;
}

/* ---------- section headings: small emblem bullet ---------- */

.section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-divider::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
}

@media (max-width: 860px) {
    .page-hero::after { right: -40px; }
}

@media (prefers-reduced-motion: reduce) {
    #bootSplash { transition: none; }
    #bootSplash .boot-emblem,
    .cs-gen-spinner::after { animation: none; }
}