/* ---------- Cartridge cards: holo foil, depth layers, spring tilt ---------- */
.cards{gap:28px;perspective:1200px;perspective-origin:50% 40%}
.card{
  --rx:0deg;--ry:0deg;--px:50%;--py:50%;--hi:0;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:opacity .8s,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  border-radius:18px;will-change:transform;
}
/* entrance: cards fly in from depth, staggered */
.card.reveal{opacity:0;translate:0 70px;scale:.88;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.card.reveal.in{opacity:1;translate:0 0;scale:1;transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),0s}
.card:hover{box-shadow:0 40px 90px -40px var(--c),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}

/* faces */
.card .in,.card .back{transform-style:preserve-3d;overflow:hidden;
  background:
    radial-gradient(circle at 30% 0%,color-mix(in srgb,var(--c) 28%,transparent),transparent 62%),
    linear-gradient(160deg,#14141b,#09090d 70%)}
.card .back{overflow:hidden}

/* holographic foil: rainbow sheen that tracks the cursor */
.card .in::before,.card .back::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px),
    linear-gradient(115deg,transparent 20%,rgba(255,60,172,.5) 36%,rgba(80,170,255,.5) 46%,rgba(60,255,190,.5) 56%,rgba(255,220,80,.5) 66%,transparent 80%);
  background-size:100% 100%,260% 260%;
  background-position:0 0,calc(var(--px) * 1) calc(var(--py) * 1);
  mix-blend-mode:color-dodge;opacity:calc(var(--hi) * .55);transition:opacity .35s;
}
/* moving specular glare */
.card .in::after{z-index:4;background:radial-gradient(circle 220px at var(--px) var(--py),rgba(255,255,255,.22),transparent 70%)}

/* depth: layers float above the card plane */
.card .ico{transform:translateZ(60px);box-shadow:0 20px 40px -10px var(--c),0 0 40px -6px var(--c);transition:transform .4s cubic-bezier(.2,.8,.2,1);animation:icofloat 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s)}
.card:hover .ico{transform:translateZ(90px) scale(1.08)}
.card h3{transform:translateZ(40px);letter-spacing:-.01em}
.card p{transform:translateZ(24px)}
.card .id{transform:translateZ(18px)}
@keyframes icofloat{50%{translate:0 -6px}}

/* animated light edge that sweeps around the card on hover */
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent 0 60%,var(--c) 85%,#fff 92%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;animation:spin 3s linear infinite;
}
.card:hover::before{opacity:1}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}

/* back side: spec sheet with barcode */
.card .back{padding:26px 26px 64px;color:#bdbcb6;line-height:1.5}
.card .back::after{
  content:"";position:absolute;left:26px;right:26px;bottom:24px;height:26px;opacity:.55;
  background:repeating-linear-gradient(90deg,var(--c) 0 2px,transparent 2px 5px,var(--c) 5px 6px,transparent 6px 11px,var(--c) 11px 14px,transparent 14px 16px);
  -webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent);
}

@media (hover:none){.card .ico{animation:none}}
@media (prefers-reduced-motion:reduce){.card .ico,.card::before{animation:none}.card.reveal{translate:0 0;scale:1}}

/* back-face actions */
.card .acts{position:absolute;left:26px;right:26px;bottom:62px;display:flex;gap:8px;flex-wrap:wrap;transform:translateZ(30px);z-index:5}
.card .acts button,.card .acts a{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-decoration:none;color:#000;background:var(--c);border:0;border-radius:99px;padding:8px 13px;transition:transform .25s,box-shadow .25s}
.card .acts a{background:transparent;color:var(--c);border:1px solid var(--c)}
.card .acts button:hover,.card .acts a:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--c)}

/* 3D phone stage */
html.stage-open,html.stage-open body{overflow:hidden}
#stage{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at 35% 50%,color-mix(in srgb,var(--c) 22%,#050507) 0,rgba(5,5,7,.96) 70%);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .5s}
#stage.open{opacity:1;pointer-events:auto}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}
#stage .x{position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;font-size:16px;z-index:2}
#stage .x:hover{border-color:var(--c);color:var(--c)}
#stage .panel{position:absolute;right:8vw;top:50%;transform:translate(30px,-50%);width:min(380px,84vw);opacity:0;transition:opacity .7s .35s,transform .9s .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#stage.open .panel{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#stage .mid{font:12px 'JetBrains Mono',monospace;color:var(--c);letter-spacing:.15em}
#stage h3{font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin:10px 0 8px;letter-spacing:-.03em}
#stage em{display:block;font-style:normal;color:var(--c);margin-bottom:18px}
#stage p{color:#aaa9a3;line-height:1.6;margin-bottom:26px}
#stage .play{display:inline-block;background:var(--c);color:#000;font:700 12px 'JetBrains Mono',monospace;letter-spacing:.1em;text-decoration:none;padding:14px 22px;border-radius:99px;box-shadow:0 14px 40px -12px var(--c);transition:transform .25s}
#stage .play:hover{transform:translateY(-3px) scale(1.03)}
#stage small{display:block;margin-top:26px;color:#6c6b66;font:11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:800px){#stage .panel{right:auto;left:50%;top:auto;bottom:6vh;transform:translate(-50%,30px);text-align:center}#stage.open .panel{transform:translate(-50%,0)}#stage p{display:none}#stage small{display:none}}