/* MiseGuard landing page 1.1.0, part 3 of 3: the opened layer of "Pick your platform. Take it apart." (owner,
   27 October 2026). One card lifts out of the stack (landing-layers moves it from the plate's place with transforms
   only), plays its layer's illustration once, and the panel under it tells the same story in words.
   Every drawing rests in its labelled end state; the motion runs only while the card has .is-play, which the script
   never sets with reduced motion or "Pause animations" on. Off screen, the card's animations are paused. */

.mg-xcol { position: relative; }
.mg-lcard { position: absolute; z-index: 15; top: 6px; left: 50%; width: 300px; margin-left: -150px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 10px 10px 0 var(--ink); padding: 10px 12px 12px; transform-origin: 50% 50%; will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.3, 1.1, .4, 1), opacity .3s; touch-action: pan-y; }
.mg-lcard[hidden] { display: none; }
.mg-lcard.is-moving { transition: none; }
.mg-lcard-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.mg-lcard-hd b { font-size: 11.5px; font-weight: 600; }
.mg-ex { font-size: 10px; background: var(--butter); border: 1.5px solid var(--ink); border-radius: 4px; padding: 3px 6px; }
.mg-lcard-why { display: none; margin: 18px 6px 10px; font: 700 18px/1.3 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.mg-lcard.is-ghost { border-style: dashed; box-shadow: 10px 10px 0 var(--rule); }
.mg-lcard.is-ghost .mg-lcard-why { display: block; }
.mg-lcard.is-ghost .mg-anim { display: none !important; }
.mg-anim { display: none; width: 100%; height: auto; margin-top: 6px; }
.mg-anim.is-on { display: block; }
.mg-lcard.is-swap .mg-anim, .mg-lcard.is-swap .mg-lcard-why { animation: mg-fadein .3s ease-out; }
.mg-lcard.is-off-screen *, .mg-paused .mg-lcard * { animation-play-state: paused !important; }

/* Shared drawing styles */
.mg-anim text { font-family: var(--mono); fill: var(--ink); text-rendering: geometricPrecision; }
.mg-anim .t-xs { font-size: 9.5px; letter-spacing: .04em; fill: var(--graphite); }
.mg-anim .t-sm { font-size: 11px; }
.mg-anim .t-pill { font-size: 11px; font-weight: 600; }
.mg-anim .t-big { font: 800 30px var(--disp); }
.mg-anim rect, .mg-anim path, .mg-anim circle, .mg-anim polyline { vector-effect: non-scaling-stroke; }

/* L1 The screen */
.a1 .a1-f rect, .a1 .a1-f path, .a1 .a1-f circle { fill: none; stroke: var(--ink); stroke-width: 2; }
.a1 .a1-f .fill { fill: var(--ink); stroke: none; }
.a1-f { opacity: 0; }
.a1-web { opacity: 1; }
.a1-pill { fill: var(--blue); }
.a1-check { opacity: 0; }
.a1-up { fill: #fff; }
.a1-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 200; stroke-dashoffset: 0; }
.a1-dot { fill: var(--magenta); transform-box: fill-box; transform-origin: center; }
.a1-n2 { opacity: 0; }
.a1-t { fill: var(--graphite); }
.a1-tweb { fill: var(--magenta-ink); font-weight: 600; }
.is-play .a1-f { animation: a1-cycle 9s linear infinite; }
.is-play .a1-app { animation-delay: -6s; }
.is-play .a1-ext { animation-delay: -3s; }
.is-play .a1-t { animation: a1-tab 9s linear infinite; }
.is-play .a1-tapp { animation-delay: -6s; }
.is-play .a1-text { animation-delay: -3s; }
@keyframes a1-cycle { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a1-tab { 0%, 30% { fill: #b5144a; } 34%, 96% { fill: #4c5a68; } 100% { fill: #b5144a; } }
.is-play .a1-pill { animation: a1-pill 1.6s ease-out both; }
@keyframes a1-pill { 0%, 45% { fill: #b4bfc9; } 60%, 100% { fill: #1d3fd8; } }
.is-play .a1-check { animation: a1-out 1.6s ease-out both; }
.is-play .a1-up { animation: a1-in 1.6s ease-out both; }
@keyframes a1-out { 0%, 45% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes a1-in { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
.is-play .a1-line { animation: a1-draw 1.8s .5s ease-out both; }
@keyframes a1-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.is-play .a1-dot { animation: a1-pulse 1.4s 2.2s ease-in-out infinite; }
@keyframes a1-pulse { 50% { transform: scale(1.8); opacity: .5; } }
.is-play .a1-n2 { animation: a1-out2 2.6s ease-out both; }
.is-play .a1-n0 { animation: a1-in2 2.6s ease-out both; }
@keyframes a1-out2 { 0%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes a1-in2 { 0%, 70% { opacity: 0; } 85%, 100% { opacity: 1; } }

/* L2 From outside */
.a2-ring { fill: none; stroke: var(--blue-wash); stroke-width: 1.5; }
.a2-sweep { fill: var(--blue); opacity: .18; transform-box: view-box; transform-origin: 150px 112px; }
.a2-site { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.a2-every { fill: var(--blue) !important; font-weight: 500; }
.a2-c rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.a2-tick { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.is-play .a2-sweep { animation: a2-spin 3s linear infinite; }
@keyframes a2-spin { to { transform: rotate(360deg); } }
.is-play .a2-c { animation: a2-row .4s ease-out both; animation-delay: calc(.7s + var(--d) * .45s); }
.is-play .a2-tick { animation: a2-tick .35s ease-out both; animation-delay: calc(.95s + var(--d) * .45s); }
@keyframes a2-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes a2-tick { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }

/* L3 CDN route */
.a3-path { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 4 4; }
.a3-src rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.a3-bot rect { stroke: var(--magenta); }
.a3-edge { fill: var(--blue-wash); stroke: var(--blue); stroke-width: 2; }
.a3-site { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.a3-d { fill: var(--blue); }
.a3-pass { transform: translate(150px, 244px); }
.a3-cache { fill: #6f86ff; transform: translate(150px, 56px); }
.a3-bounce { transform: translate(270px, 120px); }
.a3-bounce circle { fill: var(--magenta); }
.a3-bounce path { stroke: #fff; stroke-width: 1.6; }
.a3-l { fill: var(--blue) !important; }
.a3-lbot { fill: var(--magenta-ink) !important; }
.is-play .a3-pass { animation: a3-pass 3.6s ease-in-out infinite; }
.is-play .a3-cache { animation: a3-cache 3.6s ease-in-out 1.1s infinite both; }
.is-play .a3-bounce { animation: a3-bounce 3.6s ease-in-out 2s infinite both; }
@keyframes a3-pass { 0% { transform: translate(60px, 48px); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(150px, 150px); } 85% { transform: translate(150px, 244px); opacity: 1; } 100% { transform: translate(150px, 244px); opacity: 0; } }
@keyframes a3-cache { 0% { transform: translate(150px, 48px); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(150px, 136px); } 62% { transform: translate(150px, 56px); opacity: 1; } 80%, 100% { transform: translate(150px, 56px); opacity: 0; } }
@keyframes a3-bounce { 0% { transform: translate(240px, 48px); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(168px, 132px); } 48% { transform: translate(176px, 128px) scale(1.4); } 72% { transform: translate(270px, 120px); opacity: 1; } 90%, 100% { transform: translate(270px, 120px); opacity: 0; } }

/* L4 E-mail route */
.a4-beam { fill: var(--blue); opacity: 0; transform: translateY(70px); }
.a4-tray rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.a4-scan rect { fill: none; stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 4 3; }
.a4-scan path { fill: none; stroke: var(--graphite); stroke-width: 1.2; }
.a4-inbox rect { stroke: var(--blue); stroke-width: 2; }
.a4-env { transform: translate(var(--x1), var(--y1)); }
.a4-env rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.a4-env path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.a4-spam rect { stroke: var(--graphite); }
.a4-virus rect { stroke: var(--magenta); }
.a4-lead rect { stroke: var(--blue); stroke-width: 2; }
.a4-bug circle { fill: var(--magenta); stroke: var(--ink); stroke-width: 1; }
.a4-bug path { fill: none; stroke: #fff; stroke-width: 1.2; }
.a4-bug { transform-box: fill-box; transform-origin: center; }
.a4-tray text, .a4-caught, .a4-subj { letter-spacing: 0 !important; }
.a4-caught { fill: var(--magenta-ink) !important; }
.a4-subj { fill: var(--blue) !important; font-weight: 600; }
.is-play .a4-beam { animation: a4-beam 1.4s .9s ease-in-out both; }
@keyframes a4-beam { 0% { opacity: 0; transform: translateY(40px); } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(104px); } }
.is-play .a4-env { animation: a4-env 3.8s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--d) * .15s); }
@keyframes a4-env { 0% { transform: translate(var(--x0), -24px); opacity: 0; } 14% { transform: translate(var(--x0), var(--y0)); opacity: 1; } 58% { transform: translate(var(--x0), var(--y0)); } 100% { transform: translate(var(--x1), var(--y1)); } }
.is-play .a4-bug { animation: a4-pop .5s 2.2s ease-out both; }
@keyframes a4-pop { from { transform: scale(0); } to { transform: scale(1); } }
.is-play .a4-caught, .is-play .a4-subj { animation: a4-fade .5s 3.7s ease-out both; }
@keyframes a4-fade { from { opacity: 0; } to { opacity: 1; } }

/* L5 Inside the site */
.a5-shield { fill: var(--blue-wash); stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 280; stroke-dashoffset: 0; }
.a5-check { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 0; }
.a5-pk rect { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.a5-pk text { fill: var(--ink) !important; font-size: 8.5px !important; letter-spacing: 0 !important; }
.a5-x { stroke: var(--magenta); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.a5-file { fill: var(--blue-wash); stroke: var(--ink); stroke-width: 1.4; }
.a5-bar { fill: var(--magenta); transform: translateX(262px); }
.a5-line { stroke: var(--ink); stroke-width: 1.5; }
.a5-snap { fill: var(--blue); stroke: var(--ink); stroke-width: 1.4; }
.a5-note { display: none; fill: var(--ink) !important; font-weight: 600; }
.a5-part.is-ghost > :not(.a5-note) { opacity: .22; }
.a5-part.is-ghost .a5-note { display: block; }
.a5-part.is-ghost * { animation: none !important; }
.is-play .a5-shield { animation: a5-draw 1.2s ease-out both; }
@keyframes a5-draw { from { stroke-dashoffset: 280; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
.is-play .a5-check { animation: a5-check .5s 1.1s ease-out both; }
@keyframes a5-check { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
.is-play .a5-l { animation: a5-left .7s ease-out both; animation-delay: calc(1.2s + var(--d) * .3s); }
.is-play .a5-r { animation: a5-right .7s ease-out both; animation-delay: calc(1.2s + var(--d) * .3s); }
@keyframes a5-left { 0% { transform: translateX(-70px); opacity: 0; } 70% { transform: translateX(6px); opacity: 1; } 100% { transform: none; } }
@keyframes a5-right { 0% { transform: translateX(70px); opacity: 0; } 70% { transform: translateX(-6px); opacity: 1; } 100% { transform: none; } }
.is-play .a5-x { animation: a4-fade .3s both; animation-delay: calc(1.75s + var(--d) * .3s); }
.is-play .a5-bar { animation: a5-scan 1.8s 2.6s ease-in-out both; }
@keyframes a5-scan { from { transform: translateX(0); } to { transform: translateX(262px); } }
.is-play .a5-file { animation: a5-file 1.8s 2.6s linear both; }
@keyframes a5-file { 0% { fill: #fff; } 100% { fill: #dce3fb; } }
.is-play .a5-snap { animation: a5-snap .45s ease-out both; animation-delay: calc(4.4s + var(--d) * .18s); }
@keyframes a5-snap { from { transform: translateY(-26px); opacity: 0; } to { transform: none; opacity: 1; } }

/* The panel under the stage */
.mg-lpanel { margin-top: 16px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 14px 16px; }
.mg-lpanel[hidden] { display: none; }
.mg-lpanel-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mg-lpanel h3 { margin: 0; font: 700 17px/1.2 var(--disp); letter-spacing: -.02em; }
.mg-lpanel h3:focus { outline: none; }
.mg-lpanel h3:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.mg-lpanel p { margin: 8px 0 12px; font-size: 14.5px; color: #24313f; }
.mg-lpanel-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-lp-btn { width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--ink); background: var(--sheet); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mg-lp-btn:hover { background: var(--magenta-ink); color: #fff; }
.mg-lp-btn svg { width: 16px; height: 16px; }
.mg-lpanel-nav .mg-btn { margin-left: auto; }
.mg-lhint { position: absolute; z-index: 16; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 11.5px; white-space: nowrap; animation: mg-fadein .4s ease-out; }
.mg-lhint[hidden] { display: none; }
@keyframes mg-fadein { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .mg-lcard { width: 262px; margin-left: -131px; top: 0; padding: 8px 10px 10px; box-shadow: 6px 6px 0 var(--ink); }
  .mg-lcard-why { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-lcard, .mg-lcard * { animation: none !important; transition: none !important; }
  .mg-lhint { animation: none; }
}