/* 
 ---------------------------------
 |   LAST UPDATED: 2026-04-13    |
 ---------------------------------
 */

/* OWNER: Motion-powered progressive enhancement effects.
   Requires Motion library (cdn); falls back gracefully when absent. */

/* ========================================================================
   1. HOMEPAGE SCROLL-REVEAL
   Hidden initial state — Motion's inView unhides with a spring.
   Only applied once .motion-ready is set (JS loaded).
   ======================================================================== */
.motion-ready .latest-post-image-figure {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    will-change: opacity, transform;
}

.motion-ready .latest-post-content {
    opacity: 0;
    transform: translateY(14px);
    will-change: opacity, transform;
}

.motion-ready .latest-stories,
.motion-ready .browse-by-tags,
.motion-ready .homepage-bottom-bar {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}

/* ========================================================================
   2. DRAWER SPRING OVERRIDE
   Desktop only: remove CSS transition on the slide; JS drives it.
   Tablet/mobile uses display toggle, not transform, so leave alone.
   ======================================================================== */
@media (min-width: 1024px) {
    .motion-ready .menu {
        transition: none;
    }
}

.motion-ready .menu-links {
    transition: none;
}

/* ========================================================================
   3. LIVING PORTRAIT (replaces jitter)
   Refined hover state. JS handles the periodic breathing.
   ======================================================================== */
.motion-ready .jitter-image[data-jitter-ready="true"] .jitter-image__subject {
    transition: none;
}

.motion-ready .jitter-image:is(:hover, :focus-within)[data-jitter-ready="true"] .jitter-image__subject {
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* ========================================================================
   4. HEADING TRACKER
   Navbar logo-text crossfade container.
   ======================================================================== */
.logo-text-tracker {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.logo-text-tracker__label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ========================================================================
   5. HEADING NAV — [▲][▼] buttons in navbar for post pages
   ======================================================================== */
.heading-nav {
    display: none;
    align-items: center;
    gap: 2px;
    margin-right: 0.75em;
}

.post-template .heading-nav {
    display: flex;
}

.heading-nav__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--text-color-lower-opac, rgba(0, 0, 0, 0.15));
    background: transparent;
    color: var(--text-color, #1a1a1a);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0.55;
}

.heading-nav__btn:hover:not(:disabled) {
    background-color: var(--text-color-lower-opac, rgba(0, 0, 0, 0.08));
    opacity: 0.85;
}

.heading-nav__btn:active:not(:disabled) {
    opacity: 1;
}

.heading-nav__btn:disabled {
    opacity: 0.18;
    cursor: default;
}

.heading-nav__btn svg {
    display: block;
}

.heading-nav--mobile {
    margin-right: auto;
    margin-left: 0.5em;
}

@media (max-width: 1023px) {
    .navbar .heading-nav {
        display: none;
    }
}

@media (min-width: 1024px) {
    .heading-nav--mobile {
        display: none !important;
    }
}

/* ========================================================================
   FALLBACK: if Motion never loads, .motion-ready is never set, so elements
   stay visible (opacity defaults to 1). The hidden initial states above
   only apply under .motion-ready, set by motion-effects.js after Motion
   successfully initialises.
   ======================================================================== */

/* ========================================================================
   HOMEPAGE IMMERSIVE: scroll() drives reveal + sticky cards; skip inView hides
   ======================================================================== */
body.homepage-immersive.motion-ready .latest-post-image-figure,
body.homepage-immersive.motion-ready .latest-post-content,
body.homepage-immersive.motion-ready .latest-stories,
body.homepage-immersive.motion-ready .browse-by-tags,
body.homepage-immersive.motion-ready .homepage-bottom-bar {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ========================================================================
   REDUCED MOTION: disable all Motion-driven effects
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    .motion-ready .latest-post-image-figure,
    .motion-ready .latest-post-content,
    .motion-ready .latest-stories,
    .motion-ready .browse-by-tags,
    .motion-ready .homepage-bottom-bar {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }

    .motion-ready .menu {
        transition: transform var(--ease-transition) !important;
    }

    .motion-ready .menu-links {
        transition: opacity var(--ease-transition) !important;
    }
}