/* Lightweight home motion: CSS-first, IntersectionObserver-enhanced. */

.home-motion-enabled .home-header {
    animation: home-header-enter 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition:
        box-shadow 220ms ease,
        background-color 220ms ease,
        backdrop-filter 220ms ease;
}

.home-header.is-scrolled {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(18px);
}

.home-launch::before {
    position: absolute;
    top: -4.5rem;
    right: -4rem;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.72), transparent 22%),
        rgba(125, 211, 252, 0.12);
    content: "";
    pointer-events: none;
    animation: home-orb-drift 8s ease-in-out infinite alternate;
}

.home-motion-enabled .home-launch-copy > * {
    opacity: 0;
    transform: translateY(14px);
}

.home-motion-ready .home-launch-kicker {
    animation: home-intro-up 0.48s 60ms ease-out both;
}

.home-motion-ready .home-launch h1 {
    animation: home-intro-up 0.58s 130ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-motion-ready .home-launch-copy p:last-child {
    animation: home-intro-up 0.52s 220ms ease-out both;
}

.home-motion-enabled .quick-action {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
}

.home-motion-ready .quick-action:nth-child(1) {
    animation: home-action-pop 0.58s 280ms cubic-bezier(0.2, 0.85, 0.2, 1.2) both;
}

.home-motion-ready .quick-action:nth-child(2) {
    animation: home-action-pop 0.58s 350ms cubic-bezier(0.2, 0.85, 0.2, 1.2) both;
}

.home-motion-ready .quick-action:nth-child(3) {
    animation: home-action-pop 0.58s 420ms cubic-bezier(0.2, 0.85, 0.2, 1.2) both;
}

.quick-action-circle {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.quick-action-circle::after {
    position: absolute;
    inset: -30%;
    z-index: -1;
    background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.34) 48%, transparent 62%);
    content: "";
    pointer-events: none;
    transform: translateX(-85%) rotate(8deg);
}

.home-motion-ready .quick-action:nth-child(1) .quick-action-circle::after {
    animation: home-action-shine 0.9s 650ms ease-out both;
}

.home-motion-ready .quick-action:nth-child(2) .quick-action-circle::after {
    animation: home-action-shine 0.9s 730ms ease-out both;
}

.home-motion-ready .quick-action:nth-child(3) .quick-action-circle::after {
    animation: home-action-shine 0.9s 810ms ease-out both;
}

.home-motion-enabled .home-motion-item {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.56s ease var(--home-motion-delay, 0ms),
        transform 0.56s cubic-bezier(0.2, 0.8, 0.2, 1) var(--home-motion-delay, 0ms);
}

.home-motion-enabled .home-motion-item[data-motion="up"] {
    transform: translateY(22px);
}

.home-motion-enabled .home-motion-item[data-motion="scale"] {
    transform: translateY(12px) scale(0.965);
}

.home-motion-enabled .home-motion-item[data-motion="pop"] {
    transform: translateY(16px) scale(0.92);
}

.home-motion-enabled .home-motion-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

.home-section-heading-copy .home-section-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-section-heading-copy .home-section-eyebrow::before {
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transition: width 0.42s 0.2s ease;
}

.home-section-heading.is-visible .home-section-eyebrow::before {
    width: 18px;
}

.podium-card,
.home-tip-card,
.developer-card,
.video-container {
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.podium-card.is-rank-1.is-visible {
    animation: home-winner-glow 3.4s 0.65s ease-in-out infinite;
}

.podium-rank,
.my-rank-position {
    transition: transform 220ms ease;
}

.home-tip-media img,
.developer-photo {
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-category-chip {
    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        color 170ms ease,
        background-color 170ms ease;
}

.home-category-chip:active {
    transform: scale(0.95);
}

.home-slider-button {
    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease;
}

.home-slider-button:active {
    transform: scale(0.9);
}

.tip-detail-overlay:not([hidden]) {
    animation: home-overlay-in 0.22s ease-out both;
}

.tip-detail-overlay:not([hidden]) .tip-detail-dialog {
    animation: home-dialog-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-capture-workspace:not([hidden]) {
    transform-origin: top center;
    animation: home-workspace-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.system-status-badge-bottom {
    transition:
        transform 220ms ease,
        color 220ms ease,
        background-color 220ms ease;
}

.toast-container.show {
    animation: home-toast-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (hover: hover) and (pointer: fine) {
    .quick-action:hover .quick-action-circle {
        transform: translateY(-5px) scale(1.035);
    }

    .podium-card:hover,
    .home-tip-card:hover,
    .developer-card:hover {
        border-color: rgba(59, 130, 246, 0.26);
        transform: translateY(-5px);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    }

    .home-tip-card:hover .home-tip-media img,
    .developer-card:hover .developer-photo {
        transform: scale(1.035);
    }

    .podium-card:hover .podium-rank,
    .my-rank-card:hover .my-rank-position {
        transform: scale(1.08) rotate(-3deg);
    }

    .home-category-chip:hover,
    .home-slider-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 20px rgba(15, 23, 42, 0.1);
    }

    .video-container:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
    }
}

@keyframes home-header-enter {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-intro-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-action-pop {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }
    72% {
        opacity: 1;
        transform: translateY(-3px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes home-action-shine {
    to {
        transform: translateX(85%) rotate(8deg);
    }
}

@keyframes home-orb-drift {
    to {
        transform: translate3d(-20px, 24px, 0) scale(1.12);
    }
}

@keyframes home-winner-glow {
    0%, 100% {
        box-shadow: 0 14px 34px rgba(245, 158, 11, 0.13);
    }
    50% {
        box-shadow: 0 17px 42px rgba(245, 158, 11, 0.24);
    }
}

@keyframes home-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes home-dialog-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes home-workspace-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes home-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-motion-enabled .home-header,
    .home-launch::before,
    .home-motion-enabled .home-launch-copy > *,
    .home-motion-enabled .quick-action,
    .quick-action-circle::after,
    .home-motion-enabled .home-motion-item,
    .podium-card.is-rank-1.is-visible,
    .tip-detail-overlay:not([hidden]),
    .tip-detail-overlay:not([hidden]) .tip-detail-dialog,
    .home-capture-workspace:not([hidden]),
    .toast-container.show {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition-duration: 0.01ms !important;
    }

    .home-section-heading-copy .home-section-eyebrow::before {
        width: 18px;
        transition: none;
    }
}