/* css/home.css */
/* Landing-page composition; reusable UI primitives live in design-system. */
.hero {
    --brand-width: 160px;
    --brand-height: 119px;
}

.hero h1 {
    font-size: clamp(4rem, 20vw, 6rem);
}

.repo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.repo-card {
    display: flex;
    flex-direction: column;
}

.repo-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.repo-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-xl);
    background: var(--color-brand-surface);
    color: var(--color-brand);
}

.repo-card__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.375;
    transition: color var(--duration-fast);
}

.repo-card__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
}

.repo-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    color: rgb(var(--palette-gray-300));
    font-size: var(--font-size-xs);
    line-height: var(--space-4);
    transition: color var(--duration-fast);
}

.repo-card:hover .repo-card__title {
    color: var(--color-brand);
}

.repo-card:hover .repo-card__footer {
    color: rgb(var(--palette-red-300));
}

@keyframes scroll-left {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-50%);
    }
}
@keyframes scroll-right {
    0% {
        transform: translate(-50%);
    }
    to {
        transform: translate(0);
    }
}
.marquee-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3);
}
.marquee-group[aria-hidden="true"] {
    display: none;
}
.marquee-ready .marquee-window {
    overflow: hidden;
}
.marquee-ready .marquee-row {
    display: flex;
    width: max-content;
}
.marquee-ready .marquee-group {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3) var(--space-1) 0;
}
.marquee-ready .marquee-left {
    animation: scroll-left var(--duration-marquee) linear infinite;
}
.marquee-ready .marquee-right {
    animation: scroll-right var(--duration-marquee) linear infinite;
}
.marquee-track:hover .marquee-left,
.marquee-track:hover .marquee-right {
    animation-play-state: paused;
}
.marquee-ready .marquee-window:focus-within {
    overflow-x: auto;
    padding-inline: var(--space-1);
}
.marquee-ready .marquee-window:focus-within .marquee-row {
    animation: none;
    transform: none;
}
.marquee-ready .marquee-window:focus-within .marquee-group[aria-hidden="true"] {
    display: none;
}

@media (min-width: 640px) {
    .repo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .repo-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .repo-card {
        grid-column: span 2 / span 2;
    }
    .repo-card--centered {
        grid-column-start: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .repo-card__title, .repo-card__footer {
        transition: none;
    }
    .marquee-ready .marquee-row {
        width: auto;
        animation: none;
        transform: none;
    }
    .marquee-ready .marquee-group {
        flex-wrap: wrap;
        flex-shrink: 1;
        width: 100%;
        padding: var(--space-3);
    }
    .marquee-ready .marquee-group[aria-hidden="true"] {
        display: none;
    }
}

/* css/showcase.css */
/* Scroll showcase transitions and scene animations. */
.showcase {
    position: relative;
    height: calc(var(--showcase-count) * 70svh + 100svh);
}
.showcase--positions {
    height: calc(var(--showcase-count) * 50svh + 100svh);
}
.showcase-viewport {
    position: sticky;
    top: calc(var(--header-height) + 1px);
    height: calc(100svh - var(--header-height) - 1px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.showcase-background {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.showcase-toolbar,
.showcase-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: var(--space-3);
    padding-block: var(--space-4);
    padding-inline: var(--page-gutter);
}
.showcase-content {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.showcase-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: var(--space-8);
    min-height: 100%;
    padding-block: var(--space-4);
    padding-inline: var(--page-gutter);
}
.feature-title {
    margin-block: var(--space-5);
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: var(--font-weight-black);
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.feature-label {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    color: rgb(var(--ui-accent-rgb));
    background: rgb(var(--ui-accent-rgb) / 0.13);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}
.feature-description {
    margin-bottom: var(--space-5);
    color: rgb(var(--palette-gray-400));
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
}
.feature-mockup {
    width: 100%;
    max-width: 36rem;
    justify-self: center;
}
.showcase-dots {
    display: flex;
    align-items: center;
}
.showcase-dot {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 32px;
    padding-inline: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-md);
}
.showcase-dot::before {
    content: "";
    width: var(--dot-width);
    height: var(--indicator-size);
    border-radius: var(--radius-full);
    background: var(--dot-color);
    transition: width var(--duration-normal), background-color var(--duration-normal);
}
.showcase-progress-track {
    flex: 1;
    height: var(--space-1);
    overflow: hidden;
    background: rgb(var(--palette-white) / 0.1);
    border-radius: var(--radius-full);
}
.showcase-progress {
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
}
@media (min-width: 1024px) {
    .showcase-scene {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-12);
    }
}
.feature-index {
  font-size: clamp(220px, 40vw, 560px);
  font-weight: var(--font-weight-black);
  line-height: 1;
  padding-left: 3vw;
  opacity: 0.07;
}

.feature-fade-enter-active {
  transition: opacity var(--duration-scene) ease;
}
.feature-fade-leave-active {
  transition: opacity var(--duration-feature-leave) ease;
}
.feature-fade-enter-from,
.feature-fade-leave-to {
  opacity: 0;
}
.feature-index.bg-index-enter-active,
.feature-index.bg-index-leave-active {
  transition:
    opacity var(--duration-scene) ease,
    transform var(--duration-scene) ease;
}
.feature-index.bg-index-enter-from {
  opacity: 0;
  transform: translate(40px);
}
.feature-index.bg-index-leave-to {
  opacity: 0;
  transform: translate(-40px);
}
.ws-cursor {
  animation: ws-cursor-move 4s ease-in-out infinite;
}
@keyframes ws-cursor-move {
  0%,
  to {
    transform: translate(0);
  }
  50% {
    transform: translate(-40px, 30px);
  }
}
.kanban-card {
  animation: kanban-slide 2.5s ease-in-out infinite alternate;
}
@keyframes kanban-slide {
  0%,
  70% {
    transform: translate(0);
  }
  to {
    transform: translate(4px);
  }
}
.meet-tile {
  animation: meet-pulse 2.4s ease-in-out infinite;
}
@keyframes meet-pulse {
  0%,
  to {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}
.noti-toast {
  animation: noti-rise 3.2s ease-in-out infinite;
}
@keyframes noti-rise {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  25%,
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.caret {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.search-result {
  animation: search-focus 3s ease-in-out infinite;
}
@keyframes search-focus {
  0%,
  30% {
    opacity: 0;
    filter: blur(4px);
  }
  50%,
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .caret,
  .kanban-card,
  .meet-tile,
  .noti-toast,
  .search-result,
  .ws-cursor {
    animation: none;
  }
}

.position-scene__description {
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
}

.position-scene__marker {
    display: block;
    margin-bottom: var(--space-5);
}

.position-scene__title {
    margin-bottom: var(--space-5);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: rgb(var(--ui-accent-rgb));
}

.position-index {
    font-size: clamp(160px, 28vw, 380px);
    opacity: 0.04;
    line-height: 1;
    padding-left: 4vw;
    font-weight: var(--font-weight-black);
}

.pos-panel-enter-active {
    transition:
        opacity var(--duration-scene) ease,
        transform var(--duration-scene) var(--ease-enter);
}
.pos-panel-leave-active {
    transition:
        opacity var(--duration-panel-leave) ease,
        transform var(--duration-panel-leave) ease;
}
.pos-panel-enter-from {
    opacity: 0;
    transform: translateY(28px);
}
.pos-panel-leave-to {
    opacity: 0;
    transform: translateY(-16px);
}

@media (min-width: 1024px) {
    .position-scene__title {
        font-size: var(--font-size-6xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-fade-enter-active,
    .feature-fade-leave-active,
    .pos-panel-enter-active,
    .pos-panel-leave-active,
    .feature-index.bg-index-enter-active,
    .feature-index.bg-index-leave-active,
    .showcase-dot::before {
        transition: none;
    }
}