/* Agents awaken, connect, assemble the official logo, then reset: one 9s scene. */
#public .engineering-card.brand-experience { --brand-cycle:9s; --logo-size:220px; overflow:hidden; min-height:500px; padding:0 22px 20px; background:radial-gradient(ellipse at 50% 45%,#36250f60,transparent 65%),linear-gradient(140deg,#0d0b08f7,#050505f7 70%); }
.brand-experience .card-top { position:relative; z-index:3; }
.brand-experience .workflow-label { font-size:8px; padding:5px 7px; }
.brand-experience .animation-toggle { min-height:30px!important; min-width:30px; font-size:13px!important; }
.brand-experience .animation-toggle:disabled { opacity:.5; cursor:default; }
.official-logo { object-fit:contain; border-radius:50%; }
.brand-scene { height:334px; position:relative; direction:ltr; isolation:isolate; perspective:700px; }
.brand-neural-field,.brand-agent-team { position:absolute; inset:0; }
.brand-floor { position:absolute; width:80%; left:10%; height:86px; bottom:-5px; background:repeating-linear-gradient(90deg,transparent 0 28px,#a97d3230 29px 30px),repeating-linear-gradient(0deg,transparent 0 17px,#a97d3230 18px 19px); transform:rotateX(67deg); mask:radial-gradient(ellipse,#000,transparent 70%); }
.brand-orbit { position:absolute; width:72%; height:68%; left:14%; top:17%; border-radius:50%; border:1px solid #e6b95d78; box-shadow:0 0 12px #d2a44120,inset 0 0 10px #d2a44115; animation:brand-orbital 12s linear infinite; }
.orbit-two { width:64%; height:86%; left:18%; top:7%; border-color:#7c75ec55; animation-direction:reverse; animation-duration:16s; }
.brand-spark { position:absolute; width:2px; height:2px; border-radius:50%; background:#fde4ac; box-shadow:0 0 8px #ffda78; animation:brand-sparkle 4s ease-in-out infinite; }
.brand-energy-map { position:absolute; inset:0; width:100%; height:100%; overflow:visible; animation:brand-links var(--brand-cycle) ease-in-out infinite; }
.brand-energy-trail { fill:none; stroke:#d6aa56; stroke-width:1; opacity:.5; }
.brand-energy-packet { fill:none; stroke:#ffdf9b; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:4 72; filter:drop-shadow(0 0 3px #eabd63); animation:brand-packets 1.1s linear infinite; }
.trail-2,.trail-6 { stroke:#a794ff; }.trail-3,.trail-5 { stroke:#69dfd8; }
.brand-idea-core { position:absolute; width:91px; height:91px; left:calc(50% - 45.5px); top:calc(49% - 45.5px); display:grid; place-items:center; border:1px solid #ffdf8f80; border-radius:25px; background:radial-gradient(ellipse,#76522177,#0c0c16ee); box-shadow:0 0 25px #b391ff38,inset 0 0 20px #ebba4844; color:#ffe3a0; animation:brand-think var(--brand-cycle) ease-in-out infinite; }
.brand-idea-core .ui-icon { width:57px; height:57px; filter:drop-shadow(0 0 8px #c8acff); }
.brand-idea-core>span { position:absolute; inset:-17px; border:1px dashed #dfc08f88; border-radius:50%; animation:brand-halo 7s linear infinite; }
.brand-agent { --agent-color:#f4ce79; position:absolute; width:61px; height:73px; left:var(--start-x); top:var(--start-y); transform:translate(-50%,-50%); color:var(--agent-color); z-index:2; animation:brand-agent-route var(--brand-cycle) cubic-bezier(.45,0,.35,1) infinite; }
.agent-body { position:relative; width:100%; height:100%; display:grid; place-items:center; transform:perspective(220px) rotateY(var(--angle)); animation:brand-agent-float 3s ease-in-out infinite; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--agent-color) 50%,transparent)); }
.agent-body>svg { width:100%; height:100%; overflow:visible; }
.agent-body>.agent-brain { width:52px; height:53px; padding:7px; border:1px solid var(--agent-color); background:linear-gradient(140deg,#241a3ddd,#081418f5); border-radius:17px; box-shadow:inset 0 0 15px color-mix(in srgb,var(--agent-color) 25%,transparent); }
.agent-aura { position:absolute; inset:-10px -8px; border:1px solid color-mix(in srgb,var(--agent-color) 50%,transparent); border-radius:50%; transform:rotateX(45deg); box-shadow:0 0 14px color-mix(in srgb,var(--agent-color) 22%,transparent); }
.brand-core,.brand-logo-pieces { position:absolute; width:var(--logo-size); height:var(--logo-size); left:calc(50% - var(--logo-size)/2); top:calc(49% - var(--logo-size)/2); }
.brand-logo-pieces { z-index:3; }
.logo-tile { position:absolute; width:34%; height:34%; background-image:url('/assets/aii-systems-logo.png'); background-size:300% 300%; mix-blend-mode:screen; animation:brand-tile-assemble var(--brand-cycle) cubic-bezier(.4,0,.25,1) infinite; filter:drop-shadow(0 0 5px #f3ca65); }
.brand-core { z-index:4; display:grid; place-items:center; filter:drop-shadow(0 0 21px #e6b44966); animation:brand-logo-reveal var(--brand-cycle) ease-in-out infinite; }
.brand-core>img { position:relative; z-index:2; display:block; width:100%; height:100%; object-fit:contain; border-radius:50%; box-shadow:0 0 28px #d3a84f35; }
.brand-core-halo { position:absolute; inset:-14px; border-radius:50%; border:1px solid #f4d7979c; background:conic-gradient(from 20deg,transparent 30%,#ffe7a775 38%,transparent 47%,transparent 73%,#dfac4455 77%,transparent 83%); mask:radial-gradient(transparent 67%,#000 68%,#000 71%,transparent 72%); animation:brand-halo 7s linear infinite; }
.brand-core-reflection { position:absolute; inset:0; z-index:3; border-radius:50%; background:linear-gradient(115deg,transparent 30%,#ffe7a705 42%,#fff4c422 48%,transparent 60%); background-size:240% 100%; animation:brand-shimmer 4s ease-in-out infinite; pointer-events:none; }
.brand-caption { position:relative; text-align:center; padding:0 0 17px; margin-top:-5px; }
.brand-caption h2 { font-size:27px; font-weight:650; letter-spacing:-.5px; margin:0 0 6px; color:#ffedbe; }
.brand-caption p { color:#b9ae98; font-size:11px; margin:0; line-height:1.6; }
.brand-signature { display:flex; justify-content:center; gap:8px; align-items:center; padding-top:13px; border-top:1px solid #c5933638; color:#b3a17b; font-size:9px; letter-spacing:.5px; }
.brand-signature svg { width:16px; height:16px; color:#e6bd67; }
#public .brand-experience[data-motion="paused"] .brand-scene * { animation-play-state:paused!important; }
@keyframes brand-agent-route { 0%,14%,100% { left:var(--start-x); top:var(--start-y); transform:translate(-50%,-50%) scale(1); opacity:1; } 30% { left:var(--mid-x); top:var(--mid-y); transform:translate(-50%,-50%) scale(1.12) rotate(5deg); opacity:1; } 45% { left:var(--near-x); top:var(--near-y); transform:translate(-50%,-50%) scale(.95); opacity:1; } 58%,83% { left:50%; top:49%; transform:translate(-50%,-50%) scale(.15) rotate(-10deg); opacity:0; } 90% { left:var(--start-x); top:var(--start-y); transform:translate(-50%,-50%) scale(.7); opacity:0; } }
@keyframes brand-agent-float { 0%,100% { transform:perspective(220px) rotateY(var(--angle)) translateY(3px); } 50% { transform:perspective(220px) rotateY(calc(var(--angle)*-1)) translateY(-7px); } }
@keyframes brand-think { 0%,18%,100% { opacity:1; transform:rotate(-8deg) scale(.9); } 33% { opacity:1; transform:rotate(8deg) scale(1.1); } 46% { opacity:1; transform:rotate(-4deg) scale(1.15); filter:brightness(1.5); } 56%,88% { opacity:0; transform:scale(.3); } 95% { opacity:1; transform:scale(.9); } }
@keyframes brand-tile-assemble { 0%,25%,100% { opacity:0; transform:translate(var(--scatter-x),var(--scatter-y)) scale(.4) rotate(var(--tile-angle)); } 36% { opacity:.7; transform:translate(var(--scatter-x),var(--scatter-y)) scale(.85) rotate(var(--tile-angle)); } 58%,86% { opacity:1; transform:translate(0,0) scale(1) rotate(0); } 95% { opacity:0; transform:translate(var(--scatter-x),var(--scatter-y)) scale(.6) rotate(var(--tile-angle)); } }
@keyframes brand-logo-reveal { 0%,52%,100% { opacity:0; transform:scale(.7) rotateY(-12deg); } 62% { opacity:1; transform:scale(1.04) rotateY(5deg); } 72% { opacity:1; transform:scale(1) translateY(-4px) rotateY(-5deg); } 85% { opacity:1; transform:scale(1) translateY(3px) rotateY(5deg); } 96% { opacity:0; transform:scale(.75) rotateY(-8deg); } }
@keyframes brand-links { 0%,40%,100% { opacity:1; } 58%,85% { opacity:.2; } 93% { opacity:.7; } }
@keyframes brand-packets { to { stroke-dashoffset:-152; } }
@keyframes brand-halo { to { transform:rotate(360deg); } }
@keyframes brand-orbital { 0% { transform:rotateY(25deg) rotateX(58deg) rotateZ(0deg); } 50% { transform:rotateY(-25deg) rotateX(38deg) rotateZ(180deg); } 100% { transform:rotateY(25deg) rotateX(58deg) rotateZ(360deg); } }
@keyframes brand-sparkle { 0%,100% { opacity:.25; transform:scale(.7); } 50% { opacity:.9; transform:scale(1.3); } }
@keyframes brand-shimmer { 0%,20% { background-position:100% 0; } 70%,100% { background-position:-100% 0; } }
@media(max-width:1150px) and (min-width:901px) { #public .brand-experience { --logo-size:190px; } .brand-scene { height:309px; } .brand-agent { width:50px; height:62px; } .brand-caption h2 { font-size:22px; } .brand-experience .workflow-label { max-width:96px; white-space:normal; text-align:center; } }
@media(max-width:600px) { #public .engineering-card.brand-experience { --logo-size:180px; width:100%; padding-inline:14px; min-height:460px; } .brand-scene { height:295px; } .brand-agent { width:42px; height:54px; } .agent-body>.agent-brain { width:39px; height:40px; padding:5px; border-radius:12px; } .agent-aura { inset:-4px; } .brand-idea-core { width:67px; height:67px; left:calc(50% - 33.5px); top:calc(49% - 33.5px); border-radius:19px; } .brand-idea-core .ui-icon { width:44px; height:44px; } .brand-caption h2 { font-size:23px; } .brand-caption p { font-size:10px; } .brand-experience .brand-small { font-size:13px; } .brand-experience .workflow-label { font-size:7px; } }
[dir=rtl] .brand-caption h2 { letter-spacing:0; }
.brand-experience[data-reduced="true"] .brand-agent-team,.brand-experience[data-reduced="true"] .brand-idea-core,.brand-experience[data-reduced="true"] .brand-logo-pieces { display:none; }
.brand-experience[data-reduced="true"] .brand-core { opacity:1; transform:none; }
.brand-experience[data-reduced="true"] .brand-energy-map { opacity:.12; }
@media(prefers-reduced-motion:reduce) { .brand-scene * { animation:none!important; } }
.agent-1 { --start-x:14%; --start-y:24%; --mid-x:25%; --mid-y:16%; --near-x:39%; --near-y:34%; --angle:22deg; --agent-color:#78e8ef; } .agent-1 .agent-body { animation-delay:-0.3s; }
.agent-2 { --start-x:85%; --start-y:19%; --mid-x:70%; --mid-y:10%; --near-x:61%; --near-y:34%; --angle:-20deg; --agent-color:#b399ff; } .agent-2 .agent-body { animation-delay:-0.6s; }
.agent-3 { --start-x:8%; --start-y:66%; --mid-x:11%; --mid-y:46%; --near-x:35%; --near-y:59%; --angle:18deg; --agent-color:#71c8ff; } .agent-3 .agent-body { animation-delay:-0.8999999999999999s; }
.agent-4 { --start-x:92%; --start-y:60%; --mid-x:87%; --mid-y:40%; --near-x:65%; --near-y:59%; --angle:-18deg; --agent-color:#ffe1a3; } .agent-4 .agent-body { animation-delay:-1.2s; }
.agent-5 { --start-x:28%; --start-y:87%; --mid-x:16%; --mid-y:82%; --near-x:44%; --near-y:66%; --angle:12deg; --agent-color:#76e6b8; } .agent-5 .agent-body { animation-delay:-1.5s; }
.agent-6 { --start-x:71%; --start-y:85%; --mid-x:84%; --mid-y:81%; --near-x:57%; --near-y:66%; --angle:-12deg; --agent-color:#b796ff; } .agent-6 .agent-body { animation-delay:-1.7999999999999998s; }
.tile-1 { left:0.0%; top:0.0%; background-position:0% 0%; --scatter-x:-148px; --scatter-y:-108px; --tile-angle:24deg; }
.tile-2 { left:33.333%; top:0.0%; background-position:50% 0%; --scatter-x:0px; --scatter-y:-108px; --tile-angle:-24deg; }
.tile-3 { left:66.666%; top:0.0%; background-position:100% 0%; --scatter-x:148px; --scatter-y:-108px; --tile-angle:24deg; }
.tile-4 { left:0.0%; top:33.333%; background-position:0% 50%; --scatter-x:-124px; --scatter-y:0px; --tile-angle:-24deg; }
.tile-5 { left:33.333%; top:33.333%; background-position:50% 50%; --scatter-x:24px; --scatter-y:0px; --tile-angle:24deg; }
.tile-6 { left:66.666%; top:33.333%; background-position:100% 50%; --scatter-x:172px; --scatter-y:0px; --tile-angle:-24deg; }
.tile-7 { left:0.0%; top:66.666%; background-position:0% 100%; --scatter-x:-148px; --scatter-y:108px; --tile-angle:24deg; }
.tile-8 { left:33.333%; top:66.666%; background-position:50% 100%; --scatter-x:0px; --scatter-y:108px; --tile-angle:-24deg; }
.tile-9 { left:66.666%; top:66.666%; background-position:100% 100%; --scatter-x:148px; --scatter-y:108px; --tile-angle:24deg; }
.spark-1 { left:37%; top:29%; animation-delay:-0.17s; }
.spark-2 { left:74%; top:58%; animation-delay:-0.34s; }
.spark-3 { left:14%; top:87%; animation-delay:-0.51s; }
.spark-4 { left:51%; top:22%; animation-delay:-0.68s; }
.spark-5 { left:88%; top:51%; animation-delay:-0.8500000000000001s; }
.spark-6 { left:28%; top:80%; animation-delay:-1.02s; }
.spark-7 { left:65%; top:15%; animation-delay:-1.1900000000000002s; }
.spark-8 { left:5%; top:44%; animation-delay:-1.36s; }
.spark-9 { left:42%; top:73%; animation-delay:-1.53s; }
.spark-10 { left:79%; top:8%; animation-delay:-1.7000000000000002s; }
.spark-11 { left:19%; top:37%; animation-delay:-1.87s; }
.spark-12 { left:56%; top:66%; animation-delay:-2.04s; }
.spark-13 { left:93%; top:1%; animation-delay:-2.21s; }
.spark-14 { left:33%; top:30%; animation-delay:-2.3800000000000003s; }
.spark-15 { left:70%; top:59%; animation-delay:-2.5500000000000003s; }
.spark-16 { left:10%; top:88%; animation-delay:-2.72s; }
.spark-17 { left:47%; top:23%; animation-delay:-2.89s; }
.spark-18 { left:84%; top:52%; animation-delay:-3.06s; }
.spark-19 { left:24%; top:81%; animation-delay:-3.2300000000000004s; }
.spark-20 { left:61%; top:16%; animation-delay:-3.4000000000000004s; }