/* =============================================================
   CarAtoZ Brand Logo — Reusable Text Logo Styles
   ============================================================= */

.caz-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Defaults — overridden by context */
    --caz-primary: currentColor;
    --caz-accent-start: #ff3366;
    --caz-accent-mid:   #a855f7;
    --caz-accent-end:   #9333ea;
    --caz-accent: linear-gradient(
        135deg,
        var(--caz-accent-start) 0%,
        var(--caz-accent-mid)   50%,
        var(--caz-accent-end) 100%
    );
    --caz-tagline: currentColor;
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.caz-brand:hover {
    transform: scale(1.03);
}

.caz-brand__text {
    font-weight: 800;
    letter-spacing: -0.025em;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    /* Slide-in on load */
    animation: cazFadeIn 0.6s ease-out both;
}

.caz-brand__primary {
    color: var(--caz-primary);
    display: inline-block;
    animation: cazSlideLeft 0.6s ease-out both;
}

.caz-brand__accent {
    /* Larger background so the gradient can animate across */
    background: linear-gradient(
        110deg,
        var(--caz-accent-start) 0%,
        var(--caz-accent-mid)   35%,
        var(--caz-accent-end)   50%,
        var(--caz-accent-mid)   65%,
        var(--caz-accent-start) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    display: inline-block;
    margin-left: 0.08em; /* slight gap between "Car" and "AtoZ" */
    /* Italic "Z" has a right-side overhang that gets clipped by inline-block.
       Give it extra right padding so the slanted top of the Z has room. */
    padding-right: 0.25em;
    margin-right: -0.15em;

    /* Continuous shimmer + letter entrance */
    animation:
        cazShimmer 4s linear infinite,
        cazSlideRight 0.6s ease-out 0.15s both;
}

a.caz-brand:hover .caz-brand__accent {
    animation-duration: 1.2s, 0.6s;
}

.caz-brand__tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    margin-top: 4px;
    opacity: 0.68;
    letter-spacing: 0.12em;
    color: var(--caz-tagline);
    white-space: nowrap;
    transform-origin: left;
    animation: cazFadeInUp 0.7s ease-out 0.25s both;
}

/* --------- Size variants --------- */
.caz-brand--sm .caz-brand__text    { font-size: 1.05rem; }
.caz-brand--sm .caz-brand__tagline { font-size: 0.48rem; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 2px; }

.caz-brand--md .caz-brand__text    { font-size: 1.55rem; }
.caz-brand--md .caz-brand__tagline { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.18em; margin-top: 3px; }

.caz-brand--lg .caz-brand__text    { font-size: 2.1rem; }
.caz-brand--lg .caz-brand__tagline { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 4px; }

.caz-brand--xl .caz-brand__text    { font-size: 2.8rem; }
.caz-brand--xl .caz-brand__tagline { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }

/* Centered layout helper */
.caz-brand--center {
    align-items: center;
    transform-origin: center center;
}

/* Link reset when used with <a> */
a.caz-brand {
    color: inherit;
    text-decoration: none;
}

/* =============================================================
   Theme colors
   ============================================================= */

/* Sensible default: "Car" inherits text color from parent (currentColor)
   which works for both light and dark themes as long as the parent
   has an explicit text color. */

/* Light-theme override — "Car" renders dark navy */
.caz-brand--light,
html[data-theme="light"] .caz-brand--auto {
    --caz-primary: #0f172a;
    --caz-tagline: #64748b;
    /* On light background, the gradient mid-color can look washed out.
       Shift slightly toward the deeper tones. */
    --caz-accent-start: #ff3366;
    --caz-accent-mid:   #9333ea;
    --caz-accent-end:   #6d28d9;
}

/* Dark-theme override — "Car" renders white */
.caz-brand--dark,
html:not([data-theme="light"]) .caz-brand--auto {
    --caz-primary: #ffffff;
    --caz-tagline: rgba(255, 255, 255, 0.65);
    /* On dark background, use vibrant gradient tones */
    --caz-accent-start: #ff3366;
    --caz-accent-mid:   #c084fc;
    --caz-accent-end:   #9333ea;
}

/* =============================================================
   Animations
   ============================================================= */

@keyframes cazShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes cazFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cazSlideLeft {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes cazSlideRight {
    from { opacity: 0; transform: translateX(10px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes cazFadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 0.68; transform: translateY(0); }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .caz-brand,
    .caz-brand__text,
    .caz-brand__primary,
    .caz-brand__accent,
    .caz-brand__tagline {
        animation: none !important;
        transition: none !important;
    }
    a.caz-brand:hover {
        transform: none !important;
    }
}