:root{--ink-0:#070503;--ink-1:#0C0906;--ink-2:#131009;--ink-3:#1C1710;--ink-4:#251E15;--red:#C8401A;--red-hi:#E05530;--cream:#F0EBE3;--fog:#6B6058;--fog-hi:#9A8E82;--line:rgba(255,255,255,0.055);--line-red:rgba(200,64,26,0.25);} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--ink-1);color:var(--cream);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden;} nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:2rem 3.5rem;transition:background .5s,padding .4s;} nav.scrolled{background:rgba(7,5,3,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:1.35rem 3.5rem;} .logo{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;} .logo span{color:var(--red);} .nav-links{display:flex;gap:2.75rem;list-style:none;} .nav-links a{font-size:.65rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fog-hi);text-decoration:none;transition:color .2s;position:relative;} .nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--red);transition:width .3s;} .nav-links a:hover,.nav-links a.active{color:var(--cream);} .nav-links a:hover::after,.nav-links a.active::after{width:100%;} .nav-cta{font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-0);background:var(--cream);padding:.65rem 1.5rem;text-decoration:none;transition:background .2s,color .2s;} .nav-cta:hover{background:var(--red);color:var(--cream);} .page-header-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;} .page-header{padding:14rem 3.5rem 6rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:#060402;} .page-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 85% 40%,rgba(200,64,26,.07) 0%,transparent 65%);pointer-events:none;} .page-eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:1.75rem;display:flex;align-items:center;gap:.75rem;} .page-eyebrow::before{content:'';width:2rem;height:1px;background:var(--red);} .page-header h1{font-family:'Cormorant',serif;font-weight:300;font-size:clamp(2.25rem,3.5vw,4.5rem);line-height:1;letter-spacing:-.02em;max-width:18ch;} .page-header h1 em{font-style:italic;color:var(--red);} .page-header-sub{font-size:.95rem;color:var(--fog-hi);max-width:54ch;margin-top:2.5rem;line-height:1.9;} .section-label{display:flex;align-items:center;gap:1rem;font-size:.82rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:2.5rem;} .section-label::after{content:'';width:3rem;height:1px;background:var(--line-red);} .link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--red);text-decoration:none;margin-top:1.5rem;transition:gap .2s;} .link-arrow:hover{gap:.9rem;} .btn-primary{display:inline-block;padding:.9rem 2.25rem;background:var(--red);color:var(--cream);font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .15s;} .btn-primary:hover{background:var(--red-hi);transform:translateY(-1px);} .btn-ghost{font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--fog-hi);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s,gap .2s;} .btn-ghost:hover{color:var(--cream);gap:.85rem;} /* THESIS */ .thesis{padding:7rem 3.5rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center;} .thesis-left blockquote{font-family:'Cormorant',serif;font-size:clamp(1.8rem,3vw,3.25rem);font-weight:300;font-style:italic;line-height:1.3;} .thesis-left blockquote em{font-style:normal;color:var(--red);} .thesis-right p{font-size:1rem;color:var(--fog-hi);line-height:1.9;margin-bottom:1.1rem;} /* CAPABILITY MODEL */ .capability-model{padding:7rem 3.5rem;border-bottom:1px solid var(--line);} .capability-model h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3.5vw,4rem);font-weight:300;line-height:1.1;max-width:22ch;margin-bottom:5rem;} .capability-model h2 em{font-style:italic;color:var(--red);} /* FLOW DIAGRAM */ .flow-diagram{display:flex;flex-direction:column;gap:0;margin-bottom:5rem;} .flow-step{display:grid;grid-template-columns:3rem 1fr 1fr;gap:3rem;padding:3rem 0;border-top:1px solid var(--line);position:relative;transition:background .25s;cursor:default;} .flow-step:last-child{border-bottom:1px solid var(--line);} .flow-step:hover{background:var(--ink-2);padding-left:1.5rem;padding-right:1.5rem;} .flow-step:hover .flow-arrow{color:var(--red);} .flow-num{font-family:'Cormorant',serif;font-style:italic;font-size:1.5rem;color:var(--red);opacity:1;padding-top:.2rem;} .flow-left h3{font-family:'Cormorant',serif;font-size:clamp(1.4rem,2vw,2rem);font-weight:300;line-height:1.2;margin-bottom:.6rem;} .flow-left .flow-tag{font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fog-hi);margin-bottom:.75rem;display:block;} .flow-right p{font-size:.95rem;color:var(--fog-hi);line-height:1.85;margin-bottom:.75rem;} .flow-right ul{list-style:none;margin-top:.75rem;} .flow-right ul li{font-size:.88rem;color:var(--fog);padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.03);display:flex;align-items:flex-start;gap:.65rem;line-height:1.6;} .flow-right ul li::before{content:'';width:5px;height:5px;background:var(--red);border-radius:50%;margin-top:.45rem;flex-shrink:0;opacity:.7;} .flow-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--fog);transition:color .2s;} /* WHAT I LOOK FOR */ .what-i-look-for{background:var(--ink-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7rem 3.5rem;} .what-i-look-for h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:300;line-height:1.15;max-width:26ch;margin-bottom:4rem;} .what-i-look-for h2 em{font-style:italic;color:var(--red);} .look-for-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);} .look-for-item{background:var(--ink-0);padding:2.5rem 3rem;transition:background .25s;} .look-for-item:hover{background:var(--ink-2);} .look-for-label{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:1.25rem;} .look-for-item ul{list-style:none;} .look-for-item ul li{font-size:.92rem;color:var(--fog-hi);padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:.65rem;line-height:1.6;} .look-for-item ul li::before{content:'';width:4px;height:4px;background:var(--red);border-radius:50%;margin-top:.5rem;flex-shrink:0;opacity:.6;} .look-for-item ul li:last-child{border-bottom:none;} /* DELIVERABLES */ .deliverables{padding:7rem 3.5rem;border-bottom:1px solid var(--line);} .deliverables h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:300;line-height:1.15;max-width:22ch;margin-bottom:4rem;} .deliverables h2 em{font-style:italic;color:var(--red);} .deliverables-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;} .deliverable-card{background:var(--ink-3);border:1px solid var(--line);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:background .3s,transform .25s;} .deliverable-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;} .deliverable-card:hover{background:var(--ink-4);transform:translateY(-3px);} .deliverable-card:hover::before{transform:scaleX(1);} .deliverable-card h3{font-family:'Cormorant',serif;font-size:1.25rem;font-weight:400;line-height:1.3;margin-bottom:.75rem;} .deliverable-card p{font-size:.9rem;color:var(--fog);line-height:1.75;} /* OPERATING RHYTHM */ .operating-rhythm{background:var(--ink-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7rem 3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start;} .operating-rhythm h2{font-family:'Cormorant',serif;font-size:clamp(2rem,3vw,3.5rem);font-weight:300;line-height:1.15;margin-bottom:2rem;} .operating-rhythm h2 em{font-style:italic;color:var(--red);} .operating-rhythm .big-def{font-family:'Cormorant',serif;font-style:italic;font-size:1.15rem;color:var(--cream);line-height:1.6;margin-bottom:2rem;padding-left:1.5rem;border-left:2px solid var(--red);} .operating-rhythm p{font-size:1rem;color:var(--fog-hi);line-height:1.9;margin-bottom:1rem;} .operating-rhythm .sediment{font-family:'Cormorant',serif;font-style:italic;font-size:1.1rem;color:var(--cream);line-height:1.6;margin-top:2rem;padding:1.5rem 2rem;border:1px solid var(--line-red);background:rgba(200,64,26,.04);} /* CTA */ .method-cta{padding:8rem 3.5rem;text-align:center;position:relative;overflow:hidden;} .method-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 50% 50%,rgba(200,64,26,.055) 0%,transparent 65%);pointer-events:none;} .method-cta h2{font-family:'Cormorant',serif;font-size:clamp(2.5rem,5vw,5.5rem);font-weight:300;line-height:1.1;max-width:22ch;margin:0 auto 1.5rem;} .method-cta h2 em{font-style:italic;color:var(--red);} .method-cta p{font-size:.9rem;color:var(--fog-hi);max-width:44ch;margin:0 auto 3rem;} .cta-actions{display:flex;gap:1.5rem;justify-content:center;align-items:center;} footer{background:var(--ink-0);border-top:1px solid var(--line);} .footer-inner{padding:4.5rem 3.5rem 0;display:grid;grid-template-columns:5fr 2fr 2fr;gap:5rem;} .footer-nav-icon{height:28px;width:auto;display:block;opacity:.9;} .footer-logo-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-bottom:1rem;} .footer-brand .logo{display:block;margin-bottom:.75rem;} .footer-brand p{font-family:'Cormorant',serif;font-style:italic;font-size:1.05rem;color:var(--fog);max-width:30ch;line-height:1.6;} .footer-col h4{font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:1.5rem;} .footer-col ul{list-style:none;} .footer-col li{margin-bottom:.7rem;} .footer-col a{font-size:.82rem;color:var(--fog-hi);text-decoration:none;transition:color .2s;} .footer-col a:hover{color:var(--cream);} .footer-bottom{margin-top:3.5rem;padding:1.5rem 3.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;} .footer-bottom p{font-size:.7rem;color:var(--fog);letter-spacing:.04em;} .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);} .reveal.visible{opacity:1;transform:translateY(0);} .d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.35s;}.d4{transition-delay:.5s;} @media(max-width:1024px){ .thesis,.operating-rhythm{grid-template-columns:1fr;gap:3.5rem;} .flow-step{grid-template-columns:2.5rem 1fr;gap:1.5rem;} .flow-right{grid-column:2;} .look-for-grid{grid-template-columns:1fr;} .deliverables-grid{grid-template-columns:1fr 1fr;} .footer-inner{grid-template-columns:1fr;gap:2.5rem;} } @media(max-width:768px){ nav{padding:1.25rem 1.5rem;} nav.scrolled{padding:1rem 1.5rem;} .nav-links{display:none;} .page-header-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;} .page-header{padding:10rem 1.5rem 4rem;} .thesis,.capability-model,.what-i-look-for,.deliverables,.operating-rhythm{padding:5rem 1.5rem;} .flow-step{grid-template-columns:1fr;padding:2.5rem 0;} .flow-num{display:none;} .flow-arrow{display:none;} .deliverables-grid{grid-template-columns:1fr;} .method-cta{padding:5rem 1.5rem;} .cta-actions{flex-direction:column;} .footer-inner{padding:3rem 1.5rem 0;} .footer-bottom{padding:1.5rem;flex-direction:column;gap:.5rem;text-align:center;} } .logo-link{display:flex;align-items:center;gap:.85rem;text-decoration:none;} .nav-icon{height:40px;width:auto;display:block;} /* Hero grain texture */ .hero-bg::after{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity:0.025; pointer-events:none; z-index:1; } /* MOBILE NAV */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;z-index:600;} .hamburger span{display:block;width:24px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s;} .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} .mobile-menu{position:fixed;inset:0;background:var(--ink-0);z-index:550;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;opacity:0;pointer-events:none;transition:opacity .35s ease;} .mobile-menu.open{opacity:1;pointer-events:all;} .mobile-menu a{font-family:'Cormorant',serif;font-size:clamp(2.5rem,8vw,3.5rem);font-weight:300;color:var(--cream);text-decoration:none;letter-spacing:.05em;transition:color .2s;} .mobile-menu a:hover,.mobile-menu a.active{color:var(--red);} .mobile-menu .menu-cta{font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-0);background:var(--red);padding:.9rem 2.5rem;margin-top:1rem;} .mobile-menu .menu-cta:hover{color:var(--ink-0);background:var(--red-hi);} @media(max-width:768px){ .hamburger{display:flex !important;} .nav-links{display:none !important;} .nav-cta{display:none !important;} } .page-header-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:end;} .page-header-right{display:flex;align-items:center;justify-content:center;padding-bottom:1rem;} .header-pull-quote{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.75rem,2.8vw,3rem);font-weight:300;color:rgba(242,237,229,.18);line-height:1.35;text-align:right;border-right:2px solid rgba(200,64,26,.35);padding-right:2rem;} @media(max-width:768px){.page-header-inner{grid-template-columns:1fr;}.page-header-right{display:none;}} /* River of light */ .rl-blob{position:absolute;border-radius:50%;will-change:transform;} .rl-b1{width:100%;height:48%;background:radial-gradient(ellipse,rgba(90,28,6,0.95) 0%,rgba(60,16,3,0.48) 48%,transparent 72%);top:20%;left:-18%;filter:blur(60px);animation:rlfm1 24s ease-in-out infinite alternate;} .rl-b2{width:80%;height:42%;background:radial-gradient(ellipse,rgba(65,18,4,0.88) 0%,rgba(45,10,2,0.4) 48%,transparent 72%);top:45%;left:15%;filter:blur(50px);animation:rlfm2 28s ease-in-out infinite alternate;} .rl-b3{width:70%;height:38%;background:radial-gradient(ellipse,rgba(130,44,8,0.72) 0%,rgba(95,30,5,0.28) 48%,transparent 72%);top:8%;left:38%;filter:blur(55px);animation:rlfm3 18s ease-in-out infinite alternate;} .rl-b4{width:88%;height:44%;background:radial-gradient(ellipse,rgba(50,14,2,0.94) 0%,rgba(35,8,1,0.44) 48%,transparent 72%);top:58%;left:-5%;filter:blur(58px);animation:rlfm4 30s ease-in-out infinite alternate;} .rl-b5{width:55%;height:28%;background:radial-gradient(ellipse,rgba(155,55,10,0.58) 0%,rgba(115,38,7,0.2) 48%,transparent 72%);top:32%;left:58%;filter:blur(48px);animation:rlfm5 22s ease-in-out infinite alternate;} .rl-mist{position:absolute;left:0;right:0;pointer-events:none;} .rl-m1{top:38%;height:100px;background:linear-gradient(to right,transparent,rgba(100,40,8,0.4),transparent,rgba(80,28,5,0.3),transparent);filter:blur(16px);opacity:.2;animation:rlmist 20s ease-in-out infinite alternate;} .rl-m2{top:68%;height:90px;background:linear-gradient(to right,rgba(70,24,4,0.3),transparent,rgba(90,35,7,0.38),transparent);filter:blur(14px);opacity:.18;animation:rlmist 26s ease-in-out infinite alternate-reverse;} .rl-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} @keyframes rlfm1{0%{translate(0,0) scale(1)} 50%{translate(32%,18%) scale(1.08)} 100%{translate(60%,32%) scale(0.95)}} @keyframes rlfm2{0%{translate(0,0) scale(1)} 50%{translate(25%,10%) scale(1.12)} 100%{translate(52%,24%) scale(1.02)}} @keyframes rlfm3{0%{translate(0,0)} 50%{translate(28%,14%) scale(0.96)} 100%{translate(46%,28%) scale(1.04)}} @keyframes rlfm4{0%{translate(0,0) scale(1)} 50%{translate(30%,8%) scale(1.1)} 100%{translate(58%,20%) scale(0.92)}} @keyframes rlfm5{0%{translate(0,0)} 50%{translate(12%,12%) scale(1.04)} 100%{translate(28%,22%) scale(0.98)}} @keyframes rlmist{0%{transform:translateX(-12%)}100%{transform:translateX(12%)}} /* LOGO SYSTEM: shared Celatum mark treatment */ .logo-lockup { display: inline-flex; align-items: center; gap: .9rem; color: var(--cream); text-decoration: none; position: relative; isolation: isolate; } .logo-mark-shell { width: 58px; height: 58px; display: grid; place-items: center; position: relative; flex: 0 0 auto; margin: -8px 0; } .logo-mark-shell::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(200,64,26,.19) 0%, rgba(200,64,26,.07) 38%, transparent 70%); opacity: .42; filter: blur(11px); transform: scale(.92); transition: opacity .7s ease, transform .7s ease; } .logo-mark-shell::after { content: ''; position: absolute; inset: 26% 6% 24% 8%; background: linear-gradient(100deg, transparent, rgba(200,64,26,.26), transparent); opacity: .16; filter: blur(7px); transform: rotate(-8deg); pointer-events: none; } .logo-mark-img { width: 54px; height: 54px; display: block; object-fit: contain; position: relative; z-index: 2; opacity: .96; filter: drop-shadow(0 0 8px rgba(200,64,26,.12)) drop-shadow(0 0 22px rgba(240,235,227,.025)); transition: filter .55s ease, opacity .55s ease, transform .55s ease; } .logo-lockup:hover .logo-mark-shell::before { opacity: .78; transform: scale(1.08); } .logo-lockup:hover .logo-mark-img { opacity: 1; filter: drop-shadow(0 0 12px rgba(200,64,26,.28)) drop-shadow(0 0 30px rgba(240,235,227,.04)); transform: translateY(-1px); } .logo-wordmark { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); line-height:1; white-space:nowrap; } .logo-wordmark span { color: var(--red); } .footer-brand { display:flex; flex-direction:column; align-items:center; text-align:center; } .footer-logo-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; margin:0 auto 1.35rem; position:relative; width:148px; height:148px; max-width:100%; } .footer-logo-link::before { content:''; position:absolute; inset: 10%; border-radius:50%; background: radial-gradient(circle, rgba(200,64,26,.16) 0%, rgba(200,64,26,.045) 42%, transparent 72%), radial-gradient(ellipse 80% 60% at 58% 42%, rgba(47,119,124,.07) 0%, transparent 74%); filter: blur(20px); opacity:.72; pointer-events:none; } .footer-logo-mark { display:block; width:118px; height:118px; object-fit:contain; opacity:.94; position:relative; z-index:2; filter: drop-shadow(0 0 14px rgba(200,64,26,.12)) drop-shadow(0 0 26px rgba(240,235,227,.022)); } .footer-brand p { margin:0 auto; max-width:31ch; font-family:'Cormorant',serif; font-style:italic; font-size:1.05rem; color:var(--fog); line-height:1.6; } @media(max-width:768px){ .logo-mark-shell { width: 46px; height: 46px; margin:-6px 0; } .logo-mark-img { width: 43px; height: 43px; } .logo-wordmark { font-size:.76rem; letter-spacing:.14em; } .footer-logo-link { width:132px; height:132px; } .footer-logo-mark { width:104px; height:104px; } } /* METHOD HERO V2: diagnostic signal panel */ .page-header-right { justify-content: flex-end; } .method-diagnostic-panel { position: relative; width: min(100%, 520px); padding: 2rem 2rem 1.75rem; border: 1px solid rgba(200,64,26,.18); background: linear-gradient(145deg, rgba(19,16,9,.72) 0%, rgba(7,5,3,.48) 100%), radial-gradient(ellipse 90% 70% at 78% 16%, rgba(47,119,124,.055) 0%, transparent 72%), radial-gradient(ellipse 80% 80% at 12% 86%, rgba(200,64,26,.075) 0%, transparent 76%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 24px 90px rgba(0,0,0,.28), 0 0 80px rgba(200,64,26,.035); overflow: hidden; isolation: isolate; } .method-diagnostic-panel::before { content: ''; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 0%, rgba(200,64,26,.045) 42%, rgba(61,154,160,.035) 50%, transparent 62%), radial-gradient(ellipse 42% 40% at 64% 40%, rgba(200,64,26,.06) 0%, transparent 72%); opacity: .62; transform: translateX(-16%) rotate(-4deg); animation: methodPanelField 32s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } .method-diagnostic-panel::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 42px 42px; opacity: .11; mask-image: radial-gradient(ellipse 84% 76% at 50% 50%, #000 0%, transparent 78%); pointer-events: none; z-index: 0; } .diagnostic-panel-header, .diagnostic-signal-rows, .diagnostic-row { position: relative; } .diagnostic-insight { position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(.45rem) scale(.96); max-width: 15.5rem; padding: .44rem .66rem .42rem; border: 1px solid rgba(200,64,26,.16); background: linear-gradient(145deg, rgba(28,23,16,.92), rgba(9,6,4,.78)), radial-gradient(ellipse 80% 90% at 16% 20%, rgba(200,64,26,.09), transparent 70%); color: rgba(240,235,227,.86); font-family: 'Cormorant', serif; font-style: italic; font-size: .9rem; line-height: 1.15; letter-spacing: .018em; white-space: nowrap; opacity: 0; filter: blur(4px); box-shadow: 0 12px 34px rgba(0,0,0,.22), 0 0 22px rgba(200,64,26,.045); pointer-events: none; animation: diagnosticInsightAppear 18s cubic-bezier(.42,0,.2,1) infinite; animation-delay: var(--delay); z-index: 4; } .diagnostic-insight::before { content: ''; position: absolute; left: -.36rem; top: 50%; width: .36rem; height: 1px; background: linear-gradient(to right, transparent, rgba(200,64,26,.62)); transform: translateY(-50%); opacity: .54; } .diagnostic-insight strong { color: var(--red-hi); font-style: normal; font-weight: 400; } .diagnostic-row:hover .diagnostic-insight { opacity: 1; filter: blur(0); transform: translateY(-50%) translateX(0) scale(1); animation-play-state: paused; } .diagnostic-panel-quote { position: relative; z-index: 2; } .diagnostic-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.15rem; margin-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.055); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,235,227,.72); } .scan-status { color: rgba(224,85,48,.9); position: relative; padding-left: 1rem; } .scan-status::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--red); transform: translateY(-50%); box-shadow: 0 0 12px rgba(200,64,26,.45); animation: scanStatusPulse 3.6s ease-in-out infinite; } .diagnostic-signal-rows { display: grid; gap: .92rem; } .diagnostic-row { display: grid; grid-template-columns: minmax(8.8rem, 38%) 1fr; align-items: center; gap: 1rem; opacity: .72; animation: diagnosticRowListen 18s ease-in-out infinite; animation-delay: var(--delay); } .diagnostic-label { font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(154,142,130,.8); transition: color .8s ease, text-shadow .8s ease; white-space: nowrap; } .diagnostic-track { position: relative; height: 2px; display: block; background: linear-gradient(to right, rgba(255,255,255,.05), rgba(255,255,255,.025)); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.012); } .diagnostic-track::before, .diagnostic-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(to right, transparent, rgba(200,64,26,.75), transparent); opacity: .42; filter: blur(.15px); animation: diagnosticTrace 9.5s cubic-bezier(.42,0,.2,1) infinite; animation-delay: var(--delay); } .diagnostic-track::after { width: 9%; background: linear-gradient(to right, transparent, rgba(72,158,154,.55), transparent); animation-duration: 13.5s; opacity: .28; } .diagnostic-track i { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%) scaleX(.38); transform-origin: left center; background: linear-gradient(to right, rgba(200,64,26,.42), rgba(200,64,26,.11), transparent); opacity: .22; animation: diagnosticTrackBreath 18s ease-in-out infinite; animation-delay: var(--delay); } .diagnostic-row { position: relative; } .diagnostic-insight { position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(.45rem) scale(.96); max-width: 15.5rem; padding: .44rem .66rem .42rem; border: 1px solid rgba(200,64,26,.16); background: linear-gradient(145deg, rgba(28,23,16,.92), rgba(9,6,4,.78)), radial-gradient(ellipse 80% 90% at 16% 20%, rgba(200,64,26,.09), transparent 70%); color: rgba(240,235,227,.86); font-family: 'Cormorant', serif; font-style: italic; font-size: .9rem; line-height: 1.15; letter-spacing: .018em; white-space: nowrap; opacity: 0; filter: blur(4px); box-shadow: 0 12px 34px rgba(0,0,0,.22), 0 0 22px rgba(200,64,26,.045); pointer-events: none; animation: diagnosticInsightAppear 18s cubic-bezier(.42,0,.2,1) infinite; animation-delay: var(--delay); z-index: 4; } .diagnostic-insight::before { content: ''; position: absolute; left: -.36rem; top: 50%; width: .36rem; height: 1px; background: linear-gradient(to right, transparent, rgba(200,64,26,.62)); transform: translateY(-50%); opacity: .54; } .diagnostic-insight strong { color: var(--red-hi); font-style: normal; font-weight: 400; } .diagnostic-row:hover .diagnostic-insight { opacity: 1; filter: blur(0); transform: translateY(-50%) translateX(0) scale(1); animation-play-state: paused; } .diagnostic-panel-quote { margin-top: 1.8rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.055); font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.45; color: rgba(240,235,227,.74); text-align: right; text-shadow: 0 0 20px rgba(200,64,26,.045); } @keyframes methodPanelField { 0% { transform: translateX(-18%) translateY(2%) rotate(-4deg); opacity: .36; } 50% { transform: translateX(4%) translateY(-2%) rotate(2deg); opacity: .72; } 100% { transform: translateX(12%) translateY(1%) rotate(-1deg); opacity: .48; } } @keyframes scanStatusPulse { 0%, 100% { opacity: .42; transform: translateY(-50%) scale(.82); } 48% { opacity: 1; transform: translateY(-50%) scale(1.18); } } @keyframes diagnosticTrace { 0%, 12% { transform: translateX(-125%); opacity: 0; } 22% { opacity: .34; } 52% { opacity: .78; } 84% { opacity: .20; } 100% { transform: translateX(680%); opacity: 0; } } @keyframes diagnosticTrackBreath { 0%, 100% { transform: translateY(-50%) scaleX(.28); opacity: .12; } 48%, 60% { transform: translateY(-50%) scaleX(.92); opacity: .38; } 76% { transform: translateY(-50%) scaleX(.55); opacity: .24; } } @keyframes diagnosticRowListen { 0%, 100% { opacity: .54; } 46%, 62% { opacity: .95; } } @keyframes diagnosticInsightAppear { 0%, 34%, 100% { opacity: 0; filter: blur(5px); transform: translateY(-50%) translateX(.65rem) scale(.94); } 44% { opacity: .12; filter: blur(3px); } 52%, 63% { opacity: .96; filter: blur(0); transform: translateY(-50%) translateX(0) scale(1); } 74% { opacity: 0; filter: blur(3px); transform: translateY(-50%) translateX(-.25rem) scale(.98); } } .diagnostic-row:nth-child(3), .diagnostic-row:nth-child(4) { opacity: .82; } .diagnostic-row:nth-child(3) .diagnostic-label, .diagnostic-row:nth-child(4) .diagnostic-label { color: rgba(240,235,227,.72); } .diagnostic-row:hover .diagnostic-label { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.18); } @media(max-width:768px){ .method-diagnostic-panel { display: none; } } @media (prefers-reduced-motion: reduce) { .method-diagnostic-panel::before, .scan-status::before, .diagnostic-row, .diagnostic-track::before, .diagnostic-track::after, .diagnostic-track i, .diagnostic-insight { animation: none !important; } .diagnostic-insight { opacity: .86; filter: none; transform: translateY(-50%) scale(1); } .fault-gas-field span { animation: none !important; } } /* METHOD REDESIGN: diagnostic trace system */ .fault-origin, .trace-system, .failure-signatures, .artifact-output, .rhythm-synthesis { position: relative; overflow: hidden; isolation: isolate; } .fault-origin { padding: 7rem 3.5rem; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 62% 54% at 68% 48%, rgba(200,64,26,.055) 0%, transparent 72%), radial-gradient(ellipse 44% 42% at 16% 70%, rgba(47,119,124,.032) 0%, transparent 76%), linear-gradient(160deg, #090604 0%, var(--ink-1) 100%); } .fault-origin::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200,64,26,.035) 49.5%, transparent 50.5%, transparent 100%), linear-gradient(120deg, transparent 0%, transparent 54%, rgba(75,157,154,.028) 55%, transparent 58%); opacity: .75; animation: faultGridBreathe 28s ease-in-out infinite alternate; pointer-events: none; } .fault-origin-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6rem; align-items: center; } .fault-kicker { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-bottom: 1.5rem; font-weight: 600; } .fault-origin h2 { font-family: 'Cormorant', serif; font-size: clamp(2.25rem, 4vw, 5rem); line-height: 1.05; font-weight: 300; max-width: 12ch; } .fault-origin h2 em { color: var(--red); font-style: italic; } .fault-readout { border: 1px solid rgba(255,255,255,.075); background: rgba(7,5,3,.48); padding: 2.4rem; position: relative; box-shadow: inset 0 0 0 1px rgba(200,64,26,.035), 0 22px 90px rgba(0,0,0,.22); } .fault-readout::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, rgba(200,64,26,.055) 48%, transparent 72%); opacity: .66; animation: faultSweep 18s ease-in-out infinite; pointer-events: none; } .fault-readout > * { position: relative; z-index: 2; } .fault-readout blockquote { font-family: 'Cormorant', serif; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.35; font-style: italic; color: var(--cream); margin-bottom: 1.5rem; } .fault-readout p { color: var(--fog-hi); font-size: .96rem; line-height: 1.9; margin-bottom: 1rem; } .fault-tags { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; } .fault-tags span { border: 1px solid rgba(200,64,26,.18); color: rgba(240,235,227,.72); background: rgba(200,64,26,.035); padding: .45rem .7rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; } /* METHOD: slow gas-field movement behind Fault Origin */ .fault-gas-field { position: absolute; inset: -18% -10%; z-index: 1; pointer-events: none; overflow: hidden; opacity: .86; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 78% 70% at 54% 48%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.72) 50%, transparent 82%); mask-image: radial-gradient(ellipse 78% 70% at 54% 48%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.72) 50%, transparent 82%); } .fault-gas-field span { position: absolute; display: block; border-radius: 50%; filter: blur(46px); will-change: transform, opacity, filter; transform-origin: 50% 50%; } .fault-gas-field .fg-amber-large { width: 58%; height: 62%; left: 38%; top: 14%; background: radial-gradient(ellipse, rgba(200, 64, 26, .145) 0%, rgba(139, 45, 12, .075) 36%, rgba(72, 22, 6, .035) 58%, transparent 76%); animation: faultGasAmber 64s ease-in-out infinite alternate; } .fault-gas-field .fg-cool-thread { width: 48%; height: 44%; left: 8%; top: 42%; background: radial-gradient(ellipse, rgba(58, 145, 143, .095) 0%, rgba(27, 84, 91, .046) 42%, transparent 74%); filter: blur(54px); animation: faultGasCool 78s ease-in-out infinite alternate; } .fault-gas-field .fg-deep-copper { width: 72%; height: 46%; left: -14%; top: 4%; background: radial-gradient(ellipse, rgba(118, 38, 9, .105) 0%, rgba(73, 20, 5, .058) 46%, transparent 78%); filter: blur(60px); animation: faultGasCopper 92s ease-in-out infinite alternate; } .fault-gas-field .fg-thin-current { left: 4%; right: 6%; top: 54%; height: 2px; width: auto; border-radius: 999px; background: linear-gradient(to right, transparent 0%, rgba(69, 151, 151, .02) 14%, rgba(200, 64, 26, .085) 38%, rgba(226, 146, 71, .062) 53%, rgba(57, 145, 145, .045) 68%, transparent 100%); filter: blur(.6px); opacity: .36; animation: faultGasCurrent 22s ease-in-out infinite; } @keyframes faultGasAmber { 0% { transform: translate(-4%, 3%) scale(.94) rotate(-4deg); opacity: .34; filter: blur(50px); } 44% { transform: translate(4%, -2%) scale(1.10) rotate(3deg); opacity: .72; filter: blur(42px); } 100% { transform: translate(-1%, 4%) scale(1.02) rotate(-1deg); opacity: .46; filter: blur(56px); } } @keyframes faultGasCool { 0% { transform: translate(3%, 5%) scale(.92) rotate(5deg); opacity: .18; } 48% { transform: translate(12%, -4%) scale(1.18) rotate(-3deg); opacity: .52; } 100% { transform: translate(5%, 1%) scale(1.04) rotate(2deg); opacity: .24; } } @keyframes faultGasCopper { 0% { transform: translate(-2%, -3%) scale(1) rotate(2deg); opacity: .30; } 52% { transform: translate(7%, 4%) scale(1.12) rotate(-4deg); opacity: .58; } 100% { transform: translate(3%, -1%) scale(1.04) rotate(1deg); opacity: .38; } } @keyframes faultGasCurrent { 0%, 100% { transform: translateX(-3%) scaleX(.74); opacity: .10; } 42% { transform: translateX(2%) scaleX(1.03); opacity: .34; } 68% { transform: translateX(6%) scaleX(.88); opacity: .22; } } .trace-system { padding: 7rem 3.5rem 6rem; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 68% 45% at 80% 10%, rgba(47,119,124,.026) 0%, transparent 72%), var(--ink-1); } .trace-intro { max-width: 66rem; margin-bottom: 5rem; position: relative; z-index: 3; } .trace-intro h2 { font-family: 'Cormorant', serif; font-size: clamp(2.1rem, 3.6vw, 4.25rem); line-height: 1.08; font-weight: 300; max-width: 18ch; margin-bottom: 1.4rem; } .trace-intro h2 em { color: var(--red); font-style: italic; } .trace-intro p { color: var(--fog-hi); max-width: 58ch; font-size: 1rem; line-height: 1.9; } .trace-grid { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 4.5rem; align-items: start; } .trace-spine { position: sticky; top: 8.5rem; min-height: 31rem; padding: 1rem 0 1rem 2.5rem; } .trace-spine::before { content: ''; position: absolute; left: .65rem; top: 1rem; bottom: 1rem; width: 1px; background: linear-gradient(to bottom, transparent, rgba(200,64,26,.38), rgba(75,157,154,.18), transparent); box-shadow: 0 0 22px rgba(200,64,26,.08); } .trace-node { position: relative; display: block; margin: 0 0 2.15rem; color: var(--fog); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; transition: color .6s ease, transform .6s ease; } .trace-node::before { content: attr(data-num); position: absolute; left: -2.45rem; top: -.42rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid rgba(200,64,26,.25); display: grid; place-items: center; font-family: 'Cormorant', serif; font-size: .86rem; letter-spacing: 0; color: rgba(240,235,227,.54); background: var(--ink-1); box-shadow: 0 0 0 rgba(200,64,26,0); transition: all .7s ease; } .trace-node.active { color: var(--cream); transform: translateX(.4rem); } .trace-node.active::before { color: var(--red-hi); border-color: rgba(224,85,48,.62); box-shadow: 0 0 18px rgba(200,64,26,.20), 0 0 38px rgba(75,157,154,.07); } .trace-content { display: flex; flex-direction: column; gap: 2rem; } .trace-layer { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 2rem; min-height: 25rem; padding: 2rem; border: 1px solid rgba(255,255,255,.065); background: rgba(12,9,6,.68); overflow: hidden; transition: border-color .8s ease, background .8s ease, transform .8s ease; } .trace-layer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 64% at 12% 18%, rgba(200,64,26,.085) 0%, transparent 72%), linear-gradient(100deg, transparent, rgba(75,157,154,.025), transparent); opacity: 0; transform: scale(.97); transition: opacity 1s ease, transform 1.2s ease; pointer-events: none; } .trace-layer.trace-active { background: rgba(18,13,9,.84); border-color: rgba(200,64,26,.20); transform: translateY(-2px); } .trace-layer.trace-active::before { opacity: 1; transform: scale(1.03); } .trace-layer > * { position: relative; z-index: 2; } .trace-layer-label { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 1.1rem; } .trace-layer h3 { font-family: 'Cormorant', serif; font-size: clamp(1.75rem, 2.7vw, 3rem); line-height: 1.05; font-weight: 300; margin-bottom: 1rem; } .trace-layer-summary { color: var(--fog-hi); line-height: 1.85; font-size: .97rem; } .readout-stack { display: grid; gap: 1rem; } .readout-card { border-left: 1px solid rgba(200,64,26,.32); background: rgba(7,5,3,.42); padding: 1.15rem 1.25rem; transition: background .55s ease, border-color .55s ease; } .trace-layer.trace-active .readout-card { background: rgba(7,5,3,.60); border-color: rgba(224,85,48,.55); } .readout-card strong { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: .45rem; } .readout-card p { color: var(--fog-hi); font-size: .9rem; line-height: 1.7; } .failure-signatures { padding: 7rem 3.5rem; border-bottom: 1px solid var(--line); background: var(--ink-0); } .failure-signatures h2, .artifact-output h2, .rhythm-synthesis h2 { font-family: 'Cormorant', serif; font-size: clamp(2rem, 3.4vw, 4rem); line-height: 1.08; font-weight: 300; max-width: 20ch; margin-bottom: 3rem; } .failure-signatures h2 em, .artifact-output h2 em, .rhythm-synthesis h2 em { color: var(--red); font-style: italic; } .signature-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.055); } .signature-tile { min-height: 15rem; padding: 1.7rem; background: rgba(12,9,6,.95); position: relative; overflow: hidden; transition: background .7s ease, transform .6s ease; } .signature-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 28% 22%, rgba(200,64,26,.14) 0%, rgba(200,64,26,.045) 42%, transparent 74%); opacity: 0; transition: opacity .8s ease; pointer-events: none; } .signature-tile:hover { background: rgba(24,17,11,.96); transform: translateY(-3px); } .signature-tile:hover::before { opacity: 1; } .signature-tile > * { position: relative; z-index: 2; } .signature-tile h3 { font-family: 'Cormorant', serif; font-size: 1.45rem; font-weight: 400; line-height: 1.15; margin-bottom: 1rem; color: var(--cream); transition: color .45s ease; } .signature-tile:hover h3 { color: var(--red-hi); } .signature-tile p { color: var(--fog); font-size: .88rem; line-height: 1.7; transition: color .45s ease; } .signature-tile:hover p { color: rgba(240,235,227,.88); } .artifact-output { padding: 7rem 3.5rem; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 50% 46% at 76% 36%, rgba(200,64,26,.035) 0%, transparent 72%), var(--ink-1); } .artifact-rail { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .artifact-item { display: grid; grid-template-columns: 10rem 1fr auto; gap: 2rem; align-items: center; padding: 1.65rem 0; border-bottom: 1px solid var(--line); transition: padding .55s ease, background .55s ease; } .artifact-item:hover { padding-left: 1rem; background: rgba(200,64,26,.025); } .artifact-code { font-family: 'Cormorant', serif; font-style: italic; color: var(--red); font-size: 1.25rem; } .artifact-item h3 { font-family: 'Cormorant', serif; font-size: 1.45rem; font-weight: 400; margin-bottom: .25rem; } .artifact-item p { color: var(--fog-hi); font-size: .92rem; line-height: 1.65; max-width: 68ch; } .artifact-arrow { color: var(--fog); transition: color .4s ease, transform .4s ease; } .artifact-item:hover .artifact-arrow { color: var(--red); transform: translateX(.4rem); } .rhythm-synthesis { padding: 7rem 3.5rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; background: var(--ink-0); } .rhythm-synthesis p { color: var(--fog-hi); font-size: 1rem; line-height: 1.9; margin-bottom: 1rem; } .rhythm-line { font-family: 'Cormorant', serif; font-style: italic; color: var(--cream); font-size: clamp(1.4rem, 2.3vw, 2.5rem); line-height: 1.25; padding: 2rem; border: 1px solid rgba(200,64,26,.24); background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(200,64,26,.08) 0%, transparent 74%), rgba(12,9,6,.55); } @keyframes faultGridBreathe { 0% { opacity: .36; transform: translateX(-1%); } 100% { opacity: .75; transform: translateX(1%); } } @keyframes faultSweep { 0%, 100% { transform: translateX(-42%); opacity: .18; } 50% { transform: translateX(18%); opacity: .58; } } @media(max-width:1024px){ .fault-origin-inner, .trace-grid, .rhythm-synthesis { grid-template-columns: 1fr; gap: 3rem; } .trace-spine { position: relative; top: auto; min-height: auto; display: none; } .trace-layer { grid-template-columns: 1fr; min-height: auto; } .signature-wall { grid-template-columns: repeat(2, 1fr); } .artifact-item { grid-template-columns: 6rem 1fr; } .artifact-arrow { display: none; } } @media(max-width:768px){ .fault-origin, .trace-system, .failure-signatures, .artifact-output, .rhythm-synthesis { padding: 5rem 1.5rem; } .signature-wall { grid-template-columns: 1fr; } .artifact-item { grid-template-columns: 1fr; gap: .4rem; } .fault-readout { padding: 1.6rem; } } /* METHOD PATCH: sticky trace tracker, text hover lift, cleaner artifact labels */ .trace-system { position: relative; overflow: visible; } .trace-grid { align-items: start; } .trace-spine { top: 7.25rem; height: calc(100vh - 9rem); min-height: 34rem; display: flex; flex-direction: column; justify-content: center; --trace-progress: 0%; } .trace-spine::after { content: ''; position: absolute; left: .65rem; top: 1rem; width: 1px; height: var(--trace-progress); max-height: calc(100% - 2rem); background: linear-gradient(to bottom, rgba(224,85,48,.85), rgba(75,157,154,.32)); box-shadow: 0 0 16px rgba(200,64,26,.20), 0 0 34px rgba(75,157,154,.08); transition: height .75s cubic-bezier(.22,1,.36,1); pointer-events: none; } .trace-node { cursor: pointer; width: fit-content; } .trace-node:hover { color: rgba(240,235,227,.88); transform: translateX(.3rem); } .trace-node:hover::before { border-color: rgba(224,85,48,.46); color: rgba(224,85,48,.86); box-shadow: 0 0 16px rgba(200,64,26,.13); } .trace-layer:hover { background: rgba(20,14,10,.88); border-color: rgba(200,64,26,.18); transform: translateY(-2px); } .trace-layer:hover::before { opacity: .82; transform: scale(1.03); } .trace-layer h3 { transition: color .55s ease, text-shadow .75s ease; } .trace-layer:hover h3, .trace-layer.trace-active h3 { color: rgba(240,235,227,.98); text-shadow: 0 0 16px rgba(200,64,26,.10), 0 0 38px rgba(75,157,154,.045); } .trace-layer-summary { transition: color .65s ease, text-shadow .75s ease, transform .65s cubic-bezier(.22,1,.36,1); } .trace-layer:hover .trace-layer-summary, .trace-layer.trace-active .trace-layer-summary { color: rgba(240,235,227,.88); text-shadow: 0 0 18px rgba(200,64,26,.055); transform: translateY(-1px); } .readout-card { position: relative; overflow: hidden; transition: background .65s ease, border-color .65s ease, transform .65s cubic-bezier(.22,1,.36,1), box-shadow .75s ease; } .readout-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 12% 18%, rgba(200,64,26,.105) 0%, transparent 72%), linear-gradient(100deg, transparent, rgba(75,157,154,.028), transparent); opacity: 0; transform: translateX(-8%) scale(.98); transition: opacity .75s ease, transform .95s ease; pointer-events: none; } .readout-card > * { position: relative; z-index: 2; } .readout-card strong { transition: color .55s ease, text-shadow .75s ease, letter-spacing .65s ease; } .readout-card p { transition: color .65s ease, text-shadow .75s ease, transform .65s cubic-bezier(.22,1,.36,1); } .readout-card:hover { background: rgba(17,11,7,.82); border-color: rgba(224,85,48,.68); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(200,64,26,.045), 0 16px 54px rgba(0,0,0,.16); } .readout-card:hover::before { opacity: 1; transform: translateX(0) scale(1.04); } .readout-card:hover strong { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.20); letter-spacing: .2em; } .readout-card:hover p { color: rgba(240,235,227,.90); text-shadow: 0 0 18px rgba(240,235,227,.035); transform: translateY(-1px); } .trace-layer.trace-active .readout-card p { color: rgba(240,235,227,.82); } .artifact-item { grid-template-columns: 12rem 1fr auto; } .artifact-code { font-family: 'DM Sans', sans-serif; font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(224,85,48,.76); border: 1px solid rgba(200,64,26,.20); padding: .55rem .7rem; width: fit-content; background: rgba(200,64,26,.035); transition: color .55s ease, border-color .55s ease, background .55s ease, box-shadow .55s ease; } .artifact-item:hover .artifact-code { color: var(--red-hi); border-color: rgba(224,85,48,.46); background: rgba(200,64,26,.07); box-shadow: 0 0 20px rgba(200,64,26,.09); } @media(max-width:1024px){ .trace-spine { height:auto; min-height:auto; display:none; } .artifact-item { grid-template-columns: 9rem 1fr; } } @media(max-width:768px){ .artifact-item { grid-template-columns: 1fr; } } /* SITE PERFORMANCE PASS: smoother scrolling while preserving atmosphere */ canvas, .rl-canvas, .river-ripples, .hero-bg, .page-header-bg, .service-hero-bg, .contact-left, .contact-right, .method-hero-field, .signal-hero, .featured, .services-hero, .page-header { contain: layout paint style; } .rl-blob, .particle, .signal-cloud, .sediment-tide, .sediment-cool-resonance, [class*="glow"], [class*="pulse"], [class*="field"], [class*="gas"], [class*="mist"] { will-change: transform, opacity; transform: translateZ(0); } .reveal, .flow-step, .service-entry, .dossier-card, .contact-link-row, .signal-card, .article-card, .principle-card, .pattern-item { backface-visibility: hidden; transform: translateZ(0); } @media(max-width:768px) { nav.scrolled { backdrop-filter: blur(10px); } .rl-canvas, .river-ripples { opacity: .48; mix-blend-mode: normal !important; } .rl-blob, .particle { animation-duration: calc(var(--duration, 1s) * 1.4); } [class*="glow"], [class*="pulse"], [class*="field"], [class*="gas"], [class*="mist"] { filter: none; } .hero-bg [class*="rl-b"], .page-header-bg [class*="rl-b"], .service-hero-bg [class*="rl-b"] { filter: blur(38px) !important; } .flow-step, .service-entry, .dossier-card, .contact-link-row, .signal-card, .article-card { transition: background .45s ease, color .35s ease, transform .4s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } canvas, .rl-canvas, .river-ripples { display: none !important; } } /* METHOD PROTOTYPE: signal separation chamber */ .method-hero-prototype { isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 76% 58% at 72% 46%, rgba(200,64,26,.052) 0%, transparent 70%), radial-gradient(ellipse 48% 42% at 48% 64%, rgba(48,130,134,.028) 0%, transparent 74%), #060402 !important; } .method-hero-prototype::before { z-index: 1; opacity: .78; background: radial-gradient(ellipse 62% 56% at 78% 48%, rgba(200,64,26,.075) 0%, rgba(68,22,7,.035) 46%, transparent 72%), linear-gradient(to bottom, rgba(7,5,3,.12), rgba(7,5,3,.62)); } .method-diagnostic-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint style; } .method-gas { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; filter: blur(46px); will-change: transform, opacity; transform: translateZ(0); } .method-gas-amber { width: 62%; height: 52%; right: 2%; top: 28%; background: radial-gradient(ellipse, rgba(211,95,31,.16) 0%, rgba(111,37,10,.075) 44%, transparent 78%); opacity: .48; animation: methodAmberDrift 42s ease-in-out infinite alternate; } .method-gas-cool { width: 44%; height: 38%; right: 26%; top: 44%; background: radial-gradient(ellipse, rgba(54,139,142,.10) 0%, rgba(24,76,88,.045) 42%, transparent 74%); opacity: .36; animation: methodCoolDrift 54s ease-in-out infinite alternate-reverse; } .method-strata { position: absolute; left: -8%; right: -8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.06), rgba(57,142,143,.03), transparent); opacity: .28; transform-origin: center; filter: blur(.2px); animation: methodStrataListen 15s ease-in-out infinite; } .method-strata-one { top: 48%; transform: rotate(-2deg); animation-delay: -4s; } .method-strata-two { top: 66%; transform: rotate(1.5deg); animation-delay: -9s; opacity: .18; } .method-backtrace { position: absolute; left: 35%; top: 58%; width: 42%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,64,26,0) 12%, rgba(200,64,26,.34) 48%, rgba(54,139,142,.16) 60%, rgba(200,64,26,0) 84%, transparent 100%); opacity: 0; transform: translate3d(28%, 0, 0) rotate(-4deg) scaleX(.38); transform-origin: right center; filter: drop-shadow(0 0 10px rgba(200,64,26,.16)); animation: methodBacktrace 9.8s cubic-bezier(.22,1,.36,1) infinite; } .method-backtrace-secondary { top: 45%; left: 42%; width: 34%; opacity: 0; transform: translate3d(20%, 0, 0) rotate(2deg) scaleX(.28); animation-delay: 3.4s; animation-duration: 12s; } .method-hero-prototype .page-header-inner, .method-hero-prototype .page-eyebrow, .method-hero-prototype h1, .method-hero-prototype .page-header-sub, .method-hero-prototype .diagnostic-panel, .method-hero-prototype .method-panel, .method-hero-prototype .thesis-card, .method-hero-prototype blockquote, .method-hero-prototype .quote-panel, .method-hero-prototype .method-quote { position: relative; z-index: 3; } .method-hero-prototype h1 em { animation: lateSignalMethodPulse 8.6s ease-in-out infinite; } .method-hero-prototype .page-header-right, .method-hero-prototype .diagnostic-panel, .method-hero-prototype .method-panel, .method-hero-prototype .thesis-card, .method-hero-prototype .quote-panel, .method-hero-prototype .method-quote { position: relative; z-index: 3; } .method-hero-prototype .page-header-right > *, .method-hero-prototype .diagnostic-panel, .method-hero-prototype .method-panel, .method-hero-prototype .thesis-card, .method-hero-prototype .quote-panel, .method-hero-prototype .method-quote { position: relative; overflow: hidden; } .method-hero-prototype .page-header-right > *::before, .method-hero-prototype .diagnostic-panel::before, .method-hero-prototype .method-panel::before, .method-hero-prototype .thesis-card::before, .method-hero-prototype .quote-panel::before, .method-hero-prototype .method-quote::before { content: ''; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 42% 34% at 18% 22%, rgba(200,64,26,.10) 0%, transparent 72%), radial-gradient(ellipse 38% 34% at 82% 76%, rgba(54,139,142,.055) 0%, transparent 72%); opacity: .34; filter: blur(18px); animation: methodPanelBreath 18s ease-in-out infinite alternate; } .method-hero-prototype .page-header-right > *::after, .method-hero-prototype .diagnostic-panel::after, .method-hero-prototype .method-panel::after, .method-hero-prototype .thesis-card::after, .method-hero-prototype .quote-panel::after, .method-hero-prototype .method-quote::after { content: ''; position: absolute; left: -20%; right: -20%; top: 68%; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(200,64,26,.22), rgba(54,139,142,.10), transparent); opacity: 0; transform: translateX(-18%); animation: methodPanelScan 7.8s ease-in-out infinite; } .method-hero-prototype .tag, .method-hero-prototype .panel-tag, .method-hero-prototype .diagnostic-tag, .method-hero-prototype .readout-tag, .method-hero-prototype .word-box, .method-hero-prototype .quote-tag, .method-hero-prototype .signal-word, .method-hero-prototype .method-chip, .method-hero-prototype .chip { transition: color .45s ease, border-color .45s ease, background .45s ease, box-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1); } .method-hero-prototype .word-box:nth-of-type(1), .method-hero-prototype .quote-tag:nth-of-type(1), .method-hero-prototype .signal-word:nth-of-type(1), .method-hero-prototype .method-chip:nth-of-type(1), .method-hero-prototype .chip:nth-of-type(1) { animation: methodTagSequence 8.8s ease-in-out infinite; animation-delay: 0s; } .method-hero-prototype .word-box:nth-of-type(2), .method-hero-prototype .quote-tag:nth-of-type(2), .method-hero-prototype .signal-word:nth-of-type(2), .method-hero-prototype .method-chip:nth-of-type(2), .method-hero-prototype .chip:nth-of-type(2) { animation: methodTagSequence 8.8s ease-in-out infinite; animation-delay: 2.2s; } .method-hero-prototype .word-box:nth-of-type(3), .method-hero-prototype .quote-tag:nth-of-type(3), .method-hero-prototype .signal-word:nth-of-type(3), .method-hero-prototype .method-chip:nth-of-type(3), .method-hero-prototype .chip:nth-of-type(3) { animation: methodTagSequence 8.8s ease-in-out infinite; animation-delay: 4.4s; } .method-hero-prototype .word-box:nth-of-type(4), .method-hero-prototype .quote-tag:nth-of-type(4), .method-hero-prototype .signal-word:nth-of-type(4), .method-hero-prototype .method-chip:nth-of-type(4), .method-hero-prototype .chip:nth-of-type(4) { animation: methodTagSequence 8.8s ease-in-out infinite; animation-delay: 6.6s; } @keyframes methodAmberDrift { 0% { transform: translate3d(-2%, 2%, 0) scale(.96); opacity: .30; } 45% { transform: translate3d(2%, -3%, 0) scale(1.10); opacity: .55; } 100% { transform: translate3d(-1%, 1%, 0) scale(1.04); opacity: .40; } } @keyframes methodCoolDrift { 0% { transform: translate3d(2%, -1%, 0) scale(.94); opacity: .20; } 52% { transform: translate3d(-4%, 2%, 0) scale(1.12); opacity: .42; } 100% { transform: translate3d(1%, 2%, 0) scale(1.02); opacity: .28; } } @keyframes methodStrataListen { 0%, 100% { opacity: .10; transform: translateX(-1%) rotate(-2deg) scaleX(.92); } 50% { opacity: .34; transform: translateX(2%) rotate(-1deg) scaleX(1.04); } } @keyframes methodBacktrace { 0%, 54%, 100% { opacity: 0; transform: translate3d(28%, 0, 0) rotate(-4deg) scaleX(.32); } 62% { opacity: .46; transform: translate3d(8%, 0, 0) rotate(-4deg) scaleX(.84); } 76% { opacity: .26; transform: translate3d(-10%, 0, 0) rotate(-4deg) scaleX(1); } 88% { opacity: 0; transform: translate3d(-22%, 0, 0) rotate(-4deg) scaleX(.62); } } @keyframes lateSignalMethodPulse { 0%, 100% { color: var(--red); text-shadow: 0 0 0 rgba(200,64,26,0); } 46%, 58% { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.25), 0 0 32px rgba(54,139,142,.06); } } @keyframes methodPanelBreath { 0% { opacity: .18; transform: translate3d(-2%, 1%, 0) scale(.98); } 100% { opacity: .42; transform: translate3d(2%, -1%, 0) scale(1.04); } } @keyframes methodPanelScan { 0%, 62%, 100% { opacity: 0; transform: translateX(-18%); } 72% { opacity: .44; transform: translateX(0%); } 86% { opacity: 0; transform: translateX(18%); } } @keyframes methodTagSequence { 0%, 100% { color: inherit; border-color: rgba(200,64,26,.18); background: transparent; box-shadow: none; transform: translateY(0); } 18%, 32% { color: var(--red-hi); border-color: rgba(200,64,26,.46); background: rgba(200,64,26,.045); box-shadow: 0 0 14px rgba(200,64,26,.12), inset 0 0 0 1px rgba(200,64,26,.05); transform: translateY(-1px); } } @media(max-width:768px) { .method-backtrace, .method-backtrace-secondary { display: none; } .method-gas { filter: blur(34px); } .method-gas-amber { width: 110%; height: 36%; left: 4%; top: 32%; } .method-gas-cool { width: 90%; height: 30%; right: -12%; top: 56%; } } @media (prefers-reduced-motion: reduce) { .method-gas, .method-strata, .method-backtrace, .method-hero-prototype h1 em, .method-hero-prototype .page-header-right > *::before, .method-hero-prototype .page-header-right > *::after, .method-hero-prototype .word-box, .method-hero-prototype .quote-tag, .method-hero-prototype .signal-word, .method-hero-prototype .method-chip, .method-hero-prototype .chip { animation: none !important; } } /* METHOD V2: Fault Origin signal separation chamber */ .fault-origin-prototype { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 74% 48% at 72% 38%, rgba(200,64,26,.07) 0%, rgba(60,19,5,.03) 44%, transparent 76%), radial-gradient(ellipse 48% 34% at 62% 62%, rgba(50,137,142,.035) 0%, transparent 72%), #060402 !important; } .fault-trace-chamber { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint style; } .fault-origin-prototype .fault-gas-field { opacity: .78; z-index: 1; } .fault-origin-prototype .fault-origin-inner { position: relative; z-index: 4; } .fault-origin-prototype::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 54px, rgba(200,64,26,.018) 55px, transparent 56px ), linear-gradient(to bottom, rgba(7,5,3,.10), rgba(7,5,3,.38) 58%, rgba(7,5,3,.70)); opacity: .55; mix-blend-mode: screen; mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%); animation: faultStrataCurrent 22s ease-in-out infinite alternate; } .fault-chamber-cloud { position: absolute; border-radius: 50%; filter: blur(48px); mix-blend-mode: screen; will-change: transform, opacity; transform: translateZ(0); } .fault-chamber-amber { width: 62%; height: 52%; right: -4%; top: 18%; background: radial-gradient(ellipse, rgba(212,97,31,.18) 0%, rgba(111,35,9,.085) 42%, transparent 78%); opacity: .44; animation: faultAmberChamberDrift 44s ease-in-out infinite alternate; } .fault-chamber-cool { width: 42%; height: 36%; right: 22%; top: 44%; background: radial-gradient(ellipse, rgba(54,139,142,.105) 0%, rgba(20,71,82,.045) 44%, transparent 76%); opacity: .34; animation: faultCoolChamberDrift 58s ease-in-out infinite alternate-reverse; } .fault-chamber-line { position: absolute; left: -8%; right: -8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.08), rgba(54,139,142,.035), transparent); opacity: .16; filter: blur(.2px); transform-origin: center; animation: faultLineListen 13s ease-in-out infinite; } .fault-line-one { top: 32%; transform: rotate(-1.6deg); animation-delay: -3s; } .fault-line-two { top: 52%; transform: rotate(.8deg); animation-delay: -8s; opacity: .24; } .fault-line-three { top: 73%; transform: rotate(-.6deg); animation-delay: -12s; opacity: .13; } .fault-backward-trace { position: absolute; top: 49%; left: 36%; width: 42%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,64,26,0) 12%, rgba(200,64,26,.38) 46%, rgba(54,139,142,.16) 62%, rgba(200,64,26,0) 86%, transparent 100%); opacity: 0; transform: translate3d(30%, 0, 0) rotate(-5deg) scaleX(.25); transform-origin: right center; filter: drop-shadow(0 0 9px rgba(200,64,26,.18)) drop-shadow(0 0 18px rgba(54,139,142,.045)); animation: faultBackwardTrace 8.6s cubic-bezier(.22,1,.36,1) infinite; } .fault-backward-trace.trace-two { top: 61%; left: 42%; width: 31%; transform: translate3d(26%, 0, 0) rotate(3deg) scaleX(.22); animation-delay: 3.1s; animation-duration: 10.8s; opacity: 0; } .fault-origin-node { position: absolute; left: 31%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(224,85,48,.58); box-shadow: 0 0 18px rgba(200,64,26,.30), 0 0 42px rgba(54,139,142,.08); opacity: 0; animation: faultOriginNodePulse 8.6s ease-in-out infinite; } .fault-origin-prototype h2 em { animation: faultLateSignalPulse 7.8s ease-in-out infinite; } .fault-origin-prototype .fault-readout { position: relative; overflow: hidden; isolation: isolate; border-color: rgba(200,64,26,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 26px 110px rgba(0,0,0,.22); transition: border-color .8s ease, box-shadow .8s ease, background .8s ease; } .fault-origin-prototype .fault-readout::before { content: ''; position: absolute; inset: -28%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 42% 34% at 22% 18%, rgba(200,64,26,.13) 0%, transparent 72%), radial-gradient(ellipse 38% 34% at 84% 78%, rgba(54,139,142,.065) 0%, transparent 76%); opacity: .38; filter: blur(18px); animation: faultReadoutBreath 16s ease-in-out infinite alternate; } .fault-origin-prototype .fault-readout::after { content: ''; position: absolute; left: -18%; right: -18%; top: 72%; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(200,64,26,.28), rgba(54,139,142,.12), transparent); opacity: 0; transform: translateX(-20%); animation: faultReadoutScan 7.6s ease-in-out infinite; } .fault-origin-prototype .fault-tags { position: relative; z-index: 3; } .fault-origin-prototype .fault-tags span { position: relative; overflow: hidden; transition: color .55s ease, border-color .55s ease, background .55s ease, box-shadow .65s ease, transform .65s cubic-bezier(.22,1,.36,1); } .fault-origin-prototype .fault-tags span::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(200,64,26,.18), rgba(54,139,142,.07), transparent); opacity: 0; transform: translateX(-120%); animation: none; } .fault-origin-prototype .fault-tags span:nth-child(1) { animation: faultTagSequence 8.8s ease-in-out infinite; animation-delay: 0s; } .fault-origin-prototype .fault-tags span:nth-child(2) { animation: faultTagSequence 8.8s ease-in-out infinite; animation-delay: 2.2s; } .fault-origin-prototype .fault-tags span:nth-child(3) { animation: faultTagSequence 8.8s ease-in-out infinite; animation-delay: 4.4s; } .fault-origin-prototype .fault-tags span:nth-child(4) { animation: faultTagSequence 8.8s ease-in-out infinite; animation-delay: 6.6s; } .fault-origin-prototype .fault-tags span:nth-child(1)::before { animation: faultTagSweep 8.8s ease-in-out infinite; animation-delay: 0s; } .fault-origin-prototype .fault-tags span:nth-child(2)::before { animation: faultTagSweep 8.8s ease-in-out infinite; animation-delay: 2.2s; } .fault-origin-prototype .fault-tags span:nth-child(3)::before { animation: faultTagSweep 8.8s ease-in-out infinite; animation-delay: 4.4s; } .fault-origin-prototype .fault-tags span:nth-child(4)::before { animation: faultTagSweep 8.8s ease-in-out infinite; animation-delay: 6.6s; } @keyframes faultAmberChamberDrift { 0% { transform: translate3d(-2%, 2%, 0) scale(.96); opacity: .28; } 42% { transform: translate3d(3%, -3%, 0) scale(1.12); opacity: .55; } 100% { transform: translate3d(-1%, 1%, 0) scale(1.04); opacity: .38; } } @keyframes faultCoolChamberDrift { 0% { transform: translate3d(2%, -1%, 0) scale(.94); opacity: .18; } 52% { transform: translate3d(-5%, 2%, 0) scale(1.14); opacity: .40; } 100% { transform: translate3d(1%, 2%, 0) scale(1.02); opacity: .26; } } @keyframes faultStrataCurrent { 0% { transform: translate3d(-8px, 0, 0); opacity: .34; } 100% { transform: translate3d(10px, -6px, 0); opacity: .58; } } @keyframes faultLineListen { 0%, 100% { opacity: .08; transform: translateX(-1%) scaleX(.92); } 50% { opacity: .32; transform: translateX(2%) scaleX(1.04); } } @keyframes faultBackwardTrace { 0%, 48%, 100% { opacity: 0; transform: translate3d(30%, 0, 0) rotate(-5deg) scaleX(.24); } 58% { opacity: .54; transform: translate3d(9%, 0, 0) rotate(-5deg) scaleX(.74); } 72% { opacity: .30; transform: translate3d(-8%, 0, 0) rotate(-5deg) scaleX(1); } 86% { opacity: 0; transform: translate3d(-23%, 0, 0) rotate(-5deg) scaleX(.58); } } @keyframes faultOriginNodePulse { 0%, 49%, 100% { opacity: 0; transform: scale(.72); } 61% { opacity: .85; transform: scale(1.28); } 78% { opacity: .24; transform: scale(.94); } } @keyframes faultLateSignalPulse { 0%, 100% { color: var(--red); text-shadow: 0 0 0 rgba(200,64,26,0); } 44%, 58% { color: var(--red-hi); text-shadow: 0 0 15px rgba(200,64,26,.27), 0 0 34px rgba(54,139,142,.065); } } @keyframes faultReadoutBreath { 0% { opacity: .20; transform: translate3d(-2%, 1%, 0) scale(.98); } 100% { opacity: .48; transform: translate3d(2%, -1%, 0) scale(1.04); } } @keyframes faultReadoutScan { 0%, 60%, 100% { opacity: 0; transform: translateX(-20%); } 72% { opacity: .50; transform: translateX(0%); } 88% { opacity: 0; transform: translateX(18%); } } @keyframes faultTagSequence { 0%, 100% { color: var(--fog-hi); border-color: rgba(200,64,26,.18); background: transparent; box-shadow: none; transform: translateY(0); } 14%, 29% { color: var(--red-hi); border-color: rgba(200,64,26,.50); background: rgba(200,64,26,.050); box-shadow: 0 0 14px rgba(200,64,26,.14), inset 0 0 0 1px rgba(200,64,26,.05); transform: translateY(-1px); } } @keyframes faultTagSweep { 0%, 100% { opacity: 0; transform: translateX(-120%); } 14% { opacity: .34; transform: translateX(-22%); } 28% { opacity: 0; transform: translateX(120%); } } @media(max-width:768px) { .fault-backward-trace, .fault-origin-node { display: none; } .fault-chamber-cloud { filter: blur(32px); } .fault-chamber-amber { width: 110%; height: 40%; left: 2%; right: auto; top: 18%; } .fault-chamber-cool { width: 90%; height: 30%; right: -18%; top: 55%; } } @media (prefers-reduced-motion: reduce) { .fault-chamber-cloud, .fault-chamber-line, .fault-backward-trace, .fault-origin-node, .fault-origin-prototype h2 em, .fault-origin-prototype .fault-readout::before, .fault-origin-prototype .fault-readout::after, .fault-origin-prototype .fault-tags span, .fault-origin-prototype .fault-tags span::before { animation: none !important; } } /* METHOD V3: subdued movable nova origin inside Fault Origin chamber */ .fault-origin-prototype { --fault-nova-x: 62%; --fault-nova-y: 46%; } .fault-nova-origin, .fault-nova-ring, .fault-nova-halo { position: absolute; left: var(--fault-nova-x); top: var(--fault-nova-y); pointer-events: none; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity, filter; transform: translate(-50%, -50%); } .fault-nova-origin { width: 12px; height: 12px; z-index: 3; background: radial-gradient(circle, rgba(255,244,210,.82) 0%, rgba(226,126,46,.72) 28%, rgba(200,64,26,.48) 48%, rgba(54,139,142,.16) 70%, transparent 86%); opacity: 0; filter: blur(.4px); animation: faultNovaCore 12.5s cubic-bezier(.22,1,.36,1) infinite; } .fault-nova-ring { width: 170px; height: 130px; z-index: 2; background: radial-gradient(ellipse, transparent 0%, transparent 34%, rgba(200,64,26,.13) 43%, rgba(54,139,142,.07) 55%, rgba(226,126,46,.045) 67%, transparent 80%); opacity: 0; filter: blur(8px); animation: faultNovaRing 12.5s cubic-bezier(.22,1,.36,1) infinite; } .fault-nova-halo { width: 240px; height: 190px; z-index: 1; background: radial-gradient(ellipse, rgba(255,232,180,.10) 0%, rgba(200,64,26,.085) 22%, rgba(54,139,142,.055) 42%, rgba(90,50,20,.035) 62%, transparent 78%); opacity: 0; filter: blur(22px); animation: faultNovaHalo 12.5s cubic-bezier(.22,1,.36,1) infinite; } @keyframes faultNovaCore { 0%, 38% { opacity: 0; transform: translate(-50%, -50%) scale(.22); filter: blur(.8px); } 49% { opacity: .34; transform: translate(-50%, -50%) scale(.72); filter: blur(.55px); } 57% { opacity: .76; transform: translate(-50%, -50%) scale(1.18); filter: blur(.25px); } 66% { opacity: .30; transform: translate(-50%, -50%) scale(.82); filter: blur(.55px); } 78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.32); filter: blur(.9px); } } @keyframes faultNovaRing { 0%, 44% { opacity: 0; transform: translate(-50%, -50%) scale(.16) rotate(-4deg); filter: blur(7px); } 58% { opacity: .28; transform: translate(-50%, -50%) scale(.72) rotate(-2deg); filter: blur(8px); } 76% { opacity: .16; transform: translate(-50%, -50%) scale(1.42) rotate(2deg); filter: blur(11px); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.95) rotate(4deg); filter: blur(15px); } } @keyframes faultNovaHalo { 0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.26); } 58% { opacity: .22; transform: translate(-50%, -50%) scale(.86); } 80% { opacity: .12; transform: translate(-50%, -50%) scale(1.56); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05); } } @media(max-width:768px) { .fault-nova-ring { width: 126px; height: 96px; } .fault-nova-halo { width: 170px; height: 132px; } } @media (prefers-reduced-motion: reduce) { .fault-nova-origin, .fault-nova-ring, .fault-nova-halo { animation: none !important; opacity: 0 !important; } } /* METHOD V4: remove static orange pulse, move nova closer to headline, add blue-green shockwave */ .fault-origin-prototype .fault-origin-node { display: none !important; } .fault-nova-origin { width: 11px; height: 11px; background: radial-gradient(circle, rgba(255,246,218,.78) 0%, rgba(226,126,46,.62) 24%, rgba(200,64,26,.36) 44%, rgba(58,176,182,.30) 66%, transparent 86%); animation-duration: 8.6s !important; } .fault-nova-ring { width: 210px; height: 150px; background: radial-gradient(ellipse, transparent 0%, transparent 31%, rgba(200,64,26,.12) 41%, rgba(58,176,182,.18) 53%, rgba(91,207,207,.10) 61%, rgba(226,126,46,.040) 70%, transparent 82%); filter: blur(8px) drop-shadow(0 0 12px rgba(58,176,182,.07)); animation-duration: 8.6s !important; } .fault-nova-halo { width: 270px; height: 205px; background: radial-gradient(ellipse, rgba(255,232,180,.075) 0%, rgba(200,64,26,.070) 20%, rgba(58,176,182,.095) 42%, rgba(30,111,126,.050) 58%, transparent 78%); filter: blur(24px); animation-duration: 8.6s !important; } @keyframes faultNovaCore { 0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(.18); filter: blur(.8px); } 42% { opacity: .28; transform: translate(-50%, -50%) scale(.66); filter: blur(.55px); } 52% { opacity: .72; transform: translate(-50%, -50%) scale(1.12); filter: blur(.25px); } 62% { opacity: .24; transform: translate(-50%, -50%) scale(.80); filter: blur(.55px); } 74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.30); filter: blur(.9px); } } @keyframes faultNovaRing { 0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.14) rotate(-4deg); filter: blur(7px); } 51% { opacity: .34; transform: translate(-50%, -50%) scale(.72) rotate(-2deg); filter: blur(8px); } 68% { opacity: .19; transform: translate(-50%, -50%) scale(1.50) rotate(2deg); filter: blur(12px); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.08) rotate(4deg); filter: blur(16px); } } @keyframes faultNovaHalo { 0%, 32% { opacity: 0; transform: translate(-50%, -50%) scale(.24); } 51% { opacity: .25; transform: translate(-50%, -50%) scale(.86); } 72% { opacity: .13; transform: translate(-50%, -50%) scale(1.60); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.12); } } @media(max-width:768px) { .fault-nova-ring { width: 150px; height: 108px; } .fault-nova-halo { width: 200px; height: 150px; } } /* METHOD V5: smoother supernova-style shock breakout and stronger floating signal waves */ .fault-origin-prototype::before { opacity: .72 !important; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 42px, rgba(200,64,26,.028) 43px, rgba(54,139,142,.018) 44px, transparent 46px ), linear-gradient(to bottom, rgba(7,5,3,.08), rgba(7,5,3,.34) 58%, rgba(7,5,3,.68)) !important; } .fault-chamber-line { opacity: .28 !important; background: linear-gradient(90deg, transparent, rgba(200,64,26,.115), rgba(88,190,190,.070), rgba(200,64,26,.050), transparent) !important; filter: blur(.15px) drop-shadow(0 0 8px rgba(200,64,26,.04)); animation-duration: 11s !important; } .fault-line-one { opacity: .28 !important; } .fault-line-two { opacity: .36 !important; } .fault-line-three { opacity: .22 !important; } .fault-backward-trace, .fault-backward-trace.trace-two { opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(200,64,26,0) 8%, rgba(200,64,26,.42) 42%, rgba(88,190,190,.18) 58%, rgba(200,64,26,0) 88%, transparent 100%) !important; filter: drop-shadow(0 0 10px rgba(200,64,26,.18)) drop-shadow(0 0 18px rgba(88,190,190,.07)); } .fault-nova-origin { width: 10px; height: 10px; background: radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(196,238,255,.94) 11%, rgba(96,205,220,.68) 20%, rgba(238,151,55,.58) 34%, rgba(200,64,26,.32) 52%, transparent 82%) !important; filter: blur(.35px) drop-shadow(0 0 8px rgba(101,214,230,.18)); animation: faultNovaCoreBreakout 8.6s linear infinite !important; } .fault-nova-ring { width: 235px; height: 170px; background: radial-gradient(ellipse, transparent 0%, transparent 35%, rgba(92,205,218,.30) 42%, rgba(183,235,240,.17) 47%, rgba(200,64,26,.115) 55%, rgba(226,126,46,.055) 66%, transparent 80%) !important; filter: blur(8px) drop-shadow(0 0 14px rgba(88,190,190,.12)) drop-shadow(0 0 22px rgba(200,64,26,.06)); animation: faultNovaShockwaveLinear 8.6s linear infinite !important; } .fault-nova-halo { width: 300px; height: 225px; background: radial-gradient(ellipse, rgba(218,249,255,.090) 0%, rgba(88,190,190,.12) 26%, rgba(200,64,26,.075) 46%, rgba(30,111,126,.050) 62%, transparent 80%) !important; filter: blur(25px); animation: faultNovaHaloLinear 8.6s linear infinite !important; } .fault-nova-origin::after { content: ''; position: absolute; inset: -90%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.90) 0%, rgba(164,232,255,.75) 18%, rgba(82,203,218,.28) 42%, transparent 70%); opacity: 0; transform: scale(.2); filter: blur(1px); animation: faultNovaBlueFlash 8.6s linear infinite; } @keyframes faultNovaCoreBreakout { 0%, 28% { opacity: 0; transform: translate(-50%, -50%) scale(.18); } 34% { opacity: .18; transform: translate(-50%, -50%) scale(.42); } 39% { opacity: .42; transform: translate(-50%, -50%) scale(.76); } 42% { opacity: .92; transform: translate(-50%, -50%) scale(1.30); } 45% { opacity: .48; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: .15; transform: translate(-50%, -50%) scale(.52); } 58%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.28); } } @keyframes faultNovaBlueFlash { 0%, 38% { opacity: 0; transform: scale(.18); } 41% { opacity: 0; transform: scale(.28); } 42.5% { opacity: .88; transform: scale(1.18); } 45% { opacity: .18; transform: scale(1.65); } 48%, 100% { opacity: 0; transform: scale(2.1); } } /* Constant-rate outward expansion after the blue critical flash */ @keyframes faultNovaShockwaveLinear { 0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(-3deg); } 43% { opacity: .38; transform: translate(-50%, -50%) scale(.18) rotate(-3deg); } 57% { opacity: .30; transform: translate(-50%, -50%) scale(.90) rotate(-1deg); } 72% { opacity: .16; transform: translate(-50%, -50%) scale(1.65) rotate(1deg); } 88% { opacity: .035; transform: translate(-50%, -50%) scale(2.45) rotate(3deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.05) rotate(4deg); } } @keyframes faultNovaHaloLinear { 0%, 40% { opacity: 0; transform: translate(-50%, -50%) scale(.18); } 45% { opacity: .20; transform: translate(-50%, -50%) scale(.38); } 62% { opacity: .18; transform: translate(-50%, -50%) scale(1.02); } 82% { opacity: .07; transform: translate(-50%, -50%) scale(1.82); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.55); } } @media(max-width:768px) { .fault-nova-ring { width: 164px; height: 118px; } .fault-nova-halo { width: 214px; height: 160px; } .fault-chamber-line { opacity: .22 !important; } } /* METHOD V6: prevent shockwave jump by relocating only while nova is hidden */ .fault-origin-prototype:not(.fault-nova-running) .fault-nova-origin, .fault-origin-prototype:not(.fault-nova-running) .fault-nova-origin::after, .fault-origin-prototype:not(.fault-nova-running) .fault-nova-ring, .fault-origin-prototype:not(.fault-nova-running) .fault-nova-halo { animation-play-state: paused !important; opacity: 0 !important; } .fault-origin-prototype.fault-nova-resetting .fault-nova-origin, .fault-origin-prototype.fault-nova-resetting .fault-nova-origin::after, .fault-origin-prototype.fault-nova-resetting .fault-nova-ring, .fault-origin-prototype.fault-nova-resetting .fault-nova-halo { animation: none !important; opacity: 0 !important; } /* METHOD V7: Diagnostic Trace topology field */ .trace-system { position: relative; isolation: isolate; overflow: hidden; } .trace-topology-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint style; opacity: .92; mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 72%, transparent 100%); } .trace-topology-svg { position: absolute; top: 4rem; right: -2rem; width: min(76vw, 1120px); height: 36rem; opacity: .76; overflow: visible; filter: drop-shadow(0 0 18px rgba(200,64,26,.035)); } .topology-depth-cloud { position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(54px); opacity: .22; will-change: transform, opacity; transform: translateZ(0); } .topology-depth-cloud.cloud-one { width: 44%; height: 30%; right: 18%; top: 18%; background: radial-gradient(ellipse, rgba(200,64,26,.11) 0%, rgba(83,28,8,.055) 42%, transparent 74%); animation: topologyCloudOne 42s ease-in-out infinite alternate; } .topology-depth-cloud.cloud-two { width: 36%; height: 28%; right: 3%; top: 35%; background: radial-gradient(ellipse, rgba(58,153,156,.085) 0%, rgba(24,74,86,.045) 42%, transparent 74%); animation: topologyCloudTwo 58s ease-in-out infinite alternate-reverse; } .topology-ghost-path { fill: none; stroke: rgba(154,142,130,.085); stroke-width: 1; vector-effect: non-scaling-stroke; } .topology-ghost-path.primary { stroke: rgba(200,64,26,.13); } .topology-ghost-path.lower { stroke: rgba(154,142,130,.055); stroke-dasharray: 10 18; animation: topologyDashDrift 34s linear infinite; } .topology-ghost-path.feedback { stroke: rgba(58,153,156,.070); stroke-dasharray: 6 16; animation: topologyFeedbackDrift 46s linear infinite; } .topology-ghost-path.branch { stroke: rgba(58,153,156,.085); stroke-dasharray: 4 18; opacity: .62; animation: topologyBranchBreathe 13s ease-in-out infinite; } .topology-ghost-path.branch-two { animation-delay: -6s; } .topology-active-path { fill: none; stroke: url(#traceAmberPath); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 105 760; stroke-dashoffset: 760; opacity: .70; filter: url(#traceGlow); animation: topologySignalTravel 12.8s linear infinite; } .topology-feedback-active { fill: none; stroke: rgba(68,180,184,.16); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 70 850; stroke-dashoffset: 850; opacity: .44; filter: url(#traceGlow); animation: topologyFeedbackSignal 12.8s linear infinite; animation-delay: 8.6s; } .topology-node { fill: rgba(12,9,6,.72); stroke: rgba(200,64,26,.24); stroke-width: 1.1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(200,64,26,.07)); transform-origin: center; transition: fill .6s ease, stroke .6s ease, opacity .6s ease, r .6s ease, filter .6s ease; opacity: .72; } .topology-node.is-active { fill: rgba(224,85,48,.72); stroke: rgba(240,235,227,.34); filter: drop-shadow(0 0 12px rgba(224,85,48,.42)) drop-shadow(0 0 30px rgba(68,180,184,.14)); opacity: 1; r: 7; } .topology-node.is-related { stroke: rgba(68,180,184,.28); filter: drop-shadow(0 0 16px rgba(68,180,184,.10)); opacity: .88; } .topology-traveler { fill: rgba(224,85,48,.72); filter: drop-shadow(0 0 12px rgba(224,85,48,.40)) drop-shadow(0 0 24px rgba(68,180,184,.12)); opacity: .0; offset-path: path("M130 318 L285 232 L455 284 L620 168 L790 245 L970 154"); animation: topologyTraveler 12.8s linear infinite; } .topology-traveler.cool { fill: rgba(88,205,210,.58); filter: drop-shadow(0 0 12px rgba(88,205,210,.34)) drop-shadow(0 0 22px rgba(200,64,26,.06)); offset-path: path("M620 168 C650 90 760 72 850 122"); animation: topologyCoolBranch 12.8s linear infinite; animation-delay: 4.9s; } .trace-system > .trace-intro, .trace-system > .trace-grid { position: relative; z-index: 3; } .trace-system::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 65% 46% at 72% 28%, rgba(200,64,26,.035) 0%, transparent 70%), linear-gradient(to bottom, rgba(7,5,3,.02), rgba(7,5,3,.42) 68%, rgba(7,5,3,.78)); opacity: .78; } @keyframes topologySignalTravel { 0% { stroke-dashoffset: 760; opacity: 0; } 8% { opacity: .72; } 74% { stroke-dashoffset: 0; opacity: .72; } 88%, 100% { stroke-dashoffset: -105; opacity: 0; } } @keyframes topologyFeedbackSignal { 0%, 16% { stroke-dashoffset: 850; opacity: 0; } 28% { opacity: .42; } 72% { stroke-dashoffset: 0; opacity: .42; } 100% { stroke-dashoffset: -70; opacity: 0; } } @keyframes topologyTraveler { 0% { offset-distance: 0%; opacity: 0; transform: scale(.8); } 8% { opacity: .72; } 72% { offset-distance: 100%; opacity: .72; transform: scale(1.05); } 86%, 100% { offset-distance: 100%; opacity: 0; transform: scale(.7); } } @keyframes topologyCoolBranch { 0%, 18% { offset-distance: 0%; opacity: 0; transform: scale(.7); } 32% { opacity: .55; } 70% { offset-distance: 100%; opacity: .36; transform: scale(1.0); } 100% { offset-distance: 100%; opacity: 0; transform: scale(.72); } } @keyframes topologyDashDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -140; } } @keyframes topologyFeedbackDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 160; } } @keyframes topologyBranchBreathe { 0%, 100% { opacity: .20; } 48% { opacity: .72; } } @keyframes topologyCloudOne { 0% { transform: translate3d(-2%, 2%, 0) scale(.96); opacity: .14; } 48% { transform: translate3d(3%, -3%, 0) scale(1.12); opacity: .32; } 100% { transform: translate3d(-1%, 1%, 0) scale(1.04); opacity: .20; } } @keyframes topologyCloudTwo { 0% { transform: translate3d(2%, -1%, 0) scale(.94); opacity: .12; } 52% { transform: translate3d(-5%, 2%, 0) scale(1.14); opacity: .28; } 100% { transform: translate3d(1%, 2%, 0) scale(1.02); opacity: .18; } } @media(max-width:900px) { .trace-topology-svg { top: 7rem; right: -12rem; width: 115vw; height: 28rem; opacity: .46; } .trace-topology-field { mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 58%, transparent 78%); } } @media(max-width:768px) { .trace-topology-svg { top: 9rem; right: -22rem; width: 155vw; height: 24rem; opacity: .32; } .topology-depth-cloud { filter: blur(32px); } } @media (prefers-reduced-motion: reduce) { .topology-active-path, .topology-feedback-active, .topology-traveler, .topology-ghost-path.lower, .topology-ghost-path.feedback, .topology-ghost-path.branch, .topology-depth-cloud { animation: none !important; } } /* METHOD V8: make the Diagnostic Trace topology field more present */ .trace-system { background: radial-gradient(ellipse 80% 48% at 70% 20%, rgba(200,64,26,.052) 0%, rgba(54,18,6,.025) 46%, transparent 76%), radial-gradient(ellipse 58% 38% at 76% 42%, rgba(58,153,156,.030) 0%, transparent 74%), #060402 !important; } .trace-topology-field { opacity: 1 !important; mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 80%, transparent 100%) !important; } .trace-topology-field::before { content: ''; position: absolute; right: -7%; top: 2rem; width: 74%; height: 34rem; pointer-events: none; background: radial-gradient(ellipse 76% 62% at 50% 44%, rgba(200,64,26,.090) 0%, rgba(91,34,10,.045) 42%, transparent 76%), radial-gradient(ellipse 54% 44% at 70% 56%, rgba(58,153,156,.060) 0%, rgba(20,74,85,.030) 46%, transparent 78%); filter: blur(34px); opacity: .72; mix-blend-mode: screen; animation: topologyMapBedBreathe 32s ease-in-out infinite alternate; } .trace-topology-field::after { content: ''; position: absolute; right: -10%; top: 4rem; width: 76%; height: 32rem; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 58px, rgba(200,64,26,.030) 59px, rgba(58,153,156,.014) 60px, transparent 62px ), repeating-linear-gradient( 90deg, transparent 0px, transparent 124px, rgba(255,255,255,.014) 125px, transparent 126px ); opacity: .46; transform: rotate(-2deg); mix-blend-mode: screen; } .trace-topology-svg { top: 1.4rem !important; right: -9rem !important; width: min(90vw, 1380px) !important; height: 43rem !important; opacity: .98 !important; filter: drop-shadow(0 0 20px rgba(200,64,26,.070)) drop-shadow(0 0 38px rgba(58,153,156,.028)) !important; } .topology-ghost-path { stroke: rgba(154,142,130,.150) !important; stroke-width: 1.15 !important; } .topology-ghost-path.primary { stroke: rgba(200,64,26,.245) !important; stroke-width: 1.25 !important; } .topology-ghost-path.lower { stroke: rgba(154,142,130,.115) !important; } .topology-ghost-path.feedback { stroke: rgba(58,153,156,.155) !important; stroke-width: 1.1 !important; } .topology-ghost-path.branch { stroke: rgba(58,153,156,.165) !important; opacity: .82 !important; } .topology-large-orbit { fill: none; stroke: rgba(200,64,26,.105); stroke-width: 1.05; vector-effect: non-scaling-stroke; stroke-dasharray: 18 24; opacity: .58; filter: drop-shadow(0 0 16px rgba(200,64,26,.055)); animation: topologyLargeOrbit 54s linear infinite; } .topology-active-path { stroke-width: 1.85 !important; stroke-dasharray: 130 760 !important; opacity: .92 !important; filter: url(#traceGlow) drop-shadow(0 0 12px rgba(200,64,26,.20)) drop-shadow(0 0 24px rgba(58,153,156,.065)) !important; } .topology-feedback-active { stroke: rgba(88,205,210,.28) !important; stroke-width: 1.45 !important; opacity: .68 !important; filter: url(#traceGlow) drop-shadow(0 0 14px rgba(88,205,210,.14)) !important; } .topology-node { r: 6.2; fill: rgba(12,9,6,.86) !important; stroke: rgba(200,64,26,.42) !important; stroke-width: 1.4 !important; opacity: .92 !important; filter: drop-shadow(0 0 10px rgba(200,64,26,.13)) drop-shadow(0 0 22px rgba(58,153,156,.035)) !important; } .topology-node.is-active { fill: rgba(224,85,48,.88) !important; stroke: rgba(240,235,227,.54) !important; filter: drop-shadow(0 0 14px rgba(224,85,48,.58)) drop-shadow(0 0 36px rgba(68,180,184,.20)) !important; opacity: 1 !important; r: 8.4; } .topology-node.is-related { stroke: rgba(88,205,210,.42) !important; filter: drop-shadow(0 0 18px rgba(88,205,210,.16)) drop-shadow(0 0 26px rgba(200,64,26,.05)) !important; opacity: .96 !important; } .topology-traveler { r: 4.8; opacity: 0; filter: drop-shadow(0 0 14px rgba(224,85,48,.56)) drop-shadow(0 0 30px rgba(68,180,184,.18)) !important; } .topology-traveler.cool { r: 4; filter: drop-shadow(0 0 16px rgba(88,205,210,.48)) drop-shadow(0 0 26px rgba(200,64,26,.10)) !important; } .trace-system::before { background: radial-gradient(ellipse 70% 50% at 72% 22%, rgba(200,64,26,.050) 0%, transparent 72%), radial-gradient(ellipse 52% 34% at 82% 38%, rgba(58,153,156,.030) 0%, transparent 74%), linear-gradient(to bottom, rgba(7,5,3,.0), rgba(7,5,3,.30) 68%, rgba(7,5,3,.74)) !important; opacity: .64 !important; } .trace-intro { position: relative; } .trace-intro::after { content: ''; position: absolute; left: 0; bottom: -3.8rem; width: min(54rem, 72vw); height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(200,64,26,.34), rgba(88,205,210,.10), transparent); opacity: .38; filter: drop-shadow(0 0 10px rgba(200,64,26,.12)); } @keyframes topologyMapBedBreathe { 0% { transform: translate3d(-2%, 2%, 0) scale(.96); opacity: .46; } 48% { transform: translate3d(2.5%, -2%, 0) scale(1.07); opacity: .78; } 100% { transform: translate3d(-1%, 1%, 0) scale(1.02); opacity: .60; } } @keyframes topologyLargeOrbit { from { stroke-dashoffset: 0; opacity: .36; } 45% { opacity: .70; } to { stroke-dashoffset: -260; opacity: .42; } } @media(max-width:900px) { .trace-topology-svg { top: 7rem !important; right: -18rem !important; width: 132vw !important; height: 32rem !important; opacity: .62 !important; } .trace-topology-field::before { width: 110%; right: -28%; top: 6rem; height: 26rem; opacity: .56; } .trace-topology-field::after { opacity: .28; } } @media(max-width:768px) { .trace-topology-svg { top: 9rem !important; right: -30rem !important; width: 180vw !important; height: 27rem !important; opacity: .44 !important; } .topology-large-orbit { opacity: .32; } .trace-intro::after { width: 80vw; bottom: -2.4rem; } } /* METHOD V9: Failure Signature Archive */ .failure-signatures-archive { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 76% 44% at 76% 20%, rgba(200,64,26,.052) 0%, rgba(65,21,6,.025) 46%, transparent 74%), radial-gradient(ellipse 58% 34% at 70% 54%, rgba(58,153,156,.030) 0%, transparent 74%), #060402 !important; } .signature-archive-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 82%, transparent 100%); } .failure-signatures-archive > .section-label, .failure-signatures-archive > h2, .failure-signatures-archive > .signature-wall { position: relative; z-index: 3; } .archive-bed { position: absolute; right: -8%; top: 4rem; width: 74%; height: 29rem; background: radial-gradient(ellipse 78% 58% at 44% 42%, rgba(200,64,26,.095) 0%, rgba(91,34,10,.045) 42%, transparent 76%), radial-gradient(ellipse 56% 42% at 72% 54%, rgba(58,153,156,.070) 0%, rgba(20,74,85,.030) 46%, transparent 78%); filter: blur(34px); opacity: .66; mix-blend-mode: screen; animation: archiveBedBreathe 34s ease-in-out infinite alternate; } .archive-rail { position: absolute; right: 3.5rem; top: 8.4rem; width: min(64vw, 58rem); height: 7rem; opacity: .92; } .archive-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(154,142,130,.12), rgba(200,64,26,.28), rgba(88,205,210,.12), rgba(154,142,130,.08), transparent); filter: drop-shadow(0 0 12px rgba(200,64,26,.08)); } .archive-rail::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% + 1.35rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.075), rgba(200,64,26,.10), transparent); opacity: .62; transform: scaleX(.82); transform-origin: center; animation: archiveSubrailBreathe 13s ease-in-out infinite; } .archive-scan { position: absolute; top: calc(50% - 9px); width: 9rem; height: 18px; left: -10rem; background: linear-gradient(90deg, transparent, rgba(200,64,26,.30), rgba(88,205,210,.16), transparent); filter: blur(5px) drop-shadow(0 0 14px rgba(200,64,26,.16)); opacity: 0; animation: archiveScanner 10.8s cubic-bezier(.37,0,.63,1) infinite; } .archive-node { position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: rgba(8,6,4,.92); border: 1px solid rgba(200,64,26,.34); box-shadow: 0 0 12px rgba(200,64,26,.10); transform: translateZ(0); animation: archiveNodeWake 10.8s ease-in-out infinite; } .archive-node.n1 { left: 4%; animation-delay: 0s; } .archive-node.n2 { left: 17%; animation-delay: .7s; } .archive-node.n3 { left: 31%; animation-delay: 1.4s; } .archive-node.n4 { left: 44%; animation-delay: 2.1s; } .archive-node.n5 { left: 57%; animation-delay: 2.8s; } .archive-node.n6 { left: 70%; animation-delay: 3.5s; } .archive-node.n7 { left: 83%; animation-delay: 4.2s; } .archive-node.n8 { left: 95%; animation-delay: 4.9s; } .archive-glyphs { position: absolute; right: 3.5rem; top: 14rem; width: min(64vw, 58rem); height: 13rem; } .glyph { position: absolute; width: 8rem; height: 2.8rem; opacity: .26; filter: drop-shadow(0 0 10px rgba(200,64,26,.05)); animation: archiveGlyphDrift 24s ease-in-out infinite alternate; } .glyph::before, .glyph::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.24), rgba(88,205,210,.10), transparent); } .glyph::before { top: 35%; transform: rotate(-8deg); } .glyph::after { top: 64%; transform: rotate(5deg); opacity: .64; } .glyph.g1 { left: 2%; top: 12%; animation-delay: -2s; } .glyph.g2 { left: 25%; top: 52%; animation-delay: -9s; } .glyph.g3 { left: 48%; top: 18%; animation-delay: -14s; } .glyph.g4 { left: 66%; top: 66%; animation-delay: -5s; } .glyph.g5 { left: 82%; top: 26%; animation-delay: -18s; } .glyph.g6 { left: 13%; top: 76%; animation-delay: -11s; } .failure-signatures-archive::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 76px, rgba(200,64,26,.020) 77px, rgba(88,205,210,.010) 78px, transparent 80px ), linear-gradient(to bottom, rgba(7,5,3,.02), rgba(7,5,3,.32) 64%, rgba(7,5,3,.78)); opacity: .70; mix-blend-mode: screen; } .signature-wall { position: relative; background: rgba(255,255,255,.045) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.018), 0 34px 130px rgba(0,0,0,.26); } .signature-tile { position: relative; overflow: hidden; min-height: 210px; background: radial-gradient(ellipse 80% 70% at 18% 16%, rgba(200,64,26,.020) 0%, transparent 70%), rgba(8,6,4,.82) !important; transition: background .7s ease, box-shadow .7s ease, transform .7s cubic-bezier(.22,1,.36,1), border-color .7s ease; } .signature-tile::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .16; pointer-events: none; transition: opacity .65s ease, transform .85s cubic-bezier(.22,1,.36,1); background: var(--signature-pattern); transform: scale(.98); } .signature-tile::after { content: ''; position: absolute; left: 2rem; right: 2rem; bottom: 1.65rem; height: 1px; z-index: 1; pointer-events: none; opacity: 0; transform: scaleX(.35); transform-origin: left center; background: linear-gradient(90deg, rgba(200,64,26,.42), rgba(88,205,210,.13), transparent); filter: drop-shadow(0 0 10px rgba(200,64,26,.15)); transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); } .signature-tile > * { position: relative; z-index: 2; } .signature-tile:hover, .signature-tile.signature-active, .signature-tile.is-scroll-active { background: radial-gradient(ellipse 90% 80% at 18% 16%, rgba(200,64,26,.085) 0%, rgba(200,64,26,.032) 44%, transparent 72%), rgba(20,14,9,.96) !important; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(200,64,26,.10), 0 22px 80px rgba(0,0,0,.26); } .signature-tile:hover::before, .signature-tile.signature-active::before, .signature-tile.is-scroll-active::before { opacity: .78; transform: scale(1.035); } .signature-tile:hover::after, .signature-tile.signature-active::after, .signature-tile.is-scroll-active::after { opacity: .78; transform: scaleX(1); } .signature-tile h3 { transition: color .55s ease, text-shadow .65s ease, transform .65s cubic-bezier(.22,1,.36,1); } .signature-tile p { transition: color .55s ease, text-shadow .65s ease; } .signature-tile:hover h3, .signature-tile.signature-active h3, .signature-tile.is-scroll-active h3 { color: rgba(240,235,227,.98); text-shadow: 0 0 16px rgba(200,64,26,.13), 0 0 28px rgba(88,205,210,.035); transform: translateY(-1px); } .signature-tile:hover p, .signature-tile.signature-active p, .signature-tile.is-scroll-active p { color: rgba(240,235,227,.82); } .signature-tile[data-signature="gravity"] { --signature-pattern: repeating-linear-gradient(100deg, transparent 0 16px, rgba(200,64,26,.14) 17px, transparent 19px), linear-gradient(180deg, transparent, rgba(200,64,26,.09)); } .signature-tile[data-signature="static"] { --signature-pattern: repeating-linear-gradient(90deg, transparent 0 9px, rgba(200,64,26,.16) 10px, transparent 13px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(88,205,210,.07) 19px, transparent 22px); } .signature-tile[data-signature="fog"] { --signature-pattern: radial-gradient(ellipse 52% 42% at 25% 32%, rgba(154,142,130,.075) 0%, transparent 70%), radial-gradient(ellipse 48% 42% at 76% 66%, rgba(88,205,210,.060) 0%, transparent 72%); filter: none; } .signature-tile[data-signature="theater"] { --signature-pattern: linear-gradient(90deg, transparent, rgba(240,235,227,.10), transparent), linear-gradient(180deg, rgba(200,64,26,.12), transparent 28%); } .signature-tile[data-signature="queues"] { --signature-pattern: repeating-linear-gradient(0deg, transparent 0 13px, rgba(200,64,26,.12) 14px, transparent 16px), linear-gradient(90deg, transparent 0%, rgba(88,205,210,.07) 50%, transparent 100%); } .signature-tile[data-signature="echoes"] { --signature-pattern: repeating-radial-gradient(ellipse at 20% 48%, rgba(200,64,26,.16) 0 1px, transparent 2px 18px), radial-gradient(ellipse at 20% 48%, rgba(88,205,210,.06), transparent 64%); } .signature-tile[data-signature="lag"] { --signature-pattern: linear-gradient(90deg, transparent 0%, rgba(200,64,26,.18) 32%, transparent 36%, transparent 72%, rgba(88,205,210,.12) 76%, transparent 82%); } .signature-tile[data-signature="drift"] { --signature-pattern: repeating-linear-gradient(112deg, transparent 0 20px, rgba(200,64,26,.12) 21px, transparent 24px), radial-gradient(ellipse at 74% 32%, rgba(88,205,210,.06), transparent 58%); } @keyframes archiveBedBreathe { 0% { opacity: .44; transform: translate3d(-2%, 2%, 0) scale(.96); } 46% { opacity: .78; transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { opacity: .58; transform: translate3d(-1%, 1%, 0) scale(1.02); } } @keyframes archiveSubrailBreathe { 0%, 100% { opacity: .22; transform: scaleX(.72); } 50% { opacity: .70; transform: scaleX(1); } } @keyframes archiveScanner { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: .55; } 78% { opacity: .55; } 100% { opacity: 0; transform: translateX(calc(min(64vw, 58rem) + 10rem)); } } @keyframes archiveNodeWake { 0%, 100% { background: rgba(8,6,4,.92); border-color: rgba(200,64,26,.26); box-shadow: 0 0 8px rgba(200,64,26,.06); } 18%, 30% { background: rgba(224,85,48,.52); border-color: rgba(240,235,227,.28); box-shadow: 0 0 14px rgba(224,85,48,.42), 0 0 32px rgba(88,205,210,.12); } } @keyframes archiveGlyphDrift { 0% { opacity: .12; transform: translate3d(-4%, 3%, 0) scale(.92); } 46% { opacity: .36; transform: translate3d(3%, -2%, 0) scale(1.06); } 100% { opacity: .22; transform: translate3d(1%, 1%, 0) scale(1); } } @media(max-width:900px) { .archive-rail, .archive-glyphs { right: -12rem; width: 105vw; opacity: .55; } .archive-bed { right: -32%; width: 112%; opacity: .42; } } @media(max-width:768px) { .signature-wall { box-shadow: 0 24px 90px rgba(0,0,0,.28); } .archive-rail { top: 12rem; right: -22rem; width: 145vw; opacity: .42; } .archive-glyphs { top: 17rem; right: -22rem; width: 145vw; opacity: .32; } .signature-tile { min-height: 170px; } } @media (prefers-reduced-motion: reduce) { .archive-bed, .archive-rail::after, .archive-scan, .archive-node, .glyph { animation: none !important; } } /* METHOD V10: restore trace tracker, branching circuit, cleaner sonar taxonomy */ /* Restore the left tracker/spine behavior above background fields */ .trace-grid { position: relative; z-index: 5; } .trace-spine { position: sticky !important; top: 7.5rem !important; align-self: start !important; z-index: 8 !important; transform: translateZ(0); } .trace-spine::before { opacity: .65 !important; background: linear-gradient(to bottom, rgba(200,64,26,.42), rgba(88,205,210,.16), rgba(200,64,26,.18), transparent) !important; box-shadow: 0 0 20px rgba(200,64,26,.10); } .trace-node { transition: color .45s ease, opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1), text-shadow .55s ease !important; } .trace-node.active { color: var(--cream) !important; opacity: 1 !important; text-shadow: 0 0 14px rgba(200,64,26,.20), 0 0 26px rgba(88,205,210,.06); transform: translateX(4px); } .trace-node.active::before { background: var(--red-hi) !important; box-shadow: 0 0 14px rgba(224,85,48,.55), 0 0 34px rgba(88,205,210,.12); } /* Upgrade topology from a single line into a branching circuit of evidence */ .topology-branch-active, .topology-complete-circuit { fill: none; vector-effect: non-scaling-stroke; filter: url(#traceGlow) drop-shadow(0 0 12px rgba(200,64,26,.14)) drop-shadow(0 0 22px rgba(88,205,210,.055)); } .topology-branch-active { stroke: rgba(88,205,210,.24); stroke-width: 1.25; stroke-dasharray: 62 420; stroke-dashoffset: 420; opacity: 0; } .topology-branch-active-one { animation: topologyBranchTraceOne 13.8s linear infinite; } .topology-branch-active-two { animation: topologyBranchTraceTwo 13.8s linear infinite; } .topology-branch-active-three { animation: topologyBranchTraceThree 13.8s linear infinite; } .topology-complete-circuit { stroke: rgba(200,64,26,.24); stroke-width: 1.2; stroke-dasharray: 1120; stroke-dashoffset: 1120; opacity: 0; animation: topologyCompleteCircuit 13.8s linear infinite; } .topology-active-path { animation-duration: 13.8s !important; stroke-dasharray: 150 760 !important; } .topology-feedback-active { animation-duration: 13.8s !important; animation-delay: 7.4s !important; } .topology-traveler { animation-duration: 13.8s !important; } .topology-traveler.cool { animation-duration: 13.8s !important; animation-delay: 3.6s !important; } .topology-large-orbit { opacity: .68 !important; } @keyframes topologyBranchTraceOne { 0%, 18% { opacity: 0; stroke-dashoffset: 420; } 26% { opacity: .58; } 42% { opacity: .58; stroke-dashoffset: 0; } 58%, 100% { opacity: 0; stroke-dashoffset: -62; } } @keyframes topologyBranchTraceTwo { 0%, 34% { opacity: 0; stroke-dashoffset: 420; } 42% { opacity: .50; } 58% { opacity: .50; stroke-dashoffset: 0; } 72%, 100% { opacity: 0; stroke-dashoffset: -62; } } @keyframes topologyBranchTraceThree { 0%, 48% { opacity: 0; stroke-dashoffset: 420; } 56% { opacity: .54; } 72% { opacity: .54; stroke-dashoffset: 0; } 84%, 100% { opacity: 0; stroke-dashoffset: -62; } } @keyframes topologyCompleteCircuit { 0%, 58% { opacity: 0; stroke-dashoffset: 1120; } 72% { opacity: .18; stroke-dashoffset: 520; } 84% { opacity: .42; stroke-dashoffset: 0; } 90% { opacity: .62; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } /* Pull back the previous decorative signature archive */ .signature-archive-field { display: none !important; } .failure-signatures-archive { background: radial-gradient(ellipse 76% 44% at 72% 18%, rgba(200,64,26,.045) 0%, rgba(65,21,6,.020) 46%, transparent 74%), radial-gradient(ellipse 58% 34% at 68% 50%, rgba(58,153,156,.026) 0%, transparent 74%), #060402 !important; } .signature-sonar-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 78%, transparent 100%); } .sonar-bed { position: absolute; right: -7%; top: 3.5rem; width: 72%; height: 28rem; border-radius: 50%; background: radial-gradient(ellipse 78% 58% at 50% 44%, rgba(200,64,26,.070) 0%, rgba(91,34,10,.034) 42%, transparent 76%), radial-gradient(ellipse 56% 42% at 70% 54%, rgba(58,153,156,.052) 0%, rgba(20,74,85,.025) 46%, transparent 78%); filter: blur(36px); opacity: .58; mix-blend-mode: screen; animation: sonarBedBreathe 38s ease-in-out infinite alternate; } .sonar-sweep { position: absolute; right: 8%; top: 7rem; width: min(56vw, 52rem); height: 24rem; border-radius: 50%; border: 1px solid rgba(88,205,210,.095); opacity: .40; transform: rotate(-10deg) scale(.86); box-shadow: inset 0 0 36px rgba(88,205,210,.020), 0 0 40px rgba(200,64,26,.030); animation: sonarSweepPulse 9.8s ease-in-out infinite; } .sonar-sweep::before, .sonar-sweep::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(200,64,26,.085); opacity: .62; } .sonar-sweep::after { inset: 35%; border-color: rgba(88,205,210,.075); opacity: .50; } .sonar-taxonomy-line { position: absolute; right: 4rem; top: 11.5rem; width: min(60vw, 56rem); height: 5rem; } .sonar-taxonomy-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.24), rgba(88,205,210,.12), rgba(154,142,130,.08), transparent); filter: drop-shadow(0 0 10px rgba(200,64,26,.08)); } .sonar-taxonomy-line span { position: absolute; top: calc(50% - 7px); width: 1px; height: 14px; background: rgba(200,64,26,.24); box-shadow: 0 0 12px rgba(200,64,26,.10); animation: taxonomyTick 8.4s ease-in-out infinite; } .sonar-taxonomy-line span:nth-child(1) { left: 12%; animation-delay: 0s; } .sonar-taxonomy-line span:nth-child(2) { left: 37%; animation-delay: 1.2s; } .sonar-taxonomy-line span:nth-child(3) { left: 64%; animation-delay: 2.4s; } .sonar-taxonomy-line span:nth-child(4) { left: 88%; animation-delay: 3.6s; } .sonar-fragments { position: absolute; right: 4rem; top: 17rem; width: min(60vw, 56rem); height: 10rem; } .sonar-fragments span { position: absolute; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(154,142,130,.20); transform: translateZ(0); animation: fragmentResolve 14s ease-in-out infinite; } .sonar-fragments span:nth-child(1) { left: 4%; top: 10%; animation-delay: -2s; } .sonar-fragments span:nth-child(2) { left: 22%; top: 54%; animation-delay: -8s; } .sonar-fragments span:nth-child(3) { left: 38%; top: 22%; animation-delay: -11s; } .sonar-fragments span:nth-child(4) { left: 56%; top: 70%; animation-delay: -4s; } .sonar-fragments span:nth-child(5) { left: 70%; top: 16%; animation-delay: -13s; } .sonar-fragments span:nth-child(6) { left: 82%; top: 56%; animation-delay: -6s; } .sonar-fragments span:nth-child(7) { left: 12%; top: 82%; animation-delay: -16s; } .sonar-fragments span:nth-child(8) { left: 48%; top: 44%; animation-delay: -18s; } .signature-wall { background: rgba(255,255,255,.032) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.014), 0 30px 110px rgba(0,0,0,.23) !important; } .signature-tile { min-height: 190px !important; background: rgba(7,5,3,.76) !important; transition: background .65s ease, box-shadow .65s ease, transform .65s cubic-bezier(.22,1,.36,1) !important; } .signature-tile::before { background: none !important; opacity: 0 !important; } .signature-tile::after { left: 2rem !important; right: auto !important; bottom: 2rem !important; width: 5.5rem !important; opacity: .18 !important; transform: scaleX(.62) !important; } .signature-tile:hover, .signature-tile.signature-active, .signature-tile.is-scroll-active { background: radial-gradient(ellipse 88% 74% at 18% 18%, rgba(200,64,26,.070) 0%, transparent 70%), rgba(18,13,9,.95) !important; transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(200,64,26,.075), 0 20px 72px rgba(0,0,0,.24); } .signature-tile:hover::after, .signature-tile.signature-active::after, .signature-tile.is-scroll-active::after { opacity: .75 !important; transform: scaleX(1) !important; } .signature-tile h3 { display: flex; align-items: center; gap: .85rem; } .signature-wave { width: 2.4rem; height: 1rem; display: inline-flex; align-items: center; gap: .22rem; opacity: .42; flex: 0 0 auto; } .signature-wave i { display: block; width: 1px; height: .45rem; background: rgba(200,64,26,.55); box-shadow: 0 0 8px rgba(200,64,26,.12); transform-origin: center; transition: height .5s ease, opacity .5s ease, background .5s ease, box-shadow .5s ease; } .signature-wave i:nth-child(2) { height: .8rem; background: rgba(88,205,210,.42); } .signature-wave i:nth-child(3) { height: .58rem; } .signature-tile:hover .signature-wave, .signature-tile.signature-active .signature-wave, .signature-tile.is-scroll-active .signature-wave { opacity: 1; } .signature-tile:hover .signature-wave i, .signature-tile.signature-active .signature-wave i, .signature-tile.is-scroll-active .signature-wave i { animation: signatureWaveHear 1.15s ease-in-out 1; background: rgba(224,85,48,.72); box-shadow: 0 0 10px rgba(224,85,48,.26), 0 0 20px rgba(88,205,210,.08); } .signature-tile:hover .signature-wave i:nth-child(2), .signature-tile.signature-active .signature-wave i:nth-child(2), .signature-tile.is-scroll-active .signature-wave i:nth-child(2) { animation-delay: .08s; background: rgba(88,205,210,.62); } .signature-tile:hover .signature-wave i:nth-child(3), .signature-tile.signature-active .signature-wave i:nth-child(3), .signature-tile.is-scroll-active .signature-wave i:nth-child(3) { animation-delay: .16s; } @keyframes sonarBedBreathe { 0% { opacity: .38; transform: translate3d(-2%, 2%, 0) scale(.96); } 48% { opacity: .66; transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { opacity: .50; transform: translate3d(-1%, 1%, 0) scale(1.02); } } @keyframes sonarSweepPulse { 0%, 100% { opacity: .16; transform: rotate(-10deg) scale(.72); } 48% { opacity: .46; transform: rotate(-10deg) scale(1.02); } 72% { opacity: .22; transform: rotate(-10deg) scale(1.18); } } @keyframes taxonomyTick { 0%, 100% { opacity: .24; transform: scaleY(.62); } 42% { opacity: .78; transform: scaleY(1.35); } } @keyframes fragmentResolve { 0%, 100% { opacity: .12; transform: translate3d(-4px, 3px, 0); } 46% { opacity: .36; transform: translate3d(3px, -2px, 0); } } @keyframes signatureWaveHear { 0%, 100% { transform: scaleY(.7); opacity: .52; } 36% { transform: scaleY(1.45); opacity: 1; } 62% { transform: scaleY(.92); opacity: .74; } } @media(max-width:900px) { .sonar-sweep, .sonar-taxonomy-line, .sonar-fragments { right: -18rem; width: 120vw; opacity: .58; } .sonar-bed { right: -34%; width: 112%; } } @media(max-width:768px) { .trace-spine { display: none !important; } .sonar-sweep, .sonar-taxonomy-line, .sonar-fragments { right: -26rem; width: 160vw; opacity: .38; } .signature-tile { min-height: 160px !important; } } @media (prefers-reduced-motion: reduce) { .topology-branch-active, .topology-complete-circuit, .sonar-bed, .sonar-sweep, .sonar-taxonomy-line span, .sonar-fragments span, .signature-wave i { animation: none !important; } } /* METHOD V11: quieter First Finding burst, fixed sticky tracker, stronger sonar field */ /* Tone down the First Finding nova into a diagnostic pressure-release, not an astronomy event */ .fault-nova-origin { width: 7px !important; height: 7px !important; opacity: 0; background: radial-gradient(circle, rgba(235,250,252,.72) 0%, rgba(88,205,210,.42) 22%, rgba(224,85,48,.34) 44%, transparent 82%) !important; filter: blur(.45px) drop-shadow(0 0 6px rgba(88,205,210,.10)) !important; } .fault-nova-ring { width: 154px !important; height: 108px !important; opacity: 0; background: radial-gradient(ellipse, transparent 0%, transparent 38%, rgba(88,205,210,.11) 46%, rgba(200,64,26,.075) 56%, transparent 80%) !important; filter: blur(9px) drop-shadow(0 0 10px rgba(88,205,210,.055)) !important; } .fault-nova-halo { width: 198px !important; height: 148px !important; opacity: 0; background: radial-gradient(ellipse, rgba(88,205,210,.060) 0%, rgba(200,64,26,.046) 32%, transparent 76%) !important; filter: blur(25px) !important; } /* Make sticky reliable: avoid ancestor clipping around the trace section */ .trace-system { overflow: visible !important; isolation: isolate; min-height: 100vh; } .trace-grid { align-items: start !important; overflow: visible !important; position: relative; z-index: 6; } .trace-spine { position: -webkit-sticky !important; position: sticky !important; top: 7rem !important; align-self: start !important; height: max-content !important; max-height: calc(100vh - 8rem); z-index: 20 !important; background: linear-gradient(90deg, rgba(7,5,3,.72), rgba(7,5,3,.38), transparent); backdrop-filter: blur(1px); padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .trace-topology-field { z-index: 0 !important; } .trace-content { position: relative; z-index: 6; } /* Stronger but still restrained Failure Signature sonar field */ .signature-sonar-field { opacity: 1 !important; z-index: 1 !important; mask-image: linear-gradient(to bottom, transparent 0%, black 3%, black 88%, transparent 100%) !important; } .failure-signatures-archive > .section-label, .failure-signatures-archive > h2, .failure-signatures-archive > .signature-wall { z-index: 4 !important; } .sonar-bed { opacity: .86 !important; filter: blur(30px) !important; background: radial-gradient(ellipse 78% 58% at 50% 44%, rgba(200,64,26,.105) 0%, rgba(91,34,10,.050) 42%, transparent 76%), radial-gradient(ellipse 56% 42% at 70% 54%, rgba(88,205,210,.088) 0%, rgba(20,74,85,.040) 46%, transparent 78%) !important; } .sonar-sweep { opacity: .68 !important; border-color: rgba(88,205,210,.16) !important; box-shadow: inset 0 0 42px rgba(88,205,210,.035), 0 0 48px rgba(200,64,26,.055) !important; } .sonar-sweep::before { border-color: rgba(200,64,26,.15) !important; opacity: .80 !important; } .sonar-sweep::after { border-color: rgba(88,205,210,.13) !important; opacity: .68 !important; } .sonar-taxonomy-line::before { background: linear-gradient(90deg, transparent, rgba(200,64,26,.36), rgba(88,205,210,.20), rgba(154,142,130,.12), transparent) !important; filter: drop-shadow(0 0 12px rgba(200,64,26,.13)) drop-shadow(0 0 20px rgba(88,205,210,.05)) !important; } .sonar-fragments span { color: rgba(154,142,130,.34) !important; text-shadow: 0 0 12px rgba(200,64,26,.06); } .signature-tile { background: rgba(7,5,3,.70) !important; } /* Keep the little signal working continuously during hover/active state */ .signature-tile:hover .signature-wave i, .signature-tile.signature-active .signature-wave i, .signature-tile.is-scroll-active .signature-wave i { animation: signatureWaveListening 1.2s ease-in-out infinite !important; } .signature-tile:hover .signature-wave i:nth-child(2), .signature-tile.signature-active .signature-wave i:nth-child(2), .signature-tile.is-scroll-active .signature-wave i:nth-child(2) { animation-delay: .12s !important; } .signature-tile:hover .signature-wave i:nth-child(3), .signature-tile.signature-active .signature-wave i:nth-child(3), .signature-tile.is-scroll-active .signature-wave i:nth-child(3) { animation-delay: .24s !important; } @keyframes signatureWaveListening { 0%, 100% { transform: scaleY(.68); opacity: .62; } 40% { transform: scaleY(1.55); opacity: 1; } 68% { transform: scaleY(.92); opacity: .78; } } @media(max-width:768px) { .trace-system { overflow: hidden !important; } } /* METHOD V12: origin resonance waves and cleaner signature scanner rail */ /* First Finding: replace the supernova feeling with origin resonance */ .fault-nova-origin { width: 6px !important; height: 6px !important; background: radial-gradient(circle, rgba(235,250,252,.62) 0%, rgba(88,205,210,.34) 28%, rgba(224,85,48,.26) 52%, transparent 82%) !important; filter: blur(.45px) drop-shadow(0 0 6px rgba(88,205,210,.08)) !important; } .fault-nova-ring, .fault-nova-halo { opacity: 0 !important; animation: none !important; } .fault-resonance-wave { position: absolute; left: var(--fault-nova-x); top: var(--fault-nova-y); width: 42vw; max-width: 36rem; height: 5rem; pointer-events: none; opacity: 0; transform-origin: center; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(200,64,26,.08)) drop-shadow(0 0 18px rgba(88,205,210,.035)); will-change: transform, opacity; } .fault-resonance-wave::before, .fault-resonance-wave::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.42), rgba(88,205,210,.22), rgba(200,64,26,.16), transparent); mask-image: repeating-linear-gradient( 90deg, black 0 18px, rgba(0,0,0,.50) 19px 26px, black 27px 42px ); } .fault-resonance-wave::before { top: 42%; transform: skewY(-4deg); } .fault-resonance-wave::after { top: 58%; opacity: .54; transform: skewY(4deg); background: linear-gradient(90deg, transparent, rgba(88,205,210,.24), rgba(224,85,48,.24), transparent); } .wave-left-one, .wave-left-two { transform: translate(-100%, -50%) scaleX(.08); } .wave-right-one, .wave-right-two { transform: translate(0, -50%) scaleX(.08); } .wave-left-one { animation: originWaveLeft 8.6s linear infinite; } .wave-right-one { animation: originWaveRight 8.6s linear infinite; } .wave-left-two { height: 3.6rem; animation: originWaveLeft 8.6s linear infinite; animation-delay: .24s; opacity: 0; filter: drop-shadow(0 0 8px rgba(88,205,210,.045)); } .wave-right-two { height: 3.6rem; animation: originWaveRight 8.6s linear infinite; animation-delay: .24s; opacity: 0; filter: drop-shadow(0 0 8px rgba(88,205,210,.045)); } @keyframes originWaveLeft { 0%, 39% { opacity: 0; transform: translate(-100%, -50%) scaleX(.04) translateX(0); filter: blur(0px); } 45% { opacity: .62; transform: translate(-100%, -50%) scaleX(.20) translateX(-.6rem); filter: blur(.1px); } 58% { opacity: .34; transform: translate(-100%, -50%) scaleX(.72) translateX(-2.4rem); filter: blur(.35px); } 76% { opacity: .12; transform: translate(-100%, -50%) scaleX(1.08) translateX(-4.2rem); filter: blur(.8px); } 100% { opacity: 0; transform: translate(-100%, -50%) scaleX(1.20) translateX(-5.4rem); filter: blur(1.2px); } } @keyframes originWaveRight { 0%, 39% { opacity: 0; transform: translate(0, -50%) scaleX(.04) translateX(0); filter: blur(0px); } 45% { opacity: .62; transform: translate(0, -50%) scaleX(.20) translateX(.6rem); filter: blur(.1px); } 58% { opacity: .34; transform: translate(0, -50%) scaleX(.72) translateX(2.4rem); filter: blur(.35px); } 76% { opacity: .12; transform: translate(0, -50%) scaleX(1.08) translateX(4.2rem); filter: blur(.8px); } 100% { opacity: 0; transform: translate(0, -50%) scaleX(1.20) translateX(5.4rem); filter: blur(1.2px); } } /* Failure Signatures: remove the blue orbit cloud and replace it with a simpler scanner rail */ .signature-sonar-field { display: none !important; } .signature-scanner-rail { position: absolute; right: 4rem; top: 9.75rem; width: min(60vw, 58rem); height: 8.5rem; z-index: 1; pointer-events: none; opacity: .95; } .scanner-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(154,142,130,.16), rgba(200,64,26,.34), rgba(88,205,210,.16), rgba(154,142,130,.10), transparent); filter: drop-shadow(0 0 10px rgba(200,64,26,.10)) drop-shadow(0 0 16px rgba(88,205,210,.035)); } .scanner-sweep { position: absolute; top: calc(50% - 9px); left: -7rem; width: 7rem; height: 18px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.42), rgba(88,205,210,.18), transparent); filter: blur(5px); opacity: 0; animation: signatureRailSweep 9.6s cubic-bezier(.37,0,.63,1) infinite; } .scanner-tick { position: absolute; top: calc(50% - 7px); width: 1px; height: 14px; background: rgba(200,64,26,.34); box-shadow: 0 0 12px rgba(200,64,26,.13); animation: signatureTickWake 9.6s ease-in-out infinite; } .scanner-tick::after { content: ''; position: absolute; left: -1.25rem; top: 1.15rem; width: 2.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.18), rgba(200,64,26,.22), transparent); opacity: 0; transform: scaleX(.4); animation: signatureTickWave 9.6s ease-in-out infinite; } .tick-1 { left: 4%; animation-delay: 0s; } .tick-2 { left: 17%; animation-delay: .55s; } .tick-3 { left: 31%; animation-delay: 1.1s; } .tick-4 { left: 44%; animation-delay: 1.65s; } .tick-5 { left: 57%; animation-delay: 2.2s; } .tick-6 { left: 70%; animation-delay: 2.75s; } .tick-7 { left: 83%; animation-delay: 3.3s; } .tick-8 { left: 95%; animation-delay: 3.85s; } .tick-1::after { animation-delay: 0s; } .tick-2::after { animation-delay: .55s; } .tick-3::after { animation-delay: 1.1s; } .tick-4::after { animation-delay: 1.65s; } .tick-5::after { animation-delay: 2.2s; } .tick-6::after { animation-delay: 2.75s; } .tick-7::after { animation-delay: 3.3s; } .tick-8::after { animation-delay: 3.85s; } .failure-signatures-archive { background: radial-gradient(ellipse 78% 36% at 76% 20%, rgba(200,64,26,.050) 0%, rgba(65,21,6,.022) 46%, transparent 76%), radial-gradient(ellipse 48% 24% at 72% 40%, rgba(88,205,210,.026) 0%, transparent 72%), #060402 !important; } .signature-code { display: block; color: var(--red); font-size: .55rem; letter-spacing: .20em; text-transform: uppercase; margin-bottom: 1.05rem; opacity: .68; transition: opacity .45s ease, color .45s ease, text-shadow .55s ease; } .signature-tile:hover .signature-code, .signature-tile.signature-active .signature-code, .signature-tile.is-scroll-active .signature-code { color: var(--red-hi); opacity: 1; text-shadow: 0 0 12px rgba(200,64,26,.22); } .signature-tile:hover .signature-wave i, .signature-tile.signature-active .signature-wave i, .signature-tile.is-scroll-active .signature-wave i { animation: signatureWaveListening 1.2s ease-in-out infinite !important; } .signature-tile:hover .signature-wave i:nth-child(2), .signature-tile.signature-active .signature-wave i:nth-child(2), .signature-tile.is-scroll-active .signature-wave i:nth-child(2) { animation-delay: .12s !important; } .signature-tile:hover .signature-wave i:nth-child(3), .signature-tile.signature-active .signature-wave i:nth-child(3), .signature-tile.is-scroll-active .signature-wave i:nth-child(3) { animation-delay: .24s !important; } @keyframes signatureRailSweep { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: .58; } 74% { opacity: .58; } 100% { opacity: 0; transform: translateX(calc(min(60vw, 58rem) + 8rem)); } } @keyframes signatureTickWake { 0%, 100% { opacity: .28; transform: scaleY(.62); background: rgba(200,64,26,.28); } 18%, 28% { opacity: .88; transform: scaleY(1.4); background: rgba(224,85,48,.72); box-shadow: 0 0 14px rgba(224,85,48,.36), 0 0 26px rgba(88,205,210,.10); } } @keyframes signatureTickWave { 0%, 100% { opacity: 0; transform: scaleX(.35); } 20% { opacity: .62; transform: scaleX(1); } 36% { opacity: 0; transform: scaleX(1.3); } } @keyframes signatureWaveListening { 0%, 100% { transform: scaleY(.68); opacity: .62; } 40% { transform: scaleY(1.55); opacity: 1; } 68% { transform: scaleY(.92); opacity: .78; } } @media(max-width:900px) { .signature-scanner-rail { right: -12rem; width: 110vw; opacity: .62; } } @media(max-width:768px) { .fault-resonance-wave { width: 62vw; } .signature-scanner-rail { top: 12rem; right: -24rem; width: 160vw; opacity: .46; } } @media (prefers-reduced-motion: reduce) { .fault-resonance-wave, .scanner-sweep, .scanner-tick, .scanner-tick::after, .signature-wave i { animation: none !important; } } /* METHOD V13: Signal Clarification Field and Pattern Recognition Field */ /* First Finding: remove explosion metaphor and make the section listen/clarify */ .fault-trace-chamber { opacity: .45; } .fault-nova-origin, .fault-nova-ring, .fault-nova-halo, .fault-resonance-wave { display: none !important; animation: none !important; } .signal-clarification-field { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; contain: layout paint style; --clarify-x: 48%; --clarify-y: 52%; } .clarifying-gaze { position: absolute; left: var(--clarify-x); top: var(--clarify-y); width: 28rem; height: 18rem; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 42% at 52% 46%, rgba(240,235,227,.060) 0%, transparent 42%), radial-gradient(ellipse 72% 56% at 50% 50%, rgba(200,64,26,.115) 0%, rgba(200,64,26,.046) 42%, transparent 76%), radial-gradient(ellipse 56% 42% at 66% 54%, rgba(88,205,210,.090) 0%, rgba(28,94,108,.036) 46%, transparent 78%); filter: blur(22px); mix-blend-mode: screen; opacity: 0; animation: clarifyingGazeMove 16s cubic-bezier(.37,0,.63,1) infinite; will-change: transform, opacity; } .distortion-wave { position: absolute; left: var(--clarify-x); top: var(--clarify-y); width: 24rem; height: 4.2rem; transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(200,64,26,.10)) drop-shadow(0 0 18px rgba(88,205,210,.045)); animation: distortionClarifies 16s linear infinite; will-change: transform, opacity, filter; } .distortion-wave::before, .distortion-wave::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.52), rgba(88,205,210,.28), rgba(240,235,227,.16), rgba(200,64,26,.20), transparent); mask-image: repeating-linear-gradient( 90deg, black 0 12px, rgba(0,0,0,.35) 13px 17px, black 18px 25px, rgba(0,0,0,.62) 26px 32px ); } .distortion-wave::before { top: 38%; transform: skewY(-10deg); animation: waveformNoiseToSmooth 16s linear infinite; } .distortion-wave::after { top: 62%; opacity: .62; transform: skewY(9deg); animation: waveformNoiseToSmoothAlt 16s linear infinite; } .distortion-wave.wave-b { width: 19rem; height: 3.2rem; animation-delay: 5.25s; } .distortion-wave.wave-c { width: 21rem; height: 3.8rem; animation-delay: 10.55s; } @keyframes clarifyingGazeMove { 0% { --clarify-x: 42%; --clarify-y: 42%; opacity: 0; transform: translate(-50%, -50%) scale(.82); } 9% { opacity: .46; transform: translate(-50%, -50%) scale(1); } 24% { opacity: .58; transform: translate(-50%, -50%) scale(1.08); } 34% { opacity: .18; transform: translate(-50%, -50%) scale(1.18); } 38% { opacity: 0; transform: translate(-50%, -50%) scale(.86); } 39% { --clarify-x: 62%; --clarify-y: 55%; } 47% { opacity: .42; transform: translate(-50%, -50%) scale(1); } 62% { opacity: .56; transform: translate(-50%, -50%) scale(1.10); } 72% { opacity: .16; transform: translate(-50%, -50%) scale(1.20); } 76% { opacity: 0; transform: translate(-50%, -50%) scale(.86); } 77% { --clarify-x: 36%; --clarify-y: 61%; } 85% { opacity: .40; transform: translate(-50%, -50%) scale(1); } 96% { opacity: .16; transform: translate(-50%, -50%) scale(1.16); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); } } @keyframes distortionClarifies { 0%, 4% { opacity: 0; transform: translate(-50%, -50%) scaleX(.82) rotate(-2deg); filter: blur(.9px) drop-shadow(0 0 8px rgba(200,64,26,.06)); } 9% { opacity: .26; transform: translate(-50%, -50%) scaleX(.94) rotate(-2deg); filter: blur(.65px) drop-shadow(0 0 12px rgba(200,64,26,.10)); } 18% { opacity: .62; transform: translate(-50%, -50%) scaleX(1.04) rotate(-1deg); filter: blur(.25px) drop-shadow(0 0 18px rgba(88,205,210,.08)); } 27% { opacity: .46; transform: translate(-50%, -50%) scaleX(1.18) rotate(0deg); filter: blur(.15px) drop-shadow(0 0 14px rgba(200,64,26,.08)); } 36%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.34) rotate(0deg); filter: blur(.9px); } } @keyframes waveformNoiseToSmooth { 0%, 8% { transform: skewY(-13deg) translateY(-2px); opacity: .86; } 18% { transform: skewY(-6deg) translateY(0); opacity: .95; } 28% { transform: skewY(-1deg) translateY(0); opacity: .72; } 36%, 100% { transform: skewY(0deg) translateY(0); opacity: 0; } } @keyframes waveformNoiseToSmoothAlt { 0%, 8% { transform: skewY(12deg) translateY(2px); opacity: .62; } 18% { transform: skewY(5deg) translateY(0); opacity: .74; } 28% { transform: skewY(1deg) translateY(0); opacity: .48; } 36%, 100% { transform: skewY(0deg) translateY(0); opacity: 0; } } /* Failure Signatures: replace rail/orbit language with unresolved pattern recognition field */ .signature-scanner-rail, .signature-sonar-field { display: none !important; } .signature-pattern-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 78%, transparent 100%); } .recognition-haze { position: absolute; right: -6%; top: 4rem; width: 72%; height: 30rem; border-radius: 50%; background: radial-gradient(ellipse 70% 50% at 52% 44%, rgba(200,64,26,.080) 0%, rgba(91,34,10,.036) 42%, transparent 76%), radial-gradient(ellipse 50% 38% at 70% 58%, rgba(88,205,210,.055) 0%, rgba(20,74,85,.024) 46%, transparent 78%); filter: blur(34px); opacity: .58; mix-blend-mode: screen; animation: recognitionHazeDrift 36s ease-in-out infinite alternate; } .pattern-fragment { position: absolute; width: 9rem; height: 3rem; opacity: .24; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(200,64,26,.055)) drop-shadow(0 0 18px rgba(88,205,210,.030)); transition: opacity .65s ease, filter .65s ease, transform .75s cubic-bezier(.22,1,.36,1); animation: patternFragmentDrift 20s ease-in-out infinite alternate; } .pattern-fragment::before, .pattern-fragment::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.34), rgba(88,205,210,.12), transparent); mask-image: repeating-linear-gradient( 90deg, black 0 10px, rgba(0,0,0,.36) 11px 17px, black 18px 28px, transparent 29px 36px ); } .pattern-fragment::before { top: 35%; transform: skewY(-7deg); } .pattern-fragment::after { top: 64%; opacity: .52; transform: skewY(5deg); } .pattern-fragment.pf-1 { right: 48%; top: 17%; animation-delay: -2s; } .pattern-fragment.pf-2 { right: 33%; top: 31%; animation-delay: -8s; width: 7.5rem; } .pattern-fragment.pf-3 { right: 16%; top: 19%; animation-delay: -13s; width: 10rem; } .pattern-fragment.pf-4 { right: 5%; top: 43%; animation-delay: -5s; width: 8rem; } .pattern-fragment.pf-5 { right: 42%; top: 55%; animation-delay: -17s; width: 8.8rem; } .pattern-fragment.pf-6 { right: 25%; top: 67%; animation-delay: -10s; width: 11rem; } .pattern-fragment.pf-7 { right: 8%; top: 70%; animation-delay: -20s; width: 7.2rem; } .pattern-fragment.pf-8 { right: 56%; top: 39%; animation-delay: -15s; width: 6.8rem; } .failure-signatures-archive[data-active-signature="1"] .pf-1, .failure-signatures-archive[data-active-signature="2"] .pf-2, .failure-signatures-archive[data-active-signature="3"] .pf-3, .failure-signatures-archive[data-active-signature="4"] .pf-4, .failure-signatures-archive[data-active-signature="5"] .pf-5, .failure-signatures-archive[data-active-signature="6"] .pf-6, .failure-signatures-archive[data-active-signature="7"] .pf-7, .failure-signatures-archive[data-active-signature="8"] .pf-8 { opacity: .78; filter: drop-shadow(0 0 14px rgba(200,64,26,.22)) drop-shadow(0 0 26px rgba(88,205,210,.10)); transform: translateY(-2px) scale(1.08); } .failure-signatures-archive[data-active-signature="1"] .pf-1::before, .failure-signatures-archive[data-active-signature="2"] .pf-2::before, .failure-signatures-archive[data-active-signature="3"] .pf-3::before, .failure-signatures-archive[data-active-signature="4"] .pf-4::before, .failure-signatures-archive[data-active-signature="5"] .pf-5::before, .failure-signatures-archive[data-active-signature="6"] .pf-6::before, .failure-signatures-archive[data-active-signature="7"] .pf-7::before, .failure-signatures-archive[data-active-signature="8"] .pf-8::before { animation: fragmentClassified 1.25s ease-in-out infinite; } .failure-signatures-archive { background: radial-gradient(ellipse 78% 42% at 74% 22%, rgba(200,64,26,.040) 0%, rgba(65,21,6,.018) 46%, transparent 76%), radial-gradient(ellipse 48% 30% at 70% 45%, rgba(88,205,210,.020) 0%, transparent 72%), #060402 !important; } @keyframes recognitionHazeDrift { 0% { opacity: .36; transform: translate3d(-2%, 2%, 0) scale(.96); } 48% { opacity: .62; transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { opacity: .46; transform: translate3d(-1%, 1%, 0) scale(1.02); } } @keyframes patternFragmentDrift { 0% { opacity: .12; transform: translate3d(-5px, 3px, 0) scale(.94); } 48% { opacity: .30; transform: translate3d(4px, -3px, 0) scale(1.04); } 100% { opacity: .20; transform: translate3d(1px, 2px, 0) scale(1); } } @keyframes fragmentClassified { 0%, 100% { transform: skewY(-4deg) scaleX(.92); opacity: .70; } 46% { transform: skewY(0deg) scaleX(1.05); opacity: 1; } } @media(max-width:768px) { .clarifying-gaze { width: 20rem; height: 13rem; } .distortion-wave { width: 17rem; } .pattern-fragment { opacity: .16; } .recognition-haze { right: -34%; width: 112%; opacity: .36; } } @media (prefers-reduced-motion: reduce) { .clarifying-gaze, .distortion-wave, .distortion-wave::before, .distortion-wave::after, .recognition-haze, .pattern-fragment, .pattern-fragment::before { animation: none !important; } } /* METHOD V14: visible prototype pass for First Finding and Failure Signatures */ /* Make sure these new visual systems sit above the dark backgrounds but below readable content */ .fault-origin-prototype .fault-origin-inner, .failure-signatures-archive > .section-label, .failure-signatures-archive > h2, .failure-signatures-archive > .signature-wall { position: relative; z-index: 9 !important; } .fault-origin-prototype .fault-gas-field, .fault-trace-chamber, .signal-clarification-field { opacity: .28 !important; } .clarity-visible-field { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; mix-blend-mode: screen; } .clarity-orb { position: absolute; width: 30rem; height: 20rem; border-radius: 50%; left: 42%; top: 46%; background: radial-gradient(ellipse 42% 34% at 50% 48%, rgba(240,235,227,.105) 0%, transparent 44%), radial-gradient(ellipse 72% 58% at 50% 50%, rgba(200,64,26,.24) 0%, rgba(200,64,26,.085) 44%, transparent 76%), radial-gradient(ellipse 54% 42% at 66% 55%, rgba(88,205,210,.18) 0%, rgba(28,94,108,.065) 48%, transparent 78%); filter: blur(22px); opacity: 0; transform: translate(-50%, -50%) scale(.8); animation: clarityOrbVisible 15s ease-in-out infinite; } .clarity-wave { position: absolute; left: 42%; top: 46%; width: 34rem; height: 5.5rem; opacity: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px rgba(200,64,26,.22)) drop-shadow(0 0 28px rgba(88,205,210,.11)); animation: clarityWaveVisible 15s linear infinite; } .clarity-wave::before, .clarity-wave::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.76), rgba(88,205,210,.40), rgba(240,235,227,.20), rgba(200,64,26,.26), transparent); mask-image: repeating-linear-gradient( 90deg, black 0 16px, rgba(0,0,0,.35) 17px 24px, black 25px 40px, transparent 41px 50px ); } .clarity-wave::before { top: 36%; transform: skewY(-12deg); animation: clarityWaveStraighten 15s linear infinite; } .clarity-wave::after { top: 63%; opacity: .64; transform: skewY(10deg); animation: clarityWaveStraightenAlt 15s linear infinite; } .clarity-wave-two { left: 61%; top: 56%; width: 28rem; height: 4.8rem; animation-delay: 5s; } .clarity-wave-two::before, .clarity-wave-two::after { animation-delay: 5s; } .clarity-wave-three { left: 34%; top: 62%; width: 30rem; height: 4.8rem; animation-delay: 10s; } .clarity-wave-three::before, .clarity-wave-three::after { animation-delay: 10s; } @keyframes clarityOrbVisible { 0%, 3% { left: 42%; top: 46%; opacity: 0; transform: translate(-50%, -50%) scale(.78); } 8% { opacity: .56; transform: translate(-50%, -50%) scale(1); } 24% { opacity: .72; transform: translate(-50%, -50%) scale(1.08); } 32% { opacity: .18; transform: translate(-50%, -50%) scale(1.18); } 35% { opacity: 0; } 36% { left: 61%; top: 56%; opacity: 0; transform: translate(-50%, -50%) scale(.78); } 42% { opacity: .52; transform: translate(-50%, -50%) scale(1); } 58% { opacity: .70; transform: translate(-50%, -50%) scale(1.08); } 66% { opacity: .18; transform: translate(-50%, -50%) scale(1.18); } 69% { opacity: 0; } 70% { left: 34%; top: 62%; opacity: 0; transform: translate(-50%, -50%) scale(.78); } 76% { opacity: .50; transform: translate(-50%, -50%) scale(1); } 92% { opacity: .64; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } } @keyframes clarityWaveVisible { 0%, 4% { opacity: 0; transform: translate(-50%, -50%) scaleX(.68) rotate(-2deg); filter: blur(.8px) drop-shadow(0 0 8px rgba(200,64,26,.12)); } 10% { opacity: .36; transform: translate(-50%, -50%) scaleX(.86) rotate(-2deg); } 18% { opacity: .86; transform: translate(-50%, -50%) scaleX(1.04) rotate(-1deg); filter: blur(.15px) drop-shadow(0 0 18px rgba(88,205,210,.14)); } 28% { opacity: .50; transform: translate(-50%, -50%) scaleX(1.22) rotate(0deg); } 34%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.38) rotate(0deg); filter: blur(1px); } } @keyframes clarityWaveStraighten { 0%, 10% { transform: skewY(-14deg) translateY(-3px); } 20% { transform: skewY(-5deg) translateY(-1px); } 30%, 100% { transform: skewY(0deg) translateY(0); } } @keyframes clarityWaveStraightenAlt { 0%, 10% { transform: skewY(13deg) translateY(3px); } 20% { transform: skewY(5deg) translateY(1px); } 30%, 100% { transform: skewY(0deg) translateY(0); } } /* Failure Signatures: make the unresolved pattern field visible enough to judge */ .signature-visible-field { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; mix-blend-mode: screen; mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 78%, transparent 100%); } .signature-field-wash { position: absolute; right: -8%; top: 3.5rem; width: 78%; height: 31rem; border-radius: 50%; background: radial-gradient(ellipse 70% 50% at 50% 44%, rgba(200,64,26,.14) 0%, rgba(91,34,10,.060) 42%, transparent 76%), radial-gradient(ellipse 50% 38% at 70% 58%, rgba(88,205,210,.095) 0%, rgba(20,74,85,.040) 46%, transparent 78%); filter: blur(32px); opacity: .62; animation: visiblePatternWash 32s ease-in-out infinite alternate; } .visible-fragment { position: absolute; width: 12rem; height: 4rem; opacity: .42; filter: drop-shadow(0 0 14px rgba(200,64,26,.13)) drop-shadow(0 0 24px rgba(88,205,210,.065)); animation: visibleFragmentDrift 18s ease-in-out infinite alternate; transition: opacity .65s ease, filter .65s ease, transform .75s cubic-bezier(.22,1,.36,1); } .visible-fragment::before, .visible-fragment::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.66), rgba(88,205,210,.25), transparent); mask-image: repeating-linear-gradient( 90deg, black 0 12px, rgba(0,0,0,.35) 13px 19px, black 20px 34px, transparent 35px 46px ); } .visible-fragment::before { top: 38%; transform: skewY(-7deg); } .visible-fragment::after { top: 63%; opacity: .54; transform: skewY(5deg); background: linear-gradient(90deg, transparent, rgba(88,205,210,.32), rgba(224,85,48,.34), transparent); } .vf-1 { right: 50%; top: 18%; animation-delay: -2s; } .vf-2 { right: 34%; top: 30%; animation-delay: -8s; width: 10rem; } .vf-3 { right: 16%; top: 18%; animation-delay: -13s; width: 13rem; } .vf-4 { right: 5%; top: 43%; animation-delay: -5s; width: 10.5rem; } .vf-5 { right: 45%; top: 56%; animation-delay: -17s; width: 11rem; } .vf-6 { right: 26%; top: 68%; animation-delay: -10s; width: 14rem; } .failure-signatures-archive[data-active-signature="1"] .vf-1, .failure-signatures-archive[data-active-signature="2"] .vf-2, .failure-signatures-archive[data-active-signature="3"] .vf-3, .failure-signatures-archive[data-active-signature="4"] .vf-4, .failure-signatures-archive[data-active-signature="5"] .vf-5, .failure-signatures-archive[data-active-signature="6"] .vf-6, .failure-signatures-archive[data-active-signature="7"] .vf-2, .failure-signatures-archive[data-active-signature="8"] .vf-4 { opacity: .95; filter: drop-shadow(0 0 18px rgba(224,85,48,.28)) drop-shadow(0 0 34px rgba(88,205,210,.14)); transform: translateY(-3px) scale(1.08); } .failure-signatures-archive[data-active-signature] .signature-field-wash { opacity: .78; } @keyframes visiblePatternWash { 0% { opacity: .42; transform: translate3d(-2%, 2%, 0) scale(.96); } 48% { opacity: .70; transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { opacity: .54; transform: translate3d(-1%, 1%, 0) scale(1.02); } } @keyframes visibleFragmentDrift { 0% { opacity: .30; transform: translate3d(-6px, 4px, 0) scale(.95); } 48% { opacity: .54; transform: translate3d(5px, -4px, 0) scale(1.04); } 100% { opacity: .38; transform: translate3d(2px, 2px, 0) scale(1); } } @media(max-width:768px) { .clarity-orb { width: 20rem; height: 13rem; } .clarity-wave { width: 22rem; } .visible-fragment { width: 9rem; opacity: .28; } .signature-field-wash { right: -38%; width: 120%; opacity: .38; } } @media (prefers-reduced-motion: reduce) { .clarity-orb, .clarity-wave, .clarity-wave::before, .clarity-wave::after, .signature-field-wash, .visible-fragment { animation: none !important; } } /* METHOD V15: slow oscilloscope-style signal distortion field */ .clarity-visible-field, .signal-clarification-field { opacity: .20 !important; } .oscilloscope-signal-field { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; mix-blend-mode: screen; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 84%, transparent 100%); } .scope-grid { position: absolute; inset: 6% 0 8%; background: linear-gradient(rgba(88,205,210,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(88,205,210,.045) 1px, transparent 1px); background-size: 5.8rem 4.6rem; opacity: .18; transform: rotate(-1.4deg) scale(1.05); filter: drop-shadow(0 0 10px rgba(88,205,210,.035)); } .scope-sine { position: absolute; left: -8%; right: -8%; height: 12rem; opacity: .26; filter: blur(.2px) drop-shadow(0 0 12px rgba(88,205,210,.055)); animation: scopeSineDrift 34s linear infinite; } .scope-sine::before, .scope-sine::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.24), rgba(200,64,26,.10), rgba(88,205,210,.18), transparent); border-radius: 50%; transform-origin: center; } .scope-sine::before { top: 38%; transform: skewY(-7deg) scaleY(1.8); } .scope-sine::after { top: 62%; opacity: .54; transform: skewY(7deg) scaleY(1.4); } .scope-sine-one { top: 22%; } .scope-sine-two { top: 48%; opacity: .18; animation-duration: 44s; animation-direction: reverse; } .scope-waveform { position: absolute; left: 20%; right: 8%; top: 51%; height: 9rem; transform: translateY(-50%); opacity: 0; filter: drop-shadow(0 0 18px rgba(200,64,26,.22)) drop-shadow(0 0 32px rgba(88,205,210,.12)); animation: scopeDistortionCycle 18s ease-in-out infinite; } .scope-waveform::before, .scope-waveform::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(240,235,227,.40) 8%, rgba(224,85,48,.62) 22%, rgba(88,205,210,.40) 44%, rgba(240,235,227,.36) 61%, rgba(200,64,26,.36) 78%, transparent 100%); mask-image: repeating-linear-gradient( 90deg, black 0 10px, rgba(0,0,0,.42) 11px 17px, black 18px 30px, rgba(0,0,0,.72) 31px 37px ); transform-origin: center; } .scope-waveform::before { top: 43%; transform: skewY(-11deg) scaleY(1.1); animation: scopeNoiseSmooth 18s ease-in-out infinite; } .scope-waveform::after { top: 57%; opacity: .52; transform: skewY(9deg) scaleY(.9); animation: scopeNoiseSmoothAlt 18s ease-in-out infinite; } .scope-waveform-shadow { top: 53%; opacity: 0; filter: blur(1px) drop-shadow(0 0 22px rgba(88,205,210,.10)); animation-delay: .35s; } .scope-focus { position: absolute; left: 34%; top: 51%; width: 28rem; height: 14rem; border-radius: 50%; background: radial-gradient(ellipse 45% 38% at 50% 50%, rgba(240,235,227,.08) 0%, transparent 42%), radial-gradient(ellipse 74% 56% at 50% 50%, rgba(200,64,26,.16) 0%, rgba(200,64,26,.060) 44%, transparent 76%), radial-gradient(ellipse 52% 38% at 68% 54%, rgba(88,205,210,.13) 0%, rgba(28,94,108,.050) 46%, transparent 78%); filter: blur(24px); opacity: 0; transform: translate(-50%, -50%) scale(.86); animation: scopeFocusWander 18s ease-in-out infinite; } @keyframes scopeSineDrift { from { transform: translateX(-2%) rotate(-1deg); } to { transform: translateX(2%) rotate(-1deg); } } @keyframes scopeFocusWander { 0% { left: 34%; top: 48%; opacity: 0; transform: translate(-50%, -50%) scale(.82); } 10% { opacity: .46; transform: translate(-50%, -50%) scale(1.0); } 32% { opacity: .60; transform: translate(-50%, -50%) scale(1.08); } 48% { left: 58%; top: 54%; opacity: .42; transform: translate(-50%, -50%) scale(1.12); } 66% { opacity: .56; transform: translate(-50%, -50%) scale(1.06); } 86% { left: 42%; top: 60%; opacity: .24; transform: translate(-50%, -50%) scale(1.16); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.90); } } @keyframes scopeDistortionCycle { 0%, 10% { opacity: 0; transform: translateY(-50%) scaleX(.88); } 18% { opacity: .42; transform: translateY(-50%) scaleX(.96); } 34% { opacity: .86; transform: translateY(-50%) scaleX(1.02); } 54% { opacity: .78; transform: translateY(-50%) scaleX(1.10); } 72% { opacity: .38; transform: translateY(-50%) scaleX(1.16); } 100% { opacity: 0; transform: translateY(-50%) scaleX(1.22); } } @keyframes scopeNoiseSmooth { 0%, 18% { transform: skewY(-14deg) translateY(-9px) scaleY(1.45); filter: blur(.65px); } 36% { transform: skewY(-8deg) translateY(-4px) scaleY(1.25); filter: blur(.35px); } 58% { transform: skewY(-3deg) translateY(-1px) scaleY(1.05); filter: blur(.12px); } 78%, 100% { transform: skewY(0deg) translateY(0) scaleY(.92); filter: blur(.45px); } } @keyframes scopeNoiseSmoothAlt { 0%, 18% { transform: skewY(13deg) translateY(9px) scaleY(1.35); filter: blur(.65px); } 36% { transform: skewY(7deg) translateY(4px) scaleY(1.12); filter: blur(.35px); } 58% { transform: skewY(2deg) translateY(1px) scaleY(1); filter: blur(.12px); } 78%, 100% { transform: skewY(0deg) translateY(0) scaleY(.88); filter: blur(.45px); } } @media(max-width:768px) { .scope-grid { opacity: .10; background-size: 4rem 3.4rem; } .scope-waveform { left: 8%; right: 4%; height: 7rem; } .scope-focus { width: 20rem; height: 11rem; } } @media (prefers-reduced-motion: reduce) { .scope-sine, .scope-waveform, .scope-waveform::before, .scope-waveform::after, .scope-focus { animation: none !important; } } /* METHOD V16: true sine-wave distortion, no pickup-stick line fragments */ .oscilloscope-signal-field, .clarity-visible-field, .signal-clarification-field { opacity: .10 !important; } .scope-waveform, .scope-sine, .clarity-wave, .distortion-wave { display: none !important; } .true-sine-signal-field { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; mix-blend-mode: screen; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 84%, transparent 100%); } .true-sine-svg { position: absolute; left: 18%; right: -4%; top: 25%; width: 86%; height: 48%; opacity: .92; overflow: visible; transform: rotate(-1.5deg); filter: drop-shadow(0 0 16px rgba(200,64,26,.16)) drop-shadow(0 0 28px rgba(88,205,210,.08)); } .true-sine-guide { fill: none; stroke: rgba(88,205,210,.12); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .34; stroke-dasharray: 10 18; animation: trueSineGuideDrift 36s linear infinite; } .true-sine-guide.guide-two { stroke: rgba(200,64,26,.11); opacity: .24; animation-duration: 44s; animation-direction: reverse; } .true-sine-wave { fill: none; stroke: url(#trueSineStroke); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; filter: url(#trueSineGlow); stroke-dasharray: 1150; stroke-dashoffset: 1150; animation: trueSineVisibility 17s ease-in-out infinite; } .true-sine-wave.wave-two { stroke-width: 3; opacity: 0; animation-delay: 5.6s; } .true-sine-wave.wave-three { stroke-width: 2.5; opacity: 0; animation-delay: 10.9s; } .true-sine-focus { position: absolute; left: 40%; top: 49%; width: 31rem; height: 17rem; border-radius: 50%; background: radial-gradient(ellipse 42% 35% at 50% 50%, rgba(240,235,227,.075) 0%, transparent 42%), radial-gradient(ellipse 76% 58% at 50% 50%, rgba(200,64,26,.18) 0%, rgba(200,64,26,.062) 44%, transparent 76%), radial-gradient(ellipse 56% 42% at 68% 54%, rgba(88,205,210,.15) 0%, rgba(28,94,108,.052) 46%, transparent 78%); filter: blur(25px); opacity: 0; transform: translate(-50%, -50%) scale(.86); animation: trueSineFocus 17s ease-in-out infinite; will-change: transform, opacity, left, top; } @keyframes trueSineVisibility { 0%, 8% { opacity: 0; stroke-dashoffset: 1150; filter: url(#trueSineGlow); } 18% { opacity: .42; stroke-dashoffset: 720; } 28% { opacity: .90; stroke-dashoffset: 240; } 46% { opacity: .82; stroke-dashoffset: 0; } 66% { opacity: .52; stroke-dashoffset: 0; } 84%, 100% { opacity: 0; stroke-dashoffset: -260; } } @keyframes trueSineFocus { 0%, 6% { left: 38%; top: 48%; opacity: 0; transform: translate(-50%, -50%) scale(.78); } 16% { opacity: .44; transform: translate(-50%, -50%) scale(1.0); } 34% { opacity: .65; transform: translate(-50%, -50%) scale(1.08); } 48% { opacity: .36; transform: translate(-50%, -50%) scale(1.15); } 58% { left: 58%; top: 57%; opacity: .42; transform: translate(-50%, -50%) scale(1.0); } 72% { opacity: .56; transform: translate(-50%, -50%) scale(1.08); } 90% { opacity: .16; transform: translate(-50%, -50%) scale(1.16); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); } } @keyframes trueSineGuideDrift { from { stroke-dashoffset: 0; transform: translateX(-10px); } to { stroke-dashoffset: -180; transform: translateX(10px); } } @media(max-width:768px) { .true-sine-svg { left: 4%; width: 110%; top: 30%; height: 42%; opacity: .64; } .true-sine-wave { stroke-width: 3; } .true-sine-focus { width: 22rem; height: 12rem; } } @media (prefers-reduced-motion: reduce) { .true-sine-wave, .true-sine-focus, .true-sine-guide { animation: none !important; } } /* METHOD V17: continuous full-width sine waves, no abrupt path morphing */ .true-sine-signal-field, .oscilloscope-signal-field, .clarity-visible-field, .signal-clarification-field { opacity: .05 !important; } .true-sine-wave, .scope-waveform, .scope-sine, .clarity-wave, .distortion-wave { display: none !important; } .continuous-sine-field { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; mix-blend-mode: screen; contain: layout paint style; mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 86%, transparent 100%); } .continuous-sine-svg { position: absolute; left: -10vw; top: 23%; width: 122vw; height: 54%; opacity: .96; overflow: visible; transform: rotate(-1.2deg); filter: drop-shadow(0 0 16px rgba(200,64,26,.14)) drop-shadow(0 0 28px rgba(88,205,210,.07)); } .continuous-sine { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .continuous-sine.guide-a, .continuous-sine.guide-b { stroke: rgba(88,205,210,.10); stroke-width: 1.2; stroke-dasharray: 12 22; opacity: .30; animation: continuousGuideDrift 42s linear infinite; } .continuous-sine.guide-b { stroke: rgba(200,64,26,.09); opacity: .22; animation-duration: 56s; animation-direction: reverse; } .continuous-sine.clean { stroke: url(#continuousSineStroke); stroke-width: 3.25; stroke-dasharray: 1700; stroke-dashoffset: 1700; opacity: 0; filter: url(#continuousSineGlow); animation: continuousCleanReveal 19s ease-in-out infinite, continuousDashFlow 19s linear infinite; } .continuous-sine.clean-two { stroke-width: 2.5; opacity: 0; animation-delay: 6.2s, 6.2s; } .continuous-sine.distorted { stroke: rgba(224,85,48,.54); stroke-width: 2.8; stroke-dasharray: 42 18 10 28; opacity: 0; filter: url(#continuousSineGlow) drop-shadow(0 0 14px rgba(224,85,48,.18)) drop-shadow(0 0 22px rgba(88,205,210,.07)); animation: continuousDistortionFade 19s ease-in-out infinite, continuousNoiseDrift 8s linear infinite; } .continuous-sine.distorted-two { stroke: rgba(88,205,210,.38); stroke-width: 2.2; animation-delay: 6.2s, 0s; } .continuous-focus { position: absolute; left: 36%; top: 50%; width: 32rem; height: 17rem; border-radius: 50%; background: radial-gradient(ellipse 42% 35% at 50% 50%, rgba(240,235,227,.070) 0%, transparent 42%), radial-gradient(ellipse 76% 58% at 50% 50%, rgba(200,64,26,.15) 0%, rgba(200,64,26,.055) 44%, transparent 76%), radial-gradient(ellipse 56% 42% at 68% 54%, rgba(88,205,210,.14) 0%, rgba(28,94,108,.050) 46%, transparent 78%); filter: blur(24px); opacity: 0; transform: translate(-50%, -50%) scale(.86); animation: continuousFocusWander 19s ease-in-out infinite; will-change: transform, opacity, left, top; } @keyframes continuousCleanReveal { 0%, 8% { opacity: 0; } 18% { opacity: .20; } 36% { opacity: .52; } 56% { opacity: .88; } 74% { opacity: .46; } 100% { opacity: 0; } } @keyframes continuousDistortionFade { 0%, 10% { opacity: 0; } 18% { opacity: .70; } 32% { opacity: .78; } 50% { opacity: .24; } 64%, 100% { opacity: 0; } } @keyframes continuousDashFlow { 0% { stroke-dashoffset: 1700; } 42% { stroke-dashoffset: 620; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } } @keyframes continuousNoiseDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -196; } } @keyframes continuousGuideDrift { from { stroke-dashoffset: 0; transform: translateX(-16px); } to { stroke-dashoffset: -220; transform: translateX(16px); } } @keyframes continuousFocusWander { 0%, 6% { left: 34%; top: 48%; opacity: 0; transform: translate(-50%, -50%) scale(.82); } 18% { opacity: .44; transform: translate(-50%, -50%) scale(1.0); } 36% { opacity: .62; transform: translate(-50%, -50%) scale(1.08); } 54% { opacity: .44; transform: translate(-50%, -50%) scale(1.12); } 66% { left: 58%; top: 56%; opacity: .36; transform: translate(-50%, -50%) scale(1.0); } 82% { opacity: .50; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.90); } } @media(max-width:768px) { .continuous-sine-svg { left: -28vw; width: 158vw; top: 28%; height: 46%; opacity: .68; } .continuous-sine.clean { stroke-width: 2.6; } .continuous-sine.distorted { stroke-width: 2.2; } .continuous-focus { width: 22rem; height: 12rem; } } @media (prefers-reduced-motion: reduce) { .continuous-sine, .continuous-focus { animation: none !important; } } /* METHOD V18: performance-safe signal distortion field */ /* Turn down older, expensive wave systems completely */ .true-sine-signal-field, .oscilloscope-signal-field, .clarity-visible-field, .signal-clarification-field { display: none !important; } /* Keep the latest continuous sine concept, but remove expensive rendering costs */ .continuous-sine-field { z-index: 5 !important; mix-blend-mode: normal !important; opacity: .72; contain: layout paint style; will-change: auto; transform: translateZ(0); mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 78%, transparent 100%) !important; } .continuous-sine-svg { left: -8vw !important; width: 116vw !important; top: 28% !important; height: 44% !important; opacity: .72 !important; filter: none !important; transform: rotate(-1deg) translateZ(0) !important; will-change: transform, opacity; } .continuous-sine.guide-a, .continuous-sine.guide-b { stroke-width: 1 !important; opacity: .14 !important; filter: none !important; animation-duration: 70s !important; } .continuous-sine.guide-b { opacity: .10 !important; animation-duration: 82s !important; } /* Hide the secondary/extra waveform layers. One clean + one distorted layer is enough. */ .continuous-sine.clean-two, .continuous-sine.distorted-two, .continuous-sine.guide-b { display: none !important; } .continuous-sine.clean { stroke: rgba(200,64,26,.42) !important; stroke-width: 2.2 !important; stroke-dasharray: 1800 !important; stroke-dashoffset: 1800; opacity: 0; filter: none !important; animation: continuousCleanRevealLite 24s ease-in-out infinite, continuousDashFlowLite 24s linear infinite !important; } .continuous-sine.distorted { stroke: rgba(88,205,210,.28) !important; stroke-width: 1.8 !important; stroke-dasharray: 36 24 !important; opacity: 0; filter: none !important; animation: continuousDistortionFadeLite 24s ease-in-out infinite, continuousNoiseDriftLite 18s linear infinite !important; } .continuous-focus { width: 24rem !important; height: 13rem !important; opacity: 0; mix-blend-mode: normal !important; filter: blur(16px) !important; background: radial-gradient(ellipse 70% 54% at 50% 50%, rgba(200,64,26,.070) 0%, rgba(200,64,26,.028) 44%, transparent 76%), radial-gradient(ellipse 52% 38% at 66% 54%, rgba(88,205,210,.052) 0%, rgba(28,94,108,.020) 46%, transparent 78%) !important; animation: continuousFocusWanderLite 24s ease-in-out infinite !important; will-change: transform, opacity; } /* Pause this visual system until the section is near/in view */ .fault-origin-prototype:not(.signal-field-visible) .continuous-sine, .fault-origin-prototype:not(.signal-field-visible) .continuous-focus, .fault-origin-prototype:not(.signal-field-visible) .continuous-sine.guide-a { animation-play-state: paused !important; } @keyframes continuousCleanRevealLite { 0%, 8% { opacity: 0; } 22% { opacity: .18; } 48% { opacity: .44; } 68% { opacity: .50; } 86%, 100% { opacity: 0; } } @keyframes continuousDistortionFadeLite { 0%, 10% { opacity: 0; } 20% { opacity: .38; } 38% { opacity: .32; } 56% { opacity: .12; } 72%, 100% { opacity: 0; } } @keyframes continuousDashFlowLite { 0% { stroke-dashoffset: 1800; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } } @keyframes continuousNoiseDriftLite { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -120; } } @keyframes continuousFocusWanderLite { 0%, 8% { left: 34%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.90); } 24% { opacity: .32; transform: translate(-50%, -50%) scale(1); } 46% { opacity: .40; transform: translate(-50%, -50%) scale(1.06); } 68% { left: 56%; top: 56%; opacity: .24; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } } @media(max-width:768px) { .continuous-sine-field { opacity: .42; } .continuous-sine-svg { left: -26vw !important; width: 152vw !important; top: 30% !important; height: 38% !important; } .continuous-sine.clean { stroke-width: 1.7 !important; } .continuous-sine.distorted { stroke-width: 1.4 !important; } .continuous-focus { display: none !important; } } /* METHOD V19: visible-but-light signal field and legible signature classification board */ /* First Finding: bring back visibility without returning to heavy filters */ .continuous-sine-field { opacity: .94 !important; mix-blend-mode: screen !important; } .continuous-sine-svg { opacity: .95 !important; filter: drop-shadow(0 0 8px rgba(200,64,26,.08)) drop-shadow(0 0 14px rgba(88,205,210,.035)) !important; } .continuous-sine.guide-a { stroke: rgba(88,205,210,.18) !important; opacity: .24 !important; stroke-width: 1.15 !important; } .continuous-sine.clean { stroke: rgba(224,85,48,.60) !important; stroke-width: 2.8 !important; opacity: 0; filter: none !important; animation: continuousCleanRevealVisible 24s ease-in-out infinite, continuousDashFlowLite 24s linear infinite !important; } .continuous-sine.distorted { stroke: rgba(88,205,210,.44) !important; stroke-width: 2.15 !important; stroke-dasharray: 42 22 !important; opacity: 0; filter: none !important; animation: continuousDistortionFadeVisible 24s ease-in-out infinite, continuousNoiseDriftLite 18s linear infinite !important; } .continuous-focus { display: block !important; opacity: 0; filter: blur(14px) !important; background: radial-gradient(ellipse 70% 54% at 50% 50%, rgba(200,64,26,.120) 0%, rgba(200,64,26,.044) 44%, transparent 76%), radial-gradient(ellipse 52% 38% at 66% 54%, rgba(88,205,210,.084) 0%, rgba(28,94,108,.030) 46%, transparent 78%) !important; animation: continuousFocusWanderLite 24s ease-in-out infinite !important; } @keyframes continuousCleanRevealVisible { 0%, 8% { opacity: 0; } 22% { opacity: .28; } 48% { opacity: .68; } 68% { opacity: .78; } 86%, 100% { opacity: 0; } } @keyframes continuousDistortionFadeVisible { 0%, 10% { opacity: 0; } 20% { opacity: .58; } 38% { opacity: .52; } 56% { opacity: .20; } 72%, 100% { opacity: 0; } } /* Failure Signatures: make the top field understandable */ .signature-visible-field, .signature-pattern-field, .signature-scanner-rail, .signature-sonar-field { display: none !important; } .failure-signatures-archive { background: radial-gradient(ellipse 78% 42% at 74% 22%, rgba(200,64,26,.050) 0%, rgba(65,21,6,.022) 46%, transparent 76%), radial-gradient(ellipse 48% 30% at 70% 45%, rgba(88,205,210,.026) 0%, transparent 72%), #060402 !important; } .signature-classification-board { position: absolute; right: 4rem; top: 8rem; width: min(62vw, 60rem); height: 19rem; z-index: 2; pointer-events: none; opacity: .86; border: 1px solid rgba(200,64,26,.055); background: linear-gradient(180deg, rgba(7,5,3,.18), rgba(7,5,3,.02)), radial-gradient(ellipse 76% 58% at 62% 46%, rgba(200,64,26,.060) 0%, transparent 74%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.008), 0 0 70px rgba(0,0,0,.18); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 94%, transparent 100%); } .classification-title { position: absolute; left: 1.5rem; top: 1.15rem; color: rgba(224,85,48,.70); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; } .classification-strip { position: absolute; left: 1.5rem; right: 1.5rem; height: 1.25rem; display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: center; opacity: .58; transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .55s ease; } .classification-strip span { color: rgba(154,142,130,.50); font-size: .56rem; letter-spacing: .16em; } .classification-strip i { display: block; height: 1px; background: linear-gradient(90deg, rgba(200,64,26,.62), rgba(88,205,210,.24), rgba(240,235,227,.10), transparent); box-shadow: 0 0 10px rgba(200,64,26,.10); transform-origin: left center; animation: classificationWave 8.8s ease-in-out infinite; } .classification-strip:nth-child(odd) i { background: linear-gradient(90deg, rgba(88,205,210,.34), rgba(200,64,26,.50), rgba(240,235,227,.10), transparent); } .cs-1 { top: 3.7rem; } .cs-2 { top: 5.35rem; } .cs-3 { top: 7rem; } .cs-4 { top: 8.65rem; } .cs-5 { top: 10.3rem; } .cs-6 { top: 11.95rem; } .cs-7 { top: 13.6rem; } .cs-8 { top: 15.25rem; } .cs-1 i { animation-delay: 0s; width: 72%; } .cs-2 i { animation-delay: .35s; width: 56%; } .cs-3 i { animation-delay: .70s; width: 66%; } .cs-4 i { animation-delay: 1.05s; width: 82%; } .cs-5 i { animation-delay: 1.40s; width: 48%; } .cs-6 i { animation-delay: 1.75s; width: 74%; } .cs-7 i { animation-delay: 2.10s; width: 60%; } .cs-8 i { animation-delay: 2.45s; width: 68%; } .failure-signatures-archive[data-active-signature="1"] .cs-1, .failure-signatures-archive[data-active-signature="2"] .cs-2, .failure-signatures-archive[data-active-signature="3"] .cs-3, .failure-signatures-archive[data-active-signature="4"] .cs-4, .failure-signatures-archive[data-active-signature="5"] .cs-5, .failure-signatures-archive[data-active-signature="6"] .cs-6, .failure-signatures-archive[data-active-signature="7"] .cs-7, .failure-signatures-archive[data-active-signature="8"] .cs-8 { opacity: 1; transform: translateX(-5px); filter: drop-shadow(0 0 12px rgba(224,85,48,.18)) drop-shadow(0 0 20px rgba(88,205,210,.08)); } .failure-signatures-archive[data-active-signature="1"] .cs-1 i, .failure-signatures-archive[data-active-signature="2"] .cs-2 i, .failure-signatures-archive[data-active-signature="3"] .cs-3 i, .failure-signatures-archive[data-active-signature="4"] .cs-4 i, .failure-signatures-archive[data-active-signature="5"] .cs-5 i, .failure-signatures-archive[data-active-signature="6"] .cs-6 i, .failure-signatures-archive[data-active-signature="7"] .cs-7 i, .failure-signatures-archive[data-active-signature="8"] .cs-8 i { animation: classificationActiveWave 1.2s ease-in-out infinite; background: linear-gradient(90deg, rgba(224,85,48,.90), rgba(88,205,210,.46), rgba(240,235,227,.20), transparent); } .signature-wall { background: rgba(255,255,255,.035) !important; } .signature-tile:hover, .signature-tile.signature-active, .signature-tile.is-scroll-active { background: radial-gradient(ellipse 88% 74% at 18% 18%, rgba(200,64,26,.085) 0%, transparent 70%), rgba(20,14,9,.97) !important; } @keyframes classificationWave { 0%, 100% { transform: scaleX(.58); opacity: .36; } 46% { transform: scaleX(1); opacity: .86; } 68% { transform: scaleX(.78); opacity: .58; } } @keyframes classificationActiveWave { 0%, 100% { transform: scaleX(.72); opacity: .58; } 42% { transform: scaleX(1.08); opacity: 1; } 70% { transform: scaleX(.88); opacity: .76; } } @media(max-width:900px) { .signature-classification-board { right: -14rem; width: 110vw; opacity: .52; } } @media(max-width:768px) { .continuous-sine-field { opacity: .55 !important; } .signature-classification-board { top: 11rem; right: -26rem; width: 160vw; opacity: .36; } } @media (prefers-reduced-motion: reduce) { .classification-strip i { animation: none !important; } } /* METHOD V20: timed late-signal emphasis and stronger responsive signature board */ /* First Finding: sync "late signal" glow with the signal clarification cycle */ .fault-origin-prototype h2 em, .fault-origin h2 em { animation: lateSignalSynchronizedGlow 24s ease-in-out infinite !important; will-change: color, text-shadow; } @keyframes lateSignalSynchronizedGlow { 0%, 12%, 88%, 100% { color: var(--red); text-shadow: 0 0 0 rgba(200,64,26,0); } 22% { color: rgba(224,85,48,.92); text-shadow: 0 0 8px rgba(200,64,26,.12), 0 0 18px rgba(88,205,210,.035); } 42% { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.26), 0 0 34px rgba(88,205,210,.075); } 58% { color: rgba(224,85,48,.94); text-shadow: 0 0 10px rgba(200,64,26,.16), 0 0 22px rgba(88,205,210,.045); } 74% { color: var(--red); text-shadow: 0 0 5px rgba(200,64,26,.08); } } /* Failure Signatures: bring the classification board forward on desktop */ .signature-classification-board { z-index: 3 !important; opacity: 1 !important; top: 7.1rem !important; right: 3.2rem !important; width: min(64vw, 63rem) !important; height: 21rem !important; border-color: rgba(200,64,26,.105) !important; background: linear-gradient(180deg, rgba(12,8,5,.34), rgba(7,5,3,.08)), radial-gradient(ellipse 76% 58% at 62% 46%, rgba(200,64,26,.095) 0%, rgba(200,64,26,.030) 46%, transparent 76%), radial-gradient(ellipse 48% 38% at 78% 58%, rgba(88,205,210,.050) 0%, transparent 72%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 0 54px rgba(200,64,26,.040), 0 0 90px rgba(0,0,0,.24) !important; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 96%, transparent 100%) !important; } .classification-title { color: rgba(224,85,48,.92) !important; opacity: .95; text-shadow: 0 0 12px rgba(200,64,26,.18); } .classification-strip { opacity: .82 !important; grid-template-columns: 2.2rem 1fr !important; } .classification-strip span { color: rgba(154,142,130,.68) !important; } .classification-strip i { height: 2px !important; box-shadow: 0 0 12px rgba(200,64,26,.16), 0 0 20px rgba(88,205,210,.05) !important; animation: classificationWaveStronger 6.8s ease-in-out infinite !important; } .classification-strip:nth-child(odd) i { background: linear-gradient(90deg, rgba(88,205,210,.42), rgba(200,64,26,.68), rgba(240,235,227,.16), transparent) !important; } .classification-strip:nth-child(even) i { background: linear-gradient(90deg, rgba(200,64,26,.72), rgba(88,205,210,.28), rgba(240,235,227,.12), transparent) !important; } .cs-1 { top: 3.9rem !important; } .cs-2 { top: 5.65rem !important; } .cs-3 { top: 7.4rem !important; } .cs-4 { top: 9.15rem !important; } .cs-5 { top: 10.9rem !important; } .cs-6 { top: 12.65rem !important; } .cs-7 { top: 14.4rem !important; } .cs-8 { top: 16.15rem !important; } .failure-signatures-archive[data-active-signature="1"] .cs-1, .failure-signatures-archive[data-active-signature="2"] .cs-2, .failure-signatures-archive[data-active-signature="3"] .cs-3, .failure-signatures-archive[data-active-signature="4"] .cs-4, .failure-signatures-archive[data-active-signature="5"] .cs-5, .failure-signatures-archive[data-active-signature="6"] .cs-6, .failure-signatures-archive[data-active-signature="7"] .cs-7, .failure-signatures-archive[data-active-signature="8"] .cs-8 { opacity: 1 !important; transform: translateX(-7px) scale(1.012) !important; filter: drop-shadow(0 0 14px rgba(224,85,48,.25)) drop-shadow(0 0 24px rgba(88,205,210,.10)) !important; } .failure-signatures-archive[data-active-signature="1"] .cs-1 span, .failure-signatures-archive[data-active-signature="2"] .cs-2 span, .failure-signatures-archive[data-active-signature="3"] .cs-3 span, .failure-signatures-archive[data-active-signature="4"] .cs-4 span, .failure-signatures-archive[data-active-signature="5"] .cs-5 span, .failure-signatures-archive[data-active-signature="6"] .cs-6 span, .failure-signatures-archive[data-active-signature="7"] .cs-7 span, .failure-signatures-archive[data-active-signature="8"] .cs-8 span { color: rgba(240,235,227,.82) !important; } .failure-signatures-archive[data-active-signature="1"] .cs-1 i, .failure-signatures-archive[data-active-signature="2"] .cs-2 i, .failure-signatures-archive[data-active-signature="3"] .cs-3 i, .failure-signatures-archive[data-active-signature="4"] .cs-4 i, .failure-signatures-archive[data-active-signature="5"] .cs-5 i, .failure-signatures-archive[data-active-signature="6"] .cs-6 i, .failure-signatures-archive[data-active-signature="7"] .cs-7 i, .failure-signatures-archive[data-active-signature="8"] .cs-8 i { animation: classificationActiveWaveStronger .95s ease-in-out infinite !important; background: linear-gradient(90deg, rgba(224,85,48,1), rgba(88,205,210,.58), rgba(240,235,227,.24), transparent) !important; } @keyframes classificationWaveStronger { 0%, 100% { transform: scaleX(.50); opacity: .42; } 34% { transform: scaleX(1.04); opacity: .96; } 58% { transform: scaleX(.76); opacity: .62; } } @keyframes classificationActiveWaveStronger { 0%, 100% { transform: scaleX(.64); opacity: .68; } 42% { transform: scaleX(1.14); opacity: 1; } 70% { transform: scaleX(.92); opacity: .82; } } /* Mobile: keep the board legible as atmosphere, but don't let it fight the headline/cards */ @media(max-width:900px) { .signature-classification-board { right: -10rem !important; top: 10.25rem !important; width: 108vw !important; height: 17rem !important; opacity: .48 !important; border-color: rgba(200,64,26,.05) !important; transform: scale(.92); transform-origin: top right; mask-image: linear-gradient(to right, transparent 0%, black 16%, black 82%, transparent 100%) !important; } .classification-title { opacity: .55; } .classification-strip { opacity: .48 !important; } .classification-strip i { height: 1px !important; animation-duration: 8.8s !important; } } @media(max-width:768px) { .signature-classification-board { right: -21rem !important; top: 11rem !important; width: 152vw !important; height: 15.5rem !important; opacity: .38 !important; transform: scale(.82); } .classification-title { display: none; } .failure-signatures-archive > h2 { position: relative; z-index: 6 !important; } .signature-wall { position: relative; z-index: 7 !important; } .signature-tile { background: rgba(7,5,3,.82) !important; } } @media (prefers-reduced-motion: reduce) { .fault-origin-prototype h2 em, .fault-origin h2 em, .classification-strip i { animation: none !important; } } /* METHOD V21: visible late-signal pulse and scroll performance tuning */ /* Make the First Finding phrase pulse visible even if older h2 em rules are later/stronger */ .fault-origin-prototype .fault-copy h2 em, .fault-origin-prototype h2 em, .fault-origin h2 em { color: var(--red) !important; animation: lateSignalAudiblePulse 10.8s ease-in-out infinite !important; text-shadow: 0 0 0 rgba(200,64,26,0); will-change: color, text-shadow; } @keyframes lateSignalAudiblePulse { 0%, 18%, 100% { color: var(--red) !important; text-shadow: 0 0 0 rgba(200,64,26,0); } 34% { color: rgba(224,85,48,.96) !important; text-shadow: 0 0 8px rgba(200,64,26,.18), 0 0 18px rgba(88,205,210,.04); } 48% { color: var(--red-hi) !important; text-shadow: 0 0 18px rgba(200,64,26,.38), 0 0 38px rgba(88,205,210,.10); } 66% { color: rgba(224,85,48,.92) !important; text-shadow: 0 0 9px rgba(200,64,26,.16); } } /* Performance gates: animations pause outside nearby viewport */ .fault-origin-prototype:not(.method-section-live) .continuous-sine, .fault-origin-prototype:not(.method-section-live) .continuous-focus, .fault-origin-prototype:not(.method-section-live) .fault-chamber-cloud, .fault-origin-prototype:not(.method-section-live) .fault-chamber-line, .fault-origin-prototype:not(.method-section-live) h2 em, .trace-system:not(.method-section-live) .topology-active-path, .trace-system:not(.method-section-live) .topology-feedback-active, .trace-system:not(.method-section-live) .topology-branch-active, .trace-system:not(.method-section-live) .topology-complete-circuit, .trace-system:not(.method-section-live) .topology-traveler, .trace-system:not(.method-section-live) .topology-depth-cloud, .trace-system:not(.method-section-live) .topology-large-orbit, .failure-signatures-archive:not(.method-section-live) .classification-strip i, .failure-signatures-archive:not(.method-section-live) .scanner-sweep, .failure-signatures-archive:not(.method-section-live) .signature-wave i { animation-play-state: paused !important; } /* Keep visuals, reduce paint cost */ .continuous-sine-svg, .trace-topology-svg, .signature-classification-board { will-change: opacity, transform; transform: translateZ(0); backface-visibility: hidden; } .continuous-sine-svg { filter: none !important; } .continuous-focus { filter: blur(10px) !important; will-change: transform, opacity; } .trace-topology-svg { filter: none !important; opacity: .88 !important; } .topology-active-path, .topology-feedback-active, .topology-branch-active, .topology-complete-circuit, .topology-traveler { filter: none !important; } .topology-depth-cloud, .trace-topology-field::before { filter: blur(24px) !important; opacity: .52 !important; } .signature-classification-board { box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 0 48px rgba(0,0,0,.22) !important; } .classification-strip i { box-shadow: 0 0 8px rgba(200,64,26,.12) !important; } .failure-signatures-archive[data-active-signature="1"] .cs-1, .failure-signatures-archive[data-active-signature="2"] .cs-2, .failure-signatures-archive[data-active-signature="3"] .cs-3, .failure-signatures-archive[data-active-signature="4"] .cs-4, .failure-signatures-archive[data-active-signature="5"] .cs-5, .failure-signatures-archive[data-active-signature="6"] .cs-6, .failure-signatures-archive[data-active-signature="7"] .cs-7, .failure-signatures-archive[data-active-signature="8"] .cs-8 { filter: none !important; } .signature-tile:hover .signature-wave i, .signature-tile.signature-active .signature-wave i, .signature-tile.is-scroll-active .signature-wave i { box-shadow: 0 0 8px rgba(224,85,48,.20), 0 0 14px rgba(88,205,210,.06) !important; } /* Lighter mobile rendering */ @media(max-width:768px) { .fault-origin-prototype .fault-copy h2 em, .fault-origin-prototype h2 em, .fault-origin h2 em { animation-duration: 9s !important; } .continuous-focus, .topology-depth-cloud, .trace-topology-field::before { display: none !important; } .continuous-sine-svg { opacity: .58 !important; } .trace-topology-svg { opacity: .38 !important; } .signature-classification-board { opacity: .42 !important; box-shadow: none !important; } .classification-strip i { animation-duration: 9s !important; } } @media (prefers-reduced-motion: reduce) { .fault-origin-prototype .fault-copy h2 em, .fault-origin-prototype h2 em, .fault-origin h2 em { animation: none !important; } } /* METHOD V22: Failure Signatures active card expansion and board focus response */ .signature-wall { overflow: visible !important; } .signature-tile { min-height: 205px !important; cursor: pointer; transform-origin: center; transition: background .55s ease, box-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .55s ease, opacity .55s ease !important; } .signature-tile h3 { transition: color .45s ease, text-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1) !important; } .signature-tile p { transition: color .45s ease, text-shadow .55s ease, opacity .45s ease !important; } .signature-tile::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 92% 78% at 22% 20%, rgba(200,64,26,.16) 0%, rgba(200,64,26,.050) 42%, transparent 74%), radial-gradient(ellipse 48% 38% at 74% 72%, rgba(88,205,210,.060) 0%, transparent 72%); opacity: 0; transform: scale(.96); transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); } .signature-tile > * { position: relative; z-index: 2; } .signature-tile:hover, .signature-tile.signature-active, .signature-tile.signature-expanded, .signature-tile:focus-visible { background: radial-gradient(ellipse 90% 78% at 18% 18%, rgba(200,64,26,.105) 0%, rgba(200,64,26,.035) 44%, transparent 74%), rgba(23,16,10,.98) !important; transform: translateY(-5px) scale(1.018); box-shadow: inset 0 0 0 1px rgba(200,64,26,.12), 0 26px 90px rgba(0,0,0,.34), 0 0 38px rgba(200,64,26,.055) !important; z-index: 8; } .signature-tile:hover::before, .signature-tile.signature-active::before, .signature-tile.signature-expanded::before, .signature-tile:focus-visible::before { opacity: 1; transform: scale(1.035); } .signature-tile:hover h3, .signature-tile.signature-active h3, .signature-tile.signature-expanded h3, .signature-tile:focus-visible h3 { color: var(--red-hi) !important; text-shadow: 0 0 16px rgba(200,64,26,.24), 0 0 30px rgba(88,205,210,.06); transform: translateY(-1px); } .signature-tile:hover p, .signature-tile.signature-active p, .signature-tile.signature-expanded p, .signature-tile:focus-visible p { color: rgba(240,235,227,.88) !important; text-shadow: 0 0 12px rgba(240,235,227,.025); } .signature-tile:hover .signature-code, .signature-tile.signature-active .signature-code, .signature-tile.signature-expanded .signature-code, .signature-tile:focus-visible .signature-code { color: var(--red-hi) !important; opacity: 1 !important; text-shadow: 0 0 12px rgba(200,64,26,.26); } .signature-tile .signature-wave { transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); } .signature-tile:hover .signature-wave, .signature-tile.signature-active .signature-wave, .signature-tile.signature-expanded .signature-wave, .signature-tile:focus-visible .signature-wave { opacity: 1 !important; transform: translateX(-1px) scale(1.08); } .signature-tile:hover .signature-wave i, .signature-tile.signature-active .signature-wave i, .signature-tile.signature-expanded .signature-wave i, .signature-tile:focus-visible .signature-wave i { animation: signatureWaveListeningStrong 1.05s ease-in-out infinite !important; background: rgba(224,85,48,.82) !important; box-shadow: 0 0 9px rgba(224,85,48,.28), 0 0 16px rgba(88,205,210,.08) !important; } .signature-tile:hover .signature-wave i:nth-child(2), .signature-tile.signature-active .signature-wave i:nth-child(2), .signature-tile.signature-expanded .signature-wave i:nth-child(2), .signature-tile:focus-visible .signature-wave i:nth-child(2) { animation-delay: .10s !important; background: rgba(88,205,210,.70) !important; } .signature-tile:hover .signature-wave i:nth-child(3), .signature-tile.signature-active .signature-wave i:nth-child(3), .signature-tile.signature-expanded .signature-wave i:nth-child(3), .signature-tile:focus-visible .signature-wave i:nth-child(3) { animation-delay: .20s !important; } .failure-signatures-archive[data-active-signature] .classification-strip { opacity: .30 !important; transform: translateY(5px) scaleY(.88); filter: saturate(.75); transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease; } .failure-signatures-archive[data-active-signature="1"] .cs-1, .failure-signatures-archive[data-active-signature="2"] .cs-2, .failure-signatures-archive[data-active-signature="3"] .cs-3, .failure-signatures-archive[data-active-signature="4"] .cs-4, .failure-signatures-archive[data-active-signature="5"] .cs-5, .failure-signatures-archive[data-active-signature="6"] .cs-6, .failure-signatures-archive[data-active-signature="7"] .cs-7, .failure-signatures-archive[data-active-signature="8"] .cs-8 { opacity: 1 !important; transform: translateY(-4px) translateX(-9px) scale(1.035) !important; filter: saturate(1.2) !important; z-index: 4; } .failure-signatures-archive[data-active-signature] .classification-strip:not(.cs-1):not(.cs-2):not(.cs-3):not(.cs-4):not(.cs-5):not(.cs-6):not(.cs-7):not(.cs-8) { opacity: .30 !important; } .classification-strip i { transform-origin: left center; } .failure-signatures-archive[data-active-signature="1"] .cs-1 i, .failure-signatures-archive[data-active-signature="2"] .cs-2 i, .failure-signatures-archive[data-active-signature="3"] .cs-3 i, .failure-signatures-archive[data-active-signature="4"] .cs-4 i, .failure-signatures-archive[data-active-signature="5"] .cs-5 i, .failure-signatures-archive[data-active-signature="6"] .cs-6 i, .failure-signatures-archive[data-active-signature="7"] .cs-7 i, .failure-signatures-archive[data-active-signature="8"] .cs-8 i { height: 3px !important; animation: classificationPopBounce .72s ease-in-out infinite !important; background: linear-gradient(90deg, rgba(224,85,48,1), rgba(88,205,210,.74), rgba(240,235,227,.30), transparent) !important; box-shadow: 0 0 14px rgba(224,85,48,.28), 0 0 24px rgba(88,205,210,.12) !important; } .failure-signatures-archive[data-active-signature="1"] .cs-1 span, .failure-signatures-archive[data-active-signature="2"] .cs-2 span, .failure-signatures-archive[data-active-signature="3"] .cs-3 span, .failure-signatures-archive[data-active-signature="4"] .cs-4 span, .failure-signatures-archive[data-active-signature="5"] .cs-5 span, .failure-signatures-archive[data-active-signature="6"] .cs-6 span, .failure-signatures-archive[data-active-signature="7"] .cs-7 span, .failure-signatures-archive[data-active-signature="8"] .cs-8 span { color: rgba(240,235,227,.92) !important; text-shadow: 0 0 10px rgba(200,64,26,.18); } @keyframes classificationPopBounce { 0%, 100% { transform: scaleX(.76) translateY(0); opacity: .70; } 36% { transform: scaleX(1.20) translateY(-1px); opacity: 1; } 62% { transform: scaleX(.94) translateY(0); opacity: .84; } } @keyframes signatureWaveListeningStrong { 0%, 100% { transform: scaleY(.62); opacity: .62; } 38% { transform: scaleY(1.75); opacity: 1; } 66% { transform: scaleY(.92); opacity: .82; } } @media(max-width:900px) { .signature-tile:hover, .signature-tile.signature-active, .signature-tile.signature-expanded, .signature-tile:focus-visible { transform: translateY(-2px) scale(1.006); } } @media(max-width:768px) { .signature-tile { min-height: 185px !important; } .signature-tile.signature-expanded, .signature-tile.signature-active { min-height: 210px !important; } .failure-signatures-archive[data-active-signature] .classification-strip { opacity: .22 !important; transform: translateY(3px) scaleY(.92); } .failure-signatures-archive[data-active-signature="1"] .cs-1, .failure-signatures-archive[data-active-signature="2"] .cs-2, .failure-signatures-archive[data-active-signature="3"] .cs-3, .failure-signatures-archive[data-active-signature="4"] .cs-4, .failure-signatures-archive[data-active-signature="5"] .cs-5, .failure-signatures-archive[data-active-signature="6"] .cs-6, .failure-signatures-archive[data-active-signature="7"] .cs-7, .failure-signatures-archive[data-active-signature="8"] .cs-8 { opacity: .72 !important; transform: translateY(-2px) translateX(-4px) scale(1.012) !important; } } @media (prefers-reduced-motion: reduce) { .signature-wave i, .classification-strip i { animation: none !important; } } /* METHOD V23: Artifact Foundry output schematic */ .artifact-foundry { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 78% 42% at 76% 24%, rgba(200,64,26,.045) 0%, rgba(65,21,6,.020) 46%, transparent 76%), radial-gradient(ellipse 48% 30% at 70% 48%, rgba(88,205,210,.024) 0%, transparent 72%), #060402 !important; } .artifact-foundry-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: layout paint style; opacity: .96; mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 78%, transparent 100%); } .artifact-foundry > .section-label, .artifact-foundry > h2, .artifact-foundry > .artifact-rail { position: relative; z-index: 5; } .artifact-schematic-svg { position: absolute; top: 2.4rem; right: -3rem; width: min(74vw, 1120px); height: 31rem; opacity: .82; overflow: visible; transform: rotate(-1.2deg) translateZ(0); filter: drop-shadow(0 0 16px rgba(200,64,26,.045)); } .artifact-drafting-wash { position: absolute; right: -5%; top: 3rem; width: 72%; height: 31rem; border-radius: 50%; background: radial-gradient(ellipse 72% 55% at 54% 45%, rgba(200,64,26,.080) 0%, rgba(91,34,10,.038) 44%, transparent 76%), radial-gradient(ellipse 48% 36% at 72% 58%, rgba(88,205,210,.050) 0%, transparent 74%); filter: blur(28px); opacity: .62; mix-blend-mode: screen; animation: artifactWashBreathe 34s ease-in-out infinite alternate; } .artifact-measure-grid { position: absolute; right: -4rem; top: 4.2rem; width: min(76vw, 1160px); height: 29rem; opacity: .28; background: linear-gradient(rgba(200,64,26,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(88,205,210,.024) 1px, transparent 1px); background-size: 7rem 5.4rem; transform: rotate(-1.2deg); mask-image: radial-gradient(ellipse at center, black 0%, black 54%, transparent 78%); } .schematic-plate { fill: rgba(12,9,6,.20); stroke: rgba(200,64,26,.18); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .48; transition: opacity .55s ease, fill .55s ease, stroke .55s ease, filter .55s ease; } .schematic-line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .schematic-line.ghost { stroke: rgba(154,142,130,.095); stroke-width: 1; stroke-dasharray: 10 18; opacity: .52; animation: artifactDashDrift 46s linear infinite; } .schematic-line.second { stroke: rgba(88,205,210,.085); animation-duration: 58s; animation-direction: reverse; } .schematic-line.third { stroke: rgba(200,64,26,.105); animation-duration: 64s; } .schematic-line.active { stroke: url(#artifactTraceStroke); stroke-width: 1.8; stroke-dasharray: 145 980; stroke-dashoffset: 980; opacity: .80; animation: artifactTraceDraw 13.5s linear infinite; } .schematic-ticks path { fill: none; stroke: rgba(200,64,26,.18); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .48; } .artifact-rail { overflow: visible; } .artifact-item { position: relative; min-height: 7rem; transition: background .55s ease, box-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .55s ease !important; cursor: pointer; isolation: isolate; } .artifact-item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 70% at 18% 18%, rgba(200,64,26,.090) 0%, rgba(200,64,26,.030) 42%, transparent 72%), linear-gradient(90deg, rgba(200,64,26,.030), transparent 58%); opacity: 0; transform: scaleX(.96); transform-origin: left center; transition: opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1); } .artifact-item::after { content: ''; position: absolute; left: 0; top: 50%; width: min(54vw, 52rem); height: 1px; background: linear-gradient(90deg, rgba(200,64,26,.42), rgba(88,205,210,.16), transparent); opacity: 0; transform: translateY(-50%) scaleX(.22); transform-origin: left center; transition: opacity .45s ease, transform .75s cubic-bezier(.22,1,.36,1); pointer-events: none; } .artifact-code, .artifact-item h3, .artifact-item p, .artifact-arrow { transition: color .45s ease, border-color .45s ease, background .45s ease, text-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease !important; } .artifact-item:hover, .artifact-item.artifact-active, .artifact-item:focus-visible { background: rgba(20,14,9,.78); transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(200,64,26,.08), 0 18px 70px rgba(0,0,0,.22); } .artifact-item:hover::before, .artifact-item.artifact-active::before, .artifact-item:focus-visible::before { opacity: 1; transform: scaleX(1); } .artifact-item:hover::after, .artifact-item.artifact-active::after, .artifact-item:focus-visible::after { opacity: .58; transform: translateY(-50%) scaleX(1); } .artifact-item:hover .artifact-code, .artifact-item.artifact-active .artifact-code, .artifact-item:focus-visible .artifact-code { color: var(--red-hi); border-color: rgba(200,64,26,.58); background: rgba(200,64,26,.055); text-shadow: 0 0 12px rgba(200,64,26,.22); } .artifact-item:hover h3, .artifact-item.artifact-active h3, .artifact-item:focus-visible h3 { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.22), 0 0 28px rgba(88,205,210,.055); transform: translateX(2px); } .artifact-item:hover p, .artifact-item.artifact-active p, .artifact-item:focus-visible p { color: rgba(240,235,227,.86); } .artifact-item:hover .artifact-arrow, .artifact-item.artifact-active .artifact-arrow, .artifact-item:focus-visible .artifact-arrow { color: var(--red-hi); opacity: 1; transform: translateX(8px); text-shadow: 0 0 14px rgba(200,64,26,.22); } .artifact-foundry[data-active-artifact="1"] .plate-1, .artifact-foundry[data-active-artifact="2"] .plate-2, .artifact-foundry[data-active-artifact="3"] .plate-3, .artifact-foundry[data-active-artifact="4"] .plate-4, .artifact-foundry[data-active-artifact="5"] .plate-5, .artifact-foundry[data-active-artifact="6"] .plate-6, .artifact-foundry[data-active-artifact="7"] .plate-7 { opacity: 1; fill: rgba(200,64,26,.070); stroke: rgba(224,85,48,.58); filter: drop-shadow(0 0 10px rgba(224,85,48,.20)) drop-shadow(0 0 22px rgba(88,205,210,.08)); } .artifact-foundry[data-active-artifact] .schematic-plate:not(.plate-1):not(.plate-2):not(.plate-3):not(.plate-4):not(.plate-5):not(.plate-6):not(.plate-7) { opacity: .34; } @keyframes artifactWashBreathe { 0% { opacity: .42; transform: translate3d(-2%, 2%, 0) scale(.96); } 48% { opacity: .68; transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { opacity: .52; transform: translate3d(-1%, 1%, 0) scale(1.02); } } @keyframes artifactDashDrift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -220; } } @keyframes artifactTraceDraw { 0% { stroke-dashoffset: 980; opacity: 0; } 10% { opacity: .80; } 72% { stroke-dashoffset: 0; opacity: .80; } 90%, 100% { stroke-dashoffset: -145; opacity: 0; } } @media(max-width:900px) { .artifact-schematic-svg { top: 6rem; right: -20rem; width: 128vw; height: 24rem; opacity: .48; } .artifact-drafting-wash { right: -32%; width: 112%; opacity: .42; } .artifact-measure-grid { right: -18rem; width: 130vw; opacity: .16; } .artifact-item:hover, .artifact-item.artifact-active, .artifact-item:focus-visible { transform: translateX(0); } } @media(max-width:768px) { .artifact-schematic-svg { top: 8rem; right: -32rem; width: 170vw; opacity: .32; } .artifact-measure-grid, .artifact-drafting-wash { display: none; } .artifact-item { min-height: 7.6rem; } .artifact-item::after { width: 80vw; } } @media (prefers-reduced-motion: reduce) { .artifact-drafting-wash, .schematic-line, .schematic-line.active { animation: none !important; } } /* METHOD V24: Artifact Foundry v2, labeled plates and compact selector rows */ .artifact-foundry { --active-artifact: 1; } .artifact-plate-group { opacity: .58; transition: opacity .5s ease, filter .5s ease, transform .55s cubic-bezier(.22,1,.36,1); transform-origin: center; } .artifact-plate-group .schematic-plate { fill: rgba(12,9,6,.24); stroke: rgba(200,64,26,.20); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .5s ease, stroke .5s ease, opacity .5s ease; } .artifact-plate-label { fill: rgba(240,235,227,.58); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; font-family: Arial, sans-serif; } .artifact-plate-sub { fill: rgba(154,142,130,.52); font-size: 11px; letter-spacing: .08em; font-family: Arial, sans-serif; } .artifact-plate-mark { fill: none; stroke: rgba(88,205,210,.18); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .72; } .artifact-foundry[data-active-artifact="1"] .artifact-plate-group.plate-1, .artifact-foundry[data-active-artifact="2"] .artifact-plate-group.plate-2, .artifact-foundry[data-active-artifact="3"] .artifact-plate-group.plate-3, .artifact-foundry[data-active-artifact="4"] .artifact-plate-group.plate-4, .artifact-foundry[data-active-artifact="5"] .artifact-plate-group.plate-5, .artifact-foundry[data-active-artifact="6"] .artifact-plate-group.plate-6, .artifact-foundry[data-active-artifact="7"] .artifact-plate-group.plate-7 { opacity: 1; transform: translateY(-3px) scale(1.018); filter: drop-shadow(0 0 10px rgba(224,85,48,.20)) drop-shadow(0 0 18px rgba(88,205,210,.07)); } .artifact-foundry[data-active-artifact="1"] .artifact-plate-group.plate-1 .schematic-plate, .artifact-foundry[data-active-artifact="2"] .artifact-plate-group.plate-2 .schematic-plate, .artifact-foundry[data-active-artifact="3"] .artifact-plate-group.plate-3 .schematic-plate, .artifact-foundry[data-active-artifact="4"] .artifact-plate-group.plate-4 .schematic-plate, .artifact-foundry[data-active-artifact="5"] .artifact-plate-group.plate-5 .schematic-plate, .artifact-foundry[data-active-artifact="6"] .artifact-plate-group.plate-6 .schematic-plate, .artifact-foundry[data-active-artifact="7"] .artifact-plate-group.plate-7 .schematic-plate { fill: rgba(200,64,26,.075); stroke: rgba(224,85,48,.62); } .artifact-foundry[data-active-artifact="1"] .artifact-plate-group.plate-1 .artifact-plate-label, .artifact-foundry[data-active-artifact="2"] .artifact-plate-group.plate-2 .artifact-plate-label, .artifact-foundry[data-active-artifact="3"] .artifact-plate-group.plate-3 .artifact-plate-label, .artifact-foundry[data-active-artifact="4"] .artifact-plate-group.plate-4 .artifact-plate-label, .artifact-foundry[data-active-artifact="5"] .artifact-plate-group.plate-5 .artifact-plate-label, .artifact-foundry[data-active-artifact="6"] .artifact-plate-group.plate-6 .artifact-plate-label, .artifact-foundry[data-active-artifact="7"] .artifact-plate-group.plate-7 .artifact-plate-label { fill: rgba(240,235,227,.88); } .artifact-rail { display: flex; flex-direction: column; gap: 0 !important; border-top: 1px solid rgba(255,255,255,.055); } .artifact-item { min-height: 4.8rem !important; display: grid !important; grid-template-columns: 8.5rem 1fr 2rem !important; align-items: start !important; padding: 1.15rem 0 !important; border-bottom: 1px solid rgba(255,255,255,.055); overflow: hidden; max-height: 5.3rem; transition: max-height .58s cubic-bezier(.22,1,.36,1), padding .58s cubic-bezier(.22,1,.36,1), background .55s ease, box-shadow .55s ease, transform .55s cubic-bezier(.22,1,.36,1) !important; } .artifact-item.artifact-active, .artifact-item.artifact-expanded, .artifact-item:hover, .artifact-item:focus-visible { max-height: 9.4rem; padding: 1.35rem 0 1.65rem !important; } .artifact-item p { max-width: 70ch; opacity: 0; transform: translateY(-4px); max-height: 0; overflow: hidden; margin-top: .15rem; transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1), max-height .55s cubic-bezier(.22,1,.36,1), color .45s ease !important; } .artifact-item.artifact-active p, .artifact-item.artifact-expanded p, .artifact-item:hover p, .artifact-item:focus-visible p { opacity: 1; transform: translateY(0); max-height: 4rem; } .artifact-item h3 { margin-top: .2rem; } .artifact-code { margin-top: .1rem; } .artifact-arrow { align-self: center; margin-top: 0 !important; } /* Keep active row persistent without requiring hover */ .artifact-item.artifact-active { background: rgba(20,14,9,.78); box-shadow: inset 0 0 0 1px rgba(200,64,26,.08), 0 18px 70px rgba(0,0,0,.22); } .artifact-item.artifact-active .artifact-code { color: var(--red-hi); border-color: rgba(200,64,26,.58); background: rgba(200,64,26,.055); text-shadow: 0 0 12px rgba(200,64,26,.22); } .artifact-item.artifact-active h3 { color: var(--red-hi); text-shadow: 0 0 16px rgba(200,64,26,.22), 0 0 28px rgba(88,205,210,.055); transform: translateX(2px); } .artifact-item.artifact-active p { color: rgba(240,235,227,.86); } .artifact-item.artifact-active .artifact-arrow { color: var(--red-hi); opacity: 1; transform: translateX(8px); text-shadow: 0 0 14px rgba(200,64,26,.22); } @media(max-width:900px) { .artifact-item { grid-template-columns: 1fr 1.5rem !important; gap: .75rem; max-height: 5.6rem; } .artifact-code { grid-column: 1 / -1; width: max-content; } .artifact-item > div:nth-child(2) { grid-column: 1; } .artifact-arrow { grid-column: 2; grid-row: 2; } .artifact-item.artifact-active, .artifact-item.artifact-expanded, .artifact-item:hover, .artifact-item:focus-visible { max-height: 12rem; } } @media(max-width:768px) { .artifact-schematic-svg { opacity: .42 !important; } .artifact-item { max-height: 6.4rem; padding: 1.05rem 0 !important; } .artifact-item.artifact-active, .artifact-item.artifact-expanded { max-height: 13rem; padding: 1.25rem 0 1.5rem !important; } .artifact-item p { font-size: .92rem; } .artifact-plate-label { font-size: 13px; } .artifact-plate-sub { display: none; } } @media (prefers-reduced-motion: reduce) { .artifact-item, .artifact-item p, .artifact-plate-group { transition: none !important; } } /* METHOD V25: Artifact Foundry v3, live artifact console */ .artifact-foundry { min-height: 100vh; padding-bottom: clamp(4rem, 7vw, 8rem) !important; } .artifact-foundry-field { opacity: .58 !important; } .artifact-schematic-svg { opacity: .32 !important; right: -14rem !important; top: 4rem !important; width: min(82vw, 1280px) !important; height: 28rem !important; filter: none !important; } .artifact-drafting-wash { opacity: .42 !important; filter: blur(22px) !important; } .artifact-measure-grid { opacity: .14 !important; } .artifact-live-display { position: relative; z-index: 8; display: grid; grid-template-columns: minmax(17rem, 29rem) minmax(28rem, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: stretch; margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.065); padding-top: clamp(1.5rem, 3vw, 2.5rem); } .artifact-selector-panel { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)), rgba(7,5,3,.70); box-shadow: 0 24px 90px rgba(0,0,0,.20); overflow: hidden; } .artifact-selector-row { appearance: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.055); background: transparent; color: inherit; text-align: left; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; min-height: 4.45rem; padding: 1rem 1.1rem; cursor: pointer; position: relative; transition: background .45s ease, transform .45s cubic-bezier(.22,1,.36,1), color .45s ease, opacity .45s ease; } .artifact-selector-row:last-child { border-bottom: 0; } .artifact-selector-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red-hi); opacity: 0; transform: scaleY(.32); transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 18px rgba(200,64,26,.20); } .artifact-selector-row::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .7rem; height: 1px; background: linear-gradient(90deg, rgba(200,64,26,.38), rgba(88,205,210,.14), transparent); opacity: 0; transform: scaleX(.28); transform-origin: left center; transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); } .selector-code { color: var(--red); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .68; transition: color .45s ease, opacity .45s ease, text-shadow .45s ease; } .selector-title { color: rgba(240,235,227,.78); font-family: var(--serif); font-size: clamp(1.0rem, 1.35vw, 1.28rem); letter-spacing: .015em; transition: color .45s ease, transform .45s cubic-bezier(.22,1,.36,1), text-shadow .45s ease; } .artifact-selector-row:hover, .artifact-selector-row.is-active, .artifact-selector-row:focus-visible { background: radial-gradient(ellipse 90% 80% at 16% 16%, rgba(200,64,26,.115) 0%, rgba(200,64,26,.032) 48%, transparent 76%), rgba(18,12,8,.86); transform: translateX(4px); outline: none; } .artifact-selector-row:hover::before, .artifact-selector-row.is-active::before, .artifact-selector-row:focus-visible::before { opacity: 1; transform: scaleY(1); } .artifact-selector-row:hover::after, .artifact-selector-row.is-active::after, .artifact-selector-row:focus-visible::after { opacity: .72; transform: scaleX(1); } .artifact-selector-row:hover .selector-code, .artifact-selector-row.is-active .selector-code, .artifact-selector-row:focus-visible .selector-code { color: var(--red-hi); opacity: 1; text-shadow: 0 0 12px rgba(200,64,26,.22); } .artifact-selector-row:hover .selector-title, .artifact-selector-row.is-active .selector-title, .artifact-selector-row:focus-visible .selector-title { color: var(--red-hi); transform: translateX(2px); text-shadow: 0 0 16px rgba(200,64,26,.20), 0 0 28px rgba(88,205,210,.055); } .artifact-blueprint-panel { min-height: 34rem; position: relative; overflow: hidden; border: 1px solid rgba(200,64,26,.15); background: radial-gradient(ellipse 76% 58% at 60% 44%, rgba(200,64,26,.095) 0%, rgba(91,34,10,.034) 48%, transparent 78%), radial-gradient(ellipse 48% 38% at 78% 70%, rgba(88,205,210,.055) 0%, transparent 72%), rgba(7,5,3,.76); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 32px 130px rgba(0,0,0,.30); padding: clamp(1.75rem, 3vw, 3.25rem); display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: border-color .55s ease, background .55s ease, box-shadow .55s ease; } .artifact-blueprint-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(200,64,26,.030) 1px, transparent 1px), linear-gradient(90deg, rgba(88,205,210,.020) 1px, transparent 1px); background-size: 5.5rem 4.25rem; opacity: .52; mask-image: radial-gradient(ellipse at center, black 0%, black 56%, transparent 82%); } .artifact-blueprint-panel::after { content: ''; position: absolute; left: -20%; right: -20%; top: 62%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,64,26,.34), rgba(88,205,210,.12), transparent); opacity: .0; transform: translateX(-24%); animation: blueprintPanelScan 7.2s ease-in-out infinite; } .blueprint-status { color: var(--red); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; opacity: .78; margin-bottom: 1.35rem; } .blueprint-code { color: var(--red-hi); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1rem; text-shadow: 0 0 14px rgba(200,64,26,.22); transition: opacity .35s ease, transform .35s ease; } .artifact-blueprint-panel h3 { color: rgba(240,235,227,.96); font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 5.2rem); line-height: .96; letter-spacing: -.035em; max-width: 10ch; margin: 0; transition: opacity .35s ease, transform .35s ease, color .35s ease; } .artifact-blueprint-panel p { color: rgba(240,235,227,.76); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; max-width: 58ch; margin: 2rem 0 0; transition: opacity .35s ease, transform .35s ease, color .35s ease; } .artifact-blueprint-panel.is-changing .blueprint-code, .artifact-blueprint-panel.is-changing h3, .artifact-blueprint-panel.is-changing p { opacity: 0; transform: translateY(6px); } .blueprint-schematic { position: relative; height: 12rem; margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.060); overflow: hidden; } .bp-grid { position: absolute; inset: 0; background: linear-gradient(rgba(200,64,26,.040) 1px, transparent 1px), linear-gradient(90deg, rgba(88,205,210,.030) 1px, transparent 1px); background-size: 4.5rem 3rem; opacity: .44; } .bp-node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.68); box-shadow: 0 0 14px rgba(224,85,48,.32), 0 0 26px rgba(88,205,210,.10); } .bp-n1 { left: 12%; top: 56%; } .bp-n2 { left: 46%; top: 32%; } .bp-n3 { left: 80%; top: 62%; } .bp-line { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(200,64,26,.56), rgba(88,205,210,.18), transparent); transform-origin: left center; opacity: .62; } .bp-l1 { left: 12%; top: 58%; width: 35%; transform: rotate(-18deg); } .bp-l2 { left: 46%; top: 35%; width: 35%; transform: rotate(18deg); } .bp-l3 { left: 18%; top: 78%; width: 64%; opacity: .22; } .bp-trace { position: absolute; left: 8%; top: 58%; width: 78%; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.70), rgba(88,205,210,.26), transparent); transform-origin: left center; opacity: 0; animation: blueprintTrace 4.8s ease-in-out infinite; } .bp-label { position: absolute; color: rgba(154,142,130,.55); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; } .bp-label-one { left: 9%; top: 68%; } .bp-label-two { left: 43%; top: 14%; } .bp-label-three { right: 8%; top: 72%; } .artifact-legacy-rail { display: none !important; } @keyframes blueprintPanelScan { 0%, 62%, 100% { opacity: 0; transform: translateX(-24%); } 74% { opacity: .46; transform: translateX(0%); } 90% { opacity: 0; transform: translateX(24%); } } @keyframes blueprintTrace { 0%, 18% { opacity: 0; transform: scaleX(.12); } 36% { opacity: .80; transform: scaleX(.70); } 62% { opacity: .42; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.12); } } @media(max-width:1100px) { .artifact-live-display { grid-template-columns: 1fr; } .artifact-selector-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .artifact-selector-row { border-right: 1px solid rgba(255,255,255,.055); } } @media(max-width:768px) { .artifact-live-display { margin-top: 2rem; gap: 1rem; } .artifact-selector-panel { grid-template-columns: 1fr; } .artifact-selector-row { grid-template-columns: 6.5rem 1fr; min-height: 4rem; padding: .85rem .9rem; } .artifact-blueprint-panel { min-height: 31rem; padding: 1.4rem; } .artifact-blueprint-panel h3 { font-size: clamp(2.15rem, 12vw, 4rem); } .artifact-blueprint-panel p { font-size: .98rem; line-height: 1.65; } .blueprint-schematic { height: 10rem; } } @media (prefers-reduced-motion: reduce) { .artifact-blueprint-panel::after, .bp-trace { animation: none !important; } } /* METHOD V26: remove redundant top-right schematic and add artifact-specific visuals */ /* The live console carries this section now; suppress the old background box/word schematic. */ .artifact-foundry-field { opacity: .18 !important; } .artifact-schematic-svg, .artifact-measure-grid { display: none !important; } .artifact-drafting-wash { right: 4% !important; top: 16rem !important; width: 54% !important; height: 26rem !important; opacity: .30 !important; filter: blur(26px) !important; } .artifact-live-display { margin-top: clamp(2rem, 4vw, 3.5rem) !important; } .artifact-blueprint-panel { min-height: 35rem; background: radial-gradient(ellipse 78% 58% at 58% 42%, rgba(200,64,26,.120) 0%, rgba(91,34,10,.038) 48%, transparent 78%), radial-gradient(ellipse 48% 38% at 78% 74%, rgba(88,205,210,.065) 0%, transparent 72%), rgba(7,5,3,.80) !important; } .blueprint-schematic { height: 14rem !important; margin-top: 2.6rem !important; border-top: 1px solid rgba(255,255,255,.070); border-bottom: 1px solid rgba(255,255,255,.040); background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,64,26,.035), transparent 70%); } .artifact-visual { position: absolute; inset: 1.25rem 0; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); } .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis, .artifact-blueprint-panel[data-blueprint-kind="intake"] .artifact-visual-intake, .artifact-blueprint-panel[data-blueprint-kind="flow"] .artifact-visual-flow, .artifact-blueprint-panel[data-blueprint-kind="decision"] .artifact-visual-decision, .artifact-blueprint-panel[data-blueprint-kind="rhythm"] .artifact-visual-rhythm, .artifact-blueprint-panel[data-blueprint-kind="signals"] .artifact-visual-signals, .artifact-blueprint-panel[data-blueprint-kind="improvement"] .artifact-visual-backlog { opacity: 1; transform: translateY(0); } .artifact-visual span { position: absolute; box-sizing: border-box; } /* DIAGNOSIS visual, symptom traced backward to origin */ .diag-symptom, .diag-origin { border: 1px solid rgba(200,64,26,.24); background: rgba(7,5,3,.68); color: rgba(240,235,227,.62); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; padding: .62rem .75rem; } .diag-symptom { right: 9%; top: 36%; } .diag-origin { left: 10%; top: 38%; border-color: rgba(224,85,48,.55); color: rgba(240,235,227,.86); box-shadow: 0 0 18px rgba(200,64,26,.14); } .diag-line { left: 22%; right: 22%; top: 50%; height: 1px; background: linear-gradient(270deg, rgba(224,85,48,.72), rgba(88,205,210,.20), transparent); transform-origin: right center; animation: artifactDiagTrace 4.8s ease-in-out infinite; } .diag-pulse { left: 21%; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.75); box-shadow: 0 0 18px rgba(224,85,48,.34); animation: artifactNodePulse 2.4s ease-in-out infinite; } /* INTAKE visual, multiple paths into a triage gate */ .intake-path { left: 9%; width: 44%; height: 1px; background: linear-gradient(90deg, rgba(200,64,26,.55), rgba(88,205,210,.14), transparent); transform-origin: left center; animation: artifactIntakeFlow 4.6s ease-in-out infinite; } .intake-path.p1 { top: 30%; transform: rotate(10deg); } .intake-path.p2 { top: 50%; transform: rotate(0deg); animation-delay: .25s; } .intake-path.p3 { top: 70%; transform: rotate(-10deg); animation-delay: .50s; } .intake-gate { right: 16%; top: 34%; width: 8rem; height: 4.5rem; border: 1px solid rgba(224,85,48,.46); display: grid; place-items: center; color: rgba(240,235,227,.78); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; background: rgba(200,64,26,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.020); } /* FLOW visual, path with visible queue */ .flow-node { width: 9px; height: 9px; border-radius: 50%; background: rgba(224,85,48,.65); box-shadow: 0 0 14px rgba(224,85,48,.25); } .flow-node.f1 { left: 12%; top: 62%; } .flow-node.f2 { left: 34%; top: 36%; } .flow-node.f3 { left: 58%; top: 52%; } .flow-node.f4 { left: 82%; top: 30%; } .flow-path { left: 12%; top: 55%; width: 72%; height: 2px; background: linear-gradient(90deg, rgba(200,64,26,.58), rgba(88,205,210,.22), rgba(200,64,26,.22), transparent); transform: rotate(-12deg); transform-origin: left center; animation: artifactFlowPath 4.8s ease-in-out infinite; } .flow-queue { left: 42%; top: 68%; width: 10rem; height: 2.2rem; background: repeating-linear-gradient(90deg, rgba(88,205,210,.20) 0 2px, transparent 2px 14px); opacity: .70; } /* DECISION visual, authority levels */ .decision-level { left: 10%; right: 10%; height: 2.15rem; border: 1px solid rgba(255,255,255,.055); color: rgba(240,235,227,.58); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; padding-left: 1rem; background: rgba(7,5,3,.55); } .decision-level.l1 { top: 18%; } .decision-level.l2 { top: 43%; border-color: rgba(200,64,26,.18); } .decision-level.l3 { top: 68%; border-color: rgba(224,85,48,.36); color: rgba(240,235,227,.78); } .decision-route { right: 16%; top: 24%; width: 1px; height: 54%; background: linear-gradient(180deg, rgba(200,64,26,.70), rgba(88,205,210,.18), transparent); animation: artifactDecisionRoute 3.8s ease-in-out infinite; } /* RHYTHM visual, cadence rings */ .rhythm-ring { left: 50%; top: 50%; border: 1px solid rgba(200,64,26,.22); border-radius: 50%; transform: translate(-50%, -50%); animation: artifactRhythmRing 5.2s ease-in-out infinite; } .rhythm-ring.r1 { width: 7rem; height: 7rem; } .rhythm-ring.r2 { width: 12rem; height: 12rem; animation-delay: .45s; border-color: rgba(88,205,210,.13); } .rhythm-ring.r3 { width: 17rem; height: 17rem; animation-delay: .9s; border-color: rgba(200,64,26,.12); } .rhythm-beat { left: calc(50% - 4px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.78); box-shadow: 0 0 18px rgba(224,85,48,.32); animation: artifactNodePulse 2.2s ease-in-out infinite; } /* SIGNALS visual, wave and threshold */ .signal-baseline { left: 9%; right: 9%; top: 58%; height: 1px; background: rgba(154,142,130,.22); } .signal-wave { left: 9%; right: 9%; top: 48%; height: 3.5rem; border-top: 2px solid rgba(224,85,48,.60); border-radius: 50%; transform: scaleY(.45); animation: artifactSignalWave 3.8s ease-in-out infinite; box-shadow: 0 -8px 18px rgba(88,205,210,.045); } .signal-threshold { right: 12%; top: 22%; color: rgba(240,235,227,.68); border: 1px solid rgba(224,85,48,.32); padding: .5rem .7rem; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; } /* BACKLOG visual, prioritized stack */ .backlog-card { left: 18%; width: 48%; height: 2.3rem; border: 1px solid rgba(200,64,26,.18); background: rgba(7,5,3,.58); animation: artifactBacklogStack 4.6s ease-in-out infinite; } .backlog-card.b1 { top: 28%; } .backlog-card.b2 { top: 46%; left: 22%; animation-delay: .25s; } .backlog-card.b3 { top: 64%; left: 26%; animation-delay: .50s; border-color: rgba(224,85,48,.42); } .backlog-priority { right: 18%; top: 30%; width: 1px; height: 52%; background: linear-gradient(180deg, rgba(224,85,48,.70), rgba(88,205,210,.18), transparent); } @keyframes artifactDiagTrace { 0%, 100% { transform: scaleX(.16); opacity: .20; } 45% { transform: scaleX(1); opacity: .88; } 70% { opacity: .42; } } @keyframes artifactNodePulse { 0%, 100% { opacity: .42; transform: scale(.82); } 45% { opacity: 1; transform: scale(1.25); } } @keyframes artifactIntakeFlow { 0%, 100% { opacity: .24; transform: scaleX(.22); } 45% { opacity: .82; transform: scaleX(1); } } @keyframes artifactFlowPath { 0%, 100% { opacity: .28; transform: rotate(-12deg) scaleX(.30); } 48% { opacity: .86; transform: rotate(-12deg) scaleX(1); } } @keyframes artifactDecisionRoute { 0%, 100% { opacity: .26; transform: scaleY(.25); } 46% { opacity: .90; transform: scaleY(1); } } @keyframes artifactRhythmRing { 0%, 100% { opacity: .16; transform: translate(-50%, -50%) scale(.86); } 46% { opacity: .62; transform: translate(-50%, -50%) scale(1.06); } } @keyframes artifactSignalWave { 0%, 100% { opacity: .28; transform: scaleY(.28); } 45% { opacity: .88; transform: scaleY(.72); } } @keyframes artifactBacklogStack { 0%, 100% { opacity: .34; transform: translateX(0); } 45% { opacity: .88; transform: translateX(8px); } } @media(max-width:768px) { .artifact-visual { inset: 1rem 0; } .diag-symptom, .diag-origin, .intake-gate, .signal-threshold { font-size: .48rem; } .rhythm-ring.r3 { width: 13rem; height: 13rem; } } @media (prefers-reduced-motion: reduce) { .artifact-visual span { animation: none !important; } } /* METHOD V27: Artifact Foundry story visuals and active ghost preview */ /* Bring the upper-right canvas back as an active ghost preview, not empty boxes */ .artifact-ghost-preview { position: absolute; right: clamp(2rem, 5vw, 5rem); top: clamp(5.5rem, 9vw, 8rem); width: min(46vw, 43rem); height: 18rem; z-index: 3; pointer-events: none; opacity: .74; border-top: 1px solid rgba(200,64,26,.12); border-bottom: 1px solid rgba(255,255,255,.035); background: radial-gradient(ellipse 78% 58% at 58% 48%, rgba(200,64,26,.080) 0%, rgba(91,34,10,.025) 52%, transparent 78%), radial-gradient(ellipse 46% 36% at 82% 66%, rgba(88,205,210,.038) 0%, transparent 72%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 94%, transparent 100%); overflow: hidden; } .ghost-product-name { position: absolute; left: 2rem; top: 1.7rem; color: rgba(240,235,227,.32); font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 3.2rem); line-height: .95; letter-spacing: -.025em; max-width: 11ch; transition: opacity .35s ease, transform .35s ease; } .ghost-product-type { position: absolute; left: 2.1rem; top: 7.6rem; color: rgba(224,85,48,.48); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; transition: opacity .35s ease, transform .35s ease; } .ghost-preview-stage { position: absolute; right: 2rem; bottom: 2rem; width: 52%; height: 8.2rem; } .ghost-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.42), rgba(88,205,210,.16), transparent); transform-origin: left center; animation: ghostPreviewTrace 5.8s ease-in-out infinite; } .ghost-line.g1 { left: 4%; top: 64%; width: 84%; transform: rotate(-16deg); } .ghost-line.g2 { left: 14%; top: 36%; width: 70%; transform: rotate(12deg); animation-delay: .35s; } .ghost-line.g3 { left: 30%; top: 82%; width: 48%; opacity: .38; animation-delay: .70s; } .ghost-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(224,85,48,.62); box-shadow: 0 0 14px rgba(224,85,48,.24); animation: ghostNodePulse 4.4s ease-in-out infinite; } .ghost-node.gn1 { left: 8%; top: 60%; } .ghost-node.gn2 { left: 47%; top: 28%; animation-delay: .45s; background: rgba(88,205,210,.48); } .ghost-node.gn3 { right: 8%; top: 54%; animation-delay: .90s; } @keyframes ghostPreviewTrace { 0%, 100% { opacity: .18; transform-origin: left center; } 42% { opacity: .78; } } @keyframes ghostNodePulse { 0%, 100% { opacity: .32; transform: scale(.78); } 45% { opacity: .92; transform: scale(1.18); } } .blueprint-status { color: var(--red-hi) !important; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 2rem) !important; line-height: 1.05; letter-spacing: -.015em !important; text-transform: none !important; margin-bottom: 1.15rem !important; opacity: .92 !important; text-shadow: 0 0 14px rgba(200,64,26,.18), 0 0 26px rgba(88,205,210,.045); } .blueprint-code { font-size: .58rem !important; opacity: .76; margin-bottom: .85rem !important; } .blueprint-schematic { height: 15rem !important; background: radial-gradient(ellipse 80% 60% at 50% 52%, rgba(200,64,26,.050), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.010), transparent) !important; } .bp-story-caption { position: absolute; left: 0; right: 0; bottom: .65rem; height: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); color: rgba(154,142,130,.44); font-size: .52rem; letter-spacing: .20em; text-transform: uppercase; pointer-events: none; } .story-step { position: relative !important; text-align: center; opacity: .48; animation: storyStepPulse 6s ease-in-out infinite; } .story-step.story-two { animation-delay: 1.2s; } .story-step.story-three { animation-delay: 2.4s; } @keyframes storyStepPulse { 0%, 100% { opacity: .30; color: rgba(154,142,130,.44); } 42% { opacity: 1; color: rgba(224,85,48,.82); } } /* Make each artifact visual tell a clearer micro-story */ /* Diagnosis: noisy symptom on the right gets traced backward into upstream origin */ .artifact-visual-diagnosis::before { content: ''; position: absolute; right: 10%; top: 50%; width: 11rem; height: 3.8rem; border-top: 2px solid rgba(88,205,210,.34); border-bottom: 1px solid rgba(200,64,26,.18); border-radius: 50%; opacity: .55; transform: translateY(-50%) scaleY(.55); animation: diagNoiseSettle 5.8s ease-in-out infinite; } .diag-line { height: 2px !important; animation: artifactDiagTraceStory 5.8s ease-in-out infinite !important; } .diag-origin { animation: originBoxResolve 5.8s ease-in-out infinite; } @keyframes artifactDiagTraceStory { 0%, 14% { transform: scaleX(.10); opacity: .10; } 38% { transform: scaleX(1); opacity: .92; } 62% { transform: scaleX(1); opacity: .52; } 100% { transform: scaleX(.20); opacity: .10; } } @keyframes diagNoiseSettle { 0%, 100% { opacity: .22; transform: translateY(-50%) scaleY(.95); } 36% { opacity: .76; transform: translateY(-50%) scaleY(.32); } 68% { opacity: .30; transform: translateY(-50%) scaleY(.18); } } @keyframes originBoxResolve { 0%, 100% { box-shadow: 0 0 0 rgba(200,64,26,0); } 42% { box-shadow: 0 0 24px rgba(200,64,26,.26); } } /* Intake: three demands enter, bad noise fades, accepted path passes gate */ .artifact-visual-intake::before { content: 'accept / defer / reject'; position: absolute; right: 13%; bottom: 1.65rem; color: rgba(154,142,130,.44); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; } .intake-path { height: 2px !important; animation: artifactIntakeStory 5.4s ease-in-out infinite !important; } .intake-gate { animation: intakeGateDecide 5.4s ease-in-out infinite; } @keyframes artifactIntakeStory { 0%, 100% { opacity: .16; transform: scaleX(.18); } 30% { opacity: .72; transform: scaleX(1); } 56% { opacity: .34; transform: scaleX(.78); } } @keyframes intakeGateDecide { 0%, 100% { border-color: rgba(200,64,26,.22); } 42% { border-color: rgba(224,85,48,.72); box-shadow: 0 0 20px rgba(200,64,26,.18); } } /* Flow: work moves through path, queue glows as the bottleneck */ .flow-queue { height: 2.8rem !important; animation: queueBecomesAudible 5.6s ease-in-out infinite; } .flow-path { height: 2px !important; animation: artifactFlowStory 5.6s ease-in-out infinite !important; } @keyframes artifactFlowStory { 0%, 100% { opacity: .18; transform: rotate(-12deg) scaleX(.22); } 36% { opacity: .86; transform: rotate(-12deg) scaleX(.74); } 60% { opacity: .54; transform: rotate(-12deg) scaleX(1); } } @keyframes queueBecomesAudible { 0%, 100% { opacity: .22; } 42% { opacity: .92; box-shadow: 0 0 20px rgba(88,205,210,.10); } } /* Decision: authority route climbs levels and resolves at the right layer */ .decision-route { width: 2px !important; animation: artifactDecisionStory 5.5s ease-in-out infinite !important; } .decision-level.l3 { animation: decisionLevelResolve 5.5s ease-in-out infinite; } @keyframes artifactDecisionStory { 0%, 100% { opacity: .18; transform: scaleY(.12); } 38% { opacity: .88; transform: scaleY(.72); } 62% { opacity: .60; transform: scaleY(1); } } @keyframes decisionLevelResolve { 0%, 100% { box-shadow: none; } 52% { box-shadow: inset 0 0 0 1px rgba(224,85,48,.18), 0 0 20px rgba(200,64,26,.12); } } /* Rhythm: beats stabilize into a cadence */ .rhythm-ring { animation-duration: 6.2s !important; } .rhythm-beat::after { content: ''; position: absolute; inset: -18px; border: 1px solid rgba(224,85,48,.18); border-radius: 50%; animation: beatStabilizes 3.1s ease-in-out infinite; } @keyframes beatStabilizes { 0% { opacity: 0; transform: scale(.3); } 42% { opacity: .70; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } } /* Signals: threshold gets crossed, trigger lights up, wave smooths */ .signal-threshold { animation: signalTriggerLights 4.8s ease-in-out infinite; } .signal-wave { border-top-width: 3px !important; animation: artifactSignalStory 4.8s ease-in-out infinite !important; } @keyframes artifactSignalStory { 0%, 100% { opacity: .20; transform: scaleY(.22); } 34% { opacity: .80; transform: scaleY(.82); } 62% { opacity: .52; transform: scaleY(.42); } } @keyframes signalTriggerLights { 0%, 100% { border-color: rgba(200,64,26,.22); color: rgba(240,235,227,.52); } 44% { border-color: rgba(224,85,48,.74); color: rgba(240,235,227,.90); box-shadow: 0 0 18px rgba(200,64,26,.18); } } /* Backlog: stack sorts, one priority moves forward */ .backlog-card { animation: backlogSortStory 5.2s ease-in-out infinite !important; } .backlog-priority { width: 2px !important; animation: priorityLineStory 5.2s ease-in-out infinite; } @keyframes backlogSortStory { 0%, 100% { opacity: .30; transform: translateX(0); } 36% { opacity: .70; transform: translateX(4px); } 62% { opacity: .96; transform: translateX(14px); } } @keyframes priorityLineStory { 0%, 100% { opacity: .20; transform: scaleY(.25); } 48% { opacity: .90; transform: scaleY(1); } } @media(max-width:1000px) { .artifact-ghost-preview { position: relative; right: auto; top: auto; width: 100%; height: 11rem; margin-top: 1.5rem; opacity: .52; } } @media(max-width:768px) { .artifact-ghost-preview { display: none; } .blueprint-status { font-size: 1.2rem !important; } .bp-story-caption { font-size: .44rem; } } @media (prefers-reduced-motion: reduce) { .artifact-visual *, .artifact-visual::before, .story-step, .ghost-line, .ghost-node { animation: none !important; } } /* METHOD V28: abstract foundry cloud and clearer artifact story cycles */ /* Top-right: no readable ghost artifact, just abstract artifact-energy field */ .artifact-ghost-preview { right: clamp(1rem, 4vw, 4rem) !important; top: clamp(4.5rem, 8vw, 7rem) !important; width: min(48vw, 46rem) !important; height: 21rem !important; border: 0 !important; background: transparent !important; opacity: .92 !important; overflow: visible !important; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, black 54%, transparent 78%) !important; } .ghost-product-name, .ghost-product-type, .ghost-preview-stage { display: none !important; } .artifact-ghost-preview::before, .artifact-ghost-preview::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform: translateZ(0); } .artifact-ghost-preview::before { background: radial-gradient(ellipse 36% 28% at 38% 44%, rgba(224,85,48,.22) 0%, rgba(200,64,26,.08) 38%, transparent 72%), radial-gradient(ellipse 42% 32% at 64% 56%, rgba(88,205,210,.13) 0%, rgba(28,94,108,.052) 42%, transparent 76%), radial-gradient(ellipse 58% 44% at 52% 50%, rgba(91,34,10,.13) 0%, transparent 74%); filter: blur(22px); animation: artifactCloudWander 28s ease-in-out infinite alternate; } .artifact-ghost-preview::after { inset: 14%; border: 1px solid rgba(200,64,26,.060); box-shadow: 0 0 42px rgba(200,64,26,.055), inset 0 0 32px rgba(88,205,210,.022); transform: rotate(-8deg); animation: artifactCloudOrbit 38s ease-in-out infinite alternate; } @keyframes artifactCloudWander { 0% { opacity: .46; transform: translate3d(-3%, 3%, 0) scale(.94) rotate(-3deg); } 45% { opacity: .78; transform: translate3d(3%, -2%, 0) scale(1.08) rotate(2deg); } 100% { opacity: .58; transform: translate3d(-1%, 1%, 0) scale(1.02) rotate(-1deg); } } @keyframes artifactCloudOrbit { 0% { opacity: .22; transform: rotate(-12deg) scale(.92); } 50% { opacity: .52; transform: rotate(4deg) scale(1.08); } 100% { opacity: .30; transform: rotate(-4deg) scale(1); } } /* Make the live panel visuals feel like product stories */ .blueprint-schematic { height: 16rem !important; border-color: rgba(200,64,26,.11) !important; background: radial-gradient(ellipse 80% 64% at 50% 52%, rgba(200,64,26,.060), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.014), transparent) !important; overflow: hidden; } .artifact-visual span, .artifact-visual::before, .artifact-visual::after { will-change: transform, opacity; } /* ESD, breakdown -> diagnosis -> repair */ .diag-break { width: 8.5rem; height: 2px; background: linear-gradient(90deg, rgba(154,142,130,.14), rgba(224,85,48,.42), transparent); transform-origin: left center; opacity: .35; } .diag-break.db1 { left: 50%; top: 33%; transform: rotate(8deg); animation: diagBreakdown 6.4s ease-in-out infinite; } .diag-break.db2 { left: 55%; top: 50%; transform: rotate(-12deg); animation: diagBreakdown 6.4s ease-in-out infinite .22s; } .diag-break.db3 { left: 48%; top: 67%; transform: rotate(15deg); animation: diagBreakdown 6.4s ease-in-out infinite .44s; } .diag-fix { left: 20%; top: 50%; width: 56%; height: 2px; background: linear-gradient(90deg, rgba(224,85,48,.78), rgba(88,205,210,.24), transparent); transform-origin: left center; animation: diagRepairLine 6.4s ease-in-out infinite; } .diag-symptom { right: 8% !important; animation: symptomBoxFail 6.4s ease-in-out infinite; } .diag-origin { left: 8% !important; animation: originFoundGlow 6.4s ease-in-out infinite !important; } @keyframes diagBreakdown { 0%, 100% { opacity: .12; transform: translateX(0) rotate(var(--r, 8deg)); } 20% { opacity: .78; transform: translateX(-4px) rotate(12deg); } 48% { opacity: .35; transform: translateX(2px) rotate(-4deg); } 72% { opacity: .08; transform: translateX(10px) rotate(0deg); } } @keyframes diagRepairLine { 0%, 24% { opacity: 0; transform: scaleX(.10); } 42% { opacity: .90; transform: scaleX(1); } 70% { opacity: .38; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.20); } } @keyframes symptomBoxFail { 0%, 100% { opacity: .48; transform: translateX(0); } 18% { opacity: .86; transform: translateX(-4px); } 58% { opacity: .30; transform: translateX(4px); } } @keyframes originFoundGlow { 0%, 100% { box-shadow: 0 0 0 rgba(200,64,26,0); } 42% { box-shadow: 0 0 28px rgba(200,64,26,.34); } } /* WIM, many signals -> triage hub -> routed outputs */ .intake-gate { border-radius: 50% !important; width: 5.8rem !important; height: 5.8rem !important; right: auto !important; left: calc(50% - 2.9rem) !important; top: calc(50% - 2.9rem) !important; animation: triageHubPulse 5.8s ease-in-out infinite !important; } .intake-output { width: 5.8rem; height: 1.85rem; border: 1px solid rgba(88,205,210,.16); right: 8%; background: rgba(7,5,3,.50); opacity: .38; animation: intakeOutputReceive 5.8s ease-in-out infinite; } .intake-output.out1 { top: 24%; } .intake-output.out2 { top: 47%; animation-delay: .22s; border-color: rgba(224,85,48,.26); } .intake-output.out3 { top: 70%; animation-delay: .44s; } .intake-signal { left: 12%; width: 36%; height: 2px; background: linear-gradient(90deg, rgba(224,85,48,.64), rgba(88,205,210,.18), transparent); transform-origin: left center; animation: intakeSignalToHub 5.8s ease-in-out infinite; } .intake-signal.s1 { top: 28%; transform: rotate(11deg); } .intake-signal.s2 { top: 50%; transform: rotate(0deg); animation-delay: .20s; } .intake-signal.s3 { top: 72%; transform: rotate(-11deg); animation-delay: .40s; } @keyframes intakeSignalToHub { 0%, 100% { opacity: .12; transform: scaleX(.16); } 28% { opacity: .84; transform: scaleX(1); } 48% { opacity: .32; transform: scaleX(.72); } } @keyframes triageHubPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); } 38% { box-shadow: 0 0 28px rgba(200,64,26,.24), inset 0 0 0 1px rgba(224,85,48,.24); } } @keyframes intakeOutputReceive { 0%, 40%, 100% { opacity: .20; transform: translateX(0); } 62% { opacity: .78; transform: translateX(6px); } } /* FM, moving work reveals blocker/queue, then path reconnects */ .flow-work-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.72); top: 56%; left: 12%; box-shadow: 0 0 14px rgba(224,85,48,.26); animation: flowWorkTravels 6.2s ease-in-out infinite; } .flow-work-dot.wd2 { animation-delay: .55s; opacity: .8; } .flow-work-dot.wd3 { animation-delay: 1.1s; opacity: .65; } .flow-blocker { left: 50%; top: 43%; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(224,85,48,.42); background: rgba(200,64,26,.035); transform: rotate(45deg); opacity: 0; animation: blockerAppears 6.2s ease-in-out infinite; } .flow-resolution { left: 55%; top: 60%; width: 28%; height: 2px; background: linear-gradient(90deg, rgba(88,205,210,.28), rgba(224,85,48,.52), transparent); transform-origin: left center; opacity: 0; animation: flowReconnects 6.2s ease-in-out infinite; } @keyframes flowWorkTravels { 0% { opacity: 0; transform: translateX(0); } 18% { opacity: 1; transform: translateX(8rem); } 38% { opacity: .75; transform: translateX(17rem); } 58% { opacity: .35; transform: translateX(17rem); } 78% { opacity: .95; transform: translateX(29rem); } 100% { opacity: 0; transform: translateX(38rem); } } @keyframes blockerAppears { 0%, 24%, 84%, 100% { opacity: 0; transform: rotate(45deg) scale(.7); } 38%, 62% { opacity: .80; transform: rotate(45deg) scale(1); } } @keyframes flowReconnects { 0%, 52%, 100% { opacity: 0; transform: scaleX(.12); } 70% { opacity: .82; transform: scaleX(1); } } /* DRM, decision token searches authority and locks into owner */ .decision-level { left: 12% !important; right: 18% !important; height: 2.3rem !important; } .decision-token { width: 10px; height: 10px; border-radius: 50%; background: rgba(224,85,48,.72); right: 12%; top: 28%; box-shadow: 0 0 16px rgba(224,85,48,.28); animation: decisionTokenSearch 6.2s ease-in-out infinite; } .decision-token.dt2 { animation-delay: .45s; opacity: .6; } .decision-token.dt3 { animation-delay: .9s; opacity: .4; } .decision-owner { right: 7%; top: 67%; color: rgba(240,235,227,.70); border: 1px solid rgba(224,85,48,.36); padding: .55rem .75rem; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; animation: ownerResolves 6.2s ease-in-out infinite; } @keyframes decisionTokenSearch { 0% { opacity: 0; transform: translate(-16rem, -1.2rem); } 20% { opacity: .78; transform: translate(-10rem, -1.2rem); } 40% { opacity: .78; transform: translate(-7rem, 1.9rem); } 62% { opacity: .95; transform: translate(-3rem, 5.0rem); } 78% { opacity: .30; transform: translate(0, 5.0rem); } 100% { opacity: 0; transform: translate(0, 5.0rem); } } @keyframes ownerResolves { 0%, 52%, 100% { opacity: 0; transform: translateY(4px); } 70% { opacity: .90; transform: translateY(0); box-shadow: 0 0 18px rgba(200,64,26,.18); } } /* ORD, conversations convert into stable cadence line */ .rhythm-thread { left: 10%; width: 28%; height: 1px; background: linear-gradient(90deg, rgba(154,142,130,.14), rgba(224,85,48,.42), transparent); animation: rhythmConversationToCadence 6.8s ease-in-out infinite; } .rhythm-thread.rt1 { top: 30%; transform: rotate(8deg); } .rhythm-thread.rt2 { top: 50%; transform: rotate(-4deg); animation-delay: .25s; } .rhythm-thread.rt3 { top: 70%; transform: rotate(5deg); animation-delay: .50s; } .rhythm-cadence { left: 42%; right: 10%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(224,85,48,.64) 0 4px, transparent 4px 24px); opacity: 0; animation: rhythmCadenceAppears 6.8s ease-in-out infinite; } @keyframes rhythmConversationToCadence { 0%, 100% { opacity: .14; transform: scaleX(.25); } 34% { opacity: .70; transform: scaleX(1); } 62% { opacity: .18; transform: scaleX(.45); } } @keyframes rhythmCadenceAppears { 0%, 38%, 100% { opacity: 0; transform: scaleX(.20); } 60% { opacity: .88; transform: scaleX(1); } 78% { opacity: .42; transform: scaleX(1); } } /* MASF, metrics are found, mapped to signal, then tied to decision */ .signal-source { width: 7rem; height: 1.7rem; border: 1px solid rgba(154,142,130,.12); left: 9%; opacity: .32; animation: metricSourceFound 6.0s ease-in-out infinite; } .signal-source.ss1 { top: 24%; } .signal-source.ss2 { top: 64%; animation-delay: .35s; } .signal-mapline { left: 25%; width: 42%; height: 2px; background: linear-gradient(90deg, rgba(224,85,48,.62), rgba(88,205,210,.20), transparent); transform-origin: left center; opacity: 0; animation: metricMapsToSignal 6.0s ease-in-out infinite; } .signal-mapline.sm1 { top: 34%; transform: rotate(12deg); } .signal-mapline.sm2 { top: 62%; transform: rotate(-10deg); animation-delay: .25s; } .signal-decision { right: 8%; top: 42%; border: 1px solid rgba(224,85,48,.38); color: rgba(240,235,227,.70); padding: .6rem .8rem; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; animation: metricDecisionLights 6.0s ease-in-out infinite; } @keyframes metricSourceFound { 0%, 100% { opacity: .12; transform: translateX(0); } 30% { opacity: .70; transform: translateX(4px); } 62% { opacity: .34; transform: translateX(8px); } } @keyframes metricMapsToSignal { 0%, 26%, 100% { opacity: 0; transform-origin: left center; } 46% { opacity: .78; } 68% { opacity: .36; } } @keyframes metricDecisionLights { 0%, 48%, 100% { opacity: 0; transform: translateY(4px); } 70% { opacity: .86; transform: translateY(0); box-shadow: 0 0 18px rgba(200,64,26,.18); } } /* IB, foggy stack becomes ordered and next action identified */ .backlog-fog { left: 14%; top: 28%; width: 62%; height: 5rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(154,142,130,.10), transparent 74%); filter: blur(14px); animation: backlogFogClears 6.4s ease-in-out infinite; } .backlog-selected { left: 56%; top: 64%; width: 28%; height: 2.3rem; border: 1px solid rgba(224,85,48,.58); opacity: 0; animation: backlogSelected 6.4s ease-in-out infinite; } .backlog-next { right: 9%; top: 66%; color: rgba(240,235,227,.72); font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; animation: backlogNextLabel 6.4s ease-in-out infinite; } @keyframes backlogFogClears { 0%, 100% { opacity: .42; transform: scale(1.05); } 48% { opacity: .14; transform: scale(.82); } } @keyframes backlogSelected { 0%, 44%, 100% { opacity: 0; transform: translateX(-12px); } 64% { opacity: .90; transform: translateX(0); box-shadow: 0 0 22px rgba(200,64,26,.18); } } @keyframes backlogNextLabel { 0%, 58%, 100% { opacity: 0; transform: translateX(-6px); } 74% { opacity: .85; transform: translateX(0); } } @media(max-width:768px) { .artifact-ghost-preview { display: none !important; } .flow-work-dot, .decision-token { animation-duration: 7.5s !important; } .blueprint-schematic { height: 14rem !important; } } /* METHOD V29: ESD sine-signal diagnosis story */ /* Remove the pulsing orange node and the straight repair line for ESD */ .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis .diag-line, .artifact-visual-diagnosis .diag-break, .artifact-visual-diagnosis .diag-fix, .artifact-visual-diagnosis::before { display: none !important; animation: none !important; } .diag-sine-field { position: absolute; left: 6%; right: 6%; top: 22%; width: 88%; height: 58%; overflow: visible; opacity: .96; filter: none; } .diag-sine-signal, .diag-listen-sweep { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .diag-symptom-wave { stroke: rgba(88,205,210,.32); stroke-width: 2.4; stroke-dasharray: 1200; stroke-dashoffset: 0; opacity: 0; animation: esdSymptomDistortion 7.6s ease-in-out infinite; } .diag-origin-wave { stroke: rgba(224,85,48,.58); stroke-width: 2.2; stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: 0; animation: esdOriginTrace 7.6s ease-in-out infinite; } .diag-repair-wave { stroke: rgba(240,235,227,.22); stroke-width: 1.6; stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: 0; animation: esdRepairStabilizes 7.6s ease-in-out infinite; } .diag-listen-sweep { stroke: rgba(224,85,48,.72); stroke-width: 3; stroke-dasharray: 110 940; stroke-dashoffset: 0; opacity: 0; animation: esdListenBackwards 7.6s cubic-bezier(.37,0,.63,1) infinite; } .diag-symptom { right: 6% !important; top: 42% !important; animation: esdSymptomLabel 7.6s ease-in-out infinite !important; } .diag-origin { left: 6% !important; top: 42% !important; animation: esdOriginLabel 7.6s ease-in-out infinite !important; } .artifact-visual-diagnosis::after { content: ''; position: absolute; left: 12%; right: 12%; top: 52%; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.14), rgba(88,205,210,.08), rgba(224,85,48,.10)); opacity: .36; } @keyframes esdSymptomDistortion { 0%, 8% { opacity: 0; stroke-dashoffset: 0; transform: translateX(0) scaleY(.88); } 18% { opacity: .82; transform: translateX(0) scaleY(1.18); } 38% { opacity: .70; transform: translateX(-8px) scaleY(.92); } 54% { opacity: .28; transform: translateX(-18px) scaleY(.62); } 74%, 100% { opacity: 0; transform: translateX(-24px) scaleY(.46); } } @keyframes esdListenBackwards { 0%, 16% { opacity: 0; stroke-dashoffset: 0; } 28% { opacity: .88; } 55% { opacity: .88; stroke-dashoffset: -760; } 70%, 100% { opacity: 0; stroke-dashoffset: -1040; } } @keyframes esdOriginTrace { 0%, 28% { opacity: 0; stroke-dashoffset: 1200; } 42% { opacity: .30; } 62% { opacity: .82; stroke-dashoffset: 0; } 78% { opacity: .42; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: -180; } } @keyframes esdRepairStabilizes { 0%, 48% { opacity: 0; stroke-dashoffset: 1200; } 64% { opacity: .22; } 80% { opacity: .62; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: -120; } } @keyframes esdSymptomLabel { 0%, 100% { opacity: .34; border-color: rgba(200,64,26,.18); } 20% { opacity: .86; border-color: rgba(88,205,210,.32); box-shadow: 0 0 16px rgba(88,205,210,.10); } 58% { opacity: .32; border-color: rgba(200,64,26,.14); } } @keyframes esdOriginLabel { 0%, 28%, 100% { opacity: .44; box-shadow: 0 0 0 rgba(200,64,26,0); } 62% { opacity: 1; box-shadow: 0 0 26px rgba(200,64,26,.30); } 80% { opacity: .72; } } @media(max-width:768px) { .diag-sine-field { left: 2%; width: 96%; top: 24%; } .diag-symptom, .diag-origin { font-size: .48rem !important; } .diag-listen-sweep { stroke-width: 2.2; } } @media (prefers-reduced-motion: reduce) { .diag-sine-signal, .diag-listen-sweep, .diag-symptom, .diag-origin { animation: none !important; } } /* METHOD V30: Rebuild all remaining artifact visuals as distinct story systems */ /* Hide the older generic shape sets for these artifact types */ .artifact-visual-intake > .intake-path, .artifact-visual-intake > .intake-output, .artifact-visual-intake > .intake-signal, .artifact-visual-intake > .intake-gate, .artifact-visual-flow > .flow-node, .artifact-visual-flow > .flow-path, .artifact-visual-flow > .flow-queue, .artifact-visual-flow > .flow-work-dot, .artifact-visual-flow > .flow-blocker, .artifact-visual-flow > .flow-resolution, .artifact-visual-decision > .decision-level, .artifact-visual-decision > .decision-route, .artifact-visual-decision > .decision-token, .artifact-visual-decision > .decision-owner, .artifact-visual-rhythm > .rhythm-ring, .artifact-visual-rhythm > .rhythm-beat, .artifact-visual-rhythm > .rhythm-thread, .artifact-visual-rhythm > .rhythm-cadence, .artifact-visual-signals > .signal-baseline, .artifact-visual-signals > .signal-wave, .artifact-visual-signals > .signal-threshold, .artifact-visual-signals > .signal-source, .artifact-visual-signals > .signal-mapline, .artifact-visual-signals > .signal-decision, .artifact-visual-backlog > .backlog-card, .artifact-visual-backlog > .backlog-priority, .artifact-visual-backlog > .backlog-fog, .artifact-visual-backlog > .backlog-selected, .artifact-visual-backlog > .backlog-next { display: none !important; animation: none !important; } .wim-story-svg, .fm-story-svg, .drm-story-svg, .ord-story-svg, .masf-story-svg, .ib-story-svg { position: absolute; inset: 8% 6%; width: 88%; height: 74%; overflow: visible; } .wim-wave, .wim-output, .fm-ghost-path, .fm-clean-path, .fm-blocker, .drm-band, .drm-scan, .drm-route, .ord-cadence-rail, .ord-pulse-line, .masf-raw, .masf-threshold, .masf-signal, .ib-priority-axis, .ib-sort-arrow { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } /* WIM story */ .wim-wave { stroke: rgba(88,205,210,.30); stroke-width: 2; stroke-dasharray: 520; stroke-dashoffset: 520; opacity: 0; animation: wimInputsArrive 7s ease-in-out infinite; } .wim-wave.in-b { animation-delay: .25s; stroke: rgba(224,85,48,.42); } .wim-wave.in-c { animation-delay: .50s; stroke: rgba(154,142,130,.24); } .wim-aperture { fill: rgba(7,5,3,.28); stroke: rgba(224,85,48,.44); stroke-width: 1.5; opacity: .28; animation: wimApertureListens 7s ease-in-out infinite; } .wim-output { stroke: rgba(224,85,48,.56); stroke-width: 2; stroke-dasharray: 430; stroke-dashoffset: 430; opacity: 0; animation: wimOutputsRoute 7s ease-in-out infinite; } .wim-output.defer { stroke: rgba(88,205,210,.30); animation-delay: .18s; } .wim-output.reject { stroke: rgba(154,142,130,.26); animation-delay: .36s; } .wim-label { right: 4%; font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,235,227,.50); opacity: 0; animation: wimLabels 7s ease-in-out infinite; } .wim-label.accept { top: 25%; } .wim-label.defer { top: 48%; animation-delay: .18s; } .wim-label.reject { top: 70%; animation-delay: .36s; } @keyframes wimInputsArrive { 0%, 10% { opacity: 0; stroke-dashoffset: 520; } 28% { opacity: .78; stroke-dashoffset: 0; } 45% { opacity: .36; } 72%, 100% { opacity: 0; } } @keyframes wimApertureListens { 0%, 18%, 100% { opacity: .22; transform: scale(.9); transform-origin: 51.5% 50%; } 38% { opacity: .90; transform: scale(1.12); } 58% { opacity: .46; transform: scale(1); } } @keyframes wimOutputsRoute { 0%, 38% { opacity: 0; stroke-dashoffset: 430; } 55% { opacity: .76; stroke-dashoffset: 0; } 76% { opacity: .40; } 100% { opacity: 0; } } @keyframes wimLabels { 0%, 48%, 100% { opacity: 0; transform: translateX(-4px); } 62% { opacity: .75; transform: translateX(0); } } /* Flow Map story */ .fm-ghost-path { stroke: rgba(154,142,130,.16); stroke-width: 1.2; stroke-dasharray: 12 18; opacity: .42; } .fm-clean-path { stroke: rgba(224,85,48,.58); stroke-width: 2.4; stroke-dasharray: 1100; stroke-dashoffset: 1100; opacity: 0; animation: fmMapRedraws 7.4s ease-in-out infinite; } .fm-queue { fill: none; stroke: rgba(88,205,210,.18); stroke-width: 1; opacity: 0; animation: fmQueueAppears 7.4s ease-in-out infinite; } .fm-blocker { stroke: rgba(224,85,48,.64); stroke-width: 2; opacity: 0; animation: fmBlockerAppears 7.4s ease-in-out infinite; } .fm-work-packet { fill: rgba(224,85,48,.72); opacity: 0; animation: fmPacketTravels 7.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(224,85,48,.22)); } .fm-label { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(154,142,130,.48); opacity: .58; } .fm-label.request { left: 4%; bottom: 9%; } .fm-label.queue { left: 42%; bottom: 9%; color: rgba(88,205,210,.42); } .fm-label.done { right: 4%; bottom: 9%; } @keyframes fmPacketTravels { 0% { opacity: 0; transform: translateX(0); } 18% { opacity: 1; transform: translateX(250px); } 36% { opacity: .90; transform: translateX(410px); } 48% { opacity: .28; transform: translateX(410px); } 70% { opacity: 1; transform: translateX(760px); } 100% { opacity: 0; transform: translateX(940px); } } @keyframes fmQueueAppears { 0%, 24%, 100% { opacity: 0; } 38%, 60% { opacity: .80; } } @keyframes fmBlockerAppears { 0%, 30%, 82%, 100% { opacity: 0; transform: scale(.7); transform-origin: 60% 50%; } 44%, 62% { opacity: .85; transform: scale(1); } } @keyframes fmMapRedraws { 0%, 52% { opacity: 0; stroke-dashoffset: 1100; } 70% { opacity: .86; stroke-dashoffset: 0; } 88% { opacity: .40; } 100% { opacity: 0; stroke-dashoffset: -140; } } /* DRM story */ .drm-band { stroke: rgba(154,142,130,.14); stroke-width: 8; opacity: .48; } .drm-band.band-lead { stroke: rgba(200,64,26,.22); animation: drmAuthorityAnswers 6.8s ease-in-out infinite; } .drm-scan { stroke: rgba(88,205,210,.20); stroke-width: 2; stroke-dasharray: 170; stroke-dashoffset: 170; opacity: 0; animation: drmScanLevels 6.8s ease-in-out infinite; } .drm-route { stroke: rgba(224,85,48,.60); stroke-width: 2.2; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: 0; animation: drmRouteLocks 6.8s ease-in-out infinite; } .drm-token { fill: rgba(224,85,48,.72); opacity: 0; animation: drmTokenMoves 6.8s ease-in-out infinite; } .drm-lock { fill: none; stroke: rgba(224,85,48,.58); stroke-width: 2; opacity: 0; animation: drmLockAppears 6.8s ease-in-out infinite; } .drm-label, .drm-owner { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(154,142,130,.50); } .drm-label.team { left: 4%; top: 21%; } .drm-label.lead { left: 4%; top: 48%; color: rgba(224,85,48,.58); } .drm-label.exec { left: 4%; top: 75%; } .drm-owner { right: 4%; top: 45%; opacity: 0; animation: drmOwnerLabel 6.8s ease-in-out infinite; } @keyframes drmScanLevels { 0%, 12% { opacity: 0; stroke-dashoffset: 170; transform: translateY(-70px); } 34% { opacity: .82; stroke-dashoffset: 0; transform: translateY(0); } 54% { opacity: .48; transform: translateY(62px); } 100% { opacity: 0; transform: translateY(62px); } } @keyframes drmRouteLocks { 0%, 32% { opacity: 0; stroke-dashoffset: 900; } 54% { opacity: .80; stroke-dashoffset: 0; } 76% { opacity: .42; } 100% { opacity: 0; stroke-dashoffset: -120; } } @keyframes drmTokenMoves { 0%, 18% { opacity: 0; transform: translate(0,0); } 34% { opacity: 1; transform: translate(180px, 72px); } 56% { opacity: 1; transform: translate(520px, 65px); } 76% { opacity: .24; transform: translate(640px, 65px); } 100% { opacity: 0; transform: translate(640px, 65px); } } @keyframes drmAuthorityAnswers { 0%, 100% { opacity: .38; } 50% { opacity: .92; filter: drop-shadow(0 0 10px rgba(224,85,48,.14)); } } @keyframes drmLockAppears { 0%, 54%, 100% { opacity: 0; transform: scale(.6); transform-origin: 82% 50%; } 70% { opacity: .92; transform: scale(1); } } @keyframes drmOwnerLabel { 0%, 54%, 100% { opacity: 0; } 72% { opacity: .80; } } /* ORD story */ .ord-cadence-rail { stroke: rgba(154,142,130,.16); stroke-width: 1.5; } .ord-chaos { fill: rgba(154,142,130,.36); animation: ordChaosAligns 7s ease-in-out infinite; } .ord-chaos.c2 { animation-delay: .2s; } .ord-chaos.c3 { animation-delay: .4s; } .ord-chaos.c4 { animation-delay: .6s; } .ord-beat { fill: rgba(224,85,48,.76); opacity: 0; animation: ordBeatCadence 7s ease-in-out infinite; } .ord-beat.b2 { animation-delay: .22s; } .ord-beat.b3 { animation-delay: .44s; } .ord-beat.b4 { animation-delay: .66s; } .ord-pulse-line { stroke: rgba(224,85,48,.48); stroke-width: 2; stroke-dasharray: 140 720; stroke-dashoffset: 720; opacity: 0; animation: ordCadenceTravels 7s ease-in-out infinite; } .ord-label { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(154,142,130,.48); } .ord-label.before { left: 5%; top: 18%; } .ord-label.after { right: 5%; top: 18%; color: rgba(224,85,48,.58); } @keyframes ordChaosAligns { 0%, 100% { opacity: .58; } 44% { opacity: .28; transform: translateY(0); } 64% { opacity: 0; transform: translateY(24px); } } @keyframes ordBeatCadence { 0%, 42% { opacity: 0; transform: scale(.6); } 56% { opacity: 1; transform: scale(1.22); } 76% { opacity: .62; transform: scale(.9); } 100% { opacity: 0; transform: scale(.6); } } @keyframes ordCadenceTravels { 0%, 48% { opacity: 0; stroke-dashoffset: 720; } 64% { opacity: .76; stroke-dashoffset: 160; } 86% { opacity: .38; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: -160; } } /* MASF story */ .masf-raw { stroke: rgba(154,142,130,.22); stroke-width: 1.4; opacity: .38; } .masf-raw.raw-two { stroke: rgba(224,85,48,.52); stroke-width: 2.2; animation: masfMeaningfulSignal 6.6s ease-in-out infinite; } .masf-threshold { stroke: rgba(224,85,48,.40); stroke-width: 1.4; stroke-dasharray: 8 10; opacity: 0; animation: masfThresholdAppears 6.6s ease-in-out infinite; } .masf-signal { stroke: rgba(224,85,48,.62); stroke-width: 2.4; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: 0; animation: masfSignalMaps 6.6s ease-in-out infinite; } .masf-detection { fill: none; stroke: rgba(88,205,210,.40); stroke-width: 2; opacity: 0; animation: masfDetectionPulse 6.6s ease-in-out infinite; } .masf-label { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(154,142,130,.48); } .masf-label.raw { left: 5%; bottom: 10%; } .masf-label.trigger { left: 50%; bottom: 10%; color: rgba(224,85,48,.58); } .masf-label.decision { right: 5%; bottom: 10%; } @keyframes masfMeaningfulSignal { 0%, 100% { opacity: .22; transform: scaleY(.75); } 38% { opacity: .88; transform: scaleY(1.15); } 62% { opacity: .58; transform: scaleY(.90); } } @keyframes masfThresholdAppears { 0%, 24%, 100% { opacity: 0; } 42%, 72% { opacity: .80; } } @keyframes masfSignalMaps { 0%, 42% { opacity: 0; stroke-dashoffset: 900; } 62% { opacity: .82; stroke-dashoffset: 0; } 84% { opacity: .36; } 100% { opacity: 0; stroke-dashoffset: -120; } } @keyframes masfDetectionPulse { 0%, 28%, 100% { opacity: 0; transform: scale(.6); transform-origin: 62% 42%; } 46% { opacity: .90; transform: scale(1.25); } 68% { opacity: .36; transform: scale(1); } } /* IB story */ .ib-item { fill: rgba(7,5,3,.38); stroke: rgba(200,64,26,.25); stroke-width: 1.2; opacity: 0; } .ib-item.fogged { animation: ibFoggedPile 7s ease-in-out infinite; } .ib-item.ordered { stroke: rgba(224,85,48,.48); animation: ibOrderedStack 7s ease-in-out infinite; } .ib-priority-axis { stroke: rgba(88,205,210,.26); stroke-width: 2; opacity: 0; animation: ibPriorityAxis 7s ease-in-out infinite; } .ib-sort-arrow { stroke: rgba(224,85,48,.54); stroke-width: 2; stroke-dasharray: 360; stroke-dashoffset: 360; opacity: 0; animation: ibSortArrow 7s ease-in-out infinite; } .ib-label { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(154,142,130,.48); } .ib-label.unclear { left: 7%; bottom: 10%; } .ib-label.ordered { right: 6%; bottom: 10%; color: rgba(224,85,48,.58); } @keyframes ibFoggedPile { 0%, 100% { opacity: .22; transform: translate(0,0); } 28% { opacity: .62; transform: translate(-8px, 4px); } 56% { opacity: .16; transform: translate(18px, 0); } } @keyframes ibOrderedStack { 0%, 42% { opacity: 0; transform: translateX(-18px); } 62% { opacity: .82; transform: translateX(0); } 86% { opacity: .48; } 100% { opacity: 0; } } @keyframes ibPriorityAxis { 0%, 46%, 100% { opacity: 0; transform: scaleY(.20); transform-origin: top center; } 64% { opacity: .80; transform: scaleY(1); } } @keyframes ibSortArrow { 0%, 34% { opacity: 0; stroke-dashoffset: 360; } 58% { opacity: .80; stroke-dashoffset: 0; } 84% { opacity: .34; } 100% { opacity: 0; stroke-dashoffset: -80; } } @media(max-width:768px) { .wim-story-svg, .fm-story-svg, .drm-story-svg, .ord-story-svg, .masf-story-svg, .ib-story-svg { inset: 10% 2%; width: 96%; } .wim-label, .fm-label, .drm-label, .drm-owner, .ord-label, .masf-label, .ib-label { font-size: .44rem; } } @media (prefers-reduced-motion: reduce) { .wim-story-svg *, .fm-story-svg *, .drm-story-svg *, .ord-story-svg *, .masf-story-svg *, .ib-story-svg *, .wim-label, .fm-label, .drm-label, .drm-owner, .ord-label, .masf-label, .ib-label { animation: none !important; } } /* METHOD V31: Flow Map active queue story */ .artifact-visual-flow .fm-blocker, .artifact-visual-flow .flow-blocker { display: none !important; animation: none !important; } .artifact-visual-flow .fm-queue { stroke: rgba(88,205,210,.22) !important; fill: rgba(88,205,210,.025) !important; animation: fmQueueBreath 7.4s ease-in-out infinite !important; } .fm-queue-orb, .fm-release-orb, .fm-request-orb { position: absolute; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; } .fm-queue-orb { left: 43%; background: rgba(88,205,210,.68); box-shadow: 0 0 12px rgba(88,205,210,.26), 0 0 22px rgba(88,205,210,.08); animation: fmQueueOrbPulse 7.4s ease-in-out infinite; } .fm-queue-orb.qo1 { top: 41%; animation-delay: 0s; } .fm-queue-orb.qo2 { top: 49%; animation-delay: .18s; } .fm-queue-orb.qo3 { top: 57%; animation-delay: .36s; } .fm-queue-orb.qo4 { top: 65%; animation-delay: .54s; } .fm-request-orb { left: 8%; top: 53%; background: rgba(224,85,48,.80); box-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 26px rgba(224,85,48,.10); opacity: 0; animation: fmRequestEntersQueue 7.4s ease-in-out infinite; } .fm-release-orb { left: 43%; top: 49%; background: rgba(88,205,210,.78); box-shadow: 0 0 14px rgba(88,205,210,.32), 0 0 26px rgba(224,85,48,.08); opacity: 0; animation: fmBlueOrbReleasesToDone 7.4s ease-in-out infinite; } .artifact-visual-flow .fm-clean-path { stroke: rgba(224,85,48,.50) !important; animation: fmMapRedrawsQueue 7.4s ease-in-out infinite !important; } .artifact-visual-flow .fm-work-packet { display: none !important; animation: none !important; } @keyframes fmQueueBreath { 0%, 100% { opacity: .18; } 32% { opacity: .76; } 58% { opacity: .46; } } @keyframes fmQueueOrbPulse { 0%, 100% { opacity: .34; transform: translateX(0) scale(.84); } 28% { opacity: .88; transform: translateX(0) scale(1.08); } 48% { opacity: .56; transform: translateX(4px) scale(.94); } 72% { opacity: .42; transform: translateX(-2px) scale(.86); } } @keyframes fmRequestEntersQueue { 0% { opacity: 0; transform: translateX(0) scale(.8); } 14% { opacity: 1; transform: translateX(8rem) scale(1); } 30% { opacity: 1; transform: translateX(18rem) scale(1.06); } 44% { opacity: .20; transform: translateX(26rem) scale(.82); } 54%, 100% { opacity: 0; transform: translateX(26rem) scale(.6); } } @keyframes fmBlueOrbReleasesToDone { 0%, 38% { opacity: 0; transform: translate(0, 0) scale(.72); } 46% { opacity: 1; transform: translate(0, 0) scale(1.12); } 64% { opacity: 1; transform: translate(15rem, -1.1rem) scale(1); } 82% { opacity: .84; transform: translate(29rem, -3rem) scale(.92); } 100% { opacity: 0; transform: translate(39rem, -4.4rem) scale(.72); } } @keyframes fmMapRedrawsQueue { 0%, 48% { opacity: 0; stroke-dashoffset: 1100; } 66% { opacity: .72; stroke-dashoffset: 0; } 88% { opacity: .34; } 100% { opacity: 0; stroke-dashoffset: -140; } } @media(max-width:768px) { .fm-queue-orb, .fm-release-orb, .fm-request-orb { width: 7px; height: 7px; } .fm-queue-orb { left: 42%; } .fm-release-orb { left: 42%; } } @media (prefers-reduced-motion: reduce) { .fm-queue-orb, .fm-release-orb, .fm-request-orb, .artifact-visual-flow .fm-queue, .artifact-visual-flow .fm-clean-path { animation: none !important; } } /* METHOD V32: smoother Flow Map orb motion and organic artifact switching */ /* Flow Map: replace jumpy easing with constant-rate movement */ .fm-request-orb { animation: fmRequestEntersQueueLinear 7.8s linear infinite !important; will-change: transform, opacity; } .fm-release-orb { animation: fmBlueOrbReleasesLinear 7.8s linear infinite !important; will-change: transform, opacity; } .fm-queue-orb { animation: fmQueueOrbBreathLinear 7.8s linear infinite !important; } .artifact-visual-flow .fm-clean-path { animation: fmMapRedrawsLinear 7.8s linear infinite !important; } .artifact-visual-flow .fm-queue { animation: fmQueueBreathLinear 7.8s linear infinite !important; } @keyframes fmRequestEntersQueueLinear { 0% { opacity: 0; transform: translateX(0) scale(.82); } 8% { opacity: 1; transform: translateX(5.2rem) scale(.96); } 18% { opacity: 1; transform: translateX(11.7rem) scale(1); } 28% { opacity: 1; transform: translateX(18.2rem) scale(1); } 38% { opacity: .72; transform: translateX(24.7rem) scale(.92); } 44% { opacity: 0; transform: translateX(28.6rem) scale(.72); } 100% { opacity: 0; transform: translateX(28.6rem) scale(.72); } } @keyframes fmBlueOrbReleasesLinear { 0%, 42% { opacity: 0; transform: translate(0, 0) scale(.76); } 48% { opacity: 1; transform: translate(4.8rem, -.55rem) scale(1.04); } 56% { opacity: 1; transform: translate(11.2rem, -1.25rem) scale(1); } 64% { opacity: 1; transform: translate(17.6rem, -1.95rem) scale(.98); } 72% { opacity: .92; transform: translate(24rem, -2.65rem) scale(.94); } 82% { opacity: .62; transform: translate(32rem, -3.55rem) scale(.88); } 92% { opacity: 0; transform: translate(40rem, -4.45rem) scale(.76); } 100% { opacity: 0; transform: translate(40rem, -4.45rem) scale(.76); } } @keyframes fmQueueOrbBreathLinear { 0%, 100% { opacity: .38; transform: translateX(0) scale(.86); } 18% { opacity: .72; transform: translateX(0) scale(.98); } 38% { opacity: .88; transform: translateX(2px) scale(1.05); } 50% { opacity: .52; transform: translateX(6px) scale(.92); } 72% { opacity: .42; transform: translateX(0) scale(.86); } } @keyframes fmQueueBreathLinear { 0%, 100% { opacity: .22; } 22% { opacity: .54; } 42% { opacity: .76; } 62% { opacity: .48; } } @keyframes fmMapRedrawsLinear { 0%, 54% { opacity: 0; stroke-dashoffset: 1100; } 68% { opacity: .72; stroke-dashoffset: 520; } 82% { opacity: .72; stroke-dashoffset: 0; } 94% { opacity: .22; stroke-dashoffset: -80; } 100% { opacity: 0; stroke-dashoffset: -140; } } /* Softer switching for the large artifact blueprint panel */ .artifact-blueprint-panel { transition: border-color .9s ease, background .9s ease, box-shadow .9s ease, transform .9s cubic-bezier(.22,1,.36,1), opacity .9s ease !important; } .blueprint-code, .artifact-blueprint-panel h3, .artifact-blueprint-panel p, .blueprint-status { transition: opacity .72s ease, transform .82s cubic-bezier(.22,1,.36,1), color .72s ease, text-shadow .82s ease !important; } .artifact-blueprint-panel.is-changing { transform: scale(.992); opacity: .90; } .artifact-blueprint-panel.is-changing .blueprint-code, .artifact-blueprint-panel.is-changing h3, .artifact-blueprint-panel.is-changing p, .artifact-blueprint-panel.is-changing .blueprint-status { opacity: 0 !important; transform: translateY(12px) scale(.985) !important; } .artifact-visual { transition: opacity .95s ease, transform 1.05s cubic-bezier(.22,1,.36,1), filter .95s ease !important; transform: translateY(14px) scale(.985); filter: blur(.35px); } .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis, .artifact-blueprint-panel[data-blueprint-kind="intake"] .artifact-visual-intake, .artifact-blueprint-panel[data-blueprint-kind="flow"] .artifact-visual-flow, .artifact-blueprint-panel[data-blueprint-kind="decision"] .artifact-visual-decision, .artifact-blueprint-panel[data-blueprint-kind="rhythm"] .artifact-visual-rhythm, .artifact-blueprint-panel[data-blueprint-kind="signals"] .artifact-visual-signals, .artifact-blueprint-panel[data-blueprint-kind="improvement"] .artifact-visual-backlog { opacity: 1 !important; transform: translateY(0) scale(1) !important; filter: blur(0); } .artifact-selector-row { transition: background .65s ease, transform .7s cubic-bezier(.22,1,.36,1), color .65s ease, opacity .65s ease !important; } .artifact-selector-row::before, .artifact-selector-row::after { transition: opacity .65s ease, transform .82s cubic-bezier(.22,1,.36,1) !important; } @media(max-width:768px) { .artifact-blueprint-panel.is-changing { transform: scale(.996); } .artifact-visual { transition-duration: .72s !important; } } @media (prefers-reduced-motion: reduce) { .fm-request-orb, .fm-release-orb, .fm-queue-orb, .artifact-visual-flow .fm-clean-path, .artifact-visual-flow .fm-queue { animation: none !important; } .artifact-blueprint-panel, .blueprint-code, .artifact-blueprint-panel h3, .artifact-blueprint-panel p, .blueprint-status, .artifact-visual { transition: none !important; } } /* METHOD V33: Flow Map orbs follow sine-signal paths from varied origins to varied exits */ .fm-sine-guide { fill: none; stroke: rgba(88,205,210,.12); stroke-width: 1.2; stroke-dasharray: 10 18; vector-effect: non-scaling-stroke; opacity: .34; animation: fmSineGuideBreathe 9.8s ease-in-out infinite; } .fm-sine-guide.guide-in-low, .fm-sine-guide.guide-out-low { stroke: rgba(200,64,26,.10); animation-delay: 1.2s; } .fm-request-orb, .fm-release-orb { left: 0 !important; top: 0 !important; offset-rotate: 0deg; transform: none !important; } .fm-request-orb { offset-path: path("M40 62 C120 24 190 106 270 68 S430 30 505 128"); animation: fmRequestSineVaried 10.8s linear infinite !important; } .fm-release-orb { offset-path: path("M505 128 C610 190 710 190 815 150 S930 132 970 188"); animation: fmReleaseSineVaried 10.8s linear infinite !important; } .fm-request-orb::after, .fm-release-orb::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: fmOrbRing 10.8s ease-in-out infinite; } .fm-request-orb { color: rgba(224,85,48,.52); } .fm-release-orb { color: rgba(88,205,210,.52); } .artifact-visual-flow .fm-clean-path { opacity: .30; stroke: rgba(224,85,48,.34) !important; } .artifact-visual-flow .fm-ghost-path { opacity: .28; } .fm-queue-orb { animation: fmQueueOrbCompression 10.8s ease-in-out infinite !important; } .fm-queue-orb.qo1 { animation-delay: 0s !important; } .fm-queue-orb.qo2 { animation-delay: .18s !important; } .fm-queue-orb.qo3 { animation-delay: .36s !important; } .fm-queue-orb.qo4 { animation-delay: .54s !important; } @keyframes fmRequestSineVaried { 0% { opacity: 0; offset-path: path("M40 62 C120 24 190 106 270 68 S430 30 505 128"); offset-distance: 0%; scale: .78; } 6% { opacity: 1; offset-distance: 8%; scale: .92; } 24% { opacity: 1; offset-distance: 52%; scale: 1; } 40% { opacity: .82; offset-distance: 100%; scale: .92; } 46% { opacity: 0; offset-distance: 100%; scale: .66; } 49% { opacity: 0; offset-path: path("M40 190 C120 226 190 146 270 184 S430 222 505 128"); offset-distance: 0%; scale: .78; } 55% { opacity: 1; offset-distance: 8%; scale: .92; } 73% { opacity: 1; offset-distance: 52%; scale: 1; } 89% { opacity: .82; offset-distance: 100%; scale: .92; } 95%, 100% { opacity: 0; offset-distance: 100%; scale: .66; } } @keyframes fmReleaseSineVaried { 0%, 42% { opacity: 0; offset-path: path("M505 128 C610 190 710 190 815 150 S930 132 970 188"); offset-distance: 0%; scale: .74; } 48% { opacity: 1; offset-distance: 6%; scale: 1.08; } 64% { opacity: 1; offset-distance: 48%; scale: 1; } 82% { opacity: .80; offset-distance: 100%; scale: .86; } 88% { opacity: 0; offset-distance: 100%; scale: .68; } 89% { opacity: 0; offset-path: path("M505 128 C610 62 710 62 815 102 S930 122 970 70"); offset-distance: 0%; scale: .74; } 93% { opacity: 1; offset-distance: 18%; scale: 1; } 98% { opacity: .72; offset-distance: 78%; scale: .90; } 100% { opacity: 0; offset-distance: 100%; scale: .68; } } @keyframes fmQueueOrbCompression { 0%, 100% { opacity: .36; transform: translateX(0) scale(.86); } 22% { opacity: .78; transform: translateX(0) scale(1); } 40% { opacity: .94; transform: translateX(5px) scale(1.08); } 50% { opacity: .58; transform: translateX(11px) scale(.88); } 68% { opacity: .46; transform: translateX(3px) scale(.84); } } @keyframes fmOrbRing { 0%, 42%, 100% { opacity: 0; transform: scale(.4); } 49% { opacity: .36; transform: scale(1); } 62% { opacity: 0; transform: scale(1.7); } } @keyframes fmSineGuideBreathe { 0%, 100% { opacity: .16; stroke-dashoffset: 0; } 44% { opacity: .42; stroke-dashoffset: -70; } } @media(max-width:768px) { .fm-sine-guide { opacity: .22; } } @media (prefers-reduced-motion: reduce) { .fm-sine-guide, .fm-request-orb, .fm-release-orb, .fm-request-orb::after, .fm-release-orb::after, .fm-queue-orb { animation: none !important; } } /* METHOD V34: Flow Map queue as active orbital field, smooth intake/release */ /* The blue queue is now a contained active field, not loose queued dots outside */ .fm-queue-orb { display: none !important; animation: none !important; } .artifact-visual-flow .fm-queue { fill: rgba(88,205,210,.055) !important; stroke: rgba(88,205,210,.30) !important; stroke-width: 1.4 !important; opacity: 1 !important; animation: fmQueueFieldBreath 9.6s ease-in-out infinite !important; } .fm-queue-electron { position: absolute; left: 43%; top: 54%; width: 6px; height: 6px; border-radius: 50%; background: rgba(88,205,210,.78); box-shadow: 0 0 10px rgba(88,205,210,.32), 0 0 18px rgba(88,205,210,.10); opacity: 0; transform-origin: 26px 12px; animation: fmQueueElectronOrbit 9.6s linear infinite; } .fm-queue-electron.e1 { animation-delay: 0s; } .fm-queue-electron.e2 { animation-delay: -1.9s; transform-origin: 20px -12px; } .fm-queue-electron.e3 { animation-delay: -3.8s; transform-origin: -24px 10px; } .fm-queue-electron.e4 { animation-delay: -5.7s; transform-origin: -18px -14px; } .fm-queue-electron.e5 { animation-delay: -7.6s; transform-origin: 8px 20px; } .fm-request-orb, .fm-release-orb, .fm-queue-convert { position: absolute; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; left: 0 !important; top: 0 !important; offset-rotate: 0deg; will-change: offset-distance, opacity, transform; } .fm-request-orb { background: rgba(224,85,48,.84); box-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 24px rgba(224,85,48,.10); offset-path: path("M40 62 C120 24 190 106 270 68 S430 30 505 128"); animation: fmOrangeEntersQueueSmooth 9.6s linear infinite !important; } .fm-queue-convert { background: rgba(88,205,210,.86); box-shadow: 0 0 16px rgba(88,205,210,.38), 0 0 26px rgba(224,85,48,.08); left: 50% !important; top: 51% !important; opacity: 0; transform: translate(-50%, -50%) scale(.72); animation: fmOrangeBecomesBlue 9.6s ease-in-out infinite; } .fm-release-orb { background: rgba(88,205,210,.82); box-shadow: 0 0 14px rgba(88,205,210,.32), 0 0 24px rgba(224,85,48,.08); offset-path: path("M505 128 C610 122 710 122 815 116 S930 108 1040 102"); animation: fmBlueExitsQueueSmooth 9.6s linear infinite !important; } .fm-request-orb::after, .fm-release-orb::after { display: none !important; } .fm-sine-guide.guide-out-low, .fm-sine-guide.guide-out-top { opacity: .22; } .artifact-visual-flow .fm-clean-path { animation: fmMapRedrawsQueueSmooth 9.6s linear infinite !important; stroke: rgba(224,85,48,.38) !important; } @keyframes fmQueueFieldBreath { 0%, 100% { opacity: .34; filter: drop-shadow(0 0 0 rgba(88,205,210,0)); } 36% { opacity: .92; filter: drop-shadow(0 0 10px rgba(88,205,210,.12)); } 58% { opacity: .70; } } @keyframes fmQueueElectronOrbit { 0%, 18%, 100% { opacity: 0; transform: rotate(0deg) translateX(18px) scale(.72); } 26% { opacity: .45; } 54% { opacity: .86; transform: rotate(190deg) translateX(18px) scale(1); } 82% { opacity: .36; transform: rotate(360deg) translateX(18px) scale(.80); } } @keyframes fmOrangeEntersQueueSmooth { 0% { opacity: 0; offset-distance: 0%; transform: scale(.80); } 7% { opacity: 1; offset-distance: 12%; transform: scale(.95); } 22% { opacity: 1; offset-distance: 42%; transform: scale(1); } 36% { opacity: 1; offset-distance: 72%; transform: scale(.96); } 48% { opacity: .86; offset-distance: 94%; transform: scale(.82); } 54% { opacity: 0; offset-distance: 100%; transform: scale(.58); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.58); } } @keyframes fmOrangeBecomesBlue { 0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(.48); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 66% { opacity: .78; transform: translate(-50%, -50%) scale(.90); } 74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.54); } } @keyframes fmBlueExitsQueueSmooth { 0%, 56% { opacity: 0; offset-distance: 0%; transform: scale(.78); } 62% { opacity: 1; offset-distance: 10%; transform: scale(1); } 76% { opacity: 1; offset-distance: 48%; transform: scale(.98); } 92% { opacity: .72; offset-distance: 92%; transform: scale(.88); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.78); } } @keyframes fmMapRedrawsQueueSmooth { 0%, 58% { opacity: 0; stroke-dashoffset: 1100; } 72% { opacity: .68; stroke-dashoffset: 520; } 88% { opacity: .54; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: -120; } } @media(max-width:768px) { .fm-queue-electron { width: 5px; height: 5px; } .fm-request-orb, .fm-release-orb, .fm-queue-convert { width: 7px; height: 7px; } } @media (prefers-reduced-motion: reduce) { .fm-queue-electron, .fm-request-orb, .fm-release-orb, .fm-queue-convert, .artifact-visual-flow .fm-queue, .artifact-visual-flow .fm-clean-path { animation: none !important; } } /* METHOD V35: Flow Map sine trails, no straight orange beam, single release node */ /* Remove the straight orange/clean-path beam and old path overlays inside Flow Map */ .artifact-visual-flow .fm-clean-path, .artifact-visual-flow .fm-ghost-path, .artifact-visual-flow .flow-path, .artifact-visual-flow .flow-resolution { display: none !important; animation: none !important; opacity: 0 !important; } .fm-orb-sine-trail { position: absolute; inset: 8% 6%; width: 88%; height: 74%; overflow: visible; pointer-events: none; opacity: .95; } .fm-trail { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 900; stroke-dashoffset: 0; opacity: 0; } .fm-trail.request-trail { stroke: rgba(224,85,48,.58); stroke-width: 2; animation: fmRequestSineTrail 9.6s linear infinite; filter: drop-shadow(0 0 8px rgba(224,85,48,.10)); } .fm-trail.release-trail { stroke: rgba(88,205,210,.48); stroke-width: 2; animation: fmReleaseSineTrail 9.6s linear infinite; filter: drop-shadow(0 0 8px rgba(88,205,210,.12)); } /* Hide duplicate lingering blue exit artifacts; only release orb should exit */ .artifact-visual-flow .flow-work-dot, .artifact-visual-flow .fm-work-packet, .artifact-visual-flow .flow-node, .artifact-visual-flow .fm-release-orb::before { display: none !important; animation: none !important; } .fm-release-orb { opacity: 0; offset-path: path("M505 128 C610 122 710 122 815 116 S930 108 1040 102") !important; animation: fmBlueExitsWithTrail 9.6s linear infinite !important; } .fm-request-orb { animation: fmOrangeEntersWithTrail 9.6s linear infinite !important; } .fm-queue-convert { animation: fmOrangeBecomesBlueSingle 9.6s ease-in-out infinite !important; } /* More blue orbital particles inside the queue box */ .fm-queue-electron { opacity: 0; animation: fmQueueElectronOrbitMore 9.6s linear infinite !important; } .fm-queue-electron.e1 { animation-delay: 0s !important; transform-origin: 26px 12px; } .fm-queue-electron.e2 { animation-delay: -1.2s !important; transform-origin: 20px -12px; } .fm-queue-electron.e3 { animation-delay: -2.4s !important; transform-origin: -24px 10px; } .fm-queue-electron.e4 { animation-delay: -3.6s !important; transform-origin: -18px -14px; } .fm-queue-electron.e5 { animation-delay: -4.8s !important; transform-origin: 8px 20px; } .fm-queue-electron.e6 { animation-delay: -6.0s !important; transform-origin: 30px -4px; } .fm-queue-electron.e7 { animation-delay: -7.2s !important; transform-origin: -30px 4px; } .fm-queue-electron.e8 { animation-delay: -8.4s !important; transform-origin: 0px -22px; } @keyframes fmOrangeEntersWithTrail { 0% { opacity: 0; offset-distance: 0%; transform: scale(.80); } 7% { opacity: 1; offset-distance: 12%; transform: scale(.95); } 22% { opacity: 1; offset-distance: 42%; transform: scale(1); } 38% { opacity: .92; offset-distance: 78%; transform: scale(.94); } 50% { opacity: .42; offset-distance: 98%; transform: scale(.74); } 56% { opacity: 0; offset-distance: 100%; transform: scale(.52); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.52); } } @keyframes fmBlueExitsWithTrail { 0%, 58% { opacity: 0; offset-distance: 0%; transform: scale(.76); } 64% { opacity: 1; offset-distance: 10%; transform: scale(1); } 76% { opacity: 1; offset-distance: 46%; transform: scale(.98); } 91% { opacity: .78; offset-distance: 90%; transform: scale(.88); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.74); } } @keyframes fmOrangeBecomesBlueSingle { 0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(.48); } 56% { opacity: .92; transform: translate(-50%, -50%) scale(1.08); } 62% { opacity: .48; transform: translate(-50%, -50%) scale(.86); } 67%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.50); } } @keyframes fmRequestSineTrail { 0%, 5% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 16% { opacity: .56; stroke-dasharray: 90 900; stroke-dashoffset: 0; } 34% { opacity: .64; stroke-dasharray: 190 900; stroke-dashoffset: -130; } 52% { opacity: .12; stroke-dasharray: 120 900; stroke-dashoffset: -420; } 62%, 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -560; } } @keyframes fmReleaseSineTrail { 0%, 58% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 68% { opacity: .58; stroke-dasharray: 100 900; stroke-dashoffset: 0; } 84% { opacity: .62; stroke-dasharray: 210 900; stroke-dashoffset: -160; } 96% { opacity: .16; stroke-dasharray: 130 900; stroke-dashoffset: -420; } 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -560; } } @keyframes fmQueueElectronOrbitMore { 0%, 100% { opacity: .12; transform: rotate(0deg) translateX(16px) scale(.58); } 20% { opacity: .38; } 48% { opacity: .86; transform: rotate(190deg) translateX(18px) scale(1); } 78% { opacity: .40; transform: rotate(360deg) translateX(16px) scale(.76); } } @media(max-width:768px) { .fm-orb-sine-trail { inset: 10% 2%; width: 96%; } } @media (prefers-reduced-motion: reduce) { .fm-trail, .fm-request-orb, .fm-release-orb, .fm-queue-convert, .fm-queue-electron { animation: none !important; } } /* METHOD V36: smooth trace navigation */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* METHOD V37: locked artifact selection and cleaner Flow Map wake behavior */ /* When a product is clicked, lock the active state on desktop */ .artifact-foundry.is-artifact-locked .artifact-selector-row:not(.is-active) { opacity: .58; } .artifact-foundry.is-artifact-locked .artifact-selector-row.is-active { opacity: 1; } .artifact-foundry.is-artifact-locked .artifact-selector-row.is-active::before { opacity: 1; transform: scaleY(1); } /* Flow Map cleanup: hide duplicate static blue nodes and keep only queue field + one release orb */ .artifact-visual-flow .fm-work-packet, .artifact-visual-flow .flow-work-dot, .artifact-visual-flow .flow-node, .artifact-visual-flow .fm-release-orb-static, .artifact-visual-flow .fm-release-node, .artifact-visual-flow .fm-node, .artifact-visual-flow circle:not(.fm-release-orb):not(.fm-request-orb):not(.fm-queue-convert), .artifact-visual-flow .fm-story-svg .fm-work-packet, .artifact-visual-flow .fm-story-svg circle.fm-work-packet { display: none !important; animation: none !important; opacity: 0 !important; } /* Sine guides stay atmospheric */ .fm-sine-guide { opacity: .24 !important; } /* Use one request orb and one release orb, both on smooth sine paths */ .fm-request-orb, .fm-release-orb { left: 0 !important; top: 0 !important; offset-rotate: 0deg; will-change: offset-distance, opacity, transform; } .fm-request-orb { offset-path: path("M40 48 C120 14 190 108 270 66 S420 36 505 128") !important; animation: fmRequestVariedSineWake 12s linear infinite !important; } .fm-release-orb { offset-path: path("M505 128 C610 86 720 172 830 118 S960 82 1080 116") !important; animation: fmSingleBlueReleaseWake 12s linear infinite !important; } /* Convert pulse stays inside the queue only */ .fm-queue-convert { left: 50% !important; top: 51% !important; animation: fmQueueConversionPulseSingle 12s ease-in-out infinite !important; } /* Replace disconnected trail timing with wake-behind timing */ .fm-trail.request-trail { stroke: rgba(224,85,48,.58); stroke-width: 2; stroke-dasharray: 120 900; animation: fmRequestWakeBehind 12s linear infinite !important; } .fm-trail.release-trail { stroke: rgba(88,205,210,.52); stroke-width: 2; stroke-dasharray: 120 900; animation: fmReleaseWakeBehind 12s linear infinite !important; } /* More sine-like release path in the visible SVG guide */ .fm-orb-sine-trail .release-trail { d: path("M505 128 C610 86 720 172 830 118 S960 82 1080 116"); } .fm-orb-sine-trail .request-trail { d: path("M40 48 C120 14 190 108 270 66 S420 36 505 128"); } .fm-queue-electron { animation-duration: 12s !important; } @keyframes fmRequestVariedSineWake { 0% { opacity: 0; offset-path: path("M40 48 C120 14 190 108 270 66 S420 36 505 128"); offset-distance: 0%; transform: scale(.78); } 5% { opacity: 1; offset-distance: 6%; transform: scale(.92); } 20% { opacity: 1; offset-distance: 36%; transform: scale(1); } 36% { opacity: .94; offset-distance: 76%; transform: scale(.94); } 48% { opacity: .40; offset-distance: 98%; transform: scale(.72); } 54% { opacity: 0; offset-distance: 100%; transform: scale(.52); } /* second cycle, lower Y-origin */ 55% { opacity: 0; offset-path: path("M40 196 C120 232 190 140 270 186 S420 218 505 128"); offset-distance: 0%; transform: scale(.78); } 60% { opacity: 1; offset-distance: 6%; transform: scale(.92); } 75% { opacity: 1; offset-distance: 36%; transform: scale(1); } 90% { opacity: .94; offset-distance: 76%; transform: scale(.94); } 98% { opacity: .20; offset-distance: 98%; transform: scale(.66); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.52); } } @keyframes fmSingleBlueReleaseWake { 0%, 54% { opacity: 0; offset-distance: 0%; transform: scale(.76); } 60% { opacity: 1; offset-distance: 8%; transform: scale(1); } 72% { opacity: 1; offset-distance: 38%; transform: scale(.98); } 88% { opacity: .80; offset-distance: 82%; transform: scale(.88); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.70); } } @keyframes fmQueueConversionPulseSingle { 0%, 47% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 55% { opacity: .96; transform: translate(-50%, -50%) scale(1.08); } 61% { opacity: .50; transform: translate(-50%, -50%) scale(.84); } 66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.50); } } /* Wake trails: dash offset lags behind the orb, so it feels like a trail rather than a beam */ @keyframes fmRequestWakeBehind { 0%, 4% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 12% { opacity: .44; stroke-dasharray: 70 900; stroke-dashoffset: -8; } 28% { opacity: .66; stroke-dasharray: 125 900; stroke-dashoffset: -112; } 44% { opacity: .28; stroke-dasharray: 105 900; stroke-dashoffset: -360; } 55% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } 56%, 59% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 67% { opacity: .42; stroke-dasharray: 70 900; stroke-dashoffset: -8; } 83% { opacity: .64; stroke-dasharray: 125 900; stroke-dashoffset: -112; } 97% { opacity: .22; stroke-dasharray: 105 900; stroke-dashoffset: -360; } 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } } @keyframes fmReleaseWakeBehind { 0%, 58% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 66% { opacity: .46; stroke-dasharray: 70 900; stroke-dashoffset: -10; } 78% { opacity: .66; stroke-dasharray: 130 900; stroke-dashoffset: -130; } 94% { opacity: .26; stroke-dasharray: 115 900; stroke-dashoffset: -420; } 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -620; } } @media(max-width:768px) { .fm-trail.request-trail, .fm-trail.release-trail { stroke-width: 1.5; } } @media (prefers-reduced-motion: reduce) { .fm-request-orb, .fm-release-orb, .fm-queue-convert, .fm-trail { animation: none !important; } } /* METHOD V38: lock artifact selection on all devices */ .artifact-foundry.is-artifact-locked .artifact-selector-row:not(.is-active) { opacity: .56; } .artifact-foundry.is-artifact-locked .artifact-selector-row.is-active { opacity: 1; } .artifact-selector-row { touch-action: manipulation; } @media(max-width:900px) { .artifact-foundry.is-artifact-locked .artifact-selector-row:not(.is-active) { opacity: .72; } } /* METHOD V39: Flow Map without sine-wave visuals */ /* Remove all Flow Map sine guides and sine wake visuals */ .artifact-visual-flow .fm-sine-guide, .artifact-visual-flow .fm-orb-sine-trail, .artifact-visual-flow .fm-trail, .artifact-visual-flow .guide-in-top, .artifact-visual-flow .guide-in-low, .artifact-visual-flow .guide-out-top, .artifact-visual-flow .guide-out-low { display: none !important; animation: none !important; opacity: 0 !important; } /* Keep the queue as the centerpiece */ .artifact-visual-flow .fm-queue { display: block !important; fill: rgba(88,205,210,.055) !important; stroke: rgba(88,205,210,.32) !important; stroke-width: 1.4 !important; opacity: 1 !important; animation: fmQueueFieldBreathNoSine 9s ease-in-out infinite !important; } .fm-queue-electron { display: block !important; opacity: 0; animation: fmQueueElectronOrbitNoSine 9s linear infinite !important; } .fm-queue-electron.e1 { animation-delay: 0s !important; } .fm-queue-electron.e2 { animation-delay: -1.1s !important; } .fm-queue-electron.e3 { animation-delay: -2.2s !important; } .fm-queue-electron.e4 { animation-delay: -3.3s !important; } .fm-queue-electron.e5 { animation-delay: -4.4s !important; } .fm-queue-electron.e6 { animation-delay: -5.5s !important; } .fm-queue-electron.e7 { animation-delay: -6.6s !important; } .fm-queue-electron.e8 { animation-delay: -7.7s !important; } /* Request and release now use clean flow motion, not signal waves */ .fm-request-orb, .fm-release-orb, .fm-queue-convert { position: absolute; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; left: 0 !important; top: 0 !important; offset-rotate: 0deg; will-change: offset-distance, opacity, transform; } .fm-request-orb { background: rgba(224,85,48,.84); box-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 24px rgba(224,85,48,.10); offset-path: path("M60 128 C170 128 270 128 372 128 C425 128 462 128 505 128") !important; animation: fmRequestEntersCleanQueue 8.8s cubic-bezier(.32,0,.68,1) infinite !important; } .fm-release-orb { background: rgba(88,205,210,.84); box-shadow: 0 0 14px rgba(88,205,210,.32), 0 0 24px rgba(88,205,210,.10); offset-path: path("M505 128 C610 128 735 128 870 128 C970 128 1030 128 1080 128") !important; animation: fmBlueExitsCleanQueue 8.8s linear infinite !important; } .fm-queue-convert { background: rgba(88,205,210,.88); box-shadow: 0 0 16px rgba(88,205,210,.38), 0 0 26px rgba(224,85,48,.08); left: 50% !important; top: 51% !important; opacity: 0; transform: translate(-50%, -50%) scale(.72); animation: fmQueueConversionClean 8.8s ease-in-out infinite !important; } /* Replace sine trail with a restrained, short intake/release wake that is straight and local */ .artifact-visual-flow::before, .artifact-visual-flow::after { content: ''; position: absolute; height: 2px; pointer-events: none; transform-origin: left center; opacity: 0; } .artifact-visual-flow::before { left: 11%; top: 50%; width: 38%; background: linear-gradient(90deg, transparent, rgba(224,85,48,.55), rgba(224,85,48,.18), transparent); animation: fmCleanRequestWake 8.8s ease-in-out infinite; } .artifact-visual-flow::after { left: 51%; top: 50%; width: 43%; background: linear-gradient(90deg, transparent, rgba(88,205,210,.46), rgba(88,205,210,.16), transparent); animation: fmCleanReleaseWake 8.8s ease-in-out infinite; } .fm-label.queue { color: rgba(88,205,210,.52) !important; } .fm-label.done { color: rgba(240,235,227,.52) !important; } @keyframes fmQueueFieldBreathNoSine { 0%, 100% { opacity: .38; filter: drop-shadow(0 0 0 rgba(88,205,210,0)); } 34% { opacity: .94; filter: drop-shadow(0 0 10px rgba(88,205,210,.12)); } 58% { opacity: .66; } } @keyframes fmQueueElectronOrbitNoSine { 0%, 100% { opacity: .14; transform: rotate(0deg) translateX(16px) scale(.58); } 24% { opacity: .44; } 50% { opacity: .88; transform: rotate(190deg) translateX(18px) scale(1); } 78% { opacity: .38; transform: rotate(360deg) translateX(16px) scale(.76); } } @keyframes fmRequestEntersCleanQueue { 0% { opacity: 0; offset-distance: 0%; transform: scale(.80); } 8% { opacity: 1; offset-distance: 12%; transform: scale(.96); } 28% { opacity: 1; offset-distance: 58%; transform: scale(1); } 44% { opacity: .84; offset-distance: 92%; transform: scale(.86); } 52% { opacity: 0; offset-distance: 100%; transform: scale(.52); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.52); } } @keyframes fmQueueConversionClean { 0%, 46% { opacity: 0; transform: translate(-50%, -50%) scale(.44); } 54% { opacity: .96; transform: translate(-50%, -50%) scale(1.12); } 62% { opacity: .46; transform: translate(-50%, -50%) scale(.82); } 68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.50); } } @keyframes fmBlueExitsCleanQueue { 0%, 58% { opacity: 0; offset-distance: 0%; transform: scale(.76); } 64% { opacity: 1; offset-distance: 8%; transform: scale(1); } 76% { opacity: 1; offset-distance: 44%; transform: scale(.98); } 92% { opacity: .74; offset-distance: 88%; transform: scale(.86); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.72); } } @keyframes fmCleanRequestWake { 0%, 6% { opacity: 0; transform: scaleX(.12); } 18% { opacity: .56; transform: scaleX(.42); } 36% { opacity: .46; transform: scaleX(1); } 52%, 100% { opacity: 0; transform: scaleX(.22); } } @keyframes fmCleanReleaseWake { 0%, 58% { opacity: 0; transform: scaleX(.12); } 70% { opacity: .50; transform: scaleX(.48); } 88% { opacity: .42; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.20); } } @media(max-width:768px) { .fm-request-orb, .fm-release-orb, .fm-queue-convert { width: 7px; height: 7px; } } @media (prefers-reduced-motion: reduce) { .fm-request-orb, .fm-release-orb, .fm-queue-convert, .fm-queue-electron, .artifact-visual-flow::before, .artifact-visual-flow::after, .artifact-visual-flow .fm-queue { animation: none !important; } } /* METHOD V40: Flow Map, five inputs into organized blue chain */ /* Replace single-request story with multiple inputs converging */ .fm-request-orb, .fm-release-orb, .fm-queue-convert { display: none !important; animation: none !important; } .fm-input-orb, .fm-blue-chain { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; will-change: transform, opacity; } .fm-input-orb { background: rgba(224,85,48,.84); box-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 24px rgba(224,85,48,.10); opacity: 0; } .fm-input-orb.input-one { left: 6%; top: 22%; animation: fmInputOneToQueue 9.4s cubic-bezier(.32,0,.68,1) infinite; } .fm-input-orb.input-two { left: 9%; top: 48%; animation: fmInputTwoToQueue 9.4s cubic-bezier(.32,0,.68,1) infinite .18s; } .fm-input-orb.input-three { left: 6%; top: 74%; animation: fmInputThreeToQueue 9.4s cubic-bezier(.32,0,.68,1) infinite .36s; } .fm-input-orb.input-four { left: 24%; top: 18%; animation: fmInputFourToQueue 9.4s cubic-bezier(.32,0,.68,1) infinite .54s; } .fm-input-orb.input-five { left: 24%; top: 80%; animation: fmInputFiveToQueue 9.4s cubic-bezier(.32,0,.68,1) infinite .72s; } .artifact-visual-flow .fm-queue { fill: rgba(88,205,210,.070) !important; stroke: rgba(88,205,210,.36) !important; animation: fmQueueAbsorbsInputs 9.4s ease-in-out infinite !important; } .fm-queue-electron { animation-duration: 9.4s !important; } .fm-blue-chain { background: rgba(88,205,210,.84); box-shadow: 0 0 14px rgba(88,205,210,.32), 0 0 24px rgba(88,205,210,.10); left: 53%; top: 50%; opacity: 0; animation: fmBlueAssemblyLine 9.4s linear infinite; } .fm-blue-chain.chain-one { animation-delay: 5.1s; } .fm-blue-chain.chain-two { animation-delay: 5.55s; } .fm-blue-chain.chain-three { animation-delay: 6.0s; } .fm-blue-chain.chain-four { animation-delay: 6.45s; } .fm-blue-chain.chain-five { animation-delay: 6.9s; } .artifact-visual-flow::before { left: 10% !important; top: 50% !important; width: 41% !important; background: linear-gradient(90deg, transparent, rgba(224,85,48,.34), rgba(224,85,48,.10), transparent) !important; animation: fmInputConvergenceWake 9.4s ease-in-out infinite !important; } .artifact-visual-flow::after { left: 53% !important; top: 50% !important; width: 43% !important; background: repeating-linear-gradient(90deg, rgba(88,205,210,.44) 0 10px, transparent 10px 28px) !important; animation: fmBlueChainWake 9.4s ease-in-out infinite !important; } .fm-label.request { color: rgba(224,85,48,.54) !important; } .fm-label.queue { color: rgba(88,205,210,.60) !important; } .fm-label.done { color: rgba(240,235,227,.58) !important; } @keyframes fmInputOneToQueue { 0%, 100% { opacity: 0; transform: translate(0,0) scale(.72); } 8% { opacity: .95; transform: translate(3rem, .8rem) scale(.92); } 26% { opacity: .95; transform: translate(12rem, 3.4rem) scale(1); } 42% { opacity: .35; transform: translate(21rem, 5.3rem) scale(.68); } 48% { opacity: 0; transform: translate(23rem, 5.8rem) scale(.42); } } @keyframes fmInputTwoToQueue { 0%, 100% { opacity: 0; transform: translate(0,0) scale(.72); } 8% { opacity: .95; transform: translate(4rem, 0) scale(.92); } 26% { opacity: .95; transform: translate(13rem, .2rem) scale(1); } 42% { opacity: .35; transform: translate(22rem, .4rem) scale(.68); } 48% { opacity: 0; transform: translate(24rem, .4rem) scale(.42); } } @keyframes fmInputThreeToQueue { 0%, 100% { opacity: 0; transform: translate(0,0) scale(.72); } 8% { opacity: .95; transform: translate(3rem, -.8rem) scale(.92); } 26% { opacity: .95; transform: translate(12rem, -3.4rem) scale(1); } 42% { opacity: .35; transform: translate(21rem, -5.3rem) scale(.68); } 48% { opacity: 0; transform: translate(23rem, -5.8rem) scale(.42); } } @keyframes fmInputFourToQueue { 0%, 100% { opacity: 0; transform: translate(0,0) scale(.72); } 8% { opacity: .82; transform: translate(1.6rem, 1.2rem) scale(.88); } 26% { opacity: .82; transform: translate(7.5rem, 4.8rem) scale(.96); } 42% { opacity: .26; transform: translate(13rem, 6.7rem) scale(.60); } 48% { opacity: 0; transform: translate(14rem, 7rem) scale(.38); } } @keyframes fmInputFiveToQueue { 0%, 100% { opacity: 0; transform: translate(0,0) scale(.72); } 8% { opacity: .82; transform: translate(1.6rem, -1.2rem) scale(.88); } 26% { opacity: .82; transform: translate(7.5rem, -4.8rem) scale(.96); } 42% { opacity: .26; transform: translate(13rem, -6.7rem) scale(.60); } 48% { opacity: 0; transform: translate(14rem, -7rem) scale(.38); } } @keyframes fmQueueAbsorbsInputs { 0%, 100% { opacity: .36; filter: drop-shadow(0 0 0 rgba(88,205,210,0)); } 30% { opacity: .98; filter: drop-shadow(0 0 14px rgba(88,205,210,.16)); } 52% { opacity: .78; } 76% { opacity: .54; } } @keyframes fmBlueAssemblyLine { 0%, 8% { opacity: 0; transform: translateX(0) scale(.72); } 16% { opacity: 1; transform: translateX(3.4rem) scale(1); } 38% { opacity: 1; transform: translateX(13rem) scale(1); } 70% { opacity: .82; transform: translateX(27rem) scale(.92); } 100% { opacity: 0; transform: translateX(40rem) scale(.72); } } @keyframes fmInputConvergenceWake { 0%, 6% { opacity: 0; transform: scaleX(.12); } 20% { opacity: .56; transform: scaleX(.70); } 44% { opacity: .28; transform: scaleX(1); } 58%, 100% { opacity: 0; transform: scaleX(.22); } } @keyframes fmBlueChainWake { 0%, 52% { opacity: 0; transform: scaleX(.12); } 66% { opacity: .52; transform: scaleX(.52); } 84% { opacity: .42; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.20); } } @media(max-width:768px) { .fm-input-orb, .fm-blue-chain { width: 7px; height: 7px; } } @media (prefers-reduced-motion: reduce) { .fm-input-orb, .fm-blue-chain, .artifact-visual-flow::before, .artifact-visual-flow::after, .artifact-visual-flow .fm-queue { animation: none !important; } } /* METHOD V41: Flow Map, steady varied intake and organized varied output */ /* Keep the intake stream consistent, but let each input have its own size and speed */ .fm-input-orb { opacity: 0; will-change: transform, opacity; } .fm-input-orb.input-one { width: 7px; height: 7px; animation: fmInputOneSteady 10.8s linear infinite !important; } .fm-input-orb.input-two { width: 10px; height: 10px; animation: fmInputTwoSteady 12.2s linear infinite !important; animation-delay: -2.2s !important; } .fm-input-orb.input-three { width: 8px; height: 8px; animation: fmInputThreeSteady 11.4s linear infinite !important; animation-delay: -4.1s !important; } .fm-input-orb.input-four { width: 6px; height: 6px; animation: fmInputFourSteady 13.0s linear infinite !important; animation-delay: -6.0s !important; } .fm-input-orb.input-five { width: 9px; height: 9px; animation: fmInputFiveSteady 12.7s linear infinite !important; animation-delay: -8.1s !important; } /* Queue reacts steadily instead of with one big surge */ .artifact-visual-flow .fm-queue { animation: fmQueueSteadyProcessing 10.8s ease-in-out infinite !important; } /* Organized output line, but varied orb sizes and very slight timing offsets */ .fm-blue-chain { opacity: 0; will-change: transform, opacity; animation: fmBlueAssemblyLineSteady 9.8s linear infinite !important; } .fm-blue-chain.chain-one { width: 7px; height: 7px; animation-delay: 4.9s !important; } .fm-blue-chain.chain-two { width: 10px; height: 10px; animation-delay: 5.55s !important; } .fm-blue-chain.chain-three { width: 8px; height: 8px; animation-delay: 6.20s !important; } .fm-blue-chain.chain-four { width: 6px; height: 6px; animation-delay: 6.85s !important; } .fm-blue-chain.chain-five { width: 9px; height: 9px; animation-delay: 7.50s !important; } .artifact-visual-flow::before { animation: fmInputConvergenceWakeSteady 10.8s ease-in-out infinite !important; opacity: .42; } .artifact-visual-flow::after { animation: fmBlueChainWakeSteady 9.8s ease-in-out infinite !important; } @keyframes fmInputOneSteady { 0% { opacity: 0; transform: translate(0,0) scale(.72); } 10% { opacity: .90; transform: translate(4.8rem, 1.25rem) scale(.92); } 36% { opacity: .90; transform: translate(14rem, 4rem) scale(1); } 62% { opacity: .48; transform: translate(22.5rem, 5.65rem) scale(.74); } 74% { opacity: 0; transform: translate(24rem, 5.9rem) scale(.50); } 100% { opacity: 0; transform: translate(24rem, 5.9rem) scale(.50); } } @keyframes fmInputTwoSteady { 0% { opacity: 0; transform: translate(0,0) scale(.72); } 10% { opacity: .92; transform: translate(5.2rem, 0) scale(.92); } 36% { opacity: .92; transform: translate(14.4rem, .25rem) scale(1); } 62% { opacity: .50; transform: translate(23.2rem, .42rem) scale(.74); } 74% { opacity: 0; transform: translate(24.6rem, .42rem) scale(.50); } 100% { opacity: 0; transform: translate(24.6rem, .42rem) scale(.50); } } @keyframes fmInputThreeSteady { 0% { opacity: 0; transform: translate(0,0) scale(.72); } 10% { opacity: .88; transform: translate(4.8rem, -1.25rem) scale(.92); } 36% { opacity: .88; transform: translate(14rem, -4rem) scale(1); } 62% { opacity: .46; transform: translate(22.5rem, -5.65rem) scale(.74); } 74% { opacity: 0; transform: translate(24rem, -5.9rem) scale(.50); } 100% { opacity: 0; transform: translate(24rem, -5.9rem) scale(.50); } } @keyframes fmInputFourSteady { 0% { opacity: 0; transform: translate(0,0) scale(.70); } 12% { opacity: .78; transform: translate(2.3rem, 1.45rem) scale(.86); } 40% { opacity: .78; transform: translate(8.8rem, 5.2rem) scale(.98); } 64% { opacity: .35; transform: translate(13.8rem, 6.85rem) scale(.68); } 76% { opacity: 0; transform: translate(15rem, 7.1rem) scale(.48); } 100% { opacity: 0; transform: translate(15rem, 7.1rem) scale(.48); } } @keyframes fmInputFiveSteady { 0% { opacity: 0; transform: translate(0,0) scale(.70); } 12% { opacity: .82; transform: translate(2.3rem, -1.45rem) scale(.86); } 40% { opacity: .82; transform: translate(8.8rem, -5.2rem) scale(.98); } 64% { opacity: .38; transform: translate(13.8rem, -6.85rem) scale(.68); } 76% { opacity: 0; transform: translate(15rem, -7.1rem) scale(.48); } 100% { opacity: 0; transform: translate(15rem, -7.1rem) scale(.48); } } @keyframes fmQueueSteadyProcessing { 0%, 100% { opacity: .48; filter: drop-shadow(0 0 4px rgba(88,205,210,.04)); } 35% { opacity: .92; filter: drop-shadow(0 0 13px rgba(88,205,210,.16)); } 68% { opacity: .70; filter: drop-shadow(0 0 8px rgba(88,205,210,.08)); } } @keyframes fmBlueAssemblyLineSteady { 0%, 8% { opacity: 0; transform: translateX(0) scale(.76); } 18% { opacity: 1; transform: translateX(3.6rem) scale(1); } 46% { opacity: 1; transform: translateX(15.8rem) scale(1); } 74% { opacity: .84; transform: translateX(28.5rem) scale(.94); } 100% { opacity: 0; transform: translateX(40rem) scale(.74); } } @keyframes fmInputConvergenceWakeSteady { 0%, 10% { opacity: 0; transform: scaleX(.16); } 34% { opacity: .42; transform: scaleX(.78); } 62% { opacity: .24; transform: scaleX(1); } 82%, 100% { opacity: 0; transform: scaleX(.24); } } @keyframes fmBlueChainWakeSteady { 0%, 50% { opacity: 0; transform: scaleX(.14); } 66% { opacity: .48; transform: scaleX(.55); } 88% { opacity: .36; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.22); } } @media(max-width:768px) { .fm-input-orb.input-two, .fm-blue-chain.chain-two { width: 8px; height: 8px; } .fm-input-orb.input-one, .fm-input-orb.input-three, .fm-blue-chain.chain-one, .fm-blue-chain.chain-three { width: 7px; height: 7px; } .fm-input-orb.input-four, .fm-blue-chain.chain-four { width: 5px; height: 5px; } } @media (prefers-reduced-motion: reduce) { .fm-input-orb, .fm-blue-chain, .artifact-visual-flow::before, .artifact-visual-flow::after, .artifact-visual-flow .fm-queue { animation: none !important; } } /* METHOD V42: ESD Causal Stack prototype */ /* Replace ESD signal-wave story with causal stack diagnosis */ .artifact-visual-diagnosis .diag-sine-field, .artifact-visual-diagnosis .diag-sine-signal, .artifact-visual-diagnosis .diag-listen-sweep, .artifact-visual-diagnosis .diag-symptom, .artifact-visual-diagnosis .diag-origin, .artifact-visual-diagnosis .diag-break, .artifact-visual-diagnosis .diag-fix, .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis::after { display: none !important; animation: none !important; opacity: 0 !important; } .esd-causal-stack { position: absolute; inset: 7% 6% 10%; pointer-events: none; overflow: hidden; isolation: isolate; } .esd-visible-break { position: absolute; right: 5%; top: 4%; color: rgba(240,235,227,.68); border: 1px solid rgba(224,85,48,.36); background: rgba(200,64,26,.040); padding: .58rem .75rem; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.012); animation: esdVisibleBreakFlicker 7.8s ease-in-out infinite; } .esd-visible-break::before, .esd-visible-break::after { content: ''; position: absolute; right: 100%; top: 50%; width: 5.2rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.50)); transform-origin: right center; } .esd-visible-break::after { top: 66%; width: 3.4rem; opacity: .38; } .esd-stack-layer { position: absolute; left: 6%; right: 12%; height: 2.15rem; border: 1px solid rgba(255,255,255,.055); background: linear-gradient(90deg, rgba(7,5,3,.72), rgba(14,9,5,.46)), radial-gradient(ellipse 60% 140% at 18% 50%, rgba(200,64,26,.030), transparent 70%); display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: center; padding: 0 .9rem; opacity: .42; transform: translateX(0); transition: none; animation: esdLayerBase 7.8s ease-in-out infinite; } .esd-stack-layer b { color: rgba(240,235,227,.52); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; white-space: nowrap; } .esd-stack-layer i { display: block; height: 1px; background: linear-gradient(90deg, rgba(154,142,130,.16), rgba(224,85,48,.30), transparent); transform-origin: left center; opacity: .54; animation: esdLayerSignal 7.8s ease-in-out infinite; } .esd-stack-layer.layer-1 { top: 20%; animation-delay: 0s; } .esd-stack-layer.layer-2 { top: 34%; animation-delay: .18s; } .esd-stack-layer.layer-3 { top: 48%; animation-delay: .36s; } .esd-stack-layer.layer-4 { top: 62%; animation-delay: .54s; } .esd-stack-layer.layer-5 { top: 76%; animation-delay: .72s; border-color: rgba(224,85,48,.14); } .esd-stack-layer.layer-1 i { animation-delay: 0s; } .esd-stack-layer.layer-2 i { animation-delay: .18s; } .esd-stack-layer.layer-3 i { animation-delay: .36s; } .esd-stack-layer.layer-4 i { animation-delay: .54s; } .esd-stack-layer.layer-5 i { animation-delay: .72s; } .esd-scan-band { position: absolute; left: 3%; right: 9%; top: 18%; height: 2.8rem; background: linear-gradient(180deg, transparent, rgba(88,205,210,.065), rgba(224,85,48,.070), transparent); border-top: 1px solid rgba(88,205,210,.08); border-bottom: 1px solid rgba(224,85,48,.08); opacity: 0; animation: esdScanDownStack 7.8s cubic-bezier(.37,0,.63,1) infinite; mix-blend-mode: screen; } .esd-origin-lock { position: absolute; left: 8%; bottom: 1%; color: rgba(240,235,227,.72); border: 1px solid rgba(224,85,48,.42); background: rgba(200,64,26,.048); padding: .58rem .75rem; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(6px); animation: esdOriginConditionLocks 7.8s ease-in-out infinite; box-shadow: inset 0 0 0 1px rgba(255,255,255,.012); } .esd-repair-thread { position: absolute; left: 18%; top: 19%; height: 65%; width: 2px; background: linear-gradient(0deg, transparent, rgba(224,85,48,.72), rgba(88,205,210,.20), transparent); opacity: 0; transform-origin: bottom center; animation: esdRepairThreadRises 7.8s ease-in-out infinite; } .esd-repair-thread::before { content: ''; position: absolute; left: -2.4rem; right: -15rem; top: 0; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.56), rgba(88,205,210,.16), transparent); opacity: .72; } @keyframes esdVisibleBreakFlicker { 0%, 100% { opacity: .38; border-color: rgba(224,85,48,.22); } 14% { opacity: .92; border-color: rgba(224,85,48,.58); box-shadow: 0 0 18px rgba(224,85,48,.16); } 42% { opacity: .62; } 70% { opacity: .26; } } @keyframes esdLayerBase { 0%, 100% { opacity: .32; transform: translateX(0); border-color: rgba(255,255,255,.055); } 20% { opacity: .44; } 42% { opacity: .80; transform: translateX(4px); border-color: rgba(200,64,26,.20); } 66% { opacity: .54; transform: translateX(0); } } @keyframes esdLayerSignal { 0%, 100% { opacity: .18; transform: scaleX(.24); } 42% { opacity: .82; transform: scaleX(1); } 68% { opacity: .38; transform: scaleX(.72); } } @keyframes esdScanDownStack { 0%, 10% { opacity: 0; transform: translateY(0); } 20% { opacity: .50; transform: translateY(0); } 58% { opacity: .58; transform: translateY(9.8rem); } 74% { opacity: .16; transform: translateY(12.8rem); } 100% { opacity: 0; transform: translateY(12.8rem); } } @keyframes esdOriginConditionLocks { 0%, 48%, 100% { opacity: 0; transform: translateY(6px); } 62% { opacity: 1; transform: translateY(0); box-shadow: 0 0 24px rgba(224,85,48,.26); } 82% { opacity: .58; transform: translateY(0); } } @keyframes esdRepairThreadRises { 0%, 58% { opacity: 0; transform: scaleY(.12); } 70% { opacity: .88; transform: scaleY(1); } 88% { opacity: .34; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.20); } } @media(max-width:768px) { .esd-causal-stack { inset: 8% 2% 10%; } .esd-stack-layer { right: 6%; grid-template-columns: 8rem 1fr; } .esd-stack-layer b, .esd-visible-break, .esd-origin-lock { font-size: .45rem; } .esd-visible-break { right: 2%; } } @media (prefers-reduced-motion: reduce) { .esd-visible-break, .esd-stack-layer, .esd-stack-layer i, .esd-scan-band, .esd-origin-lock, .esd-repair-thread { animation: none !important; } } /* METHOD V43: ESD causal stack spacing and active diagnostic center */ .esd-causal-stack { inset: 7% 5% 10% !important; } /* Move labels out of collision and turn the stack into a left-to-right diagnostic field */ .esd-stack-layer { left: 8% !important; right: 14% !important; height: 1.85rem !important; grid-template-columns: 9.5rem 1fr !important; padding: 0 .75rem !important; overflow: hidden; } .esd-stack-layer b { font-size: .48rem !important; letter-spacing: .14em !important; color: rgba(240,235,227,.50); white-space: nowrap; } .esd-stack-layer i { background: linear-gradient(90deg, rgba(154,142,130,.10), rgba(224,85,48,.38), rgba(88,205,210,.12), transparent) !important; } .esd-stack-layer.layer-1 { top: 16% !important; } .esd-stack-layer.layer-2 { top: 29% !important; } .esd-stack-layer.layer-3 { top: 42% !important; } .esd-stack-layer.layer-4 { top: 55% !important; } .esd-stack-layer.layer-5 { top: 68% !important; } .esd-visible-break { right: 6% !important; top: 5% !important; z-index: 6; } .esd-origin-lock { left: 8% !important; bottom: 5% !important; z-index: 6; } .esd-scan-band { left: 6% !important; right: 12% !important; height: 2.25rem !important; animation: esdScanAcrossAndDown 8.6s cubic-bezier(.37,0,.63,1) infinite !important; } /* Active middle field, where diagnosis performs the work */ .esd-diagnostic-field { position: absolute; left: 24%; right: 16%; top: 12%; bottom: 18%; border: 1px solid rgba(88,205,210,.045); background: radial-gradient(ellipse 64% 52% at 58% 48%, rgba(88,205,210,.030), transparent 76%), radial-gradient(ellipse 82% 50% at 42% 44%, rgba(200,64,26,.044), transparent 78%); opacity: .62; mask-image: radial-gradient(ellipse at center, black 0%, black 56%, transparent 82%); animation: esdDiagnosticFieldBreath 8.6s ease-in-out infinite; } .esd-causal-thread { position: absolute; left: 18%; right: 14%; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.62), rgba(88,205,210,.18), rgba(224,85,48,.22), transparent); transform-origin: right center; opacity: 0; animation: esdThreadPullsBack 8.6s ease-in-out infinite; } .esd-causal-thread.thread-1 { top: 20%; animation-delay: 0s; } .esd-causal-thread.thread-2 { top: 33%; animation-delay: .16s; } .esd-causal-thread.thread-3 { top: 46%; animation-delay: .32s; } .esd-causal-thread.thread-4 { top: 59%; animation-delay: .48s; } .esd-causal-thread.thread-5 { top: 72%; animation-delay: .64s; background: linear-gradient(90deg, rgba(224,85,48,.82), rgba(88,205,210,.24), transparent); } .esd-probe-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(224,85,48,.72); box-shadow: 0 0 14px rgba(224,85,48,.28), 0 0 22px rgba(88,205,210,.08); opacity: 0; animation: esdProbeSearches 8.6s ease-in-out infinite; } .esd-probe-dot.dot-1 { left: 78%; top: 20%; animation-delay: 0s; } .esd-probe-dot.dot-2 { left: 56%; top: 46%; background: rgba(88,205,210,.62); animation-delay: .4s; } .esd-probe-dot.dot-3 { left: 24%; top: 72%; animation-delay: .8s; } .esd-repair-thread { left: 20% !important; top: 14% !important; height: 68% !important; animation: esdRepairThreadRisesBetter 8.6s ease-in-out infinite !important; } .esd-repair-thread::before { right: -36rem !important; background: linear-gradient(90deg, rgba(224,85,48,.68), rgba(88,205,210,.18), rgba(240,235,227,.08), transparent) !important; animation: esdRepairStabilizesAcross 8.6s ease-in-out infinite; } @keyframes esdScanAcrossAndDown { 0%, 10% { opacity: 0; transform: translate(0, 0); } 18% { opacity: .55; transform: translate(0, 0); } 42% { opacity: .62; transform: translate(-2rem, 6.2rem); } 62% { opacity: .50; transform: translate(-4.2rem, 11.4rem); } 78% { opacity: .12; transform: translate(-5.2rem, 13.8rem); } 100% { opacity: 0; transform: translate(-5.2rem, 13.8rem); } } @keyframes esdDiagnosticFieldBreath { 0%, 100% { opacity: .32; transform: scale(.98); } 36% { opacity: .70; transform: scale(1.02); } 70% { opacity: .48; transform: scale(1); } } @keyframes esdThreadPullsBack { 0%, 18% { opacity: 0; transform: scaleX(.08); } 36% { opacity: .74; transform: scaleX(1); } 58% { opacity: .46; transform: scaleX(.74); } 78%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes esdProbeSearches { 0%, 16% { opacity: 0; transform: translate(0,0) scale(.7); } 32% { opacity: .86; transform: translate(-7rem, 1.5rem) scale(1); } 50% { opacity: .66; transform: translate(-14rem, 3.4rem) scale(.94); } 66% { opacity: .92; transform: translate(-20rem, 5.4rem) scale(1.1); } 82%, 100% { opacity: 0; transform: translate(-22rem, 5.8rem) scale(.74); } } @keyframes esdRepairThreadRisesBetter { 0%, 60% { opacity: 0; transform: scaleY(.10); } 74% { opacity: .88; transform: scaleY(1); } 90% { opacity: .34; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.20); } } @keyframes esdRepairStabilizesAcross { 0%, 62% { opacity: 0; transform: scaleX(.10); transform-origin: left center; } 78% { opacity: .78; transform: scaleX(1); } 92% { opacity: .32; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.20); } } @media(max-width:768px) { .esd-stack-layer { left: 4% !important; right: 4% !important; grid-template-columns: 7.4rem 1fr !important; height: 1.75rem !important; } .esd-stack-layer b { font-size: .40rem !important; } .esd-diagnostic-field { left: 18%; right: 5%; } .esd-causal-thread { left: 10%; right: 4%; } .esd-visible-break { right: 4% !important; } .esd-origin-lock { left: 4% !important; } } @media (prefers-reduced-motion: reduce) { .esd-diagnostic-field, .esd-causal-thread, .esd-probe-dot, .esd-repair-thread::before { animation: none !important; } } /* METHOD V44: ESD stacked outcomes, no stray popup, no orbs */ /* Remove bottom-left popup and probe orbs */ .esd-origin-lock, .esd-probe-dot { display: none !important; animation: none !important; opacity: 0 !important; } .esd-causal-stack { inset: 7% 5% 10% !important; } .esd-stack-layer { left: 8% !important; right: 16% !important; height: 1.9rem !important; grid-template-columns: 10rem 1fr !important; padding: 0 .85rem !important; z-index: 2; } .esd-stack-layer b { font-size: .46rem !important; letter-spacing: .13em !important; } .esd-visible-break { right: 7% !important; top: 9% !important; opacity: .56; animation: esdDynamicBreakLabel 10s ease-in-out infinite !important; } /* Layer-specific diagnostic result phrases */ .esd-outcome { position: absolute; right: 6.5%; width: 16rem; color: rgba(240,235,227,.72); border: 1px solid rgba(224,85,48,.28); background: radial-gradient(ellipse 80% 130% at 12% 50%, rgba(200,64,26,.070), transparent 70%), rgba(7,5,3,.62); padding: .55rem .72rem; font-size: .52rem; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; opacity: 0; transform: translateX(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.012); z-index: 6; animation: esdOutcomeAppears 10s ease-in-out infinite; } .esd-outcome::before { content: ''; position: absolute; right: 100%; top: 50%; width: 7rem; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.40), rgba(88,205,210,.14), transparent); opacity: .72; transform-origin: right center; } .esd-outcome.outcome-1 { top: 15.5%; animation-delay: .15s; } .esd-outcome.outcome-2 { top: 28.5%; animation-delay: 1.55s; } .esd-outcome.outcome-3 { top: 41.5%; animation-delay: 2.95s; } .esd-outcome.outcome-4 { top: 54.5%; animation-delay: 4.35s; } .esd-outcome.outcome-5 { top: 67.5%; animation-delay: 5.75s; border-color: rgba(224,85,48,.48); } /* Make threads move to different Y positions and feel like each layer is being resolved */ .esd-causal-thread { left: 18% !important; right: 24% !important; height: 1px !important; opacity: 0; animation: esdLayerThreadResolve 10s ease-in-out infinite !important; } .esd-causal-thread.thread-1 { top: 19%; animation-delay: .15s !important; } .esd-causal-thread.thread-2 { top: 32%; animation-delay: 1.55s !important; } .esd-causal-thread.thread-3 { top: 45%; animation-delay: 2.95s !important; } .esd-causal-thread.thread-4 { top: 58%; animation-delay: 4.35s !important; } .esd-causal-thread.thread-5 { top: 71%; animation-delay: 5.75s !important; } .esd-stack-layer.layer-1 { animation-delay: .15s !important; } .esd-stack-layer.layer-2 { animation-delay: 1.55s !important; } .esd-stack-layer.layer-3 { animation-delay: 2.95s !important; } .esd-stack-layer.layer-4 { animation-delay: 4.35s !important; } .esd-stack-layer.layer-5 { animation-delay: 5.75s !important; } .esd-stack-layer.layer-1 i { animation-delay: .15s !important; } .esd-stack-layer.layer-2 i { animation-delay: 1.55s !important; } .esd-stack-layer.layer-3 i { animation-delay: 2.95s !important; } .esd-stack-layer.layer-4 i { animation-delay: 4.35s !important; } .esd-stack-layer.layer-5 i { animation-delay: 5.75s !important; } .esd-scan-band { animation: esdLayerScanSequence 10s cubic-bezier(.37,0,.63,1) infinite !important; } .esd-repair-thread { display: none !important; } .esd-diagnostic-field { left: 24% !important; right: 19% !important; opacity: .54; animation: esdDiagnosticFieldLayered 10s ease-in-out infinite !important; } /* Add a subtle resolving sweep across the full stack instead of a vertical repair popup */ .esd-causal-stack::after { content: ''; position: absolute; left: 10%; right: 8%; top: 76%; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.70), rgba(88,205,210,.18), rgba(240,235,227,.08), transparent); opacity: 0; transform-origin: left center; animation: esdFinalStabilizationSweep 10s ease-in-out infinite; z-index: 5; } @keyframes esdDynamicBreakLabel { 0%, 12%, 100% { opacity: .38; border-color: rgba(224,85,48,.20); } 20% { opacity: .76; border-color: rgba(224,85,48,.48); } 72% { opacity: .34; } } @keyframes esdOutcomeAppears { 0%, 10%, 100% { opacity: 0; transform: translateX(8px); } 18% { opacity: .92; transform: translateX(0); box-shadow: 0 0 18px rgba(200,64,26,.16); } 30% { opacity: .58; transform: translateX(0); } 42% { opacity: 0; transform: translateX(-4px); } } @keyframes esdLayerThreadResolve { 0%, 8%, 100% { opacity: 0; transform: scaleX(.08); transform-origin: right center; } 18% { opacity: .84; transform: scaleX(1); } 34% { opacity: .42; transform: scaleX(.74); } 46% { opacity: 0; transform: scaleX(.18); } } @keyframes esdLayerScanSequence { 0%, 8% { opacity: 0; transform: translate(0, 0); } 13% { opacity: .48; transform: translate(0, 0); } 27% { opacity: .56; transform: translate(-.8rem, 3.1rem); } 41% { opacity: .56; transform: translate(-1.6rem, 6.2rem); } 55% { opacity: .50; transform: translate(-2.4rem, 9.3rem); } 69% { opacity: .50; transform: translate(-3.2rem, 12.4rem); } 80% { opacity: .16; transform: translate(-3.8rem, 12.8rem); } 100% { opacity: 0; transform: translate(-3.8rem, 12.8rem); } } @keyframes esdDiagnosticFieldLayered { 0%, 100% { opacity: .28; transform: scale(.985); } 24% { opacity: .62; transform: scale(1.015); } 58% { opacity: .52; transform: scale(1); } 78% { opacity: .38; } } @keyframes esdFinalStabilizationSweep { 0%, 70% { opacity: 0; transform: scaleX(.08); } 82% { opacity: .86; transform: scaleX(1); } 94% { opacity: .28; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.18); } } @media(max-width:900px) { .esd-outcome { right: 4%; width: 12.5rem; font-size: .44rem; } .esd-outcome::before { width: 3.5rem; } .esd-causal-thread { right: 21% !important; } } @media(max-width:768px) { .esd-stack-layer { left: 4% !important; right: 4% !important; grid-template-columns: 7.5rem 1fr !important; } .esd-stack-layer b { font-size: .38rem !important; } .esd-outcome { display: none; } .esd-visible-break { right: 4% !important; } .esd-causal-thread { left: 8% !important; right: 5% !important; } } @media (prefers-reduced-motion: reduce) { .esd-outcome, .esd-causal-stack::after { animation: none !important; } } /* METHOD V45: ESD slower diagnosis outcomes and clearer soft layer links */ /* Remove the visible break box entirely */ .esd-visible-break { display: none !important; animation: none !important; opacity: 0 !important; } .esd-visible-break::before, .esd-visible-break::after { display: none !important; } /* Slow the diagnostic sequence down so each diagnosis has time to register */ .esd-scan-band { animation: esdLayerScanSequenceSlow 16s cubic-bezier(.37,0,.63,1) infinite !important; } .esd-diagnostic-field { animation: esdDiagnosticFieldLayeredSlow 16s ease-in-out infinite !important; } .esd-stack-layer, .esd-stack-layer i, .esd-causal-thread, .esd-outcome, .esd-causal-stack::after { animation-duration: 16s !important; } .esd-stack-layer.layer-1, .esd-stack-layer.layer-1 i, .esd-causal-thread.thread-1, .esd-outcome.outcome-1 { animation-delay: .2s !important; } .esd-stack-layer.layer-2, .esd-stack-layer.layer-2 i, .esd-causal-thread.thread-2, .esd-outcome.outcome-2 { animation-delay: 2.75s !important; } .esd-stack-layer.layer-3, .esd-stack-layer.layer-3 i, .esd-causal-thread.thread-3, .esd-outcome.outcome-3 { animation-delay: 5.3s !important; } .esd-stack-layer.layer-4, .esd-stack-layer.layer-4 i, .esd-causal-thread.thread-4, .esd-outcome.outcome-4 { animation-delay: 7.85s !important; } .esd-stack-layer.layer-5, .esd-stack-layer.layer-5 i, .esd-causal-thread.thread-5, .esd-outcome.outcome-5 { animation-delay: 10.4s !important; } /* Make the link from outcome back to the diagnosed layer softly obvious */ .esd-outcome { right: 6% !important; width: 17rem !important; border-color: rgba(224,85,48,.34) !important; background: radial-gradient(ellipse 90% 150% at 8% 50%, rgba(200,64,26,.095), transparent 70%), linear-gradient(90deg, rgba(10,7,5,.80), rgba(7,5,3,.52)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 26px rgba(200,64,26,.040) !important; animation-name: esdOutcomeAppearsSlow !important; } .esd-outcome::before { width: 16rem !important; right: 100% !important; top: 50% !important; background: linear-gradient(90deg, rgba(224,85,48,.58), rgba(88,205,210,.18), rgba(224,85,48,.24), transparent) !important; opacity: 0; transform-origin: right center; animation: esdOutcomeLinkDrawSlow 16s ease-in-out infinite; } .esd-outcome::after { content: ''; position: absolute; right: calc(100% + 15.4rem); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: rgba(224,85,48,.70); box-shadow: 0 0 12px rgba(224,85,48,.28), 0 0 18px rgba(88,205,210,.08); opacity: 0; animation: esdOutcomeAnchorPulseSlow 16s ease-in-out infinite; } .esd-outcome.outcome-1::before, .esd-outcome.outcome-1::after { animation-delay: .2s; } .esd-outcome.outcome-2::before, .esd-outcome.outcome-2::after { animation-delay: 2.75s; } .esd-outcome.outcome-3::before, .esd-outcome.outcome-3::after { animation-delay: 5.3s; } .esd-outcome.outcome-4::before, .esd-outcome.outcome-4::after { animation-delay: 7.85s; } .esd-outcome.outcome-5::before, .esd-outcome.outcome-5::after { animation-delay: 10.4s; } .esd-causal-thread { right: 27% !important; background: linear-gradient(90deg, rgba(224,85,48,.72), rgba(88,205,210,.20), rgba(224,85,48,.16), transparent) !important; animation-name: esdLayerThreadResolveSlow !important; } .esd-stack-layer { animation-name: esdLayerBaseSlow !important; } .esd-stack-layer i { animation-name: esdLayerSignalSlow !important; } @keyframes esdOutcomeAppearsSlow { 0%, 8%, 100% { opacity: 0; transform: translateX(10px); } 13% { opacity: .96; transform: translateX(0); } 25% { opacity: .94; transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 24px rgba(200,64,26,.14); } 34% { opacity: .38; transform: translateX(-3px); } 42% { opacity: 0; transform: translateX(-6px); } } @keyframes esdOutcomeLinkDrawSlow { 0%, 8%, 100% { opacity: 0; transform: scaleX(.08); } 13% { opacity: .88; transform: scaleX(.72); } 25% { opacity: .88; transform: scaleX(1); } 36% { opacity: .20; transform: scaleX(.60); } 42% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorPulseSlow { 0%, 8%, 100% { opacity: 0; transform: scale(.6); } 14% { opacity: .88; transform: scale(1.2); } 25% { opacity: .72; transform: scale(1); } 36% { opacity: .18; transform: scale(.74); } 42% { opacity: 0; transform: scale(.6); } } @keyframes esdLayerThreadResolveSlow { 0%, 8%, 100% { opacity: 0; transform: scaleX(.08); transform-origin: right center; } 14% { opacity: .86; transform: scaleX(.82); } 25% { opacity: .82; transform: scaleX(1); } 36% { opacity: .24; transform: scaleX(.56); } 42% { opacity: 0; transform: scaleX(.16); } } @keyframes esdLayerBaseSlow { 0%, 8%, 100% { opacity: .28; transform: translateX(0); border-color: rgba(255,255,255,.055); } 14% { opacity: .86; transform: translateX(5px); border-color: rgba(200,64,26,.30); } 25% { opacity: .80; transform: translateX(5px); border-color: rgba(200,64,26,.22); } 38% { opacity: .42; transform: translateX(0); } } @keyframes esdLayerSignalSlow { 0%, 8%, 100% { opacity: .16; transform: scaleX(.20); } 14% { opacity: .88; transform: scaleX(1); } 27% { opacity: .70; transform: scaleX(.86); } 38% { opacity: .22; transform: scaleX(.42); } } @keyframes esdLayerScanSequenceSlow { 0%, 8% { opacity: 0; transform: translate(0, 0); } 14% { opacity: .48; transform: translate(0, 0); } 27% { opacity: .54; transform: translate(-.8rem, 3.1rem); } 40% { opacity: .54; transform: translate(-1.6rem, 6.2rem); } 53% { opacity: .50; transform: translate(-2.4rem, 9.3rem); } 66% { opacity: .50; transform: translate(-3.2rem, 12.4rem); } 76% { opacity: .14; transform: translate(-3.8rem, 12.8rem); } 100% { opacity: 0; transform: translate(-3.8rem, 12.8rem); } } @keyframes esdDiagnosticFieldLayeredSlow { 0%, 100% { opacity: .26; transform: scale(.985); } 24% { opacity: .58; transform: scale(1.012); } 58% { opacity: .50; transform: scale(1); } 78% { opacity: .36; } } @media(max-width:900px) { .esd-outcome { width: 12.5rem !important; } .esd-outcome::before { width: 7rem !important; } .esd-outcome::after { right: calc(100% + 6.4rem); } .esd-causal-thread { right: 24% !important; } } @media(max-width:768px) { .esd-outcome { display: none !important; } } @media (prefers-reduced-motion: reduce) { .esd-outcome::before, .esd-outcome::after { animation: none !important; } } /* METHOD V46: ESD orb travels to use, then diagnosis appears */ /* The stack now reads as a sequence: orb travels across a layer, hits use, diagnosis appears */ .esd-travel-orb { position: absolute; left: 8%; width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.76); box-shadow: 0 0 14px rgba(224,85,48,.30), 0 0 22px rgba(88,205,210,.08); opacity: 0; z-index: 7; transform: translateX(0) scale(.8); animation: esdOrbTravelsToUse 16s linear infinite; will-change: transform, opacity; } .esd-travel-orb::after { content: ''; position: absolute; right: 100%; top: calc(50% - 1px); width: 5.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.55)); opacity: 0; animation: esdOrbWake 16s linear infinite; } .esd-travel-orb.orb-1 { top: calc(16% + .85rem); animation-delay: .2s; } .esd-travel-orb.orb-2 { top: calc(29% + .85rem); animation-delay: 2.75s; } .esd-travel-orb.orb-3 { top: calc(42% + .85rem); animation-delay: 5.3s; } .esd-travel-orb.orb-4 { top: calc(55% + .85rem); animation-delay: 7.85s; } .esd-travel-orb.orb-5 { top: calc(68% + .85rem); animation-delay: 10.4s; background: rgba(88,205,210,.70); box-shadow: 0 0 14px rgba(88,205,210,.30), 0 0 22px rgba(224,85,48,.08); } .esd-travel-orb.orb-1::after { animation-delay: .2s; } .esd-travel-orb.orb-2::after { animation-delay: 2.75s; } .esd-travel-orb.orb-3::after { animation-delay: 5.3s; } .esd-travel-orb.orb-4::after { animation-delay: 7.85s; } .esd-travel-orb.orb-5::after { animation-delay: 10.4s; } /* Outcome appears after the orb reaches the use side */ .esd-outcome { animation-name: esdOutcomeAfterOrb !important; animation-duration: 16s !important; } .esd-outcome::before { animation-name: esdOutcomeLinkAfterOrb !important; animation-duration: 16s !important; } .esd-outcome::after { animation-name: esdOutcomeAnchorAfterOrb !important; animation-duration: 16s !important; } /* Layer line becomes the orb track */ .esd-stack-layer i { background: linear-gradient(90deg, rgba(154,142,130,.10), rgba(224,85,48,.22), rgba(88,205,210,.10), transparent) !important; animation-name: esdLayerTrackLightsForOrb !important; animation-duration: 16s !important; } .esd-causal-thread { animation-name: esdSoftLayerLinkDuringOrb !important; animation-duration: 16s !important; } .esd-scan-band { opacity: .26; animation-name: esdScanBandSoftOrbSequence !important; animation-duration: 16s !important; } @keyframes esdOrbTravelsToUse { 0%, 5% { opacity: 0; transform: translateX(0) scale(.74); } 9% { opacity: 1; transform: translateX(6rem) scale(.92); } 20% { opacity: 1; transform: translateX(26rem) scale(1); } 30% { opacity: .96; transform: translateX(47rem) scale(.96); } 36% { opacity: .82; transform: translateX(57rem) scale(.86); } 39% { opacity: 0; transform: translateX(60rem) scale(.62); } 100% { opacity: 0; transform: translateX(60rem) scale(.62); } } @keyframes esdOrbWake { 0%, 7% { opacity: 0; transform: scaleX(.15); } 16% { opacity: .48; transform: scaleX(.75); } 32% { opacity: .32; transform: scaleX(1); } 40%, 100% { opacity: 0; transform: scaleX(.24); } } @keyframes esdOutcomeAfterOrb { 0%, 34%, 100% { opacity: 0; transform: translateX(10px); } 41% { opacity: .96; transform: translateX(0); } 58% { opacity: .92; transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 24px rgba(200,64,26,.14); } 72% { opacity: .30; transform: translateX(-4px); } 80% { opacity: 0; transform: translateX(-8px); } } @keyframes esdOutcomeLinkAfterOrb { 0%, 34%, 100% { opacity: 0; transform: scaleX(.08); } 41% { opacity: .86; transform: scaleX(.72); } 58% { opacity: .86; transform: scaleX(1); } 72% { opacity: .20; transform: scaleX(.60); } 80% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorAfterOrb { 0%, 34%, 100% { opacity: 0; transform: scale(.6); } 42% { opacity: .90; transform: scale(1.18); } 58% { opacity: .72; transform: scale(1); } 72% { opacity: .18; transform: scale(.74); } 80% { opacity: 0; transform: scale(.6); } } @keyframes esdLayerTrackLightsForOrb { 0%, 5%, 100% { opacity: .16; transform: scaleX(.20); } 12% { opacity: .66; transform: scaleX(.55); } 30% { opacity: .90; transform: scaleX(1); } 52% { opacity: .46; transform: scaleX(.86); } 78% { opacity: .18; transform: scaleX(.42); } } @keyframes esdSoftLayerLinkDuringOrb { 0%, 8%, 100% { opacity: 0; transform: scaleX(.08); transform-origin: right center; } 28% { opacity: .58; transform: scaleX(.82); } 46% { opacity: .74; transform: scaleX(1); } 68% { opacity: .20; transform: scaleX(.56); } 78% { opacity: 0; transform: scaleX(.16); } } @keyframes esdScanBandSoftOrbSequence { 0%, 8% { opacity: 0; transform: translate(0, 0); } 18% { opacity: .28; transform: translate(0, 0); } 38% { opacity: .30; transform: translate(-.8rem, 3.1rem); } 58% { opacity: .28; transform: translate(-1.6rem, 6.2rem); } 76% { opacity: .10; transform: translate(-3.2rem, 12.4rem); } 100% { opacity: 0; transform: translate(-3.8rem, 12.8rem); } } @media(max-width:1100px) { .esd-travel-orb { animation-name: esdOrbTravelsToUseTablet; } @keyframes esdOrbTravelsToUseTablet { 0%, 5% { opacity: 0; transform: translateX(0) scale(.74); } 9% { opacity: 1; transform: translateX(4rem) scale(.92); } 20% { opacity: 1; transform: translateX(18rem) scale(1); } 30% { opacity: .96; transform: translateX(32rem) scale(.96); } 36% { opacity: .82; transform: translateX(39rem) scale(.86); } 39% { opacity: 0; transform: translateX(42rem) scale(.62); } 100% { opacity: 0; transform: translateX(42rem) scale(.62); } } } @media(max-width:768px) { .esd-travel-orb { width: 6px; height: 6px; } } @media (prefers-reduced-motion: reduce) { .esd-travel-orb, .esd-travel-orb::after { animation: none !important; } } /* METHOD V47: ESD slower alternating orbs, non-overlapping outcomes, no label strike-through */ /* Move stack signal lines away from labels so they do not cross out the text */ .esd-stack-layer { grid-template-columns: 11.8rem 1fr !important; column-gap: 1.35rem !important; } .esd-stack-layer b { position: relative; z-index: 4; background: rgba(7,5,3,.72); padding-right: .55rem; } .esd-stack-layer i { margin-left: .5rem; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.30) 24%, rgba(88,205,210,.10) 62%, transparent 100%) !important; } /* Avoid label strike-through from causal threads by starting the threads after the text labels */ .esd-causal-thread { left: 34% !important; right: 28% !important; animation-duration: 24s !important; } .esd-causal-thread.thread-1, .esd-causal-thread.thread-2, .esd-causal-thread.thread-3, .esd-causal-thread.thread-4, .esd-causal-thread.thread-5 { animation-name: esdSoftLayerLinkSlower !important; } /* Slower sequence, one outcome at a time */ .esd-travel-orb, .esd-travel-orb::after, .esd-outcome, .esd-outcome::before, .esd-outcome::after, .esd-stack-layer, .esd-stack-layer i, .esd-scan-band, .esd-diagnostic-field, .esd-causal-stack::after { animation-duration: 24s !important; } .esd-travel-orb.orb-1, .esd-travel-orb.orb-1::after, .esd-stack-layer.layer-1, .esd-stack-layer.layer-1 i, .esd-causal-thread.thread-1, .esd-outcome.outcome-1, .esd-outcome.outcome-1::before, .esd-outcome.outcome-1::after { animation-delay: .2s !important; } .esd-travel-orb.orb-2, .esd-travel-orb.orb-2::after, .esd-stack-layer.layer-2, .esd-stack-layer.layer-2 i, .esd-causal-thread.thread-2, .esd-outcome.outcome-2, .esd-outcome.outcome-2::before, .esd-outcome.outcome-2::after { animation-delay: 4.4s !important; } .esd-travel-orb.orb-3, .esd-travel-orb.orb-3::after, .esd-stack-layer.layer-3, .esd-stack-layer.layer-3 i, .esd-causal-thread.thread-3, .esd-outcome.outcome-3, .esd-outcome.outcome-3::before, .esd-outcome.outcome-3::after { animation-delay: 8.6s !important; } .esd-travel-orb.orb-4, .esd-travel-orb.orb-4::after, .esd-stack-layer.layer-4, .esd-stack-layer.layer-4 i, .esd-causal-thread.thread-4, .esd-outcome.outcome-4, .esd-outcome.outcome-4::before, .esd-outcome.outcome-4::after { animation-delay: 12.8s !important; } .esd-travel-orb.orb-5, .esd-travel-orb.orb-5::after, .esd-stack-layer.layer-5, .esd-stack-layer.layer-5 i, .esd-causal-thread.thread-5, .esd-outcome.outcome-5, .esd-outcome.outcome-5::before, .esd-outcome.outcome-5::after { animation-delay: 17s !important; } /* Alternate orange and blue orbs */ .esd-travel-orb.orb-1, .esd-travel-orb.orb-3, .esd-travel-orb.orb-5 { background: rgba(224,85,48,.76) !important; box-shadow: 0 0 14px rgba(224,85,48,.30), 0 0 22px rgba(88,205,210,.08) !important; } .esd-travel-orb.orb-2, .esd-travel-orb.orb-4 { background: rgba(88,205,210,.72) !important; box-shadow: 0 0 14px rgba(88,205,210,.30), 0 0 22px rgba(224,85,48,.08) !important; } .esd-travel-orb.orb-2::after, .esd-travel-orb.orb-4::after { background: linear-gradient(90deg, transparent, rgba(88,205,210,.52)) !important; } /* Slower travel across each selected row */ .esd-travel-orb { animation-name: esdOrbTravelsToUseSlower !important; } .esd-travel-orb::after { animation-name: esdOrbWakeSlower !important; } /* Place outcomes in the same right-side result area but do not overlap in time */ .esd-outcome { top: 38% !important; right: 5.5% !important; width: 18rem !important; animation-name: esdOutcomeAfterOrbSingle !important; z-index: 10; } .esd-outcome::before { width: 14rem !important; animation-name: esdOutcomeLinkAfterOrbSingle !important; } .esd-outcome::after { right: calc(100% + 13.4rem) !important; animation-name: esdOutcomeAnchorAfterOrbSingle !important; } .esd-stack-layer { animation-name: esdLayerBaseSlower !important; } .esd-stack-layer i { animation-name: esdLayerTrackLightsForOrbSlower !important; } .esd-scan-band { animation-name: esdScanBandSoftOrbSequenceSlower !important; } @keyframes esdOrbTravelsToUseSlower { 0%, 4% { opacity: 0; transform: translateX(0) scale(.70); } 9% { opacity: 1; transform: translateX(8rem) scale(.90); } 22% { opacity: 1; transform: translateX(28rem) scale(1); } 36% { opacity: .96; transform: translateX(50rem) scale(.96); } 46% { opacity: .82; transform: translateX(61rem) scale(.86); } 50% { opacity: 0; transform: translateX(64rem) scale(.60); } 100% { opacity: 0; transform: translateX(64rem) scale(.60); } } @keyframes esdOrbWakeSlower { 0%, 6% { opacity: 0; transform: scaleX(.10); } 18% { opacity: .42; transform: scaleX(.72); } 38% { opacity: .28; transform: scaleX(1); } 52%, 100% { opacity: 0; transform: scaleX(.20); } } @keyframes esdOutcomeAfterOrbSingle { 0%, 48%, 100% { opacity: 0; transform: translateX(10px); } 55% { opacity: .96; transform: translateX(0); } 72% { opacity: .94; transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 24px rgba(200,64,26,.14); } 84% { opacity: .26; transform: translateX(-4px); } 90% { opacity: 0; transform: translateX(-8px); } } @keyframes esdOutcomeLinkAfterOrbSingle { 0%, 48%, 100% { opacity: 0; transform: scaleX(.08); } 55% { opacity: .82; transform: scaleX(.72); } 72% { opacity: .82; transform: scaleX(1); } 84% { opacity: .18; transform: scaleX(.60); } 90% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorAfterOrbSingle { 0%, 48%, 100% { opacity: 0; transform: scale(.6); } 56% { opacity: .88; transform: scale(1.18); } 72% { opacity: .68; transform: scale(1); } 84% { opacity: .16; transform: scale(.74); } 90% { opacity: 0; transform: scale(.6); } } @keyframes esdSoftLayerLinkSlower { 0%, 12%, 100% { opacity: 0; transform: scaleX(.08); transform-origin: right center; } 28% { opacity: .44; transform: scaleX(.74); } 48% { opacity: .56; transform: scaleX(1); } 72% { opacity: .16; transform: scaleX(.56); } 82% { opacity: 0; transform: scaleX(.16); } } @keyframes esdLayerBaseSlower { 0%, 4%, 100% { opacity: .28; transform: translateX(0); border-color: rgba(255,255,255,.055); } 12% { opacity: .72; transform: translateX(4px); border-color: rgba(200,64,26,.24); } 46% { opacity: .84; transform: translateX(5px); border-color: rgba(200,64,26,.28); } 74% { opacity: .42; transform: translateX(0); } } @keyframes esdLayerTrackLightsForOrbSlower { 0%, 4%, 100% { opacity: .16; transform: scaleX(.18); } 18% { opacity: .72; transform: scaleX(.56); } 46% { opacity: .88; transform: scaleX(1); } 72% { opacity: .32; transform: scaleX(.72); } 84% { opacity: .14; transform: scaleX(.36); } } @keyframes esdScanBandSoftOrbSequenceSlower { 0%, 6% { opacity: 0; transform: translate(0, 0); } 18% { opacity: .20; transform: translate(0, 0); } 38% { opacity: .24; transform: translate(-.8rem, 3.1rem); } 62% { opacity: .20; transform: translate(-1.6rem, 6.2rem); } 84% { opacity: .08; transform: translate(-3.2rem, 12.4rem); } 100% { opacity: 0; transform: translate(-3.8rem, 12.8rem); } } @media(max-width:1100px) { .esd-travel-orb { animation-name: esdOrbTravelsToUseSlowerTablet !important; } @keyframes esdOrbTravelsToUseSlowerTablet { 0%, 4% { opacity: 0; transform: translateX(0) scale(.70); } 9% { opacity: 1; transform: translateX(5rem) scale(.90); } 22% { opacity: 1; transform: translateX(17rem) scale(1); } 36% { opacity: .96; transform: translateX(31rem) scale(.96); } 46% { opacity: .82; transform: translateX(40rem) scale(.86); } 50% { opacity: 0; transform: translateX(43rem) scale(.60); } 100% { opacity: 0; transform: translateX(43rem) scale(.60); } } } @media(max-width:900px) { .esd-stack-layer { grid-template-columns: 8.8rem 1fr !important; } .esd-causal-thread { left: 38% !important; right: 26% !important; } .esd-outcome { width: 13rem !important; } .esd-outcome::before { width: 6rem !important; } .esd-outcome::after { right: calc(100% + 5.4rem) !important; } } @media(max-width:768px) { .esd-stack-layer { grid-template-columns: 7.4rem 1fr !important; } } /* METHOD V48: ESD slower sequence, remove stray static orb, active row title mapping */ /* Remove any lingering static/probe dots in ESD, including the one on intake ambiguity */ .artifact-visual-diagnosis .esd-probe-dot, .artifact-visual-diagnosis .dot-1, .artifact-visual-diagnosis .dot-2, .artifact-visual-diagnosis .dot-3, .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis .diag-break, .artifact-visual-diagnosis .diag-fix { display: none !important; animation: none !important; opacity: 0 !important; } /* Slow the full ESD sequence further */ .esd-travel-orb, .esd-travel-orb::after, .esd-outcome, .esd-outcome::before, .esd-outcome::after, .esd-stack-layer, .esd-stack-layer i, .esd-stack-layer b, .esd-causal-thread, .esd-scan-band, .esd-diagnostic-field, .esd-causal-stack::after { animation-duration: 32s !important; } .esd-travel-orb.orb-1, .esd-travel-orb.orb-1::after, .esd-stack-layer.layer-1, .esd-stack-layer.layer-1 i, .esd-stack-layer.layer-1 b, .esd-causal-thread.thread-1, .esd-outcome.outcome-1, .esd-outcome.outcome-1::before, .esd-outcome.outcome-1::after { animation-delay: .2s !important; } .esd-travel-orb.orb-2, .esd-travel-orb.orb-2::after, .esd-stack-layer.layer-2, .esd-stack-layer.layer-2 i, .esd-stack-layer.layer-2 b, .esd-causal-thread.thread-2, .esd-outcome.outcome-2, .esd-outcome.outcome-2::before, .esd-outcome.outcome-2::after { animation-delay: 6.1s !important; } .esd-travel-orb.orb-3, .esd-travel-orb.orb-3::after, .esd-stack-layer.layer-3, .esd-stack-layer.layer-3 i, .esd-stack-layer.layer-3 b, .esd-causal-thread.thread-3, .esd-outcome.outcome-3, .esd-outcome.outcome-3::before, .esd-outcome.outcome-3::after { animation-delay: 12s !important; } .esd-travel-orb.orb-4, .esd-travel-orb.orb-4::after, .esd-stack-layer.layer-4, .esd-stack-layer.layer-4 i, .esd-stack-layer.layer-4 b, .esd-causal-thread.thread-4, .esd-outcome.outcome-4, .esd-outcome.outcome-4::before, .esd-outcome.outcome-4::after { animation-delay: 17.9s !important; } .esd-travel-orb.orb-5, .esd-travel-orb.orb-5::after, .esd-stack-layer.layer-5, .esd-stack-layer.layer-5 i, .esd-stack-layer.layer-5 b, .esd-causal-thread.thread-5, .esd-outcome.outcome-5, .esd-outcome.outcome-5::before, .esd-outcome.outcome-5::after { animation-delay: 23.8s !important; } /* Slow, more legible orb travel */ .esd-travel-orb { animation-name: esdOrbTravelsToUseVerySlow !important; } .esd-travel-orb::after { animation-name: esdOrbWakeVerySlow !important; } .esd-stack-layer i { animation-name: esdLayerTrackVerySlow !important; } .esd-stack-layer b { animation-name: esdLayerTitleMapsToOutcome !important; } .esd-stack-layer { animation-name: esdLayerBaseVerySlow !important; } .esd-causal-thread { animation-name: esdSoftLayerLinkVerySlow !important; } .esd-outcome { animation-name: esdOutcomeAfterOrbVerySlow !important; } .esd-outcome::before { animation-name: esdOutcomeLinkAfterOrbVerySlow !important; } .esd-outcome::after { animation-name: esdOutcomeAnchorAfterOrbVerySlow !important; } .esd-scan-band { animation-name: esdScanBandVerySlow !important; } /* Keep the output dialog anchored in one location */ .esd-outcome { top: 38% !important; right: 5.5% !important; width: 18rem !important; } @keyframes esdOrbTravelsToUseVerySlow { 0%, 5% { opacity: 0; transform: translateX(0) scale(.70); } 10% { opacity: 1; transform: translateX(7rem) scale(.90); } 28% { opacity: 1; transform: translateX(28rem) scale(1); } 47% { opacity: .96; transform: translateX(51rem) scale(.96); } 60% { opacity: .82; transform: translateX(62rem) scale(.86); } 66% { opacity: 0; transform: translateX(65rem) scale(.60); } 100% { opacity: 0; transform: translateX(65rem) scale(.60); } } @keyframes esdOrbWakeVerySlow { 0%, 7% { opacity: 0; transform: scaleX(.10); } 20% { opacity: .36; transform: scaleX(.62); } 48% { opacity: .26; transform: scaleX(1); } 68%, 100% { opacity: 0; transform: scaleX(.20); } } @keyframes esdLayerTrackVerySlow { 0%, 7%, 100% { opacity: .12; transform: scaleX(.16); } 18% { opacity: .52; transform: scaleX(.42); } 44% { opacity: .74; transform: scaleX(.88); } 62% { opacity: .64; transform: scaleX(1); } 82% { opacity: .18; transform: scaleX(.36); } } @keyframes esdLayerTitleMapsToOutcome { 0%, 56%, 100% { color: rgba(240,235,227,.50); text-shadow: none; } 63% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.24); } 76% { color: var(--red-hi); text-shadow: 0 0 18px rgba(200,64,26,.18); } 86% { color: rgba(240,235,227,.50); text-shadow: none; } } @keyframes esdLayerBaseVerySlow { 0%, 5%, 100% { opacity: .28; transform: translateX(0); border-color: rgba(255,255,255,.055); } 18% { opacity: .62; transform: translateX(3px); border-color: rgba(200,64,26,.18); } 56% { opacity: .82; transform: translateX(5px); border-color: rgba(200,64,26,.28); } 78% { opacity: .42; transform: translateX(0); } } @keyframes esdSoftLayerLinkVerySlow { 0%, 14%, 100% { opacity: 0; transform: scaleX(.08); transform-origin: right center; } 38% { opacity: .38; transform: scaleX(.74); } 60% { opacity: .54; transform: scaleX(1); } 78% { opacity: .16; transform: scaleX(.56); } 88% { opacity: 0; transform: scaleX(.16); } } @keyframes esdOutcomeAfterOrbVerySlow { 0%, 58%, 100% { opacity: 0; transform: translateX(10px); } 65% { opacity: .96; transform: translateX(0); } 78% { opacity: .94; transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 24px rgba(200,64,26,.14); } 90% { opacity: .26; transform: translateX(-4px); } 96% { opacity: 0; transform: translateX(-8px); } } @keyframes esdOutcomeLinkAfterOrbVerySlow { 0%, 58%, 100% { opacity: 0; transform: scaleX(.08); } 65% { opacity: .82; transform: scaleX(.72); } 78% { opacity: .82; transform: scaleX(1); } 90% { opacity: .18; transform: scaleX(.60); } 96% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorAfterOrbVerySlow { 0%, 58%, 100% { opacity: 0; transform: scale(.6); } 66% { opacity: .88; transform: scale(1.18); } 78% { opacity: .68; transform: scale(1); } 90% { opacity: .16; transform: scale(.74); } 96% { opacity: 0; transform: scale(.6); } } @keyframes esdScanBandVerySlow { 0%, 8% { opacity: 0; transform: translate(0, 0); } 22% { opacity: .16; transform: translate(0, 0); } 44% { opacity: .22; transform: translate(-.8rem, 3.1rem); } 66% { opacity: .18; transform: translate(-1.6rem, 6.2rem); } 88% { opacity: .06; transform: translate(-3.2rem, 12.4rem); } 100% { opacity: 0; transform: translate(-3.8rem, 12.8rem); } } @media(max-width:1100px) { .esd-travel-orb { animation-name: esdOrbTravelsToUseVerySlowTablet !important; } @keyframes esdOrbTravelsToUseVerySlowTablet { 0%, 5% { opacity: 0; transform: translateX(0) scale(.70); } 10% { opacity: 1; transform: translateX(5rem) scale(.90); } 28% { opacity: 1; transform: translateX(17rem) scale(1); } 47% { opacity: .96; transform: translateX(31rem) scale(.96); } 60% { opacity: .82; transform: translateX(40rem) scale(.86); } 66% { opacity: 0; transform: translateX(43rem) scale(.60); } 100% { opacity: 0; transform: translateX(43rem) scale(.60); } } } @media(max-width:900px) { .esd-outcome { width: 13rem !important; } } @media (prefers-reduced-motion: reduce) { .esd-stack-layer b { animation: none !important; } } /* METHOD V49: ESD no orbs, center-only slow diagnostic lines, cleaner output timing */ /* Remove all ESD traveling orbs and any dot-like artifacts */ .artifact-visual-diagnosis .esd-travel-orb, .artifact-visual-diagnosis .esd-travel-orb::after, .artifact-visual-diagnosis .esd-probe-dot, .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis .diag-break, .artifact-visual-diagnosis .diag-fix { display: none !important; animation: none !important; opacity: 0 !important; } /* Make layer labels completely protected from animated lines */ .esd-stack-layer { grid-template-columns: 12.25rem 1fr !important; column-gap: 1.6rem !important; overflow: hidden !important; } .esd-stack-layer b { position: relative; z-index: 10 !important; display: inline-flex; align-items: center; height: 100%; background: linear-gradient(90deg, rgba(7,5,3,.96), rgba(7,5,3,.90) 78%, rgba(7,5,3,0)); padding-right: 1rem; color: rgba(240,235,227,.50); animation-name: esdLayerTitleMapsFast !important; animation-duration: 22s !important; } /* Keep all animated activity in the middle/right track area only */ .esd-stack-layer i { margin-left: 0 !important; transform-origin: center center !important; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.12) 12%, rgba(224,85,48,.44) 42%, rgba(88,205,210,.14) 72%, transparent 100%) !important; animation-name: esdMiddleLineBreath !important; animation-duration: 22s !important; } .esd-causal-thread { left: 37% !important; right: 30% !important; animation-name: esdCenterThreadBackAndForth !important; animation-duration: 22s !important; } /* Slower diagnostic line rhythm, faster output appearance and cleaner fade */ .esd-outcome, .esd-outcome::before, .esd-outcome::after, .esd-stack-layer, .esd-stack-layer i, .esd-stack-layer b, .esd-causal-thread, .esd-scan-band, .esd-diagnostic-field, .esd-causal-stack::after { animation-duration: 22s !important; } .esd-stack-layer.layer-1, .esd-stack-layer.layer-1 i, .esd-stack-layer.layer-1 b, .esd-causal-thread.thread-1, .esd-outcome.outcome-1, .esd-outcome.outcome-1::before, .esd-outcome.outcome-1::after { animation-delay: .2s !important; } .esd-stack-layer.layer-2, .esd-stack-layer.layer-2 i, .esd-stack-layer.layer-2 b, .esd-causal-thread.thread-2, .esd-outcome.outcome-2, .esd-outcome.outcome-2::before, .esd-outcome.outcome-2::after { animation-delay: 4.1s !important; } .esd-stack-layer.layer-3, .esd-stack-layer.layer-3 i, .esd-stack-layer.layer-3 b, .esd-causal-thread.thread-3, .esd-outcome.outcome-3, .esd-outcome.outcome-3::before, .esd-outcome.outcome-3::after { animation-delay: 8s !important; } .esd-stack-layer.layer-4, .esd-stack-layer.layer-4 i, .esd-stack-layer.layer-4 b, .esd-causal-thread.thread-4, .esd-outcome.outcome-4, .esd-outcome.outcome-4::before, .esd-outcome.outcome-4::after { animation-delay: 11.9s !important; } .esd-stack-layer.layer-5, .esd-stack-layer.layer-5 i, .esd-stack-layer.layer-5 b, .esd-causal-thread.thread-5, .esd-outcome.outcome-5, .esd-outcome.outcome-5::before, .esd-outcome.outcome-5::after { animation-delay: 15.8s !important; } .esd-stack-layer { animation-name: esdLayerBaseFastClean !important; } .esd-outcome { top: 38% !important; right: 5.5% !important; width: 18rem !important; animation-name: esdOutcomeFastClean !important; filter: none !important; } .esd-outcome::before { width: 13.5rem !important; animation-name: esdOutcomeLinkFastClean !important; } .esd-outcome::after { right: calc(100% + 12.9rem) !important; animation-name: esdOutcomeAnchorFastClean !important; } .esd-scan-band { display: none !important; animation: none !important; } .esd-diagnostic-field { animation-name: esdDiagnosticFieldClean !important; animation-duration: 22s !important; } .esd-causal-stack::after { animation-name: esdFinalStabilizationClean !important; animation-duration: 22s !important; } @keyframes esdMiddleLineBreath { 0%, 8%, 100% { opacity: .10; transform: scaleX(.18); } 18% { opacity: .34; transform: scaleX(.52); } 34% { opacity: .72; transform: scaleX(1); } 52% { opacity: .46; transform: scaleX(.74); } 66% { opacity: .18; transform: scaleX(.32); } } @keyframes esdCenterThreadBackAndForth { 0%, 10%, 100% { opacity: 0; transform: translateX(0) scaleX(.12); transform-origin: center center; } 20% { opacity: .38; transform: translateX(1.5rem) scaleX(.58); } 35% { opacity: .58; transform: translateX(-1rem) scaleX(1); } 50% { opacity: .32; transform: translateX(1rem) scaleX(.72); } 66% { opacity: 0; transform: translateX(0) scaleX(.20); } } @keyframes esdLayerTitleMapsFast { 0%, 42%, 100% { color: rgba(240,235,227,.50); text-shadow: none; } 50% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.24); } 66% { color: var(--red-hi); text-shadow: 0 0 18px rgba(200,64,26,.18); } 78% { color: rgba(240,235,227,.50); text-shadow: none; } } @keyframes esdLayerBaseFastClean { 0%, 6%, 100% { opacity: .28; transform: translateX(0); border-color: rgba(255,255,255,.055); } 22% { opacity: .62; transform: translateX(3px); border-color: rgba(200,64,26,.18); } 48% { opacity: .82; transform: translateX(5px); border-color: rgba(200,64,26,.28); } 74% { opacity: .42; transform: translateX(0); } } @keyframes esdOutcomeFastClean { 0%, 38%, 100% { opacity: 0; transform: translateX(8px); } 46% { opacity: .98; transform: translateX(0); } 66% { opacity: .96; transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 0 20px rgba(200,64,26,.11); } 80% { opacity: .10; transform: translateX(-3px); } 84% { opacity: 0; transform: translateX(-4px); } } @keyframes esdOutcomeLinkFastClean { 0%, 38%, 100% { opacity: 0; transform: scaleX(.10); } 46% { opacity: .78; transform: scaleX(.72); } 66% { opacity: .82; transform: scaleX(1); } 80% { opacity: .10; transform: scaleX(.60); } 84% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorFastClean { 0%, 38%, 100% { opacity: 0; transform: scale(.6); } 47% { opacity: .82; transform: scale(1.12); } 66% { opacity: .62; transform: scale(1); } 80% { opacity: .10; transform: scale(.74); } 84% { opacity: 0; transform: scale(.6); } } @keyframes esdDiagnosticFieldClean { 0%, 100% { opacity: .24; transform: scale(.985); } 30% { opacity: .54; transform: scale(1.01); } 62% { opacity: .46; transform: scale(1); } 82% { opacity: .30; } } @keyframes esdFinalStabilizationClean { 0%, 70% { opacity: 0; transform: scaleX(.08); } 80% { opacity: .58; transform: scaleX(1); } 90% { opacity: .18; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.18); } } @media(max-width:900px) { .esd-stack-layer { grid-template-columns: 8.9rem 1fr !important; } .esd-causal-thread { left: 40% !important; right: 27% !important; } .esd-outcome { width: 13rem !important; } .esd-outcome::before { width: 6rem !important; } .esd-outcome::after { right: calc(100% + 5.4rem) !important; } } @media(max-width:768px) { .esd-stack-layer { grid-template-columns: 7.6rem 1fr !important; } .esd-causal-thread { left: 45% !important; right: 8% !important; } } /* METHOD V50: ESD hard label-safe zone */ /* Create an absolute safe zone over the label column so no line can visually cross titles */ .artifact-visual-diagnosis .esd-stack-layer { position: absolute !important; grid-template-columns: 13.25rem 1fr !important; column-gap: 2.25rem !important; overflow: visible !important; background: linear-gradient(90deg, rgba(7,5,3,.74) 0, rgba(7,5,3,.74) 13.25rem, rgba(7,5,3,.20) 13.25rem, rgba(7,5,3,.16) 100%) !important; } .artifact-visual-diagnosis .esd-stack-layer::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 14.35rem; z-index: 8; background: linear-gradient(90deg, rgba(7,5,3,.98) 0%, rgba(7,5,3,.96) 72%, rgba(7,5,3,.86) 88%, rgba(7,5,3,0) 100%); pointer-events: none; } .artifact-visual-diagnosis .esd-stack-layer b { position: relative !important; z-index: 12 !important; background: transparent !important; padding-right: 0 !important; color: rgba(240,235,227,.52); } /* Force per-row colored line to live entirely to the right of the label safe zone */ .artifact-visual-diagnosis .esd-stack-layer i { position: relative !important; z-index: 3 !important; margin-left: 0 !important; width: 100% !important; min-width: 0 !important; transform-origin: left center !important; clip-path: inset(0 0 0 0); } /* Center threads start beyond label zone */ .artifact-visual-diagnosis .esd-causal-thread { left: 42% !important; right: 27% !important; z-index: 2 !important; } /* Outcome connector also stays clear of labels */ .artifact-visual-diagnosis .esd-outcome::before { width: 10rem !important; } .artifact-visual-diagnosis .esd-outcome::after { right: calc(100% + 9.4rem) !important; } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer { grid-template-columns: 10.5rem 1fr !important; } .artifact-visual-diagnosis .esd-stack-layer::before { width: 11.5rem; } .artifact-visual-diagnosis .esd-causal-thread { left: 46% !important; right: 20% !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer { grid-template-columns: 7.9rem 1fr !important; column-gap: 1.1rem !important; } .artifact-visual-diagnosis .esd-stack-layer::before { width: 8.8rem; } .artifact-visual-diagnosis .esd-causal-thread { left: 52% !important; right: 6% !important; } } /* METHOD V51: ESD reliable looping row-title mapping and clean output handoff */ /* Use one clean 30s master loop. Each row owns a 5s window with a 1s gap between outputs. */ .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-stack-layer b, .artifact-visual-diagnosis .esd-causal-thread, .artifact-visual-diagnosis .esd-outcome, .artifact-visual-diagnosis .esd-outcome::before, .artifact-visual-diagnosis .esd-outcome::after, .artifact-visual-diagnosis .esd-diagnostic-field, .artifact-visual-diagnosis .esd-causal-stack::after { animation-duration: 30s !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-1 b, .artifact-visual-diagnosis .esd-causal-thread.thread-1, .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before, .artifact-visual-diagnosis .esd-outcome.outcome-1::after { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 b, .artifact-visual-diagnosis .esd-causal-thread.thread-2, .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before, .artifact-visual-diagnosis .esd-outcome.outcome-2::after { animation-delay: 6s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 b, .artifact-visual-diagnosis .esd-causal-thread.thread-3, .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before, .artifact-visual-diagnosis .esd-outcome.outcome-3::after { animation-delay: 12s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before, .artifact-visual-diagnosis .esd-outcome.outcome-4::after { animation-delay: 18s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b, .artifact-visual-diagnosis .esd-causal-thread.thread-5, .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before, .artifact-visual-diagnosis .esd-outcome.outcome-5::after { animation-delay: 24s !important; } /* Fixed output location, clean fade out to zero before the next output fades in */ .artifact-visual-diagnosis .esd-outcome { top: 38% !important; right: 5.5% !important; width: 18rem !important; opacity: 0; filter: none !important; transform: translateX(8px); animation-name: esdOutcomeCleanLoop !important; } .artifact-visual-diagnosis .esd-outcome::before { animation-name: esdOutcomeLinkCleanLoop !important; } .artifact-visual-diagnosis .esd-outcome::after { animation-name: esdOutcomeAnchorCleanLoop !important; } /* Row title is red for the exact same visible window as the output box */ .artifact-visual-diagnosis .esd-stack-layer b { animation-name: esdRowTitleRedWhileOutputVisible !important; } .artifact-visual-diagnosis .esd-stack-layer { animation-name: esdRowPlateActiveCleanLoop !important; } .artifact-visual-diagnosis .esd-stack-layer i { animation-name: esdMiddleLineCleanLoop !important; } .artifact-visual-diagnosis .esd-causal-thread { animation-name: esdCenterThreadCleanLoop !important; } @keyframes esdOutcomeCleanLoop { 0%, 40%, 100% { opacity: 0; transform: translateX(8px); } 48% { opacity: .98; transform: translateX(0); } 72% { opacity: .98; transform: translateX(0); } 84% { opacity: 0; transform: translateX(-6px); } } @keyframes esdOutcomeLinkCleanLoop { 0%, 40%, 100% { opacity: 0; transform: scaleX(.08); } 48% { opacity: .78; transform: scaleX(.78); } 72% { opacity: .78; transform: scaleX(1); } 84% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOutcomeAnchorCleanLoop { 0%, 40%, 100% { opacity: 0; transform: scale(.6); } 48% { opacity: .82; transform: scale(1.14); } 72% { opacity: .66; transform: scale(1); } 84% { opacity: 0; transform: scale(.7); } } @keyframes esdRowTitleRedWhileOutputVisible { 0%, 40%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 48% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.24); } 72% { color: var(--red-hi); text-shadow: 0 0 18px rgba(200,64,26,.18); } 84% { color: rgba(240,235,227,.52); text-shadow: none; } } @keyframes esdRowPlateActiveCleanLoop { 0%, 18%, 100% { opacity: .30; transform: translateX(0); border-color: rgba(255,255,255,.055); } 34% { opacity: .74; transform: translateX(3px); border-color: rgba(200,64,26,.20); } 72% { opacity: .82; transform: translateX(5px); border-color: rgba(200,64,26,.30); } 88% { opacity: .40; transform: translateX(0); border-color: rgba(255,255,255,.055); } } @keyframes esdMiddleLineCleanLoop { 0%, 12%, 100% { opacity: .10; transform: scaleX(.18); } 34% { opacity: .48; transform: scaleX(.66); } 64% { opacity: .74; transform: scaleX(1); } 82% { opacity: .14; transform: scaleX(.32); } } @keyframes esdCenterThreadCleanLoop { 0%, 18%, 100% { opacity: 0; transform: translateX(0) scaleX(.12); transform-origin: center center; } 38% { opacity: .40; transform: translateX(1.2rem) scaleX(.64); } 68% { opacity: .58; transform: translateX(-.8rem) scaleX(1); } 84% { opacity: 0; transform: translateX(0) scaleX(.20); } } @media(max-width:900px) { .artifact-visual-diagnosis .esd-outcome { width: 13rem !important; } } /* METHOD V52: ESD hard no-orb cleanup, strict output windows, calm lower rows */ /* Kill every possible leftover ESD orb/dot/pulse artifact, including pseudo-elements */ .artifact-visual-diagnosis .esd-travel-orb, .artifact-visual-diagnosis .esd-travel-orb::before, .artifact-visual-diagnosis .esd-travel-orb::after, .artifact-visual-diagnosis .esd-probe-dot, .artifact-visual-diagnosis .esd-probe-dot::before, .artifact-visual-diagnosis .esd-probe-dot::after, .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis .diag-pulse::before, .artifact-visual-diagnosis .diag-pulse::after, .artifact-visual-diagnosis .diag-break, .artifact-visual-diagnosis .diag-break::before, .artifact-visual-diagnosis .diag-break::after, .artifact-visual-diagnosis .diag-fix, .artifact-visual-diagnosis .diag-fix::before, .artifact-visual-diagnosis .diag-fix::after, .artifact-visual-diagnosis .bp-node, .artifact-visual-diagnosis .bp-trace { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; transition: none !important; } /* Strict one-at-a-time output behavior. No crossfade overlap. */ .artifact-visual-diagnosis .esd-outcome { animation-name: esdOneOutputOnly !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; filter: none !important; pointer-events: none; } .artifact-visual-diagnosis .esd-outcome::before { animation-name: esdOneOutputOnlyLink !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-outcome::after { animation-name: esdOneOutputOnlyAnchor !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer b { animation-name: esdTitleRedOnlyDuringOwnOutput !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-causal-thread { animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before, .artifact-visual-diagnosis .esd-outcome.outcome-1::after, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-1 b, .artifact-visual-diagnosis .esd-causal-thread.thread-1 { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before, .artifact-visual-diagnosis .esd-outcome.outcome-2::after, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 b, .artifact-visual-diagnosis .esd-causal-thread.thread-2 { animation-delay: 7s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before, .artifact-visual-diagnosis .esd-outcome.outcome-3::after, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 b, .artifact-visual-diagnosis .esd-causal-thread.thread-3 { animation-delay: 14s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before, .artifact-visual-diagnosis .esd-outcome.outcome-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-causal-thread.thread-4 { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before, .artifact-visual-diagnosis .esd-outcome.outcome-5::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b, .artifact-visual-diagnosis .esd-causal-thread.thread-5 { animation-delay: 28s !important; } /* Calm the two rows you called out: no quick zipping on Decision Latency and Governance Condition */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { animation-name: esdLowerRowsSlowGlow !important; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.10) 18%, rgba(224,85,48,.30) 50%, rgba(88,205,210,.10) 76%, transparent 100%) !important; } .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5 { animation-name: esdLowerThreadSlowGlow !important; } @keyframes esdOneOutputOnly { 0%, 34%, 100% { opacity: 0 !important; transform: translateX(8px); } 42% { opacity: 1 !important; transform: translateX(0); } 72% { opacity: 1 !important; transform: translateX(0); } 82% { opacity: 0 !important; transform: translateX(-5px); } } @keyframes esdOneOutputOnlyLink { 0%, 34%, 100% { opacity: 0; transform: scaleX(.08); } 42% { opacity: .78; transform: scaleX(.72); } 72% { opacity: .78; transform: scaleX(1); } 82% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOneOutputOnlyAnchor { 0%, 34%, 100% { opacity: 0; transform: scale(.6); } 42% { opacity: .80; transform: scale(1.12); } 72% { opacity: .62; transform: scale(1); } 82% { opacity: 0; transform: scale(.7); } } @keyframes esdTitleRedOnlyDuringOwnOutput { 0%, 34%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 42% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.24); } 72% { color: var(--red-hi); text-shadow: 0 0 18px rgba(200,64,26,.18); } 82% { color: rgba(240,235,227,.52); text-shadow: none; } } @keyframes esdLowerRowsSlowGlow { 0%, 32%, 100% { opacity: .10; transform: scaleX(.18); } 46% { opacity: .34; transform: scaleX(.58); } 70% { opacity: .46; transform: scaleX(.92); } 84% { opacity: .14; transform: scaleX(.36); } } @keyframes esdLowerThreadSlowGlow { 0%, 36%, 100% { opacity: 0; transform: translateX(0) scaleX(.12); } 52% { opacity: .22; transform: translateX(.4rem) scaleX(.52); } 72% { opacity: .34; transform: translateX(-.2rem) scaleX(.82); } 84% { opacity: 0; transform: translateX(0) scaleX(.20); } } /* METHOD V53: restore ESD output boxes and remove lower-row line artifacts */ /* Output boxes must be animation-controlled, not hard-forced invisible */ .artifact-visual-diagnosis .esd-outcome { display: block !important; visibility: visible !important; opacity: 0; animation-name: esdOneOutputOnlyRestored !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; filter: none !important; } .artifact-visual-diagnosis .esd-outcome::before { animation-name: esdOneOutputOnlyLinkRestored !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-outcome::after { animation-name: esdOneOutputOnlyAnchorRestored !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Remove the two lower-row moving lines entirely */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5 { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } /* Keep the lower row plates and titles active without the crossing/zipping line */ .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { animation-name: esdLowerRowPlateOnly !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-name: esdTitleRedOnlyDuringOwnOutput !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Maintain clean stagger */ .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before, .artifact-visual-diagnosis .esd-outcome.outcome-1::after { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before, .artifact-visual-diagnosis .esd-outcome.outcome-2::after { animation-delay: 7s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before, .artifact-visual-diagnosis .esd-outcome.outcome-3::after { animation-delay: 14s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before, .artifact-visual-diagnosis .esd-outcome.outcome-4::after { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before, .artifact-visual-diagnosis .esd-outcome.outcome-5::after { animation-delay: 28s !important; } @keyframes esdOneOutputOnlyRestored { 0%, 32%, 100% { opacity: 0; transform: translateX(8px); } 40% { opacity: 1; transform: translateX(0); } 70% { opacity: 1; transform: translateX(0); } 82% { opacity: 0; transform: translateX(-5px); } } @keyframes esdOneOutputOnlyLinkRestored { 0%, 32%, 100% { opacity: 0; transform: scaleX(.08); } 40% { opacity: .78; transform: scaleX(.72); } 70% { opacity: .78; transform: scaleX(1); } 82% { opacity: 0; transform: scaleX(.18); } } @keyframes esdOneOutputOnlyAnchorRestored { 0%, 32%, 100% { opacity: 0; transform: scale(.6); } 40% { opacity: .80; transform: scale(1.12); } 70% { opacity: .62; transform: scale(1); } 82% { opacity: 0; transform: scale(.7); } } @keyframes esdLowerRowPlateOnly { 0%, 32%, 100% { opacity: .28; transform: translateX(0); border-color: rgba(255,255,255,.055); } 42% { opacity: .64; transform: translateX(3px); border-color: rgba(200,64,26,.20); } 70% { opacity: .74; transform: translateX(4px); border-color: rgba(200,64,26,.26); } 82% { opacity: .38; transform: translateX(0); border-color: rgba(255,255,255,.055); } } /* METHOD V54: ESD no dots/anchors, simple readable outputs */ /* Remove the remaining output anchor dot. It was reading like a stray orb. */ .artifact-visual-diagnosis .esd-outcome::after { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; content: none !important; } /* Keep only the output box and its soft connector line */ .artifact-visual-diagnosis .esd-outcome { display: block !important; visibility: visible !important; opacity: 0; top: 38% !important; right: 6% !important; width: 18rem !important; animation-name: esdOutputReadableSolo !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; filter: none !important; } .artifact-visual-diagnosis .esd-outcome::before { display: block !important; width: 11rem !important; right: 100% !important; background: linear-gradient(90deg, rgba(224,85,48,.38), rgba(88,205,210,.12), transparent) !important; opacity: 0; animation-name: esdOutputConnectorReadableSolo !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Reassert stagger after removing anchor pseudo-element */ .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-1 b, .artifact-visual-diagnosis .esd-causal-thread.thread-1 { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 b, .artifact-visual-diagnosis .esd-causal-thread.thread-2 { animation-delay: 7s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 b, .artifact-visual-diagnosis .esd-causal-thread.thread-3 { animation-delay: 14s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-4 b { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before, .artifact-visual-diagnosis .esd-stack-layer.layer-5, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-delay: 28s !important; } /* No lower row line artifacts at all */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5 { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } /* Soften the remaining moving lines and keep them away from label text */ .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { animation-name: esdSoftMiddleOnlyLine !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.18) 24%, rgba(224,85,48,.38) 52%, rgba(88,205,210,.10) 78%, transparent 100%) !important; } .artifact-visual-diagnosis .esd-causal-thread.thread-1, .artifact-visual-diagnosis .esd-causal-thread.thread-2, .artifact-visual-diagnosis .esd-causal-thread.thread-3 { left: 44% !important; right: 32% !important; animation-name: esdSoftMiddleOnlyThread !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } @keyframes esdOutputReadableSolo { 0%, 30%, 100% { opacity: 0; transform: translateX(8px); } 38% { opacity: 1; transform: translateX(0); } 70% { opacity: 1; transform: translateX(0); } 82% { opacity: 0; transform: translateX(-4px); } } @keyframes esdOutputConnectorReadableSolo { 0%, 30%, 100% { opacity: 0; transform: scaleX(.08); } 38% { opacity: .58; transform: scaleX(.65); } 70% { opacity: .58; transform: scaleX(1); } 82% { opacity: 0; transform: scaleX(.18); } } @keyframes esdSoftMiddleOnlyLine { 0%, 18%, 100% { opacity: .08; transform: scaleX(.18); } 36% { opacity: .36; transform: scaleX(.60); } 62% { opacity: .48; transform: scaleX(1); } 80% { opacity: .10; transform: scaleX(.32); } } @keyframes esdSoftMiddleOnlyThread { 0%, 22%, 100% { opacity: 0; transform: translateX(0) scaleX(.12); } 42% { opacity: .28; transform: translateX(.6rem) scaleX(.70); } 64% { opacity: .36; transform: translateX(-.4rem) scaleX(1); } 80% { opacity: 0; transform: translateX(0) scaleX(.20); } } @media(max-width:900px) { .artifact-visual-diagnosis .esd-outcome { width: 13rem !important; } .artifact-visual-diagnosis .esd-outcome::before { width: 6rem !important; } } /* METHOD V55: ESD hard-remove all visual line artifacts from bottom two rows */ /* The bottom two rows were still inheriting older line layers. This blanks the line cells and pseudo-elements completely for Decision Latency and Governance Condition. */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::after, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5, .artifact-visual-diagnosis .esd-causal-thread.thread-4::before, .artifact-visual-diagnosis .esd-causal-thread.thread-4::after, .artifact-visual-diagnosis .esd-causal-thread.thread-5::before, .artifact-visual-diagnosis .esd-causal-thread.thread-5::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Keep the bottom two row plates and titles alive, but with no internal line cell showing */ .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { grid-template-columns: 13.25rem 1fr !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { content: '' !important; position: absolute; left: 14.4rem; right: 0; top: 0; bottom: 0; z-index: 20; pointer-events: none; background: rgba(7,5,3,.82); opacity: .96; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { z-index: 30 !important; } /* Preserve red title mapping for the bottom two rows */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-name: esdTitleRedOnlyDuringOwnOutput !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-delay: 28s !important; } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { left: 11.5rem; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { left: 8.8rem; } } /* METHOD V56: ESD quick output fade-out */ /* Keep the output readable, but make the fade-out snap cleanly once it begins */ .artifact-visual-diagnosis .esd-outcome { animation-name: esdOutputReadableFastExit !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; filter: none !important; } .artifact-visual-diagnosis .esd-outcome::before { animation-name: esdOutputConnectorFastExit !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Reassert stagger */ .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before { animation-delay: 7s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before { animation-delay: 14s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before { animation-delay: 28s !important; } @keyframes esdOutputReadableFastExit { 0%, 30%, 100% { opacity: 0; transform: translateX(8px); } 38% { opacity: 1; transform: translateX(0); } 72% { opacity: 1; transform: translateX(0); } 76% { opacity: 0; transform: translateX(-3px); } 76.01%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputConnectorFastExit { 0%, 30%, 100% { opacity: 0; transform: scaleX(.08); } 38% { opacity: .58; transform: scaleX(.65); } 72% { opacity: .58; transform: scaleX(1); } 76% { opacity: 0; transform: scaleX(.18); } 76.01%, 100% { opacity: 0; transform: scaleX(.08); } } /* METHOD V57: ESD hard snap output fade and fully remove bottom row lines */ /* Absolute output behavior: - one box at a time - no lingering opacity - hard transparent state before next output starts */ .artifact-visual-diagnosis .esd-outcome { display: block !important; visibility: visible !important; opacity: 0; animation-name: esdOutputHardFade !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; filter: none !important; will-change: opacity, transform; } .artifact-visual-diagnosis .esd-outcome::before { animation-name: esdOutputConnectorHardFade !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-outcome::after { display: none !important; content: none !important; opacity: 0 !important; animation: none !important; } .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before { animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before { animation-delay: 7s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before { animation-delay: 14s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before { animation-delay: 28s !important; } @keyframes esdOutputHardFade { 0%, 35.49%, 100% { opacity: 0; transform: translateX(8px); } 36% { opacity: 1; transform: translateX(0); } 69.5% { opacity: 1; transform: translateX(0); } 70.5% { opacity: 0; transform: translateX(-2px); } 70.51%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputConnectorHardFade { 0%, 35.49%, 100% { opacity: 0; transform: scaleX(.08); } 36% { opacity: .58; transform: scaleX(.70); } 69.5% { opacity: .58; transform: scaleX(1); } 70.5% { opacity: 0; transform: scaleX(.12); } 70.51%, 100% { opacity: 0; transform: scaleX(.08); } } /* Hard remove the bottom two row visual lines. Previous versions hid the internal , but the row border/background and cover layer still read as lines. This removes the line feel from those two rows while keeping the labels and active red mapping. */ .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: rgba(200,64,26,.08) !important; background: linear-gradient(90deg, rgba(7,5,3,.62) 0%, rgba(7,5,3,.44) 13.25rem, rgba(7,5,3,.18) 13.25rem, rgba(7,5,3,.03) 100%) !important; box-shadow: none !important; overflow: visible !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::after, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5, .artifact-visual-diagnosis .esd-causal-thread.thread-4::before, .artifact-visual-diagnosis .esd-causal-thread.thread-4::after, .artifact-visual-diagnosis .esd-causal-thread.thread-5::before, .artifact-visual-diagnosis .esd-causal-thread.thread-5::after { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; content: none !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { content: '' !important; position: absolute !important; left: 13.15rem !important; right: -2px !important; top: -3px !important; bottom: -3px !important; z-index: 50 !important; background: rgba(7,5,3,.96) !important; opacity: 1 !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { position: relative !important; z-index: 60 !important; animation-name: esdTitleRedOnlyDuringOwnOutput !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b { animation-delay: 21s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-delay: 28s !important; } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { left: 10.4rem !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { left: 7.8rem !important; } } /* METHOD V58: ESD whole-box output cycle and normalized bottom rows */ /* Reset the bottom two rows back to the same visual structure as the others. The previous cover layer made a black block stretch across the whole row. */ .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { border: 1px solid rgba(255,255,255,.055) !important; background: linear-gradient(90deg, rgba(7,5,3,.74) 0, rgba(7,5,3,.74) 13.25rem, rgba(7,5,3,.20) 13.25rem, rgba(7,5,3,.16) 100%) !important; box-shadow: none !important; overflow: visible !important; grid-template-columns: 13.25rem 1fr !important; column-gap: 2.25rem !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { display: none !important; visibility: hidden !important; content: none !important; opacity: 0 !important; background: transparent !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { display: block !important; visibility: visible !important; width: 100% !important; height: 1px !important; opacity: .10; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.12) 24%, rgba(224,85,48,.28) 52%, rgba(88,205,210,.08) 78%, transparent 100%) !important; transform-origin: left center !important; animation-name: esdMiddleLineSubtleMaster !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; transition: none !important; } /* Kill any old lingering pseudo-elements, dots, anchors, and old cover behavior. */ .artifact-visual-diagnosis .esd-outcome::after, .artifact-visual-diagnosis .esd-travel-orb, .artifact-visual-diagnosis .esd-travel-orb::before, .artifact-visual-diagnosis .esd-travel-orb::after, .artifact-visual-diagnosis .esd-probe-dot, .artifact-visual-diagnosis .diag-pulse, .artifact-visual-diagnosis .bp-node { display: none !important; visibility: hidden !important; content: none !important; opacity: 0 !important; animation: none !important; } /* Stop using delayed animations for outcomes. Each box gets its own absolute window in one master loop. This prevents overlap and smearing. */ .artifact-visual-diagnosis .esd-outcome { display: block !important; visibility: visible !important; opacity: 0; top: 38% !important; right: 6% !important; width: 18rem !important; filter: none !important; transform: translateX(8px); animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; will-change: opacity, transform; } .artifact-visual-diagnosis .esd-outcome::before { display: block !important; visibility: visible !important; width: 11rem !important; right: 100% !important; opacity: 0; background: linear-gradient(90deg, rgba(224,85,48,.38), rgba(88,205,210,.12), transparent) !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-outcome.outcome-1, .artifact-visual-diagnosis .esd-outcome.outcome-1::before { animation-name: esdOutputWindow1 !important; } .artifact-visual-diagnosis .esd-outcome.outcome-2, .artifact-visual-diagnosis .esd-outcome.outcome-2::before { animation-name: esdOutputWindow2 !important; } .artifact-visual-diagnosis .esd-outcome.outcome-3, .artifact-visual-diagnosis .esd-outcome.outcome-3::before { animation-name: esdOutputWindow3 !important; } .artifact-visual-diagnosis .esd-outcome.outcome-4, .artifact-visual-diagnosis .esd-outcome.outcome-4::before { animation-name: esdOutputWindow4 !important; } .artifact-visual-diagnosis .esd-outcome.outcome-5, .artifact-visual-diagnosis .esd-outcome.outcome-5::before { animation-name: esdOutputWindow5 !important; } /* Row title mapping, also absolute windows, no animation delay. */ .artifact-visual-diagnosis .esd-stack-layer b { animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-1 b { animation-name: esdTitleWindow1 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2 b { animation-name: esdTitleWindow2 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3 b { animation-name: esdTitleWindow3 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b { animation-name: esdTitleWindow4 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-name: esdTitleWindow5 !important; } /* Subtle row line windows, kept away from label column by the grid. */ .artifact-visual-diagnosis .esd-stack-layer i { animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-1 i { animation-name: esdLineWindow1 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2 i { animation-name: esdLineWindow2 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { animation-name: esdLineWindow3 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 i { animation-name: esdLineWindow4 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { animation-name: esdLineWindow5 !important; } /* Output box windows. Fade is whole-box, fast, and returns fully to zero. */ @keyframes esdOutputWindow1 { 0%, 1.5% { opacity: 0; transform: translateX(8px); } 3%, 14% { opacity: 1; transform: translateX(0); } 15%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputWindow2 { 0%, 20%, 21.5% { opacity: 0; transform: translateX(8px); } 23%, 34% { opacity: 1; transform: translateX(0); } 35%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputWindow3 { 0%, 40%, 41.5% { opacity: 0; transform: translateX(8px); } 43%, 54% { opacity: 1; transform: translateX(0); } 55%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputWindow4 { 0%, 60%, 61.5% { opacity: 0; transform: translateX(8px); } 63%, 74% { opacity: 1; transform: translateX(0); } 75%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdOutputWindow5 { 0%, 80%, 81.5% { opacity: 0; transform: translateX(8px); } 83%, 94% { opacity: 1; transform: translateX(0); } 95%, 100% { opacity: 0; transform: translateX(8px); } } /* Same windows for title red state. */ @keyframes esdTitleWindow1 { 0%, 1.5%, 15%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 3%, 14% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdTitleWindow2 { 0%, 21.5%, 35%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 23%, 34% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdTitleWindow3 { 0%, 41.5%, 55%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 43%, 54% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdTitleWindow4 { 0%, 61.5%, 75%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 63%, 74% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdTitleWindow5 { 0%, 81.5%, 95%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 83%, 94% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } /* Soft line windows, no zipping. */ @keyframes esdLineWindow1 { 0%, 1.5%, 15%, 100% { opacity: .08; transform: scaleX(.22); } 3%, 14% { opacity: .42; transform: scaleX(.90); } } @keyframes esdLineWindow2 { 0%, 21.5%, 35%, 100% { opacity: .08; transform: scaleX(.22); } 23%, 34% { opacity: .42; transform: scaleX(.90); } } @keyframes esdLineWindow3 { 0%, 41.5%, 55%, 100% { opacity: .08; transform: scaleX(.22); } 43%, 54% { opacity: .42; transform: scaleX(.90); } } @keyframes esdLineWindow4 { 0%, 61.5%, 75%, 100% { opacity: .08; transform: scaleX(.22); } 63%, 74% { opacity: .28; transform: scaleX(.72); } } @keyframes esdLineWindow5 { 0%, 81.5%, 95%, 100% { opacity: .08; transform: scaleX(.22); } 83%, 94% { opacity: .28; transform: scaleX(.72); } } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { grid-template-columns: 10.5rem 1fr !important; background: linear-gradient(90deg, rgba(7,5,3,.74) 0, rgba(7,5,3,.74) 10.5rem, rgba(7,5,3,.20) 10.5rem, rgba(7,5,3,.16) 100%) !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { grid-template-columns: 7.9rem 1fr !important; background: linear-gradient(90deg, rgba(7,5,3,.74) 0, rgba(7,5,3,.74) 7.9rem, rgba(7,5,3,.20) 7.9rem, rgba(7,5,3,.16) 100%) !important; } } /* METHOD V59: ESD unify all stack rows and eliminate bottom-row special-case line artifacts */ /* The bottom two rows were behaving differently because previous patches left special-case row backgrounds/covers/borders layered on top of one another. This resets ALL five rows to one common structure. */ .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { display: grid !important; grid-template-columns: 13.25rem minmax(0, 1fr) !important; column-gap: 2.25rem !important; align-items: center !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.055) !important; background: linear-gradient(90deg, rgba(7,5,3,.78) 0, rgba(7,5,3,.78) 13.25rem, rgba(7,5,3,.16) 13.25rem, rgba(7,5,3,.08) 100%) !important; box-shadow: none !important; clip-path: none !important; mask-image: none !important; } /* Remove every row-level pseudo-element that earlier patches used as masks/covers. Those were the likely source of the stubborn lower-row lines. */ .artifact-visual-diagnosis .esd-stack-layer::before, .artifact-visual-diagnosis .esd-stack-layer::after, .artifact-visual-diagnosis .esd-stack-layer.layer-1::before, .artifact-visual-diagnosis .esd-stack-layer.layer-1::after, .artifact-visual-diagnosis .esd-stack-layer.layer-2::before, .artifact-visual-diagnosis .esd-stack-layer.layer-2::after, .artifact-visual-diagnosis .esd-stack-layer.layer-3::before, .artifact-visual-diagnosis .esd-stack-layer.layer-3::after, .artifact-visual-diagnosis .esd-stack-layer.layer-4::before, .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::before, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; animation: none !important; transform: none !important; } .artifact-visual-diagnosis .esd-stack-layer b, .artifact-visual-diagnosis .esd-stack-layer.layer-1 b, .artifact-visual-diagnosis .esd-stack-layer.layer-2 b, .artifact-visual-diagnosis .esd-stack-layer.layer-3 b, .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { position: relative !important; z-index: 5 !important; display: block !important; background: transparent !important; padding: 0 .85rem 0 0 !important; color: rgba(240,235,227,.52); white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ALL five rows now have the same dedicated right-side track. Nothing can enter the title column because the grid cell starts after the label column. */ .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { display: block !important; visibility: visible !important; position: relative !important; z-index: 2 !important; width: 100% !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; opacity: .08; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.16) 22%, rgba(224,85,48,.34) 52%, rgba(88,205,210,.08) 76%, transparent 100%) !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform-origin: left center !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-stack-layer i::before, .artifact-visual-diagnosis .esd-stack-layer i::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; } /* Give bottom rows the same kind of subtle line behavior, not a special no-line or cover behavior. */ .artifact-visual-diagnosis .esd-stack-layer.layer-1 i { animation-name: esdLineWindow1 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2 i { animation-name: esdLineWindow2 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { animation-name: esdLineWindow3 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 i { animation-name: esdLineWindow4Unified !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { animation-name: esdLineWindow5Unified !important; } /* Kill only the old free-floating causal threads for bottom rows, not the row track itself. */ .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5, .artifact-visual-diagnosis .esd-causal-thread.thread-4::before, .artifact-visual-diagnosis .esd-causal-thread.thread-4::after, .artifact-visual-diagnosis .esd-causal-thread.thread-5::before, .artifact-visual-diagnosis .esd-causal-thread.thread-5::after { display: none !important; visibility: hidden !important; opacity: 0 !important; background: transparent !important; animation: none !important; content: none !important; } @keyframes esdLineWindow4Unified { 0%, 61.5%, 75%, 100% { opacity: .08; transform: scaleX(.22); } 63%, 74% { opacity: .30; transform: scaleX(.78); } } @keyframes esdLineWindow5Unified { 0%, 81.5%, 95%, 100% { opacity: .08; transform: scaleX(.22); } 83%, 94% { opacity: .30; transform: scaleX(.78); } } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { grid-template-columns: 10.5rem minmax(0, 1fr) !important; background: linear-gradient(90deg, rgba(7,5,3,.78) 0, rgba(7,5,3,.78) 10.5rem, rgba(7,5,3,.16) 10.5rem, rgba(7,5,3,.08) 100%) !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { grid-template-columns: 7.9rem minmax(0, 1fr) !important; column-gap: 1.1rem !important; background: linear-gradient(90deg, rgba(7,5,3,.78) 0, rgba(7,5,3,.78) 7.9rem, rgba(7,5,3,.16) 7.9rem, rgba(7,5,3,.08) 100%) !important; } } /* METHOD V60: ESD physically separate label column from line track */ /* The line was no longer crossing text, but the row track still existed underneath the label column. This splits each row into a hard label zone and a separate track zone so no line can exist under the title area. */ .artifact-visual-diagnosis .esd-stack-layer, .artifact-visual-diagnosis .esd-stack-layer.layer-1, .artifact-visual-diagnosis .esd-stack-layer.layer-2, .artifact-visual-diagnosis .esd-stack-layer.layer-3, .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { display: block !important; grid-template-columns: none !important; column-gap: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Label box stops shortly after the title. */ .artifact-visual-diagnosis .esd-stack-layer b, .artifact-visual-diagnosis .esd-stack-layer.layer-1 b, .artifact-visual-diagnosis .esd-stack-layer.layer-2 b, .artifact-visual-diagnosis .esd-stack-layer.layer-3 b, .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 13.25rem !important; z-index: 20 !important; display: flex !important; align-items: center !important; padding-left: .85rem !important; padding-right: .85rem !important; background: rgba(7,5,3,.86) !important; border: 1px solid rgba(255,255,255,.050) !important; border-right: 0 !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Track physically starts after the label box. No part of it exists under the title. */ .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { position: absolute !important; left: 13.25rem !important; right: 0 !important; top: calc(50% - .5px) !important; width: auto !important; height: 1px !important; z-index: 5 !important; display: block !important; visibility: visible !important; margin: 0 !important; border: 0 !important; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.14) 12%, rgba(224,85,48,.34) 48%, rgba(88,205,210,.08) 74%, transparent 100%) !important; box-shadow: none !important; filter: none !important; transform-origin: left center !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } /* Add a subtle row boundary only in the track zone, also starting after the label. */ .artifact-visual-diagnosis .esd-stack-layer::after { content: '' !important; position: absolute !important; left: 13.25rem !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-top: 1px solid rgba(255,255,255,.030) !important; border-bottom: 1px solid rgba(255,255,255,.030) !important; background: rgba(7,5,3,.045) !important; z-index: 1 !important; opacity: 1 !important; pointer-events: none !important; display: block !important; } .artifact-visual-diagnosis .esd-stack-layer::before { content: none !important; display: none !important; } .artifact-visual-diagnosis .esd-stack-layer i::before, .artifact-visual-diagnosis .esd-stack-layer i::after { content: none !important; display: none !important; } /* Reassert the row line windows after the structure reset. */ .artifact-visual-diagnosis .esd-stack-layer.layer-1 i { animation-name: esdLineWindow1 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2 i { animation-name: esdLineWindow2 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { animation-name: esdLineWindow3 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 i { animation-name: esdLineWindow4Unified !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { animation-name: esdLineWindow5Unified !important; } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-stack-layer b { width: 10.5rem !important; } .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-stack-layer::after { left: 10.5rem !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-stack-layer b { width: 7.9rem !important; padding-left: .55rem !important; padding-right: .55rem !important; } .artifact-visual-diagnosis .esd-stack-layer i, .artifact-visual-diagnosis .esd-stack-layer::after { left: 7.9rem !important; } } /* METHOD V61: ESD remove all lines from final two rows */ /* Decision Latency and Governance Condition: no track line, no row boundary line, no causal thread */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-4 i::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::before, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i::after, .artifact-visual-diagnosis .esd-causal-thread.thread-4, .artifact-visual-diagnosis .esd-causal-thread.thread-5, .artifact-visual-diagnosis .esd-causal-thread.thread-4::before, .artifact-visual-diagnosis .esd-causal-thread.thread-4::after, .artifact-visual-diagnosis .esd-causal-thread.thread-5::before, .artifact-visual-diagnosis .esd-causal-thread.thread-5::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Remove the track-zone boundary for only the final two rows */ .artifact-visual-diagnosis .esd-stack-layer.layer-4::after, .artifact-visual-diagnosis .esd-stack-layer.layer-5::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; } /* Keep only the left label box for the final two rows */ .artifact-visual-diagnosis .esd-stack-layer.layer-4, .artifact-visual-diagnosis .esd-stack-layer.layer-5 { background: transparent !important; border: 0 !important; box-shadow: none !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-4 b, .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { display: flex !important; visibility: visible !important; opacity: 1; border: 1px solid rgba(255,255,255,.050) !important; background: rgba(7,5,3,.86) !important; z-index: 30 !important; } /* Preserve red title timing */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 b { animation-name: esdTitleWindow4 !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-5 b { animation-name: esdTitleWindow5 !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } /* METHOD V62: ESD remove free-floating lower-row diagnostic threads */ /* The stubborn movement on Decision Latency and Governance Condition is not the row . It is a free-floating causal/diagnostic thread crossing that vertical band. This hard-clips all diagnostic free-floating threads out of the lower-row zone. */ /* Disable the entire free-floating causal thread layer for ESD. The top three rows keep their internal row lines, so the visual still works. */ .artifact-visual-diagnosis .esd-causal-thread, .artifact-visual-diagnosis .esd-causal-thread::before, .artifact-visual-diagnosis .esd-causal-thread::after, .artifact-visual-diagnosis .thread-1, .artifact-visual-diagnosis .thread-2, .artifact-visual-diagnosis .thread-3, .artifact-visual-diagnosis .thread-4, .artifact-visual-diagnosis .thread-5 { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Re-assert top three row internal tracks only */ .artifact-visual-diagnosis .esd-stack-layer.layer-1 i, .artifact-visual-diagnosis .esd-stack-layer.layer-2 i, .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { display: block !important; visibility: visible !important; opacity: .08; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.16) 22%, rgba(224,85,48,.34) 52%, rgba(88,205,210,.08) 76%, transparent 100%) !important; animation-duration: 35s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-1 i { animation-name: esdLineWindow1 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-2 i { animation-name: esdLineWindow2 !important; } .artifact-visual-diagnosis .esd-stack-layer.layer-3 i { animation-name: esdLineWindow3 !important; } /* Absolute blank for final two row track zones */ .artifact-visual-diagnosis .esd-stack-layer.layer-4 i, .artifact-visual-diagnosis .esd-stack-layer.layer-5 i { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; animation: none !important; } /* METHOD V63: ESD clean rebuild, old diagnostic layers physically removed */ .artifact-visual-diagnosis { overflow: hidden; } .esd-clean-stack { position: absolute; inset: 12% 6% 12% 6%; pointer-events: none; isolation: isolate; } .esd-clean-row { position: absolute; left: 6%; right: 18%; height: 1.8rem; display: block; } .esd-clean-row.row-1 { top: 12%; } .esd-clean-row.row-2 { top: 26%; } .esd-clean-row.row-3 { top: 40%; } .esd-clean-row.row-4 { top: 54%; } .esd-clean-row.row-5 { top: 68%; } .esd-clean-row b { position: absolute; left: 0; top: 0; bottom: 0; width: 13.25rem; display: flex; align-items: center; padding: 0 .85rem; box-sizing: border-box; background: rgba(7,5,3,.86); border: 1px solid rgba(255,255,255,.050); color: rgba(240,235,227,.52); font-size: .48rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation-duration: 35s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0s; z-index: 4; } .esd-clean-row i { position: absolute; left: 13.25rem; right: 0; top: calc(50% - .5px); height: 1px; display: block; background: linear-gradient(90deg, transparent 0%, rgba(224,85,48,.16) 22%, rgba(224,85,48,.34) 52%, rgba(88,205,210,.08) 76%, transparent 100%); opacity: .08; transform-origin: left center; animation-duration: 35s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: 0s; z-index: 2; } .esd-clean-row.row-1::after, .esd-clean-row.row-2::after, .esd-clean-row.row-3::after { content: ''; position: absolute; left: 13.25rem; right: 0; top: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,.030); border-bottom: 1px solid rgba(255,255,255,.030); background: rgba(7,5,3,.045); z-index: 1; } /* Intentionally no line or track boundary for the last two rows */ .esd-clean-row.row-4::after, .esd-clean-row.row-5::after, .esd-clean-row.row-4 i, .esd-clean-row.row-5 i { display: none !important; content: none !important; } .esd-clean-row.row-1 b { animation-name: esdCleanTitle1; } .esd-clean-row.row-2 b { animation-name: esdCleanTitle2; } .esd-clean-row.row-3 b { animation-name: esdCleanTitle3; } .esd-clean-row.row-4 b { animation-name: esdCleanTitle4; } .esd-clean-row.row-5 b { animation-name: esdCleanTitle5; } .esd-clean-row.row-1 i { animation-name: esdCleanLine1; } .esd-clean-row.row-2 i { animation-name: esdCleanLine2; } .esd-clean-row.row-3 i { animation-name: esdCleanLine3; } .esd-clean-output { position: absolute; top: 35%; right: 5%; width: 18rem; box-sizing: border-box; padding: .65rem .78rem; border: 1px solid rgba(224,85,48,.38); background: radial-gradient(ellipse 90% 150% at 8% 50%, rgba(200,64,26,.095), transparent 70%), rgba(7,5,3,.72); color: rgba(240,235,227,.78); font-size: .52rem; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; opacity: 0; transform: translateX(8px); animation-duration: 35s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0s; z-index: 10; } .esd-clean-output::before { content: ''; position: absolute; right: 100%; top: 50%; width: 11rem; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.38), rgba(88,205,210,.12), transparent); opacity: 0; transform-origin: right center; animation-duration: 35s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0s; } .esd-clean-output.output-1, .esd-clean-output.output-1::before { animation-name: esdCleanOutput1; } .esd-clean-output.output-2, .esd-clean-output.output-2::before { animation-name: esdCleanOutput2; } .esd-clean-output.output-3, .esd-clean-output.output-3::before { animation-name: esdCleanOutput3; } .esd-clean-output.output-4, .esd-clean-output.output-4::before { animation-name: esdCleanOutput4; } .esd-clean-output.output-5, .esd-clean-output.output-5::before { animation-name: esdCleanOutput5; } @keyframes esdCleanOutput1 { 0%, 1.5% { opacity: 0; transform: translateX(8px); } 3%, 14% { opacity: 1; transform: translateX(0); } 15%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdCleanOutput2 { 0%, 21.5% { opacity: 0; transform: translateX(8px); } 23%, 34% { opacity: 1; transform: translateX(0); } 35%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdCleanOutput3 { 0%, 41.5% { opacity: 0; transform: translateX(8px); } 43%, 54% { opacity: 1; transform: translateX(0); } 55%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdCleanOutput4 { 0%, 61.5% { opacity: 0; transform: translateX(8px); } 63%, 74% { opacity: 1; transform: translateX(0); } 75%, 100% { opacity: 0; transform: translateX(8px); } } @keyframes esdCleanOutput5 { 0%, 81.5% { opacity: 0; transform: translateX(8px); } 83%, 94% { opacity: 1; transform: translateX(0); } 95%, 100% { opacity: 0; transform: translateX(8px); } } .esd-clean-output.output-1::before { animation-name: esdCleanConnector1; } .esd-clean-output.output-2::before { animation-name: esdCleanConnector2; } .esd-clean-output.output-3::before { animation-name: esdCleanConnector3; } .esd-clean-output.output-4::before { animation-name: esdCleanConnector4; } .esd-clean-output.output-5::before { animation-name: esdCleanConnector5; } @keyframes esdCleanConnector1 { 0%, 1.5% { opacity: 0; transform: scaleX(.08); } 3%, 14% { opacity: .58; transform: scaleX(1); } 15%, 100% { opacity: 0; transform: scaleX(.08); } } @keyframes esdCleanConnector2 { 0%, 21.5% { opacity: 0; transform: scaleX(.08); } 23%, 34% { opacity: .58; transform: scaleX(1); } 35%, 100% { opacity: 0; transform: scaleX(.08); } } @keyframes esdCleanConnector3 { 0%, 41.5% { opacity: 0; transform: scaleX(.08); } 43%, 54% { opacity: .58; transform: scaleX(1); } 55%, 100% { opacity: 0; transform: scaleX(.08); } } @keyframes esdCleanConnector4 { 0%, 61.5% { opacity: 0; transform: scaleX(.08); } 63%, 74% { opacity: .58; transform: scaleX(1); } 75%, 100% { opacity: 0; transform: scaleX(.08); } } @keyframes esdCleanConnector5 { 0%, 81.5% { opacity: 0; transform: scaleX(.08); } 83%, 94% { opacity: .58; transform: scaleX(1); } 95%, 100% { opacity: 0; transform: scaleX(.08); } } @keyframes esdCleanTitle1 { 0%, 1.5%, 15%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 3%, 14% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdCleanTitle2 { 0%, 21.5%, 35%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 23%, 34% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdCleanTitle3 { 0%, 41.5%, 55%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 43%, 54% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdCleanTitle4 { 0%, 61.5%, 75%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 63%, 74% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdCleanTitle5 { 0%, 81.5%, 95%, 100% { color: rgba(240,235,227,.52); text-shadow: none; } 83%, 94% { color: var(--red-hi); text-shadow: 0 0 14px rgba(200,64,26,.20); } } @keyframes esdCleanLine1 { 0%, 1.5%, 15%, 100% { opacity: .08; transform: scaleX(.22); } 3%, 14% { opacity: .42; transform: scaleX(.90); } } @keyframes esdCleanLine2 { 0%, 21.5%, 35%, 100% { opacity: .08; transform: scaleX(.22); } 23%, 34% { opacity: .42; transform: scaleX(.90); } } @keyframes esdCleanLine3 { 0%, 41.5%, 55%, 100% { opacity: .08; transform: scaleX(.22); } 43%, 54% { opacity: .42; transform: scaleX(.90); } } @media(max-width:1100px) { .esd-clean-row b { width: 10.5rem; } .esd-clean-row i, .esd-clean-row.row-1::after, .esd-clean-row.row-2::after, .esd-clean-row.row-3::after { left: 10.5rem; } .esd-clean-output { width: 14rem; } .esd-clean-output::before { width: 7rem; } } @media(max-width:768px) { .esd-clean-stack { inset: 12% 3% 12% 3%; } .esd-clean-row { left: 2%; right: 4%; } .esd-clean-row b { width: 7.9rem; font-size: .40rem; padding-left: .55rem; padding-right: .55rem; } .esd-clean-row i, .esd-clean-row.row-1::after, .esd-clean-row.row-2::after, .esd-clean-row.row-3::after { left: 7.9rem; } .esd-clean-output { display: none; } } @media (prefers-reduced-motion: reduce) { .esd-clean-row b, .esd-clean-row i, .esd-clean-output, .esd-clean-output::before { animation: none !important; } } /* METHOD V64: ESD surgical cleanup for Decision Latency row */ /* The clean rebuild removed almost everything, but Decision Latency still appears to inherit a visual line artifact. This fully blanks the row-4 right-side area while preserving the label/title and red mapping. */ .artifact-visual-diagnosis .esd-clean-row.row-4 { overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .artifact-visual-diagnosis .esd-clean-row.row-4 i, .artifact-visual-diagnosis .esd-clean-row.row-4 i::before, .artifact-visual-diagnosis .esd-clean-row.row-4 i::after, .artifact-visual-diagnosis .esd-clean-row.row-4::before, .artifact-visual-diagnosis .esd-clean-row.row-4::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Clear any inherited line visual in the exact row-4 vertical band to the right of the label */ .artifact-visual-diagnosis .esd-clean-row.row-4 .row-4-line-killer { display: none !important; } .artifact-visual-diagnosis .esd-clean-row.row-4 b { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 13.25rem !important; z-index: 40 !important; display: flex !important; align-items: center !important; background: rgba(7,5,3,.86) !important; border: 1px solid rgba(255,255,255,.050) !important; box-shadow: none !important; animation-name: esdCleanTitle4 !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } /* A tiny background patch only in the right-side row-4 band, matching the page background, to erase any old artifact underneath without making a visible black bar. */ .artifact-visual-diagnosis .esd-clean-row.row-4 .esd-row-4-erase, .artifact-visual-diagnosis .esd-clean-row.row-4 > em { display: block !important; position: absolute !important; left: 13.25rem !important; right: 0 !important; top: -2px !important; bottom: -2px !important; z-index: 3 !important; background: linear-gradient(90deg, rgba(7,5,3,.28), rgba(7,5,3,.18), rgba(7,5,3,.04)) !important; pointer-events: none !important; opacity: 1 !important; } @media(max-width:1100px) { .artifact-visual-diagnosis .esd-clean-row.row-4 b { width: 10.5rem !important; } .artifact-visual-diagnosis .esd-clean-row.row-4 .esd-row-4-erase, .artifact-visual-diagnosis .esd-clean-row.row-4 > em { left: 10.5rem !important; } } @media(max-width:768px) { .artifact-visual-diagnosis .esd-clean-row.row-4 b { width: 7.9rem !important; } .artifact-visual-diagnosis .esd-clean-row.row-4 .esd-row-4-erase, .artifact-visual-diagnosis .esd-clean-row.row-4 > em { left: 7.9rem !important; } } /* METHOD V65: ESD remove bottom-output connector lines */ /* The remaining Decision Latency line is the output-box connector, not a row track. Remove connectors for the final two outputs entirely. */ .artifact-visual-diagnosis .esd-clean-output.output-4::before, .artifact-visual-diagnosis .esd-clean-output.output-5::before { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Keep top three connectors as-is */ .artifact-visual-diagnosis .esd-clean-output.output-1::before, .artifact-visual-diagnosis .esd-clean-output.output-2::before, .artifact-visual-diagnosis .esd-clean-output.output-3::before { content: '' !important; display: block !important; visibility: visible !important; } /* Keep final two output boxes and red-title mapping intact */ .artifact-visual-diagnosis .esd-clean-output.output-4, .artifact-visual-diagnosis .esd-clean-output.output-5 { display: block !important; visibility: visible !important; } .artifact-visual-diagnosis .esd-clean-row.row-4 b { animation-name: esdCleanTitle4 !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-diagnosis .esd-clean-row.row-5 b { animation-name: esdCleanTitle5 !important; animation-duration: 35s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } /* METHOD V66: remove leftover Decision Latency eraser artifact */ /* This was the stubborn line: a leftover eraser element from an earlier patch. */ .artifact-visual-diagnosis .esd-row-4-erase, .artifact-visual-diagnosis .esd-row-4-erase::before, .artifact-visual-diagnosis .esd-row-4-erase::after, .artifact-visual-diagnosis em.esd-row-4-erase { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Decision Latency row has title only, no right-side artifact of any kind. */ .artifact-visual-diagnosis .esd-clean-row.row-4, .artifact-visual-diagnosis .esd-clean-row.row-4::before, .artifact-visual-diagnosis .esd-clean-row.row-4::after, .artifact-visual-diagnosis .esd-clean-row.row-4 i, .artifact-visual-diagnosis .esd-clean-row.row-4 i::before, .artifact-visual-diagnosis .esd-clean-row.row-4 i::after { background-image: none !important; box-shadow: none !important; } .artifact-visual-diagnosis .esd-clean-row.row-4::before, .artifact-visual-diagnosis .esd-clean-row.row-4::after, .artifact-visual-diagnosis .esd-clean-row.row-4 i { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: transparent !important; border: 0 !important; } /* METHOD V67: disable shared blueprint trace during ESD */ /* The remaining Decision Latency line is not part of the rebuilt ESD stack. It is the shared blueprint trace layer that sits outside the artifact-specific visual. Disable it only while the diagnosis artifact is active. */ .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-trace, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-trace::before, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-trace::after, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-line, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-line::before, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-line::after, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-node, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-node::before, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .bp-node::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Also suppress any generic schematic leftovers only while ESD is active. */ .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .blueprint-schematic > span:not(.bp-grid), .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .blueprint-schematic > span:not(.bp-grid)::before, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .blueprint-schematic > span:not(.bp-grid)::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } /* Preserve the clean rebuilt ESD stack itself. */ .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis *, .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis *::before { visibility: visible; } .artifact-blueprint-panel[data-blueprint-kind="diagnosis"] .artifact-visual-diagnosis { display: block !important; opacity: 1 !important; } /* METHOD V68: DRM delegation and escalation orbit paths */ .artifact-visual-decision { overflow: hidden; } /* Keep current DRM structure, but make the existing route less jumpy */ .drm-route { animation: drmRouteLocksSlower 9.5s ease-in-out infinite !important; } .drm-token { animation: drmTokenMovesSlower 9.5s ease-in-out infinite !important; } .drm-lock { animation: drmLockAppearsSlower 9.5s ease-in-out infinite !important; } .drm-owner { font-size: .52rem !important; letter-spacing: .17em !important; right: 4% !important; top: 45% !important; animation: drmOwnerIdentifiedSlower 9.5s ease-in-out infinite !important; } /* Blue orbs show authority moving between levels: delegation downward, escalation upward */ .drm-flow-orb { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: rgba(88,205,210,.76); box-shadow: 0 0 13px rgba(88,205,210,.32), 0 0 22px rgba(224,85,48,.07); opacity: 0; offset-rotate: 0deg; will-change: offset-distance, opacity, transform; z-index: 5; } .drm-flow-orb.delegate-one { offset-path: path("M805 62 C700 62 650 126 540 126 S360 190 245 190"); animation: drmDelegateDownOne 10.8s linear infinite; } .drm-flow-orb.delegate-two { width: 5px; height: 5px; offset-path: path("M735 124 C640 124 560 162 470 190 S310 190 180 190"); animation: drmDelegateDownTwo 12.4s linear infinite; animation-delay: -4.2s; opacity: 0; } .drm-flow-orb.escalate-one { width: 8px; height: 8px; background: rgba(224,85,48,.62); box-shadow: 0 0 13px rgba(224,85,48,.26), 0 0 22px rgba(88,205,210,.08); offset-path: path("M180 190 C310 190 400 124 520 124 S675 62 805 62"); animation: drmEscalateUpOne 11.6s linear infinite; animation-delay: -2.6s; } .drm-flow-orb.escalate-two { width: 6px; height: 6px; offset-path: path("M250 190 C410 176 460 62 610 62 S770 124 855 124"); animation: drmEscalateUpTwo 13.2s linear infinite; animation-delay: -7.4s; } /* Subtle path traces behind the criss-cross flow */ .artifact-visual-decision::before, .artifact-visual-decision::after { content: ''; position: absolute; left: 13%; right: 10%; height: 1px; pointer-events: none; opacity: 0; transform-origin: center center; z-index: 1; } .artifact-visual-decision::before { top: 52%; background: linear-gradient(90deg, transparent, rgba(88,205,210,.16), rgba(224,85,48,.10), transparent); transform: rotate(-14deg); animation: drmCrossTraceOne 10.8s ease-in-out infinite; } .artifact-visual-decision::after { top: 50%; background: linear-gradient(90deg, transparent, rgba(224,85,48,.14), rgba(88,205,210,.14), transparent); transform: rotate(14deg); animation: drmCrossTraceTwo 11.6s ease-in-out infinite; animation-delay: -3s; } @keyframes drmDelegateDownOne { 0%, 8% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 16% { opacity: .92; offset-distance: 12%; transform: scale(.94); } 48% { opacity: .92; offset-distance: 58%; transform: scale(1); } 82% { opacity: .58; offset-distance: 100%; transform: scale(.82); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.72); } } @keyframes drmDelegateDownTwo { 0%, 10% { opacity: 0; offset-distance: 0%; transform: scale(.68); } 20% { opacity: .70; offset-distance: 16%; transform: scale(.90); } 56% { opacity: .78; offset-distance: 64%; transform: scale(1); } 84% { opacity: .40; offset-distance: 100%; transform: scale(.78); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } @keyframes drmEscalateUpOne { 0%, 8% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 18% { opacity: .82; offset-distance: 12%; transform: scale(.92); } 52% { opacity: .88; offset-distance: 62%; transform: scale(1); } 84% { opacity: .52; offset-distance: 100%; transform: scale(.82); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.70); } } @keyframes drmEscalateUpTwo { 0%, 12% { opacity: 0; offset-distance: 0%; transform: scale(.70); } 22% { opacity: .68; offset-distance: 15%; transform: scale(.92); } 58% { opacity: .78; offset-distance: 66%; transform: scale(1); } 84% { opacity: .42; offset-distance: 100%; transform: scale(.80); } 100% { opacity: 0; offset-distance: 100%; transform: scale(.70); } } @keyframes drmCrossTraceOne { 0%, 100% { opacity: 0; transform: rotate(-14deg) scaleX(.20); } 22% { opacity: .18; transform: rotate(-14deg) scaleX(.64); } 54% { opacity: .34; transform: rotate(-14deg) scaleX(1); } 82% { opacity: .08; transform: rotate(-14deg) scaleX(.50); } } @keyframes drmCrossTraceTwo { 0%, 100% { opacity: 0; transform: rotate(14deg) scaleX(.20); } 24% { opacity: .18; transform: rotate(14deg) scaleX(.64); } 56% { opacity: .30; transform: rotate(14deg) scaleX(1); } 84% { opacity: .08; transform: rotate(14deg) scaleX(.50); } } @keyframes drmRouteLocksSlower { 0%, 28% { opacity: 0; stroke-dashoffset: 900; } 52% { opacity: .70; stroke-dashoffset: 0; } 76% { opacity: .42; } 100% { opacity: 0; stroke-dashoffset: -120; } } @keyframes drmTokenMovesSlower { 0%, 16% { opacity: 0; transform: translate(0,0); } 34% { opacity: .82; transform: translate(180px, 72px); } 58% { opacity: .88; transform: translate(520px, 65px); } 78% { opacity: .24; transform: translate(640px, 65px); } 100% { opacity: 0; transform: translate(640px, 65px); } } @keyframes drmLockAppearsSlower { 0%, 54%, 100% { opacity: 0; transform: scale(.6); transform-origin: 82% 50%; } 68% { opacity: .92; transform: scale(1); } 84% { opacity: .46; transform: scale(1.08); } } @keyframes drmOwnerIdentifiedSlower { 0%, 54%, 100% { opacity: 0; transform: translateY(4px); } 66% { opacity: .94; transform: translateY(0); } 86% { opacity: .76; transform: translateY(0); } 94% { opacity: .12; transform: translateY(-2px); } } @media(max-width:768px) { .drm-flow-orb { width: 5px; height: 5px; } .drm-owner { font-size: .44rem !important; } } @media (prefers-reduced-motion: reduce) { .drm-flow-orb, .artifact-visual-decision::before, .artifact-visual-decision::after { animation: none !important; } } /* METHOD V69: DRM remove old straight-line route zoom */ /* The old straight-line/token animation was still running under the new cross-level flow. Remove the rail/token route while preserving bands, criss-cross orbs, lock circle, and owner identified. */ .artifact-visual-decision .drm-route, .artifact-visual-decision .drm-route::before, .artifact-visual-decision .drm-route::after, .artifact-visual-decision .drm-token, .artifact-visual-decision .drm-token::before, .artifact-visual-decision .drm-token::after, .artifact-visual-decision .decision-route, .artifact-visual-decision .decision-route::before, .artifact-visual-decision .decision-route::after, .artifact-visual-decision .decision-token, .artifact-visual-decision .decision-token::before, .artifact-visual-decision .decision-token::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Keep the authority bands subdued, not animated like transport rails */ .artifact-visual-decision .drm-band, .artifact-visual-decision .drm-level, .artifact-visual-decision .decision-band { animation-duration: 10.8s !important; animation-timing-function: ease-in-out !important; } /* Slow the cross-level flows a touch more so they read as delegation/escalation rather than data zips */ .artifact-visual-decision .drm-flow-orb.delegate-one { animation-duration: 13.2s !important; } .artifact-visual-decision .drm-flow-orb.delegate-two { animation-duration: 14.8s !important; } .artifact-visual-decision .drm-flow-orb.escalate-one { animation-duration: 14.2s !important; } .artifact-visual-decision .drm-flow-orb.escalate-two { animation-duration: 15.6s !important; } /* Make cross traces subtle enough not to become straight rails */ .artifact-visual-decision::before, .artifact-visual-decision::after { opacity: 0; filter: none !important; height: 1px !important; max-height: 1px !important; } @keyframes drmCrossTraceOne { 0%, 100% { opacity: 0; transform: rotate(-14deg) scaleX(.12); } 28% { opacity: .08; transform: rotate(-14deg) scaleX(.52); } 58% { opacity: .16; transform: rotate(-14deg) scaleX(.88); } 84% { opacity: 0; transform: rotate(-14deg) scaleX(.32); } } @keyframes drmCrossTraceTwo { 0%, 100% { opacity: 0; transform: rotate(14deg) scaleX(.12); } 30% { opacity: .08; transform: rotate(14deg) scaleX(.52); } 60% { opacity: .14; transform: rotate(14deg) scaleX(.88); } 86% { opacity: 0; transform: rotate(14deg) scaleX(.32); } } /* Owner moment lingers, but no straight travel token leads into it */ .artifact-visual-decision .drm-lock { animation: drmLockAppearsSlower 10.8s ease-in-out infinite !important; } .artifact-visual-decision .drm-owner { animation: drmOwnerIdentifiedSlower 10.8s ease-in-out infinite !important; } /* METHOD V70: DRM curved route only, no free-floating orbs or shared straight trace */ /* Disable the shared blueprint traces while DRM is active. This is the same root cause pattern as the stubborn ESD line. */ .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-trace, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-trace::before, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-trace::after, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-line, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-line::before, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-line::after, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-node, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-node::before, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-node::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Remove the loose/free-floating criss-cross orbs and trace overlays */ .artifact-visual-decision .drm-flow-orb, .artifact-visual-decision .drm-flow-orb::before, .artifact-visual-decision .drm-flow-orb::after, .artifact-visual-decision::before, .artifact-visual-decision::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: transparent !important; box-shadow: none !important; } /* Keep existing bands, lock, and owner label. Hide old straight route/token layer so only the clean curved route shows. */ .artifact-visual-decision .drm-route, .artifact-visual-decision .drm-token, .artifact-visual-decision .decision-route, .artifact-visual-decision .decision-token { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .drm-clean-route { position: absolute; inset: 10% 5% 12% 5%; width: 90%; height: 78%; overflow: visible; pointer-events: none; z-index: 4; } .drm-clean-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 135 900; opacity: 0; filter: drop-shadow(0 0 8px rgba(200,64,26,.10)); animation-duration: 13.5s; animation-timing-function: linear; animation-iteration-count: infinite; } .drm-clean-path.path-delegate { stroke: rgba(88,205,210,.54); animation-name: drmCleanDelegateWake; } .drm-clean-path.path-escalate { stroke: rgba(224,85,48,.52); animation-name: drmCleanEscalateWake; animation-delay: 6.75s; } .drm-clean-orb { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; offset-rotate: 0deg; opacity: 0; pointer-events: none; will-change: offset-distance, opacity, transform; z-index: 6; } .drm-clean-orb.delegate { background: rgba(88,205,210,.82); box-shadow: 0 0 14px rgba(88,205,210,.34), 0 0 24px rgba(224,85,48,.06); offset-path: path("M210 70 C360 70 410 134 520 134 S710 190 845 190"); animation: drmCleanDelegateOrb 13.5s linear infinite; } .drm-clean-orb.escalate { background: rgba(224,85,48,.78); box-shadow: 0 0 14px rgba(224,85,48,.30), 0 0 24px rgba(88,205,210,.08); offset-path: path("M210 190 C350 190 420 134 540 134 S705 70 845 70"); animation: drmCleanEscalateOrb 13.5s linear infinite 6.75s; } /* The lock appears after each curved pass completes. */ .artifact-visual-decision .drm-lock { animation: drmCleanLockPulse 13.5s ease-in-out infinite !important; z-index: 7; } .artifact-visual-decision .drm-owner { text-transform: uppercase; animation: drmCleanOwnerIdentified 13.5s ease-in-out infinite !important; z-index: 8; } @keyframes drmCleanDelegateOrb { 0%, 6% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 12% { opacity: .95; offset-distance: 8%; transform: scale(.92); } 38% { opacity: .95; offset-distance: 48%; transform: scale(1); } 66% { opacity: .86; offset-distance: 100%; transform: scale(.90); } 72%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } @keyframes drmCleanEscalateOrb { 0%, 6% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 12% { opacity: .92; offset-distance: 8%; transform: scale(.92); } 38% { opacity: .92; offset-distance: 48%; transform: scale(1); } 66% { opacity: .84; offset-distance: 100%; transform: scale(.90); } 72%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } /* Wake follows the orb, not a static straight rail. */ @keyframes drmCleanDelegateWake { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 18% { opacity: .46; stroke-dashoffset: -18; } 44% { opacity: .58; stroke-dashoffset: -210; } 68% { opacity: .18; stroke-dashoffset: -500; } 76%, 100% { opacity: 0; stroke-dashoffset: -620; } } @keyframes drmCleanEscalateWake { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 18% { opacity: .44; stroke-dashoffset: -18; } 44% { opacity: .56; stroke-dashoffset: -210; } 68% { opacity: .18; stroke-dashoffset: -500; } 76%, 100% { opacity: 0; stroke-dashoffset: -620; } } @keyframes drmCleanLockPulse { 0%, 60%, 100% { opacity: 0; transform: scale(.72); transform-origin: 82% 50%; } 68% { opacity: .92; transform: scale(1); } 82% { opacity: .68; transform: scale(1.05); } 92% { opacity: .10; transform: scale(.88); } } @keyframes drmCleanOwnerIdentified { 0%, 62%, 100% { opacity: 0; transform: translateY(4px); } 70% { opacity: .96; transform: translateY(0); } 88% { opacity: .80; transform: translateY(0); } 96% { opacity: 0; transform: translateY(-2px); } } @media(max-width:768px) { .drm-clean-orb { width: 6px; height: 6px; } .drm-clean-path { stroke-width: 1.6; } } @media (prefers-reduced-motion: reduce) { .drm-clean-path, .drm-clean-orb { animation: none !important; } } /* METHOD V71: DRM precise wake, row landing reticles, row-level owner identified */ /* Replace decorative path timing with a real wake: the path is revealed behind the orb and vanishes after the orb lands. */ .artifact-visual-decision .drm-clean-route { inset: 10% 5% 12% 5% !important; z-index: 4 !important; } .artifact-visual-decision .drm-clean-path { stroke-dasharray: 0 1000 !important; stroke-dashoffset: 0 !important; opacity: 0; stroke-width: 2 !important; filter: drop-shadow(0 0 8px rgba(200,64,26,.08)); animation-duration: 15s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } /* Paths intentionally end on the authority bands: Delegate: Team row to Lead row. Escalate: Team row to Exec row. */ .artifact-visual-decision .drm-clean-path.path-delegate { d: path("M205 70 C350 72 410 132 520 132 S690 132 845 132"); stroke: rgba(88,205,210,.56) !important; animation-name: drmDelegateWakePrecise !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-clean-path.path-escalate { d: path("M205 190 C340 188 418 132 540 132 S700 70 845 70"); stroke: rgba(224,85,48,.54) !important; animation-name: drmEscalateWakePrecise !important; animation-delay: 7.5s !important; } .artifact-visual-decision .drm-clean-orb { width: 8px !important; height: 8px !important; animation-duration: 15s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; z-index: 8 !important; } .artifact-visual-decision .drm-clean-orb.delegate { offset-path: path("M205 70 C350 72 410 132 520 132 S690 132 845 132") !important; animation-name: drmDelegateOrbPrecise !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-clean-orb.escalate { offset-path: path("M205 190 C340 188 418 132 540 132 S700 70 845 70") !important; animation-name: drmEscalateOrbPrecise !important; animation-delay: 7.5s !important; } /* Hide the old generic lock/owner so the landing-specific reticle and owner label do the work. */ .artifact-visual-decision .drm-lock, .artifact-visual-decision .drm-owner { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-decision .drm-target-reticle { position: absolute; right: 16.2%; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(224,85,48,.50); box-shadow: 0 0 12px rgba(224,85,48,.18), inset 0 0 10px rgba(224,85,48,.08); opacity: 0; transform: translate(50%, -50%) scale(.72); pointer-events: none; z-index: 9; animation-duration: 15s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .artifact-visual-decision .drm-target-reticle::before, .artifact-visual-decision .drm-target-reticle::after { content: ''; position: absolute; background: rgba(224,85,48,.46); opacity: .65; } .artifact-visual-decision .drm-target-reticle::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); } .artifact-visual-decision .drm-target-reticle::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); } .artifact-visual-decision .drm-target-reticle.target-team { top: 27.1%; animation-name: drmTargetIdle; } .artifact-visual-decision .drm-target-reticle.target-lead { top: 50.8%; border-color: rgba(88,205,210,.54); box-shadow: 0 0 12px rgba(88,205,210,.18), inset 0 0 10px rgba(88,205,210,.08); animation-name: drmLeadTargetAtDelegateLanding; } .artifact-visual-decision .drm-target-reticle.target-lead::before, .artifact-visual-decision .drm-target-reticle.target-lead::after { background: rgba(88,205,210,.46); } .artifact-visual-decision .drm-target-reticle.target-exec { top: 73.8%; animation-name: drmTargetIdle; } /* Escalation lands on the exec row. Because the SVG path's y=70 maps visually to the upper band in the current DRM coordinate system, this reticle is positioned on the top band. */ .artifact-visual-decision .drm-target-reticle.target-team { animation-name: drmExecTargetAtEscalateLanding; } .artifact-visual-decision .drm-owner-row { position: absolute; right: 3.5%; width: 10.5rem; color: rgba(240,235,227,.70); font-size: .50rem; letter-spacing: .17em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(6px); pointer-events: none; z-index: 10; animation-duration: 15s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .artifact-visual-decision .drm-owner-row.owner-team { top: 27.1%; animation-name: drmOwnerAtExecLanding; } .artifact-visual-decision .drm-owner-row.owner-lead { top: 50.8%; animation-name: drmOwnerAtDelegateLanding; } .artifact-visual-decision .drm-owner-row.owner-exec { top: 73.8%; animation-name: drmOwnerIdle; } @keyframes drmDelegateOrbPrecise { 0%, 7% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 13% { opacity: .96; offset-distance: 8%; transform: scale(.92); } 48% { opacity: .96; offset-distance: 66%; transform: scale(1); } 70% { opacity: .88; offset-distance: 100%; transform: scale(.92); } 76%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } @keyframes drmEscalateOrbPrecise { 0%, 7% { opacity: 0; offset-distance: 0%; transform: scale(.72); } 13% { opacity: .94; offset-distance: 8%; transform: scale(.92); } 48% { opacity: .94; offset-distance: 66%; transform: scale(1); } 70% { opacity: .86; offset-distance: 100%; transform: scale(.92); } 76%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } /* Wake is drawn behind the orb by growing the visible dash as the orb advances. It does not sit still as a full rail. */ @keyframes drmDelegateWakePrecise { 0%, 8% { opacity: 0; stroke-dasharray: 0 1000; } 16% { opacity: .44; stroke-dasharray: 54 1000; } 36% { opacity: .56; stroke-dasharray: 180 1000; } 58% { opacity: .58; stroke-dasharray: 330 1000; } 70% { opacity: .42; stroke-dasharray: 455 1000; } 76% { opacity: 0; stroke-dasharray: 455 1000; } 100% { opacity: 0; stroke-dasharray: 0 1000; } } @keyframes drmEscalateWakePrecise { 0%, 8% { opacity: 0; stroke-dasharray: 0 1000; } 16% { opacity: .42; stroke-dasharray: 54 1000; } 36% { opacity: .54; stroke-dasharray: 180 1000; } 58% { opacity: .56; stroke-dasharray: 330 1000; } 70% { opacity: .40; stroke-dasharray: 455 1000; } 76% { opacity: 0; stroke-dasharray: 455 1000; } 100% { opacity: 0; stroke-dasharray: 0 1000; } } @keyframes drmLeadTargetAtDelegateLanding { 0%, 66%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 72% { opacity: .96; transform: translate(50%, -50%) scale(1); } 88% { opacity: .72; transform: translate(50%, -50%) scale(1.06); } 96% { opacity: 0; transform: translate(50%, -50%) scale(.80); } } @keyframes drmExecTargetAtEscalateLanding { 0%, 66%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 72% { opacity: .96; transform: translate(50%, -50%) scale(1); } 88% { opacity: .72; transform: translate(50%, -50%) scale(1.06); } 96% { opacity: 0; transform: translate(50%, -50%) scale(.80); } } @keyframes drmOwnerAtDelegateLanding { 0%, 68%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 74% { opacity: .94; transform: translateY(-50%) translateX(0); } 90% { opacity: .74; transform: translateY(-50%) translateX(0); } 98% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmOwnerAtExecLanding { 0%, 68%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 74% { opacity: .94; transform: translateY(-50%) translateX(0); } 90% { opacity: .74; transform: translateY(-50%) translateX(0); } 98% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTargetIdle { 0%, 100% { opacity: 0; } } @keyframes drmOwnerIdle { 0%, 100% { opacity: 0; } } @media(max-width:768px) { .artifact-visual-decision .drm-owner-row { right: 2%; width: 8rem; font-size: .42rem; } .artifact-visual-decision .drm-target-reticle { width: 17px; height: 17px; } } /* METHOD V72: DRM moving sine-wake to bar-end landing, no static dual targets */ /* Hide previous static reticles/row labels. Replace with one landing reticle and one owner label that appear at the active orb destination. */ .artifact-visual-decision .drm-target-reticle, .artifact-visual-decision .drm-target-reticle::before, .artifact-visual-decision .drm-target-reticle::after, .artifact-visual-decision .drm-owner-row { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-decision .drm-clean-route { inset: 10% 5% 12% 5% !important; width: 90% !important; height: 78% !important; z-index: 4 !important; overflow: visible !important; } /* Use sine-like curves that end at the end of an authority layer bar. Delegate: higher/right motion resolves on LEAD bar end. Escalate: frontline/lower path resolves on TEAM/exec-facing bar end. */ .artifact-visual-decision .drm-clean-path.path-delegate { d: path("M210 70 C315 48 365 158 475 132 S645 96 840 132") !important; stroke: rgba(88,205,210,.60) !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-dasharray: 120 900 !important; animation: drmDelegateTrueWake 14.5s linear infinite !important; } .artifact-visual-decision .drm-clean-path.path-escalate { d: path("M210 190 C330 212 390 102 520 132 S690 38 840 70") !important; stroke: rgba(224,85,48,.58) !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-dasharray: 120 900 !important; animation: drmEscalateTrueWake 14.5s linear infinite 7.25s !important; } .artifact-visual-decision .drm-clean-orb { display: block !important; visibility: visible !important; width: 8px !important; height: 8px !important; opacity: 0; offset-rotate: 0deg !important; animation-duration: 14.5s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; z-index: 8 !important; } .artifact-visual-decision .drm-clean-orb.delegate { offset-path: path("M210 70 C315 48 365 158 475 132 S645 96 840 132") !important; animation-name: drmDelegateOrbToLeadEnd !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-clean-orb.escalate { offset-path: path("M210 190 C330 212 390 102 520 132 S690 38 840 70") !important; animation-name: drmEscalateOrbToTeamEnd !important; animation-delay: 7.25s !important; } /* One dynamic reticle, moved by animation to the active landing bar. */ .artifact-visual-decision .drm-lock { display: block !important; visibility: visible !important; position: absolute !important; right: 14.8% !important; width: 23px !important; height: 23px !important; border-radius: 50% !important; border: 1px solid rgba(224,85,48,.50) !important; background: transparent !important; box-shadow: 0 0 12px rgba(224,85,48,.18), inset 0 0 10px rgba(224,85,48,.08) !important; opacity: 0; transform: translate(50%, -50%) scale(.72); animation: drmDynamicReticleAtLanding 14.5s ease-in-out infinite !important; z-index: 9 !important; } .artifact-visual-decision .drm-lock::before, .artifact-visual-decision .drm-lock::after { content: '' !important; position: absolute !important; display: block !important; background: currentColor !important; opacity: .64 !important; color: rgba(224,85,48,.50) !important; } .artifact-visual-decision .drm-lock::before { left: 50% !important; top: -6px !important; bottom: -6px !important; width: 1px !important; transform: translateX(-50%) !important; } .artifact-visual-decision .drm-lock::after { top: 50% !important; left: -6px !important; right: -6px !important; height: 1px !important; transform: translateY(-50%) !important; } .artifact-visual-decision .drm-owner { display: block !important; visibility: visible !important; position: absolute !important; right: 3.8% !important; width: 10.5rem !important; color: rgba(240,235,227,.72) !important; font-size: .50rem !important; letter-spacing: .17em !important; text-transform: uppercase !important; opacity: 0; transform: translateY(-50%) translateX(6px); animation: drmDynamicOwnerAtLanding 14.5s ease-in-out infinite !important; z-index: 10 !important; } @keyframes drmDelegateOrbToLeadEnd { 0%, 6% { opacity: 0; offset-distance: 0%; transform: scale(.70); } 12% { opacity: .96; offset-distance: 8%; transform: scale(.92); } 42% { opacity: .96; offset-distance: 56%; transform: scale(1); } 66% { opacity: .90; offset-distance: 100%; transform: scale(.92); } 72%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } @keyframes drmEscalateOrbToTeamEnd { 0%, 6% { opacity: 0; offset-distance: 0%; transform: scale(.70); } 12% { opacity: .94; offset-distance: 8%; transform: scale(.92); } 42% { opacity: .94; offset-distance: 56%; transform: scale(1); } 66% { opacity: .88; offset-distance: 100%; transform: scale(.92); } 72%, 100% { opacity: 0; offset-distance: 100%; transform: scale(.68); } } /* Wake follows behind the orb using moving dash offset, not full-path reveal. This makes it read like an oscilloscope/electron trace. */ @keyframes drmDelegateTrueWake { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 16% { opacity: .50; stroke-dashoffset: -12; } 36% { opacity: .62; stroke-dashoffset: -145; } 56% { opacity: .58; stroke-dashoffset: -300; } 70% { opacity: .20; stroke-dashoffset: -470; } 76%, 100% { opacity: 0; stroke-dashoffset: -620; } } @keyframes drmEscalateTrueWake { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 16% { opacity: .48; stroke-dashoffset: -12; } 36% { opacity: .60; stroke-dashoffset: -145; } 56% { opacity: .56; stroke-dashoffset: -300; } 70% { opacity: .20; stroke-dashoffset: -470; } 76%, 100% { opacity: 0; stroke-dashoffset: -620; } } /* The same reticle moves to the current landing row: first pass lands on LEAD, second pass lands on TEAM. */ @keyframes drmDynamicReticleAtLanding { 0%, 63%, 100% { opacity: 0; top: 50.8%; border-color: rgba(88,205,210,.54); color: rgba(88,205,210,.50); box-shadow: 0 0 12px rgba(88,205,210,.18), inset 0 0 10px rgba(88,205,210,.08); transform: translate(50%, -50%) scale(.72); } 68% { opacity: .96; top: 50.8%; border-color: rgba(88,205,210,.54); color: rgba(88,205,210,.50); transform: translate(50%, -50%) scale(1); } 84% { opacity: .70; top: 50.8%; transform: translate(50%, -50%) scale(1.06); } 90% { opacity: 0; top: 50.8%; transform: translate(50%, -50%) scale(.80); } /* Second pass window, after animation-delay on escalate orb/path */ 91%, 100% { opacity: 0; } } /* Use a second overlay through animation-delay by making the reticle visible on both half cycles. CSS cannot independently know which orb is active here, so this timeline maps the shared cycle: lead landing happens around 68-90%; escalate landing happens in the delayed cycle's same window. */ @keyframes drmDynamicOwnerAtLanding { 0%, 63%, 100% { opacity: 0; top: 50.8%; transform: translateY(-50%) translateX(6px); } 68% { opacity: .96; top: 50.8%; transform: translateY(-50%) translateX(0); } 84% { opacity: .78; top: 50.8%; transform: translateY(-50%) translateX(0); } 90% { opacity: 0; top: 50.8%; transform: translateY(-50%) translateX(-3px); } } @media(max-width:768px) { .artifact-visual-decision .drm-owner { right: 2%; width: 8rem !important; font-size: .42rem !important; } .artifact-visual-decision .drm-lock { width: 18px !important; height: 18px !important; } .artifact-visual-decision .drm-clean-path { stroke-width: 1.6 !important; } } /* METHOD V73: DRM clean rebuild with synchronized path, orb, reticle, and owner label */ .artifact-visual-decision { overflow: hidden !important; } /* Disable any old shared blueprint route/trace layers when DRM is active. */ .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-trace, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-line, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-node, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-route, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-token, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-clean-route, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-clean-orb, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-flow-orb, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-target-reticle, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-owner-row, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-lock, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-owner { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .drm-clean-system { position: absolute; inset: 10% 5% 12% 5%; pointer-events: none; isolation: isolate; } .drm-level-label { position: absolute; left: 4%; color: rgba(240,235,227,.46); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; z-index: 5; } .drm-level-label.team { top: 23.4%; } .drm-level-label.lead { top: 49.2%; color: var(--red-hi); } .drm-level-label.exec { top: 73.6%; } .drm-band { position: absolute; left: 14%; right: 12%; height: 6px; border-radius: 999px; background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); z-index: 1; } .drm-band.band-team { top: 25%; } .drm-band.band-lead { top: 50%; background: rgba(224,85,48,.30); box-shadow: inset 0 0 0 1px rgba(224,85,48,.12), 0 0 16px rgba(224,85,48,.075); } .drm-band.band-exec { top: 75%; } .drm-motion-svg { position: absolute; left: 11%; right: 8%; top: 11%; width: 81%; height: 73%; overflow: visible; z-index: 3; } .drm-motion-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; stroke-dasharray: 120 900; stroke-dashoffset: 0; } .drm-motion-path.delegate-path { stroke: rgba(88,205,210,.62); animation: drmDelegateWakeSynced 14s linear infinite; } .drm-motion-path.escalate-path { stroke: rgba(224,85,48,.60); animation: drmEscalateWakeSynced 14s linear infinite 7s; } .drm-moving-orb { opacity: 0; transform-box: fill-box; transform-origin: center; } .drm-moving-orb.delegate-orb { fill: rgba(88,205,210,.88); filter: drop-shadow(0 0 9px rgba(88,205,210,.45)); animation: drmDelegateOrbOpacity 14s linear infinite; } .drm-moving-orb.escalate-orb { fill: rgba(224,85,48,.86); filter: drop-shadow(0 0 9px rgba(224,85,48,.38)); animation: drmEscalateOrbOpacity 14s linear infinite 7s; } .drm-reticle { position: absolute; right: 12%; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: translate(50%, -50%) scale(.72); z-index: 8; animation-duration: 14s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-reticle::before, .drm-reticle::after { content: ''; position: absolute; opacity: .70; } .drm-reticle::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); } .drm-reticle::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); } .drm-reticle.reticle-lead { top: 50%; border: 1px solid rgba(88,205,210,.58); box-shadow: 0 0 12px rgba(88,205,210,.22), inset 0 0 10px rgba(88,205,210,.10); animation-name: drmLeadReticleWindow; } .drm-reticle.reticle-lead::before, .drm-reticle.reticle-lead::after { background: rgba(88,205,210,.52); } .drm-reticle.reticle-team { top: 25%; border: 1px solid rgba(224,85,48,.56); box-shadow: 0 0 12px rgba(224,85,48,.20), inset 0 0 10px rgba(224,85,48,.10); animation-name: drmTeamReticleWindow; animation-delay: 7s; } .drm-reticle.reticle-team::before, .drm-reticle.reticle-team::after { background: rgba(224,85,48,.50); } .drm-owner-label { position: absolute; right: 1.5%; width: 10.5rem; color: rgba(240,235,227,.74); font-size: .50rem; letter-spacing: .17em; line-height: 1.3; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(6px); z-index: 9; animation-duration: 14s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-owner-label.owner-lead { top: 50%; animation-name: drmLeadOwnerWindow; } .drm-owner-label.owner-team { top: 25%; animation-name: drmTeamOwnerWindow; animation-delay: 7s; } /* Wake is synced to the orb path. It reveals as the orb travels, then vanishes quickly after the landing moment so it reads as a trace/wake, not a permanent rail. */ @keyframes drmDelegateWakeSynced { 0%, 7% { opacity: 0; stroke-dasharray: 0 900; } 15% { opacity: .54; stroke-dasharray: 70 900; } 34% { opacity: .66; stroke-dasharray: 180 900; } 55% { opacity: .62; stroke-dasharray: 330 900; } 66% { opacity: .42; stroke-dasharray: 455 900; } 72%, 100% { opacity: 0; stroke-dasharray: 0 900; } } @keyframes drmEscalateWakeSynced { 0%, 7% { opacity: 0; stroke-dasharray: 0 900; } 15% { opacity: .52; stroke-dasharray: 70 900; } 34% { opacity: .64; stroke-dasharray: 180 900; } 55% { opacity: .60; stroke-dasharray: 330 900; } 66% { opacity: .40; stroke-dasharray: 455 900; } 72%, 100% { opacity: 0; stroke-dasharray: 0 900; } } @keyframes drmDelegateOrbOpacity { 0%, 7% { opacity: 0; } 13%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } } @keyframes drmEscalateOrbOpacity { 0%, 7% { opacity: 0; } 13%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } } @keyframes drmLeadReticleWindow { 0%, 64%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 69% { opacity: .96; transform: translate(50%, -50%) scale(1); } 86% { opacity: .72; transform: translate(50%, -50%) scale(1.05); } 94% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmTeamReticleWindow { 0%, 64%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 69% { opacity: .96; transform: translate(50%, -50%) scale(1); } 86% { opacity: .72; transform: translate(50%, -50%) scale(1.05); } 94% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmLeadOwnerWindow { 0%, 65%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 71% { opacity: .96; transform: translateY(-50%) translateX(0); } 88% { opacity: .78; transform: translateY(-50%) translateX(0); } 96% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTeamOwnerWindow { 0%, 65%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 71% { opacity: .96; transform: translateY(-50%) translateX(0); } 88% { opacity: .78; transform: translateY(-50%) translateX(0); } 96% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @media(max-width:768px) { .drm-moving-orb { r: 4; } .drm-motion-path { stroke-width: 1.6; } .drm-reticle { width: 17px; height: 17px; } .drm-owner-label { right: .5%; width: 8rem; font-size: .42rem; } } @media (prefers-reduced-motion: reduce) { .drm-motion-path, .drm-moving-orb, .drm-reticle, .drm-owner-label { animation: none !important; } } /* METHOD V74: DRM tighter wake-follow, endpoint reticle alignment, caught-layer label glow */ /* Tighten the wake so it behaves like a short trail close behind the orb instead of a long detached path. The dash offset now advances more aggressively, with a shorter visible dash. */ .artifact-visual-decision .drm-motion-path { stroke-dasharray: 78 900 !important; stroke-width: 2.1 !important; opacity: 0; } .artifact-visual-decision .drm-motion-path.delegate-path { animation-name: drmDelegateWakeTightFollower !important; animation-duration: 14s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-motion-path.escalate-path { animation-name: drmEscalateWakeTightFollower !important; animation-duration: 14s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-delay: 7s !important; } /* Move reticles closer to the actual path endpoints at the right edge of the layer bars. The route SVG ends around x=850, matching this right offset better than the prior static position. */ .artifact-visual-decision .drm-reticle { right: 13.35% !important; } .artifact-visual-decision .drm-owner-label { right: 2.2% !important; } /* Caught layer label lights up red at capture. */ .artifact-visual-decision .drm-level-label { animation-duration: 14s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamCaughtGlow !important; } .artifact-visual-decision .drm-level-label.lead { animation-name: drmLeadCaughtGlow !important; } .artifact-visual-decision .drm-level-label.exec { animation-name: drmExecIdleDim !important; } /* Make the bands themselves subtly confirm the catch. */ .artifact-visual-decision .drm-band.band-team { animation: drmTeamBandCatch 14s ease-in-out infinite !important; } .artifact-visual-decision .drm-band.band-lead { animation: drmLeadBandCatch 14s ease-in-out infinite !important; } .artifact-visual-decision .drm-band.band-exec { animation: drmExecBandIdle 14s ease-in-out infinite !important; } /* Owner and reticle windows now align to capture: delegate lands on Lead during first cycle; escalate lands on Team during delayed second cycle. */ .artifact-visual-decision .drm-reticle.reticle-lead, .artifact-visual-decision .drm-owner-label.owner-lead { animation-delay: 0s !important; } .artifact-visual-decision .drm-reticle.reticle-team, .artifact-visual-decision .drm-owner-label.owner-team { animation-delay: 7s !important; } @keyframes drmDelegateWakeTightFollower { 0%, 8% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 14% { opacity: .52; stroke-dasharray: 54 900; stroke-dashoffset: -24; } 30% { opacity: .64; stroke-dasharray: 78 900; stroke-dashoffset: -126; } 48% { opacity: .62; stroke-dasharray: 82 900; stroke-dashoffset: -258; } 64% { opacity: .52; stroke-dasharray: 70 900; stroke-dashoffset: -408; } 70% { opacity: .16; stroke-dasharray: 46 900; stroke-dashoffset: -486; } 74%, 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } } @keyframes drmEscalateWakeTightFollower { 0%, 8% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 14% { opacity: .50; stroke-dasharray: 54 900; stroke-dashoffset: -24; } 30% { opacity: .62; stroke-dasharray: 78 900; stroke-dashoffset: -126; } 48% { opacity: .60; stroke-dasharray: 82 900; stroke-dashoffset: -258; } 64% { opacity: .50; stroke-dasharray: 70 900; stroke-dashoffset: -408; } 70% { opacity: .16; stroke-dasharray: 46 900; stroke-dashoffset: -486; } 74%, 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } } @keyframes drmLeadCaughtGlow { 0%, 63%, 100% { color: var(--red-hi); text-shadow: 0 0 10px rgba(200,64,26,.10); } 68% { color: rgba(240,235,227,.86); text-shadow: 0 0 14px rgba(224,85,48,.26), 0 0 22px rgba(88,205,210,.10); } 88% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.22); } 96% { color: var(--red-hi); text-shadow: 0 0 10px rgba(200,64,26,.10); } } @keyframes drmTeamCaughtGlow { 0%, 63%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 68% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.26), 0 0 22px rgba(88,205,210,.08); } 88% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.20); } 96% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmExecIdleDim { 0%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmLeadBandCatch { 0%, 63%, 100% { background: rgba(224,85,48,.30); box-shadow: inset 0 0 0 1px rgba(224,85,48,.12), 0 0 16px rgba(224,85,48,.075); } 68%, 88% { background: rgba(224,85,48,.39); box-shadow: inset 0 0 0 1px rgba(224,85,48,.18), 0 0 20px rgba(224,85,48,.14); } } @keyframes drmTeamBandCatch { 0%, 63%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 68%, 88% { background: rgba(224,85,48,.24); box-shadow: inset 0 0 0 1px rgba(224,85,48,.14), 0 0 18px rgba(224,85,48,.11); } } @keyframes drmExecBandIdle { 0%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @media(max-width:768px) { .artifact-visual-decision .drm-reticle { right: 12.4% !important; } .artifact-visual-decision .drm-owner-label { right: .5% !important; } } /* METHOD V75: DRM neutral labels, exact same-path wake particles, clearer capture mapping */ /* Layer labels are neutral unless they are actively catching a decision right. */ .artifact-visual-decision .drm-level-label, .artifact-visual-decision .drm-level-label.team, .artifact-visual-decision .drm-level-label.lead, .artifact-visual-decision .drm-level-label.exec { color: rgba(240,235,227,.46) !important; text-shadow: none; animation-duration: 14s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-level-label.lead { animation-name: drmLeadCatchOnly !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamCatchOnly !important; animation-delay: 7s !important; } .artifact-visual-decision .drm-level-label.exec { animation-name: drmExecNeutralOnly !important; } /* The old stroke wake is now just a very faint carrier, while the real wake is made of trailing particles using the exact same SVG motion path as the orb. */ .artifact-visual-decision .drm-motion-path { stroke-width: 1.5 !important; opacity: 0; stroke-dasharray: 44 900 !important; } .artifact-visual-decision .drm-motion-path.delegate-path { animation-name: drmDelegateCarrierTrace !important; } .artifact-visual-decision .drm-motion-path.escalate-path { animation-name: drmEscalateCarrierTrace !important; animation-delay: 7s !important; } .artifact-visual-decision .drm-moving-trail { opacity: 0; transform-box: fill-box; transform-origin: center; } .artifact-visual-decision .drm-moving-trail.delegate-trail { fill: rgba(88,205,210,.62); filter: drop-shadow(0 0 7px rgba(88,205,210,.30)); animation: drmDelegateTrailOpacity 14s linear infinite; } .artifact-visual-decision .drm-moving-trail.delegate-trail.t1 { animation-delay: -0.18s; } .artifact-visual-decision .drm-moving-trail.delegate-trail.t2 { animation-delay: -0.36s; opacity: 0; } .artifact-visual-decision .drm-moving-trail.delegate-trail.t3 { animation-delay: -0.54s; opacity: 0; } .artifact-visual-decision .drm-moving-trail.escalate-trail { fill: rgba(224,85,48,.58); filter: drop-shadow(0 0 7px rgba(224,85,48,.26)); animation: drmEscalateTrailOpacity 14s linear infinite 7s; } .artifact-visual-decision .drm-moving-trail.escalate-trail.t1 { animation-delay: 6.82s; } .artifact-visual-decision .drm-moving-trail.escalate-trail.t2 { animation-delay: 6.64s; } .artifact-visual-decision .drm-moving-trail.escalate-trail.t3 { animation-delay: 6.46s; } /* Reticle and owner now align to the catch windows and corresponding row label glow. */ .artifact-visual-decision .drm-reticle.reticle-lead, .artifact-visual-decision .drm-owner-label.owner-lead { animation-delay: 0s !important; } .artifact-visual-decision .drm-reticle.reticle-team, .artifact-visual-decision .drm-owner-label.owner-team { animation-delay: 7s !important; } .artifact-visual-decision .drm-band.band-lead { animation: drmLeadBandCatchOnly 14s ease-in-out infinite !important; } .artifact-visual-decision .drm-band.band-team { animation: drmTeamBandCatchOnly 14s ease-in-out infinite 7s !important; } .artifact-visual-decision .drm-band.band-exec { animation: drmBandNeutralOnly 14s ease-in-out infinite !important; } @keyframes drmDelegateCarrierTrace { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 16% { opacity: .22; stroke-dashoffset: -34; } 34% { opacity: .24; stroke-dashoffset: -150; } 58% { opacity: .20; stroke-dashoffset: -320; } 69% { opacity: .08; stroke-dashoffset: -450; } 74%, 100% { opacity: 0; stroke-dashoffset: -520; } } @keyframes drmEscalateCarrierTrace { 0%, 8% { opacity: 0; stroke-dashoffset: 0; } 16% { opacity: .20; stroke-dashoffset: -34; } 34% { opacity: .23; stroke-dashoffset: -150; } 58% { opacity: .19; stroke-dashoffset: -320; } 69% { opacity: .08; stroke-dashoffset: -450; } 74%, 100% { opacity: 0; stroke-dashoffset: -520; } } @keyframes drmDelegateTrailOpacity { 0%, 8% { opacity: 0; } 14%, 62% { opacity: .74; } 68% { opacity: .34; } 72%, 100% { opacity: 0; } } @keyframes drmEscalateTrailOpacity { 0%, 8% { opacity: 0; } 14%, 62% { opacity: .72; } 68% { opacity: .32; } 72%, 100% { opacity: 0; } } @keyframes drmLeadCatchOnly { 0%, 64%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 69% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.28), 0 0 20px rgba(88,205,210,.08); } 88% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.22); } 96% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamCatchOnly { 0%, 64%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 69% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.28), 0 0 20px rgba(88,205,210,.08); } 88% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.22); } 96% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmExecNeutralOnly { 0%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmLeadBandCatchOnly { 0%, 64%, 100% { background: rgba(224,85,48,.30); box-shadow: inset 0 0 0 1px rgba(224,85,48,.12), 0 0 16px rgba(224,85,48,.075); } 69%, 88% { background: rgba(224,85,48,.40); box-shadow: inset 0 0 0 1px rgba(224,85,48,.18), 0 0 20px rgba(224,85,48,.14); } } @keyframes drmTeamBandCatchOnly { 0%, 64%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 69%, 88% { background: rgba(224,85,48,.24); box-shadow: inset 0 0 0 1px rgba(224,85,48,.14), 0 0 18px rgba(224,85,48,.11); } } @keyframes drmBandNeutralOnly { 0%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } /* METHOD V76: DRM remove particle nose, stronger wake, neutral bands, visible capture flash */ /* Remove the particle trail. It followed the path, but visually read like a weird nose/debris. The wake now comes from the path stroke itself. */ .artifact-visual-decision .drm-moving-trail, .artifact-visual-decision .drm-moving-trail::before, .artifact-visual-decision .drm-moving-trail::after { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; filter: none !important; } /* Make all authority bars neutral by default. Lead should not sit amber all the time. It only lights during capture. */ .artifact-visual-decision .drm-band.band-team, .artifact-visual-decision .drm-band.band-lead, .artifact-visual-decision .drm-band.band-exec { background: rgba(240,235,227,.070) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important; animation-duration: 14s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-decision .drm-band.band-team { animation-name: drmTeamBandCatchVisible !important; animation-delay: 7s !important; } .artifact-visual-decision .drm-band.band-lead { animation-name: drmLeadBandCatchVisible !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-band.band-exec { animation-name: drmBandAlwaysNeutral !important; animation-delay: 0s !important; } /* Stronger path wake, still time-limited. It reads as the orb drawing a signal, not a detached rail. */ .artifact-visual-decision .drm-motion-path { stroke-width: 2.4 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 0; filter: drop-shadow(0 0 7px rgba(88,205,210,.14)); stroke-dasharray: 92 900 !important; } .artifact-visual-decision .drm-motion-path.delegate-path { stroke: rgba(88,205,210,.72) !important; animation: drmDelegateVisibleWake 14s linear infinite !important; } .artifact-visual-decision .drm-motion-path.escalate-path { stroke: rgba(224,85,48,.68) !important; animation: drmEscalateVisibleWake 14s linear infinite 7s !important; } /* Make layer names actually flash red at capture. Use !important keyframes by assigning at the most specific selector level. */ .artifact-visual-decision .drm-level-label.team, .artifact-visual-decision .drm-level-label.lead, .artifact-visual-decision .drm-level-label.exec { color: rgba(240,235,227,.46) !important; text-shadow: none !important; animation-duration: 14s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-decision .drm-level-label.lead { animation-name: drmLeadLabelCaptureRed !important; animation-delay: 0s !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamLabelCaptureRed !important; animation-delay: 7s !important; } .artifact-visual-decision .drm-level-label.exec { animation-name: drmExecLabelNeutral !important; animation-delay: 0s !important; } /* Make the orb itself the obvious moving object. */ .artifact-visual-decision .drm-moving-orb.delegate-orb { fill: rgba(88,205,210,.95) !important; filter: drop-shadow(0 0 10px rgba(88,205,210,.52)) !important; } .artifact-visual-decision .drm-moving-orb.escalate-orb { fill: rgba(224,85,48,.92) !important; filter: drop-shadow(0 0 10px rgba(224,85,48,.42)) !important; } /* Reticle/owner remain tied to capture windows. */ .artifact-visual-decision .drm-reticle.reticle-lead, .artifact-visual-decision .drm-owner-label.owner-lead { animation-delay: 0s !important; } .artifact-visual-decision .drm-reticle.reticle-team, .artifact-visual-decision .drm-owner-label.owner-team { animation-delay: 7s !important; } @keyframes drmDelegateVisibleWake { 0%, 8% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 14% { opacity: .62; stroke-dasharray: 76 900; stroke-dashoffset: -22; } 32% { opacity: .74; stroke-dasharray: 96 900; stroke-dashoffset: -130; } 52% { opacity: .70; stroke-dasharray: 108 900; stroke-dashoffset: -275; } 66% { opacity: .54; stroke-dasharray: 90 900; stroke-dashoffset: -430; } 72%, 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } } @keyframes drmEscalateVisibleWake { 0%, 8% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: 0; } 14% { opacity: .60; stroke-dasharray: 76 900; stroke-dashoffset: -22; } 32% { opacity: .72; stroke-dasharray: 96 900; stroke-dashoffset: -130; } 52% { opacity: .68; stroke-dasharray: 108 900; stroke-dashoffset: -275; } 66% { opacity: .52; stroke-dasharray: 90 900; stroke-dashoffset: -430; } 72%, 100% { opacity: 0; stroke-dasharray: 0 900; stroke-dashoffset: -520; } } @keyframes drmLeadLabelCaptureRed { 0%, 64%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 68% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 24px rgba(224,85,48,.18); } 88% { color: var(--red-hi); text-shadow: 0 0 16px rgba(224,85,48,.28), 0 0 24px rgba(224,85,48,.12); } 96% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamLabelCaptureRed { 0%, 64%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 68% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34), 0 0 24px rgba(224,85,48,.18); } 88% { color: var(--red-hi); text-shadow: 0 0 16px rgba(224,85,48,.28), 0 0 24px rgba(224,85,48,.12); } 96% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmExecLabelNeutral { 0%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmLeadBandCatchVisible { 0%, 64%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 68%, 88% { background: rgba(224,85,48,.34); box-shadow: inset 0 0 0 1px rgba(224,85,48,.18), 0 0 18px rgba(224,85,48,.14); } 96% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @keyframes drmTeamBandCatchVisible { 0%, 64%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 68%, 88% { background: rgba(224,85,48,.30); box-shadow: inset 0 0 0 1px rgba(224,85,48,.16), 0 0 18px rgba(224,85,48,.12); } 96% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @keyframes drmBandAlwaysNeutral { 0%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } /* METHOD V77: DRM no sine wave, pulsing decision orbs with misty wake and all three landing rows */ .artifact-visual-decision { overflow: hidden !important; } .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-trace, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-line, .artifact-blueprint-panel[data-blueprint-kind="decision"] .bp-node, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-route, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-token, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-clean-route, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-clean-orb, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-flow-orb, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-target-reticle, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-owner-row, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-lock, .artifact-blueprint-panel[data-blueprint-kind="decision"] .drm-owner { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .drm-clean-system { position: absolute; inset: 10% 5% 12% 5%; pointer-events: none; isolation: isolate; } .drm-level-label { position: absolute; left: 4%; color: rgba(240,235,227,.46); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; z-index: 5; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-level-label.team { top: 23.4%; animation-name: drmTeamCatchLabel; } .drm-level-label.lead { top: 49.2%; animation-name: drmLeadCatchLabel; } .drm-level-label.exec { top: 73.6%; animation-name: drmExecCatchLabel; } .drm-band { position: absolute; left: 14%; right: 12%; height: 6px; border-radius: 999px; background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); z-index: 1; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-band.band-team { top: 25%; animation-name: drmTeamCatchBand; } .drm-band.band-lead { top: 50%; animation-name: drmLeadCatchBand; } .drm-band.band-exec { top: 75%; animation-name: drmExecCatchBand; } .drm-motion-svg { position: absolute; left: 11%; right: 8%; top: 11%; width: 81%; height: 73%; overflow: visible; z-index: 3; } .drm-motion-path.hidden-path { fill: none; stroke: transparent; opacity: 0; } .drm-pulse-orb { opacity: 0; transform-box: fill-box; transform-origin: center; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-pulse-orb.orb-lead { fill: rgba(88,205,210,.95); filter: drop-shadow(0 0 10px rgba(88,205,210,.55)); animation-name: drmLeadOrbPulse; } .drm-pulse-orb.orb-exec { fill: rgba(224,85,48,.95); filter: drop-shadow(0 0 10px rgba(224,85,48,.46)); animation-name: drmExecOrbPulse; } .drm-pulse-orb.orb-team { fill: rgba(88,205,210,.92); filter: drop-shadow(0 0 10px rgba(88,205,210,.45)); animation-name: drmTeamOrbPulse; } .drm-mist { opacity: 0; transform-box: fill-box; transform-origin: center; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-mist.mist-lead { fill: rgba(88,205,210,.42); filter: drop-shadow(0 0 8px rgba(88,205,210,.22)); animation-name: drmLeadMist; } .drm-mist.mist-exec { fill: rgba(224,85,48,.38); filter: drop-shadow(0 0 8px rgba(224,85,48,.20)); animation-name: drmExecMist; } .drm-mist.mist-team { fill: rgba(88,205,210,.36); filter: drop-shadow(0 0 8px rgba(88,205,210,.18)); animation-name: drmTeamMist; } .drm-mist.m1 { opacity: 0; } .drm-mist.m2 { opacity: 0; } .drm-mist.m3 { opacity: 0; } .drm-reticle { position: absolute; right: 12%; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: translate(50%, -50%) scale(.72); z-index: 8; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-reticle::before, .drm-reticle::after { content: ''; position: absolute; opacity: .70; } .drm-reticle::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); } .drm-reticle::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); } .drm-reticle.reticle-team { top: 25%; border: 1px solid rgba(88,205,210,.58); box-shadow: 0 0 12px rgba(88,205,210,.22), inset 0 0 10px rgba(88,205,210,.10); animation-name: drmTeamReticle; } .drm-reticle.reticle-team::before, .drm-reticle.reticle-team::after { background: rgba(88,205,210,.52); } .drm-reticle.reticle-lead { top: 50%; border: 1px solid rgba(88,205,210,.58); box-shadow: 0 0 12px rgba(88,205,210,.22), inset 0 0 10px rgba(88,205,210,.10); animation-name: drmLeadReticle; } .drm-reticle.reticle-lead::before, .drm-reticle.reticle-lead::after { background: rgba(88,205,210,.52); } .drm-reticle.reticle-exec { top: 75%; border: 1px solid rgba(224,85,48,.58); box-shadow: 0 0 12px rgba(224,85,48,.20), inset 0 0 10px rgba(224,85,48,.10); animation-name: drmExecReticle; } .drm-reticle.reticle-exec::before, .drm-reticle.reticle-exec::after { background: rgba(224,85,48,.52); } .drm-owner-label { position: absolute; right: 1.5%; width: 10.5rem; color: rgba(240,235,227,.74); font-size: .50rem; letter-spacing: .17em; line-height: 1.3; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(6px); z-index: 9; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .drm-owner-label.owner-team { top: 25%; animation-name: drmTeamOwner; } .drm-owner-label.owner-lead { top: 50%; animation-name: drmLeadOwner; } .drm-owner-label.owner-exec { top: 75%; animation-name: drmExecOwner; } /* Orbs are active during their thirds of the loop. */ @keyframes drmLeadOrbPulse { 0%, 5%, 34%, 100% { opacity: 0; r: 5; } 8%, 27% { opacity: 1; r: 6; } 14%, 22% { opacity: .92; r: 7; } } @keyframes drmExecOrbPulse { 0%, 38%, 67%, 100% { opacity: 0; r: 5; } 41%, 60% { opacity: 1; r: 6; } 47%, 55% { opacity: .92; r: 7; } } @keyframes drmTeamOrbPulse { 0%, 71%, 99%, 100% { opacity: 0; r: 5; } 74%, 93% { opacity: 1; r: 6; } 80%, 88% { opacity: .92; r: 7; } } @keyframes drmLeadMist { 0%, 6%, 34%, 100% { opacity: 0; } 12%, 26% { opacity: .42; } 30% { opacity: .12; } } @keyframes drmExecMist { 0%, 39%, 67%, 100% { opacity: 0; } 45%, 59% { opacity: .40; } 63% { opacity: .12; } } @keyframes drmTeamMist { 0%, 72%, 100% { opacity: 0; } 78%, 92% { opacity: .36; } 96% { opacity: .10; } } /* Capture windows */ @keyframes drmLeadReticle { 0%, 27%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 29% { opacity: .96; transform: translate(50%, -50%) scale(1); } 33% { opacity: .20; transform: translate(50%, -50%) scale(1.08); } 35% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmExecReticle { 0%, 60%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 62% { opacity: .96; transform: translate(50%, -50%) scale(1); } 66% { opacity: .20; transform: translate(50%, -50%) scale(1.08); } 68% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmTeamReticle { 0%, 93%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 95% { opacity: .96; transform: translate(50%, -50%) scale(1); } 98% { opacity: .20; transform: translate(50%, -50%) scale(1.08); } 99% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmLeadOwner { 0%, 28%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 30%, 33% { opacity: .94; transform: translateY(-50%) translateX(0); } 35% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmExecOwner { 0%, 61%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 63%, 66% { opacity: .94; transform: translateY(-50%) translateX(0); } 68% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTeamOwner { 0%, 94%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 96%, 98% { opacity: .94; transform: translateY(-50%) translateX(0); } 99% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmLeadCatchLabel { 0%, 28%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 30%, 33% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 35% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmExecCatchLabel { 0%, 61%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 63%, 66% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 68% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamCatchLabel { 0%, 94%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 96%, 98% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 99% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmLeadCatchBand { 0%, 28%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 30%, 33% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 35% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @keyframes drmExecCatchBand { 0%, 61%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 63%, 66% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 68% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @keyframes drmTeamCatchBand { 0%, 94%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 96%, 98% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 99% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } @media(max-width:768px) { .drm-pulse-orb { r: 4; } .drm-reticle { width: 17px; height: 17px; } .drm-owner-label { right: .5%; width: 8rem; font-size: .42rem; } } @media (prefers-reduced-motion: reduce) { .drm-pulse-orb, .drm-mist, .drm-reticle, .drm-owner-label, .drm-level-label, .drm-band { animation: none !important; } } /* METHOD V78: DRM remove mist particles, keep pulsing orb glow only */ /* The mist particles read like a nose/comet tail. Remove all mist elements visually and let the orb itself provide the motion/glow. */ .artifact-visual-decision .drm-mist, .artifact-visual-decision .drm-mist.m1, .artifact-visual-decision .drm-mist.m2, .artifact-visual-decision .drm-mist.m3, .artifact-visual-decision .mist-lead, .artifact-visual-decision .mist-exec, .artifact-visual-decision .mist-team { display: none !important; visibility: hidden !important; opacity: 0 !important; r: 0 !important; filter: none !important; animation: none !important; } /* Make the orb glow carry the visual instead. Slightly stronger pulse, but no trailing particles. */ .artifact-visual-decision .drm-pulse-orb { display: block !important; visibility: visible !important; opacity: 0; transform-box: fill-box; transform-origin: center; animation-duration: 18s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-decision .drm-pulse-orb.orb-lead { fill: rgba(88,205,210,.96) !important; filter: drop-shadow(0 0 8px rgba(88,205,210,.58)) drop-shadow(0 0 18px rgba(88,205,210,.20)) !important; animation-name: drmLeadOrbCleanPulse !important; } .artifact-visual-decision .drm-pulse-orb.orb-exec { fill: rgba(224,85,48,.94) !important; filter: drop-shadow(0 0 8px rgba(224,85,48,.48)) drop-shadow(0 0 18px rgba(224,85,48,.18)) !important; animation-name: drmExecOrbCleanPulse !important; } .artifact-visual-decision .drm-pulse-orb.orb-team { fill: rgba(88,205,210,.92) !important; filter: drop-shadow(0 0 8px rgba(88,205,210,.48)) drop-shadow(0 0 18px rgba(88,205,210,.18)) !important; animation-name: drmTeamOrbCleanPulse !important; } @keyframes drmLeadOrbCleanPulse { 0%, 5%, 34%, 100% { opacity: 0; r: 5; } 8%, 27% { opacity: 1; r: 6; } 14%, 22% { opacity: .94; r: 7.4; } 29% { opacity: .30; r: 5.8; } } @keyframes drmExecOrbCleanPulse { 0%, 38%, 67%, 100% { opacity: 0; r: 5; } 41%, 60% { opacity: 1; r: 6; } 47%, 55% { opacity: .94; r: 7.4; } 62% { opacity: .30; r: 5.8; } } @keyframes drmTeamOrbCleanPulse { 0%, 71%, 99%, 100% { opacity: 0; r: 5; } 74%, 93% { opacity: 1; r: 6; } 80%, 88% { opacity: .94; r: 7.4; } 95% { opacity: .30; r: 5.8; } } /* METHOD V79: DRM fix Team capture window before loop reset */ /* Team was landing too close to the end of the 18s loop, so the reticle/owner/capture sequence was being clipped by the animation reset. Move the Team route earlier and give the capture window room to complete. */ /* Move Team path timing earlier from 12s to 10.6s and keep it inside the 18s loop. */ .artifact-visual-decision .drm-pulse-orb.orb-team animateMotion, .artifact-visual-decision .drm-mist.mist-team animateMotion { begin: 10.6s; } /* CSS cannot reliably override SVG begin attributes everywhere, so the markup is also updated below. */ .artifact-visual-decision .drm-pulse-orb.orb-team { animation-name: drmTeamOrbCleanPulseFixed !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamCatchLabelFixed !important; } .artifact-visual-decision .drm-band.band-team { animation-name: drmTeamCatchBandFixed !important; } .artifact-visual-decision .drm-reticle.reticle-team { animation-name: drmTeamReticleFixed !important; } .artifact-visual-decision .drm-owner-label.owner-team { animation-name: drmTeamOwnerFixed !important; } @keyframes drmTeamOrbCleanPulseFixed { 0%, 62%, 91%, 100% { opacity: 0; r: 5; } 65%, 84% { opacity: 1; r: 6; } 71%, 79% { opacity: .94; r: 7.4; } 87% { opacity: .30; r: 5.8; } } @keyframes drmTeamReticleFixed { 0%, 84%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 86% { opacity: .96; transform: translate(50%, -50%) scale(1); } 90% { opacity: .72; transform: translate(50%, -50%) scale(1.08); } 94% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmTeamOwnerFixed { 0%, 85%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 87%, 91% { opacity: .94; transform: translateY(-50%) translateX(0); } 95% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTeamCatchLabelFixed { 0%, 85%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 87%, 91% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 95% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamCatchBandFixed { 0%, 85%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 87%, 91% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 95% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } /* METHOD V80: DRM Team capture timing aligned earlier to actual landing */ /* Team capture was triggering too late. The orb visually arrives before the target sequence. Move only the Team capture window earlier while keeping the Team route timing. */ .artifact-visual-decision .drm-reticle.reticle-team { animation-name: drmTeamReticleEarlyAligned !important; } .artifact-visual-decision .drm-owner-label.owner-team { animation-name: drmTeamOwnerEarlyAligned !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamCatchLabelEarlyAligned !important; } .artifact-visual-decision .drm-band.band-team { animation-name: drmTeamCatchBandEarlyAligned !important; } /* Earlier capture window: - Reticle begins around 77% - Owner/text + row glow come in around 78% - Holds through 84% - Clears before the loop reset */ @keyframes drmTeamReticleEarlyAligned { 0%, 75%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 77% { opacity: .96; transform: translate(50%, -50%) scale(1); } 84% { opacity: .78; transform: translate(50%, -50%) scale(1.08); } 90% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmTeamOwnerEarlyAligned { 0%, 76%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 78%, 85% { opacity: .94; transform: translateY(-50%) translateX(0); } 91% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTeamCatchLabelEarlyAligned { 0%, 76%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 78%, 85% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 91% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamCatchBandEarlyAligned { 0%, 76%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 78%, 85% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 91% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } /* METHOD V81: DRM remove stale Team capture delay */ /* Team capture was still late because an older animation-delay was shifting the Team reticle/owner/label/bar after the updated keyframes. Force all Team capture effects onto the master 18s loop with zero delay. */ .artifact-visual-decision .drm-reticle.reticle-team, .artifact-visual-decision .drm-owner-label.owner-team, .artifact-visual-decision .drm-level-label.team, .artifact-visual-decision .drm-band.band-team { animation-delay: 0s !important; animation-duration: 18s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .artifact-visual-decision .drm-reticle.reticle-team { animation-name: drmTeamReticleMasterAligned !important; } .artifact-visual-decision .drm-owner-label.owner-team { animation-name: drmTeamOwnerMasterAligned !important; } .artifact-visual-decision .drm-level-label.team { animation-name: drmTeamLabelMasterAligned !important; } .artifact-visual-decision .drm-band.band-team { animation-name: drmTeamBandMasterAligned !important; } /* Team orb begins at 10.6s and reaches endpoint around 15.6s, roughly 86.7% of the 18s loop. Fire the capture just before/at that point. */ @keyframes drmTeamReticleMasterAligned { 0%, 83%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 86% { opacity: .96; transform: translate(50%, -50%) scale(1); } 91% { opacity: .78; transform: translate(50%, -50%) scale(1.08); } 96% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes drmTeamOwnerMasterAligned { 0%, 84%, 100% { opacity: 0; transform: translateY(-50%) translateX(6px); } 87%, 92% { opacity: .94; transform: translateY(-50%) translateX(0); } 97% { opacity: 0; transform: translateY(-50%) translateX(-3px); } } @keyframes drmTeamLabelMasterAligned { 0%, 84%, 100% { color: rgba(240,235,227,.46); text-shadow: none; } 87%, 92% { color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.34); } 97% { color: rgba(240,235,227,.46); text-shadow: none; } } @keyframes drmTeamBandMasterAligned { 0%, 84%, 100% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } 87%, 92% { background: rgba(224,85,48,.32); box-shadow: 0 0 18px rgba(224,85,48,.12); } 97% { background: rgba(240,235,227,.070); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } } /* METHOD V83: O.R.D. scattered signals become designed cadence */ .artifact-visual-rhythm { overflow: hidden !important; } .ord-cadence-system { position: absolute; inset: 10% 5% 12% 5%; pointer-events: none; isolation: isolate; } .ord-state { position: absolute; top: 8%; color: rgba(240,235,227,.38); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; z-index: 8; } .ord-state.scattered { left: 5%; animation: ordScatteredState 11s ease-in-out infinite; } .ord-state.cadence { right: 5%; color: var(--red-hi); animation: ordCadenceState 11s ease-in-out infinite; } .ord-lane { position: absolute; left: 11%; right: 10%; height: 2.3rem; border-top: 1px solid rgba(255,255,255,.040); border-bottom: 1px solid rgba(255,255,255,.026); background: linear-gradient(90deg, rgba(7,5,3,.18), rgba(7,5,3,.060), transparent); z-index: 2; opacity: .46; animation: ordLaneStabilize 11s ease-in-out infinite; } .ord-lane b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: rgba(240,235,227,.42); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; } .ord-lane i { position: absolute; left: 13.5rem; right: 0; top: calc(50% - .5px); height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.26), rgba(88,205,210,.10), transparent); opacity: .10; transform-origin: left center; animation: ordLaneSignal 11s ease-in-out infinite; } .ord-lane.lane-weekly { top: 24%; } .ord-lane.lane-decision { top: 40%; } .ord-lane.lane-escalation { top: 56%; } .ord-lane.lane-learning { top: 72%; } .ord-scatter-node { position: absolute; width: 4.8rem; height: 1.35rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.050); background: rgba(7,5,3,.58); color: rgba(240,235,227,.35); font-size: .42rem; letter-spacing: .14em; text-transform: uppercase; z-index: 6; animation: ordNodeFindsCadence 11s cubic-bezier(.22,1,.36,1) infinite; } .ord-scatter-node.n1 { left: 14%; top: 32%; animation-delay: 0s; } .ord-scatter-node.n2 { left: 31%; top: 67%; animation-delay: .16s; } .ord-scatter-node.n3 { left: 47%; top: 22%; animation-delay: .32s; } .ord-scatter-node.n4 { left: 63%; top: 61%; animation-delay: .48s; } .ord-scatter-node.n5 { left: 72%; top: 37%; animation-delay: .64s; } .ord-cadence-sweep { position: absolute; top: 18%; bottom: 8%; width: 1px; left: 8%; background: linear-gradient(180deg, transparent, rgba(88,205,210,.18), rgba(224,85,48,.50), rgba(88,205,210,.18), transparent); box-shadow: 0 0 18px rgba(224,85,48,.16), 0 0 26px rgba(88,205,210,.07); opacity: 0; z-index: 5; animation: ordCadenceSweep 11s ease-in-out infinite; } .ord-beat { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(224,85,48,.70); box-shadow: 0 0 12px rgba(224,85,48,.22), 0 0 20px rgba(88,205,210,.06); opacity: 0; z-index: 7; animation: ordBeatPulse 11s ease-in-out infinite; } .ord-beat.weekly { top: calc(24% + 1.15rem); } .ord-beat.decision { top: calc(40% + 1.15rem); background: rgba(88,205,210,.70); box-shadow: 0 0 12px rgba(88,205,210,.22); } .ord-beat.escalation { top: calc(56% + 1.15rem); } .ord-beat.learning { top: calc(72% + 1.15rem); background: rgba(88,205,210,.62); box-shadow: 0 0 12px rgba(88,205,210,.18); } .ord-beat.b1 { left: 41%; animation-delay: 5.0s; } .ord-beat.b2 { left: 61%; animation-delay: 5.55s; } .ord-beat.b3 { left: 81%; animation-delay: 6.1s; } .ord-beat.decision.b1 { left: 51%; animation-delay: 5.35s; } .ord-beat.decision.b2 { left: 76%; animation-delay: 6.35s; } .ord-beat.escalation.b1 { left: 46%; animation-delay: 5.7s; } .ord-beat.escalation.b2 { left: 83%; animation-delay: 6.55s; } .ord-beat.learning.b1 { left: 58%; animation-delay: 6.05s; } .ord-beat.learning.b2 { left: 88%; animation-delay: 6.8s; } .ord-lock { position: absolute; right: 3%; width: 12.5rem; color: rgba(240,235,227,.66); font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(8px); z-index: 8; animation: ordLockLabel 11s ease-in-out infinite; } .ord-lock.lock-weekly { top: calc(24% + 1.15rem); animation-delay: 5.2s; } .ord-lock.lock-decision { top: calc(40% + 1.15rem); animation-delay: 5.65s; } .ord-lock.lock-escalation { top: calc(56% + 1.15rem); animation-delay: 6.1s; } .ord-lock.lock-learning { top: calc(72% + 1.15rem); animation-delay: 6.55s; } @keyframes ordScatteredState { 0%, 28% { opacity: .70; color: rgba(240,235,227,.38); } 48% { opacity: .22; color: rgba(240,235,227,.24); } 70%, 100% { opacity: .14; } } @keyframes ordCadenceState { 0%, 34% { opacity: .16; } 50% { opacity: .44; } 66%, 90% { opacity: .95; text-shadow: 0 0 14px rgba(224,85,48,.24); } 100% { opacity: .22; } } @keyframes ordLaneStabilize { 0%, 30% { opacity: .20; transform: translateX(0); border-color: rgba(255,255,255,.025); } 48% { opacity: .48; transform: translateX(3px); } 68%, 90% { opacity: .78; transform: translateX(0); border-top-color: rgba(224,85,48,.12); border-bottom-color: rgba(88,205,210,.05); } 100% { opacity: .28; } } @keyframes ordLaneSignal { 0%, 38% { opacity: .06; transform: scaleX(.18); } 54% { opacity: .36; transform: scaleX(.64); } 72%, 90% { opacity: .62; transform: scaleX(1); } 100% { opacity: .10; transform: scaleX(.24); } } @keyframes ordNodeFindsCadence { 0%, 24% { opacity: .58; transform: translate(0,0) scale(1); border-color: rgba(255,255,255,.050); } 42% { opacity: .72; transform: translate(18px, -8px) scale(.96); border-color: rgba(224,85,48,.18); } 58% { opacity: .22; transform: translate(34px, 0) scale(.86); } 70%, 100% { opacity: 0; transform: translate(48px, 0) scale(.78); } } @keyframes ordCadenceSweep { 0%, 30% { opacity: 0; left: 8%; } 40% { opacity: .70; left: 22%; } 58% { opacity: .86; left: 58%; } 74% { opacity: .52; left: 90%; } 86%, 100% { opacity: 0; left: 94%; } } @keyframes ordBeatPulse { 0%, 46%, 100% { opacity: 0; transform: scale(.6); } 56% { opacity: .88; transform: scale(1.12); } 68% { opacity: .64; transform: scale(.94); } 82% { opacity: .18; transform: scale(.72); } } @keyframes ordLockLabel { 0%, 50%, 100% { opacity: 0; transform: translateY(-50%) translateX(8px); } 62% { opacity: .88; transform: translateY(-50%) translateX(0); } 80% { opacity: .58; transform: translateY(-50%) translateX(0); } 92% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @media(max-width:768px) { .ord-cadence-system { inset: 8% 3% 10% 3%; } .ord-lane { left: 5%; right: 5%; } .ord-lane b { font-size: .40rem; } .ord-lane i { left: 8.5rem; } .ord-scatter-node { width: 3.8rem; font-size: .34rem; } .ord-lock { display: none; } } @media (prefers-reduced-motion: reduce) { .ord-state, .ord-lane, .ord-lane i, .ord-scatter-node, .ord-cadence-sweep, .ord-beat, .ord-lock { animation: none !important; } } /* METHOD V84: Full rebuild for M.a.S.F. and I.B. visuals */ .artifact-visual-signals, .artifact-visual-backlog { overflow: hidden !important; } /* M.a.S.F. - noisy measures become actionable signal */ .masf-signal-system { position: absolute; inset: 10% 5% 12% 5%; pointer-events: none; isolation: isolate; } .masf-label { position: absolute; color: rgba(240,235,227,.42); font-size: .50rem; letter-spacing: .17em; text-transform: uppercase; z-index: 8; } .masf-label.noise { left: 6%; top: 12%; animation: masfNoiseLabel 10.5s ease-in-out infinite; } .masf-label.signal { left: 46%; top: 12%; animation: masfSignalLabel 10.5s ease-in-out infinite; } .masf-label.trigger { right: 5%; top: 12%; color: var(--red-hi); animation: masfTriggerLabel 10.5s ease-in-out infinite; } .masf-gridline { position: absolute; left: 7%; right: 7%; height: 1px; background: rgba(255,255,255,.035); z-index: 1; } .masf-gridline.g1 { top: 34%; } .masf-gridline.g2 { top: 52%; } .masf-gridline.g3 { top: 70%; } .masf-baseline, .masf-threshold-line { position: absolute; left: 9%; right: 14%; height: 1px; transform-origin: left center; z-index: 2; } .masf-baseline { top: 62%; background: rgba(240,235,227,.075); animation: masfBaseline 10.5s ease-in-out infinite; } .masf-threshold-line { top: 42%; background: linear-gradient(90deg, transparent, rgba(224,85,48,.32), rgba(88,205,210,.10), transparent); opacity: 0; animation: masfThreshold 10.5s ease-in-out infinite; } .masf-noise-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(240,235,227,.22); box-shadow: 0 0 10px rgba(240,235,227,.06); opacity: 0; z-index: 4; animation: masfNoiseDots 10.5s ease-in-out infinite; } .masf-noise-dot.d1 { left: 14%; top: 59%; animation-delay: 0s; } .masf-noise-dot.d2 { left: 22%; top: 43%; animation-delay: .12s; } .masf-noise-dot.d3 { left: 30%; top: 68%; animation-delay: .24s; } .masf-noise-dot.d4 { left: 38%; top: 48%; animation-delay: .36s; } .masf-noise-dot.d5 { left: 47%; top: 61%; animation-delay: .48s; } .masf-noise-dot.d6 { left: 55%; top: 36%; animation-delay: .60s; } .masf-noise-dot.d7 { left: 63%; top: 54%; animation-delay: .72s; } .masf-noise-dot.d8 { left: 71%; top: 44%; animation-delay: .84s; } .masf-signal-line { position: absolute; left: 16%; right: 20%; top: 52%; height: 2px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.22), rgba(224,85,48,.42), rgba(88,205,210,.16), transparent); opacity: 0; transform-origin: left center; z-index: 5; animation: masfSignalLine 10.5s ease-in-out infinite; } .masf-signal-pulse { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(88,205,210,.76); box-shadow: 0 0 12px rgba(88,205,210,.28), 0 0 22px rgba(224,85,48,.08); opacity: 0; z-index: 6; animation: masfPulseMove 10.5s ease-in-out infinite; } .masf-signal-pulse.p1 { top: 52%; left: 25%; animation-delay: 4.2s; } .masf-signal-pulse.p2 { top: 47%; left: 50%; animation-delay: 4.7s; background: rgba(224,85,48,.70); box-shadow: 0 0 12px rgba(224,85,48,.24); } .masf-signal-pulse.p3 { top: 42%; left: 73%; animation-delay: 5.2s; } .masf-trigger-box { position: absolute; right: 8%; top: 38%; width: 10.5rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(224,85,48,.34); background: rgba(7,5,3,.68); color: rgba(240,235,227,.72); font-size: .50rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 8; animation: masfTriggerBox 10.5s ease-in-out infinite; } .masf-trigger-reticle { position: absolute; right: 18.5%; top: 42%; width: 23px; height: 23px; border-radius: 50%; border: 1px solid rgba(224,85,48,.48); box-shadow: 0 0 12px rgba(224,85,48,.18), inset 0 0 10px rgba(224,85,48,.08); opacity: 0; transform: translate(50%, -50%) scale(.72); z-index: 9; animation: masfTriggerReticle 10.5s ease-in-out infinite; } .masf-trigger-reticle::before, .masf-trigger-reticle::after { content: ''; position: absolute; background: rgba(224,85,48,.46); opacity: .68; } .masf-trigger-reticle::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); } .masf-trigger-reticle::after { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); } .masf-result { position: absolute; right: 7%; bottom: 14%; color: rgba(240,235,227,.68); font-size: .50rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(6px); z-index: 8; animation: masfResult 10.5s ease-in-out infinite; } @keyframes masfNoiseLabel { 0%, 34% { opacity: .72; } 54%, 100% { opacity: .16; } } @keyframes masfSignalLabel { 0%, 32% { opacity: .16; } 48%, 80% { opacity: .84; color: rgba(88,205,210,.68); } 100% { opacity: .22; } } @keyframes masfTriggerLabel { 0%, 52% { opacity: .18; } 66%, 86% { opacity: .92; text-shadow: 0 0 14px rgba(224,85,48,.22); } 100% { opacity: .20; } } @keyframes masfBaseline { 0%, 100% { opacity: .22; transform: scaleX(.70); } 42%, 84% { opacity: .54; transform: scaleX(1); } } @keyframes masfThreshold { 0%, 34% { opacity: 0; transform: scaleX(.18); } 50% { opacity: .56; transform: scaleX(.70); } 70%, 88% { opacity: .72; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.32); } } @keyframes masfNoiseDots { 0%, 20% { opacity: .44; transform: scale(.86) translate(0,0); } 38% { opacity: .68; transform: scale(1) translate(4px,-4px); } 58% { opacity: .22; transform: scale(.72) translate(16px,0); } 72%, 100% { opacity: 0; transform: scale(.54) translate(26px,0); } } @keyframes masfSignalLine { 0%, 36% { opacity: 0; transform: scaleX(.12); } 50% { opacity: .54; transform: scaleX(.62); } 70%, 86% { opacity: .78; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.20); } } @keyframes masfPulseMove { 0%, 35%, 100% { opacity: 0; transform: translateX(0) scale(.6); } 46% { opacity: .88; transform: translateX(18px) scale(1); } 62% { opacity: .72; transform: translateX(52px) scale(.92); } 78% { opacity: .16; transform: translateX(88px) scale(.66); } } @keyframes masfTriggerBox { 0%, 58%, 100% { opacity: 0; transform: translateX(8px); } 66%, 84% { opacity: .95; transform: translateX(0); } 92% { opacity: 0; transform: translateX(-4px); } } @keyframes masfTriggerReticle { 0%, 56%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 64% { opacity: .96; transform: translate(50%, -50%) scale(1); } 82% { opacity: .64; transform: translate(50%, -50%) scale(1.06); } 92% { opacity: 0; transform: translate(50%, -50%) scale(.82); } } @keyframes masfResult { 0%, 64%, 100% { opacity: 0; transform: translateY(6px); } 74%, 88% { opacity: .78; transform: translateY(0); } 96% { opacity: 0; transform: translateY(-4px); } } /* I.B. - obscured backlog becomes sequenced improvement */ .ib-priority-system { position: absolute; inset: 10% 5% 12% 5%; pointer-events: none; isolation: isolate; } .ib-label { position: absolute; color: rgba(240,235,227,.42); font-size: .50rem; letter-spacing: .17em; text-transform: uppercase; z-index: 8; } .ib-label.backlog { left: 6%; top: 11%; animation: ibBacklogLabel 11s ease-in-out infinite; } .ib-label.sorted { right: 6%; top: 11%; color: var(--red-hi); animation: ibSortedLabel 11s ease-in-out infinite; } .ib-card.raw { position: absolute; width: 10rem; height: 2rem; display: flex; align-items: center; padding-left: .8rem; box-sizing: border-box; border: 1px solid rgba(255,255,255,.045); background: rgba(7,5,3,.54); color: rgba(240,235,227,.38); font-size: .46rem; letter-spacing: .13em; text-transform: uppercase; z-index: 4; animation: ibRawCardsSortAway 11s cubic-bezier(.22,1,.36,1) infinite; } .ib-card.raw.r1 { left: 12%; top: 35%; transform: rotate(-2deg); animation-delay: 0s; } .ib-card.raw.r2 { left: 20%; top: 50%; transform: rotate(1deg); animation-delay: .14s; } .ib-card.raw.r3 { left: 15%; top: 64%; transform: rotate(-1deg); animation-delay: .28s; } .ib-card.raw.r4 { left: 31%; top: 42%; transform: rotate(2deg); animation-delay: .42s; } .ib-card.raw.r5 { left: 34%; top: 58%; transform: rotate(-2deg); animation-delay: .56s; } .ib-scan { position: absolute; top: 24%; bottom: 14%; width: 1px; left: 8%; background: linear-gradient(180deg, transparent, rgba(88,205,210,.16), rgba(224,85,48,.50), rgba(88,205,210,.16), transparent); box-shadow: 0 0 20px rgba(224,85,48,.16); opacity: 0; z-index: 6; animation: ibScanSort 11s ease-in-out infinite; } .ib-lane { position: absolute; left: 48%; right: 10%; height: 2.6rem; border: 1px solid rgba(255,255,255,.045); background: rgba(7,5,3,.28); opacity: 0; z-index: 2; animation: ibLaneForms 11s ease-in-out infinite; } .ib-lane b { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: rgba(240,235,227,.46); font-size: .48rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 400; } .ib-lane i { position: absolute; left: 6.6rem; right: .8rem; top: calc(50% - .5px); height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.30), rgba(88,205,210,.10), transparent); opacity: 0; transform-origin: left center; animation: ibLaneLine 11s ease-in-out infinite; } .ib-lane.lane-now { top: 34%; } .ib-lane.lane-next { top: 52%; } .ib-lane.lane-later { top: 70%; } .ib-priority-card { position: absolute; left: 60%; width: 12rem; height: 2.15rem; display: flex; align-items: center; padding-left: .85rem; box-sizing: border-box; border: 1px solid rgba(224,85,48,.18); background: radial-gradient(ellipse 90% 150% at 10% 50%, rgba(200,64,26,.09), transparent 70%), rgba(7,5,3,.70); color: rgba(240,235,227,.70); font-size: .48rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(12px); z-index: 7; animation: ibPriorityCards 11s ease-in-out infinite; } .ib-priority-card.c1 { top: 34.2%; animation-delay: 4.8s; } .ib-priority-card.c2 { top: 52.2%; animation-delay: 5.4s; } .ib-priority-card.c3 { top: 70.2%; animation-delay: 6.0s; } .ib-owner-line { position: absolute; left: 60%; right: 17%; top: 41%; height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.42), rgba(88,205,210,.16), transparent); opacity: 0; transform-origin: left center; z-index: 6; animation: ibOwnerLine 11s ease-in-out infinite; } .ib-owner-dot { position: absolute; right: 17%; top: 41%; width: 9px; height: 9px; border-radius: 50%; background: rgba(224,85,48,.72); box-shadow: 0 0 14px rgba(224,85,48,.26); opacity: 0; transform: translate(50%, -50%) scale(.72); z-index: 8; animation: ibOwnerDot 11s ease-in-out infinite; } .ib-result { position: absolute; right: 5%; top: 39%; color: rgba(240,235,227,.72); font-size: .50rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 9; animation: ibResult 11s ease-in-out infinite; } @keyframes ibBacklogLabel { 0%, 34% { opacity: .72; } 56%, 100% { opacity: .14; } } @keyframes ibSortedLabel { 0%, 40% { opacity: .12; } 62%, 90% { opacity: .90; text-shadow: 0 0 14px rgba(224,85,48,.22); } 100% { opacity: .20; } } @keyframes ibRawCardsSortAway { 0%, 30% { opacity: .58; filter: blur(.2px); } 46% { opacity: .44; transform: translateX(24px) scale(.94); filter: blur(.5px); } 62%, 100% { opacity: 0; transform: translateX(80px) scale(.82); filter: blur(1.4px); } } @keyframes ibScanSort { 0%, 28% { opacity: 0; left: 8%; } 38% { opacity: .76; left: 25%; } 55% { opacity: .88; left: 50%; } 72% { opacity: .32; left: 83%; } 84%, 100% { opacity: 0; left: 88%; } } @keyframes ibLaneForms { 0%, 40% { opacity: 0; transform: translateX(12px); } 54% { opacity: .46; transform: translateX(0); } 70%, 92% { opacity: .78; border-color: rgba(224,85,48,.12); } 100% { opacity: .20; } } @keyframes ibLaneLine { 0%, 48% { opacity: 0; transform: scaleX(.12); } 62% { opacity: .42; transform: scaleX(.64); } 78%, 92% { opacity: .66; transform: scaleX(1); } 100% { opacity: .08; transform: scaleX(.20); } } @keyframes ibPriorityCards { 0%, 48%, 100% { opacity: 0; transform: translateX(12px); } 62% { opacity: .88; transform: translateX(0); } 84% { opacity: .76; transform: translateX(0); } 96% { opacity: 0; transform: translateX(-6px); } } @keyframes ibOwnerLine { 0%, 62% { opacity: 0; transform: scaleX(.10); } 74% { opacity: .62; transform: scaleX(.70); } 86% { opacity: .62; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ibOwnerDot { 0%, 70% { opacity: 0; transform: translate(50%, -50%) scale(.72); } 80% { opacity: .88; transform: translate(50%, -50%) scale(1); } 90% { opacity: .62; transform: translate(50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(50%, -50%) scale(.72); } } @keyframes ibResult { 0%, 74% { opacity: 0; transform: translateX(8px); } 84%, 92% { opacity: .88; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-4px); } } @media(max-width:768px) { .masf-label, .ib-label { font-size: .40rem; } .masf-trigger-box, .masf-result, .ib-result, .ib-owner-line, .ib-owner-dot { display: none; } .ib-card.raw, .ib-priority-card { width: 8rem; font-size: .38rem; } .ib-lane { left: 42%; right: 4%; } .ib-lane b { font-size: .38rem; } .ib-lane i { left: 4.2rem; } } @media (prefers-reduced-motion: reduce) { .masf-signal-system *, .ib-priority-system * { animation: none !important; } } /* METHOD V85: O.R.D. remodel - scattered Listen boxes become designed cadence */ .artifact-visual-rhythm { overflow: hidden !important; } .ord-scattered-remodel { position: absolute; inset: 8% 4% 10% 4%; pointer-events: none; isolation: isolate; } .ord-scattered-remodel .ord-state { position: absolute; top: 7%; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; z-index: 12; } .ord-scattered-remodel .ord-state.scattered { left: 5%; color: rgba(240,235,227,.58); animation: ordScatterHeaderV85 12s ease-in-out infinite; } .ord-scattered-remodel .ord-state.cadence { right: 5%; color: var(--red-hi); animation: ordCadenceHeaderV85 12s ease-in-out infinite; } /* Floating boxes start clustered in the LISTEN area. They are intentionally not stacked, so the visual reads as scattered operating conversations/signals. */ .ord-float-box { position: absolute; width: 7.8rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(ellipse 110% 160% at 12% 50%, rgba(200,64,26,.10), transparent 68%), rgba(7,5,3,.76); color: rgba(240,235,227,.64); font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; box-shadow: 0 0 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018); opacity: 0; z-index: 8; animation-duration: 12s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-iteration-count: infinite; } .ord-float-box.box-review { left: 10%; top: 34%; animation-name: ordFloatReviewV85; } .ord-float-box.box-signal { left: 22%; top: 24%; animation-name: ordFloatSignalV85; animation-delay: .10s; } .ord-float-box.box-decision { left: 17%; top: 51%; animation-name: ordFloatDecisionV85; animation-delay: .20s; } .ord-float-box.box-risk { left: 31%; top: 42%; animation-name: ordFloatRiskV85; animation-delay: .30s; } .ord-float-box.box-learning { left: 12%; top: 68%; animation-name: ordFloatLearningV85; animation-delay: .40s; } .ord-float-box.box-escalation { left: 30%; top: 63%; animation-name: ordFloatEscalationV85; animation-delay: .50s; } .ord-scattered-remodel .ord-cadence-sweep { position: absolute; top: 18%; bottom: 10%; left: 8%; width: 1px; background: linear-gradient(180deg, transparent, rgba(88,205,210,.30), rgba(224,85,48,.76), rgba(88,205,210,.30), transparent); box-shadow: 0 0 18px rgba(224,85,48,.30), 0 0 28px rgba(88,205,210,.12); opacity: 0; z-index: 9; animation: ordCadenceSweepV85 12s ease-in-out infinite; } /* Cadence nodes sit across Structure and Use. They do not appear as a stacked column, but as designed operating points in the rhythm. */ .ord-cadence-node { position: absolute; width: 11.8rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(224,85,48,.20); background: radial-gradient(ellipse 100% 160% at 12% 50%, rgba(200,64,26,.13), transparent 70%), rgba(7,5,3,.72); color: rgba(240,235,227,.70); box-shadow: 0 0 16px rgba(224,85,48,.08), inset 0 0 0 1px rgba(255,255,255,.018); opacity: 0; transform: scale(.92); z-index: 7; animation: ordCadenceNodeV85 12s ease-in-out infinite; } .ord-cadence-node b { font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 400; } .ord-cadence-node.node-review { left: 47%; top: 27%; animation-delay: 4.2s; } .ord-cadence-node.node-decision { left: 63%; top: 42%; animation-delay: 4.55s; } .ord-cadence-node.node-escalation { left: 51%; top: 59%; animation-delay: 4.9s; } .ord-cadence-node.node-learning { left: 70%; top: 69%; animation-delay: 5.25s; } .ord-connection { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.45), rgba(88,205,210,.16), transparent); opacity: 0; transform-origin: left center; z-index: 5; animation: ordConnectionV85 12s ease-in-out infinite; } .ord-connection.c1 { left: 43%; top: 38%; width: 26%; transform: rotate(14deg) scaleX(.12); animation-delay: 5.0s; } .ord-connection.c2 { left: 56%; top: 53%; width: 18%; transform: rotate(20deg) scaleX(.12); animation-delay: 5.25s; } .ord-connection.c3 { left: 48%; top: 67%; width: 30%; transform: rotate(7deg) scaleX(.12); animation-delay: 5.5s; } .ord-connection.c4 { left: 68%; top: 61%; width: 14%; transform: rotate(38deg) scaleX(.12); animation-delay: 5.75s; } .ord-scattered-remodel .ord-beat { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.82); box-shadow: 0 0 14px rgba(224,85,48,.30), 0 0 22px rgba(88,205,210,.08); opacity: 0; z-index: 10; animation: ordBeatV85 12s ease-in-out infinite; } .ord-beat.review { left: calc(47% + 10.8rem); top: calc(27% + 1.15rem); animation-delay: 6.0s; } .ord-beat.decision { left: calc(63% + 10.8rem); top: calc(42% + 1.15rem); animation-delay: 6.35s; background: rgba(88,205,210,.78); box-shadow: 0 0 14px rgba(88,205,210,.24); } .ord-beat.escalation { left: calc(51% + 10.8rem); top: calc(59% + 1.15rem); animation-delay: 6.70s; } .ord-beat.learning { left: calc(70% + 10.8rem); top: calc(69% + 1.15rem); animation-delay: 7.05s; background: rgba(88,205,210,.70); box-shadow: 0 0 14px rgba(88,205,210,.20); } .ord-scattered-remodel .ord-lock { position: absolute; right: 3%; width: 13rem; color: rgba(240,235,227,.76); font-size: .50rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(8px); z-index: 11; animation: ordSetPopupV85 12s ease-in-out infinite; } .ord-lock.lock-weekly { top: calc(27% + 1.15rem); animation-delay: 6.10s; } .ord-lock.lock-decision { top: calc(42% + 1.15rem); animation-delay: 6.45s; } .ord-lock.lock-escalation { top: calc(59% + 1.15rem); animation-delay: 6.80s; } .ord-lock.lock-learning { top: calc(69% + 1.15rem); animation-delay: 7.15s; } @keyframes ordScatterHeaderV85 { 0%, 30% { opacity: .88; } 50% { opacity: .42; } 72%, 100% { opacity: .18; } } @keyframes ordCadenceHeaderV85 { 0%, 36% { opacity: .16; } 56% { opacity: .54; } 70%, 90% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 100% { opacity: .20; } } @keyframes ordCadenceSweepV85 { 0%, 28% { opacity: 0; left: 8%; } 38% { opacity: .88; left: 28%; } 56% { opacity: .96; left: 58%; } 72% { opacity: .46; left: 91%; } 84%, 100% { opacity: 0; left: 94%; } } @keyframes ordFloatReviewV85 { 0%, 24% { opacity: .84; transform: translate(0,0) scale(1) rotate(-2deg); } 42% { opacity: .94; transform: translate(116%, -12%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.24); } 62%, 100% { opacity: 0; transform: translate(250%, -22%) scale(.82) rotate(0deg); } } @keyframes ordFloatSignalV85 { 0%, 24% { opacity: .78; transform: translate(0,0) scale(1) rotate(2deg); } 42% { opacity: .92; transform: translate(85%, 30%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.22); } 62%, 100% { opacity: 0; transform: translate(190%, 38%) scale(.82) rotate(0deg); } } @keyframes ordFloatDecisionV85 { 0%, 24% { opacity: .84; transform: translate(0,0) scale(1) rotate(1deg); } 42% { opacity: .94; transform: translate(160%, -8%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.24); } 62%, 100% { opacity: 0; transform: translate(290%, -14%) scale(.82) rotate(0deg); } } @keyframes ordFloatRiskV85 { 0%, 24% { opacity: .72; transform: translate(0,0) scale(1) rotate(-1deg); } 42% { opacity: .88; transform: translate(84%, 24%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.20); } 62%, 100% { opacity: 0; transform: translate(170%, 38%) scale(.82) rotate(0deg); } } @keyframes ordFloatLearningV85 { 0%, 24% { opacity: .76; transform: translate(0,0) scale(1) rotate(2deg); } 42% { opacity: .90; transform: translate(210%, -4%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.20); } 62%, 100% { opacity: 0; transform: translate(360%, -2%) scale(.82) rotate(0deg); } } @keyframes ordFloatEscalationV85 { 0%, 24% { opacity: .82; transform: translate(0,0) scale(1) rotate(-2deg); } 42% { opacity: .92; transform: translate(120%, -2%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.24); } 62%, 100% { opacity: 0; transform: translate(236%, -8%) scale(.82) rotate(0deg); } } @keyframes ordCadenceNodeV85 { 0%, 42% { opacity: 0; transform: scale(.92); } 56% { opacity: .90; transform: scale(1); } 82% { opacity: .86; transform: scale(1); } 96%, 100% { opacity: .22; transform: scale(.98); } } @keyframes ordConnectionV85 { 0%, 48% { opacity: 0; transform: scaleX(.12); } 62% { opacity: .56; transform: scaleX(.72); } 78% { opacity: .64; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ordBeatV85 { 0%, 52%, 100% { opacity: 0; transform: scale(.62); } 66% { opacity: .96; transform: scale(1.12); } 80% { opacity: .70; transform: scale(.96); } 94% { opacity: .12; transform: scale(.72); } } @keyframes ordSetPopupV85 { 0%, 54%, 100% { opacity: 0; transform: translateY(-50%) translateX(8px); } 66% { opacity: .95; transform: translateY(-50%) translateX(0); } 82% { opacity: .74; transform: translateY(-50%) translateX(0); } 94% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } /* Bring the new artifact visuals forward. This addresses the faintness across the newly rebuilt visual systems without changing the page palette. */ .masf-signal-system, .ib-priority-system, .ord-scattered-remodel { opacity: 1 !important; filter: none !important; } .masf-signal-system *, .ib-priority-system *, .ord-scattered-remodel * { will-change: opacity, transform; } @media(max-width:768px) { .ord-scattered-remodel { inset: 8% 3% 10% 3%; } .ord-float-box { width: 5.8rem; height: 1.75rem; font-size: .38rem; } .ord-cadence-node { width: 8.4rem; } .ord-cadence-node b, .ord-lock { font-size: .38rem; } .ord-lock { display: none; } .ord-beat.review, .ord-beat.decision, .ord-beat.escalation, .ord-beat.learning { display: none; } } /* METHOD V86: O.R.D. cleaner timing, no horizontal sweep, final set labels aligned */ /* Remove the visual sweep/bar that was reading as clutter. Keep the organizing idea through softer box motion and final cadence placement. */ .ord-scattered-remodel .ord-cadence-sweep, .ord-scattered-remodel .ord-cadence-sweep::before, .ord-scattered-remodel .ord-cadence-sweep::after { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; } /* Slow the whole O.R.D. scene down and give it cleaner staging. */ .ord-scattered-remodel .ord-state, .ord-scattered-remodel .ord-float-box, .ord-scattered-remodel .ord-cadence-node, .ord-scattered-remodel .ord-connection, .ord-scattered-remodel .ord-beat, .ord-scattered-remodel .ord-lock { animation-duration: 15s !important; animation-timing-function: cubic-bezier(.22,1,.36,1) !important; } /* Push final cadence objects farther right and spread them so they do not overlap. Each cadence box sits just left of its matching white "set" text. */ .ord-scattered-remodel .ord-cadence-node { width: 12.4rem !important; height: 2.15rem !important; z-index: 7 !important; } .ord-scattered-remodel .ord-cadence-node.node-review { left: 55% !important; top: 26% !important; animation-delay: 5.6s !important; } .ord-scattered-remodel .ord-cadence-node.node-decision { left: 50% !important; top: 41% !important; animation-delay: 5.95s !important; } .ord-scattered-remodel .ord-cadence-node.node-escalation { left: 55% !important; top: 57% !important; animation-delay: 6.30s !important; } .ord-scattered-remodel .ord-cadence-node.node-learning { left: 50% !important; top: 72% !important; animation-delay: 6.65s !important; } .ord-scattered-remodel .ord-lock { right: 3.5% !important; width: 14.8rem !important; color: rgba(240,235,227,.82) !important; text-shadow: 0 0 10px rgba(255,255,255,.045); z-index: 12 !important; animation-name: ordSetPopupV86 !important; } .ord-scattered-remodel .ord-lock.lock-weekly { top: calc(26% + 1.075rem) !important; animation-delay: 6.05s !important; } .ord-scattered-remodel .ord-lock.lock-decision { top: calc(41% + 1.075rem) !important; animation-delay: 6.40s !important; } .ord-scattered-remodel .ord-lock.lock-escalation { top: calc(57% + 1.075rem) !important; animation-delay: 6.75s !important; } .ord-scattered-remodel .ord-lock.lock-learning { top: calc(72% + 1.075rem) !important; animation-delay: 7.10s !important; } /* Keep final confirmation dots close to the matching "set" text instead of floating around the middle. */ .ord-scattered-remodel .ord-beat { width: 7px !important; height: 7px !important; z-index: 13 !important; } .ord-scattered-remodel .ord-beat.review { left: 78.2% !important; top: calc(26% + 1.075rem) !important; animation-delay: 6.0s !important; } .ord-scattered-remodel .ord-beat.decision { left: 78.2% !important; top: calc(41% + 1.075rem) !important; animation-delay: 6.35s !important; } .ord-scattered-remodel .ord-beat.escalation { left: 78.2% !important; top: calc(57% + 1.075rem) !important; animation-delay: 6.70s !important; } .ord-scattered-remodel .ord-beat.learning { left: 78.2% !important; top: calc(72% + 1.075rem) !important; animation-delay: 7.05s !important; } /* Connections are now short local cords between the cadence box and its set label, not long crossing lines through the whole canvas. */ .ord-scattered-remodel .ord-connection { left: 72% !important; width: 8% !important; opacity: 0; background: linear-gradient(90deg, rgba(224,85,48,.42), rgba(88,205,210,.18), transparent) !important; animation-name: ordLocalCordV86 !important; animation-duration: 15s !important; } .ord-scattered-remodel .ord-connection.c1 { top: calc(26% + 1.075rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 6.0s !important; } .ord-scattered-remodel .ord-connection.c2 { top: calc(41% + 1.075rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 6.35s !important; } .ord-scattered-remodel .ord-connection.c3 { top: calc(57% + 1.075rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 6.70s !important; } .ord-scattered-remodel .ord-connection.c4 { top: calc(72% + 1.075rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 7.05s !important; } /* Slow and calm the listen-side dispersal. The boxes remain scattered, but don't zip or land messily in the center. */ .ord-scattered-remodel .ord-float-box { opacity: 0; animation-duration: 15s !important; } @keyframes ordFloatReviewV85 { 0%, 20% { opacity: .86; transform: translate(0,0) scale(1) rotate(-2deg); } 40% { opacity: .88; transform: translate(86%, -10%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 58%, 100% { opacity: 0; transform: translate(176%, -18%) scale(.84) rotate(0deg); } } @keyframes ordFloatSignalV85 { 0%, 20% { opacity: .80; transform: translate(0,0) scale(1) rotate(2deg); } 40% { opacity: .88; transform: translate(68%, 22%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.22); } 58%, 100% { opacity: 0; transform: translate(146%, 34%) scale(.84) rotate(0deg); } } @keyframes ordFloatDecisionV85 { 0%, 20% { opacity: .86; transform: translate(0,0) scale(1) rotate(1deg); } 40% { opacity: .90; transform: translate(104%, -6%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 58%, 100% { opacity: 0; transform: translate(202%, -10%) scale(.84) rotate(0deg); } } @keyframes ordFloatRiskV85 { 0%, 20% { opacity: .76; transform: translate(0,0) scale(1) rotate(-1deg); } 40% { opacity: .84; transform: translate(62%, 18%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.18); } 58%, 100% { opacity: 0; transform: translate(126%, 30%) scale(.84) rotate(0deg); } } @keyframes ordFloatLearningV85 { 0%, 20% { opacity: .78; transform: translate(0,0) scale(1) rotate(2deg); } 40% { opacity: .86; transform: translate(132%, -2%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.20); } 58%, 100% { opacity: 0; transform: translate(234%, -2%) scale(.84) rotate(0deg); } } @keyframes ordFloatEscalationV85 { 0%, 20% { opacity: .84; transform: translate(0,0) scale(1) rotate(-2deg); } 40% { opacity: .88; transform: translate(82%, -2%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 58%, 100% { opacity: 0; transform: translate(168%, -6%) scale(.84) rotate(0deg); } } @keyframes ordCadenceNodeV85 { 0%, 46% { opacity: 0; transform: scale(.94) translateX(8px); } 60% { opacity: .95; transform: scale(1) translateX(0); } 86% { opacity: .90; transform: scale(1) translateX(0); } 100% { opacity: .20; transform: scale(.98) translateX(0); } } @keyframes ordLocalCordV86 { 0%, 54% { opacity: 0; transform: scaleX(.12); } 66% { opacity: .70; transform: scaleX(.76); } 82% { opacity: .72; transform: scaleX(1); } 96%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ordBeatV85 { 0%, 54%, 100% { opacity: 0; transform: scale(.62); } 66% { opacity: .96; transform: scale(1.12); } 82% { opacity: .70; transform: scale(.96); } 96% { opacity: .12; transform: scale(.72); } } @keyframes ordSetPopupV86 { 0%, 55%, 100% { opacity: 0; transform: translateY(-50%) translateX(8px); } 66% { opacity: .96; transform: translateY(-50%) translateX(0); } 84% { opacity: .82; transform: translateY(-50%) translateX(0); } 96% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @keyframes ordScatterHeaderV85 { 0%, 26% { opacity: .88; } 48% { opacity: .42; } 72%, 100% { opacity: .18; } } @keyframes ordCadenceHeaderV85 { 0%, 42% { opacity: .16; } 58% { opacity: .54; } 72%, 90% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 100% { opacity: .20; } } /* Make O.R.D. content a bit brighter, but not blown out. */ .ord-scattered-remodel .ord-float-box, .ord-scattered-remodel .ord-cadence-node { filter: brightness(1.12); } @media(max-width:900px) { .ord-scattered-remodel .ord-cadence-node { left: 46% !important; width: 10rem !important; } .ord-scattered-remodel .ord-lock { right: 2% !important; width: 11rem !important; } .ord-scattered-remodel .ord-connection { left: 70% !important; width: 7% !important; } } @media(max-width:768px) { .ord-scattered-remodel .ord-lock, .ord-scattered-remodel .ord-connection, .ord-scattered-remodel .ord-beat { display: none !important; } } /* METHOD V87: O.R.D. tighter cycle, more spacing, dotted cadence-to-set connectors */ /* Make the O.R.D. loop less empty by shortening the reset window and making the next cycle begin while the prior final state is fading. Also spread final boxes and set labels. */ .ord-scattered-remodel .ord-state, .ord-scattered-remodel .ord-float-box, .ord-scattered-remodel .ord-cadence-node, .ord-scattered-remodel .ord-connection, .ord-scattered-remodel .ord-lock { animation-duration: 12.5s !important; } /* Hide the floating dot beats. The requested visual is a dotted connector line between each cadence box and its matching set text, not loose dots in the middle. */ .ord-scattered-remodel .ord-beat, .ord-scattered-remodel .ord-beat.review, .ord-scattered-remodel .ord-beat.decision, .ord-scattered-remodel .ord-beat.escalation, .ord-scattered-remodel .ord-beat.learning { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } /* Spread final cadence boxes vertically and pull them left enough to avoid overlap with set text. */ .ord-scattered-remodel .ord-cadence-node { width: 11.4rem !important; height: 2.05rem !important; } .ord-scattered-remodel .ord-cadence-node.node-review { left: 52% !important; top: 21% !important; animation-delay: 4.6s !important; } .ord-scattered-remodel .ord-cadence-node.node-decision { left: 47% !important; top: 39% !important; animation-delay: 4.85s !important; } .ord-scattered-remodel .ord-cadence-node.node-escalation { left: 52% !important; top: 58% !important; animation-delay: 5.10s !important; } .ord-scattered-remodel .ord-cadence-node.node-learning { left: 47% !important; top: 76% !important; animation-delay: 5.35s !important; } /* Put the set labels farther right and aligned to the matching cadence box row. */ .ord-scattered-remodel .ord-lock { right: 2.4% !important; width: 15.5rem !important; font-size: .48rem !important; color: rgba(240,235,227,.84) !important; animation-name: ordSetPopupV87 !important; } .ord-scattered-remodel .ord-lock.lock-weekly { top: calc(21% + 1.025rem) !important; animation-delay: 5.15s !important; } .ord-scattered-remodel .ord-lock.lock-decision { top: calc(39% + 1.025rem) !important; animation-delay: 5.40s !important; } .ord-scattered-remodel .ord-lock.lock-escalation { top: calc(58% + 1.025rem) !important; animation-delay: 5.65s !important; } .ord-scattered-remodel .ord-lock.lock-learning { top: calc(76% + 1.025rem) !important; animation-delay: 5.90s !important; } /* Dotted connector cords between the cadence box and its matching set label. These replace the prior solid/local cords and make correlation explicit. */ .ord-scattered-remodel .ord-connection { left: 68.5% !important; width: 10.2% !important; height: 1px !important; opacity: 0; background: repeating-linear-gradient( 90deg, rgba(224,85,48,.58) 0 4px, transparent 4px 9px ) !important; box-shadow: 0 0 10px rgba(224,85,48,.10); transform-origin: left center !important; animation-name: ordDottedCordV87 !important; animation-duration: 12.5s !important; } .ord-scattered-remodel .ord-connection.c1 { top: calc(21% + 1.025rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 5.10s !important; } .ord-scattered-remodel .ord-connection.c2 { top: calc(39% + 1.025rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 5.35s !important; } .ord-scattered-remodel .ord-connection.c3 { top: calc(58% + 1.025rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 5.60s !important; } .ord-scattered-remodel .ord-connection.c4 { top: calc(76% + 1.025rem) !important; transform: rotate(0deg) scaleX(.12) !important; animation-delay: 5.85s !important; } /* Left side remains scattered, but disperses sooner and resets quicker. This removes the long empty canvas period. */ @keyframes ordFloatReviewV85 { 0%, 16% { opacity: .88; transform: translate(0,0) scale(1) rotate(-2deg); } 32% { opacity: .90; transform: translate(74%, -8%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 50%, 92% { opacity: 0; transform: translate(148%, -14%) scale(.84) rotate(0deg); } 100% { opacity: .70; transform: translate(0,0) scale(.96) rotate(-2deg); } } @keyframes ordFloatSignalV85 { 0%, 16% { opacity: .82; transform: translate(0,0) scale(1) rotate(2deg); } 32% { opacity: .88; transform: translate(56%, 18%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.22); } 50%, 92% { opacity: 0; transform: translate(118%, 28%) scale(.84) rotate(0deg); } 100% { opacity: .66; transform: translate(0,0) scale(.96) rotate(2deg); } } @keyframes ordFloatDecisionV85 { 0%, 16% { opacity: .88; transform: translate(0,0) scale(1) rotate(1deg); } 32% { opacity: .90; transform: translate(88%, -6%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 50%, 92% { opacity: 0; transform: translate(170%, -9%) scale(.84) rotate(0deg); } 100% { opacity: .70; transform: translate(0,0) scale(.96) rotate(1deg); } } @keyframes ordFloatRiskV85 { 0%, 16% { opacity: .78; transform: translate(0,0) scale(1) rotate(-1deg); } 32% { opacity: .84; transform: translate(52%, 16%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.18); } 50%, 92% { opacity: 0; transform: translate(104%, 24%) scale(.84) rotate(0deg); } 100% { opacity: .60; transform: translate(0,0) scale(.96) rotate(-1deg); } } @keyframes ordFloatLearningV85 { 0%, 16% { opacity: .80; transform: translate(0,0) scale(1) rotate(2deg); } 32% { opacity: .86; transform: translate(112%, -2%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.20); } 50%, 92% { opacity: 0; transform: translate(200%, -2%) scale(.84) rotate(0deg); } 100% { opacity: .64; transform: translate(0,0) scale(.96) rotate(2deg); } } @keyframes ordFloatEscalationV85 { 0%, 16% { opacity: .86; transform: translate(0,0) scale(1) rotate(-2deg); } 32% { opacity: .88; transform: translate(70%, -2%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 50%, 92% { opacity: 0; transform: translate(138%, -5%) scale(.84) rotate(0deg); } 100% { opacity: .68; transform: translate(0,0) scale(.96) rotate(-2deg); } } @keyframes ordCadenceNodeV85 { 0%, 38% { opacity: 0; transform: scale(.94) translateX(8px); } 52% { opacity: .96; transform: scale(1) translateX(0); } 78% { opacity: .92; transform: scale(1) translateX(0); } 92% { opacity: .18; transform: scale(.98) translateX(0); } 100% { opacity: 0; transform: scale(.94) translateX(8px); } } @keyframes ordDottedCordV87 { 0%, 42% { opacity: 0; transform: scaleX(.12); } 56% { opacity: .86; transform: scaleX(.82); } 76% { opacity: .82; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(.20); } } @keyframes ordSetPopupV87 { 0%, 45% { opacity: 0; transform: translateY(-50%) translateX(8px); } 58% { opacity: .98; transform: translateY(-50%) translateX(0); } 78% { opacity: .86; transform: translateY(-50%) translateX(0); } 92%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @keyframes ordScatterHeaderV85 { 0%, 22% { opacity: .88; } 42% { opacity: .42; } 70%, 92% { opacity: .18; } 100% { opacity: .72; } } @keyframes ordCadenceHeaderV85 { 0%, 34% { opacity: .16; } 52% { opacity: .60; } 64%, 84% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 94%, 100% { opacity: .18; } } @media(max-width:900px) { .ord-scattered-remodel .ord-cadence-node { left: 44% !important; width: 10rem !important; } .ord-scattered-remodel .ord-lock { right: 1.5% !important; width: 11.5rem !important; } .ord-scattered-remodel .ord-connection { left: 67% !important; width: 7% !important; } } /* METHOD V88: O.R.D. visible row-aligned connectors between each cadence rectangle and set label */ /* The connector should live in the actual gap between each designed cadence rectangle and its matching white "set" label. */ .ord-scattered-remodel .ord-connection { position: absolute !important; left: auto !important; right: 27.8% !important; width: 6.4rem !important; height: 1px !important; opacity: 0; z-index: 14 !important; background: repeating-linear-gradient( 90deg, rgba(224,85,48,.78) 0 5px, transparent 5px 10px ) !important; box-shadow: 0 0 10px rgba(224,85,48,.20), 0 0 18px rgba(88,205,210,.05) !important; transform-origin: left center !important; transform: scaleX(.12) !important; animation-name: ordPairConnectorV88 !important; animation-duration: 12.5s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-scattered-remodel .ord-connection.c1 { top: calc(21% + 1.025rem) !important; animation-delay: 5.05s !important; } .ord-scattered-remodel .ord-connection.c2 { top: calc(39% + 1.025rem) !important; animation-delay: 5.30s !important; } .ord-scattered-remodel .ord-connection.c3 { top: calc(58% + 1.025rem) !important; animation-delay: 5.55s !important; } .ord-scattered-remodel .ord-connection.c4 { top: calc(76% + 1.025rem) !important; animation-delay: 5.80s !important; } /* Pull set labels slightly farther right and make the left edge consistent, so the connector clearly points into the text instead of disappearing underneath it. */ .ord-scattered-remodel .ord-lock { right: 1.2% !important; width: 17.2rem !important; padding-left: .15rem !important; z-index: 15 !important; } /* Keep final cadence boxes stable and aligned to the same row center as the connector. */ .ord-scattered-remodel .ord-cadence-node.node-review { left: 52% !important; top: 21% !important; } .ord-scattered-remodel .ord-cadence-node.node-decision { left: 47% !important; top: 39% !important; } .ord-scattered-remodel .ord-cadence-node.node-escalation { left: 52% !important; top: 58% !important; } .ord-scattered-remodel .ord-cadence-node.node-learning { left: 47% !important; top: 76% !important; } /* Make sure the connector appears during the same hold window as the two related rectangles. */ @keyframes ordPairConnectorV88 { 0%, 40% { opacity: 0; transform: scaleX(.12); } 52% { opacity: .82; transform: scaleX(.65); } 64%, 82% { opacity: .90; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scaleX(.22); } } /* The set text was too subtle against the background. Bring it forward just a touch. */ .ord-scattered-remodel .ord-lock { color: rgba(240,235,227,.90) !important; text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(224,85,48,.08) !important; } @media(max-width:1100px) { .ord-scattered-remodel .ord-connection { right: 27% !important; width: 4.8rem !important; } .ord-scattered-remodel .ord-lock { width: 13.5rem !important; } } @media(max-width:768px) { .ord-scattered-remodel .ord-connection { display: none !important; } } /* METHOD V89: O.R.D. attach visible dotted connectors directly to each SET label */ /* Prior connector spans were technically present but too easy to miss because their positioning did not land in the visual gap. This attaches the dotted line directly to the white SET label, extending left toward the matching cadence rectangle. */ .ord-scattered-remodel .ord-lock { position: absolute !important; overflow: visible !important; z-index: 25 !important; color: rgba(240,235,227,.92) !important; text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 14px rgba(224,85,48,.10) !important; } .ord-scattered-remodel .ord-lock::before { content: '' !important; position: absolute !important; right: calc(100% + .85rem) !important; top: 50% !important; width: 6.6rem !important; height: 2px !important; transform: translateY(-50%) scaleX(.10) !important; transform-origin: right center !important; background: repeating-linear-gradient( 90deg, rgba(224,85,48,.86) 0 6px, transparent 6px 11px ) !important; box-shadow: 0 0 12px rgba(224,85,48,.26), 0 0 18px rgba(88,205,210,.08) !important; opacity: 0; animation: ordSetAttachedConnectorV89 12.5s ease-in-out infinite !important; } .ord-scattered-remodel .ord-lock.lock-weekly::before { animation-delay: 5.05s !important; } .ord-scattered-remodel .ord-lock.lock-decision::before { animation-delay: 5.30s !important; } .ord-scattered-remodel .ord-lock.lock-escalation::before { animation-delay: 5.55s !important; } .ord-scattered-remodel .ord-lock.lock-learning::before { animation-delay: 5.80s !important; } /* Keep the older connector spans from competing. The label-attached connector is now the authoritative pair connector. */ .ord-scattered-remodel .ord-connection { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } /* Nudge cadence rectangles slightly left so the attached dotted connector has a clear visible gap to span. */ .ord-scattered-remodel .ord-cadence-node.node-review, .ord-scattered-remodel .ord-cadence-node.node-escalation { left: 50.5% !important; } .ord-scattered-remodel .ord-cadence-node.node-decision, .ord-scattered-remodel .ord-cadence-node.node-learning { left: 45.5% !important; } /* Keep the final labels aligned and make the connector appear during the same phase as the text, not after it. */ .ord-scattered-remodel .ord-lock.lock-weekly { top: calc(21% + 1.025rem) !important; animation-delay: 5.10s !important; } .ord-scattered-remodel .ord-lock.lock-decision { top: calc(39% + 1.025rem) !important; animation-delay: 5.35s !important; } .ord-scattered-remodel .ord-lock.lock-escalation { top: calc(58% + 1.025rem) !important; animation-delay: 5.60s !important; } .ord-scattered-remodel .ord-lock.lock-learning { top: calc(76% + 1.025rem) !important; animation-delay: 5.85s !important; } @keyframes ordSetAttachedConnectorV89 { 0%, 38% { opacity: 0; transform: translateY(-50%) scaleX(.10); } 50% { opacity: .92; transform: translateY(-50%) scaleX(.65); } 62%, 82% { opacity: .98; transform: translateY(-50%) scaleX(1); } 92%, 100% { opacity: 0; transform: translateY(-50%) scaleX(.20); } } /* Slightly brighten the cadence boxes so the connector has a visible destination. */ .ord-scattered-remodel .ord-cadence-node { border-color: rgba(224,85,48,.28) !important; box-shadow: 0 0 18px rgba(224,85,48,.10), inset 0 0 0 1px rgba(255,255,255,.024) !important; } @media(max-width:1100px) { .ord-scattered-remodel .ord-lock::before { width: 4.4rem !important; right: calc(100% + .55rem) !important; } } @media(max-width:768px) { .ord-scattered-remodel .ord-lock::before { display: none !important; } } /* METHOD V90: O.R.D. relevance map from scattered listen boxes to designed cadence */ /* New behavior: left-side signals reorganize into a map. Each listen-side concept connects to the right-side cadence object it belongs to. */ /* Keep source boxes visible long enough to be read and connected */ .ord-scattered-remodel .ord-float-box { animation-duration: 13.5s !important; animation-timing-function: cubic-bezier(.22,1,.36,1) !important; z-index: 16 !important; } /* Reposition source boxes into a cleaner scattered listen cluster */ .ord-scattered-remodel .ord-float-box.box-review { left: 13% !important; top: 29% !important; animation-name: ordMapReviewSourceV90 !important; animation-delay: 0s !important; } .ord-scattered-remodel .ord-float-box.box-signal { left: 25% !important; top: 22% !important; animation-name: ordMapSignalSourceV90 !important; animation-delay: .08s !important; } .ord-scattered-remodel .ord-float-box.box-decision { left: 18% !important; top: 45% !important; animation-name: ordMapDecisionSourceV90 !important; animation-delay: .16s !important; } .ord-scattered-remodel .ord-float-box.box-risk { left: 32% !important; top: 39% !important; animation-name: ordMapRiskSourceV90 !important; animation-delay: .24s !important; } .ord-scattered-remodel .ord-float-box.box-learning { left: 15% !important; top: 66% !important; animation-name: ordMapLearningSourceV90 !important; animation-delay: .32s !important; } .ord-scattered-remodel .ord-float-box.box-escalation { left: 30% !important; top: 61% !important; animation-name: ordMapEscalationSourceV90 !important; animation-delay: .40s !important; } /* Right-side cadence objects stay as the destination map, but appear a bit earlier so source-to-destination linkage is visible. */ .ord-scattered-remodel .ord-cadence-node { animation-duration: 13.5s !important; animation-name: ordDestinationNodeV90 !important; z-index: 12 !important; } .ord-scattered-remodel .ord-cadence-node.node-review { left: 51% !important; top: 21% !important; animation-delay: 3.6s !important; } .ord-scattered-remodel .ord-cadence-node.node-decision { left: 48% !important; top: 40% !important; animation-delay: 3.9s !important; } .ord-scattered-remodel .ord-cadence-node.node-escalation { left: 51% !important; top: 59% !important; animation-delay: 4.2s !important; } .ord-scattered-remodel .ord-cadence-node.node-learning { left: 48% !important; top: 76% !important; animation-delay: 4.5s !important; } /* Repurpose the four connector spans as source-to-cadence relevance map lines. These are diagonal dotted routes from the left-side boxes into their corresponding right-side cadence object. */ .ord-scattered-remodel .ord-connection { display: block !important; visibility: visible !important; position: absolute !important; height: 2px !important; opacity: 0; z-index: 9 !important; background: repeating-linear-gradient( 90deg, rgba(224,85,48,.78) 0 5px, transparent 5px 10px ) !important; box-shadow: 0 0 10px rgba(224,85,48,.20), 0 0 18px rgba(88,205,210,.06) !important; transform-origin: left center !important; animation-name: ordRelevanceLineV90 !important; animation-duration: 13.5s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* review -> review rhythm */ .ord-scattered-remodel .ord-connection.c1 { left: 32% !important; top: 32% !important; width: 20% !important; transform: rotate(-16deg) scaleX(.10) !important; animation-delay: 3.35s !important; } /* decision -> decision cadence */ .ord-scattered-remodel .ord-connection.c2 { left: 35% !important; top: 48% !important; width: 16% !important; transform: rotate(-8deg) scaleX(.10) !important; animation-delay: 3.70s !important; } /* risk/escalation -> escalation trigger */ .ord-scattered-remodel .ord-connection.c3 { left: 39% !important; top: 61% !important; width: 16% !important; transform: rotate(7deg) scaleX(.10) !important; animation-delay: 4.05s !important; } /* learning/signal -> learning loop */ .ord-scattered-remodel .ord-connection.c4 { left: 32% !important; top: 70% !important; width: 21% !important; transform: rotate(18deg) scaleX(.10) !important; animation-delay: 4.40s !important; } /* Add set-label connectors as short extensions from cadence node -> set label. Keep them, but shorten and synchronize them so the complete chain reads: source box -> cadence box -> set label. */ .ord-scattered-remodel .ord-lock::before { width: 4.8rem !important; right: calc(100% + .65rem) !important; height: 2px !important; opacity: 0; background: repeating-linear-gradient( 90deg, rgba(88,205,210,.72) 0 5px, transparent 5px 10px ) !important; animation: ordSetAttachedConnectorV90 13.5s ease-in-out infinite !important; } .ord-scattered-remodel .ord-lock { animation-duration: 13.5s !important; animation-name: ordSetPopupV90 !important; z-index: 20 !important; } .ord-scattered-remodel .ord-lock.lock-weekly { top: calc(21% + 1.025rem) !important; animation-delay: 4.95s !important; } .ord-scattered-remodel .ord-lock.lock-weekly::before { animation-delay: 4.80s !important; } .ord-scattered-remodel .ord-lock.lock-decision { top: calc(40% + 1.025rem) !important; animation-delay: 5.25s !important; } .ord-scattered-remodel .ord-lock.lock-decision::before { animation-delay: 5.10s !important; } .ord-scattered-remodel .ord-lock.lock-escalation { top: calc(59% + 1.025rem) !important; animation-delay: 5.55s !important; } .ord-scattered-remodel .ord-lock.lock-escalation::before { animation-delay: 5.40s !important; } .ord-scattered-remodel .ord-lock.lock-learning { top: calc(76% + 1.025rem) !important; animation-delay: 5.85s !important; } .ord-scattered-remodel .ord-lock.lock-learning::before { animation-delay: 5.70s !important; } /* Headers reflect the mapping story. */ .ord-scattered-remodel .ord-state.scattered { animation-duration: 13.5s !important; animation-name: ordScatterHeaderV90 !important; } .ord-scattered-remodel .ord-state.cadence { animation-duration: 13.5s !important; animation-name: ordCadenceHeaderV90 !important; } /* Source boxes reorganize, but remain visible during mapping. Each one moves toward the right, then fades once its mapped destination is established. */ @keyframes ordMapReviewSourceV90 { 0%, 18% { opacity: .90; transform: translate(0,0) scale(1) rotate(-2deg); } 34% { opacity: .96; transform: translate(34%, -6%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.26); } 54% { opacity: .58; transform: translate(82%, -10%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(112%, -12%) scale(.82) rotate(0deg); } 100% { opacity: .56; transform: translate(0,0) scale(.96) rotate(-2deg); } } @keyframes ordMapSignalSourceV90 { 0%, 18% { opacity: .84; transform: translate(0,0) scale(1) rotate(2deg); } 34% { opacity: .92; transform: translate(24%, 20%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.26); } 54% { opacity: .46; transform: translate(64%, 38%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(92%, 48%) scale(.82) rotate(0deg); } 100% { opacity: .50; transform: translate(0,0) scale(.96) rotate(2deg); } } @keyframes ordMapDecisionSourceV90 { 0%, 18% { opacity: .90; transform: translate(0,0) scale(1) rotate(1deg); } 34% { opacity: .96; transform: translate(42%, -1%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.26); } 54% { opacity: .58; transform: translate(88%, -2%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(120%, -2%) scale(.82) rotate(0deg); } 100% { opacity: .56; transform: translate(0,0) scale(.96) rotate(1deg); } } @keyframes ordMapRiskSourceV90 { 0%, 18% { opacity: .78; transform: translate(0,0) scale(1) rotate(-1deg); } 34% { opacity: .88; transform: translate(16%, 16%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.22); } 54% { opacity: .42; transform: translate(48%, 24%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(72%, 32%) scale(.82) rotate(0deg); } 100% { opacity: .46; transform: translate(0,0) scale(.96) rotate(-1deg); } } @keyframes ordMapLearningSourceV90 { 0%, 18% { opacity: .84; transform: translate(0,0) scale(1) rotate(2deg); } 34% { opacity: .90; transform: translate(52%, -2%) scale(.98) rotate(0deg); border-color: rgba(88,205,210,.22); } 54% { opacity: .48; transform: translate(110%, -2%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(148%, -2%) scale(.82) rotate(0deg); } 100% { opacity: .50; transform: translate(0,0) scale(.96) rotate(2deg); } } @keyframes ordMapEscalationSourceV90 { 0%, 18% { opacity: .90; transform: translate(0,0) scale(1) rotate(-2deg); } 34% { opacity: .96; transform: translate(24%, -2%) scale(.98) rotate(0deg); border-color: rgba(224,85,48,.26); } 54% { opacity: .56; transform: translate(62%, -4%) scale(.90) rotate(0deg); } 70%, 92% { opacity: 0; transform: translate(88%, -6%) scale(.82) rotate(0deg); } 100% { opacity: .54; transform: translate(0,0) scale(.96) rotate(-2deg); } } @keyframes ordRelevanceLineV90 { 0%, 30% { opacity: 0; transform: rotate(var(--ord-angle, 0deg)) scaleX(.10); } 44% { opacity: .88; transform: rotate(var(--ord-angle, 0deg)) scaleX(.78); } 58%, 76% { opacity: .92; transform: rotate(var(--ord-angle, 0deg)) scaleX(1); } 90%, 100% { opacity: 0; transform: rotate(var(--ord-angle, 0deg)) scaleX(.20); } } /* Restore each line's intended angle despite keyframe variable fallback */ .ord-scattered-remodel .ord-connection.c1 { --ord-angle: -16deg; } .ord-scattered-remodel .ord-connection.c2 { --ord-angle: -8deg; } .ord-scattered-remodel .ord-connection.c3 { --ord-angle: 7deg; } .ord-scattered-remodel .ord-connection.c4 { --ord-angle: 18deg; } @keyframes ordDestinationNodeV90 { 0%, 36% { opacity: 0; transform: scale(.94) translateX(10px); } 50% { opacity: .96; transform: scale(1) translateX(0); } 80% { opacity: .92; transform: scale(1) translateX(0); } 94%, 100% { opacity: .10; transform: scale(.98) translateX(0); } } @keyframes ordSetAttachedConnectorV90 { 0%, 40% { opacity: 0; transform: translateY(-50%) scaleX(.10); } 54% { opacity: .90; transform: translateY(-50%) scaleX(.72); } 66%, 82% { opacity: .98; transform: translateY(-50%) scaleX(1); } 94%, 100% { opacity: 0; transform: translateY(-50%) scaleX(.20); } } @keyframes ordSetPopupV90 { 0%, 42% { opacity: 0; transform: translateY(-50%) translateX(8px); } 56% { opacity: .98; transform: translateY(-50%) translateX(0); } 82% { opacity: .88; transform: translateY(-50%) translateX(0); } 94%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @keyframes ordScatterHeaderV90 { 0%, 26% { opacity: .92; } 46% { opacity: .54; } 70%, 92% { opacity: .18; } 100% { opacity: .74; } } @keyframes ordCadenceHeaderV90 { 0%, 34% { opacity: .18; } 50% { opacity: .62; } 64%, 84% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 94%, 100% { opacity: .20; } } @media(max-width:900px) { .ord-scattered-remodel .ord-connection { display: none !important; } } /* METHOD V91: O.R.D. ordered choreography - scatter, stack, connect, set */ /* Desired sequence: 1. Scattered cards populate in Listen. 2. They organize into a designed rhythm stack. 3. The right-side set outputs appear. 4. Dotted connectors link each rhythm card to its set output. 5. The set labels brighten as final confirmation. */ .ord-scattered-remodel .ord-state, .ord-scattered-remodel .ord-float-box, .ord-scattered-remodel .ord-cadence-node, .ord-scattered-remodel .ord-connection, .ord-scattered-remodel .ord-lock { animation-duration: 14s !important; animation-timing-function: cubic-bezier(.22,1,.36,1) !important; animation-iteration-count: infinite !important; } /* Stage 1 - scattered source cards populate and hold */ .ord-scattered-remodel .ord-float-box { z-index: 18 !important; } .ord-scattered-remodel .ord-float-box.box-review { left: 13% !important; top: 27% !important; animation-name: ordStageReviewCardV91 !important; animation-delay: 0s !important; } .ord-scattered-remodel .ord-float-box.box-signal { left: 25% !important; top: 22% !important; animation-name: ordStageSignalCardV91 !important; animation-delay: .08s !important; } .ord-scattered-remodel .ord-float-box.box-decision { left: 18% !important; top: 43% !important; animation-name: ordStageDecisionCardV91 !important; animation-delay: .16s !important; } .ord-scattered-remodel .ord-float-box.box-risk { left: 32% !important; top: 39% !important; animation-name: ordStageRiskCardV91 !important; animation-delay: .24s !important; } .ord-scattered-remodel .ord-float-box.box-learning { left: 15% !important; top: 65% !important; animation-name: ordStageLearningCardV91 !important; animation-delay: .32s !important; } .ord-scattered-remodel .ord-float-box.box-escalation { left: 30% !important; top: 60% !important; animation-name: ordStageEscalationCardV91 !important; animation-delay: .40s !important; } /* Stage 2 - designed rhythm stack appears only after scattered cards have had time to populate. This stack is intentional, because it is the organized result. */ .ord-scattered-remodel .ord-cadence-node { left: 49.5% !important; width: 12rem !important; height: 2.10rem !important; opacity: 0; z-index: 14 !important; animation-name: ordStackCardV91 !important; } .ord-scattered-remodel .ord-cadence-node.node-review { top: 24% !important; animation-delay: 4.1s !important; } .ord-scattered-remodel .ord-cadence-node.node-decision { top: 40% !important; animation-delay: 4.35s !important; } .ord-scattered-remodel .ord-cadence-node.node-escalation { top: 56% !important; animation-delay: 4.60s !important; } .ord-scattered-remodel .ord-cadence-node.node-learning { top: 72% !important; animation-delay: 4.85s !important; } /* Stage 3/5 - set labels appear to the right after rhythm stack is visible, then brighten once linked. */ .ord-scattered-remodel .ord-lock { right: 4.2% !important; width: 15rem !important; font-size: .48rem !important; color: rgba(240,235,227,.86) !important; text-shadow: 0 0 10px rgba(255,255,255,.06) !important; z-index: 22 !important; animation-name: ordSetLabelV91 !important; } .ord-scattered-remodel .ord-lock.lock-weekly { top: calc(24% + 1.05rem) !important; animation-delay: 5.8s !important; } .ord-scattered-remodel .ord-lock.lock-decision { top: calc(40% + 1.05rem) !important; animation-delay: 6.05s !important; } .ord-scattered-remodel .ord-lock.lock-escalation { top: calc(56% + 1.05rem) !important; animation-delay: 6.30s !important; } .ord-scattered-remodel .ord-lock.lock-learning { top: calc(72% + 1.05rem) !important; animation-delay: 6.55s !important; } /* Stage 4 - actual relationship links between rhythm cards and their set labels. Use the dedicated ord-connection spans for the center gap. */ .ord-scattered-remodel .ord-connection { display: block !important; visibility: visible !important; position: absolute !important; left: 68.2% !important; width: 8.2% !important; height: 2px !important; opacity: 0; z-index: 21 !important; background: repeating-linear-gradient( 90deg, rgba(88,205,210,.82) 0 5px, transparent 5px 10px ) !important; box-shadow: 0 0 10px rgba(88,205,210,.18), 0 0 16px rgba(224,85,48,.08) !important; transform-origin: left center !important; transform: scaleX(.12) !important; animation-name: ordCardToSetLinkV91 !important; animation-duration: 14s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-scattered-remodel .ord-connection.c1 { top: calc(24% + 1.05rem) !important; animation-delay: 6.45s !important; } .ord-scattered-remodel .ord-connection.c2 { top: calc(40% + 1.05rem) !important; animation-delay: 6.70s !important; } .ord-scattered-remodel .ord-connection.c3 { top: calc(56% + 1.05rem) !important; animation-delay: 6.95s !important; } .ord-scattered-remodel .ord-connection.c4 { top: calc(72% + 1.05rem) !important; animation-delay: 7.20s !important; } /* Disable connector pseudo-elements on the set labels. They were competing with the explicit center-gap links and making debugging harder. */ .ord-scattered-remodel .ord-lock::before { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; content: none !important; } /* Stage 1 keyframes. Source boxes populate, then drift toward organization, then fade. */ @keyframes ordStageReviewCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 32% { opacity: .92; transform: translate(0,0) scale(1) rotate(-2deg); } 48% { opacity: .62; transform: translate(100%, 0%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(168%, -3%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } } @keyframes ordStageSignalCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 32% { opacity: .88; transform: translate(0,0) scale(1) rotate(2deg); } 48% { opacity: .54; transform: translate(70%, 28%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(126%, 42%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } } @keyframes ordStageDecisionCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(1deg); } 12%, 32% { opacity: .92; transform: translate(0,0) scale(1) rotate(1deg); } 48% { opacity: .62; transform: translate(96%, -3%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(158%, -4%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(1deg); } } @keyframes ordStageRiskCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-1deg); } 12%, 32% { opacity: .84; transform: translate(0,0) scale(1) rotate(-1deg); } 48% { opacity: .48; transform: translate(52%, 16%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(88%, 26%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-1deg); } } @keyframes ordStageLearningCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 32% { opacity: .88; transform: translate(0,0) scale(1) rotate(2deg); } 48% { opacity: .56; transform: translate(116%, -8%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(180%, -12%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } } @keyframes ordStageEscalationCardV91 { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 32% { opacity: .90; transform: translate(0,0) scale(1) rotate(-2deg); } 48% { opacity: .58; transform: translate(70%, -4%) scale(.90) rotate(0deg); } 62%, 92% { opacity: 0; transform: translate(116%, -8%) scale(.80) rotate(0deg); } 100% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } } /* Stage 2 - stack cards pop in after source cards begin organizing. */ @keyframes ordStackCardV91 { 0%, 34% { opacity: 0; transform: scale(.94) translateX(10px); } 46% { opacity: .96; transform: scale(1) translateX(0); } 80% { opacity: .92; transform: scale(1) translateX(0); } 92%, 100% { opacity: 0; transform: scale(.96) translateX(4px); } } /* Stage 3/5 - set labels appear, then brighten after connection. */ @keyframes ordSetLabelV91 { 0%, 42% { opacity: 0; transform: translateY(-50%) translateX(8px); color: rgba(240,235,227,.58); } 54% { opacity: .72; transform: translateY(-50%) translateX(0); color: rgba(240,235,227,.68); } 66%, 84% { opacity: .98; transform: translateY(-50%) translateX(0); color: rgba(240,235,227,.94); text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 14px rgba(88,205,210,.08); } 94%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } /* Stage 4 - link is created after both corresponding boxes exist. */ @keyframes ordCardToSetLinkV91 { 0%, 46% { opacity: 0; transform: scaleX(.12); } 58% { opacity: .86; transform: scaleX(.72); } 68%, 84% { opacity: .94; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(.18); } } /* Header timing follows the choreography. */ .ord-scattered-remodel .ord-state.scattered { animation-duration: 14s !important; animation-name: ordScatterHeaderV91 !important; } .ord-scattered-remodel .ord-state.cadence { animation-duration: 14s !important; animation-name: ordCadenceHeaderV91 !important; } @keyframes ordScatterHeaderV91 { 0%, 30% { opacity: .92; } 46% { opacity: .50; } 70%, 92% { opacity: .18; } 100% { opacity: 0; } } @keyframes ordCadenceHeaderV91 { 0%, 38% { opacity: .16; } 50% { opacity: .58; } 64%, 84% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 94%, 100% { opacity: 0; } } @media(max-width:900px) { .ord-scattered-remodel .ord-connection { display: none !important; } } /* METHOD V92: O.R.D. exact staged map sequence */ .artifact-visual-rhythm { overflow: hidden !important; } .ord-step-map { position: absolute; inset: 8% 4% 10% 4%; pointer-events: none; isolation: isolate; } .ord-step-map .ord-state { position: absolute; top: 7%; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; z-index: 20; animation-duration: 13s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ord-step-map .ord-state.scattered { left: 5%; color: rgba(240,235,227,.60); animation-name: ordV92ScatteredHeader; } .ord-step-map .ord-state.cadence { right: 5%; color: var(--red-hi); animation-name: ordV92CadenceHeader; } /* Step 1 and 2: Cards begin scattered on the left. They hold briefly, then reorganize into a neat left-side column. They never travel to the right side. */ .ord-step-map .ord-float-box { position: absolute; width: 9.3rem; height: 2.05rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(ellipse 110% 160% at 12% 50%, rgba(200,64,26,.10), transparent 68%), rgba(7,5,3,.78); color: rgba(240,235,227,.70); font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; box-shadow: 0 0 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018); opacity: 0; z-index: 18; animation-duration: 13s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-iteration-count: infinite; } .ord-step-map .ord-float-box.box-review { left: 13%; top: 27%; animation-name: ordV92ReviewSource; } .ord-step-map .ord-float-box.box-decision { left: 22%; top: 44%; animation-name: ordV92DecisionSource; animation-delay: .10s; } .ord-step-map .ord-float-box.box-escalation { left: 30%; top: 59%; animation-name: ordV92EscalationSource; animation-delay: .20s; } .ord-step-map .ord-float-box.box-learning { left: 15%; top: 68%; animation-name: ordV92LearningSource; animation-delay: .30s; } /* Step 3: Orange rhythm boxes appear on the right only after the left column has organized. */ .ord-step-map .ord-cadence-node { position: absolute; left: 53%; width: 12.8rem; height: 2.05rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(224,85,48,.30); background: radial-gradient(ellipse 100% 160% at 12% 50%, rgba(200,64,26,.15), transparent 70%), rgba(7,5,3,.76); color: rgba(240,235,227,.76); box-shadow: 0 0 18px rgba(224,85,48,.11), inset 0 0 0 1px rgba(255,255,255,.024); opacity: 0; z-index: 14; animation: ordV92CadenceBox 13s cubic-bezier(.22,1,.36,1) infinite; } .ord-step-map .ord-cadence-node b { font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 400; } .ord-step-map .ord-cadence-node.node-review { top: 26%; animation-delay: 4.0s; } .ord-step-map .ord-cadence-node.node-decision { top: 42%; animation-delay: 4.18s; } .ord-step-map .ord-cadence-node.node-escalation { top: 58%; animation-delay: 4.36s; } .ord-step-map .ord-cadence-node.node-learning { top: 74%; animation-delay: 4.54s; } /* Step 4 and 5: Faint red circuit-like connection links the corresponding boxes. A small pulse travels left to right on each line. */ .ord-step-map .ord-connection { position: absolute; left: 35.3%; width: 17.7%; height: 2px; opacity: 0; z-index: 12; background: repeating-linear-gradient( 90deg, rgba(224,85,48,.62) 0 5px, transparent 5px 10px ); box-shadow: 0 0 10px rgba(224,85,48,.16), 0 0 16px rgba(88,205,210,.05); transform-origin: left center; animation: ordV92ConnectorLine 13s ease-in-out infinite; } .ord-step-map .ord-connection i { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(224,85,48,.88); box-shadow: 0 0 10px rgba(224,85,48,.36), 0 0 16px rgba(88,205,210,.08); opacity: 0; transform: translate(-50%, -50%); animation: ordV92ConnectorPulse 13s ease-in-out infinite; } .ord-step-map .ord-connection.c1 { top: calc(26% + 1.025rem); animation-delay: 5.10s; } .ord-step-map .ord-connection.c1 i { animation-delay: 5.10s; } .ord-step-map .ord-connection.c2 { top: calc(42% + 1.025rem); animation-delay: 5.35s; } .ord-step-map .ord-connection.c2 i { animation-delay: 5.35s; } .ord-step-map .ord-connection.c3 { top: calc(58% + 1.025rem); animation-delay: 5.60s; } .ord-step-map .ord-connection.c3 i { animation-delay: 5.60s; } .ord-step-map .ord-connection.c4 { top: calc(74% + 1.025rem); animation-delay: 5.85s; } .ord-step-map .ord-connection.c4 i { animation-delay: 5.85s; } /* Step 6: SET output appears after connection is made. */ .ord-step-map .ord-lock { position: absolute; right: 3.2%; width: 15.8rem; color: rgba(240,235,227,.88); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) translateX(8px); z-index: 22; text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); animation: ordV92SetPopup 13s ease-in-out infinite; } .ord-step-map .ord-lock::before { display: none !important; content: none !important; } .ord-step-map .ord-lock.lock-weekly { top: calc(26% + 1.025rem); animation-delay: 6.20s; } .ord-step-map .ord-lock.lock-decision { top: calc(42% + 1.025rem); animation-delay: 6.45s; } .ord-step-map .ord-lock.lock-escalation { top: calc(58% + 1.025rem); animation-delay: 6.70s; } .ord-step-map .ord-lock.lock-learning { top: calc(74% + 1.025rem); animation-delay: 6.95s; } /* Step 7: All elements fade together before the loop restarts. */ @keyframes ordV92ReviewSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 26% { opacity: .92; transform: translate(0,0) scale(1) rotate(-2deg); } 42%, 78% { opacity: .92; transform: translate(10%, 0%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(10%, 0%) scale(.96) rotate(0deg); } } @keyframes ordV92DecisionSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(2deg); } 42%, 78% { opacity: .92; transform: translate(1%, -18%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(1%, -18%) scale(.96) rotate(0deg); } } @keyframes ordV92EscalationSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(-2deg); } 42%, 78% { opacity: .92; transform: translate(-7%, -14%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(-7%, -14%) scale(.96) rotate(0deg); } } @keyframes ordV92LearningSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(2deg); } 42%, 78% { opacity: .92; transform: translate(8%, -2%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(8%, -2%) scale(.96) rotate(0deg); } } @keyframes ordV92CadenceBox { 0%, 36% { opacity: 0; transform: translateX(8px) scale(.94); } 48%, 78% { opacity: .96; transform: translateX(0) scale(1); } 88%, 100% { opacity: 0; transform: translateX(0) scale(.96); } } @keyframes ordV92ConnectorLine { 0%, 42% { opacity: 0; transform: scaleX(.10); } 54% { opacity: .78; transform: scaleX(.70); } 66%, 78% { opacity: .88; transform: scaleX(1); } 88%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ordV92ConnectorPulse { 0%, 48% { opacity: 0; left: 0%; } 56% { opacity: .98; left: 15%; } 68% { opacity: .92; left: 78%; } 74% { opacity: 0; left: 100%; } 100% { opacity: 0; left: 100%; } } @keyframes ordV92SetPopup { 0%, 50% { opacity: 0; transform: translateY(-50%) translateX(8px); } 64%, 78% { opacity: .98; transform: translateY(-50%) translateX(0); } 88%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @keyframes ordV92ScatteredHeader { 0%, 30% { opacity: .92; } 48%, 78% { opacity: .44; } 88%, 100% { opacity: 0; } } @keyframes ordV92CadenceHeader { 0%, 38% { opacity: .16; } 52%, 78% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 88%, 100% { opacity: 0; } } @media(max-width:1100px) { .ord-step-map .ord-float-box { width: 7.8rem; } .ord-step-map .ord-cadence-node { left: 50% !important; width: 10.5rem; } .ord-step-map .ord-connection { left: 35% !important; width: 15% !important; } .ord-step-map .ord-lock { width: 12.5rem; right: 1.5%; } } @media(max-width:768px) { .ord-step-map .ord-connection, .ord-step-map .ord-lock { display: none !important; } .ord-step-map .ord-float-box { width: 6rem; font-size: .38rem; } .ord-step-map .ord-cadence-node { width: 8rem; } .ord-step-map .ord-cadence-node b { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .ord-step-map * { animation: none !important; } } /* METHOD V93: O.R.D. aligned circuit map, solid faint links, single traveling pulse */ /* The last pass was conceptually close but spatially cramped and visually dotty. This pass aligns the left organized column and right cadence column by row, spreads them apart, and turns the relationship into faint red circuit traces. */ .ord-step-map .ord-float-box, .ord-step-map .ord-cadence-node, .ord-step-map .ord-connection, .ord-step-map .ord-lock { animation-duration: 13.5s !important; animation-timing-function: cubic-bezier(.22,1,.36,1) !important; animation-iteration-count: infinite !important; } /* Final organized left column positions. These are the same row centers as the right cadence boxes and connections. */ .ord-step-map .ord-float-box { width: 9.1rem !important; height: 2.0rem !important; } .ord-step-map .ord-float-box.box-review { left: 12% !important; top: 24% !important; animation-name: ordV93ReviewSource !important; animation-delay: 0s !important; } .ord-step-map .ord-float-box.box-decision { left: 23% !important; top: 45% !important; animation-name: ordV93DecisionSource !important; animation-delay: .10s !important; } .ord-step-map .ord-float-box.box-escalation { left: 31% !important; top: 61% !important; animation-name: ordV93EscalationSource !important; animation-delay: .20s !important; } .ord-step-map .ord-float-box.box-learning { left: 14% !important; top: 70% !important; animation-name: ordV93LearningSource !important; animation-delay: .30s !important; } /* Right cadence boxes move farther right to create a readable circuit span. */ .ord-step-map .ord-cadence-node { left: 60.5% !important; width: 13.0rem !important; height: 2.0rem !important; animation-name: ordV93CadenceBox !important; z-index: 14 !important; } .ord-step-map .ord-cadence-node.node-review { top: 26% !important; animation-delay: 4.0s !important; } .ord-step-map .ord-cadence-node.node-decision { top: 42% !important; animation-delay: 4.18s !important; } .ord-step-map .ord-cadence-node.node-escalation { top: 58% !important; animation-delay: 4.36s !important; } .ord-step-map .ord-cadence-node.node-learning { top: 74% !important; animation-delay: 4.54s !important; } /* Faint red circuit traces. These are no longer dotted. The line stays faint, then a single pulse travels left-to-right once per connection. */ .ord-step-map .ord-connection { display: block !important; visibility: visible !important; position: absolute !important; left: 35.7% !important; width: 24.7% !important; height: 1px !important; opacity: 0; z-index: 12 !important; background: linear-gradient( 90deg, rgba(224,85,48,.10), rgba(224,85,48,.38), rgba(224,85,48,.16) ) !important; box-shadow: 0 0 8px rgba(224,85,48,.12), 0 0 16px rgba(88,205,210,.035) !important; transform-origin: left center !important; transform: scaleX(.12) !important; animation-name: ordV93CircuitLine !important; animation-duration: 13.5s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-step-map .ord-connection::before, .ord-step-map .ord-connection::after { content: '' !important; position: absolute !important; top: 0 !important; width: 1px !important; height: 9px !important; background: rgba(224,85,48,.28) !important; opacity: .72 !important; transform: translateY(-4px) !important; box-shadow: 0 0 8px rgba(224,85,48,.12) !important; } .ord-step-map .ord-connection::before { left: 0 !important; } .ord-step-map .ord-connection::after { right: 0 !important; } .ord-step-map .ord-connection i { display: block !important; position: absolute !important; left: 0; top: 50%; width: 8px !important; height: 8px !important; border-radius: 50%; background: rgba(224,85,48,.96) !important; box-shadow: 0 0 10px rgba(224,85,48,.44), 0 0 18px rgba(224,85,48,.18), 0 0 20px rgba(88,205,210,.06) !important; opacity: 0; transform: translate(-50%, -50%) scale(.80) !important; animation-name: ordV93CircuitPulse !important; animation-duration: 13.5s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-step-map .ord-connection.c1 { top: calc(26% + 1.0rem) !important; animation-delay: 5.05s !important; } .ord-step-map .ord-connection.c1 i { animation-delay: 5.05s !important; } .ord-step-map .ord-connection.c2 { top: calc(42% + 1.0rem) !important; animation-delay: 5.30s !important; } .ord-step-map .ord-connection.c2 i { animation-delay: 5.30s !important; } .ord-step-map .ord-connection.c3 { top: calc(58% + 1.0rem) !important; animation-delay: 5.55s !important; } .ord-step-map .ord-connection.c3 i { animation-delay: 5.55s !important; } .ord-step-map .ord-connection.c4 { top: calc(74% + 1.0rem) !important; animation-delay: 5.80s !important; } .ord-step-map .ord-connection.c4 i { animation-delay: 5.80s !important; } /* Set popups stay right, but appear after the circuit pulse has traveled. */ .ord-step-map .ord-lock { right: 1.8% !important; width: 14.0rem !important; font-size: .46rem !important; animation-name: ordV93SetPopup !important; z-index: 22 !important; } .ord-step-map .ord-lock.lock-weekly { top: calc(26% + 1.0rem) !important; animation-delay: 6.35s !important; } .ord-step-map .ord-lock.lock-decision { top: calc(42% + 1.0rem) !important; animation-delay: 6.60s !important; } .ord-step-map .ord-lock.lock-escalation { top: calc(58% + 1.0rem) !important; animation-delay: 6.85s !important; } .ord-step-map .ord-lock.lock-learning { top: calc(74% + 1.0rem) !important; animation-delay: 7.10s !important; } /* Source cards: scattered briefly, then align into a neat left column. Important: they do not migrate toward the right. */ @keyframes ordV93ReviewSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 26% { opacity: .92; transform: translate(0,0) scale(1) rotate(-2deg); } 42%, 78% { opacity: .94; transform: translate(5%, 2%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(5%, 2%) scale(.96) rotate(0deg); } } @keyframes ordV93DecisionSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(2deg); } 42%, 78% { opacity: .94; transform: translate(-7%, -4%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(-7%, -4%) scale(.96) rotate(0deg); } } @keyframes ordV93EscalationSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(-2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(-2deg); } 42%, 78% { opacity: .94; transform: translate(-15%, -5%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(-15%, -5%) scale(.96) rotate(0deg); } } @keyframes ordV93LearningSource { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94) rotate(2deg); } 12%, 26% { opacity: .90; transform: translate(0,0) scale(1) rotate(2deg); } 42%, 78% { opacity: .94; transform: translate(3%, -7%) scale(1) rotate(0deg); } 88%, 100% { opacity: 0; transform: translate(3%, -7%) scale(.96) rotate(0deg); } } @keyframes ordV93CadenceBox { 0%, 36% { opacity: 0; transform: translateX(12px) scale(.94); } 48%, 78% { opacity: .96; transform: translateX(0) scale(1); } 88%, 100% { opacity: 0; transform: translateX(0) scale(.96); } } @keyframes ordV93CircuitLine { 0%, 42% { opacity: 0; transform: scaleX(.10); } 54% { opacity: .70; transform: scaleX(1); } 78% { opacity: .76; transform: scaleX(1); } 88%, 100% { opacity: 0; transform: scaleX(.18); } } /* The pulse travels only once. It does not linger as a dot connection. */ @keyframes ordV93CircuitPulse { 0%, 47% { opacity: 0; left: 0%; transform: translate(-50%, -50%) scale(.70); } 54% { opacity: .98; left: 8%; transform: translate(-50%, -50%) scale(1); } 66% { opacity: .98; left: 88%; transform: translate(-50%, -50%) scale(1); } 72% { opacity: 0; left: 100%; transform: translate(-50%, -50%) scale(.70); } 100% { opacity: 0; left: 100%; transform: translate(-50%, -50%) scale(.70); } } @keyframes ordV93SetPopup { 0%, 54% { opacity: 0; transform: translateY(-50%) translateX(8px); } 66%, 78% { opacity: .98; transform: translateY(-50%) translateX(0); } 88%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } /* Nudge headers to match the new sequence. */ .ord-step-map .ord-state.scattered { animation-name: ordV93ScatteredHeader !important; animation-duration: 13.5s !important; } .ord-step-map .ord-state.cadence { animation-name: ordV93CadenceHeader !important; animation-duration: 13.5s !important; } @keyframes ordV93ScatteredHeader { 0%, 30% { opacity: .92; } 48%, 78% { opacity: .48; } 88%, 100% { opacity: 0; } } @keyframes ordV93CadenceHeader { 0%, 38% { opacity: .16; } 52%, 78% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 88%, 100% { opacity: 0; } } @media(max-width:1100px) { .ord-step-map .ord-cadence-node { left: 57% !important; width: 10.7rem !important; } .ord-step-map .ord-connection { left: 35.5% !important; width: 21.5% !important; } .ord-step-map .ord-lock { width: 11.7rem !important; right: .75% !important; } } @media(max-width:768px) { .ord-step-map .ord-connection, .ord-step-map .ord-lock { display: none !important; } } /* METHOD V94: O.R.D. clean three-column circuit sequence */ /* Simplified choreography: 1. Left source cards populate already stacked. 2. Right rhythm cards appear. 3. Circuit lines connect exact row-to-row box pairs. 4. One pulse travels left-to-right on each circuit. 5. SET labels appear. 6. Everything fades together. */ .ord-step-map { position: absolute !important; inset: 8% 4% 10% 4% !important; pointer-events: none; isolation: isolate; } .ord-step-map .ord-state, .ord-step-map .ord-float-box, .ord-step-map .ord-cadence-node, .ord-step-map .ord-connection, .ord-step-map .ord-lock { animation-duration: 12s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-step-map .ord-state.scattered { left: 5% !important; top: 8% !important; animation-name: ordV94SourceHeader !important; } .ord-step-map .ord-state.cadence { right: 5% !important; top: 8% !important; animation-name: ordV94CadenceHeader !important; } /* LEFT COLUMN: already stacked when populated. No offset/reorganize movement. This makes the source side easier to read. */ .ord-step-map .ord-float-box { left: 12% !important; width: 11.2rem !important; height: 2.05rem !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0; transform: translateY(8px) scale(.96) !important; z-index: 18 !important; animation-name: ordV94LeftCard !important; } .ord-step-map .ord-float-box.box-review { top: 25% !important; animation-delay: 0s !important; } .ord-step-map .ord-float-box.box-decision { top: 41% !important; animation-delay: .12s !important; } .ord-step-map .ord-float-box.box-escalation { top: 57% !important; animation-delay: .24s !important; } .ord-step-map .ord-float-box.box-learning { top: 73% !important; animation-delay: .36s !important; } /* MIDDLE-RIGHT RHYTHM COLUMN: deliberately spaced away from source column. */ .ord-step-map .ord-cadence-node { left: 52% !important; width: 13.3rem !important; height: 2.05rem !important; opacity: 0; transform: translateY(8px) scale(.96) !important; z-index: 15 !important; animation-name: ordV94RhythmCard !important; } .ord-step-map .ord-cadence-node.node-review { top: 25% !important; animation-delay: 3.15s !important; } .ord-step-map .ord-cadence-node.node-decision { top: 41% !important; animation-delay: 3.30s !important; } .ord-step-map .ord-cadence-node.node-escalation { top: 57% !important; animation-delay: 3.45s !important; } .ord-step-map .ord-cadence-node.node-learning { top: 73% !important; animation-delay: 3.60s !important; } /* CIRCUIT CONNECTIONS: exact source box to rhythm box row alignment. These now span the gap between the right edge of the left cards and the left edge of the rhythm cards. */ .ord-step-map .ord-connection { display: block !important; visibility: visible !important; position: absolute !important; left: calc(12% + 11.2rem) !important; width: calc(52% - 12% - 11.2rem) !important; height: 1px !important; opacity: 0; z-index: 13 !important; background: linear-gradient( 90deg, rgba(224,85,48,.16), rgba(224,85,48,.46), rgba(224,85,48,.16) ) !important; box-shadow: 0 0 8px rgba(224,85,48,.14), 0 0 14px rgba(88,205,210,.035) !important; transform-origin: left center !important; transform: scaleX(.06) !important; animation-name: ordV94CircuitLine !important; animation-duration: 12s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-step-map .ord-connection::before, .ord-step-map .ord-connection::after { content: '' !important; position: absolute !important; top: 50% !important; width: 1px !important; height: 8px !important; background: rgba(224,85,48,.28) !important; opacity: .72 !important; transform: translateY(-50%) !important; box-shadow: 0 0 8px rgba(224,85,48,.12) !important; } .ord-step-map .ord-connection::before { left: 0 !important; } .ord-step-map .ord-connection::after { right: 0 !important; } .ord-step-map .ord-connection i { display: block !important; position: absolute !important; left: 0; top: 50%; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(224,85,48,.96) !important; box-shadow: 0 0 10px rgba(224,85,48,.46), 0 0 18px rgba(224,85,48,.18), 0 0 22px rgba(88,205,210,.06) !important; opacity: 0; transform: translate(-50%, -50%) scale(.75) !important; animation-name: ordV94CircuitPulse !important; animation-duration: 12s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } .ord-step-map .ord-connection.c1 { top: calc(25% + 1.025rem) !important; animation-delay: 4.20s !important; } .ord-step-map .ord-connection.c1 i { animation-delay: 4.20s !important; } .ord-step-map .ord-connection.c2 { top: calc(41% + 1.025rem) !important; animation-delay: 4.42s !important; } .ord-step-map .ord-connection.c2 i { animation-delay: 4.42s !important; } .ord-step-map .ord-connection.c3 { top: calc(57% + 1.025rem) !important; animation-delay: 4.64s !important; } .ord-step-map .ord-connection.c3 i { animation-delay: 4.64s !important; } .ord-step-map .ord-connection.c4 { top: calc(73% + 1.025rem) !important; animation-delay: 4.86s !important; } .ord-step-map .ord-connection.c4 i { animation-delay: 4.86s !important; } /* FAR-RIGHT SET OUTPUTS: separate column. They appear after the pulse reaches the rhythm card. */ .ord-step-map .ord-lock { right: 1.8% !important; width: 14.0rem !important; font-size: .46rem !important; color: rgba(240,235,227,.90) !important; text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 14px rgba(88,205,210,.08) !important; opacity: 0; z-index: 22 !important; animation-name: ordV94SetPopup !important; } .ord-step-map .ord-lock::before { display: none !important; content: none !important; } .ord-step-map .ord-lock.lock-weekly { top: calc(25% + 1.025rem) !important; animation-delay: 5.40s !important; } .ord-step-map .ord-lock.lock-decision { top: calc(41% + 1.025rem) !important; animation-delay: 5.62s !important; } .ord-step-map .ord-lock.lock-escalation { top: calc(57% + 1.025rem) !important; animation-delay: 5.84s !important; } .ord-step-map .ord-lock.lock-learning { top: calc(73% + 1.025rem) !important; animation-delay: 6.06s !important; } /* Keyframes use a shared final fade window so the scene clears together. */ @keyframes ordV94LeftCard { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.96); } 14%, 74% { opacity: .94; transform: translateY(0) scale(1); } 84%, 100% { opacity: 0; transform: translateY(-4px) scale(.96); } } @keyframes ordV94RhythmCard { 0%, 32% { opacity: 0; transform: translateY(8px) scale(.96); } 44%, 74% { opacity: .96; transform: translateY(0) scale(1); } 84%, 100% { opacity: 0; transform: translateY(-4px) scale(.96); } } @keyframes ordV94CircuitLine { 0%, 40% { opacity: 0; transform: scaleX(.06); } 52% { opacity: .74; transform: scaleX(1); } 74% { opacity: .80; transform: scaleX(1); } 84%, 100% { opacity: 0; transform: scaleX(.10); } } @keyframes ordV94CircuitPulse { 0%, 42% { opacity: 0; left: 0%; transform: translate(-50%, -50%) scale(.70); } 50% { opacity: .98; left: 8%; transform: translate(-50%, -50%) scale(1); } 63% { opacity: .98; left: 92%; transform: translate(-50%, -50%) scale(1); } 68% { opacity: 0; left: 100%; transform: translate(-50%, -50%) scale(.70); } 100% { opacity: 0; left: 100%; transform: translate(-50%, -50%) scale(.70); } } @keyframes ordV94SetPopup { 0%, 48% { opacity: 0; transform: translateY(-50%) translateX(8px); } 60%, 74% { opacity: .98; transform: translateY(-50%) translateX(0); } 84%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); } } @keyframes ordV94SourceHeader { 0%, 26% { opacity: .94; } 48%, 74% { opacity: .52; } 84%, 100% { opacity: 0; } } @keyframes ordV94CadenceHeader { 0%, 34% { opacity: .16; } 48%, 74% { opacity: .98; text-shadow: 0 0 16px rgba(224,85,48,.30); } 84%, 100% { opacity: 0; } } @media(max-width:1180px) { .ord-step-map .ord-float-box { left: 10% !important; width: 9.2rem !important; } .ord-step-map .ord-cadence-node { left: 50% !important; width: 11.2rem !important; } .ord-step-map .ord-connection { left: calc(10% + 9.2rem) !important; width: calc(50% - 10% - 9.2rem) !important; } .ord-step-map .ord-lock { width: 11.8rem !important; right: .8% !important; } } @media(max-width:768px) { .ord-step-map .ord-connection, .ord-step-map .ord-lock { display: none !important; } .ord-step-map .ord-float-box { width: 6.4rem !important; font-size: .36rem !important; } .ord-step-map .ord-cadence-node { width: 8rem !important; } .ord-step-map .ord-cadence-node b { font-size: .36rem !important; } } /* METHOD V95: O.R.D. clean scratch rebuild */ .artifact-visual-rhythm { overflow: hidden !important; } /* Hide every prior O.R.D. experiment so no old animation, connector, dot, or pseudo-element can leak through. The rebuild below uses only ord-r-* classes. */ .artifact-visual-rhythm .ord-cadence-system, .artifact-visual-rhythm .ord-step-map, .artifact-visual-rhythm .ord-scattered-remodel, .artifact-visual-rhythm .ord-state, .artifact-visual-rhythm .ord-float-box, .artifact-visual-rhythm .ord-cadence-node, .artifact-visual-rhythm .ord-connection, .artifact-visual-rhythm .ord-lock, .artifact-visual-rhythm .ord-beat { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-rhythm .ord-rebuild-system, .artifact-visual-rhythm .ord-rebuild-system * { display: revert; visibility: visible; } .ord-rebuild-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; opacity: 1 !important; } .ord-r-label { position: absolute; top: 7%; color: rgba(240,235,227,.46); font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; z-index: 20; opacity: 0; animation: ordRLabelCycle 11.5s ease-in-out infinite; } .ord-r-source-label { left: 7%; } .ord-r-rhythm-label { left: 54%; color: var(--red-hi); animation-name: ordRRhythmLabelCycle; } .ord-r-set-label { right: 9%; color: rgba(240,235,227,.44); animation-name: ordRSetHeaderCycle; } .ord-r-card { position: absolute; height: 2.05rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; opacity: 0; z-index: 12; animation-duration: 11.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ord-r-source { left: 7%; width: 12.6rem; border: 1px solid rgba(255,255,255,.075); background: radial-gradient(ellipse 110% 160% at 12% 50%, rgba(200,64,26,.10), transparent 68%), rgba(7,5,3,.80); color: rgba(240,235,227,.70); box-shadow: 0 0 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018); animation-name: ordRSourceCycle; } .ord-r-rhythm { left: 61%; width: 13.6rem; border: 1px solid rgba(224,85,48,.32); background: radial-gradient(ellipse 100% 160% at 12% 50%, rgba(200,64,26,.16), transparent 70%), rgba(7,5,3,.78); color: rgba(240,235,227,.78); box-shadow: 0 0 18px rgba(224,85,48,.12), inset 0 0 0 1px rgba(255,255,255,.024); animation-name: ordRRhythmCycle; } .s-review, .r-review, .set-review { top: 25%; } .s-decision, .r-decision, .set-decision { top: 41%; } .s-escalation, .r-escalation, .set-escalation { top: 57%; } .s-learning, .r-learning, .set-learning { top: 73%; } .s-review { animation-delay: 0s; } .s-decision { animation-delay: .12s; } .s-escalation { animation-delay: .24s; } .s-learning { animation-delay: .36s; } .r-review { animation-delay: 3.0s; } .r-decision { animation-delay: 3.16s; } .r-escalation { animation-delay: 3.32s; } .r-learning { animation-delay: 3.48s; } .ord-r-circuits { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 10; } .ord-r-wire { fill: none; stroke: rgba(224,85,48,.36); stroke-width: 1.3; stroke-linecap: square; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 6px rgba(224,85,48,.16)); stroke-dasharray: 285 285; stroke-dashoffset: 285; animation: ordRWireCycle 11.5s ease-in-out infinite; } .w-review { animation-delay: 4.10s; } .w-decision { animation-delay: 4.26s; } .w-escalation { animation-delay: 4.42s; } .w-learning { animation-delay: 4.58s; } .ord-r-pulse { fill: rgba(224,85,48,.96); filter: drop-shadow(0 0 10px rgba(224,85,48,.46)) drop-shadow(0 0 18px rgba(224,85,48,.18)); opacity: 0; animation: ordRPulseCycle 11.5s ease-in-out infinite; } .p-review { animation-delay: 4.10s; } .p-decision { animation-delay: 4.26s; } .p-escalation { animation-delay: 4.42s; } .p-learning { animation-delay: 4.58s; } /* The invisible mpath targets must stay invisible. */ #ordWireReview, #ordWireDecision, #ordWireEscalation, #ordWireLearning { fill: none; stroke: transparent; opacity: 0; } .ord-r-set { position: absolute; right: 1.5%; width: 14rem; height: 2.05rem; display: flex; align-items: center; color: rgba(240,235,227,.92); font-size: .46rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; z-index: 18; text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 14px rgba(88,205,210,.08); transform: translateX(8px); animation: ordRSetCycle 11.5s ease-in-out infinite; } .set-review { animation-delay: 5.55s; } .set-decision { animation-delay: 5.72s; } .set-escalation { animation-delay: 5.89s; } .set-learning { animation-delay: 6.06s; } /* Cycle details: Source cards appear and hold. Rhythm cards appear later. Circuit lines draw from source to rhythm. Pulse travels once. SET labels appear. Everything fades together near the end. */ @keyframes ordRSourceCycle { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.96); } 12%, 76% { opacity: .94; transform: translateY(0) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-5px) scale(.96); } } @keyframes ordRRhythmCycle { 0%, 28% { opacity: 0; transform: translateY(8px) scale(.96); } 40%, 76% { opacity: .96; transform: translateY(0) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-5px) scale(.96); } } @keyframes ordRWireCycle { 0%, 36% { opacity: 0; stroke-dashoffset: 285; } 46% { opacity: .72; stroke-dashoffset: 0; } 76% { opacity: .78; stroke-dashoffset: 0; } 86%, 100% { opacity: 0; stroke-dashoffset: 0; } } @keyframes ordRPulseCycle { 0%, 40% { opacity: 0; } 47% { opacity: 1; } 58% { opacity: 1; } 64%, 100% { opacity: 0; } } @keyframes ordRSetCycle { 0%, 48% { opacity: 0; transform: translateX(8px); } 60%, 76% { opacity: .98; transform: translateX(0); } 86%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordRLabelCycle { 0%, 8% { opacity: 0; } 14%, 76% { opacity: .80; } 86%, 100% { opacity: 0; } } @keyframes ordRRhythmLabelCycle { 0%, 30% { opacity: .12; } 42%, 76% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 86%, 100% { opacity: 0; } } @keyframes ordRSetHeaderCycle { 0%, 48% { opacity: .10; } 60%, 76% { opacity: .74; } 86%, 100% { opacity: 0; } } @media(max-width:1180px) { .ord-r-source { left: 5%; width: 10rem; } .ord-r-rhythm { left: 56%; width: 11rem; } .ord-r-set { right: .5%; width: 11.2rem; font-size: .40rem; } } @media(max-width:768px) { .ord-r-circuits, .ord-r-set, .ord-r-set-label { display: none !important; } .ord-r-source { left: 6%; width: 7rem; font-size: .36rem; } .ord-r-rhythm { left: 50%; width: 8rem; font-size: .36rem; } .ord-r-label { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .ord-rebuild-system * { animation: none !important; } } /* METHOD V96: O.R.D. sequential circuit signal, top-to-bottom */ /* Refine the scratch rebuild: - thin dark red circuit line connects first - blue light pulse travels left-to-right, not an orb - SET output appears when the blue signal reaches the right side - rows fire top-to-bottom, one at a time - after Learning completes, the full scene fades together */ .ord-rebuild-system { position: absolute !important; inset: 8% 5% 10% 5% !important; pointer-events: none; isolation: isolate; } .ord-r-label, .ord-r-card, .ord-r-wire, .ord-r-pulse, .ord-r-set { animation-duration: 13.2s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Keep the three-column layout stable and readable. */ .ord-r-source { left: 6.5% !important; width: 13.0rem !important; animation-name: ordV96SourceHold !important; animation-delay: 0s !important; } .ord-r-rhythm { left: 57% !important; width: 14.0rem !important; animation-name: ordV96RhythmHold !important; animation-delay: 2.1s !important; } .ord-r-set { right: 1.6% !important; width: 14.2rem !important; animation-name: ordV96SetBase !important; animation-delay: 0s !important; color: rgba(240,235,227,.92) !important; } .s-review, .r-review, .set-review { top: 25% !important; } .s-decision, .r-decision, .set-decision { top: 41% !important; } .s-escalation, .r-escalation, .set-escalation { top: 57% !important; } .s-learning, .r-learning, .set-learning { top: 73% !important; } /* SVG wires span exactly between the right edge of source column and left edge of rhythm column. Switch from bright/orange lines to thin, dark red circuit lines. */ .ord-r-circuits { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; z-index: 10 !important; } .ord-r-wire { fill: none !important; stroke: rgba(120,26,15,.62) !important; stroke-width: 1 !important; stroke-linecap: square !important; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 4px rgba(120,26,15,.18)) !important; stroke-dasharray: 285 285 !important; stroke-dashoffset: 285; animation-name: ordV96WireDraw !important; } .w-review { animation-delay: 3.50s !important; } .w-decision { animation-delay: 5.00s !important; } .w-escalation { animation-delay: 6.50s !important; } .w-learning { animation-delay: 8.00s !important; } /* Turn SVG pulse circles into a narrow blue light streak. It still uses animateMotion on the path, but visually it reads as a small traveling glow, not a round orb. */ .ord-r-pulse { fill: rgba(88,205,210,.98) !important; opacity: 0; filter: drop-shadow(0 0 8px rgba(88,205,210,.62)) drop-shadow(0 0 16px rgba(88,205,210,.24)) !important; animation-name: ordV96BlueSignal !important; transform-box: fill-box; transform-origin: center; } .p-review { animation-delay: 3.85s !important; } .p-decision { animation-delay: 5.35s !important; } .p-escalation { animation-delay: 6.85s !important; } .p-learning { animation-delay: 8.35s !important; } /* Elongate the pulse through SVG transform so it feels like a light pulse. */ .ord-r-pulse { transform: scaleX(2.8) scaleY(.50); } /* SET outputs fire after the pulse reaches the rhythm card. */ .set-review { animation-name: ordV96SetReview !important; } .set-decision { animation-name: ordV96SetDecision !important; } .set-escalation { animation-name: ordV96SetEscalation !important; } .set-learning { animation-name: ordV96SetLearning !important; } /* Labels follow the staged story and fade with the whole scene. */ .ord-r-source-label { animation-name: ordV96SourceLabel !important; animation-delay: 0s !important; } .ord-r-rhythm-label { animation-name: ordV96RhythmLabel !important; animation-delay: 0s !important; } .ord-r-set-label { animation-name: ordV96SetHeader !important; animation-delay: 0s !important; } /* Override SVG motion timing to preserve the sequential row rhythm. The previous keyTimes are fine, but the CSS opacity now determines when each blue light is visible. */ @keyframes ordV96SourceHold { 0%, 5% { opacity: 0; transform: translateY(8px) scale(.96); } 12%, 82% { opacity: .94; transform: translateY(0) scale(1); } 90%, 100% { opacity: 0; transform: translateY(-5px) scale(.96); } } @keyframes ordV96RhythmHold { 0%, 20% { opacity: 0; transform: translateY(8px) scale(.96); } 30%, 82% { opacity: .96; transform: translateY(0) scale(1); } 90%, 100% { opacity: 0; transform: translateY(-5px) scale(.96); } } @keyframes ordV96WireDraw { 0%, 30% { opacity: 0; stroke-dashoffset: 285; } 38% { opacity: .58; stroke-dashoffset: 0; } 68% { opacity: .58; stroke-dashoffset: 0; } 78%, 100% { opacity: 0; stroke-dashoffset: 0; } } @keyframes ordV96BlueSignal { 0%, 32% { opacity: 0; } 40% { opacity: .98; } 54% { opacity: .98; } 60%, 100% { opacity: 0; } } @keyframes ordV96SetBase { 0%, 100% { opacity: 0; } } @keyframes ordV96SetReview { 0%, 34% { opacity: 0; transform: translateX(8px); } 42%, 82% { opacity: .98; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordV96SetDecision { 0%, 45% { opacity: 0; transform: translateX(8px); } 53%, 82% { opacity: .98; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordV96SetEscalation { 0%, 56% { opacity: 0; transform: translateX(8px); } 64%, 82% { opacity: .98; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordV96SetLearning { 0%, 67% { opacity: 0; transform: translateX(8px); } 75%, 82% { opacity: .98; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordV96SourceLabel { 0%, 6% { opacity: 0; } 12%, 82% { opacity: .78; } 90%, 100% { opacity: 0; } } @keyframes ordV96RhythmLabel { 0%, 24% { opacity: .12; } 34%, 82% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 90%, 100% { opacity: 0; } } @keyframes ordV96SetHeader { 0%, 38% { opacity: .08; } 48%, 82% { opacity: .74; } 90%, 100% { opacity: 0; } } /* Make the pulse feel more like a streak by adding a matching pseudo trail is not possible on SVG circles, so we use scale and glow above. Also shrink r visually through CSS where supported. */ .ord-r-pulse { r: 3; } @media(max-width:1180px) { .ord-r-source { left: 4.5% !important; width: 10.8rem !important; } .ord-r-rhythm { left: 54% !important; width: 11.5rem !important; } .ord-r-set { right: .8% !important; width: 11.5rem !important; font-size: .40rem !important; } } @media(max-width:768px) { .ord-r-circuits, .ord-r-set, .ord-r-set-label { display: none !important; } } /* METHOD V97: O.R.D. true rebuild - simple sequential circuit rows */ .artifact-visual-rhythm { overflow: hidden !important; } /* Kill all prior O.R.D. layers and experiments. Only ord-v2-* should render. */ .artifact-visual-rhythm .ord-cadence-system, .artifact-visual-rhythm .ord-step-map, .artifact-visual-rhythm .ord-scattered-remodel, .artifact-visual-rhythm .ord-rebuild-system, .artifact-visual-rhythm .ord-state, .artifact-visual-rhythm .ord-float-box, .artifact-visual-rhythm .ord-cadence-node, .artifact-visual-rhythm .ord-connection, .artifact-visual-rhythm .ord-lock, .artifact-visual-rhythm .ord-beat, .artifact-visual-rhythm .ord-r-label, .artifact-visual-rhythm .ord-r-card, .artifact-visual-rhythm .ord-r-circuits, .artifact-visual-rhythm .ord-r-set { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-rhythm .ord-v2-system, .artifact-visual-rhythm .ord-v2-system * { display: block; visibility: visible; } .ord-v2-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; } .ord-v2-heading { position: absolute; top: 8%; font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,235,227,.48); opacity: 0; z-index: 20; animation: ordV2HeadSource 12.8s ease-in-out infinite; } .ord-v2-heading.source { left: 4%; } .ord-v2-heading.rhythm { left: 57%; color: var(--red-hi); animation-name: ordV2HeadRhythm; } .ord-v2-heading.set { right: 6%; color: rgba(240,235,227,.44); animation-name: ordV2HeadSet; } .ord-v2-row { position: absolute; left: 0; right: 0; height: 2.25rem; z-index: 10; } .ord-v2-row.row-review { top: 25%; } .ord-v2-row.row-decision { top: 41%; } .ord-v2-row.row-escalation { top: 57%; } .ord-v2-row.row-learning { top: 73%; } .ord-v2-source, .ord-v2-rhythm { position: absolute; top: 0; height: 2.05rem; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; opacity: 0; transform: translateY(6px) scale(.97); animation-duration: 12.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ord-v2-source { left: 4%; width: 13.4rem; border: 1px solid rgba(255,255,255,.075); background: radial-gradient(ellipse 110% 160% at 12% 50%, rgba(200,64,26,.10), transparent 68%), rgba(7,5,3,.80); color: rgba(240,235,227,.70); box-shadow: 0 0 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018); animation-name: ordV2SourceShow; } .ord-v2-rhythm { left: 58%; width: 14rem; border: 1px solid rgba(224,85,48,.30); background: radial-gradient(ellipse 100% 160% at 12% 50%, rgba(200,64,26,.16), transparent 70%), rgba(7,5,3,.78); color: rgba(240,235,227,.78); box-shadow: 0 0 18px rgba(224,85,48,.12), inset 0 0 0 1px rgba(255,255,255,.024); animation-name: ordV2RhythmShow; } /* The line is a single row-local circuit, exactly between source and rhythm boxes. Dark red, thin, and solid. It draws before the blue pulse moves. */ .ord-v2-circuit { position: absolute; left: calc(4% + 13.4rem); right: calc(42% + 14rem); top: calc(1.025rem - .5px); height: 1px; background: linear-gradient(90deg, rgba(95,22,14,.14), rgba(126,29,16,.58), rgba(95,22,14,.18) ); box-shadow: 0 0 8px rgba(126,29,16,.16), 0 0 14px rgba(126,29,16,.06); transform-origin: left center; transform: scaleX(0); opacity: 0; animation: ordV2CircuitDraw 12.8s ease-in-out infinite; } .ord-v2-circuit::before, .ord-v2-circuit::after { content: ''; position: absolute; top: 50%; width: 1px; height: 8px; background: rgba(126,29,16,.34); transform: translateY(-50%); box-shadow: 0 0 6px rgba(126,29,16,.18); } .ord-v2-circuit::before { left: 0; } .ord-v2-circuit::after { right: 0; } /* Blue signal is a short light streak, not a ball. It travels once from source side to rhythm side. */ .ord-v2-circuit i { position: absolute; top: 50%; left: 0%; width: 1.45rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.98), rgba(88,205,210,.72), transparent ); box-shadow: 0 0 8px rgba(88,205,210,.58), 0 0 16px rgba(88,205,210,.24); transform: translate(-50%, -50%); opacity: 0; animation: ordV2BluePulse 12.8s ease-in-out infinite; } /* SET output appears at the end of the line event. */ .ord-v2-set { position: absolute; right: 1.5%; top: 0; width: 14.5rem; height: 2.05rem; display: flex !important; align-items: center; color: rgba(240,235,227,.92); font-size: .46rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 18; text-shadow: 0 0 10px rgba(255,255,255,.08), 0 0 14px rgba(88,205,210,.08); animation-duration: 12.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: ordV2SetShow; } /* Row sequencing. These delays make the line, pulse, and SET happen top to bottom. Source and rhythm cards stay stable while each row is processed. */ .row-review .ord-v2-circuit, .row-review .ord-v2-circuit i, .row-review .ord-v2-set { animation-delay: 3.0s; } .row-decision .ord-v2-circuit, .row-decision .ord-v2-circuit i, .row-decision .ord-v2-set { animation-delay: 4.45s; } .row-escalation .ord-v2-circuit, .row-escalation .ord-v2-circuit i, .row-escalation .ord-v2-set { animation-delay: 5.90s; } .row-learning .ord-v2-circuit, .row-learning .ord-v2-circuit i, .row-learning .ord-v2-set { animation-delay: 7.35s; } /* Source cards appear first as a completed left stack. Rhythm cards appear second. All fade together after last SET is visible. */ @keyframes ordV2SourceShow { 0%, 4% { opacity: 0; transform: translateY(6px) scale(.97); } 12%, 82% { opacity: .94; transform: translateY(0) scale(1); } 91%, 100% { opacity: 0; transform: translateY(-5px) scale(.97); } } @keyframes ordV2RhythmShow { 0%, 20% { opacity: 0; transform: translateY(6px) scale(.97); } 30%, 82% { opacity: .96; transform: translateY(0) scale(1); } 91%, 100% { opacity: 0; transform: translateY(-5px) scale(.97); } } /* Because each row has its own animation-delay, this keyframe is the same for all rows. The line appears, then holds while pulse travels and SET appears. */ @keyframes ordV2CircuitDraw { 0%, 18% { opacity: 0; transform: scaleX(0); } 30% { opacity: .72; transform: scaleX(1); } 58% { opacity: .72; transform: scaleX(1); } 70%, 100% { opacity: 0; transform: scaleX(1); } } @keyframes ordV2BluePulse { 0%, 28% { opacity: 0; left: 0%; } 36% { opacity: 1; left: 8%; } 50% { opacity: 1; left: 92%; } 58%, 100% { opacity: 0; left: 100%; } } @keyframes ordV2SetShow { 0%, 48% { opacity: 0; transform: translateX(8px); } 56%, 62% { opacity: .98; transform: translateX(0); } 82% { opacity: .98; transform: translateX(0); } 91%, 100% { opacity: 0; transform: translateX(-5px); } } @keyframes ordV2HeadSource { 0%, 6% { opacity: 0; } 12%, 82% { opacity: .78; } 91%, 100% { opacity: 0; } } @keyframes ordV2HeadRhythm { 0%, 22% { opacity: .10; } 32%, 82% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 91%, 100% { opacity: 0; } } @keyframes ordV2HeadSet { 0%, 38% { opacity: .06; } 52%, 82% { opacity: .74; } 91%, 100% { opacity: 0; } } @media(max-width:1180px) { .ord-v2-source { left: 3%; width: 10.5rem; } .ord-v2-rhythm { left: 54%; width: 11.3rem; } .ord-v2-circuit { left: calc(3% + 10.5rem); right: calc(46% + 11.3rem); } .ord-v2-set { width: 11rem; right: .5%; font-size: .40rem; } } @media(max-width:768px) { .ord-v2-circuit, .ord-v2-set, .ord-v2-heading.set { display: none !important; } .ord-v2-source { left: 5%; width: 7rem; font-size: .36rem; } .ord-v2-rhythm { left: 50%; width: 8rem; font-size: .36rem; } .ord-v2-heading { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .ord-v2-system * { animation: none !important; } } /* METHOD V98: O.R.D. simplified cadence lock */ .artifact-visual-rhythm { overflow: hidden !important; } /* Hard reset every prior O.R.D. attempt. Only ord-simple-* should render. */ .artifact-visual-rhythm .ord-cadence-system, .artifact-visual-rhythm .ord-step-map, .artifact-visual-rhythm .ord-scattered-remodel, .artifact-visual-rhythm .ord-rebuild-system, .artifact-visual-rhythm .ord-v2-system, .artifact-visual-rhythm .ord-state, .artifact-visual-rhythm .ord-float-box, .artifact-visual-rhythm .ord-cadence-node, .artifact-visual-rhythm .ord-connection, .artifact-visual-rhythm .ord-lock, .artifact-visual-rhythm .ord-beat, .artifact-visual-rhythm .ord-r-label, .artifact-visual-rhythm .ord-r-card, .artifact-visual-rhythm .ord-r-circuits, .artifact-visual-rhythm .ord-r-set, .artifact-visual-rhythm .ord-v2-heading, .artifact-visual-rhythm .ord-v2-row, .artifact-visual-rhythm .ord-v2-source, .artifact-visual-rhythm .ord-v2-rhythm, .artifact-visual-rhythm .ord-v2-circuit, .artifact-visual-rhythm .ord-v2-set { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-rhythm .ord-simple-system, .artifact-visual-rhythm .ord-simple-system * { display: block; visibility: visible; } .ord-simple-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; } .ord-simple-heading { position: absolute; top: 8%; font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,235,227,.46); opacity: 0; z-index: 10; animation: ordSimpleHeading 10.5s ease-in-out infinite; } .ord-simple-heading.h-source { left: 4%; } .ord-simple-heading.h-rhythm { left: 47.5%; color: var(--red-hi); animation-name: ordSimpleRhythmHeading; } .ord-simple-heading.h-set { right: 6%; color: rgba(240,235,227,.46); animation-name: ordSimpleSetHeading; } .ord-simple-row { position: absolute; left: 0; right: 0; height: 2.1rem; z-index: 6; } .ord-simple-row.row-review { top: 25%; } .ord-simple-row.row-decision { top: 41%; } .ord-simple-row.row-escalation { top: 57%; } .ord-simple-row.row-learning { top: 73%; } .ord-simple-source, .ord-simple-rhythm, .ord-simple-set { position: absolute; top: 0; height: 2.05rem; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; font-size: .48rem; letter-spacing: .15em; text-transform: uppercase; opacity: 0; transform: translateY(6px); animation-duration: 10.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .ord-simple-source { left: 4%; width: 12.8rem; border: 1px solid rgba(255,255,255,.075); background: radial-gradient(ellipse 110% 160% at 12% 50%, rgba(200,64,26,.10), transparent 68%), rgba(7,5,3,.80); color: rgba(240,235,227,.70); box-shadow: 0 0 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018); animation-name: ordSimpleSource; } .ord-simple-rhythm { left: 47%; width: 14.2rem; border: 1px solid rgba(224,85,48,.30); background: radial-gradient(ellipse 100% 160% at 12% 50%, rgba(200,64,26,.16), transparent 70%), rgba(7,5,3,.78); color: rgba(240,235,227,.78); box-shadow: 0 0 18px rgba(224,85,48,.12), inset 0 0 0 1px rgba(255,255,255,.024); animation-name: ordSimpleRhythm; } .ord-simple-set { right: 1.5%; width: 14.5rem; justify-content: flex-start; color: rgba(240,235,227,.88); text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); animation-name: ordSimpleSet; } /* Quiet red circuit lines. No pulses, no dots, no travel timing. They simply connect the three columns after the rhythm column appears. */ .ord-simple-line { position: absolute; top: calc(1.025rem - .5px); height: 1px; background: linear-gradient(90deg, rgba(80,18,12,.10), rgba(130,30,18,.50), rgba(80,18,12,.12) ); box-shadow: 0 0 8px rgba(130,30,18,.12); opacity: 0; transform: scaleX(0); transform-origin: left center; animation: ordSimpleLine 10.5s ease-in-out infinite; } .ord-simple-line.l1 { left: calc(4% + 12.8rem); width: calc(47% - 4% - 12.8rem); } .ord-simple-line.l2 { left: calc(47% + 14.2rem); width: calc(98.5% - 47% - 14.2rem - 14.5rem); } .ord-simple-line::before, .ord-simple-line::after { content: ''; position: absolute; top: 50%; width: 1px; height: 7px; background: rgba(130,30,18,.28); transform: translateY(-50%); box-shadow: 0 0 6px rgba(130,30,18,.14); } .ord-simple-line::before { left: 0; } .ord-simple-line::after { right: 0; } /* Gentle row staggering only, not sequential pulse mechanics. This gives the diagram a small organic cadence without messing up the meaning. */ .row-review .ord-simple-source, .row-review .ord-simple-rhythm, .row-review .ord-simple-set, .row-review .ord-simple-line { animation-delay: 0s; } .row-decision .ord-simple-source, .row-decision .ord-simple-rhythm, .row-decision .ord-simple-set, .row-decision .ord-simple-line { animation-delay: .16s; } .row-escalation .ord-simple-source, .row-escalation .ord-simple-rhythm, .row-escalation .ord-simple-set, .row-escalation .ord-simple-line { animation-delay: .32s; } .row-learning .ord-simple-source, .row-learning .ord-simple-rhythm, .row-learning .ord-simple-set, .row-learning .ord-simple-line { animation-delay: .48s; } @keyframes ordSimpleSource { 0%, 6% { opacity: 0; transform: translateY(6px); } 14%, 80% { opacity: .94; transform: translateY(0); } 90%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes ordSimpleRhythm { 0%, 24% { opacity: 0; transform: translateY(6px); } 34%, 80% { opacity: .96; transform: translateY(0); } 90%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes ordSimpleLine { 0%, 34% { opacity: 0; transform: scaleX(0); } 46%, 80% { opacity: .76; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } } @keyframes ordSimpleSet { 0%, 46% { opacity: 0; transform: translateX(8px); } 56%, 80% { opacity: .98; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ordSimpleHeading { 0%, 8% { opacity: 0; } 16%, 80% { opacity: .78; } 90%, 100% { opacity: 0; } } @keyframes ordSimpleRhythmHeading { 0%, 26% { opacity: .12; } 36%, 80% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 90%, 100% { opacity: 0; } } @keyframes ordSimpleSetHeading { 0%, 46% { opacity: .08; } 56%, 80% { opacity: .70; } 90%, 100% { opacity: 0; } } @media(max-width:1180px) { .ord-simple-source { left: 3%; width: 10.5rem; } .ord-simple-rhythm { left: 45%; width: 11.8rem; } .ord-simple-set { right: .5%; width: 11.2rem; font-size: .40rem; } .ord-simple-line.l1 { left: calc(3% + 10.5rem); width: calc(45% - 3% - 10.5rem); } .ord-simple-line.l2 { left: calc(45% + 11.8rem); width: calc(99.5% - 45% - 11.8rem - 11.2rem); } } @media(max-width:768px) { .ord-simple-line, .ord-simple-set, .ord-simple-heading.h-set { display: none !important; } .ord-simple-source { width: 7rem; font-size: .36rem; } .ord-simple-rhythm { left: 50%; width: 8rem; font-size: .36rem; } .ord-simple-heading { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .ord-simple-system * { animation: none !important; } } /* METHOD V99: M.a.S.F. full rebuild - noise becomes signal, signal becomes trigger */ .artifact-visual-signals { overflow: hidden !important; } /* Hide all prior M.a.S.F. attempts so only the clean bold rebuild renders. */ .artifact-visual-signals .masf-signal-system, .artifact-visual-signals .masf-label, .artifact-visual-signals .masf-gridline, .artifact-visual-signals .masf-threshold-line, .artifact-visual-signals .masf-baseline, .artifact-visual-signals .masf-noise-dot, .artifact-visual-signals .masf-signal-line, .artifact-visual-signals .masf-signal-pulse, .artifact-visual-signals .masf-trigger-box, .artifact-visual-signals .masf-trigger-reticle, .artifact-visual-signals .masf-result { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-signals .masf-bold-system, .artifact-visual-signals .masf-bold-system * { display: block; visibility: visible; } .masf-bold-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; } .masf-bold-label { position: absolute; top: 8%; font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,235,227,.46); opacity: 0; z-index: 20; animation: masfBoldLabelNoise 9.8s ease-in-out infinite; } .masf-bold-label.noise { left: 5%; } .masf-bold-label.signal { left: 43%; color: rgba(88,205,210,.60); animation-name: masfBoldLabelSignal; } .masf-bold-label.trigger { right: 5%; color: var(--red-hi); animation-name: masfBoldLabelTrigger; } /* Left field: noisy metric points. These flicker just enough to read as data/noise, then dim as the signal is isolated. */ .masf-noise-field { position: absolute; left: 6%; top: 24%; width: 28%; height: 54%; z-index: 4; opacity: 1; } .masf-noise-field i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(240,235,227,.24); box-shadow: 0 0 10px rgba(240,235,227,.08); opacity: 0; animation: masfNoiseFlicker 9.8s ease-in-out infinite; } .masf-noise-field .n1 { left: 4%; top: 24%; animation-delay: 0s; } .masf-noise-field .n2 { left: 18%; top: 56%; animation-delay: .12s; } .masf-noise-field .n3 { left: 29%; top: 38%; animation-delay: .24s; } .masf-noise-field .n4 { left: 40%; top: 68%; animation-delay: .36s; } .masf-noise-field .n5 { left: 52%; top: 30%; animation-delay: .48s; } .masf-noise-field .n6 { left: 64%; top: 50%; animation-delay: .60s; } .masf-noise-field .n7 { left: 72%; top: 21%; animation-delay: .72s; } .masf-noise-field .n8 { left: 83%; top: 62%; animation-delay: .84s; } .masf-noise-field .n9 { left: 10%; top: 78%; animation-delay: .96s; } .masf-noise-field .n10 { left: 35%; top: 18%; animation-delay: 1.08s; } .masf-noise-field .n11 { left: 58%; top: 76%; animation-delay: 1.20s; } .masf-noise-field .n12 { left: 90%; top: 40%; animation-delay: 1.32s; } /* Big scanning field: a soft vertical listening/analysis pass that makes the signal feel found rather than merely displayed. */ .masf-scan-field { position: absolute; top: 20%; bottom: 13%; left: 8%; width: 1px; background: linear-gradient(180deg, transparent, rgba(88,205,210,.16), rgba(224,85,48,.42), rgba(88,205,210,.16), transparent); box-shadow: 0 0 18px rgba(224,85,48,.14), 0 0 26px rgba(88,205,210,.08); opacity: 0; z-index: 7; animation: masfScanSweep 9.8s ease-in-out infinite; } /* The isolated signal. This is the main hero of the visual: quiet, clear, horizontal, and much bolder than the noise. */ .masf-signal-rail { position: absolute; left: 25%; right: 20%; top: 52%; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.22), rgba(224,85,48,.46), rgba(88,205,210,.20), transparent); box-shadow: 0 0 12px rgba(224,85,48,.12), 0 0 16px rgba(88,205,210,.07); transform-origin: left center; transform: scaleX(.08); opacity: 0; z-index: 9; animation: masfSignalRail 9.8s ease-in-out infinite; } .masf-signal-core { position: absolute; left: 47%; top: calc(52% - 5px); width: 10px; height: 10px; border-radius: 50%; background: rgba(88,205,210,.90); box-shadow: 0 0 12px rgba(88,205,210,.40), 0 0 26px rgba(88,205,210,.16), 0 0 36px rgba(224,85,48,.08); opacity: 0; z-index: 11; animation: masfSignalCore 9.8s ease-in-out infinite; } /* Threshold/trigger area. The threshold is subtle; the trigger panel is the resolution. */ .masf-threshold { position: absolute; right: 20%; top: 31%; bottom: 25%; width: 1px; background: linear-gradient(180deg, transparent, rgba(224,85,48,.42), rgba(224,85,48,.22), transparent); box-shadow: 0 0 14px rgba(224,85,48,.13); opacity: 0; z-index: 10; animation: masfThresholdSet 9.8s ease-in-out infinite; } .masf-trigger-panel { position: absolute; right: 6%; top: calc(52% - 1.15rem); width: 13rem; height: 2.3rem; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(224,85,48,.36); background: radial-gradient(ellipse 100% 180% at 12% 50%, rgba(200,64,26,.15), transparent 70%), rgba(7,5,3,.78); color: rgba(240,235,227,.78); font-size: .50rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 13; box-shadow: 0 0 18px rgba(224,85,48,.12), inset 0 0 0 1px rgba(255,255,255,.020); animation: masfTriggerPanel 9.8s ease-in-out infinite; } .masf-result-panel { position: absolute; right: 6%; top: 67%; width: 13rem; color: rgba(240,235,227,.82); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(6px); z-index: 14; text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); animation: masfResultPanel 9.8s ease-in-out infinite; } @keyframes masfNoiseFlicker { 0%, 8% { opacity: 0; transform: scale(.75); } 16%, 32% { opacity: .72; transform: scale(1); } 48% { opacity: .38; transform: scale(.86); } 62%, 100% { opacity: 0; transform: scale(.58); } } @keyframes masfScanSweep { 0%, 18% { opacity: 0; left: 8%; } 30% { opacity: .72; left: 31%; } 44% { opacity: .86; left: 49%; } 58% { opacity: .42; left: 74%; } 70%, 100% { opacity: 0; left: 78%; } } @keyframes masfSignalRail { 0%, 32% { opacity: 0; transform: scaleX(.08); } 46% { opacity: .84; transform: scaleX(.72); } 60%, 82% { opacity: .92; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes masfSignalCore { 0%, 36% { opacity: 0; transform: scale(.70); } 48% { opacity: 1; transform: scale(1.18); } 62%, 80% { opacity: .86; transform: scale(.92); } 92%, 100% { opacity: 0; transform: scale(.60); } } @keyframes masfThresholdSet { 0%, 48% { opacity: 0; transform: scaleY(.20); } 60%, 82% { opacity: .72; transform: scaleY(1); } 92%, 100% { opacity: 0; transform: scaleY(.30); } } @keyframes masfTriggerPanel { 0%, 54% { opacity: 0; transform: translateX(8px); } 66%, 82% { opacity: .98; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes masfResultPanel { 0%, 64% { opacity: 0; transform: translateY(6px); } 74%, 82% { opacity: .88; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes masfBoldLabelNoise { 0%, 8% { opacity: 0; } 16%, 42% { opacity: .78; } 62%, 100% { opacity: .12; } } @keyframes masfBoldLabelSignal { 0%, 34% { opacity: .10; } 48%, 82% { opacity: .90; text-shadow: 0 0 14px rgba(88,205,210,.20); } 92%, 100% { opacity: 0; } } @keyframes masfBoldLabelTrigger { 0%, 56% { opacity: .10; } 68%, 82% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 92%, 100% { opacity: 0; } } @media(max-width:1180px) { .masf-trigger-panel, .masf-result-panel { right: 4%; width: 11.5rem; font-size: .42rem; } .masf-signal-rail { right: 18%; } } @media(max-width:768px) { .masf-trigger-panel, .masf-result-panel, .masf-threshold { display: none !important; } .masf-noise-field { left: 5%; width: 38%; } .masf-signal-rail { left: 24%; right: 8%; } .masf-bold-label { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .masf-bold-system * { animation: none !important; } } /* METHOD V101: I.B. full rebuild - backlog becomes clear next move */ .artifact-visual-backlog { overflow: hidden !important; } /* Hide earlier I.B. versions so only the bold rebuild renders. */ .artifact-visual-backlog .ib-priority-system, .artifact-visual-backlog .ib-label, .artifact-visual-backlog .ib-card, .artifact-visual-backlog .ib-scan, .artifact-visual-backlog .ib-lane:not(.ib-now):not(.ib-next):not(.ib-later), .artifact-visual-backlog .ib-priority-card, .artifact-visual-backlog .ib-owner-line, .artifact-visual-backlog .ib-owner-dot, .artifact-visual-backlog .ib-result { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-backlog .ib-bold-system, .artifact-visual-backlog .ib-bold-system * { display: block; visibility: visible; } .ib-bold-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; } .ib-bold-label { position: absolute; top: 8%; font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,235,227,.46); opacity: 0; z-index: 20; animation: ibBoldBacklogLabel 10s ease-in-out infinite; } .ib-bold-label.backlog { left: 5%; } .ib-bold-label.sort { left: 45%; color: rgba(88,205,210,.58); animation-name: ibBoldSortLabel; } .ib-bold-label.locked { right: 5%; color: var(--red-hi); animation-name: ibBoldLockedLabel; } /* Left side: messy, obscured backlog cards. They start slightly overlapping, then dim as the sort gate takes over. */ .ib-stack-card { position: absolute; left: 8%; width: 12.2rem; height: 2.05rem; display: flex !important; align-items: center; padding-left: .85rem; box-sizing: border-box; border: 1px solid rgba(255,255,255,.065); background: radial-gradient(ellipse 120% 170% at 12% 50%, rgba(200,64,26,.10), transparent 70%), rgba(7,5,3,.78); color: rgba(240,235,227,.56); font-size: .46rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; filter: blur(.2px); box-shadow: 0 0 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.016); z-index: 8; animation: ibStackCardCycle 10s ease-in-out infinite; } .ib-stack-card.b1 { top: 30%; transform: rotate(-2deg); animation-delay: 0s; } .ib-stack-card.b2 { top: 40%; left: 13%; transform: rotate(1.4deg); animation-delay: .12s; } .ib-stack-card.b3 { top: 50%; left: 10%; transform: rotate(-.8deg); animation-delay: .24s; border-color: rgba(224,85,48,.18); color: rgba(240,235,227,.66); } .ib-stack-card.b4 { top: 60%; left: 15%; transform: rotate(1.8deg); animation-delay: .36s; } .ib-stack-card.b5 { top: 70%; left: 9%; transform: rotate(-1.4deg); animation-delay: .48s; } /* Center: the sorting gate. It is bold but simple, like a prioritization field. */ .ib-sort-gate { position: absolute; left: 43%; top: 22%; bottom: 16%; width: 1px; background: linear-gradient(180deg, transparent, rgba(88,205,210,.18), rgba(224,85,48,.55), rgba(88,205,210,.18), transparent); box-shadow: 0 0 20px rgba(224,85,48,.16), 0 0 28px rgba(88,205,210,.08); opacity: 0; z-index: 11; animation: ibSortGateCycle 10s ease-in-out infinite; } /* Right side: three priority lanes. NOW is strongest. NEXT and LATER are intentionally quieter. */ .ib-lane { position: absolute; left: 55%; right: 7%; height: 2.5rem; border: 1px solid rgba(255,255,255,.050); background: radial-gradient(ellipse 100% 180% at 12% 50%, rgba(200,64,26,.08), transparent 70%), rgba(7,5,3,.58); box-shadow: 0 0 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.014); opacity: 0; transform: translateX(10px); z-index: 9; animation: ibLaneCycle 10s ease-in-out infinite; } .ib-lane b { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: rgba(224,85,48,.88); font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; } .ib-lane i { position: absolute; left: 6.4rem; top: 50%; transform: translateY(-50%); color: rgba(240,235,227,.70); font-size: .48rem; letter-spacing: .14em; text-transform: uppercase; font-style: normal; } .ib-lane.ib-now { top: 34%; border-color: rgba(224,85,48,.26); animation-name: ibNowLaneCycle; } .ib-lane.ib-next { top: 52%; opacity: 0; animation-delay: .18s; } .ib-lane.ib-later { top: 70%; opacity: 0; animation-delay: .36s; } /* Final lock line and node: the selected NOW move is locked. */ .ib-lock-line { position: absolute; left: 55%; right: 19%; top: calc(34% + 1.25rem); height: 1px; background: linear-gradient(90deg, rgba(224,85,48,.48), rgba(88,205,210,.18), transparent); box-shadow: 0 0 10px rgba(224,85,48,.14); opacity: 0; transform: scaleX(.10); transform-origin: left center; z-index: 12; animation: ibLockLineCycle 10s ease-in-out infinite; } .ib-lock-node { position: absolute; right: 19%; top: calc(34% + 1.25rem); width: 9px; height: 9px; border-radius: 50%; background: rgba(224,85,48,.84); box-shadow: 0 0 14px rgba(224,85,48,.32), 0 0 24px rgba(88,205,210,.08); opacity: 0; transform: translate(50%, -50%) scale(.70); z-index: 14; animation: ibLockNodeCycle 10s ease-in-out infinite; } .ib-result-panel { position: absolute; right: 6%; top: calc(34% + .13rem); width: 13rem; color: rgba(240,235,227,.82); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 15; text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); animation: ibResultPanelCycle 10s ease-in-out infinite; } @keyframes ibStackCardCycle { 0%, 8% { opacity: 0; filter: blur(.8px); } 16%, 38% { opacity: .82; filter: blur(.2px); } 50% { opacity: .42; filter: blur(.7px); } 66%, 100% { opacity: 0; filter: blur(1.3px); } } @keyframes ibSortGateCycle { 0%, 28% { opacity: 0; transform: scaleY(.18); } 40% { opacity: .80; transform: scaleY(1); } 58%, 74% { opacity: .56; transform: scaleY(1); } 88%, 100% { opacity: 0; transform: scaleY(.20); } } @keyframes ibLaneCycle { 0%, 42% { opacity: 0; transform: translateX(10px); } 56%, 78% { opacity: .72; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibNowLaneCycle { 0%, 40% { opacity: 0; transform: translateX(10px); box-shadow: 0 0 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.014); } 54%, 78% { opacity: .98; transform: translateX(0); box-shadow: 0 0 20px rgba(224,85,48,.16), inset 0 0 0 1px rgba(224,85,48,.06); } 90%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibLockLineCycle { 0%, 58% { opacity: 0; transform: scaleX(.10); } 68%, 78% { opacity: .70; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ibLockNodeCycle { 0%, 64% { opacity: 0; transform: translate(50%, -50%) scale(.70); } 72% { opacity: .94; transform: translate(50%, -50%) scale(1.08); } 80% { opacity: .62; transform: translate(50%, -50%) scale(.92); } 90%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.65); } } @keyframes ibResultPanelCycle { 0%, 66% { opacity: 0; transform: translateX(8px); } 76%, 80% { opacity: .88; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibBoldBacklogLabel { 0%, 8% { opacity: 0; } 16%, 42% { opacity: .78; } 62%, 100% { opacity: .12; } } @keyframes ibBoldSortLabel { 0%, 30% { opacity: .10; } 42%, 72% { opacity: .86; text-shadow: 0 0 14px rgba(88,205,210,.18); } 88%, 100% { opacity: 0; } } @keyframes ibBoldLockedLabel { 0%, 58% { opacity: .10; } 70%, 82% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 92%, 100% { opacity: 0; } } @media(max-width:1180px) { .ib-stack-card { width: 10.2rem; } .ib-lane { left: 51%; right: 4%; } .ib-lane i { left: 5.4rem; } .ib-result-panel { right: 3%; width: 11rem; font-size: .40rem; } } @media(max-width:768px) { .ib-sort-gate, .ib-lock-line, .ib-lock-node, .ib-result-panel { display: none !important; } .ib-stack-card { left: 5%; width: 8rem; font-size: .38rem; } .ib-lane { left: 45%; right: 4%; } .ib-lane b, .ib-lane i { font-size: .36rem; } .ib-lane i { left: 3.8rem; } .ib-bold-label { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .ib-bold-system * { animation: none !important; } } /* METHOD V102: I.B. slow the priority lane fade so expanded text can be read */ /* The NOW / NEXT / LATER lane reveal works, but it faded too quickly. Hold the lane cards and their expanded text longer before the final scene fade. */ .ib-bold-system .ib-lane { animation-name: ibLaneCycleSlowerReadV102 !important; } .ib-bold-system .ib-lane.ib-now { animation-name: ibNowLaneCycleSlowerReadV102 !important; } /* Keep the lock/result timing compatible with the longer lane visibility. */ .ib-bold-system .ib-lock-line { animation-name: ibLockLineCycleSlowerReadV102 !important; } .ib-bold-system .ib-lock-node { animation-name: ibLockNodeCycleSlowerReadV102 !important; } .ib-bold-system .ib-result-panel { animation-name: ibResultPanelCycleSlowerReadV102 !important; } @keyframes ibLaneCycleSlowerReadV102 { 0%, 40% { opacity: 0; transform: translateX(10px); } 54% { opacity: .72; transform: translateX(0); } 82% { opacity: .72; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibNowLaneCycleSlowerReadV102 { 0%, 38% { opacity: 0; transform: translateX(10px); box-shadow: 0 0 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.014); } 52% { opacity: .98; transform: translateX(0); box-shadow: 0 0 20px rgba(224,85,48,.16), inset 0 0 0 1px rgba(224,85,48,.06); } 82% { opacity: .98; transform: translateX(0); box-shadow: 0 0 20px rgba(224,85,48,.16), inset 0 0 0 1px rgba(224,85,48,.06); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibLockLineCycleSlowerReadV102 { 0%, 56% { opacity: 0; transform: scaleX(.10); } 66% { opacity: .70; transform: scaleX(1); } 84% { opacity: .70; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ibLockNodeCycleSlowerReadV102 { 0%, 62% { opacity: 0; transform: translate(50%, -50%) scale(.70); } 70% { opacity: .94; transform: translate(50%, -50%) scale(1.08); } 84% { opacity: .68; transform: translate(50%, -50%) scale(.94); } 92%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.65); } } @keyframes ibResultPanelCycleSlowerReadV102 { 0%, 64% { opacity: 0; transform: translateX(8px); } 74% { opacity: .88; transform: translateX(0); } 84% { opacity: .88; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } /* METHOD V103: I.B. smoother faster text expansion and delayed final lock message */ /* Make the expanded text in NOW / NEXT / LATER open a little faster and smoother. Then delay "NEXT IMPROVEMENT LOCKED" until the lane text has fully expanded and sat briefly. */ .ib-bold-system .ib-lane { overflow: hidden !important; } .ib-bold-system .ib-lane i { display: block !important; white-space: nowrap !important; transform-origin: left center !important; animation: ibLaneTextExpandV103 10s cubic-bezier(.22,1,.36,1) infinite !important; } .ib-bold-system .ib-lane.ib-now i { animation-name: ibNowLaneTextExpandV103 !important; } /* Keep the lane containers readable while the text expands and holds. */ .ib-bold-system .ib-lane { animation-name: ibLaneCycleTextHoldV103 !important; } .ib-bold-system .ib-lane.ib-now { animation-name: ibNowLaneCycleTextHoldV103 !important; } /* Delay the lock confirmation until the text has opened and had a beat. */ .ib-bold-system .ib-lock-line { animation-name: ibLockLineAfterTextV103 !important; } .ib-bold-system .ib-lock-node { animation-name: ibLockNodeAfterTextV103 !important; } .ib-bold-system .ib-result-panel { animation-name: ibResultAfterTextV103 !important; } @keyframes ibLaneTextExpandV103 { 0%, 48% { opacity: 0; letter-spacing: .22em; transform: translateY(-50%) scaleX(.72); filter: blur(.5px); } 58% { opacity: .78; letter-spacing: .16em; transform: translateY(-50%) scaleX(1); filter: blur(0); } 84% { opacity: .78; letter-spacing: .14em; transform: translateY(-50%) scaleX(1); filter: blur(0); } 92%, 100% { opacity: 0; letter-spacing: .16em; transform: translateY(-50%) scaleX(.96); filter: blur(.4px); } } @keyframes ibNowLaneTextExpandV103 { 0%, 46% { opacity: 0; letter-spacing: .24em; transform: translateY(-50%) scaleX(.68); filter: blur(.5px); } 56% { opacity: .92; letter-spacing: .16em; transform: translateY(-50%) scaleX(1); filter: blur(0); } 84% { opacity: .92; letter-spacing: .14em; transform: translateY(-50%) scaleX(1); filter: blur(0); } 92%, 100% { opacity: 0; letter-spacing: .16em; transform: translateY(-50%) scaleX(.96); filter: blur(.4px); } } @keyframes ibLaneCycleTextHoldV103 { 0%, 40% { opacity: 0; transform: translateX(10px); } 52% { opacity: .72; transform: translateX(0); } 84% { opacity: .72; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibNowLaneCycleTextHoldV103 { 0%, 38% { opacity: 0; transform: translateX(10px); box-shadow: 0 0 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.014); } 50% { opacity: .98; transform: translateX(0); box-shadow: 0 0 20px rgba(224,85,48,.16), inset 0 0 0 1px rgba(224,85,48,.06); } 84% { opacity: .98; transform: translateX(0); box-shadow: 0 0 20px rgba(224,85,48,.16), inset 0 0 0 1px rgba(224,85,48,.06); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes ibLockLineAfterTextV103 { 0%, 70% { opacity: 0; transform: scaleX(.10); } 78% { opacity: .70; transform: scaleX(1); } 86% { opacity: .70; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes ibLockNodeAfterTextV103 { 0%, 74% { opacity: 0; transform: translate(50%, -50%) scale(.70); } 80% { opacity: .94; transform: translate(50%, -50%) scale(1.08); } 86% { opacity: .70; transform: translate(50%, -50%) scale(.94); } 92%, 100% { opacity: 0; transform: translate(50%, -50%) scale(.65); } } @keyframes ibResultAfterTextV103 { 0%, 76% { opacity: 0; transform: translateX(8px); } 82% { opacity: .90; transform: translateX(0); } 87% { opacity: .90; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-4px); } } /* METHOD V104: W.I.M. full rebuild - demand enters triage and becomes intake decision */ .artifact-visual-intake { overflow: hidden !important; } /* Hide previous W.I.M. visual layers so this rebuild owns the scene. */ .artifact-visual-intake .intake-system, .artifact-visual-intake .intake-*, .artifact-visual-intake .wim-system, .artifact-visual-intake .work-intake-system { display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; } .artifact-visual-intake .wim-bold-system, .artifact-visual-intake .wim-bold-system * { display: block; visibility: visible; } .wim-bold-system { position: absolute; inset: 8% 5% 10% 5%; pointer-events: none; isolation: isolate; } .wim-label { position: absolute; top: 8%; color: rgba(240,235,227,.46); font-size: .50rem; letter-spacing: .18em; text-transform: uppercase; opacity: 0; z-index: 20; animation: wimLabelDemand 9.8s ease-in-out infinite; } .wim-label.demand { left: 5%; } .wim-label.gate { left: 43%; color: rgba(88,205,210,.58); animation-name: wimLabelGate; } .wim-label.outcome { right: 5%; color: var(--red-hi); animation-name: wimLabelOutcome; } /* Multiple incoming requests from the left. They stay abstract, small, and varied. */ .wim-request { position: absolute; left: 7%; width: 8px; height: 8px; border-radius: 50%; background: rgba(224,85,48,.84); box-shadow: 0 0 12px rgba(224,85,48,.32), 0 0 22px rgba(224,85,48,.10); opacity: 0; z-index: 10; animation: wimRequestMove 9.8s cubic-bezier(.22,1,.36,1) infinite; } .wim-request.r1 { top: 29%; animation-delay: 0s; } .wim-request.r2 { top: 42%; animation-delay: .25s; transform: scale(.82); } .wim-request.r3 { top: 55%; animation-delay: .50s; transform: scale(1.12); } .wim-request.r4 { top: 68%; animation-delay: .75s; transform: scale(.90); } .wim-request.r5 { top: 35%; animation-delay: 1s; transform: scale(.72); } /* Soft traces from demand into gate. These form after the request field appears. */ .wim-trace { position: absolute; left: 12%; width: 28%; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.42), rgba(88,205,210,.12), transparent); opacity: 0; transform-origin: left center; z-index: 6; animation: wimTraceForm 9.8s ease-in-out infinite; } .wim-trace.t1 { top: 32%; transform: rotate(10deg) scaleX(.12); animation-delay: .15s; } .wim-trace.t2 { top: 43%; transform: rotate(4deg) scaleX(.12); animation-delay: .30s; } .wim-trace.t3 { top: 54%; transform: rotate(0deg) scaleX(.12); animation-delay: .45s; } .wim-trace.t4 { top: 65%; transform: rotate(-8deg) scaleX(.12); animation-delay: .60s; } .wim-trace.t5 { top: 36%; transform: rotate(13deg) scaleX(.12); animation-delay: .75s; } /* Central gate. This is the artifact: a work intake model creates a judgment point before demand becomes absorbed by teams. */ .wim-gate { position: absolute; left: calc(50% - 6.5rem); top: calc(52% - 2.2rem); width: 13rem; height: 4.4rem; display: flex !important; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(88,205,210,.24); background: radial-gradient(ellipse 100% 140% at 50% 50%, rgba(88,205,210,.08), transparent 72%), radial-gradient(ellipse 120% 160% at 16% 50%, rgba(200,64,26,.12), transparent 70%), rgba(7,5,3,.78); box-shadow: 0 0 24px rgba(88,205,210,.08), 0 0 18px rgba(224,85,48,.10), inset 0 0 0 1px rgba(255,255,255,.020); opacity: 0; transform: scale(.94); z-index: 14; animation: wimGateCycle 9.8s ease-in-out infinite; } .wim-gate b { display: block; color: rgba(240,235,227,.82); font-size: .58rem; letter-spacing: .20em; text-transform: uppercase; font-weight: 400; } .wim-gate i { display: block; margin-top: .55rem; color: rgba(240,235,227,.46); font-size: .42rem; letter-spacing: .16em; text-transform: uppercase; font-style: normal; } /* Output routing lines. Accept is strongest, defer/reject are quieter. */ .wim-out-line { position: absolute; left: calc(50% + 6.5rem); width: 18%; height: 1px; opacity: 0; transform-origin: left center; z-index: 9; animation: wimOutLineCycle 9.8s ease-in-out infinite; } .wim-out-line.accept { top: 42%; background: linear-gradient(90deg, rgba(88,205,210,.42), rgba(224,85,48,.30), transparent); } .wim-out-line.defer { top: 54%; background: linear-gradient(90deg, rgba(224,85,48,.28), rgba(240,235,227,.10), transparent); animation-delay: .12s; } .wim-out-line.reject { top: 66%; background: linear-gradient(90deg, rgba(224,85,48,.18), rgba(240,235,227,.07), transparent); animation-delay: .24s; } .wim-outcome { position: absolute; right: 10%; width: 10rem; height: 2.05rem; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,.050); background: rgba(7,5,3,.62); color: rgba(240,235,227,.66); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(8px); z-index: 12; animation: wimOutcomeCycle 9.8s ease-in-out infinite; } .wim-outcome.accept { top: calc(42% - 1.025rem); border-color: rgba(88,205,210,.28); color: rgba(240,235,227,.82); box-shadow: 0 0 18px rgba(88,205,210,.08); } .wim-outcome.defer { top: calc(54% - 1.025rem); animation-delay: .12s; } .wim-outcome.reject { top: calc(66% - 1.025rem); animation-delay: .24s; } .wim-accepted-path { position: absolute; right: 10%; top: calc(42% + 1.35rem); width: 10rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(88,205,210,.42), rgba(224,85,48,.22), transparent); opacity: 0; transform: scaleX(.20); transform-origin: center; z-index: 10; animation: wimAcceptedPathCycle 9.8s ease-in-out infinite; } .wim-result { position: absolute; right: 6%; top: 77%; width: 14rem; color: rgba(240,235,227,.84); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(6px); z-index: 15; text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); animation: wimResultCycle 9.8s ease-in-out infinite; } @keyframes wimRequestMove { 0%, 8% { opacity: 0; left: 7%; } 18% { opacity: .92; left: 18%; } 36% { opacity: .78; left: 40%; } 46% { opacity: 0; left: 46%; } 100% { opacity: 0; left: 46%; } } @keyframes wimTraceForm { 0%, 18% { opacity: 0; transform: rotate(var(--r, 0deg)) scaleX(.12); } 32%, 46% { opacity: .62; transform: rotate(var(--r, 0deg)) scaleX(1); } 60%, 100% { opacity: 0; transform: rotate(var(--r, 0deg)) scaleX(.20); } } .wim-trace.t1 { --r: 10deg; } .wim-trace.t2 { --r: 4deg; } .wim-trace.t3 { --r: 0deg; } .wim-trace.t4 { --r: -8deg; } .wim-trace.t5 { --r: 13deg; } @keyframes wimGateCycle { 0%, 26% { opacity: 0; transform: scale(.94); } 40% { opacity: .96; transform: scale(1); border-color: rgba(88,205,210,.32); } 56%, 76% { opacity: .94; transform: scale(1); border-color: rgba(224,85,48,.30); } 90%, 100% { opacity: 0; transform: scale(.96); } } @keyframes wimOutLineCycle { 0%, 44% { opacity: 0; transform: scaleX(.10); } 58%, 78% { opacity: .72; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes wimOutcomeCycle { 0%, 52% { opacity: 0; transform: translateX(8px); } 64%, 78% { opacity: .92; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes wimAcceptedPathCycle { 0%, 62% { opacity: 0; transform: scaleX(.20); } 72%, 80% { opacity: .62; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(.24); } } @keyframes wimResultCycle { 0%, 68% { opacity: 0; transform: translateY(6px); } 78%, 82% { opacity: .86; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes wimLabelDemand { 0%, 8% { opacity: 0; } 18%, 42% { opacity: .78; } 62%, 100% { opacity: .12; } } @keyframes wimLabelGate { 0%, 28% { opacity: .10; } 40%, 76% { opacity: .86; text-shadow: 0 0 14px rgba(88,205,210,.18); } 90%, 100% { opacity: 0; } } @keyframes wimLabelOutcome { 0%, 52% { opacity: .08; } 64%, 82% { opacity: .96; text-shadow: 0 0 16px rgba(224,85,48,.30); } 92%, 100% { opacity: 0; } } @media(max-width:1180px) { .wim-gate { width: 11rem; left: calc(50% - 5.5rem); } .wim-out-line { left: calc(50% + 5.5rem); } .wim-outcome { right: 5%; width: 8rem; font-size: .40rem; } .wim-result { right: 4%; width: 11rem; font-size: .40rem; } } @media(max-width:768px) { .wim-trace, .wim-out-line, .wim-accepted-path, .wim-result { display: none !important; } .wim-gate { width: 8rem; left: calc(50% - 4rem); } .wim-gate b { font-size: .44rem; } .wim-gate i { font-size: .32rem; } .wim-outcome { width: 6rem; font-size: .34rem; } .wim-label { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .wim-bold-system * { animation: none !important; } } /* METHOD V105: W.I.M. slower final fade and clean intake decision attention flash */ /* Slow the final fade across the W.I.M. ending so the accepted/defer/reject state and the final "clean intake decision" result have time to land. */ .wim-bold-system .wim-gate { animation-name: wimGateCycleSlowerFinalV105 !important; } .wim-bold-system .wim-out-line { animation-name: wimOutLineCycleSlowerFinalV105 !important; } .wim-bold-system .wim-outcome { animation-name: wimOutcomeCycleSlowerFinalV105 !important; } .wim-bold-system .wim-accepted-path { animation-name: wimAcceptedPathCycleSlowerFinalV105 !important; } .wim-bold-system .wim-result { animation-name: wimResultFlashV105 !important; } @keyframes wimGateCycleSlowerFinalV105 { 0%, 26% { opacity: 0; transform: scale(.94); } 40% { opacity: .96; transform: scale(1); border-color: rgba(88,205,210,.32); } 56%, 84% { opacity: .94; transform: scale(1); border-color: rgba(224,85,48,.30); } 94%, 100% { opacity: 0; transform: scale(.96); } } @keyframes wimOutLineCycleSlowerFinalV105 { 0%, 44% { opacity: 0; transform: scaleX(.10); } 58%, 84% { opacity: .72; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(.18); } } @keyframes wimOutcomeCycleSlowerFinalV105 { 0%, 52% { opacity: 0; transform: translateX(8px); } 64%, 84% { opacity: .92; transform: translateX(0); } 94%, 100% { opacity: 0; transform: translateX(-4px); } } @keyframes wimAcceptedPathCycleSlowerFinalV105 { 0%, 62% { opacity: 0; transform: scaleX(.20); } 72%, 86% { opacity: .62; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(.24); } } /* Final attention flash: It appears after the outcomes are visible, gives two tasteful pulses, then holds briefly before the whole scene fades. */ @keyframes wimResultFlashV105 { 0%, 68% { opacity: 0; transform: translateY(6px); color: rgba(240,235,227,.72); text-shadow: 0 0 10px rgba(255,255,255,.04), 0 0 14px rgba(88,205,210,.06); } 73% { opacity: .96; transform: translateY(0); color: rgba(240,235,227,.96); text-shadow: 0 0 12px rgba(255,255,255,.10), 0 0 22px rgba(88,205,210,.18), 0 0 18px rgba(224,85,48,.10); } 77% { opacity: .68; transform: translateY(0); color: rgba(240,235,227,.76); text-shadow: 0 0 10px rgba(255,255,255,.04), 0 0 12px rgba(88,205,210,.08); } 81% { opacity: 1; transform: translateY(0); color: rgba(240,235,227,.98); text-shadow: 0 0 14px rgba(255,255,255,.12), 0 0 26px rgba(88,205,210,.22), 0 0 20px rgba(224,85,48,.12); } 86% { opacity: .90; transform: translateY(0); color: rgba(240,235,227,.88); text-shadow: 0 0 10px rgba(255,255,255,.06), 0 0 14px rgba(88,205,210,.08); } 94%, 100% { opacity: 0; transform: translateY(-4px); color: rgba(240,235,227,.72); text-shadow: 0 0 10px rgba(255,255,255,.04), 0 0 12px rgba(88,205,210,.04); } } /* METHOD CTA MODULE: slow conversation glow */ .method-cta-glow { position: relative; isolation: isolate; overflow: hidden; } .method-cta-glow::after { content: ''; position: absolute; left: 50%; top: 48%; width: min(54rem, 82vw); height: min(28rem, 42vw); transform: translate(-50%, -50%) scale(.92); border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(224,85,48,.10), transparent 66%), radial-gradient(ellipse 75% 55% at 50% 50%, rgba(47,119,124,.055), transparent 76%); filter: blur(24px); opacity: .56; pointer-events: none; z-index: 0; animation: methodCtaPulseField 6.8s ease-in-out infinite; } .method-cta-glow > * { position: relative; z-index: 2; } .method-cta-glow .btn-primary { position: relative; box-shadow: 0 0 18px rgba(200,64,26,.12), 0 0 36px rgba(200,64,26,.045); animation: methodCtaButtonPulse 5.8s ease-in-out infinite; } @keyframes methodCadenceLineBreathe { 0%, 100% { opacity: .36; transform: scaleX(.94); } 50% { opacity: .70; transform: scaleX(1); } } @keyframes methodRepeatableGlow { 0%, 100% { text-shadow: 0 0 10px rgba(224,85,48,.08), 0 0 22px rgba(224,85,48,.04); } 50% { text-shadow: 0 0 12px rgba(224,85,48,.18), 0 0 28px rgba(224,85,48,.10); } } @keyframes methodQuotePulse { 0%, 100% { opacity: .22; transform: scale(.92); } 50% { opacity: .44; transform: scale(1.04); } } @keyframes methodInstrumentLine { 0%, 100% { opacity: .42; transform: scaleX(.92); } 50% { opacity: .78; transform: scaleX(1); } } @keyframes methodTickBreathe { 0%, 100% { opacity: .40; transform: scaleY(.74); } 50% { opacity: .82; transform: scaleY(1); } } @keyframes methodTickHoverSequence { 0%, 100% { opacity: .42; transform: scaleY(.74); background: rgba(200,64,26,.34); } 44%, 58% { opacity: 1; transform: scaleY(1.12); background: rgba(224,85,48,.72); box-shadow: 0 0 12px rgba(224,85,48,.28), 0 0 22px rgba(47,119,124,.08); } } @keyframes methodCtaPulseField { 0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(.90); } 50% { opacity: .72; transform: translate(-50%, -50%) scale(1); } } @keyframes methodCtaButtonPulse { 0%, 100% { box-shadow: 0 0 18px rgba(200,64,26,.12), 0 0 36px rgba(200,64,26,.045); } 50% { box-shadow: 0 0 22px rgba(224,85,48,.22), 0 0 48px rgba(224,85,48,.075); } } @media(max-width:768px) { .method-key-concept::before { left: 1.5rem; right: 1.5rem; } .method-cadence-instrument { height: 4rem; margin-bottom: 1.5rem; } .method-cadence-instrument .cadence-tick i { font-size: .42rem; letter-spacing: .14em; } } @media (prefers-reduced-motion: reduce) { .method-key-concept::before, .method-key-concept h2 em, .method-key-concept blockquote::before, .method-key-concept .big-def::before, .method-key-concept .header-pull-quote::before, .method-key-concept [class*="quote"]::before, .method-cadence-instrument .cadence-line, .method-cadence-instrument .cadence-tick, .method-cta-glow::after, .method-cta-glow .btn-primary { animation: none !important; } } /* METHOD CTA MODULE: visible slow conversation glow */ .method-cta-glow { position: relative; isolation: isolate; overflow: hidden; } .method-cta-glow::after { content: ''; position: absolute; left: 50%; top: 48%; width: min(58rem, 86vw); height: min(30rem, 44vw); transform: translate(-50%, -50%) scale(.92); border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(224,85,48,.13), transparent 66%), radial-gradient(ellipse 75% 55% at 50% 50%, rgba(88,205,210,.060), transparent 76%); filter: blur(24px); opacity: .64; pointer-events: none; z-index: 0; animation: methodCtaPulseFieldVisible 6.2s ease-in-out infinite; } .method-cta-glow > * { position: relative; z-index: 2; } .method-cta-glow .btn-primary { position: relative; box-shadow: 0 0 20px rgba(224,85,48,.18), 0 0 44px rgba(224,85,48,.070); animation: methodCtaButtonPulseVisible 5.4s ease-in-out infinite; } @keyframes methodKeyConceptLine { 0%, 100% { opacity: .48; transform: scaleX(.94); } 50% { opacity: .85; transform: scaleX(1); } } @keyframes methodRepeatableGlowVisible { 0%, 100% { text-shadow: 0 0 10px rgba(224,85,48,.12), 0 0 22px rgba(224,85,48,.06); } 50% { text-shadow: 0 0 14px rgba(224,85,48,.30), 0 0 34px rgba(224,85,48,.16); } } @keyframes methodQuoteChamberPulse { 0%, 100% { opacity: .28; transform: scale(.92); } 50% { opacity: .56; transform: scale(1.05); } } @keyframes resonanceRailBreathe { 0%, 100% { opacity: .48; transform: scaleX(.94); } 50% { opacity: .90; transform: scaleX(1); } } @keyframes resonanceSlowSweep { 0%, 18% { left: -22%; opacity: 0; } 38% { opacity: .85; } 78%, 100% { left: 104%; opacity: 0; } } @keyframes resonanceNodePulse { 0%, 100% { opacity: .45; transform: scale(.78); background: rgba(224,85,48,.64); } 50% { opacity: 1; transform: scale(1.08); background: rgba(224,85,48,.95); } } @keyframes resonanceReadoutPulse { 0%, 100% { opacity: .45; } 50% { opacity: .90; } } @keyframes methodCtaPulseFieldVisible { 0%, 100% { opacity: .44; transform: translate(-50%, -50%) scale(.90); } 50% { opacity: .78; transform: translate(-50%, -50%) scale(1); } } @keyframes methodCtaButtonPulseVisible { 0%, 100% { box-shadow: 0 0 18px rgba(224,85,48,.14), 0 0 36px rgba(224,85,48,.050); } 50% { box-shadow: 0 0 26px rgba(224,85,48,.30), 0 0 58px rgba(224,85,48,.10); } } @media(max-width:768px) { .method-resonance-panel { min-height: 5.75rem; } .resonance-node i { font-size: .40rem; letter-spacing: .13em; } .resonance-readout { right: 1rem; font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .method-key-concept::before, .method-key-concept h2 em, .method-key-concept blockquote::before, .method-key-concept .big-def::before, .method-key-concept .header-pull-quote::before, .method-key-concept [class*="quote"]::before, .method-resonance-panel::before, .method-resonance-panel::after, .resonance-node, .resonance-readout, .method-cta-glow::after, .method-cta-glow .btn-primary { animation: none !important; } } /* METHOD KEY CONCEPT MODULE V2: explicit resonance chamber */ .method-key-concept-v2 { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, .95fr) minmax(34rem, 1.05fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; padding-top: clamp(7rem, 10vw, 10rem); padding-bottom: clamp(7rem, 10vw, 10rem); background: radial-gradient(ellipse 60% 90% at 78% 48%, rgba(200,64,26,.095), transparent 68%), radial-gradient(ellipse 45% 60% at 52% 65%, rgba(88,205,210,.060), transparent 72%), var(--ink-0); } .method-key-concept-v2::before { content: ''; position: absolute; left: 3rem; right: 3rem; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.16), rgba(224,85,48,.48), rgba(88,205,210,.24), rgba(224,85,48,.34), transparent); box-shadow: 0 0 18px rgba(224,85,48,.14), 0 0 30px rgba(88,205,210,.075); opacity: .72; z-index: 0; animation: methodKeyV2LineBreathe 6.4s ease-in-out infinite; } .method-key-concept-v2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,5,3,.96), transparent 30%, transparent 70%, rgba(7,5,3,.86)), repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 76px); z-index: 0; pointer-events: none; } .method-key-concept-v2 > * { position: relative; z-index: 2; } .method-key-concept-v2 h2 em { display: inline-block; color: var(--red-hi); text-shadow: 0 0 14px rgba(224,85,48,.20), 0 0 34px rgba(224,85,48,.10); animation: methodKeyV2RepeatableGlow 4.8s ease-in-out infinite; } .method-key-chamber { position: relative; min-height: 26rem; border: 1px solid rgba(224,85,48,.36); background: radial-gradient(ellipse 80% 120% at 45% 40%, rgba(224,85,48,.075), transparent 65%), radial-gradient(ellipse 90% 140% at 74% 64%, rgba(88,205,210,.048), transparent 70%), rgba(7,5,3,.62); box-shadow: 0 0 34px rgba(224,85,48,.085), 0 0 68px rgba(88,205,210,.035), inset 0 0 0 1px rgba(255,255,255,.020); overflow: hidden; padding: clamp(2.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; } .method-key-chamber::before { content: ''; position: absolute; inset: -35% -25%; background: radial-gradient(ellipse 42% 55% at 50% 50%, rgba(224,85,48,.16), transparent 70%); opacity: .48; filter: blur(22px); animation: methodKeyV2ChamberPulse 5.8s ease-in-out infinite; pointer-events: none; } .method-key-chamber::after { content: ''; position: absolute; top: 0; bottom: 0; left: -24%; width: 20%; background: linear-gradient(90deg, transparent, rgba(224,85,48,.065), rgba(88,205,210,.050), transparent); filter: blur(5px); animation: methodKeyV2ChamberSweep 8.8s ease-in-out infinite; pointer-events: none; } .method-key-chamber p { position: relative; z-index: 2; font-family: 'Cormorant', serif; font-size: clamp(2rem, 3.15vw, 3.8rem); line-height: 1.25; font-style: italic; color: var(--cream); max-width: 49rem; margin: 0; } .method-key-rail { position: relative; z-index: 2; height: 6.5rem; margin-top: clamp(2.5rem, 4vw, 4rem); } .key-rail-line { position: absolute; left: 2%; right: 2%; top: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,85,48,.38), rgba(88,205,210,.30), rgba(224,85,48,.38), transparent); box-shadow: 0 0 14px rgba(224,85,48,.18), 0 0 24px rgba(88,205,210,.09); animation: methodKeyV2RailBreathe 6.4s ease-in-out infinite; } .key-node { position: absolute; top: calc(2.2rem - 5px); width: 10px; height: 10px; border-radius: 50%; background: rgba(224,85,48,.86); box-shadow: 0 0 14px rgba(224,85,48,.36), 0 0 24px rgba(88,205,210,.09); animation: methodKeyV2NodePulse 6.4s ease-in-out infinite; } .key-node i { position: absolute; top: 1.7rem; left: 50%; transform: translateX(-50%); color: rgba(240,235,227,.62); font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; font-style: normal; white-space: nowrap; } .key-node.n1 { left: 10%; animation-delay: .1s; } .key-node.n2 { left: 36%; animation-delay: .4s; } .key-node.n3 { left: 63%; animation-delay: .7s; } .key-node.n4 { left: 90%; animation-delay: 1s; } .method-key-readout { position: absolute; right: 2rem; bottom: 1.75rem; z-index: 3; color: rgba(224,85,48,.78); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 14px rgba(224,85,48,.20); animation: methodKeyV2ReadoutPulse 6.4s ease-in-out infinite; } .method-key-chamber:hover { border-color: rgba(224,85,48,.60); box-shadow: 0 0 42px rgba(224,85,48,.15), 0 0 76px rgba(88,205,210,.055), inset 0 0 0 1px rgba(255,255,255,.030); } /* METHOD CTA MODULE V2: explicit slow conversation glow */ .method-cta-glow-v2 { position: relative; isolation: isolate; overflow: hidden; } .method-cta-glow-v2::before { content: ''; position: absolute; left: 50%; top: 48%; width: min(64rem, 86vw); height: min(32rem, 44vw); transform: translate(-50%, -50%) scale(.92); border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(224,85,48,.14), transparent 66%), radial-gradient(ellipse 75% 55% at 50% 50%, rgba(88,205,210,.065), transparent 76%); filter: blur(24px); opacity: .66; pointer-events: none; z-index: 0; animation: methodCtaV2PulseField 6.2s ease-in-out infinite; } .method-cta-glow-v2 > * { position: relative; z-index: 2; } .method-cta-glow-v2 .btn-primary, .method-cta-glow-v2 a[href*="calendly"], .method-cta-glow-v2 a[href*="contact"] { position: relative; box-shadow: 0 0 20px rgba(224,85,48,.18), 0 0 44px rgba(224,85,48,.070); animation: methodCtaV2ButtonPulse 5.4s ease-in-out infinite; } @keyframes methodKeyV2LineBreathe { 0%, 100% { opacity: .44; transform: scaleX(.94); } 50% { opacity: .85; transform: scaleX(1); } } @keyframes methodKeyV2RepeatableGlow { 0%, 100% { text-shadow: 0 0 10px rgba(224,85,48,.12), 0 0 24px rgba(224,85,48,.06); } 50% { text-shadow: 0 0 16px rgba(224,85,48,.32), 0 0 38px rgba(224,85,48,.16); } } @keyframes methodKeyV2ChamberPulse { 0%, 100% { opacity: .28; transform: scale(.92); } 50% { opacity: .58; transform: scale(1.05); } } @keyframes methodKeyV2ChamberSweep { 0%, 18% { left: -24%; opacity: 0; } 38% { opacity: .85; } 78%, 100% { left: 108%; opacity: 0; } } @keyframes methodKeyV2RailBreathe { 0%, 100% { opacity: .48; transform: scaleX(.94); } 50% { opacity: .90; transform: scaleX(1); } } @keyframes methodKeyV2NodePulse { 0%, 100% { opacity: .46; transform: scale(.78); background: rgba(224,85,48,.64); } 50% { opacity: 1; transform: scale(1.08); background: rgba(224,85,48,.95); } } @keyframes methodKeyV2ReadoutPulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } } @keyframes methodCtaV2PulseField { 0%, 100% { opacity: .44; transform: translate(-50%, -50%) scale(.90); } 50% { opacity: .80; transform: translate(-50%, -50%) scale(1); } } @keyframes methodCtaV2ButtonPulse { 0%, 100% { box-shadow: 0 0 18px rgba(224,85,48,.14), 0 0 36px rgba(224,85,48,.050); } 50% { box-shadow: 0 0 26px rgba(224,85,48,.30), 0 0 58px rgba(224,85,48,.10); } } @media(max-width:1024px) { .method-key-concept-v2 { grid-template-columns: 1fr; } .method-key-chamber { min-height: 22rem; } } @media(max-width:768px) { .method-key-concept-v2::before { left: 1.5rem; right: 1.5rem; } .method-key-chamber { min-height: 20rem; padding: 2rem; } .key-node i { font-size: .40rem; letter-spacing: .13em; } .method-key-readout { right: 1rem; font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .method-key-concept-v2::before, .method-key-concept-v2 h2 em, .method-key-chamber::before, .method-key-chamber::after, .key-rail-line, .key-node, .method-key-readout, .method-cta-glow-v2::before, .method-cta-glow-v2 .btn-primary, .method-cta-glow-v2 a[href*="calendly"], .method-cta-glow-v2 a[href*="contact"] { animation: none !important; } }