/*
 * ═══════════════════════════════════════════════════════════
 *  1confirmed — the identity
 * ═══════════════════════════════════════════════════════════
 *
 * The wordmark and the conversation engine inside it: a C-shaped shell that
 * never moves, and one product scene at a time playing within it — messaging,
 * bot, flows, templates, forms, OTP, property, automobile, store, review, confirmed.
 *
 * Its own sheet for the same reason tokens.css is: the portal is not the only
 * surface with a logo on it. The public landing page uses the identical markup
 * (x-portal.brand-logo) and needs the identical rules, and a second copy of a
 * twenty-second, eleven-scene animation is a second copy that will drift.
 *
 * Depends on tokens.css. Link that first.
 */

/* Portal-native identity. The C-shaped conversation engine is part of the
   name itself; only its inner product scene changes. */
.cl-rail__logo {
    /*
     * The one thing in the portal that does not mirror.
     *
     * The mark is three flex children — the numeral, the engine, the word —
     * and the engine is the "c" of "confirmed" between them. Under
     * `<html dir="rtl">` the row reverses and the wordmark reads
     * "onfirmed ⟨engine⟩ 1": a broken logo, which is more visible than no
     * mirroring at all. See PORTAL-I18N, "What must NOT mirror".
     *
     * Stated once here rather than as a `dir="ltr"` on the markup, because
     * four surfaces render this component (the rail, the auth panel, the
     * landing nav and its footer) and an attribute is four places to forget.
     * Everything below it — including the scenes' translateX nudges — is
     * therefore physical on purpose.
     */
    direction: ltr;
    --cl-logo-shell-width: 3;
    --cl-logo-shell-pulse-width: 3.4;
    --cl-logo-shell-color: var(--color-ink-soft);
    --cl-logo-size: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    max-width: 100%;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.cl-rail__brand:focus-visible {
    outline-offset: -2px;
}

/* The numeral uses the same 24-unit canvas as the C, so their visible
   top and baseline stay aligned at every size and before fonts load. */
.cl-logo__numeral {
    color: var(--color-warm-ink);
    flex: 0 0 calc(var(--cl-logo-size) * 0.497142857);
    width: calc(var(--cl-logo-size) * 0.497142857);
    height: var(--cl-logo-size);
    margin-top: -1px;
    /* Close the numeral advance and the C canvas padding at every logo size. */
    margin-right: calc(var(--cl-logo-size) * -0.114583333);
}
.cl-logo__numeral svg { display: block; width: 100%; height: 100%; }

.cl-logo__word {
    color: var(--color-ink);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.4px;
    /* Close the SVG’s right-side padding without resizing the C or letters.
       Physical left stays correct because the identity is always LTR. */
    margin-left: -0.25em;
}

.cl-logo__engine {
    flex: 0 0 var(--cl-logo-size, 48px);
    width: var(--cl-logo-size, 48px);
    height: var(--cl-logo-size, 48px);
    margin: -1px 0 0;
    overflow: visible;
}

.cl-logo__shell,
.cl-logo__scene,
.cl-logo__impact {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cl-logo__shell {
    stroke: var(--color-ink-soft);
    stroke-width: var(--cl-logo-shell-width, 1.7);
    animation: cl-logo-shell 20s linear infinite;
}

.cl-logo__scene {
    stroke: var(--color-ink-soft);
    stroke-width: 1.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity, transform;
}

.cl-logo__scene--message {
    stroke: var(--color-accent);
    stroke-width: 1.75;
    animation: cl-logo-message 20s var(--ease-out) infinite;
}

.cl-logo__scene--bot { animation: cl-logo-bot 20s var(--ease-out) infinite; }
.cl-logo__scene--flow { animation: cl-logo-flow 20s var(--ease-out) infinite; }
.cl-logo__scene--template { animation: cl-logo-template 20s var(--ease-out) infinite; }
.cl-logo__scene--form { animation: cl-logo-form 20s var(--ease-out) infinite; }
.cl-logo__scene--otp { animation: cl-logo-otp 20s var(--ease-out) infinite; }
.cl-logo__scene--estate { animation: cl-logo-estate 20s var(--ease-out) infinite; }
.cl-logo__scene--car { animation: cl-logo-car 20s var(--ease-out) infinite; }
.cl-logo__scene--store { animation: cl-logo-store 20s var(--ease-out) infinite; }

.cl-logo__scene--review {
    stroke: var(--color-warm-ink);
    stroke-width: 1.75;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: cl-logo-review 20s var(--ease-out) infinite;
}

.cl-logo__scene--confirm {
    stroke: var(--color-accent);
    stroke-width: 2.25;
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: cl-logo-confirm 20s var(--ease-out) infinite;
}

.cl-logo__impact {
    stroke: var(--color-accent);
    stroke-width: 1.15;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: cl-logo-impact 20s var(--ease-out) infinite;
}

.cl-logo__hot-fill {
    fill: var(--color-warm-ink);
    stroke: none;
}

.cl-logo__hot-stroke {
    fill: none;
    stroke: var(--color-warm-ink);
}

.cl-logo__solid {
    fill: var(--color-ink-soft);
    stroke: none;
}

.cl-logo__otp-dot {
    fill: var(--color-warm-ink);
    stroke: none;
    opacity: 0;
}

/* Hover and keyboard focus genuinely pause the current timeline. */
.cl-rail__brand:is(:hover, :focus-visible) .cl-logo__engine * {
    animation-play-state: paused;
}

@keyframes cl-logo-shell {
    0%, 63.4% { stroke: var(--color-ink-soft); stroke-width: var(--cl-logo-shell-width, 1.7); }
    64.6% { stroke: var(--cl-logo-shell-color, var(--color-accent)); stroke-width: var(--cl-logo-shell-pulse-width, 2.15); }
    67.2%, 98.8% { stroke: var(--cl-logo-shell-color, var(--color-accent)); stroke-width: var(--cl-logo-shell-width, 1.7); }
    100% { stroke: var(--color-ink-soft); stroke-width: var(--cl-logo-shell-width, 1.7); }
}

@keyframes cl-logo-message {
    0%, 4.4% { opacity: 1; transform: none; }
    5.8% { opacity: 1; transform: translateX(2px) scale(1.08); }
    7% { opacity: 0; transform: translateX(3px) scale(0.78); }
    7.01%, 98.8% { opacity: 0; transform: translateX(-2px) scale(0.78); }
    100% { opacity: 1; transform: none; }
}

@keyframes cl-logo-bot {
    0%, 5.8% { opacity: 0; transform: scale(0.55) rotate(-12deg); }
    6.68% { opacity: 1; transform: scale(1.18); }
    7%, 12.2% { opacity: 1; transform: none; }
    13.4%, 100% { opacity: 0; transform: scale(0.72) rotate(8deg); }
}

@keyframes cl-logo-flow {
    0%, 12.2% { opacity: 0; transform: scale(0.58) rotate(-10deg); }
    13.08% { opacity: 1; transform: scale(1.16); }
    13.4%, 18.6% { opacity: 1; transform: none; }
    19.8%, 100% { opacity: 0; transform: scale(0.72) rotate(8deg); }
}

@keyframes cl-logo-template {
    0%, 18.6% { opacity: 0; transform: scale(0.58) rotate(-12deg); }
    19.48% { opacity: 1; transform: scale(1.16) rotate(2deg); }
    19.8%, 25% { opacity: 1; transform: none; }
    26.2%, 100% { opacity: 0; transform: scale(0.72) rotate(10deg); }
}

@keyframes cl-logo-form {
    0%, 25% { opacity: 0; transform: scale(0.58) translateX(-2px); }
    25.88% { opacity: 1; transform: scale(1.16) translateX(1px); }
    26.2%, 31.4% { opacity: 1; transform: none; }
    32.6%, 100% { opacity: 0; transform: scale(0.72) translateX(2px); }
}

@keyframes cl-logo-otp {
    0%, 31.4% { opacity: 0; transform: scale(0.55); }
    32.28% { opacity: 1; transform: scale(1.16); }
    32.6%, 37.8% { opacity: 1; transform: none; }
    39%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes cl-logo-estate {
    0%, 37.8% { opacity: 0; transform: translateY(2px) scale(0.55); }
    38.68% { opacity: 1; transform: translateY(-0.6px) scale(1.16); }
    39%, 44.2% { opacity: 1; transform: none; }
    45.4%, 100% { opacity: 0; transform: translateY(2px) scale(0.72); }
}

@keyframes cl-logo-car {
    0%, 44.2% { opacity: 0; transform: translateX(-2px) scale(0.55); }
    45.08% { opacity: 1; transform: translateX(0.5px) scale(1.12); }
    45.4%, 50.6% { opacity: 1; transform: none; }
    51.8%, 100% { opacity: 0; transform: translateX(2px) scale(0.72); }
}

@keyframes cl-logo-store {
    0%, 50.6% { opacity: 0; transform: scale(0.55) rotate(-10deg); }
    51.48% { opacity: 1; transform: scale(1.16) rotate(2deg); }
    51.8%, 57% { opacity: 1; transform: none; }
    58.2%, 100% { opacity: 0; transform: scale(0.72) rotate(8deg); }
}

@keyframes cl-logo-review {
    0%, 57% { opacity: 0; stroke-dashoffset: 32; transform: scale(0.5) rotate(-14deg); }
    58.2% { opacity: 1; stroke-dashoffset: 32; transform: scale(1.18) rotate(4deg); }
    59.8% { opacity: 1; stroke-dashoffset: 0; transform: none; }
    63.4% { opacity: 1; stroke-dashoffset: 0; transform: none; }
    64.6%, 100% { opacity: 0; stroke-dashoffset: 0; transform: scale(0.72) rotate(10deg); }
}

@keyframes cl-logo-confirm {
    0%, 63.4% { opacity: 0; stroke-dashoffset: 17; transform: scale(0.55) rotate(-8deg); }
    64.6% { opacity: 1; stroke-dashoffset: 12; transform: scale(1.18) rotate(2deg); }
    66.8% { opacity: 1; stroke-dashoffset: 0; transform: scale(1.08); }
    67.6%, 98.8% { opacity: 1; stroke-dashoffset: 0; transform: none; }
    100% { opacity: 0; stroke-dashoffset: 17; transform: scale(0.7); }
}

@keyframes cl-logo-impact {
    0%, 64.8% { opacity: 0; transform: scale(0.55); }
    66% { opacity: 0.62; transform: scale(1); }
    68%, 100% { opacity: 0; transform: scale(1.38); }
}

@keyframes cl-logo-bot-eyes {
    0%, 8.64%, 9.32%, 100% { opacity: 1; }
    8.88%, 9.08% { opacity: 0.08; }
}

@keyframes cl-logo-flow-lines {
    0%, 13.4% { stroke-dashoffset: 18; }
    15.2%, 100% { stroke-dashoffset: 0; }
}

@keyframes cl-logo-template-lines {
    0%, 19.8% { stroke-dashoffset: 9; }
    21.6%, 100% { stroke-dashoffset: 0; }
}

@keyframes cl-logo-form-check {
    0%, 26.2% { stroke-dashoffset: 3; }
    28%, 100% { stroke-dashoffset: 0; }
}

@keyframes cl-logo-otp-dot-1 {
    0%, 33% { opacity: 0; transform: scale(0.3); }
    33.6%, 39% { opacity: 1; transform: none; }
    39.01%, 100% { opacity: 0; }
}

@keyframes cl-logo-otp-dot-2 {
    0%, 33.6% { opacity: 0; transform: scale(0.3); }
    34.2%, 39% { opacity: 1; transform: none; }
    39.01%, 100% { opacity: 0; }
}

@keyframes cl-logo-otp-dot-3 {
    0%, 34.2% { opacity: 0; transform: scale(0.3); }
    34.8%, 39% { opacity: 1; transform: none; }
    39.01%, 100% { opacity: 0; }
}

@keyframes cl-logo-estate-roof {
    0%, 39% { stroke-dashoffset: 14; }
    40.8%, 100% { stroke-dashoffset: 0; }
}

@keyframes cl-logo-estate-ping {
    0%, 40.8% { opacity: 0; transform: scale(0.3); }
    41.4%, 44.2% { opacity: 1; transform: none; }
    45.4%, 100% { opacity: 0; transform: scale(0.3); }
}

@keyframes cl-logo-store-awning {
    0%, 51.8% { stroke-dashoffset: 8; }
    53.6%, 100% { stroke-dashoffset: 0; }
}

@keyframes cl-logo-store-check {
    0%, 53.6% { stroke-dashoffset: 4; }
    55.4%, 100% { stroke-dashoffset: 0; }
}

.cl-logo__bot-eye { animation: cl-logo-bot-eyes 20s linear infinite; }

.cl-logo__flow-lines {
    stroke-dasharray: 18;
    animation: cl-logo-flow-lines 20s var(--ease-out) infinite;
}

.cl-logo__template-lines {
    stroke-dasharray: 9;
    animation: cl-logo-template-lines 20s var(--ease-out) infinite;
}

.cl-logo__form-check {
    stroke-dasharray: 3;
    animation: cl-logo-form-check 20s var(--ease-out) infinite;
}

.cl-logo__otp-dot {
    transform-box: fill-box;
    transform-origin: center;
}

.cl-logo__otp-dot--1 { animation: cl-logo-otp-dot-1 20s var(--ease-out) infinite; }
.cl-logo__otp-dot--2 { animation: cl-logo-otp-dot-2 20s var(--ease-out) infinite; }
.cl-logo__otp-dot--3 { animation: cl-logo-otp-dot-3 20s var(--ease-out) infinite; }

.cl-logo__estate-roof {
    stroke-dasharray: 14;
    animation: cl-logo-estate-roof 20s var(--ease-out) infinite;
}

.cl-logo__estate-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: cl-logo-estate-ping 20s var(--ease-out) infinite;
}

.cl-logo__store-awning {
    stroke-dasharray: 8;
    animation: cl-logo-store-awning 20s var(--ease-out) infinite;
}

.cl-logo__store-check {
    fill: none;
    stroke: var(--color-accent);
    stroke-dasharray: 4;
    animation: cl-logo-store-check 20s var(--ease-out) infinite;
}


/* Only the full wordmark holds its finished C and checkmark for five seconds.
   Standalone engines start the existing twenty-second loop immediately. */
.cl-rail__logo .cl-logo__engine * {
    animation-delay: 5s;
}

.cl-rail__logo .cl-logo__shell {
    stroke: var(--cl-logo-shell-color);
}

.cl-rail__logo .cl-logo__scene--confirm {
    opacity: 1;
    stroke-dashoffset: 0;
}


/*
 * Reduced motion: the mark holds its finished state instead of replaying.
 *
 * Not "no animation" — the engine's last scene is the confirmed tick, which is
 * the one that says what the product is for. Someone who has asked for less
 * motion still gets the logo, just not the twenty seconds it takes to arrive.
 *
 * Moved here with the rest of the identity: it was in the portal's own
 * reduced-motion block, which the landing page does not load.
 */
@media (prefers-reduced-motion: reduce) {
    .cl-logo__engine * {
        animation: none !important;
    }

    .cl-logo__shell {
        stroke: var(--cl-logo-shell-color, var(--color-accent));
        stroke-width: var(--cl-logo-shell-width, 1.7);
    }

    .cl-logo__scene,
    .cl-logo__impact {
        opacity: 0;
        transform: none;
    }

    .cl-logo__scene--confirm {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: none;
    }
}