/* ===========================================================
   LIFE · minimal set of intentional accents.

   Only the elements that survived the great revert:
     - live KTM clock in the hero
     - page-wipe transition between index and cv
     - footer brand scramble (no styles needed; handled in JS)
   =========================================================== */

/* ---------- 1. Live KTM clock (hero) ---------- */
.hero__top-right {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.hero__clock {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.05em;
    color: var(--color-obsidian);
}

.hero__clock-time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-slate-mist);
}

@media (max-width: 560px) {
    .hero__clock {
        font-size: 12px;
    }

    .hero__top-right {
        gap: 12px;
    }
}

/* ---------- 2. Page wipe transition ---------- */
.page-wipe {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--color-desert-sienna);
    transform: scaleX(0);
    pointer-events: none;
    visibility: hidden;
    transform-origin: right center;
}

.page-wipe.is-in {
    visibility: visible;
    animation: page-wipe-in 0.4s var(--ease-out) forwards;
}

.page-wipe.is-out {
    visibility: visible;
    animation: page-wipe-out 0.4s var(--ease-out) forwards;
}

@keyframes page-wipe-in {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes page-wipe-out {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ---------- 3. Reduced motion override ---------- */
@media (prefers-reduced-motion: reduce) {
    .page-wipe {
        display: none;
    }
}