/* Wordmark lockup — single source of truth.
   Consumes --accent, --ink, --ink-3 from the host page's :root. */

.wordmark-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
    user-select: none;
}
.wordmark {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.029em;
    line-height: 1;
    position: relative;
    display: inline-block;
    /* Tunable dot-on-i alignment. Default 1.09em is computed from
       General Sans metrics at weight 600; the per-page JS that aligns
       the tittle to the rendered ı stem overrides this in px. */
    --i-tittle-left: 1.09em;
    --i-tittle-top: 0.06em;
}
.wordmark .i-stem {
    position: relative;
    top: 0;
    display: inline-block;
}
.wordmark .i-tittle {
    position: absolute;
    top: var(--i-tittle-top);
    left: var(--i-tittle-left);
    width: 0.22em;
    height: 0.22em;
    border-radius: 50%;
    background: var(--accent);
    /* Upward Bezier arc landing at the same y-level as start (above "O").
       Travel ≈30px right, no vertical drop. */
    offset-path: path('M 0 0 Q 15 -30 30 0');
    offset-distance: 0%;
    offset-rotate: 0deg;
    /* offset-anchor defaults to "center" when offset-path is set.
       Force top-left so `left`/`top` mean what they normally mean. */
    offset-anchor: 0% 0%;
    will-change: offset-distance, transform, clip-path, opacity;
    transition: opacity 280ms ease 80ms;
}

/* Animatable percentage. @property lets the browser interpolate this
   smoothly — without it, custom-property animations would snap. */
@property --bloom {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

.wordmark .one-word {
    color: var(--accent);  /* fallback for browsers without background-clip: text */
    display: inline-block;
    /* Tiny breathing space between "Inline" and "One" — no full text space. */
    margin-left: 0.10em;
    /* Radial bloom: accent fills outward from the touch point (top of O).
       --bloom controls the accent radius; ink fills the rest. */
    background-image: radial-gradient(
        circle at 12% 25%,
        var(--accent) 0%,
        var(--accent) var(--bloom, 100%),
        var(--ink) var(--bloom, 100%),
        var(--ink) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    --bloom: 100%;
    transition: --bloom 240ms ease;
}
.wordmark-sub {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--ink-3);
    text-transform: uppercase;
}

/* Single arc, then "enter the O" effect: dot translates down INTO the letter
   while clip-path masks the bottom (the part now inside the O), so the
   visible portion shrinks upward. "One" fills with accent through the same
   window — feels like the dot's color spreads into the letter as it enters. */
.wordmark-lockup.is-playing .i-tittle { animation: wm-dot-arc 1000ms ease-in-out forwards; }
.wordmark-lockup.is-playing .one-word { animation: wm-one-fill 1000ms ease-in-out forwards; }
@keyframes wm-dot-arc {
    0%   { offset-distance: 0%;   transform: translateY(0);    clip-path: inset(0); opacity: 1; }
    65%  { offset-distance: 100%; transform: translateY(0);    clip-path: inset(0); opacity: 1; }
    100% { offset-distance: 100%; transform: translateY(100%); clip-path: inset(0 0 100% 0); opacity: 0; }
}
@keyframes wm-one-fill {
    0%, 65% { --bloom: 0%; }
    100%    { --bloom: 150%; }
}
@media (prefers-reduced-motion: reduce) {
    .wordmark-lockup.is-playing .i-tittle,
    .wordmark-lockup.is-playing .one-word { animation: none; }
}