/* Motion layer — shared by every page.
   Everything here is opt-in via the .motion class, which motion.js adds only
   when the visitor has not asked for reduced motion. Without JS the site
   renders exactly as before. */

:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Scroll reveal: a short rise and fade */
.motion [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.9s var(--ease-out),
        transform 0.9s var(--ease-out);
}

.motion [data-reveal].in {
    opacity: 1;
    transform: none;
}

/* Media settles in from a hair larger */
.motion .project-media[data-reveal] img,
.motion .project-media[data-reveal] video {
    transform: scale(1.025);
    transition: transform 1.4s var(--ease-out);
}

.motion .project-media[data-reveal].in img,
.motion .project-media[data-reveal].in video {
    transform: none;
}

/* Masked word reveal for display headings */
.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.split-word > span {
    display: inline-block;
}

.motion .split-word > span {
    transform: translateY(110%);
    transition: transform 1.1s var(--ease-out);
}

.motion .split.in .split-word > span {
    transform: none;
}

/* Section labels get a hairline that draws in */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.section-title::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    transform-origin: left;
}

.motion .section-header .section-title::before {
    transform: scaleX(0);
    transition: transform 1s var(--ease-out) 0.15s;
}

.motion .section-header.in .section-title::before {
    transform: scaleX(1);
}

/* Hero rule draws across once the intro has played */
.motion .hero {
    position: relative;
    border-bottom-color: transparent;
}

.motion .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--border);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.6s var(--ease-in-out) 0.9s;
}

.motion .hero.in::after {
    transform: scaleX(1);
}

/* Title links: underline grows from the left on hover */
.item h3 a,
.preview-item h3 a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition:
        background-size 0.45s var(--ease-out),
        color 0.2s ease;
}

.item h3 a:hover,
.preview-item h3 a:hover {
    background-size: 100% 1px;
}

/* Arrows nudge forward */
.view-all,
.back-link {
    transition: color 0.2s ease, transform 0.45s var(--ease-out);
}

.view-all:hover {
    transform: translateX(4px);
}

.back-link:hover {
    transform: translateX(-4px);
}

/* Nav: hairline border appears only once the page has scrolled */
.motion nav {
    border-bottom-color: transparent;
    transition: border-color 0.4s ease, background-color 0.4s ease;
}

.motion nav.scrolled {
    border-bottom-color: var(--border);
}

/* Sliding indicator under the active nav link */
.nav-links {
    position: relative;
}

.nav-indicator {
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 1px;
    background: var(--text-primary);
    transform-origin: left;
    pointer-events: none;
    opacity: 0;
    transition:
        transform 0.55s var(--ease-out),
        opacity 0.3s ease;
}

/* Logo slides in alongside its fade */
.logo {
    display: inline-block;
}

.motion .logo {
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--ease-out);
}

.motion .logo:not(.visible) {
    transform: translateY(6px);
}

/* Home page view switch */
.motion .page {
    transition: opacity 0.22s ease;
}

.motion .page.leaving {
    opacity: 0;
}

/* Reading progress on long pages */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 1001;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .read-progress {
        display: none;
    }
}