/* THE SYSTEM V7 — five scenes driven by one idea from motion film: a clock, a playhead, and a draft beneath the finish. S02 One result separates into X, Y and Z as the reader moves through the three questions. S02A The anchor structure stays drawn and fixed; the evidence layer changes with the role. S03 A playhead travels the operating loop; evidence keeps arriving in the centre. S04 Each analysis is a small scene that loops on its own; the one being read plays in full. S05 A playhead runs over two synchronised tracks — adopted, not taken — as the precedents are read. Hero and copy are unchanged. Without JavaScript every scene is a complete static drawing. */ /* ---------------- S02 · one result, three readings ---------------- */ #what-it-reads .sp-svg{display:block;width:min(100%,500px);height:auto;overflow:visible} #what-it-reads .sp-cap{fill:rgba(255,255,255,.62);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} #what-it-reads .sp-result{fill:none;stroke:#F0EBDD;stroke-width:3;stroke-linecap:round} #what-it-reads .sp-strand{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-width .35s,filter .35s,opacity .35s} #what-it-reads .sp-x{stroke:var(--gold-light)} #what-it-reads .sp-y{stroke:var(--olive)} #what-it-reads .sp-z{stroke:var(--plum)} #what-it-reads .sp-result{stroke-dasharray:1;stroke-dashoffset:0} #what-it-reads .sp-split{fill:var(--gold)} #what-it-reads .sp-node circle{fill:#0C241C;stroke:rgba(255,255,255,.3);stroke-width:2;transition:stroke .35s,filter .35s} #what-it-reads .sp-node text{fill:rgba(255,255,255,.55);font:500 26px var(--display);text-anchor:middle;dominant-baseline:central;transition:fill .35s} #what-it-reads .sp-spark{fill:#FFF6E0;opacity:0} #what-it-reads .axis-stage[data-active="x"] .sp-x,#what-it-reads .axis-stage[data-active="y"] .sp-y,#what-it-reads .axis-stage[data-active="z"] .sp-z{stroke-width:3.6;filter:drop-shadow(0 0 7px rgba(212,188,132,.5))} #what-it-reads .axis-stage[data-active="x"] .sp-nx circle{stroke:var(--gold-light);filter:drop-shadow(0 0 8px rgba(212,188,132,.6))} #what-it-reads .axis-stage[data-active="y"] .sp-ny circle{stroke:var(--olive);filter:drop-shadow(0 0 8px rgba(142,169,141,.55))} #what-it-reads .axis-stage[data-active="z"] .sp-nz circle{stroke:var(--plum);filter:drop-shadow(0 0 8px rgba(180,147,171,.55))} #what-it-reads .axis-stage[data-active="x"] .sp-nx text,#what-it-reads .axis-stage[data-active="y"] .sp-ny text,#what-it-reads .axis-stage[data-active="z"] .sp-nz text,#what-it-reads .axis-stage[data-active="all"] .sp-node text{fill:#fff} #what-it-reads .axis-stage[data-active="all"] .sp-node circle{stroke:var(--gold-light)} /* ---------------- S02A · structure fixed, evidence tailored ---------------- */ #tailoring .tl{position:relative;margin:0} #tailoring .tl-tabs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} #tailoring .tl-roles{display:flex;flex-wrap:wrap;gap:8px} #tailoring .tl-roles button,#tailoring .tl-pause{min-height:36px;padding:7px 14px;border:1px solid #BFB599;border-radius:30px;background:none;color:#365541;font:500 12px/1.2 var(--sans);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s} #tailoring .tl-roles button[aria-pressed="true"]{border-color:var(--forest);background:var(--forest);color:#fff} #tailoring .tl-pause{border-color:transparent;color:var(--fine);text-decoration:underline;text-underline-offset:3px} #tailoring .tl-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#FFFDF6;box-shadow:0 18px 44px -30px rgba(15,42,33,.45)} #tailoring .tl-photo{position:relative;height:clamp(190px,17vw,250px);overflow:hidden;background:#DCE3D5} #tailoring .tl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)} #tailoring .tl[data-active="0"] .tl-photo img[data-role="0"],#tailoring .tl[data-active="1"] .tl-photo img[data-role="1"],#tailoring .tl[data-active="2"] .tl-photo img[data-role="2"]{opacity:1;transform:none} #tailoring .tl-photo::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,32,26,0) 45%,rgba(13,32,26,.55));content:""} #tailoring .tl-role-name{position:absolute;left:18px;bottom:12px;z-index:1;color:#fff;font:400 22px/1.2 var(--display);letter-spacing:-.02em} #tailoring .tl-sheet{position:relative;padding:18px 22px 20px;background-image:linear-gradient(90deg,transparent calc(38% - 1px),rgba(184,152,90,.35) calc(38% - 1px),rgba(184,152,90,.35) 38%,transparent 38%)} #tailoring .tl-head{display:grid;grid-template-columns:38% 1fr;margin:0 0 6px;color:var(--gold-access);font:600 9.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase} #tailoring .tl-head span:last-child{padding-left:16px} #tailoring .tl-rows{margin:0} #tailoring .tl-row{display:grid;grid-template-columns:38% 1fr;align-items:start;padding:11px 0;border-top:1px solid rgba(23,67,52,.12)} #tailoring .tl-row dt{padding-right:12px;color:var(--forest);font:500 13px/1.35 var(--sans)} #tailoring .tl-row dd{position:relative;min-height:1.6em;margin:0;padding-left:16px} /* the draft: plain bars that never move */ #tailoring .tl-draft{position:absolute;top:3px;left:16px;right:0;display:grid;gap:7px;opacity:0;transition:opacity .3s ease} #tailoring .tl.is-drafting .tl-draft{opacity:1} #tailoring .tl:not(.is-live) .tl-draft{display:none} #tailoring .tl-draft i{display:block;height:7px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(23,67,52,.13) 0 10px,rgba(23,67,52,.07) 10px 12px)} /* the finish: this role's evidence, written over the draft */ #tailoring .tl-fill{position:relative;display:none;color:#1F3B2E;font:400 15px/1.45 var(--display);background:#FFFDF6;box-shadow:0 0 0 3px #FFFDF6} #tailoring .tl[data-active="0"] .tl-fill[data-role="0"],#tailoring .tl[data-active="1"] .tl-fill[data-role="1"],#tailoring .tl[data-active="2"] .tl-fill[data-role="2"]{display:block} #tailoring .tl.is-live .tl-fill{animation:tl-write .9s cubic-bezier(.3,.7,.2,1) .5s both} #tailoring .tl.is-live .tl-row:nth-child(2) .tl-fill{animation-delay:.62s} #tailoring .tl.is-live .tl-row:nth-child(3) .tl-fill{animation-delay:.74s} #tailoring .tl.is-live .tl-row:nth-child(4) .tl-fill{animation-delay:.86s} @keyframes tl-write{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 -2px 0 0);opacity:1}} #tailoring .tl-cap{margin:12px 0 0;color:var(--fine);font-size:12px;line-height:1.5} #tailoring .tl:not(.is-live) .tl-tabs{display:none} /* ---------------- S03 · the operating loop with a playhead ---------------- */ #how-it-operates .lp{position:relative;margin-top:clamp(12px,2vw,28px)} #how-it-operates .lp-svg{display:block;width:min(100%,860px);height:auto;margin:0 auto;overflow:visible} #how-it-operates .lp-ring{fill:none;stroke:var(--line-dark);stroke-width:1.4} #how-it-operates .lp-trail{fill:none;stroke:var(--gold-light);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:0 1;opacity:.9} #how-it-operates .lp-node .lp-halo{fill:none;stroke:var(--gold-light);stroke-width:1;opacity:0;transition:opacity .4s,transform .4s;transform-box:fill-box;transform-origin:center} #how-it-operates .lp-node .lp-dot{fill:var(--field);stroke:var(--gold-light);stroke-width:1.4;transition:fill .35s} #how-it-operates .lp-node.is-on .lp-dot{fill:var(--gold-light)} #how-it-operates .lp-node.is-now .lp-halo{opacity:.9;transform:scale(1.12)} #how-it-operates .lp-label{fill:rgba(255,255,255,.72);font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:fill .35s} #how-it-operates .lp-label.is-now{fill:#fff} #how-it-operates .lp-center{fill:var(--gold-light);font:400 20px/1 var(--display);text-anchor:middle;letter-spacing:-.01em} #how-it-operates .lp-center--sub{fill:var(--on-dark-fine);font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} #how-it-operates .lp-token{fill:#FFF6E0} #how-it-operates .lp-token-glow{fill:rgba(212,188,132,.28);filter:blur(4px)} #how-it-operates .lp-pool circle{fill:#F3E7C9} #how-it-operates .lp-token,#how-it-operates .lp-token-glow{opacity:0} #how-it-operates .lp.is-live .lp-token,#how-it-operates .lp.is-live .lp-token-glow{opacity:1} #how-it-operates .lp-pause{display:none;margin:6px auto 0;padding:8px 12px;border:0;background:none;color:var(--on-dark-fine);font:500 12px/1.2 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer} #how-it-operates .lp.is-live .lp-pause{display:block} #how-it-operates .lp + .sequence-return{margin-top:4px} #how-it-operates .lp-num{display:none;fill:var(--field);font:600 13px/1 var(--sans);text-anchor:middle;dominant-baseline:central;pointer-events:none} @media (max-width:760px){ /* on a phone the ring carries numbers; the names sit beneath it as a list that follows the playhead */ #how-it-operates .lp-label,#how-it-operates .lp-center--sub{display:none} #how-it-operates .lp-num{display:block} #how-it-operates .lp-node .lp-dot{fill:var(--on-dark-fine)} #how-it-operates .lp-node.is-on .lp-dot,#how-it-operates .lp-node.is-now .lp-dot{fill:var(--gold-light)} #how-it-operates .lp-center{font-size:30px} #how-it-operates .lp-svg{width:min(100%,340px)} #how-it-operates .lp-center{font-size:22px} #how-it-operates .sequence.visually-hidden{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:8px 0 0;padding:0} #how-it-operates .sequence.visually-hidden .sequence-step{padding:0;align-items:flex-start;text-align:left} #how-it-operates .sequence.visually-hidden .sequence-step::before,#how-it-operates .sequence.visually-hidden .sequence-node{display:none} #how-it-operates .sequence.visually-hidden .sequence-name{color:var(--on-dark-fine);font-size:11px;letter-spacing:.08em;transition:color .3s} #how-it-operates .sequence.visually-hidden .sequence-step.is-now .sequence-name{color:var(--gold-light)} } /* ---------------- S04 · four analyses as small looping scenes ---------------- */ #deeper-analyses .an-scene{display:block;width:min(100%,300px);height:auto;margin:0 0 18px;overflow:visible;transition:opacity .5s ease} #deeper-analyses .an-scene *{fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #deeper-analyses .an-base,#deeper-analyses .an-grid{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4} #deeper-analyses .an-box{stroke:rgba(23,67,52,.35)} #deeper-analyses .an-bar{fill:var(--gold);stroke:none;transform-box:fill-box;transform-origin:bottom;animation:an-release 5s cubic-bezier(.6,0,.3,1) infinite} #deeper-analyses .an-lid{fill:var(--forest);stroke:none;animation:an-lid 5s cubic-bezier(.6,0,.3,1) infinite} #deeper-analyses .an-cap{stroke:var(--gold-access);stroke-dasharray:2 5;opacity:.6} @keyframes an-lid{0%,22%{transform:translateY(32px)}42%,78%{transform:translateY(0)}100%{transform:translateY(32px)}} @keyframes an-release{0%,22%{transform:scaleY(.56)}42%,78%{transform:scaleY(1)}100%{transform:scaleY(.56)}} #deeper-analyses .an-pulse-base{stroke:rgba(23,67,52,.18)} #deeper-analyses .an-pulse{stroke:var(--gold-access);stroke-width:2.2;stroke-dasharray:.28 .72;animation:an-scan 3.2s linear infinite} #deeper-analyses .an-bracket{stroke:var(--forest);opacity:0;animation:an-review 3.2s ease infinite} @keyframes an-scan{from{stroke-dashoffset:.28}to{stroke-dashoffset:-.72}} @keyframes an-review{0%,45%{opacity:0}60%,85%{opacity:1}100%{opacity:0}} #deeper-analyses .an-trend{stroke:rgba(23,67,52,.28)} #deeper-analyses .an-mover{fill:var(--forest);stroke:none;offset-path:path("M16 78C60 76 86 36 118 38S170 80 196 70");animation:an-move 4.6s ease-in-out infinite} #deeper-analyses .an-up path{stroke:var(--olive);stroke-width:2.2;animation:an-up 4.6s ease-in-out infinite} #deeper-analyses .an-down path{stroke:var(--plum);stroke-width:2.2;animation:an-down 4.6s ease-in-out infinite} @keyframes an-move{0%{offset-distance:0%}50%{offset-distance:55%}100%{offset-distance:100%}} @keyframes an-up{0%,48%{opacity:1}56%,100%{opacity:.18}} @keyframes an-down{0%,48%{opacity:.18}56%,96%{opacity:1}100%{opacity:.18}} #deeper-analyses .an-flag{stroke:rgba(23,67,52,.4);animation:an-flag 5.2s ease infinite;animation-delay:calc(var(--d) * .09s)} #deeper-analyses .an-flag:nth-child(2),#deeper-analyses .an-flag:nth-child(3),#deeper-analyses .an-flag:nth-child(6){animation-name:an-flag-on} #deeper-analyses .an-shield{stroke:var(--gold-access);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:an-shield 5.2s ease infinite} @keyframes an-flag{0%,100%{fill:none}} @keyframes an-flag-on{0%,18%{fill:none}30%,82%{fill:var(--gold)}100%{fill:none}} @keyframes an-shield{0%,34%{stroke-dashoffset:1;opacity:1}58%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} #deeper-analyses .grid-2x2.is-focusing .tile--analysis:not(.is-focus) .an-scene{opacity:.4} /* ---------------- S05 · lineage playhead over two tracks ---------------- */ #lineage .ln{position:relative;z-index:6;margin:0 0 clamp(8px,1.4vw,18px);padding:14px 0 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} #lineage .ln-grid{display:grid;grid-template-columns:96px repeat(3,minmax(0,1fr));gap:6px 12px;align-items:center} #lineage .ln-col{display:grid;gap:2px;padding:8px 10px;border:1px solid transparent;border-radius:6px;background:none;color:var(--forest);font:500 13px/1.25 var(--sans);text-align:left;cursor:pointer;transition:border-color .3s,background-color .3s} #lineage .ln-col b{color:var(--gold-access);font:400 18px/1 var(--display)} #lineage .ln-col small{color:var(--fine);font-size:11px;letter-spacing:.04em} #lineage .ln-col.is-now{border-color:var(--gold);background:rgba(184,152,90,.07)} #lineage .ln-label{color:var(--fine);font:600 9.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase} #lineage .ln-label--in{color:var(--gold-access)} #lineage .ln-cell{padding:6px 10px;border-radius:4px;font-size:12.5px;line-height:1.35;transition:opacity .3s,background-color .3s} #lineage .ln-in{color:var(--forest);background:rgba(184,152,90,.12)} #lineage .ln-out{color:var(--fine);background:repeating-linear-gradient(135deg,rgba(23,67,52,.05) 0 6px,transparent 6px 12px);text-decoration:line-through;text-decoration-color:rgba(23,67,52,.35)} #lineage .ln.is-live .ln-cell{opacity:.45} #lineage .ln.is-live .ln-cell.is-now{opacity:1} #lineage .ln-axis{position:absolute;top:8px;bottom:8px;left:108px;right:0;pointer-events:none} #lineage .ln-head{position:absolute;top:0;bottom:0;left:0;width:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 12px rgba(184,152,90,.55);opacity:0;transition:opacity .4s} #lineage .ln.is-live .ln-head{opacity:1} @media (min-width:1000px){#lineage .ln.is-sticky{position:sticky;top:calc(var(--header-h) + 6px)}} @media (max-width:760px){ #lineage .ln{display:none} #lineage .ln-grid{grid-template-columns:62px repeat(3,minmax(0,1fr));gap:4px 6px} #lineage .ln-col{padding:6px 4px;font-size:11px} #lineage .ln-col b{font-size:15px} #lineage .ln-cell{padding:5px 4px;font-size:10.5px} #lineage .ln-label{font-size:8.5px;letter-spacing:.08em} #lineage .ln-axis{left:68px} } @media (prefers-reduced-motion:reduce){ #deeper-analyses .an-scene *{animation:none!important} #tailoring .tl .tl-fill{animation:none!important} #tailoring .tl-photo img{transition:none} } @media print{#how-it-operates .lp-pause,#tailoring .tl-tabs{display:none}}