/* mixlink site — scroll reveals, hero motion, micro-interactions */

:root {
  --anim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-duration: 0.72s;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero ambient glow */
  .hero,
  .dev-hero,
  .marketplace-stage {
    position: relative;
    isolation: isolate;
  }

  .hero::before,
  .hero::after,
  .dev-hero::before,
  .dev-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.42;
  }

  .hero::before,
  .dev-hero::before {
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    top: -18%;
    right: -12%;
    background: radial-gradient(circle, rgba(232, 224, 212, 0.22) 0%, transparent 68%);
    animation: site-blob-a 14s ease-in-out infinite alternate;
  }

  .hero::after,
  .dev-hero::after {
    width: min(380px, 70vw);
    height: min(380px, 70vw);
    bottom: -8%;
    left: -10%;
    background: radial-gradient(circle, rgba(120, 120, 120, 0.16) 0%, transparent 70%);
    animation: site-blob-b 11s ease-in-out infinite alternate;
  }

  html.agent-day .hero::before,
  html.agent-day .dev-hero::before {
    background: radial-gradient(circle, rgba(200, 170, 130, 0.28) 0%, transparent 68%);
    opacity: 0.55;
  }

  html.agent-day .hero::after,
  html.agent-day .dev-hero::after {
    background: radial-gradient(circle, rgba(180, 160, 130, 0.18) 0%, transparent 70%);
  }

  .hero__inner,
  .dev-hero > .wrap,
  .marketplace-stage > .marketplace-hero,
  .marketplace-stage > .search-container {
    position: relative;
    z-index: 1;
  }

  @keyframes site-blob-a {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-28px, 22px) scale(1.08); }
  }

  @keyframes site-blob-b {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(24px, -18px) scale(1.06); }
  }

  /* Scroll / load reveal */
  html.site-anim-pending [data-anim],
  html.site-anim-ready [data-anim]:not(.is-in) {
    opacity: 0;
    will-change: opacity, transform;
  }

  html.site-anim-ready [data-anim="fade-up"] {
    transform: translateY(28px);
  }

  html.site-anim-ready [data-anim="fade-left"] {
    transform: translateX(-32px);
  }

  html.site-anim-ready [data-anim="fade-right"] {
    transform: translateX(32px);
  }

  html.site-anim-ready [data-anim="scale-in"] {
    transform: scale(0.94);
  }

  html.site-anim-ready [data-anim="clip-up"] {
    transform: translateY(36px);
    filter: blur(4px);
  }

  html.site-anim-ready [data-anim="hero-in"] {
    transform: translateY(22px);
  }

  html.site-anim-ready [data-anim].is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
      opacity var(--anim-duration) var(--anim-ease-out),
      transform var(--anim-duration) var(--anim-ease-out),
      filter var(--anim-duration) var(--anim-ease-out);
    transition-delay: var(--anim-delay, 0ms);
  }

  html.site-anim-ready .marketplace-stage > .pwa-pill[data-anim],
  html.site-anim-ready .marketplace-stage > .pwa-pill[data-anim].is-in {
    transform: none;
  }

  /* Hero entrance — faster, springy */
  html.site-anim-ready [data-anim="hero-in"].is-in {
    transition-duration: 0.85s;
    transition-timing-function: var(--anim-ease-spring);
  }

  /* Discover chapters — spotlight + staggered children */
  .discover-chapters {
    --discover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .discover-chapter__inner {
    transition:
      opacity 0.7s var(--discover-ease),
      transform 0.7s var(--discover-ease) !important;
  }

  .discover-chapter:not(.is-in) .discover-chapter__inner {
    transform: translateY(36px) !important;
  }

  .discover-chapter.is-in .discover-chapter__inner {
    transform: translateY(0) !important;
  }

  @keyframes discover-rise {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes discover-num {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.82);
      letter-spacing: 0.28em;
      color: var(--text-secondary);
    }
    to {
      opacity: 1;
      transform: none;
      letter-spacing: 0.08em;
      color: var(--bone);
    }
  }

  .discover-chapter.is-in .discover-chapter__inner > h2 {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.04s;
  }

  .discover-chapter.is-in .discover-chapter__inner > .discover__lead {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.14s;
  }

  .discover-chapter.is-in .discover-chapter__inner > .discover__link {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.26s;
  }

  .discover-chapter.is-in .discover-beat .step__n {
    animation: discover-num 0.8s var(--discover-ease) both;
    animation-delay: 0.05s;
  }

  .discover-chapter.is-in .discover-beat h3 {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.16s;
  }

  .discover-chapter.is-in .discover-beat p {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.28s;
  }

  .discover-chapter.is-in .llms-block__lead {
    animation: discover-rise 0.72s var(--discover-ease) both;
    animation-delay: 0.08s;
  }

  .discover-chapter.is-in .llms-preview {
    animation: discover-rise 0.75s var(--discover-ease) both;
    animation-delay: 0.2s;
  }

  /* Side progress rail (desktop) — hidden until discover owns the viewport */
  .discover-progress {
    display: block;
    position: sticky;
    top: calc(50vh - 52px);
    float: right;
    z-index: 5;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.28s var(--discover-ease, ease),
      visibility 0.28s var(--discover-ease, ease);
  }

  .discover-progress.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .discover-progress__track {
    position: absolute;
    right: max(16px, calc((100vw - var(--wrap)) / 2 - 32px));
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    pointer-events: none;
  }

  .discover-progress.is-visible .discover-progress__track {
    pointer-events: auto;
  }

  .discover-progress__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(232, 224, 212, 0.35);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition:
      transform 0.3s var(--discover-ease),
      background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .discover-progress__dot.is-on {
    background: var(--bone);
    border-color: var(--bone);
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(232, 224, 212, 0.12);
  }

  .discover-progress__dot:hover {
    border-color: var(--bone);
  }

  html.agent-day .discover-progress__dot {
    border-color: rgba(22, 20, 17, 0.28);
  }

  html.agent-day .discover-progress__dot.is-on {
    background: #161411;
    border-color: #161411;
    box-shadow: 0 0 0 4px rgba(22, 20, 17, 0.08);
  }

  @media (max-width: 900px) {
    .discover-progress {
      display: none;
    }
  }

  /* Chat messages */
  @keyframes msg-pop {
    0% {
      opacity: 0;
      transform: translateY(10px) scale(0.94);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .msg.msg--in {
    animation: msg-pop 0.48s var(--anim-ease-spring) both;
  }

  .msg.user.msg--in {
    animation-name: msg-pop-user;
  }

  @keyframes msg-pop-user {
    0% {
      opacity: 0;
      transform: translateY(10px) translateX(8px) scale(0.94);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  /* Cards */
  .card.is-in,
  .marketplace-card.is-in {
    will-change: transform;
  }

  .card {
    transition:
      transform 0.38s var(--anim-ease-out),
      border-color 0.2s ease,
      box-shadow 0.38s var(--anim-ease-out);
  }

  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38);
  }

  .card__img img {
    transition: transform 0.55s var(--anim-ease-out);
  }

  .card:hover .card__img img {
    transform: scale(1.06);
  }

  /* Steps — number glow on reveal */
  .step.is-in .step__n {
    animation: step-glow 0.9s var(--anim-ease-out) both;
  }

  @keyframes step-glow {
    0% {
      color: var(--text-secondary);
      letter-spacing: 0.08em;
    }
    40% {
      color: var(--bone);
      letter-spacing: 0.14em;
    }
    100% {
      color: var(--text-secondary);
      letter-spacing: 0.08em;
    }
  }

  /* Audience rows — underline draw */
  .audience-row {
    position: relative;
  }

  .audience-row::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--bone) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.75s var(--anim-ease-out);
    transition-delay: var(--anim-delay, 0ms);
    opacity: 0.35;
  }

  .audience-row.is-in::after {
    transform: scaleX(1);
  }

  /* OSS block */
  .oss__pop {
    animation: oss-float 5s ease-in-out infinite;
  }

  @keyframes oss-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-3deg); }
  }

  .oss__actions .btn .oss__arrow svg {
    transition: transform 0.28s var(--anim-ease-out);
  }

  .oss__actions .btn:hover .oss__arrow svg {
    transform: translateX(4px);
  }

  /* Dev IDE — subtle scan on reveal */
  .dev-ide.is-in {
    animation: ide-glow-in 1.1s var(--anim-ease-out) both;
  }

  @keyframes ide-glow-in {
    0% {
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    }
    50% {
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(232, 224, 212, 0.12),
        0 0 48px rgba(232, 224, 212, 0.06);
    }
    100% {
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    }
  }

  .dev-ide.is-in .dev-ide__dots {
    animation: ide-dots-pop 0.6s var(--anim-ease-spring) 0.2s both;
  }

  @keyframes ide-dots-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: none; opacity: 1; }
  }

  /* Buttons & links */
  .btn,
  .claim__submit,
  .hero-ask__send,
  .nav-button.active {
    --mx: 0px;
    --my: 0px;
    transform: translate3d(var(--mx), var(--my), 0);
    transition:
      background 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease,
      transform 0.18s var(--anim-ease-out),
      box-shadow 0.18s ease;
  }

  .btn:hover,
  .claim__submit:hover,
  .hero-ask__send:hover,
  .nav-button.active:hover {
    transform: translate3d(var(--mx), var(--my), 0) translateY(-1px);
  }

  .btn:active,
  .claim__submit:active,
  .hero-ask__send:active,
  .nav-button.active:active {
    transform: translate3d(var(--mx), var(--my), 0) scale(0.97);
  }

  .discover__link {
    position: relative;
    transition: color 0.2s ease;
  }

  .discover__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--anim-ease-out);
  }

  .discover__link:hover::after {
    transform: scaleX(1);
  }

  /* Hero ask — focus pulse */
  .hero-ask__field {
    transition:
      border-color 0.25s ease,
      box-shadow 0.35s var(--anim-ease-out);
  }

  .hero-ask__field:focus-within {
    box-shadow: 0 0 0 1px rgba(232, 224, 212, 0.18), 0 12px 40px rgba(0, 0, 0, 0.28);
  }

  html.agent-day .hero-ask__field:focus-within {
    box-shadow: 0 0 0 1px rgba(22, 20, 17, 0.12), 0 12px 36px rgba(22, 20, 17, 0.08);
  }

  /* LLMS preview — code shimmer on hover */
  .llms-preview {
    transition:
      border-color 0.25s ease,
      transform 0.35s var(--anim-ease-out),
      box-shadow 0.35s var(--anim-ease-out);
  }

  .llms-preview:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  }

  /* Marketplace hero stagger */
  .marketplace-stage.is-in .scroll-hint {
    animation: scroll-hint-in 0.8s var(--anim-ease-out) 0.5s both;
  }

  @keyframes scroll-hint-in {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(12px);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  /* Top scroll progress */
  .site-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    height: 2px;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, rgba(232, 224, 212, 0.15), var(--bone, #e8e0d4));
    pointer-events: none;
  }

  html.agent-day .site-scroll-progress {
    background: linear-gradient(90deg, rgba(22, 20, 17, 0.12), #161411);
  }

  /* Nav entrance */
  .nav.nav--anim {
    transition: transform 0.7s var(--anim-ease-out), opacity 0.7s var(--anim-ease-out);
  }

  html.site-anim-ready:not(.nav-is-in) .nav.nav--anim {
    opacity: 0;
    transform: translateY(-10px);
  }

  html.nav-is-in .nav.nav--anim {
    opacity: 1;
    transform: none;
  }

  .nav__link,
  .nav-drawer-link,
  .site-foot__links a,
  .footer__links a {
    position: relative;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .nav__link::after,
  .site-foot__links a::after,
  .footer__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--anim-ease-out);
    opacity: 0.55;
  }

  .nav__link:hover::after,
  .site-foot__links a:hover::after,
  .footer__links a:hover::after {
    transform: scaleX(1);
  }

  /* Magnetic buttons — JS sets --mx/--my; base styles live with Buttons & links above */

  /* Dev cards — soft lift */
  .dev-card.is-in {
    transition:
      opacity var(--anim-duration) var(--anim-ease-out),
      transform var(--anim-duration) var(--anim-ease-out),
      filter var(--anim-duration) var(--anim-ease-out),
      border-color 0.25s ease,
      box-shadow 0.35s var(--anim-ease-out);
  }

  .dev-card.is-in:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  }

  .dev-roadmap__card.is-in {
    transition:
      opacity var(--anim-duration) var(--anim-ease-out),
      transform var(--anim-duration) var(--anim-ease-out),
      border-color 0.25s ease,
      box-shadow 0.4s var(--anim-ease-out);
  }

  .dev-roadmap__card.is-in:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36);
  }

  /* LLMS preview — soft code shimmer */
  .llms-preview__body {
    position: relative;
  }

  .llms-preview:hover .llms-preview__body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      110deg,
      transparent 30%,
      rgba(232, 224, 212, 0.08) 48%,
      transparent 66%
    );
    transform: translateX(-120%);
    animation: llms-shimmer 1.1s var(--anim-ease-out) both;
    pointer-events: none;
  }

  @keyframes llms-shimmer {
    to { transform: translateX(120%); }
  }

  /* Docs page */
  .docs-page .docs__link {
    transition: color 0.2s ease, background 0.2s ease, transform 0.25s var(--anim-ease-out);
  }

  .docs-page .docs__link:hover {
    transform: translateX(3px);
  }

  .docs-page .docs__page-link {
    transition:
      transform 0.3s var(--anim-ease-out),
      border-color 0.2s ease,
      box-shadow 0.3s var(--anim-ease-out);
  }

  .docs-page .docs__page-link:hover {
    transform: translateY(-2px);
  }

  .docs-page .docs-prose pre.is-in {
    box-shadow: 0 0 0 1px rgba(232, 224, 212, 0.06);
  }

  /* Marketplace cards */
  .marketplace-card {
    transition:
      transform 0.35s var(--anim-ease-out),
      border-color 0.2s ease,
      box-shadow 0.35s var(--anim-ease-out);
  }

  .marketplace-card.is-in:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  }

  /* Announce bar soft slide */
  .announce {
    animation: announce-in 0.55s var(--anim-ease-out) both;
  }

  @keyframes announce-in {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Nav logo — subtle hover */
  .logo:hover,
  .nav-logo .logo-text:hover,
  .site-foot__brand:hover {
    opacity: 0.82;
    transition: opacity 0.2s ease;
  }

  /*
   * Safety net: if IntersectionObserver never fires, still show content.
   * Off-screen blocks become visible in DOM — no visual flash until scroll.
   */
  html.site-anim-ready [data-anim]:not(.is-in),
  html.site-anim-ready .discover-chapter:not(.is-in) .discover-chapter__inner {
    animation: site-anim-safety 0.01s 4.5s forwards;
  }

  @keyframes site-anim-safety {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* --- No-JS / scripting disabled --- */
@media (scripting: none) {
  [data-anim],
  .discover-chapter__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

html:not(.site-anim-ready) [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .dev-hero::before,
  .dev-hero::after,
  .oss__pop,
  .msg.msg--in,
  .announce,
  .llms-preview:hover .llms-preview__body::after,
  .discover-chapter.is-in .discover-chapter__inner > h2,
  .discover-chapter.is-in .discover-chapter__inner > .discover__lead,
  .discover-chapter.is-in .discover-chapter__inner > .discover__link,
  .discover-chapter.is-in .discover-beat .step__n,
  .discover-chapter.is-in .discover-beat h3,
  .discover-chapter.is-in .discover-beat p,
  .discover-chapter.is-in .llms-block__lead,
  .discover-chapter.is-in .llms-preview {
    animation: none !important;
  }

  .discover-progress,
  .site-scroll-progress {
    display: none !important;
  }

  html:has([data-discover-chapters]) {
    scroll-snap-type: none !important;
  }

  .discover-chapter {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  .discover-chapter__inner {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  html.site-anim-pending [data-anim],
  html.site-anim-ready [data-anim],
  html.site-anim-ready [data-anim]:not(.is-in),
  html.site-anim-ready .discover-chapter:not(.is-in) .discover-chapter__inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .card:hover,
  .marketplace-card:hover,
  .marketplace-card.is-in:hover,
  .llms-preview:hover,
  .dev-card.is-in:hover,
  .dev-roadmap__card.is-in:hover,
  .btn:hover,
  .claim__submit:hover,
  .hero-ask__send:hover {
    transform: none;
  }
}