.boxes{--pop:#F6F23A;display:grid;gap:36px;max-width:1180px;margin-inline:auto;}

.scard{
  --btn:84px; --gap:14px;
  --nw:calc(var(--btn) + var(--gap));
  --nh:calc(var(--btn) + var(--gap));
  --f:26px;
  --pr:34px;
  --panel:#FFFFFF; --panel-ink:#0A1B44; --panel-muted:#4A5B82;
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  min-height:clamp(340px,29vw,380px);
  border-radius:44px;background:#071433;
  box-shadow:0 26px 50px -30px rgba(10,27,68,.55);
  transition:box-shadow .3s,transform .3s;
}
.scard:target{box-shadow:0 0 0 4px var(--brand),0 30px 60px -28px rgba(15,98,230,.7);transform:translateY(-6px);}

/* White panel with the notch */
.scard-panel{position:absolute;z-index:2;top:50%;translate:0 -50%;right:40px;width:clamp(330px,40%,470px);}
.pp{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.3));}
.pp i{position:absolute;background:var(--panel);}
.pp .pa{left:0;top:0;bottom:0;right:var(--nw);border-radius:var(--pr);}
.pp .pb{left:0;right:0;top:var(--nh);bottom:0;border-radius:var(--pr);}
.pp .pf{right:calc(var(--nw) - var(--f));top:calc(var(--nh) - var(--f));width:var(--f);height:calc(var(--f) + 1px);
  background:radial-gradient(circle at 100% 0,transparent var(--f),var(--panel) calc(var(--f) + .5px));}

.ptxt{position:relative;z-index:1;padding:32px 36px 38px;}
.plabel{margin:0;font-size:15px;color:var(--panel-muted);}
.ptitle{margin:6px 0 22px;padding-right:var(--nw);font:600 clamp(24px,2.5vw,32px)/1.15 var(--font-display);letter-spacing:-0.02em;color:var(--panel-ink);}
.pdesc{max-width:34ch;font-size:17px;color:var(--panel-muted);}

/* Round arrow button (opens the letter) */
.scard-go{position:absolute;z-index:2;top:0;right:0;width:var(--btn);height:var(--btn);border:0;padding:0;border-radius:50%;background:var(--pop);color:#0A1B44;display:grid;place-items:center;cursor:pointer;transition:transform .5s cubic-bezier(.3,.7,.2,1);}
.scard-go svg{width:38%;height:38%;}
.scard-go:hover{transform:scale(1.08);}
.scard-go[aria-expanded="true"]{transform:rotate(135deg);}
.scard-go[aria-expanded="true"]:hover{transform:rotate(135deg) scale(1.08);}
.scard-go:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* Animated backgrounds */
.scard-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(900px 500px at 15% 20%,#12408F 0%,rgba(18,64,143,0) 60%),linear-gradient(135deg,#050D26,#0A1B44 60%,#0B2A6B);}
.scard-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%);}

/* aurora */
[data-scene="aurora"] i{position:absolute;border-radius:50%;filter:blur(56px);opacity:.7;mix-blend-mode:screen;aspect-ratio:1;animation:drift 16s ease-in-out infinite alternate;}
[data-scene="aurora"] i:nth-child(1){width:46%;left:-6%;top:-20%;background:#1B5CFF;}
[data-scene="aurora"] i:nth-child(2){width:38%;left:24%;top:30%;background:#19C6FF;animation-duration:20s;animation-delay:-6s;}
[data-scene="aurora"] i:nth-child(3){width:34%;left:8%;top:52%;background:#6C5CFF;animation-duration:18s;animation-delay:-3s;}
@keyframes drift{to{transform:translate(18%,-14%) scale(1.25);}}

/* bars */
[data-scene="bars"] .bars{position:absolute;left:5%;top:16%;bottom:0;width:58%;display:flex;align-items:flex-end;gap:1.6%;}
[data-scene="bars"] .bars b{flex:1;height:calc(var(--h) * 100%);border-radius:5px 5px 0 0;background:linear-gradient(#63EDFF,#1B8CFF);transform-origin:bottom;animation:bar 2.8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -0.18s);}
[data-scene="bars"]::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:18%;background:linear-gradient(90deg,transparent,rgba(120,220,255,.2),transparent);transform:translateX(-120%);animation:sweep 6s ease-in-out infinite;}
@keyframes bar{from{transform:scaleY(.5);}to{transform:scaleY(1);}}
@keyframes sweep{to{transform:translateX(380%);}}

/* orbits */
[data-scene="orbits"] .core{position:absolute;left:30%;top:50%;width:96px;height:96px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#9FF0FF 0,#1B8CFF 45%,rgba(27,140,255,0) 70%);animation:pulse 3.2s ease-in-out infinite;}
[data-scene="orbits"] .r{position:absolute;left:30%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(130,215,255,.38);animation:spin 18s linear infinite;}
[data-scene="orbits"] .r::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#7FE9FF;box-shadow:0 0 12px #7FE9FF;}
[data-scene="orbits"] .r1{width:170px;height:170px;}
[data-scene="orbits"] .r2{width:260px;height:260px;border-style:dashed;animation-duration:26s;animation-direction:reverse;}
[data-scene="orbits"] .r3{width:360px;height:360px;animation-duration:34s;}
[data-scene="orbits"] .r4{width:470px;height:470px;animation-duration:44s;animation-direction:reverse;}
@keyframes spin{to{rotate:360deg;}}
@keyframes pulse{50%{scale:1.25;opacity:.75;}}

/* network */
[data-scene="network"] svg,[data-scene="waves"] svg{position:absolute;inset:0;width:100%;height:100%;}
[data-scene="network"] .ln{stroke:rgba(140,215,255,.5);stroke-width:1;stroke-dasharray:3 7;animation:dash 3s linear infinite;}
[data-scene="network"] .nd{fill:#A8EBFF;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 6px #7FE9FF);animation:node 2.6s ease-in-out infinite alternate;}
@keyframes dash{to{stroke-dashoffset:-20;}}
@keyframes node{from{opacity:.45;transform:scale(.8);}to{opacity:1;transform:scale(1.6);}}

/* waves */
[data-scene="waves"] .w{fill:none;stroke:url(#waveGrad);stroke-width:1.5;opacity:.35;}
[data-scene="waves"] .w.fx{opacity:1;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:70 330;animation:flow 5.5s linear infinite;}
@keyframes flow{from{stroke-dashoffset:0;}to{stroke-dashoffset:-400;}}

/* Pause when off screen, and for people who prefer less motion */
.scard.is-off .scard-bg *,.scard.is-off .scard-bg::before{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .scard-bg *,.scard-bg::before{animation:none !important;}
  .scard,.scard-go{transition:none;}

/* Tablet and phone: panel moves to the bottom of the card */
@media (max-width:820px){
  .scard{--btn:64px;--gap:12px;--pr:26px;--f:20px;min-height:500px;border-radius:32px;}
  .scard-panel{top:auto;translate:none;left:16px;right:16px;bottom:16px;width:auto;}
  .ptxt{padding:24px 24px 28px;}
  .pdesc{max-width:none;}
  .scard.reveal .scard-panel{translate:0 34px;}
  .scard.reveal.in-view .scard-panel{translate:none;}
}
}