/* ── Expressive layer ────────────────────────────────────────────────────────
   Kinetic type, depth, instrument readouts and raw statements. These carry the
   brand's "in motion" idea; use at most ONE per view. */

/* KineticHeadline — words rise and un-condense (wdth axis) on entry */
.uw-kinetic{font-family:var(--font-display);font-weight:var(--weight-black);letter-spacing:var(--track-hero);line-height:var(--leading-hero);text-wrap:balance;margin:0;display:block}
.uw-kinetic__w{display:inline-block;overflow:hidden;vertical-align:top}
.uw-kinetic__i{display:inline-block;transform:translateY(110%);font-variation-settings:"wdth" var(--wdth-condensed);opacity:0;transition:transform var(--dur-kinetic) var(--ease-out-quint),font-variation-settings var(--dur-kinetic) var(--ease-out-quint),opacity var(--dur-3) var(--ease-out);transition-delay:var(--_d,0ms)}
.uw-kinetic[data-in="true"] .uw-kinetic__i{transform:translateY(0);font-variation-settings:"wdth" var(--wdth-normal);opacity:1}
.uw-kinetic__i--accent{color:var(--accent-ink)}
[data-theme="dark"] .uw-kinetic__i--accent{color:var(--signal-300)}

/* Marquee — instrument ticker */
.uw-marquee{position:relative;overflow:hidden;display:flex;border-block:var(--hairline) solid var(--border-hairline);background:var(--surface-page)}
.uw-marquee__row{display:flex;flex:none;gap:var(--space-8);padding:var(--space-3) 0;align-items:center;animation:uw-marquee var(--_dur,32s) linear infinite;padding-right:var(--space-8)}
.uw-marquee:hover .uw-marquee__row{animation-play-state:paused}
.uw-marquee--reverse .uw-marquee__row{animation-direction:reverse}
.uw-marquee__item{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.uw-marquee__item b{color:var(--text-primary);font-weight:var(--weight-medium)}
.uw-marquee__tick{width:4px;height:4px;background:var(--accent);flex:none}
@keyframes uw-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* TiltCard — pointer-driven depth, no library */
.uw-tilt{position:relative;perspective:var(--perspective);isolation:isolate}
.uw-tilt__inner{position:relative;transform-style:preserve-3d;transition:transform var(--dur-4) var(--ease-out-quint),box-shadow var(--dur-4) var(--ease-out-quint);will-change:transform;background:var(--surface-card);border:var(--hairline) solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);overflow:hidden}
.uw-tilt[data-active="true"] .uw-tilt__inner{transition:transform var(--dur-fast) var(--ease-linear),box-shadow var(--dur-2) var(--ease-out);box-shadow:var(--shadow-4)}
.uw-tilt__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--dur-3) var(--ease-out);background:radial-gradient(420px circle at var(--_mx,50%) var(--_my,50%),color-mix(in oklab,var(--signal-300) 40%,transparent),transparent 62%);mix-blend-mode:soft-light}
.uw-tilt[data-active="true"] .uw-tilt__glare{opacity:1}
.uw-tilt__layer{transform:translateZ(var(--_z,28px))}

/* StatDial — bridge instrument readout */
.uw-dial{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.uw-dial__svg{display:block;overflow:visible}
.uw-dial__track{stroke:var(--surface-inset)}
.uw-dial__arc{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset var(--dur-slow) var(--ease-out-quint)}
.uw-dial__arc--warn{stroke:var(--state-warn)}
.uw-dial__arc--danger{stroke:var(--state-danger)}
.uw-dial__arc--info{stroke:var(--state-info)}
.uw-dial__value{font-family:var(--font-mono);font-size:var(--text-h3);font-weight:var(--weight-medium);fill:var(--text-primary);letter-spacing:-0.02em}
.uw-dial__unit{font-family:var(--font-mono);font-size:var(--text-micro);fill:var(--text-muted);letter-spacing:var(--track-mono-label)}
.uw-dial__label{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-muted)}

/* Statement — raw, near-brutalist block */
.uw-statement{position:relative;padding:var(--space-9) var(--space-8);background:var(--surface-inverse);color:var(--text-inverse);border-radius:0;overflow:hidden}
.uw-statement--paper{background:var(--sand-100);color:var(--n-950);border:var(--border-w-brutal) solid var(--n-950)}
.uw-statement--signal{background:var(--accent);color:var(--n-950)}
.uw-statement__kicker{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-label);text-transform:uppercase;opacity:.72;margin-bottom:var(--space-5);display:block}
.uw-statement__text{font-family:var(--font-display);font-size:var(--text-d1);font-weight:var(--weight-black);line-height:var(--leading-hero);letter-spacing:var(--track-hero);margin:0;font-variation-settings:"wdth" var(--wdth-tight);text-transform:uppercase}
.uw-statement__text em{font-style:normal;color:var(--accent);font-variation-settings:"wdth" var(--wdth-normal)}
.uw-statement--signal .uw-statement__text em,.uw-statement--paper .uw-statement__text em{color:var(--port-500)}
.uw-statement__rule{position:absolute;inset:auto 0 0 0;height:var(--border-w-brutal);background:var(--accent)}

/* ThemeToggle */
.uw-theme{display:inline-flex;padding:3px;gap:2px;background:var(--surface-sunken);border:var(--hairline) solid var(--border-hairline);border-radius:var(--radius-pill)}
.uw-theme__btn{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.uw-theme__btn:hover{color:var(--text-primary)}
.uw-theme__btn[data-active="true"]{background:var(--surface-card);color:var(--text-primary);box-shadow:var(--shadow-1)}
.uw-theme__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Reveal-on-scroll utility used by kits and slides */
.uw-reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out-quint);transition-delay:var(--_d,0ms)}
.uw-reveal[data-in="true"]{opacity:1;transform:none}

/* Grain + organic background forms (immersion without weight) */
.uw-grain{position:relative}
.uw-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);background-image:radial-gradient(var(--n-950) 0.5px,transparent 0.5px);background-size:3px 3px}
.uw-blob{position:absolute;border-radius:var(--radius-organic);filter:blur(var(--blur-heavy));opacity:.5;pointer-events:none}