/* Timeline: draw → fill → dock → show text + start marquee */
:root {
    --draw-duration: 800ms;
    --fill-duration: 200ms;
    --dock-duration: 500ms;
    --fade-duration: 250ms;

    --fill-start: var(--draw-duration);                            /* 800ms */
    --dock-start: calc(var(--fill-start) + var(--fill-duration));  /* 1000ms */
    --reveal-start: calc(var(--dock-start) + var(--dock-duration)); /* 1500ms */

    /* Where the full logo ends up */
    --logo-width: 50px;
    --logo-height: calc(var(--logo-width) * 133 / 146);
    --logo-offset: 24px;

    --accent: #B41313;
    --font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
    overflow: hidden;
}

/* Two identical copies; sliding the track up by -50% lines copy two up exactly where copy one started, so the loop is seamless. */
.marquee {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
    opacity: 0;
    animation: logo-fade-in var(--fade-duration) ease-out var(--reveal-start) forwards;
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    /* text turned 90° clockwise, reading top to bottom; the flex row now runs vertically too */
    writing-mode: vertical-rl;
    white-space: nowrap;
    /* the text runs vertically, so font size sets the strip's width */
    font: 900 50vw/1 var(--font);
    animation: marquee 20s linear var(--reveal-start) infinite;
}

.marquee-track span {
    padding-inline-end: 0.25em;
}

/*
 * The whole full logo (146×133 viewBox) is one element. It starts large with the
 * mark centred in the viewport, then shrinks into the top-left corner.
 * The mark's centre sits at (19.6, 113.2) in viewBox units, i.e. 13.43% / 77.52%
 * of the logo's width, which is what the start position is computed from.
 */
.logo {
    --start-width: 300px; /* mark ≈ 80px */

    position: fixed;
    z-index: 1;
    left: var(--logo-offset);
    top: var(--logo-offset);
    width: var(--logo-width);
    aspect-ratio: 146 / 133;
    opacity: 0;
    animation:
        logo-fade-in var(--fade-duration) forwards,
        logo-dock var(--dock-duration) ease-in-out var(--dock-start) backwards;
}

.logo-mark {
    /* transparent instead of none so the fill can be animated */
    fill: transparent;
    stroke: currentColor;
    stroke-width: 0.2;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1.02;
    stroke-dashoffset: 1.02;
    animation:
        logo-draw var(--draw-duration) ease-out forwards,
        logo-fill var(--fill-duration) ease-out var(--fill-start) forwards;
}

.logo-text {
    opacity: 0;
    animation: logo-fade-in var(--fade-duration) ease-out var(--reveal-start) forwards;
}

/* Sits right of the docked logo, bottom-aligned with the "301" baseline */
.tagline {
    position: fixed;
    z-index: 1;
    left: calc(var(--logo-offset) + var(--logo-width) + 8px);
    top: var(--logo-offset);
    height: var(--logo-height);
    margin: 0;
    display: flex;
    align-items: flex-end;
    font: 600 12px/1 var(--font);
    opacity: 0;
    animation: logo-fade-in var(--fade-duration) ease-out var(--reveal-start) forwards;
}

.footnote {
    position: fixed;
    z-index: 1;
    left: var(--logo-offset);
    bottom: var(--logo-offset);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font: 600 12px/1 var(--font);
    opacity: 0;
    animation: logo-fade-in var(--fade-duration) ease-out var(--reveal-start) forwards;
}

.footnote p {
    margin: 0;
}

.email {
    display: flex;
    color: var(--accent);
}

.email svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.email:hover,
.email:focus-visible {
    opacity: 0.7;
}

@keyframes logo-fade-in {
    to { opacity: 1; }
}

@keyframes logo-dock {
    from {
        width: var(--start-width);
        left: calc(50vw - var(--start-width) * 0.1343);
        top: calc(50vh - var(--start-width) * 0.7752);
    }
}

@keyframes marquee {
    to { transform: translateY(-50%); }
}

@keyframes logo-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes logo-fill {
    to { fill: #000; }
}

@media (prefers-reduced-motion: reduce) {
    .logo,
    .logo-mark,
    .logo-text,
    .tagline,
    .footnote,
    .marquee {
        animation: none;
        opacity: 1;
    }

    .marquee-track {
        animation: none;
    }

    .logo-mark {
        stroke-dashoffset: 0;
        fill: #000;
    }
}