/* Recognizable AI symbols, rolling through the quiet space around the copy. */
.why-context { position: relative; isolation: isolate; min-height: 660px; padding-top: 35px; padding-bottom: 245px; }
.why-context > h3, .why-context > .why-context-copy { position: relative; z-index: 2; }
.ai-brand-field { position: absolute; inset: 0 -1% 0; z-index: 0; pointer-events: none; user-select: none; }
.ai-brand-badge { position: absolute; display: grid; place-items: center; width: var(--badge-size); aspect-ratio: 1; border-radius: 29%; border: 1px solid #ffffff63; background: linear-gradient(145deg, #ffffff, var(--badge-tint)); box-shadow: inset 0 2px 3px #fff, inset -3px -5px 8px #23395220, 0 9px 0 var(--badge-edge), 0 23px 20px #0006, 0 0 70px var(--badge-glow); opacity: .84; transform: translate3d(calc(var(--era-progress,0) * var(--travel-x)), calc(var(--era-bounce,0) * var(--travel-y)), 0) rotate(calc(var(--rest-angle) + var(--era-progress,0) * var(--roll-angle))); transition: transform .24s cubic-bezier(.22,.7,.25,1); }
.ai-brand-badge > img { display: block; width: 58%; height: 58%; object-fit: contain; filter: saturate(.85); }
.brand-chatgpt { --badge-size: 112px; --badge-tint: #dce3e9; --badge-edge: #9ea8b5; --badge-glow: #dce9ff0b; --travel-x: 50px; --travel-y: -15px; --rest-angle: -21deg; --roll-angle: 45deg; left: 4%; bottom: 125px; }
.brand-gemini { --badge-size: 140px; --badge-tint: #dce5ff; --badge-edge: #8594b6; --badge-glow: #6298ff18; --travel-x: -30px; --travel-y: 22px; --rest-angle: 15deg; --roll-angle: -38deg; left: 28%; bottom: 52px; }
.brand-claude { --badge-size: 96px; --badge-tint: #f4e0d3; --badge-edge: #bfa08a; --badge-glow: #e3926920; --travel-x: 28px; --travel-y: -18px; --rest-angle: -16deg; --roll-angle: 53deg; left: 60%; bottom: 88px; }
.brand-perplexity { --badge-size: 115px; --badge-tint: #d8ebeb; --badge-edge: #8daead; --badge-glow: #87d0ca16; --travel-x: -43px; --travel-y: 17px; --rest-angle: 24deg; --roll-angle: -46deg; right: 1%; bottom: 38px; }
@media(min-width:1100px) {
 .brand-chatgpt { bottom: 178px; }
 .brand-gemini { left: 29%; bottom: 67px; }
 .brand-claude { left: 61%; bottom: 110px; }
}
@media(max-width:700px) {
 .why-context { min-height: 0; padding-top: 5px; padding-bottom: 228px; }
 .ai-brand-field { inset: auto 0 0; height: 208px; }
 .ai-brand-badge { opacity: .82; border-radius: 29%; box-shadow: inset 0 2px 3px #fff, inset -2px -4px 6px #23395220, 0 6px 0 var(--badge-edge), 0 16px 18px #0005; }
 .brand-chatgpt { --badge-size: 73px; --travel-x: 15px; --travel-y: -9px; left: 0; bottom: 102px; }
 .brand-gemini { --badge-size: 90px; --travel-x: -10px; --travel-y: 11px; left: 29%; bottom: 31px; }
 .brand-claude { --badge-size: 66px; --travel-x: -12px; --travel-y: -12px; left: 61%; bottom: 104px; }
 .brand-perplexity { --badge-size: 74px; --travel-x: -6px; --travel-y: 10px; right: 1%; bottom: 17px; }
}
.reduce-motion .ai-brand-badge { transform: rotate(var(--rest-angle)); transition: none; }
@media(prefers-reduced-motion:reduce) { .ai-brand-badge { transform: rotate(var(--rest-angle)) !important; transition: none !important; } }