@keyframes comparison-stamp-slam {
    0% {
        opacity: 0;
        scale: 2.2;
        rotate: -26deg;
    }

    55% {
        opacity: 1;
        scale: 0.93;
        rotate: -11deg;
    }

    72% {
        scale: 1.05;
    }

    100% {
        opacity: 1;
        scale: 1;
        rotate: -11deg;
    }
}

@layer components {
    .comparison-duel {
        display: grid;
        gap: var(--space-m);

        & .comparison-duel__criterion {
            font-size: 1.05rem;
            margin: 0 0 var(--space-2xs);
        }

        & .comparison-duel__panes {
            display: grid;
            /* Side by side while both panes still fit a readable measure, stacked below that —
               never a horizontal scrollbar, which is what hid the right-hand column on a phone. */
            grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
            gap: var(--space-xs);
            align-items: stretch;
        }

        & .comparison-duel__pane {
            position: relative;
            display: flex;
            align-items: start;
            gap: var(--space-xs);
            padding: var(--space-s);
            border-radius: var(--radius-m);
        }

        & .comparison-duel__mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: var(--radius-full);
        }

        & .comparison-duel__mark-glyph {
            width: 1rem;
            height: 1rem;
        }

        & .comparison-duel__body > * {
            margin: 0;
        }

        & .comparison-duel__caption {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.75;
        }

        & .comparison-duel__value {
            margin-block-start: var(--space-3xs);
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.25;
        }

        & .comparison-duel__note {
            margin-block-start: var(--space-3xs);
            font-size: 0.9rem;
            line-height: 1.45;
            opacity: 0.8;
        }

        /* The losing side recedes: muted surface, muted text, no emphasis. */
        & .comparison-duel__pane[data-side="market"] {
            background: var(--color-surface-mixed);
            color: var(--color-text-muted);
            border: 1px solid var(--color-border);
            /* Clips the stamp while it's still oversized at the start of the slam — otherwise
               it would sweep across the neighbouring pane on its way down. */
            overflow: hidden;

            & .comparison-duel__mark {
                background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
                color: var(--color-text-muted);
            }
        }

        /* The winning side carries the brand tint — skim only these and you get the pitch. */
        & .comparison-duel__pane[data-side="license"] {
            background: var(--gradient-brand-soft);
            color: var(--color-accent-strong);
            border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);

            & .comparison-duel__mark {
                background: var(--gradient-brand-strong);
                color: var(--color-on-brand);
                box-shadow: var(--shadow-s);
            }
        }

        & .comparison-duel__stamp {
            position: absolute;
            /* Tucked into the corner rather than inside the padding box: it then clears the
               copy on most rows, and where a note does run long the overlap reads as a stamp
               pressed over the edge of the page. */
            right: var(--space-2xs);
            bottom: var(--space-2xs);
            pointer-events: none;
            padding: 0.2em 0.6em;
            border: 3px solid currentColor;
            border-radius: var(--radius-s);
            color: var(--color-negative);
            /* The stamp lands on top of the fine print, so it carries the pane's own surface
               colour — ink on paper, rather than two texts tangled together. */
            background: color-mix(in srgb, var(--color-surface-mixed) 92%, transparent);
            backdrop-filter: blur(2px);
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: nowrap;
            opacity: 0;
            rotate: -11deg;
        }
    }

    /* The whole "stamp + grow" reaction is motion, so it's opt-out for anyone who asked the OS
       for less of it — under `prefers-reduced-motion` the panes simply stay as they are. */
    @media (prefers-reduced-motion: no-preference) {
        .comparison-duel__pane {
            transition: scale 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
        }

        /* `:hover` is the desktop trigger; `.is-active` is added by ComparisonDuel_controller.js
           on touch devices once the row scrolls into the middle of the viewport. */
        .comparison-duel__row:hover,
        .comparison-duel__row.is-active {
            & .comparison-duel__stamp {
                animation: comparison-stamp-slam 0.45s var(--ease-out) forwards;
            }

            & .comparison-duel__pane[data-side="market"] {
                scale: 0.985;
            }

            & .comparison-duel__pane[data-side="license"] {
                /* Small on purpose: the growth has to stay inside the grid gap, or the pane
                   would climb over its neighbour. */
                scale: 1.035;
                z-index: 1;
                box-shadow: var(--shadow-m);
                border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
            }
        }
    }
}