/*------------------------------------------------------------------
  WashTrack — brand marks (logo + scene)
  -----------------------------------------------------------------
  Standalone on purpose: the marketing site loads THIS file only, the
  application loads it alongside washtrack.css. It carries no global
  selectors, so it can sit on any page without restyling it.
-------------------------------------------------------------------*/

:root {
    /* WashTrack brand palette */
    --wt-black: #1A1A1A;
    --wt-orange: #E85A16;
    --wt-white: #FFFFFF;
}

.wt-logo,
.wl-scene {
    --wl-ease: cubic-bezier(.22, 1, .36, 1);
    --wl-navy: #1A1A1A;
    --wl-muted: #64748b;
}

/*------------------------------------------------------------------
  Brand logo  (<x-brand-logo>)
-------------------------------------------------------------------*/

.wt-logo {
    display: inline-flex;
    direction: ltr; /* a logo reads the same in every language */
    align-items: center;
    gap: calc(var(--wt-logo-size, 34px) * .32);
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}

.wt-mark {
    flex: 0 0 auto;
    display: block;
    overflow: visible;
}

.wt-mark .layer { fill: none; stroke: var(--wt-orange); }
.wt-mark .ring-b .layer { stroke: var(--wt-black); }
.wt-mark .core { fill: var(--wt-orange); }

.wt-wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wt-word {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: calc(var(--wt-logo-size, 34px) * .6);
    letter-spacing: -.025em;
    color: var(--wt-black);
    white-space: nowrap;
    /* The wordmark is Latin in both languages: it is a name, not a word. */
    direction: ltr;
    unicode-bidi: isolate;
}

.wt-word .t { color: var(--wt-orange); }

.wt-tagline {
    font-size: calc(var(--wt-logo-size, 34px) * .24);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wl-muted);
    white-space: nowrap;
}

.wt-logo--light .wt-word { color: var(--wt-white); }
.wt-logo--light .wt-mark .ring-b .layer { stroke: var(--wt-white); }
.wt-logo--light .wt-tagline { color: rgba(255, 255, 255, .65); }

/* --- the mark's motion: rings turn slowly in opposite directions ----- */

.wt-mark .ring-a,
.wt-mark .ring-b {
    transform-box: view-box;
    transform-origin: 50% 50%;
}
.wt-mark.spin .ring-a { animation: wt-spin 9s linear infinite; }
.wt-mark.spin .ring-b { animation: wt-spin 6s linear infinite reverse; }
.wt-logo:hover .wt-mark.spin .ring-a { animation-duration: 3s; }
.wt-logo:hover .wt-mark.spin .ring-b { animation-duration: 2s; }

@keyframes wt-spin { to { transform: rotate(360deg); } }

/* The scene (below) still uses these. */
.wl-scene .wl-rim,
.wl-scene .wls-bar,
.wl-scene .wls-pulse,
.wl-scene .wls-drop,
.wl-scene .wls-foam,
.wl-scene .wls-spark {
    transform-box: fill-box;
    transform-origin: center;
}
.wl-rim { animation: wl-spin .55s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-.55px); }
}
@keyframes wl-twinkle {
    0%, 55%, 100% { transform: scale(0) rotate(0deg); }
    72% { transform: scale(1) rotate(45deg); }
    88% { transform: scale(.25) rotate(90deg); }
}

/*------------------------------------------------------------------
  Brand scene  (<x-brand-scene>)
-------------------------------------------------------------------*/

.wl-scene {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wl-scene .wls-bar { transform-origin: bottom; animation: wls-grow 1.1s var(--wl-ease) backwards; animation-delay: calc(var(--i) * 90ms + .2s); }
.wl-scene .wls-trend { stroke-dasharray: 360; stroke-dashoffset: 360; animation: wls-draw 1.8s var(--wl-ease) 1s forwards; }
.wl-scene .wls-pulse { animation: wls-pulse 2s ease-out 2.4s infinite; opacity: 0; }
.wl-scene .wls-car { animation: wls-drive 7.5s linear infinite; }
.wl-scene .wls-bob { animation: wl-bob .3s ease-in-out infinite alternate; }
.wl-scene .wls-beam { animation: wls-flicker 1.6s ease-in-out infinite alternate; }
.wl-scene .wls-trail { animation: wls-flicker .35s linear infinite alternate; }
.wl-scene .wls-brush { animation: wls-brush .35s linear infinite; }
.wl-scene .wls-brush--r { animation-direction: reverse; }
.wl-scene .wls-drop { opacity: 0; animation: wls-drop 1.3s ease-in infinite; animation-delay: calc(var(--j) * .32s); }
.wl-scene .wls-drop--late { animation-delay: calc(var(--j) * .32s + .65s); }
.wl-scene .wls-foam { opacity: 0; animation: wls-foam 2.4s ease-out infinite; animation-delay: calc(var(--k) * .42s); }
.wl-scene .wls-spark { transform: scale(0); animation: wl-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--s) * .9s + .5s); }

@keyframes wls-grow { from { transform: scaleY(0); opacity: 0; } }
@keyframes wls-draw { to { stroke-dashoffset: 0; } }
@keyframes wls-pulse {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(3); opacity: 0; }
}
@keyframes wls-drive {
    0% { transform: translateX(-120px); }
    100% { transform: translateX(400px); }
}
@keyframes wls-flicker { from { opacity: .2; } to { opacity: .75; } }
@keyframes wls-brush { to { stroke-dashoffset: 12; } }
@keyframes wls-drop {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(64px); opacity: 0; }
}
@keyframes wls-foam {
    0% { transform: translateY(4px) scale(.4); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-14px) scale(1.15); opacity: 0; }
}


/* Reduced motion: the logo and scene hold a finished frame. */
@media (prefers-reduced-motion: reduce) {
    .wt-mark *,
    .wl-scene * { animation: none !important; }
    .wl-scene .wls-trend { stroke-dashoffset: 0; }
    .wl-scene .wls-car { transform: translateX(150px); }
    .wl-scene .wls-spark { transform: scale(1); }
    .wl-scene .wls-foam,
    .wl-scene .wls-drop { opacity: .7; }
}

.wt-logo--static .wt-mark * { animation: none !important; }