/* Schweiger welcome dialog (js/schweiger-welcome.js) */
#schweiger-welcome {
    --sw-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --sw-paint-delay: 0.9s;
    --sw-paint-duration: 1.1s;

    width: min(34rem, calc(100vw - 2rem));
    max-height: 90svh;
    padding: 0;
    border: none;
    border-radius: 1.875rem;
    overflow: hidden auto;
    color: var(--color-text);
    background-color: var(--color-white);
}

#schweiger-welcome:focus {
    outline: none;
}

#schweiger-welcome::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

#schweiger-welcome[open] {
    animation: popup-in 0.25s ease-out;
}

/* Stage: old name gets painted over, Caro logo appears underneath */
.sw-stage {
    position: relative;
    height: clamp(8.5rem, 30vw, 11rem);
    overflow: hidden;
}

.sw-old,
.sw-new {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sw-old {
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--color-yellow-50);
    color: var(--color-dark);
    font-family: var(--font-family-headline);
    font-size: var(--fluid-24-28);
    line-height: 1.1;
    text-align: center;
}

.sw-old img {
    width: min(55%, 14rem);
    height: auto;
}

.sw-old span {
    font-size: 0.6em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.sw-new {
    background-color: var(--color-secondary);
    clip-path: inset(0 100% 0 0);
    animation: sw-reveal var(--sw-paint-duration) var(--sw-ease) var(--sw-paint-delay) forwards;
}

.sw-new img {
    width: min(55%, 15rem);
    height: auto;
    animation: sw-logo 0.6s ease-out calc(var(--sw-paint-delay) + var(--sw-paint-duration) - 0.2s) both;
}

/* The brush: a skewed petrol stroke whose centre rides the reveal edge */
.sw-brush {
    --sw-brush-width: 30%;

    position: absolute;
    inset-block: -10%;
    left: calc(var(--sw-brush-width) / -2);
    width: var(--sw-brush-width);
    transform: skewX(-14deg);
    background:
        repeating-linear-gradient(0deg, transparent 0 0.35rem, rgba(255, 255, 255, 0.12) 0.35rem 0.45rem),
        linear-gradient(90deg, transparent, var(--color-primary) 30%, var(--color-primary) 70%, transparent);
    opacity: 0;
    animation:
        sw-brush-move var(--sw-paint-duration) var(--sw-ease) var(--sw-paint-delay) forwards,
        sw-brush-fade var(--sw-paint-duration) linear var(--sw-paint-delay) forwards;
}

@keyframes sw-reveal {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes sw-brush-move {
    to { left: calc(100% - var(--sw-brush-width) / 2); }
}

@keyframes sw-brush-fade {
    0% { opacity: 0; }
    10%, 80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes sw-logo {
    from { opacity: 0; transform: scale(0.9); }
    60% { opacity: 1; transform: scale(1.04); }
    to { opacity: 1; transform: scale(1); }
}

/* Body */
.sw-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem clamp(1.25rem, 5vw, 2.25rem) 2rem;
}

.sw-body > * {
    margin: 0;
    animation: sw-rise 0.5s ease-out both;
}

.sw-body > :nth-child(1) { animation-delay: 0.15s; }
.sw-body > :nth-child(2) { animation-delay: 0.25s; }
.sw-body > :nth-child(3) { animation-delay: 0.35s; }
.sw-body > :nth-child(4) { animation-delay: 0.45s; }
.sw-body > :nth-child(5) { animation-delay: 0.55s; }

@keyframes sw-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: none; }
}

.sw-eyebrow {
    font-size: var(--fs-small);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#schweiger-welcome h2 {
    font-size: var(--fluid-24-28);
    line-height: 1.2;
}

.sw-note {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 1rem 1.125rem;
    border-radius: 1.25rem;
    background-color: var(--color-blue-50);
}

.sw-note p {
    margin: 0;
}

.sw-note i {
    flex: none;
    margin-top: 0.2rem;
    color: var(--color-secondary);
}

.sw-note a {
    color: var(--color-secondary);
    font-weight: 600;
}

#schweiger-welcome .sw-cta {
    align-self: center;
}

/* Phones and short laptop screens: keep the CTA above the fold */
@media screen and (max-width: 47.99rem), screen and (max-height: 50rem) {
    .sw-stage {
        height: 7rem;
    }

    .sw-old img {
        width: auto;
        height: 3.75rem;
    }

    .sw-new img {
        width: auto;
        height: 4.5rem;
    }

    .sw-body {
        gap: 0.75rem;
        padding: 1.25rem 1.25rem 1.5rem;
        font-size: 0.9375rem;
    }

    .sw-note {
        padding: 0.875rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #schweiger-welcome[open],
    .sw-new img,
    .sw-body > * {
        animation: none;
    }

    .sw-new {
        clip-path: none;
        animation: none;
    }

    .sw-old,
    .sw-brush {
        display: none;
    }
}