/* Mercuryo post cards — the card rules alone. Shared by post/index.html and the case page
   (src/components/case/sections/LiveSlides.astro). --u = one authored pixel; the host sets it.
   The markup of every card lives in cards.js. */
@font-face{font-family:'Cabinet Grotesk';font-weight:500;font-display:swap;src:url('/fonts/cabinet-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-weight:700;font-display:swap;src:url('/fonts/cabinet-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Cabinet Grotesk';font-weight:900;font-display:swap;src:url('/fonts/cabinet-grotesk-900.woff2') format('woff2')}


.card{--ink:#fff;--muted:#aba3bd;--paper:#0a0a0f;font-family:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif;color:var(--ink);position:relative;width:calc(1080 * var(--u));height:calc(1080 * var(--u));overflow:hidden;background:var(--paper);}
/* one soft violet wash, the same one the case hero sits on */
.card::before{content:"";position:absolute;inset:-20% -10% auto -30%;height:90%;
  background:radial-gradient(60% 60% at 30% 30%,rgba(80,68,255,.28),transparent 70%);filter:blur(calc(40 * var(--u)));pointer-events:none}

.card .phone{position:absolute;width:calc(390 * var(--u));height:calc(844 * var(--u));border-radius:calc(44 * var(--u));overflow:hidden;background:#0a0a0f;
  box-shadow:0 calc(60 * var(--u)) calc(120 * var(--u)) calc(-30 * var(--u)) rgba(0,0,0,.8),0 0 0 calc(1 * var(--u)) rgba(255,255,255,.06)}
.card .phone iframe{display:block;width:100%;height:100%;border:0}
/* a bare stage: no phone chrome, the component sits on the card itself */
.card .stage{position:absolute;width:calc(390 * var(--u));height:calc(844 * var(--u));overflow:hidden}
.card .stage iframe{display:block;width:100%;height:100%;border:0}

.card .copy{position:absolute;display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.card .copy h2{font-weight:900;font-size:calc(46 * var(--u));line-height:1.06;letter-spacing:calc(-0.6 * var(--u));text-wrap:balance}
.card .copy p{font-weight:500;font-size:calc(26 * var(--u));line-height:1.4;color:var(--muted);text-wrap:pretty}
.card .copy.centred{left:calc(96 * var(--u));right:calc(96 * var(--u));align-items:center;text-align:center}

/* ── 1. opener — static Home, only its top shows under the title ── */
.c1 .head{position:absolute;left:calc(88 * var(--u));right:calc(88 * var(--u));top:calc(92 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--u));text-align:center}   /* the brand row added a line: the block starts higher so the copy keeps its distance from the screen */
/* the card has to name the brand on its own: on social it travels with no page around it */
.c1 .brand{display:flex;align-items:center;gap:calc(14 * var(--u));margin:0 0 calc(10 * var(--u))}
.c1 .brand img{width:calc(52 * var(--u));height:calc(52 * var(--u));display:block}
.c1 .brand span{font-weight:700;font-size:calc(26 * var(--u));letter-spacing:calc(3 * var(--u));text-transform:uppercase;color:var(--muted)}
.c1 h2{font-weight:900;font-size:calc(58 * var(--u));line-height:1.02;letter-spacing:calc(-1.1 * var(--u))}
.c1 p{font-weight:500;font-size:calc(26 * var(--u));color:var(--muted)}
.c1 .phone{left:50%;top:calc(392 * var(--u));translate:-50% 0;width:calc(460 * var(--u));height:calc(996 * var(--u));border-radius:calc(52 * var(--u))}

/* ── 2. overall — whole screen on the left, the idea centred beside it ── */
.c2 .phone{left:calc(96 * var(--u));top:calc(118 * var(--u))}
.c2 .copy{left:calc(560 * var(--u));width:calc(452 * var(--u));top:calc(118 * var(--u));height:calc(844 * var(--u));justify-content:center}

/* ── 3. the floating bar alone: title on top, the bar expands upward towards it ── */
.c3 .copy{top:calc(192 * var(--u))}
.c3 .stage{left:50%;top:calc(88 * var(--u));translate:-50% 0}

/* ── 4. the method tile alone at centre; the sheet rises from under the card's bottom edge ── */
.c4 .copy{top:calc(192 * var(--u))}
.c4 .stage{left:50%;top:calc(308 * var(--u));translate:-50% 0}   /* the tile's centre (page y 232) sits at the card's centre */
/* The sheet rises from under the card and has to end before the edge. It ends by going transparent,
   not by having a dark gradient laid over it: a tint darkens the sheet on its way out, a mask lets
   whatever is behind the card come through (George). The two hosts crop the stage differently, so
   the stops are variables — the case page overrides them. */
.c4 .stage{
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--c4-fade-from,65%),transparent var(--c4-fade-to,91.5%));
  mask-image:linear-gradient(to bottom,#000 var(--c4-fade-from,65%),transparent var(--c4-fade-to,91.5%));
}

/* ── 5. declined card — the method cell and the CTA both have to stay in frame ── */
.c5 .phone{left:50%;top:calc(-52 * var(--u));translate:-50% 0}
.c5 .copy{left:calc(96 * var(--u));right:calc(96 * var(--u));bottom:calc(96 * var(--u));gap:calc(8 * var(--u));align-items:center;text-align:center}
.c5 .copy h2{font-size:calc(38 * var(--u))}
.c5 .copy p{font-size:calc(23 * var(--u))}

/* ── 6. light and dark — two prototypes in lockstep; the light one is revealed by a diagonal wipe ── */
.c6 .layer{position:absolute;inset:0}
.c6 .layer.dark{background:var(--paper)}
.c6 .layer.dark::before{content:"";position:absolute;inset:-20% -10% auto -30%;height:90%;background:radial-gradient(60% 60% at 30% 30%,rgba(80,68,255,.28),transparent 70%);filter:blur(calc(40 * var(--u)));pointer-events:none}
.c6 .layer.light{background:transparent}
/* the 45° cut is a fixed clip on a curtain twice the card's width; the curtain slides, the content
   inside slides back, so only transforms animate and nothing repaints */
.c6 .curtain{position:absolute;top:0;left:calc(-1080 * var(--u));width:calc(2160 * var(--u));height:100%;
  background:#ecebf1;clip-path:polygon(0 0,100% 0,50% 100%,0 100%);will-change:transform}
.c6 .unshift{position:absolute;right:0;top:0;width:calc(1080 * var(--u));height:100%;will-change:transform}
.c6 .unshift::before{content:"";position:absolute;inset:-20% -10% auto -30%;height:90%;background:radial-gradient(60% 60% at 30% 30%,rgba(88,53,255,.16),transparent 70%);filter:blur(calc(40 * var(--u)))}
.c6 .unshift .copy h2{color:#20172a}
.c6 .unshift .copy p{color:#4a3f5e}
.c6 .copy{top:calc(96 * var(--u));gap:calc(10 * var(--u))}
.c6 .copy h2{font-size:calc(44 * var(--u))}
.c6 .copy p{font-size:calc(24 * var(--u));max-width:calc(760 * var(--u))}
.c6 .phone{left:50%;top:calc(288 * var(--u));translate:-50% 0}
.c6 .unshift .phone{background:#f6f7f7;box-shadow:0 calc(60 * var(--u)) calc(120 * var(--u)) calc(-30 * var(--u)) rgba(32,23,42,.35),0 0 0 calc(1 * var(--u)) rgba(32,23,42,.08)}
/* the moving edge: a soft bright band riding the wipe */
.c6 .edge{position:absolute;top:-30%;height:170%;width:calc(200 * var(--u));left:calc(-100 * var(--u));rotate:45deg;will-change:transform;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);filter:blur(calc(6 * var(--u)))}

/* ── stills (LinkedIn takes one video per post; the rest of the story is carried by static cards) ──
   One or two screens bleeding off opposite edges of the frame, the line of copy in the corner they
   leave free. Every phone is anchored to the edge it bleeds off, and the copy to the edge it sits
   against, so a 4:5 frame only opens the middle instead of dragging the composition out of it. */
.still{--ps:1.15}   /* the screen is a little larger than life here: two of them carry the whole card */
.still .phone{width:calc(390 * var(--ps) * var(--u));height:calc(844 * var(--ps) * var(--u));border-radius:calc(44 * var(--ps) * var(--u))}
.still .still-copy{width:calc(448 * var(--u))}
.still .still-copy h2{font-size:calc(44 * var(--u))}
.still .still-copy p{font-size:calc(24 * var(--u))}

/* A — copy top-left, the chosen method under it running off the bottom, the list beside it from off the top */
.sA .still-copy{left:calc(78 * var(--u));top:calc(110 * var(--u))}
.sA .p1{left:calc(78 * var(--u));bottom:calc(-349 * var(--u))}
.sA .p2{left:calc(570 * var(--u));top:calc(-111 * var(--u))}   /* the cut lands on empty page just under the nav row: measured, the island ends at 57 and the FABs run 64-110 */

/* B — the same arrangement turned over: the screen enters from the top, the copy sits beneath it */
.sB .p1{left:calc(78 * var(--u));top:calc(-335 * var(--u))}   /* the cut lands above the speed selector, not through it */
.sB .still-copy{left:calc(78 * var(--u));bottom:calc(120 * var(--u))}
.sB .p2{left:calc(570 * var(--u));bottom:calc(9 * var(--u))}

/* C — one screen: it takes the right of the frame and the copy holds the left */
.sC .still-copy{left:calc(78 * var(--u));top:calc(200 * var(--u));width:calc(420 * var(--u))}
.sC .p1{left:calc(545 * var(--u));bottom:calc(-250 * var(--u))}