/**
 * Everclick holding site.
 *
 * Tokens, fonts, buttons and the intro curtain are lifted from the Drupal
 * theme (web/themes/custom/everclick_theme) so this page and the site that
 * replaces it are the same object. Anything that only exists here — the
 * status readout, the full-bleed mailto lockup — is marked as such.
 *
 * Only the weights this page actually sets are shipped: Nohemi 500/600 and
 * Clash Display 600/700. Adding a weight means copying the file back from
 * the theme's fonts/ folder.
 *
 * No monospace face: Nohemi carries every label, caption and button.
 */

/* ════════════════════════════════════════════════════════════════════
   Fonts
   ════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Nohemi'; src: url('../fonts/nohemi/Nohemi-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/nohemi/Nohemi-600.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Clash Display'; src: url('../fonts/clash-display/ClashDisplay-600.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('../fonts/clash-display/ClashDisplay-700.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
/* The theme ships no cut heavier than Bold, so 900 aliases to it — the nav
   wordmark asks for 900 and this is what it actually gets. Kept so the
   lockup here resolves to the same file it does on the Drupal site. */
@font-face { font-family: 'Clash Display'; src: url('../fonts/clash-display/ClashDisplay-700.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ════════════════════════════════════════════════════════════════════
   Tokens — the canonical Everclick set, trimmed to what this page uses.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --ec-lime:       #CCFF00;
    --ec-lime-muted: #CCFF0033;
    --ec-black:      #0A0A0A;
    --ec-grey:       #888888;
    --ec-light-grey: #E5E5E5;
    --ec-white:      #F5F5F5;

    --font-display: 'Clash Display', sans-serif;
    --font-body:    'Nohemi', sans-serif;

    --text-h1:      clamp(2.5rem, 6vw, 4rem);
    --text-h2:      clamp(1.75rem, 4vw, 2.5rem);
    --lh-h1:        0.9;
    --text-body-lg: 1.125rem;
    --text-body:    1rem;
    --text-body-sm: 0.875rem;
    --text-caption: 0.75rem;
    --lh-body:      1.7;
    --ls-eyebrow:   0.11em;

    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --container-default: 1440px;

    --radius-sm: 4px;
    --radius-pill: 100px;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --dur-fast:    150ms;
    --dur-normal:  300ms;

    --divider: rgba(255, 255, 255, 0.10);

    /* Holding-page only: the gutter the whole page hangs off. */
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* ════════════════════════════════════════════════════════════════════
   Base
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; }

body {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-body);
    line-height: 1.6;
    background: var(--ec-black);
    color: var(--ec-white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

/* Nohemi's 500 is already fairly solid, so the default bold barely reads
   against it — emphasis needs the 600 cut to land. */
strong, b { font-weight: 600; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

a, button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--ec-lime);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--ec-lime-muted);
    border-radius: var(--radius-sm);
}

.u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Skip link — the page is short, but the mailto is the whole point of it. */
.skip-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 100;
    transform: translateY(-200%);
    background: var(--ec-lime);
    color: var(--ec-black);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
}
.skip-link:focus { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════
   Canvas backdrop — the site's dot grid, carried over verbatim.
   ════════════════════════════════════════════════════════════════════ */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* The grid sits well back: it is texture behind the type, not something to
   read. Held down here rather than in the canvas' own fill alphas so the
   whole layer — dots, lime murmuration, ripples — dims together and the
   painting code stays the theme's. */
.backdrop__canvas {
    width: 100%;
    height: 100%;
    opacity: 0.45;
}

/* Floor gradient: the grid fades out under the footer so the rule reads. */
.backdrop__fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, var(--ec-black) 8%, transparent);
}

/* Lime bloom when a click ripple reaches the frame — driven by JS. */
.backdrop__edge {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px 30px rgba(204, 255, 0, 0);
    transition: box-shadow 0.15s;
}

.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ec-lime);
    box-shadow: 0 8px 24px rgba(204, 255, 0, 0.25);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s;
}
.cursor-dot.is-visible { opacity: 1; }

/* Pointer devices with motion allowed get the lime dot instead of an arrow;
   everything else keeps its own cursor. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.js body { cursor: none; }
    /* Interactive things still say "click me" in the OS's own language. */
    html.js a, html.js button { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
    .cursor-dot { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Stage — header / content / footer, one viewport tall at minimum.
   ════════════════════════════════════════════════════════════════════ */

/* The page is meant to hold one screen, so its vertical rhythm is measured
   in vh as well as rem: on a laptop the whole thing lands without a
   scrollbar, and on a short window it compresses rather than spilling. */
.stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 2.4vh, 2.5rem) var(--gutter);
    gap: clamp(1.25rem, 3.2vh, 3rem);
}

.stage__inner {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
}

/* ── Header ──
   The Drupal nav's logo lockup, reproduced exactly (nav.css § Logo): a
   36px lime tile holding a 20px black mark, 16px of gap, then the wordmark
   in Clash Display 900 at 1.15rem. The tracking is 0.02em — the display
   face's own, not a widened one; anything looser stops matching the nav
   the moment this page is replaced. */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--ec-white);
}
.brand__mark {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    background: var(--ec-lime);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__wordmark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: transform var(--dur-normal) var(--ease-out);
}
.brand:hover .brand__wordmark { transform: translateX(-4px); }

/* The nav's hover gesture: the three bars wipe in, one behind the other. */
@keyframes brand-bar-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}
.brand:hover .brand__mark svg polygon {
    animation: brand-bar-wipe 0.35s var(--ease-out) both;
}
.brand:hover .brand__mark svg polygon:nth-child(2) { animation-delay: 0.12s; }
.brand:hover .brand__mark svg polygon:nth-child(3) { animation-delay: 0.24s; }

/* ── Main column ── */

.stage__main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2rem, 6vh, 5rem);
}

.lede { max-width: 46rem; }

.lede__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 7.2vw, 5.5rem);
    line-height: var(--lh-h1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ec-white);
}
.lede__title em {
    font-style: normal;
    color: var(--ec-lime);
}

/* Line masks — the theme's mask-line reveal. The padding/negative-margin
   pair buys headroom inside the clip for ascenders, which line-height 0.9
   otherwise pushes past the box, without moving the type. */
.lede__title .line {
    display: block;
    overflow: hidden;
    padding-top: 0.14em;
    margin-top: -0.14em;
}
.lede__title .line__in { display: block; }

.lede__body {
    margin-top: clamp(1rem, 2.6vh, 2rem);
    max-width: 34rem;
    font-size: var(--text-body-lg);
    line-height: var(--lh-body);
    color: var(--ec-light-grey);
}

/* ── The contact lockup: the page's one loud element ── */

.contact { position: relative; }

.rule {
    height: 1px;
    background: var(--divider);
    transform-origin: left center;
}

/* Address set as the largest thing on the page and sized to fill the
   measure. Split into two parts so it can break at the @ on small screens
   rather than shrinking to nothing. */
.mail {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    /* Sized to fill the measure. Clash Display SemiBold sets the whole
       address at 15.52em, and the gutter is 4vw a side through this range,
       so ~5.8vw lands it just inside the column at every width; the rem cap
       takes over once the container stops growing at 1440px. */
    font-size: clamp(1.55rem, 5.8vw, 5.25rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ec-white);
    white-space: nowrap;
    padding-bottom: 0.1em;
    transition: color var(--dur-normal) var(--ease-out);
}
.mail:hover, .mail:focus-visible { color: var(--ec-lime); }

/* Each part is its own mask — the characters ride up out of it on entrance.
   One mask around both would let the top line's characters start their run
   inside the bottom line's space, in full view. */
.mail__part {
    display: inline-block;
    overflow: hidden;
    line-height: 1.1;
    vertical-align: bottom;
}

/* JS wraps each character; the beacon sweep animates their opacity. */
.mail__char { display: inline-block; will-change: transform; }

/* A hairline sits under the address at rest, because an email set this
   large stops looking like a link — this is the only thing that says it is
   one before you touch it. Lime draws across it on hover: the site's
   ghost-link gesture at display scale. */
.mail__rule {
    position: relative;
    display: block;
    height: max(2px, 0.055em);
    background: var(--divider);
}
.mail__rule::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ec-lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease-smooth);
}
.mail:hover .mail__rule::after,
.mail:focus-visible .mail__rule::after { transform: scaleX(1); }

.contact__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: clamp(0.85rem, 2vh, 1.5rem);
}

.copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Holds its width through the label swap — "Copied" is shorter than
       "Copy address", and a button that shrinks under your cursor reads as
       a glitch rather than a confirmation. */
    min-width: 12rem;
    gap: var(--space-sm);
    background: linear-gradient(180deg, #262626 0%, #171717 100%);
    color: var(--ec-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.7rem 1.25rem;
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.40);
    transition: transform var(--dur-normal) var(--ease-out),
                color var(--dur-normal) var(--ease-out),
                background-color var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease-out);
}
.copy:hover {
    transform: translateY(-2px);
    color: var(--ec-lime);
    background: linear-gradient(180deg, #2E3318 0%, #1C1F10 100%);
    box-shadow:
        inset 0 1px 0 rgba(204, 255, 0, 0.22),
        inset 0 0 0 1px rgba(204, 255, 0, 0.30),
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(204, 255, 0, 0.14);
}
.copy:active { transform: translateY(1px); }
.copy svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.copy__tick { display: none; }
.copy.is-done { color: var(--ec-lime); }
.copy.is-done .copy__tick { display: block; }
.copy.is-done .copy__box  { display: none; }


/* ── Footer ── */

.colophon { padding-top: clamp(0.35rem, 1vh, 1.25rem); }
.colophon__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-top: clamp(0.75rem, 2vh, 1.5rem);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-grey);
}
.colophon__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}
.colophon__link {
    position: relative;
    color: var(--ec-grey);
    transition: color var(--dur-normal) var(--ease-out);
}
.colophon__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: var(--ec-lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--ease-smooth);
}
.colophon__link:hover, .colophon__link:focus-visible { color: var(--ec-white); }
.colophon__link:hover::after, .colophon__link:focus-visible::after { transform: scaleX(1); }

/* Partnership disclosure. Deliberately the quietest thing on the page — it
   has to be present, not read. Sentence case and no tracking, because it is
   a sentence rather than a label, and it lifts toward legible on hover for
   anyone who does need to take the address down. */
.colophon__legal {
    margin-top: var(--space-md);
    max-width: 62rem;
    font-size: 0.6875rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.38);
    transition: color var(--dur-normal) var(--ease-out);
}
.colophon__legal:hover { color: rgba(255, 255, 255, 0.62); }

/* ════════════════════════════════════════════════════════════════════
   Entrance — GSAP animates these; the values here are only the "before".
   Gated on html.js so a visitor without JS gets the finished page.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    html.js [data-enter] { opacity: 0; }
    /* Rules draw rather than fade; masked lines travel, so the element
       itself stays opaque and the inner does the moving. */
    html.js [data-enter="rule"] { opacity: 1; transform: scaleX(0); }
    html.js [data-enter="line"] { opacity: 1; }

    /* Holds the heading below its mask for the gap between HTML parse and
       holding.js running — nothing more. It is dropped the instant GSAP
       takes over (html.ec-ready), and it MUST be: a stylesheet
       translateY(110%) computes to a pixel matrix, which GSAP reads back as
       `y` with yPercent 0, and every yPercent tween aimed at it then
       resolves to "already there" and never moves. Characters get no CSS
       pre-state at all — they only exist once GSAP has split them. */
    html.js:not(.ec-ready) [data-enter="line"] .line__in {
        transform: translateY(110%);
    }
}

/* ════════════════════════════════════════════════════════════════════
   Intro curtain — ported from everclick_theme/css/components/intro.css.
   Hidden unless JS arms it, so no-JS and reduced-motion visitors never
   sit behind an animation that will not run.
   ════════════════════════════════════════════════════════════════════ */

.intro { display: none; }

html.ec-intro-lock,
html.ec-intro-lock body { overflow: hidden; }

html.ec-intro-armed .intro {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: var(--ec-black);
    opacity: 1;
    transition: opacity 1150ms cubic-bezier(0.4, 0, 0.15, 1);
    will-change: opacity;
}
html.ec-intro-armed .intro.is-lifting { opacity: 0; }

.intro__mark {
    display: block;
    width: 64px;
    transform-origin: center center;
}
.intro__mark svg { width: 100%; height: auto; }
.intro__mark svg polygon { fill: var(--ec-lime); }

html.ec-intro-armed .intro__mark svg polygon:nth-child(1) { animation: intro-bar-1 800ms var(--ease-out) 3 alternate both; }
html.ec-intro-armed .intro__mark svg polygon:nth-child(2) { animation: intro-bar-2 800ms var(--ease-out) 3 alternate both; }
html.ec-intro-armed .intro__mark svg polygon:nth-child(3) { animation: intro-bar-3 800ms var(--ease-out) 3 alternate both; }

@keyframes intro-bar-1 {
    0%          { clip-path: inset(0 100% 0 0); opacity: 0; }
    12%         { opacity: 1; }
    45%, 100%   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes intro-bar-2 {
    0%, 15%     { clip-path: inset(0 100% 0 0); opacity: 0; }
    27%         { opacity: 1; }
    58%, 100%   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes intro-bar-3 {
    0%, 30%     { clip-path: inset(0 100% 0 0); opacity: 0; }
    42%         { opacity: 1; }
    72%, 100%   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.intro.is-frozen .intro__mark svg polygon {
    animation: none !important;
    clip-path: inset(0 0 0 0);
    opacity: 1;
}
.intro.is-collapsing .intro__mark {
    transform: scale(0);
    opacity: 0;
    transition: transform 520ms cubic-bezier(0.7, 0, 0.84, 0),
                opacity   520ms cubic-bezier(0.7, 0, 0.84, 0);
}

/* Page content is held back and released on the hand-off, so the page
   rises out of the dissolving black. */
html.ec-intro-armed .stage {
    opacity: 0;
    transform: translateY(28px);
}
html.ec-intro-armed .stage.is-emerging {
    opacity: 1;
    transform: none;
    transition: opacity   1000ms cubic-bezier(0.22, 1, 0.3, 1),
                transform 1150ms cubic-bezier(0.22, 1, 0.3, 1);
}

/* ════════════════════════════════════════════════════════════════════
   Privacy page — plain-page typography, same canvas.

   The eyebrow and meta selectors carry their element (`.doc p.doc__eyebrow`)
   because `.doc p` further down is more specific than a bare class and was
   repainting both of them light-grey.
   ════════════════════════════════════════════════════════════════════ */

.doc {
    max-width: 44rem;
    padding-block: var(--space-2xl) var(--space-3xl);
}
.doc p.doc__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ec-lime);
    margin-bottom: var(--space-md);
}
.doc__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ec-white);
}
.doc p.doc__meta {
    margin-top: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ec-grey);
}
.doc h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ec-white);
    margin-top: var(--space-3xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--divider);
}
.doc p, .doc li {
    margin-top: var(--space-md);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--ec-light-grey);
}
.doc ul {
    margin-top: var(--space-md);
    padding-left: var(--space-lg);
}
.doc li {
    position: relative;
    list-style: none;
}
.doc li::before {
    content: '';
    position: absolute;
    left: calc(var(--space-lg) * -1);
    top: 0.75em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ec-lime);
}
.doc a:not(.colophon__link) {
    color: var(--ec-lime);
    border-bottom: 1px solid var(--ec-lime-muted);
    transition: border-color var(--dur-normal) var(--ease-out);
}
.doc a:not(.colophon__link):hover { border-color: var(--ec-lime); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ec-grey);
    transition: color var(--dur-normal) var(--ease-out);
}
.back-link:hover { color: var(--ec-lime); }
.back-link span { transition: transform var(--dur-fast) var(--ease-out); }
.back-link:hover span { transform: translateX(-4px); }

/* ════════════════════════════════════════════════════════════════════
   Small screens
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .stage__main { gap: var(--space-2xl); }
}

@media (max-width: 640px) {
    .lede__body { font-size: var(--text-body); }
    /* Break the address at the @ instead of letting it shrink to a caption. */
    .mail {
        white-space: normal;
        /* Two lines now, so the longest part (9.39em) sets the ceiling. */
        font-size: clamp(1.5rem, 9.2vw, 3.6rem);
    }
    .mail__part { display: block; }
    .doc h2 { margin-top: var(--space-2xl); }
}

/* ════════════════════════════════════════════════════════════════════
   Reduced motion — matches the theme's blanket policy.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .copy:hover, .copy:active { transform: none; }
}