/* ==========================================================================
   Melting button — local styles

   The comparison stage: the two specimens side by side, their headings,
   and the crunch captions. The buttons' own look and their melt keyframes
   live in buttons.css, which the homepage also borrows to draw the card
   miniature on its shelf. Everything global comes from styles/base.css
   and styles/tokens.css.
   ========================================================================== */

/* A centered comparison stage with room for the fixed back link. */
body {
  min-height: 100vh;  /* fallback for browsers without dvh */
  min-height: 100dvh; /* the VISIBLE viewport on mobile — 100vh includes
                         the space behind the retractable URL bar, which
                         pushed the stage below true center */
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-6) var(--space-6);
}

/* Mobile-first: the base is a single stacked column; the media query
   further down adds the side-by-side layout once there's room. */
.melt-comparison {
  width: min(320px, calc(100vw - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-7);
  align-items: start;
}

.melt-specimen {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 160px;
  row-gap: var(--space-5);
  text-align: center;
}

.melt-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

/* Model name and its thinking-effort level sit on one line;
   position: relative anchors the hover tooltip below. */
.melt-heading {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}

/* The thinking-effort annotation next to each model name — quiet lab
   metadata, so it uses the mono face at low opacity. */
.melt-effort {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  /* Quiet via the muted token, not via opacity: ink at 35% landed
     around 2.3:1 against the paper — under the 4.5:1 floor for
     13px text. --ink-muted is the same whisper, tuned in tokens.css
     to clear that floor in both themes. */
  color: var(--ink-muted);
  cursor: default; /* it's a hover trigger, not selectable prose */
  user-select: none;
  transition: color var(--speed-color) ease;
}

.melt-effort:hover {
  color: var(--ink);
}

/* Revealed under a heading while the cursor rests on its effort
   label. Starts slightly raised and transparent, then settles. */
.melt-crunch {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-muted);
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.melt-effort:hover + .melt-crunch,
.melt-heading.is-open .melt-crunch {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch screens have no hover, so there the effort label answers
   taps instead: a script below toggles .is-open on the heading, and
   a tap anywhere else closes it again. */

/* The label is one short mono word (~16px tall); the halo grows the
   tap target toward 44px without moving the heading's layout. The
   caption below is pointer-events: none, so the overlap is safe. */
.melt-effort {
  position: relative;
}

.melt-effort::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.melt-slot {
  height: 160px;
  display: grid;
  place-items: center;
}

/* Two columns side by side. row-gap from the base is harmless here:
   one row means it never applies. */
@media (min-width: 640px) {
  .melt-comparison {
    width: min(720px, calc(100vw - 64px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

/* --- Shared melt color ---------------------------------------------- */

:root {
  --melt: #7c3aed;
}

[data-theme="dark"] {
  --melt: #a78bfa;
}

/* --- Fable 5: preserved baseline ----------------------------------- */

.melt-button--fable.is-melting {
  position: relative;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    var(--melt) 90%,
    transparent
  );
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 0%;
  animation:
    infect 2s ease-in forwards,
    melt 0.8s ease-out 2.6s forwards;
}

@keyframes infect {
  70% {
    background-color: var(--accent);
  }
  100% {
    background-color: var(--melt);
    background-size: 100% 140%;
  }
}

@keyframes melt {
  to {
    opacity: 0;
  }
}

.melt-button--fable.is-melting::before,
.melt-button--fable.is-melting::after {
  content: "";
  position: absolute;
  top: 96%;
  width: 10px;
  height: 12px;
  border-radius: 50%;
  background: var(--melt);
  opacity: 0;
  animation: drip 1.1s ease-in forwards;
}

.melt-button--fable.is-melting::before {
  left: 22%;
  animation-delay: 1.7s;
}

.melt-button--fable.is-melting::after {
  left: 64%;
  animation-delay: 2s;
  animation-duration: 0.95s;
}

@keyframes drip {
  0% {
    opacity: 1;
    transform: translateY(-6px) scale(0.4);
  }
  70% {
    opacity: 1;
    transform: translateY(48px) scale(1, 1.6);
  }
  100% {
    opacity: 0;
    transform: translateY(84px) scale(0.7, 1.9);
  }
}

/* --- GPT-5.6 Sol: polished liquid shell ---------------------------- */

.melt-button--sol {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.melt-button--sol::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--accent);
  background-image: linear-gradient(
    to bottom,
    var(--melt) 0%,
    var(--melt) 88%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 0%;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.sol-label {
  position: relative;
  z-index: 2;
  transform-origin: center;
}

.sol-drop {
  position: absolute;
  top: calc(100% - 6px);
  z-index: 1;
  width: 6px;
  height: 11px;
  border-radius: 48% 52% 62% 58%;
  background: var(--melt);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 0%;
}

.sol-drop-left {
  left: 25%;
  width: 7px;
}

.sol-drop-right {
  right: 21%;
  width: 5px;
  height: 9px;
}

.melt-button--sol.is-melting,
.melt-button--sol.is-melting:hover,
.melt-button--sol.is-melting:active {
  background-color: transparent;
  border-color: transparent;
  pointer-events: none;
  transform: none;
  transition: none;
  animation: sol-lifecycle 2s linear forwards;
}

.melt-button--sol.is-melting::before {
  animation: sol-shell 2s cubic-bezier(0.2, 0, 0, 1) forwards;
  will-change: transform, opacity, filter;
}

.melt-button--sol.is-melting .sol-label {
  animation: sol-label 700ms cubic-bezier(0.2, 0, 0, 1) forwards;
  will-change: transform, opacity, filter;
}

.melt-button--sol.is-melting .sol-drop-left {
  animation:
    sol-drop-left 1s cubic-bezier(0.35, 0, 0.25, 1) 620ms forwards;
  will-change: transform, opacity, filter;
}

.melt-button--sol.is-melting .sol-drop-right {
  animation:
    sol-drop-right 850ms cubic-bezier(0.35, 0, 0.25, 1) 790ms forwards;
  will-change: transform, opacity, filter;
}

@keyframes sol-lifecycle {
  from,
  to {
    opacity: 1;
  }
}

@keyframes sol-shell {
  0% {
    background-color: var(--accent);
    background-size: 100% 0%;
    border-radius: var(--radius-md);
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  8% {
    background-size: 100% 14%;
    transform: translate3d(0, 1px, 0) scale(0.96);
  }
  18% {
    background-color: var(--accent);
    background-size: 100% 55%;
    border-radius: 10px 10px 12px 9px;
    transform: translate3d(0, 2px, 0) scaleX(0.99) scaleY(1.02);
  }
  34% {
    background-color: var(--melt);
    background-size: 100% 140%;
    border-radius: 9px 10px 15px 11px;
    transform: translate3d(0, 4px, 0) scaleX(0.97) scaleY(1.08);
  }
  52% {
    background-color: var(--melt);
    background-size: 100% 140%;
    border-radius: 8px 9px 18px 13px;
    transform: translate3d(-1px, 9px, 0) scaleX(0.9) scaleY(1.15);
  }
  68% {
    border-radius: 8px 10px 17px 14px;
    filter: blur(0.25px);
    opacity: 1;
    transform: translate3d(1px, 17px, 0) scaleX(0.76) scaleY(0.78);
  }
  82% {
    border-radius: 7px 9px 20px 16px;
    filter: blur(0.9px);
    opacity: 0.82;
    transform: translate3d(0, 25px, 0) scaleX(0.5) scaleY(0.4);
  }
  100% {
    background-color: var(--melt);
    border-radius: 999px;
    filter: blur(3px);
    opacity: 0;
    transform: translate3d(0, 32px, 0) scaleX(0.16) scaleY(0.08);
  }
}

@keyframes sol-label {
  0%,
  20% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  32% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(1px) scale(0.96);
  }
  64% {
    filter: blur(0.6px);
    opacity: 0.62;
    transform: translateY(2px) scale(0.95);
  }
  100% {
    filter: blur(2px);
    opacity: 0;
    transform: translateY(3px) scale(0.94);
  }
}

@keyframes sol-drop-left {
  0% {
    filter: blur(0);
    opacity: 0;
    transform: translateY(-4px) scale(0.45, 0.15);
  }
  12% {
    opacity: 1;
    transform: translateY(-2px) scale(0.55, 0.8);
  }
  46% {
    opacity: 1;
    transform: translateY(16px) scale(0.7, 1.7);
  }
  74% {
    filter: blur(0.25px);
    opacity: 0.84;
    transform: translateY(34px) scale(0.52, 1.15);
  }
  100% {
    filter: blur(1.5px);
    opacity: 0;
    transform: translateY(52px) scale(0.25, 0.45);
  }
}

@keyframes sol-drop-right {
  0% {
    filter: blur(0);
    opacity: 0;
    transform: translateY(-3px) scale(0.4, 0.2);
  }
  14% {
    opacity: 1;
    transform: translateY(-1px) scale(0.52, 0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(13px) scale(0.64, 1.5);
  }
  76% {
    filter: blur(0.2px);
    opacity: 0.8;
    transform: translateY(27px) scale(0.48, 1);
  }
  100% {
    filter: blur(1.25px);
    opacity: 0;
    transform: translateY(43px) scale(0.22, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .melt-button--fable.is-melting {
    animation-delay: 0ms, 0ms !important;
    animation-duration: 80ms, 80ms !important;
  }

  .melt-button--fable.is-melting::before,
  .melt-button--fable.is-melting::after {
    animation-delay: 0ms !important;
    animation-duration: 80ms !important;
  }

  .melt-button--sol.is-melting,
  .melt-button--sol.is-melting::before {
    animation-delay: 0ms !important;
    animation-duration: 80ms !important;
  }

  .melt-button--sol.is-melting .sol-label {
    animation-delay: 0ms !important;
    animation-duration: 60ms !important;
  }

  .melt-button--sol.is-melting .sol-drop {
    display: none;
  }
}