/* ============================================================
   Sledge Distortion — product page
   Scoped entirely under .distortion-page so it never leaks into
   the main site stylesheet.
   ============================================================ */

.distortion-page {
    /* Layout */
    --dx-max: 1120px;
    --dx-gutter: clamp(1.25rem, 5vw, 4rem);
    --dx-band-y: clamp(3.5rem, 8vw, 7rem);

    /* Surfaces */
    --dx-ink: rgb(5, 5, 5);
    --dx-panel: rgb(17, 17, 17);
    --dx-panel-2: rgb(11, 11, 11);
    --dx-line: rgba(255, 255, 255, 0.08);
    --dx-line-lit: rgba(204, 0, 0, 0.45);

    background: var(--dx-ink);
    color: var(--light-text);
    letter-spacing: 0;
    overflow-x: hidden;
}

.distortion-page :where(h1, h2, h3, p) {
    letter-spacing: 0;
}

/* Shared centred column ------------------------------------- */
.dx-inner {
    width: 100%;
    max-width: var(--dx-max);
    margin-inline: auto;
}

/* Links inside body copy — the browser default blue/purple
   clashes badly with the red/silver palette. */
.distortion-page main a:not(.distortion-cta) {
    color: var(--light-text);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.distortion-page main a:not(.distortion-cta):hover {
    color: var(--primary-color);
}

.distortion-page :focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.dx-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color);
    color: var(--light-text);
    font-weight: 700;
    text-decoration: none;
}

.dx-skip:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/* Nav -------------------------------------------------------- */
/* The bar stays off-screen over the hero — the hero carries the same
   "Get the plugin" button, so a second one up here would just be the
   same CTA twice in one view. JS slides it down once that hero button
   scrolls past the top. Hidden state is gated on .dx-js (set before
   paint) so a no-JS visitor gets a plain, always-visible bar. */
.distortion-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0.4rem var(--dx-gutter);
    /* Solid, not translucent: the old blur smeared scrolling content
       into a grey haze behind the bar on a near-black page. */
    background: rgb(5, 5, 5);
    border-bottom: 1px solid var(--dx-line);
}

.dx-js .distortion-nav {
    transform: translateY(-100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.dx-js .distortion-nav.is-visible {
    transform: translateY(0);
}

/* 1fr auto 1fr keeps the CTA centred on the bar itself, whatever the
   side items weigh — including at ≤600px where the links are hidden. */
.dx-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.dx-nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 36px;
    height: 36px;
    border: 1px solid var(--dx-line);
    border-radius: 50%;
    color: var(--silver-text);
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background var(--transition-fast);
}

.dx-nav-back:hover {
    border-color: var(--dx-line-lit);
    background: rgba(204, 0, 0, 0.1);
    color: var(--light-text);
}

.dx-nav-links {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: clamp(0.75rem, 2.5vw, 1.75rem);
}

.distortion-nav :where(a),
.distortion-footer :where(a) {
    color: var(--silver-text);
    text-decoration: none;
}

.distortion-nav-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.distortion-nav-link:hover,
.distortion-footer a:hover {
    color: var(--primary-color);
}

.dx-nav-cta {
    justify-self: center;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--dx-line-lit);
    border-radius: var(--radius-full);
    color: var(--light-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dx-nav-cta:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Hero ------------------------------------------------------- */
.distortion-hero {
    position: relative;
    isolation: isolate;
    /* No bar overhead on arrival any more, so the hero no longer has to
       reserve room for one. */
    padding: clamp(3.5rem, 9vh, 5.5rem) var(--dx-gutter) clamp(4rem, 9vh, 7rem);
    border-bottom: 1px solid var(--dx-line);
    overflow: hidden;
}

/* Background stack: photo, red bloom, and a faint scope grid. */
.dx-hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* distortion-bg.png was a 227 KB solid-black image (all channels 0-3,
       fully opaque) sitting under a 94%-opaque black gradient, so it could
       never be seen. Dropped for a flat base colour. */
    background:
        radial-gradient(60% 70% at 78% 40%, rgba(204, 0, 0, 0.28) 0%, transparent 70%),
        linear-gradient(100deg, rgb(0, 0, 0) 0%, rgb(7, 7, 7) 45%, rgb(14, 14, 14) 100%);
}

.dx-hero-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(204, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 0, 0, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 70% at 50% 40%, rgb(0, 0, 0) 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, rgb(0, 0, 0) 0%, transparent 100%);
}

.dx-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.distortion-hero-copy,
.distortion-product-shot {
    min-width: 0;
}

.distortion-kicker,
.distortion-price {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--silver-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dx-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.9);
    animation: dx-pulse 2.4s ease-in-out infinite;
}

@keyframes dx-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.distortion-hero h1 {
    margin: 1.1rem 0 1.25rem;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.94;
    color: var(--light-text);
    text-wrap: balance;
}

.dx-h1-accent {
    color: var(--primary-color);
    text-shadow: var(--shadow-glow-red-lg);
}

.distortion-hero h1::after {
    content: "";
    display: block;
    width: 84px;
    height: 3px;
    margin-top: 1.5rem;
    background: var(--gradient-1);
    box-shadow: var(--shadow-glow-red);
}

.distortion-tagline {
    max-width: 46ch;
    color: var(--silver-text);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.dx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.dx-chips li {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--dx-line);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    color: var(--silver-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dx-chips .dx-chip-accent {
    border-color: var(--dx-line-lit);
    background: rgba(204, 0, 0, 0.12);
    color: var(--light-text);
}

.distortion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-top: 2rem;
}

.distortion-price {
    margin-top: 1rem;
    font-size: var(--font-size-xs);
}

.distortion-cta {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: var(--light-text);
    box-shadow: var(--shadow-glow-red);
    font-weight: 800;
    font-size: var(--font-size-base);
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), background var(--transition-fast),
                box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.distortion-cta:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-red-lg);
}

.distortion-cta:active {
    transform: translateY(0);
}

.distortion-cta.is-disabled {
    cursor: not-allowed;
    background: rgb(76, 76, 76);
    box-shadow: none;
    transform: none;
}

/* Product shot ---------------------------------------------- */
/* No plate around the shot — the screenshot already has its own dark
   bezel, so a second frame around it read as a grey glassy border. The
   depth and the red bloom move onto the image itself. */
.distortion-product-shot {
    position: relative;
    margin: 0;
}

.distortion-product-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: contain;
    box-shadow: var(--shadow-2xl), 0 0 70px rgba(204, 0, 0, 0.16);
}

/* Animated scope line closing the hero ----------------------- */
.dx-scope {
    display: block;
    width: 200%;
    height: 46px;
    margin: clamp(2.5rem, 6vw, 4rem) 0 calc(-1 * clamp(4rem, 9vh, 7rem) + 1.5rem);
    opacity: 0.5;
    animation: dx-drift 14s linear infinite;
}

.dx-scope path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(204, 0, 0, 0.8));
}

@keyframes dx-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Bands ------------------------------------------------------ */
.distortion-band,
.distortion-final {
    padding: var(--dx-band-y) var(--dx-gutter);
    border-bottom: 1px solid var(--dx-line);
}

.distortion-band h2,
.distortion-final h2 {
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.08;
    color: var(--light-text);
    text-wrap: balance;
}

/* :where() keeps this at single-class weight so the modifiers below can
   override it without !important. */
.distortion-band :where(p),
.distortion-final :where(p) {
    max-width: 62ch;
    color: var(--silver-text);
    font-size: var(--font-size-base);
    line-height: 1.65;
}

.dx-eyebrow {
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dx-lead {
    color: var(--light-text);
    font-size: var(--font-size-lg);
}

/* Split bands ------------------------------------------------ */
.dx-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: start;
}

.dx-split-head h2 {
    margin-bottom: 0;
}

.dx-split-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: clamp(1rem, 2vw, 1.75rem);
    border-left: 2px solid rgba(204, 0, 0, 0.35);
}

/* Feature grid ----------------------------------------------- */
.distortion-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.distortion-feature-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.4rem 1.5rem;
    border: 1px solid var(--dx-line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--dx-panel) 0%, var(--dx-panel-2) 100%);
    overflow: hidden;
    transition: transform var(--transition-base), border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.distortion-feature-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.distortion-feature-grid article:hover {
    transform: translateY(-4px);
    border-color: var(--dx-line-lit);
    box-shadow: var(--shadow-xl);
}

.distortion-feature-grid article:hover::before {
    transform: scaleX(1);
}

.dx-num {
    margin-bottom: 0.85rem;
    color: rgb(230, 60, 60);
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

.distortion-feature-grid h3 {
    margin-bottom: 0.6rem;
    color: var(--light-text);
    font-size: var(--font-size-xl);
    line-height: 1.2;
}

.distortion-feature-grid p {
    max-width: none;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Scroll-driven card motion ---------------------------------
   Two JS-added states, both gated on .dx-js so a no-JS visitor
   gets the plain (visible, static) grid:
   - .dx-revealed  — each card rises in as it scrolls into view
   - .dx-spotlit   — the card crossing the middle of the screen
     lights itself up. Touch devices have no :hover, so without
     this the cards stay flat for the whole mobile scroll.
   Reveal uses `translate` (not `transform`) so the lift below
   composes with it instead of overwriting it.
   Both are scoped to (hover: none) — a pointer already gets all
   of this from :hover, so the desktop page is unchanged. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    .dx-js .distortion-feature-grid article {
        opacity: 0;
        translate: 0 26px;
        transition: opacity 0.55s ease,
                    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                    transform var(--transition-base),
                    border-color var(--transition-base),
                    box-shadow var(--transition-base);
    }

    .dx-js .distortion-feature-grid article.dx-revealed {
        opacity: 1;
        translate: 0 0;
    }
}

@media (hover: none) {
    .distortion-feature-grid article.dx-spotlit {
        transform: translateY(-6px) scale(1.015);
        border-color: var(--dx-line-lit);
        box-shadow: var(--shadow-xl), 0 0 34px rgba(204, 0, 0, 0.16);
    }

    .distortion-feature-grid article.dx-spotlit::before {
        transform: scaleX(1);
    }
}

/* Proof strip ------------------------------------------------ */
.distortion-proof {
    background: linear-gradient(180deg, rgb(12, 12, 12) 0%, rgb(8, 8, 8) 100%);
}

.dx-proof-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.dx-proof-inner article + article {
    padding-left: clamp(1.5rem, 4vw, 3rem);
    border-left: 1px solid var(--dx-line);
}

.distortion-stat {
    display: block;
    margin-bottom: 0.65rem;
    font-family: var(--font-serif);
    color: var(--primary-color);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 30px rgba(204, 0, 0, 0.35);
}

.distortion-proof p {
    font-size: var(--font-size-sm);
}

/* Final CTA -------------------------------------------------- */
.distortion-final {
    border-bottom: none;
}

.dx-final-panel {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
    border: 1px solid var(--dx-line-lit);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(204, 0, 0, 0.18) 0%, transparent 65%),
        linear-gradient(180deg, var(--dx-panel) 0%, var(--dx-panel-2) 100%);
    box-shadow: var(--shadow-2xl), 0 0 60px rgba(204, 0, 0, 0.12);
}

.dx-final-panel p {
    margin-inline: auto;
}

.dx-final-actions {
    justify-content: center;
    margin-top: 2rem;
}

.distortion-final-alt {
    margin-top: 1.5rem;
    font-size: var(--font-size-sm);
}

/* Footer ----------------------------------------------------- */
.distortion-footer {
    padding: 2.25rem var(--dx-gutter);
    color: var(--gray-text);
    background: rgb(0, 0, 0);
    border-top: 1px solid var(--dx-line);
}

.dx-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.dx-footer-brand {
    font-weight: 800;
    color: var(--light-text);
    text-decoration: none;
}

.dx-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: var(--font-size-sm);
}

.dx-footer-copy {
    font-size: var(--font-size-sm);
}

/* The GPL source pointer. Deliberately the quietest thing on the
   page — the shop is the route to the plugin, this is only here for
   anyone who goes looking for the code. Low contrast on purpose, so
   it is kept legible rather than hidden, and it comes up to full
   silver-red on hover/focus like any other footer link. */
.dx-source-link {
    margin-left: 0.55rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.22);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dx-source-link:focus-visible {
    color: var(--primary-color);
}

/* Thank-you page --------------------------------------------- */
.distortion-thanks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem var(--dx-gutter);
    text-align: center;
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(204, 0, 0, 0.18) 0%, transparent 70%),
        var(--dx-ink);
}

/* Same colour shift the main site's .logo-img applies: the source file is
   #FF0033, which reads pink-red next to this page's #CC0000. */
.distortion-thanks img {
    width: min(520px, 86vw);
    height: auto;
    filter: hue-rotate(6deg) brightness(0.82) saturate(1.1)
            drop-shadow(0 0 20px rgba(204, 0, 0, 0.45));
}

.distortion-thanks h1 {
    font-family: var(--font-serif);
    color: var(--primary-color);
    font-size: clamp(2.75rem, 8vw, 5rem);
    text-shadow: var(--shadow-glow-red-lg);
}

.distortion-thanks p {
    max-width: 58ch;
    color: var(--silver-text);
    font-size: var(--font-size-base);
    line-height: 1.65;
}

.distortion-thanks .distortion-cta {
    margin-top: 1rem;
}

/* Responsive ------------------------------------------------- */
@media (max-width: 960px) {
    .dx-hero-inner,
    .dx-split-inner,
    .dx-proof-inner {
        grid-template-columns: 1fr;
    }

    .dx-hero-inner {
        gap: 2.5rem;
    }

    .dx-proof-inner {
        gap: 1.75rem;
    }

    .dx-proof-inner article + article {
        padding-left: 0;
        padding-top: 1.75rem;
        border-left: none;
        border-top: 1px solid var(--dx-line);
    }

    .distortion-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .distortion-hero {
        padding-top: 3.25rem;
    }

    .distortion-hero h1 {
        font-size: clamp(2.6rem, 13vw, 3.4rem);
    }

    .distortion-hero h1::after {
        margin-top: 1.1rem;
    }

    /* Keep only brand + CTA so the bar doesn't crush at 360px;
       both links are repeated in the footer. */
    .dx-nav-links .distortion-nav-link {
        display: none;
    }

    .distortion-feature-grid {
        grid-template-columns: 1fr;
    }

    .distortion-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Full-width buttons, but capped so they don't span a tablet. */
    .distortion-actions > a {
        width: 100%;
        max-width: 360px;
    }

    .dx-final-actions > a {
        margin-inline: auto;
    }

    .dx-split-body {
        padding-left: 1rem;
    }

    .dx-footer-inner {
        justify-content: center;
        text-align: center;
    }

    .dx-footer-links {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .distortion-page *,
    .distortion-page *::before,
    .distortion-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .dx-scope {
        width: 100%;
    }

    /* Belt and braces: if the preference flips after load, no card is
       left stranded at opacity 0. */
    .dx-js .distortion-feature-grid article {
        opacity: 1;
        translate: none;
    }

    /* The spotlight keeps its border and glow, but not the lift — a card
       jumping under the reader is exactly what this preference asks us to
       stop doing. */
    .distortion-feature-grid article.dx-spotlit {
        transform: none;
    }
}