/* ══ The phone home's MCP tile, Oct 17 (docs/mobile/mcp-tile, Adi's pick: B "Socket", thin edge) ══════════════
   Loaded with media="(max-width: 760px)", so a desktop never applies a rule here. mcp-tile-m.js swaps the art into
   the tile m.js draws (.mh-tile.t-mcp) and marks it .mt-on; every class inside it is mt-*.
   The art: the logo badge on top is the socket (a thin edge, like the badge in variant A), a sun-yellow plug with our
   mark on it right under it. Every 2.4 s the plug comes out a little, the logo rolls over (Claude ↔ ChatGPT) and the
   plug goes back in with a click: a spark, a glow flare, a halo in the AI's colour, the tile washed in that colour.
   Only opacity and transform move. It runs only while .mt-run is on (on screen, tab visible, no engine open);
   with reduced motion it is one still frame that shows both logos. ══ */
@media (max-width: 760px) {

.mh-tile.t-mcp.mt-on .mh-sq{--mt-T:4.8s;--mt-H:2.4s;background:#0b0b0e;border:1px solid var(--hair);box-shadow:none}
.mh-tile.t-mcp.mt-on .mh-tl{color:inherit}
.mt-on .mt-l{position:absolute;display:block}
.mt-on:not(.mt-run) .mh-sq *{animation-play-state:paused!important}

/* the ground: a faint dot grid, washed in the colour of whoever is plugged in */
.mt-on .mt-dots{inset:0;background:radial-gradient(circle,rgba(243,239,230,.09) .9px,transparent 1.2px) 0 0/9.5% 9.5%}
.mt-on .mt-wash{inset:0;opacity:0}
.mt-on .mt-wash.c{background:radial-gradient(100% 100% at 50% 30%,rgba(224,122,82,.4),rgba(224,122,82,.12) 45%,transparent 80%);animation:mt-washC var(--mt-T) linear infinite}
.mt-on .mt-wash.g{background:radial-gradient(100% 100% at 50% 30%,rgba(255,255,255,.2),rgba(255,255,255,.06) 45%,transparent 80%);animation:mt-washG var(--mt-T) linear infinite}

/* the socket: the logo badge itself, a thin edge, a halo in the AI's colour */
.mt-on .mt-box{left:29%;top:14%;width:42%;height:42%;border-radius:24%;box-shadow:0 6px 14px -6px #000;z-index:3}
.mt-on .mt-halo{position:absolute;inset:-7%;border-radius:28%;opacity:0}
.mt-on .mt-halo.c{box-shadow:0 0 0 1.5px #e07a52,0 0 14px 1px rgba(224,122,82,.75);animation:mt-haloC var(--mt-T) linear infinite}
.mt-on .mt-halo.g{box-shadow:0 0 0 1.5px #fff,0 0 14px 1px rgba(255,255,255,.55);animation:mt-haloG var(--mt-T) linear infinite}
.mt-on .mt-win{position:absolute;inset:0;border-radius:24%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transform:translateZ(0)}
.mt-on .mt-reel{position:absolute;left:0;top:0;width:100%;height:300%;animation:mt-reel var(--mt-T) linear infinite}
.mt-on .mt-face{position:absolute;left:0;width:100%;height:33.3334%;overflow:hidden;background:#fff}
.mt-on .mt-face:nth-child(1){top:0}.mt-on .mt-face:nth-child(2){top:33.3333%}.mt-on .mt-face:nth-child(3){top:66.6667%}
.mt-on .mt-face img{display:block;width:100%;height:100%;object-fit:cover}
.mt-on .mt-peek{display:none}

/* the plug: ours, sun yellow, our mark on its face; a sun glow behind it that flares on every connect */
.mt-on .mt-plug{left:36%;top:45.1%;width:28%;height:56%;--mt-out:13%;animation:mt-unplug var(--mt-H) linear infinite;z-index:2}
.mt-on .mt-plug svg{display:block;width:100%;height:100%;overflow:visible}
.mt-on .mt-glow{left:12%;top:36%;width:76%;height:76%;z-index:1;border-radius:50%;background:radial-gradient(circle,rgba(255,215,49,.9) 0,rgba(255,215,49,.35) 32%,rgba(255,215,49,0) 68%);animation:mt-glow var(--mt-H) linear infinite}
.mt-on .mt-lit{animation:mt-lit var(--mt-H) linear infinite}
.mt-on .mt-spark{left:50%;top:55.5%;width:40%;aspect-ratio:1;translate:-50% -50%;z-index:5;opacity:0;animation:mt-spark var(--mt-H) linear infinite}
.mt-on .mt-spark svg{display:block;width:100%;height:100%}

/* one connect (2.4 s): connected and glowing, the plug comes out, the logo rolls, it goes back in with a click */
@keyframes mt-unplug{0%{transform:translateY(0)}78%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.6,1)}86%{transform:translateY(var(--mt-out))}92%{transform:translateY(var(--mt-out));animation-timing-function:cubic-bezier(.6,0,.9,.6)}100%{transform:translateY(0)}}
@keyframes mt-glow{0%{opacity:1;transform:scale(1.18)}18%{opacity:.55;transform:scale(1)}78%{opacity:.55;transform:scale(1)}86%{opacity:.12;transform:scale(.8)}95%{opacity:.12;transform:scale(.8)}100%{opacity:1;transform:scale(1.18)}}
@keyframes mt-lit{0%{opacity:1}20%{opacity:.35}78%{opacity:.35}86%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes mt-spark{0%{opacity:1;transform:scale(.35) rotate(0)}16%{opacity:0;transform:scale(1.35) rotate(25deg)}100%{opacity:0;transform:scale(.35)}}
/* one round (4.8 s): Claude, then ChatGPT */
@keyframes mt-reel{0%{transform:translateY(0)}42%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,0,.25,1.3)}48%{transform:translateY(-33.3333%)}92%{transform:translateY(-33.3333%);animation-timing-function:cubic-bezier(.5,0,.25,1.3)}98%{transform:translateY(-66.6667%)}100%{transform:translateY(-66.6667%)}}
@keyframes mt-washC{0%{opacity:1}41%{opacity:1}47%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes mt-washG{0%{opacity:0}44%{opacity:0}50%{opacity:1}91%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes mt-haloC{0%{opacity:1}12%{opacity:.6}40%{opacity:.6}44%{opacity:0}97%{opacity:0}100%{opacity:1}}
@keyframes mt-haloG{0%{opacity:0}47%{opacity:0}50%{opacity:1}62%{opacity:.6}90%{opacity:.6}94%{opacity:0}100%{opacity:0}}

}

/* reduced motion: one still frame — Claude in the socket, ChatGPT tucked behind its corner, the plug in and lit */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
.mt-on .mh-sq *{animation:none!important}
.mt-on .mt-glow{opacity:.55}
.mt-on .mt-lit{opacity:.35}
.mt-on .mt-wash.c,.mt-on .mt-halo.c{opacity:.8}
.mt-on .mt-peek{display:block;left:63%;top:3%;width:27%;height:27%;z-index:2;border-radius:24%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px #0b0b0e}
.mt-on .mt-peek img{display:block;width:100%;height:100%;object-fit:cover}
}