/* Four formal stages: graphics + Magic UI-style motion for #formation-stages */
#formation-stages{position:relative;isolation:isolate;overflow:hidden;--d0:#C27C3A;--d1:#3A7A96;--d2:#2C4A61;--d3:#6E8B3D}
#formation-stages::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(154,98,36,.22) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask:radial-gradient(ellipse 55% 70% at 88% 18%,#000 10%,transparent 70%);mask:radial-gradient(ellipse 55% 70% at 88% 18%,#000 10%,transparent 70%)}

/* Top row: heading + tree rings */
#formation-stages .fm-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26vw,320px);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:8px}
@media (max-width:860px){#formation-stages .fm-top{grid-template-columns:1fr}#formation-stages .fm-rings{max-width:280px;justify-self:center}}
#formation-stages .fm-top .head{margin-bottom:0}
#formation-stages .head h2 .fm-grow{background:linear-gradient(100deg,var(--teal,#1F3446) 0 35%,var(--gold-ink,#9A6224) 50%,var(--teal,#1F3446) 65% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fm-shine 8s ease-in-out infinite}
@keyframes fm-shine{0%,20%{background-position:110% 0}60%,100%{background-position:-110% 0}}

.fm-rings{position:relative;margin:0;display:grid;gap:10px;justify-items:center;text-align:center}
.fm-rings svg{width:100%;height:auto;overflow:visible;max-width:100%}
.fm-rings .fm-ring{fill:none;stroke:var(--gold-ink,#9A6224);stroke-width:1.6;stroke-linecap:round;opacity:.55;stroke-dasharray:var(--len,500);stroke-dashoffset:0;transition:stroke .3s,stroke-width .3s,opacity .3s}
.fm-rings .fm-ongoing{stroke:var(--steel,#3A7A96);stroke-dasharray:3 6;opacity:.6;animation:fm-spin 60s linear infinite;transform-origin:0 0}
@keyframes fm-spin{to{transform:rotate(360deg)}}
.fm-rings .fm-ring-g{cursor:pointer}
.fm-rings .fm-ring-g .fm-ring{pointer-events:stroke;stroke-width:1.8}
.fm-rings .fm-ring-g:hover .fm-ring,.fm-rings .fm-ring-g.on .fm-ring{stroke:var(--gold,#D29A52);stroke-width:4;opacity:1;filter:drop-shadow(0 0 6px rgba(210,154,82,.55))}
#formation-stages.fm-has-hl .fm-ring-g:not(.on) .fm-ring{opacity:.25}
.fm-rings .fm-core{fill:var(--gold,#D29A52);opacity:.25;animation:fm-breathe 3.2s ease-in-out infinite;transform-origin:0 0}
.fm-rings .fm-core-dot{fill:var(--gold-ink,#9A6224)}
@keyframes fm-breathe{50%{transform:scale(1.6);opacity:.08}}
.fm-rings figcaption{display:grid;gap:2px;font-size:.85rem;color:var(--muted,#4F6170);max-width:30ch}
.fm-rings figcaption b{font:600 1.05rem/1.2 var(--f-display);color:var(--teal,#1F3446)}
.fm-rings .fm-ring-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--teal,#1F3446);color:#fff;font:800 .72rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;margin-top:-28px;box-shadow:0 10px 24px -12px rgba(19,30,41,.6)}
.fm-rings .fm-ring-tag.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Lens bar: four dimensions */
#formation-stages .fm-lensbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:26px 0 22px}
#formation-stages .fm-lens-lbl{font:700 .72rem/1.2 var(--f-label,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink,#9A6224)}
#formation-stages .fm-chips{display:flex;flex-wrap:wrap;gap:8px}
#formation-stages .fm-chips button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--white,#fff);border:1.5px solid var(--line,#CCD8DE);font:700 .88rem/1 var(--f-body);color:var(--ink,#131E29);transition:border-color .2s,background .2s,color .2s,transform .2s}
#formation-stages .fm-chips button:hover{border-color:var(--gold,#D29A52);transform:translateY(-1px)}
#formation-stages .fm-chips button:focus-visible{outline:3px solid var(--gold,#D29A52);outline-offset:2px}
#formation-stages .fm-chips button[aria-pressed="true"]{background:var(--teal,#1F3446);border-color:var(--teal,#1F3446);color:#fff}
#formation-stages .fm-dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
#formation-stages .fm-dot.d0{background:var(--d0)}#formation-stages .fm-dot.d1{background:var(--d1)}#formation-stages .fm-dot.d2{background:var(--d2)}#formation-stages .fm-dot.d3{background:var(--d3)}
#formation-stages .fm-chips button[aria-pressed="true"] .fm-dot{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
#formation-stages .fm-dim-desc{flex-basis:100%;margin:0;color:var(--muted,#4F6170);font-size:.95rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s}
#formation-stages .fm-dim-desc.show{max-height:80px;opacity:1}

/* Rail above cards */
#formation-stages .fm-rail{position:relative;height:18px;margin:0 0 14px}
#formation-stages .fm-rail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:8px;height:2px;background:var(--line,#CCD8DE);border-radius:2px}
#formation-stages .fm-rail-fill{position:absolute;left:12.5%;top:8px;height:2px;width:0;background:linear-gradient(90deg,var(--gold-ink,#9A6224),var(--gold,#D29A52));border-radius:2px;transition:width 1.6s cubic-bezier(.2,.7,.2,1) .3s}
#formation-stages.fm-in .fm-rail-fill{width:75%}
#formation-stages .fm-spark{position:absolute;top:3px;left:12.5%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,#F3C98B 45%,rgba(210,154,82,0) 72%);opacity:0}
#formation-stages.fm-in .fm-spark{animation:fm-travel 4.5s ease-in-out 2s infinite}
@keyframes fm-travel{0%{left:12.5%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:87.5%;opacity:0}}
#formation-stages .fm-rail b{position:absolute;top:2px;left:calc(12.5% + var(--x) * 25%);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--white,#fff);border:2px solid var(--gold,#D29A52);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--x) * .35s + .4s)}
#formation-stages.fm-in .fm-rail b{transform:scale(1)}
@media (max-width:980px){#formation-stages .fm-rail{display:none}}

/* Cards */
#formation-stages .fm-card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:10px;align-content:start;border-radius:12px;cursor:default;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
#formation-stages .fm-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(210,154,82,.14),transparent 70%)}
#formation-stages .fm-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;background:conic-gradient(from var(--fm-a,0deg),transparent 0 70%,#D29A52 82%,#F3C98B 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fm-beam 5s linear infinite}
@property --fm-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fm-beam{to{--fm-a:360deg}}
#formation-stages .fm-card:hover,#formation-stages .fm-card.fm-hl,#formation-stages .fm-card:focus-visible{transform:translateY(-6px);box-shadow:0 26px 48px -30px rgba(19,30,41,.55);border-color:transparent;outline:none}
#formation-stages .fm-card:hover::before,#formation-stages .fm-card.fm-hl::before,#formation-stages .fm-card:hover::after,#formation-stages .fm-card.fm-hl::after,#formation-stages .fm-card:focus-visible::after{opacity:1}
#formation-stages .fm-card .tag{position:absolute;top:18px;right:20px;font:700 2.6rem/1 var(--f-display);color:transparent;-webkit-text-stroke:1.2px rgba(154,98,36,.35);letter-spacing:0;transition:transform .4s,-webkit-text-stroke-color .3s}
#formation-stages .fm-card:hover .tag,#formation-stages .fm-card.fm-hl .tag{transform:translateY(-2px) scale(1.06);-webkit-text-stroke-color:var(--gold,#D29A52)}
#formation-stages .fm-emblem{position:relative;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--teal,#1F3446),var(--teal-2,#2C4A61));box-shadow:0 12px 24px -14px rgba(19,30,41,.7);margin-bottom:4px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
#formation-stages .fm-emblem svg{width:38px;height:38px;fill:none;stroke:#F3C98B;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#formation-stages .fm-emblem svg *{stroke-dasharray:var(--len,200);stroke-dashoffset:0}
#formation-stages .fm-halo{position:absolute;inset:-6px;border-radius:20px;border:1.5px solid rgba(210,154,82,.45);opacity:0;transform:scale(.9);transition:opacity .3s,transform .4s}
#formation-stages .fm-card:hover .fm-emblem,#formation-stages .fm-card.fm-hl .fm-emblem{transform:rotate(-4deg) scale(1.06)}
#formation-stages .fm-card:hover .fm-halo,#formation-stages .fm-card.fm-hl .fm-halo{opacity:1;transform:scale(1);animation:fm-halo 1.8s ease-out infinite}
@keyframes fm-halo{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.25);opacity:0}}
#formation-stages .fm-card:hover .fm-emblem svg *{animation:fm-redraw 1.1s ease forwards}
@keyframes fm-redraw{0%{stroke-dashoffset:var(--len,200)}100%{stroke-dashoffset:0}}
#formation-stages .fm-lens{margin:4px 0 0;padding:10px 12px;border-radius:8px;background:var(--mist,#E7EEF1);font-size:.92rem;line-height:1.45;color:var(--ink,#131E29);display:flex;gap:9px;align-items:baseline}
#formation-stages .fm-lens .fm-dot{transform:translateY(1px)}
#formation-stages .fm-lens.fm-pop{animation:fm-pop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes fm-pop{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}

/* Tail: ongoing formation */
#formation-stages .fm-tail{display:flex;align-items:center;gap:14px;margin-top:22px}
#formation-stages .fm-tail-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--steel,#3A7A96) 0 6px,transparent 6px 12px);opacity:.6;background-size:24px 2px;animation:fm-march 1.6s linear infinite}
@keyframes fm-march{to{background-position:24px 0}}
#formation-stages .fm-tail-pill{display:grid;gap:2px;background:var(--white,#fff);border:1.5px dashed var(--steel,#3A7A96);border-radius:12px;padding:10px 16px;min-width:0}
#formation-stages .fm-tail-pill small{font:700 .68rem/1.2 var(--f-label,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--steel,#3A7A96)}
#formation-stages .fm-tail-pill b{font:600 1rem/1.25 var(--f-display);color:var(--teal,#1F3446)}

/* Entrance (only armed when the section starts below the fold) */
#formation-stages.fm-armed .fm-rings .fm-ring:not(.fm-ongoing){stroke-dashoffset:var(--len,500)}
#formation-stages.fm-armed .fm-emblem svg *{stroke-dashoffset:var(--len,200)}
#formation-stages.fm-armed .fm-card{opacity:0;transform:translateY(18px);filter:blur(4px)}
#formation-stages.fm-armed.fm-in .fm-rings .fm-ring{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1),stroke .3s,stroke-width .3s,opacity .3s}
#formation-stages.fm-armed.fm-in .fm-ring-g:nth-of-type(2) .fm-ring{transition-delay:.15s}
#formation-stages.fm-armed.fm-in .fm-ring-g:nth-of-type(3) .fm-ring{transition-delay:.35s}
#formation-stages.fm-armed.fm-in .fm-ring-g:nth-of-type(4) .fm-ring{transition-delay:.55s}
#formation-stages.fm-armed.fm-in .fm-ring-g:nth-of-type(5) .fm-ring{transition-delay:.75s}
#formation-stages.fm-armed.fm-in .fm-card{opacity:1;transform:none;filter:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease,box-shadow .35s,border-color .35s;transition-delay:calc(var(--i,0) * 120ms + .2s)}
#formation-stages.fm-armed.fm-in .fm-card:hover,#formation-stages.fm-armed.fm-in .fm-card.fm-hl{transform:translateY(-6px);transition-delay:0s}
#formation-stages.fm-armed.fm-in .fm-emblem svg *{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s ease;transition-delay:calc(var(--i,0) * 120ms + .6s)}

@media (prefers-reduced-motion:reduce){
  #formation-stages .head h2 .fm-grow{animation:none;background:none;color:inherit}
  .fm-rings .fm-ongoing,.fm-rings .fm-core,#formation-stages .fm-card::after,#formation-stages .fm-tail-line,#formation-stages.fm-in .fm-spark,#formation-stages .fm-halo{animation:none!important}
  #formation-stages .fm-card:hover .fm-emblem svg *{animation:none}
  #formation-stages .fm-rail-fill,#formation-stages .fm-rail b{transition:none}
}