/* Suta Prompt B design-only mark — idle chrome + 3D Gyro Orbit.
   Asset: /static/suta_emblem.svg (traced remaster; do not invent path data).
   Markup:
     <span class="suta-mark" aria-hidden="true">
       <span class="suta-mark__halo"></span>
       <span class="suta-mark__swirls">
         <img class="suta-mark__img" src="/static/suta_emblem.svg" alt="">
       </span>
       <span class="suta-mark__core"></span>
     </span>
   Header endorsement: wrap with .suta-endorsement + .suta-endorsement__word.
   Animate: .is-working, .suta-mind-shell[data-mode="streaming"],
   #empty-state .suta-mark--hero, and .suta-meet .suta-mark--hero (landing).
   Header / nav / FAB / Matter Dashboard stay still.
*/
.suta-mark {
    --mark-size: 28px;
    --orbit-cx: 49.917%;
    --orbit-cy: 50.059%;
    --orbit-snap-duration: 3.2s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mark-size);
    height: var(--mark-size);
    flex-shrink: 0;
    overflow: visible;
    perspective: calc(var(--mark-size) * 2.2);
    isolation: isolate;
}
.suta-mark--header { --mark-size: 28px; }
.suta-mark--nav { --mark-size: 28px; }
.suta-mark--fab { --mark-size: 26px; }
.suta-mark--mind { --mark-size: 24px; }
.suta-mark--hero { --mark-size: 120px; }

.suta-mark__halo {
    position: absolute;
    inset: -42%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.5) 0%, rgba(1, 156, 152, 0.12) 46%, transparent 72%);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.suta-mark__swirls {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform-origin: var(--orbit-cx) var(--orbit-cy);
}
.suta-mark__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Punch the SVG's baked-in orb out of the cage. 3D gyro would otherwise
       tilt that radial fill into a shaded sphere in front of the CSS disc. */
    -webkit-mask-image: radial-gradient(
        circle closest-side at var(--orbit-cx) var(--orbit-cy),
        transparent 34%,
        #000 38%
    );
    mask-image: radial-gradient(
        circle closest-side at var(--orbit-cx) var(--orbit-cy),
        transparent 34%,
        #000 38%
    );
}
/* Even CSS disc — stays in 2D on top of the flattened gyro cage.
   Fitted to remaster core (~33.3% diameter; r=166.59 / 1000). */
.suta-mark__core {
    position: absolute;
    left: var(--orbit-cx);
    top: var(--orbit-cy);
    width: 33.318%;
    height: 33.318%;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle at 48% 38%,
        #b2fdf4 0%,
        #7af5ee 22%,
        #3de4e0 58%,
        #35c4d8 100%);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18);
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
}
.suta-mark--mind .suta-mark__core {
    box-shadow: none;
}

.suta-endorsement {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.suta-endorsement__word {
    font-family: "Plus Jakarta Sans", Manrope, sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: #3a4148;
    line-height: 1;
}

.suta-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.suta-hero .suta-mark--hero {
    margin-bottom: 1rem;
}
.suta-hero__word {
    font-family: "Plus Jakarta Sans", Manrope, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.22em;
    color: #3a4148;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 0.35rem 0.22em;
}
.suta-hero__tagline {
    font-family: "Plus Jakarta Sans", Manrope, sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #5a646e;
    line-height: 1.35;
    margin: 0;
}

.suta-mark.is-working .suta-mark__swirls,
.suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__swirls,
#empty-state .suta-mark--hero .suta-mark__swirls,
.suta-meet .suta-mark--hero .suta-mark__swirls {
    animation: suta3dGyroOrbit var(--orbit-snap-duration) cubic-bezier(0.2, 0, 0.2, 1) infinite;
}
.suta-mark.is-working .suta-mark__core,
.suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__core,
#empty-state .suta-mark--hero .suta-mark__core,
.suta-meet .suta-mark--hero .suta-mark__core {
    animation: sutaCoreSnap var(--orbit-snap-duration) ease-in-out infinite;
}
.suta-mark.is-working .suta-mark__halo,
.suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__halo,
#empty-state .suta-mark--hero .suta-mark__halo,
.suta-meet .suta-mark--hero .suta-mark__halo {
    animation: sutaHaloSnap var(--orbit-snap-duration) ease-out infinite;
}

.suta-meet .suta-mark--hero {
    --mark-size: 200px;
}
.suta-meet .suta-hero__word {
    font-size: 1.75rem;
}
.suta-meet .suta-hero__tagline {
    font-size: 0.85rem;
}

@keyframes suta3dGyroOrbit {
    0% { transform: rotate3d(0.48, 1, 0.22, 0deg) scale(1); }
    6% { transform: rotate3d(0.48, 1, 0.22, 0deg) scale(1.04); }
    58% { transform: rotate3d(0.48, 1, 0.22, 360deg) scale(1.08); }
    66% { transform: rotate3d(0.48, 1, 0.22, 378deg) scale(1.02); }
    74% { transform: rotate3d(0.48, 1, 0.22, 360deg) scale(1); }
    100% { transform: rotate3d(0.48, 1, 0.22, 360deg) scale(1); }
}
@keyframes sutaCoreSnap {
    0%, 58% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) drop-shadow(0 0 2px rgba(0, 229, 255, 0.35));
    }
    66% {
        transform: translate(-50%, -50%) scale(1.1);
        filter: brightness(1.2) drop-shadow(0 0 5px rgba(0, 229, 255, 0.75));
    }
    74% {
        transform: translate(-50%, -50%) scale(1.28);
        filter: brightness(1.65) drop-shadow(0 0 9px rgba(0, 229, 255, 1));
    }
    86%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) drop-shadow(0 0 2px rgba(0, 229, 255, 0.35));
    }
}
@keyframes sutaHaloSnap {
    0%, 64% { transform: scale(0.85); opacity: 0.22; }
    74% { transform: scale(1.45); opacity: 0.95; }
    88%, 100% { transform: scale(0.9); opacity: 0.2; }
}

html[data-layout="compact"] .suta-mark--mind { --mark-size: 22px; }
html[data-layout="compact"] .suta-mark--hero { --mark-size: 88px; }
html[data-layout="compact"] .suta-hero__word { font-size: 1.25rem; }

@media (max-width: 1279px) {
    .suta-meet .suta-mark--hero { --mark-size: 160px; }
    .suta-meet .suta-hero__word { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .suta-mark.is-working .suta-mark__halo,
    .suta-mark.is-working .suta-mark__swirls,
    .suta-mark.is-working .suta-mark__core,
    .suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__halo,
    .suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__swirls,
    .suta-mind-shell[data-mode="streaming"] .suta-mark .suta-mark__core,
    #empty-state .suta-mark--hero .suta-mark__halo,
    #empty-state .suta-mark--hero .suta-mark__swirls,
    #empty-state .suta-mark--hero .suta-mark__core,
    .suta-meet .suta-mark--hero .suta-mark__halo,
    .suta-meet .suta-mark--hero .suta-mark__swirls,
    .suta-meet .suta-mark--hero .suta-mark__core {
        animation: none !important;
    }
}