/* Subtle, cancellable motion for the existing liquid glass interface. */
:root {
  --motion-fast: 180ms;
  --motion-medium: 360ms;
  --motion-slow: 620ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* The first view tells its story once, then stays still. */
.liquid-sculpture { animation: none; }
.hero-copy h1 { animation: hero-enter var(--motion-slow) var(--motion-ease) both; }
.hero-description { animation: hero-enter var(--motion-slow) 90ms var(--motion-ease) both; }
.hero .actions { animation: hero-enter var(--motion-slow) 170ms var(--motion-ease) both; }
.hero-art { animation: art-enter 760ms 90ms var(--motion-ease) both; }
.model-float { animation: float-card-enter 680ms var(--motion-ease) both; }
.float-claude { animation-delay: 300ms; }
.float-gpt { animation-delay: 420ms; }
.float-gemini { animation-delay: 540ms; }
.float-kimi { animation-delay: 660ms; }
.float-glm { animation-delay: 780ms; }
.float-claude { --card-tilt: -7deg; }
.float-gpt { --card-tilt: 7deg; }
.float-gemini { --card-tilt: -5deg; }
.float-kimi { --card-tilt: 5deg; }
.float-glm { --card-tilt: -4deg; }
.model-float {
  overflow: hidden;
  isolation: isolate;
  transition: transform 540ms var(--motion-ease),
              box-shadow 520ms ease,
              background-color 520ms ease;
}
.model-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .65) 50%, transparent 78%);
  transform: translateX(-110%);
  transition: transform 760ms var(--motion-ease);
}
.model-float > img, .model-float > div { position: relative; z-index: 1; }
.model-float img { transition: transform 540ms var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .model-float:hover {
    transform: translateY(-4px) rotate(var(--card-tilt)) scale(1.018);
    background-color: rgba(255, 255, 255, .76);
    box-shadow: 0 19px 38px rgba(51, 62, 85, .15), inset 0 1px 0 #fff;
  }
  .model-float:hover::before { transform: translateX(110%); }
  .model-float:hover img { transform: scale(1.045); }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes art-enter {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float-card-enter {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* JavaScript marks only offscreen content, so the page stays readable without it. */
.motion-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-medium) ease-out,
              transform var(--motion-medium) var(--motion-ease);
}
.motion-pending.motion-visible { opacity: 1; transform: translateY(0); }

/* Small responses communicate interaction without moving the layout. */
.button, .price-card, .model-card {
  transition: transform 240ms var(--motion-ease),
              box-shadow 240ms ease,
              background-color var(--motion-fast) ease,
              border-color var(--motion-fast) ease;
}
.button.dark:hover { background: #343b49; }
.button > span:last-child:not(:first-child) { display: inline-block; transition: transform var(--motion-fast) var(--motion-ease); }
.button:hover > span:last-child:not(:first-child),
.price-card:hover .button > span:last-child:not(:first-child) { transform: translate(3px, -3px); }
.price-card:hover, .price-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(37, 45, 62, .14), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.model-card:hover, .model-card:focus-visible { transform: translateY(-4px); }
.segmented button, .calc-presets button {
  transition: background-color var(--motion-fast) ease,
              color var(--motion-fast) ease,
              box-shadow var(--motion-fast) ease,
              transform var(--motion-fast) var(--motion-ease);
}
.segmented button:active, .calc-presets button:active { transform: scale(.97); }
.header nav a {
  border-radius: 12px;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.header nav a:hover, .header nav a:focus-visible {
  color: var(--foreground);
  background-color: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96),
              0 4px 14px rgba(51, 62, 85, .08),
              0 0 0 1px rgba(255, 255, 255, .62);
}
@media (min-width: 901px) {
  .header nav a { padding-inline: 9px; margin-inline: -9px; }
}
input[type="range"]::-webkit-slider-thumb { transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease; }
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.13); box-shadow: 0 3px 12px rgba(37, 45, 62, .22); }

/* Catalog motion runs only while the catalog is visible. */
.model-marquee > div { animation-play-state: paused; }
.model-marquee.is-in-view > div { animation-play-state: running; }
.model-marquee:hover > div { animation-play-state: paused; }

@media (max-width: 900px) {
  .header nav.open { animation: menu-enter 240ms var(--motion-ease) both; }
  @keyframes menu-enter {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (max-width: 600px) {
  .hero-art { animation-duration: 620ms; }
  .model-float { animation-duration: 560ms; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-pending { opacity: 1 !important; transform: none !important; }
  .model-marquee > div { animation-play-state: paused !important; }
  .model-float::before { display: none; }
  .model-float:hover { transform: rotate(var(--card-tilt)) !important; }
  .model-float:hover img { transform: none !important; }
}