/* ==========================================================================
   Giant Pixel — landing page
   Graffiti / punk / skate. Loud on purpose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --ink:        #0b0910;
    --ink-2:      #14101f;
    --paper:      #f6f2e9;

    --purple:     #8b5cf6;
    --purple-lt:  #af84ff;
    --pink:       #ff2e88;
    --cyan:       #22e0d6;
    --acid:       #d8f24a;
    --yellow:     #f4d64e;
    --orange:     #ff7a2f;

    --shell:      min(1240px, 100% - 48px);
    --hard:       6px 6px 0 var(--ink);
    --hard-sm:    4px 4px 0 var(--ink);

    --display:    "Anton", "Arial Black", sans-serif;
    --scrawl:     "Permanent Marker", cursive;
    --body:       "Montserrat", sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-optical-sizing: auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

::selection {
    background: var(--pink);
    color: var(--ink);
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. Atmosphere — spray blooms, grain, scanlines
   -------------------------------------------------------------------------- */

.atmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Soft spraycan blooms behind everything. */
.bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}

.bloom-1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw;  background: var(--purple); }
.bloom-2 { width: 38vw; height: 38vw; top: 22vw;  right: -12vw; background: var(--pink); opacity: 0.35; }
.bloom-3 { width: 34vw; height: 34vw; top: 96vw;  left: -8vw;   background: var(--cyan); opacity: 0.22; }
.bloom-4 { width: 30vw; height: 30vw; top: 150vw; right: -6vw;  background: var(--orange); opacity: 0.2; }

/* Film grain. */
.grain {
    position: absolute;
    inset: -50%;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-shift 700ms steps(2) infinite;
}

@keyframes grain-shift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-2%, 1.5%); }
    100% { transform: translate(1.5%, -2%); }
}

/* Faint CRT scanlines. */
.scanlines {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.28) 3px,
        rgba(0, 0, 0, 0.28) 4px
    );
}

.page {
    position: relative;
    z-index: 1;
    /* `clip` rather than `hidden` so it never becomes a scroll container —
       the rotated ticker and stickers deliberately hang past the edge. */
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   3. Shared bits — stickers, tape, headings
   -------------------------------------------------------------------------- */

.sticker {
    display: inline-block;
    padding: 7px 14px 6px;
    background: var(--acid);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: var(--hard-sm);
    font-family: var(--body);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.sticker-pink   { background: var(--pink);   color: var(--paper); }
.sticker-cyan   { background: var(--cyan); }
.sticker-purple { background: var(--purple); color: var(--paper); }
.sticker-yellow { background: var(--yellow); }

/* Strip of masking tape. */
.tape {
    position: absolute;
    width: 108px;
    height: 30px;
    background: rgba(244, 214, 78, 0.72);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1px);
}

.tape::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.25) 0 2px,
        transparent 2px 7px
    );
}

.kicker {
    font-family: var(--scrawl);
    font-size: 20px;
    color: var(--cyan);
    margin: 0 0 6px;
    transform: rotate(-1.5deg);
}

.section-title {
    font-family: var(--display);
    font-size: clamp(46px, 8vw, 104px);
    line-height: 0.86;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}

/* Chunky outlined display text. */
.outline-text {
    color: transparent;
    -webkit-text-stroke: 2px var(--paper);
}

/* Spray-paint highlight behind a word. */
.mark {
    position: relative;
    z-index: 0; /* own stacking context, so the ::before wash stays behind the glyphs */
    display: inline-block;
    color: var(--ink);
    padding: 0 0.12em;
}

.mark::before {
    content: "";
    position: absolute;
    /* em-based so the wash always clears Anton's cap height and descenders,
       whatever the clamp() resolves the font size to. */
    inset: -0.09em -0.04em -0.13em;
    background: var(--acid);
    transform: rotate(-1.2deg) skewX(-7deg);
    z-index: -1;
    border-radius: 3px 8px 4px 10px;
}

.mark-pink::before { background: var(--pink); }
.mark-pink         { color: var(--paper); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 0 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.9));
}

.brand-name {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.brand-name span { color: var(--purple-lt); }

.head-tag {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(246, 242, 233, 0.55);
}

@media (max-width: 720px) {
    .head-tag { display: none; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
    padding: 44px 0 78px;
}

/* min-width:0 stops the oversized display type from forcing the grid track
   wider than the viewport (grid items default to min-width:auto). */
.hero-copy { min-width: 0; }

.hero-copy > .sticker { margin-bottom: 22px; }

.hero-title {
    font-family: var(--display);
    font-size: clamp(34px, 11vw, 112px);
    line-height: 0.87;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 24px;
    text-wrap: balance;
}

.hero-title .line-2 { color: var(--purple-lt); }

.hero-sub {
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    font-weight: 500;
    color: rgba(246, 242, 233, 0.78);
    max-width: 46ch;
    margin: 0 0 12px;
}

.hero-sub strong {
    color: var(--paper);
    font-weight: 800;
}

.hero-scrawl {
    font-family: var(--scrawl);
    font-size: 21px;
    color: var(--acid);
    transform: rotate(-1.5deg);
    margin: 0 0 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

/* Big loud mail button. */
.smash {
    display: inline-block;
    padding: 16px 26px;
    background: var(--pink);
    color: var(--paper);
    border: 3px solid var(--ink);
    box-shadow: var(--hard);
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(-1.4deg);
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.smash:hover,
.smash:focus-visible {
    background: var(--acid);
    color: var(--ink);
    transform: rotate(-1.4deg) translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
}

.smash:active {
    transform: rotate(-1.4deg) translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--ink);
}

.hero-note {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246, 242, 233, 0.45);
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 26px 0 56px;
    }
    .hero-stage { order: -1; min-height: 330px; }
    .hero-stage::before { width: 250px; height: 250px; }
    .stage-ring { width: min(320px, 72vw); }
    .p-tilt { width: min(290px, 60vw); }
}

/* --------------------------------------------------------------------------
   6. The glitching P
   -------------------------------------------------------------------------- */

.hero-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 440px;
    perspective: 900px;
}

/* Halftone dot field behind the P. */
.hero-stage::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    background-image: radial-gradient(circle, var(--purple) 1.4px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.5;
    transform: rotate(-8deg);
    z-index: -1;
}

/* Ring that sits behind the logo. */
.stage-ring {
    position: absolute;
    width: min(410px, 78vw);
    aspect-ratio: 1;
    border: 3px dashed rgba(175, 132, 255, 0.4);
    border-radius: 50%;
    animation: ring-spin 26s linear infinite;
}

@keyframes ring-spin {
    to { transform: rotate(360deg); }
}

.p-tilt {
    position: relative;
    width: min(360px, 68vw);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    /* Rotation only — the P never leaves its spot. */
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
}

.p-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p-main {
    filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.75));
    animation: p-flicker 6s steps(1) infinite;
}

/* Chromatic-aberration ghosts. */
.p-ghost {
    mix-blend-mode: screen;
    opacity: 0.85;
}

.p-ghost-a {
    filter: url(#gp-cyan) saturate(2.4);
    animation: ghost-a 5.5s steps(1) infinite;
}

.p-ghost-b {
    filter: url(#gp-pink) saturate(2.4);
    animation: ghost-b 5.5s steps(1) infinite;
}

/* Torn horizontal slice that jumps out of alignment. */
.p-slice {
    filter: drop-shadow(0 0 6px var(--cyan));
    animation: slice-jump 5.5s steps(1) infinite;
}

/* Rest state keeps a small permanent offset, so the P always carries a
   chromatic fringe rather than looking clean between bursts. */
@keyframes ghost-a {
    0%, 76%, 100%   { transform: translate(-4px, 1px); opacity: 0.4; }
    77%             { transform: translate(-14px, 4px); opacity: 0.95; }
    79%             { transform: translate(7px, -5px);  opacity: 0.8; }
    81%             { transform: translate(-5px, 0);    opacity: 0.6; }
    83%             { transform: translate(-4px, 1px);  opacity: 0.4; }
    92%             { transform: translate(-10px, -3px); opacity: 0.9; }
    94%             { transform: translate(-4px, 1px);  opacity: 0.4; }
}

@keyframes ghost-b {
    0%, 76%, 100%   { transform: translate(4px, -1px); opacity: 0.4; }
    77%             { transform: translate(14px, -4px); opacity: 0.95; }
    79%             { transform: translate(-7px, 5px);  opacity: 0.8; }
    81%             { transform: translate(6px, 0);     opacity: 0.6; }
    83%             { transform: translate(4px, -1px);  opacity: 0.4; }
    92%             { transform: translate(11px, 3px);  opacity: 0.9; }
    94%             { transform: translate(4px, -1px);  opacity: 0.4; }
}

@keyframes slice-jump {
    0%, 76%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
    77%           { clip-path: inset(34% 0 52% 0); transform: translateX(-18px); }
    78.5%         { clip-path: inset(62% 0 26% 0); transform: translateX(14px); }
    80%           { clip-path: inset(18% 0 71% 0); transform: translateX(-9px); }
    81.5%         { clip-path: inset(0 0 100% 0);  transform: translateX(0); }
    92%           { clip-path: inset(48% 0 40% 0); transform: translateX(16px); }
    93.5%         { clip-path: inset(0 0 100% 0);  transform: translateX(0); }
}

@keyframes p-flicker {
    0%, 74%, 100% { opacity: 1; }
    75%           { opacity: 0.72; }
    76%           { opacity: 1; }
    91%           { opacity: 0.8; }
    92%           { opacity: 1; }
}

/* Randomly fired burst — breaks up the predictability of the keyframe loop. */
.p-tilt.is-glitching .p-main {
    animation: none;
    opacity: 0.78;
}

.p-tilt.is-glitching .p-ghost-a {
    animation: none;
    transform: translate(-15px, 4px);
    opacity: 0.95;
}

.p-tilt.is-glitching .p-ghost-b {
    animation: none;
    transform: translate(15px, -4px);
    opacity: 0.95;
}

.p-tilt.is-glitching .p-slice {
    animation: none;
    clip-path: inset(38% 0 46% 0);
    transform: translateX(-22px);
}

/* Floating pixel confetti around the stage. */
.pixel {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: bob 5s ease-in-out infinite;
}

.pixel-1 { top: 8%;  left: 6%;   background: var(--acid);   animation-delay: -0.4s; }
.pixel-2 { top: 22%; right: 4%;  background: var(--pink);   animation-delay: -1.8s; width: 16px; height: 16px; }
.pixel-3 { bottom: 16%; left: 12%; background: var(--cyan); animation-delay: -3.1s; }
.pixel-4 { bottom: 8%; right: 14%; background: var(--yellow); animation-delay: -2.2s; width: 9px; height: 9px; }

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-16px) rotate(22deg); }
}

/* --------------------------------------------------------------------------
   7. Ticker
   -------------------------------------------------------------------------- */

.ticker {
    position: relative;
    background: var(--acid);
    color: var(--ink);
    border-block: 4px solid var(--ink);
    padding: 12px 0;
    overflow: hidden;
    transform: rotate(-1.3deg) scale(1.04);
    margin: 10px 0 90px;
}

/* Number of identical groups in the track. The animation shifts the track by
   exactly one group (-100% / count), so the wrap is invisible — provided the
   remaining groups still span the viewport, which is why there are six. */
.ticker { --ticker-groups: 6; }

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-roll 36s linear infinite;
}

.ticker-group {
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-inline: 20px;
    white-space: nowrap;
}

.ticker-track b { color: var(--pink); }

@keyframes ticker-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / var(--ticker-groups))); }
}

/* --------------------------------------------------------------------------
   8. The wall — portfolio grid
   -------------------------------------------------------------------------- */

.work {
    padding-bottom: 90px;
}

.work-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 42px;
}

.work-head p.blurb {
    max-width: 32ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(246, 242, 233, 0.6);
    font-weight: 500;
}

/* Masonry via CSS columns — handles the tall phone shots gracefully. */
.wall {
    columns: 3;
    column-gap: 26px;
}

.tile {
    position: relative;
    break-inside: avoid;
    margin: 0 0 30px; /* figure carries a UA margin-inline of 40px */
    background: var(--ink-2);
    border: 3px solid var(--ink);
    box-shadow: var(--hard);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1),
                box-shadow 220ms ease;
}

.tile:nth-child(3n + 1) { transform: rotate(-1.4deg); }
.tile:nth-child(3n + 2) { transform: rotate(1.1deg); }
.tile:nth-child(3n + 3) { transform: rotate(-0.6deg); }

.tile:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.02);
    box-shadow: 12px 12px 0 var(--purple);
    z-index: 3;
}

.tile-shot {
    position: relative;
    overflow: hidden;
    background: #0f0d16;
}

.tile-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 500ms ease, filter 300ms ease;
}

.tile:hover .tile-shot img {
    transform: scale(1.05);
    filter: saturate(1.2) contrast(1.05);
}

/* Aspect crops per shot type. */
.shot-wide  { aspect-ratio: 16 / 10; }
.shot-square{ aspect-ratio: 1 / 1; }
.shot-phone { aspect-ratio: 3 / 4; }

.shot-square img { object-fit: contain; object-position: center; }

/* Transparent logo art. 3:2 trims the empty padding baked into the square
   source without clipping the artwork itself, and the backdrop stops a
   cut-out logo from reading as a broken image. */
.shot-logo {
    aspect-ratio: 3 / 2;
    background:
        radial-gradient(circle at 50% 46%, rgba(34, 224, 214, 0.2), transparent 62%),
        linear-gradient(160deg, #0e2038 0%, #0b0910 72%);
}

.shot-logo img {
    object-position: center;
    padding: 6%;
}

/* Tint veil that ties the wall together, then lifts on hover.
   Deliberately not `mix-blend-mode: color` — that flattens the artwork's own
   palette, and the screenshots are the whole point here. */
.tile-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(200deg,
            rgba(139, 92, 246, 0.26) 0%,
            rgba(255, 46, 136, 0.12) 55%,
            rgba(11, 9, 16, 0.42) 100%);
    opacity: 1;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.tile:hover .tile-shot::after { opacity: 0; }

.tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 3px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
}

.tile-name {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
}

/* Linked tiles. The anchor lives on the title (so the link has real text for
   screen readers and the figure's content model stays valid), then stretches
   over the whole card via ::after. Kept unpositioned on purpose — the
   pseudo-element resolves against .tile, which is the containing block. */
.tile-link {
    color: inherit;
    transition: color 160ms ease;
}

.tile-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.tile:hover .tile-link { color: var(--purple); }

.tile-link:focus-visible::after {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

.tile-out {
    margin-left: 7px;
    font-size: 0.78em;
    vertical-align: 2px;
}

/* "Coming soon" flash over unreleased work. */
.flag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    padding: 7px 12px 6px;
    background: var(--orange);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: var(--hard-sm);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(4deg);
}

.tile-kind {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 9px;
    border: 2px solid var(--ink);
    white-space: nowrap;
}

.kind-game { background: var(--cyan); }
.kind-app  { background: var(--yellow); }
.kind-web  { background: var(--purple); color: var(--paper); }
.kind-tool { background: var(--acid); }
.kind-ai   { background: var(--pink); color: var(--paper); }

/* Tape on a few tiles. Kept inside the tile box on purpose: an absolutely
   positioned child that overflows the top of a column box gets fragmented
   across columns by the multicol layout. */
.tile .tape {
    top: 10px;
    left: 50%;
    margin-left: -54px;
    transform: rotate(-3deg);
    z-index: 2;
}

.tile:nth-child(even) .tape { transform: rotate(2.5deg); left: 20%; }

@media (max-width: 1000px) {
    .wall { columns: 2; }
}

@media (max-width: 640px) {
    .wall { columns: 1; }
    .tile,
    .tile:nth-child(3n + 1),
    .tile:nth-child(3n + 2),
    .tile:nth-child(3n + 3) { transform: none; }
}

/* Scroll reveal. Only armed once JS confirms it can observe. */
.reveal-on .tile {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 500ms ease, translate 500ms cubic-bezier(0.2, 0.8, 0.3, 1),
                transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 220ms ease;
}

.reveal-on .tile.is-in {
    opacity: 1;
    translate: 0 0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-foot {
    border-top: 4px solid rgba(246, 242, 233, 0.14);
    padding: 64px 0 44px;
    text-align: center;
}

.foot-word {
    font-family: var(--display);
    font-size: clamp(52px, 13vw, 168px);
    line-height: 0.84;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 26px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(175, 132, 255, 0.6);
}

.foot-mail {
    display: inline-block;
    font-family: var(--display);
    font-size: clamp(22px, 3.4vw, 38px);
    letter-spacing: 0.02em;
    color: var(--acid);
    border-bottom: 4px solid var(--pink);
    padding-bottom: 4px;
    transition: color 160ms ease, border-color 160ms ease;
}

.foot-mail:hover {
    color: var(--pink);
    border-color: var(--acid);
}

.foot-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 34px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(246, 242, 233, 0.45);
}

.foot-links a { transition: color 160ms ease; }
.foot-links a:hover { color: var(--acid); }

.foot-links .dot { color: rgba(246, 242, 233, 0.2); }

/* --------------------------------------------------------------------------
   10. Motion & contrast preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .grain,
    .stage-ring,
    .pixel,
    .p-main,
    .p-ghost-a,
    .p-ghost-b,
    .p-slice,
    .ticker-track {
        animation: none !important;
    }

    .p-slice { clip-path: inset(0 0 100% 0); }
    .p-ghost { opacity: 0.3; }

    .tile,
    .tile-shot img,
    .smash { transition: none; }
}