/* The source bull has one fixed pose; only the surrounding stories animate. */
.hero-emblem{perspective:950px}
.bull-scene{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transform-origin:50% 50%;isolation:isolate}
.bull-scene .hero-centering{position:relative;z-index:5;aspect-ratio:1}
.bull-rotor{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transform-origin:58.0078125% 44.3359375%}
.hero-stage .hero-mark .bull-original{display:block;width:100%;height:auto;position:relative;z-index:1;transform:none!important}
.bull-provider{position:absolute;left:50%;top:50%;--icon-size:38px;width:64px;height:48px;margin:-24px 0 0 -32px;display:flex;align-items:center;justify-content:center;z-index:1;opacity:1;will-change:transform,opacity;pointer-events:none}
.hero-stage .hero-mark .bull-provider img,.bull-provider svg{display:block;width:calc(var(--icon-size)*var(--icon-width));height:calc(var(--icon-size)*var(--icon-height));max-width:none;max-height:none;object-fit:contain;transform:none;translate:calc(var(--icon-size)*var(--icon-shift-x,0)) calc(var(--icon-size)*var(--icon-shift-y,0));transform-origin:center;opacity:1}
/* Normalize visible artwork to one height; preserve each official mark's proportions. */
.bull-provider.codex{--icon-width:1.179724;--icon-height:1.179724}
.bull-provider.anthropic{--icon-width:1.4375;--icon-height:1;--icon-shift-x:.004211}
.bull-provider.grok{--icon-width:1.040650;--icon-height:1.040650;--icon-shift-y:.018293}
.bull-provider.deepseek{--icon-width:1.360239;--icon-height:1}
.bull-provider.gemini{--icon-width:1.089362;--icon-height:1.089362}
.bull-provider.meta{--icon-width:1.6;--icon-height:1.6;--icon-shift-x:-.045313}
.bull-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;fill:none;stroke:#a9c8be;stroke-width:1.35;opacity:.45}
.bull-connectors path{vector-effect:non-scaling-stroke}
.bull-connectors:not([data-ready]){transform:scale(.9);transform-origin:center}
.bull-connectors:not([data-ready]) circle{display:none}
.bull-connectors circle{fill:currentColor;stroke:none}
.bull-connectors g{color:#a9c8be}
.bull-connectors [data-provider=gemini]{color:#8bbaff;stroke:#8bbaff}
.bull-connectors [data-provider=deepseek]{color:#9894ed;stroke:#9894ed}
.bull-connectors [data-provider=meta]{color:#6caaf0;stroke:#6caaf0}
/* Tilted, asymmetrical platform marks scatter around the fixed bull. */
.bull-social{position:absolute;left:50%;top:50%;width:12%;max-width:46px;aspect-ratio:1;translate:-50% -50%;z-index:2;opacity:0;pointer-events:none;will-change:transform,opacity}
.bull-social .social-mark{display:block;width:100%;height:100%;background:#e8f2eb;-webkit-mask:var(--social-mask) center/contain no-repeat;mask:var(--social-mask) center/contain no-repeat}
.social-instagram{--social-mask:url('assets/social-instagram.svg')}
.social-instagram .social-mark{background:linear-gradient(30deg,#ffd776 5%,#f87443 30%,#ed2a7b 57%,#9b4dca 82%,#5968d8)}
.social-facebook{--social-mask:url('assets/social-facebook.svg')}
.social-facebook .social-mark{background:#1877f2}
.social-x{--social-mask:url('assets/social-x.svg')}
.social-threads{--social-mask:url('assets/social-threads.svg')}
.social-linkedin{--social-mask:url('assets/social-linkedin.svg')}
.social-linkedin .social-mark{background:#0a66c2;-webkit-mask-size:120%;mask-size:120%}
.social-tiktok{--social-mask:url('assets/social-tiktok.svg')}
@media(max-width:760px){.bull-social{max-width:28px}}
.bull-reaction{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:45px;height:45px;margin:-22.5px 0 0 -22.5px;color:#bad3ff;background:#28476bb8;border:1px solid #bad3ff52;border-radius:50%;box-shadow:0 8px 18px #0002,inset 0 1px 0 #e1fff32b;opacity:0;pointer-events:none;will-change:transform,opacity}
.bull-reaction::after{content:"";position:absolute;inset:-2px;border:1px solid currentColor;border-radius:50%;opacity:var(--bubble-pop,0);transform:scale(calc(1 + var(--bubble-pop,0)*.6))}
.bull-reaction svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bull-reaction.heart{background:#794651a6;color:#efb4b6;border-color:#efb4b65c}
.bull-reaction.heart svg{fill:currentColor;stroke-width:0}
.bull-reaction.like-word{width:62px;height:35px;margin:-17.5px 0 0 -31px;border-radius:18px;font:500 13px/1 Satoshi;letter-spacing:0;gap:6px}
.bull-reaction.like-word svg{width:14px;height:14px}
.bull-reaction.small{width:31px;height:31px;margin:-15.5px 0 0 -15.5px}
.bull-reaction.small svg{width:16px;height:16px}
.bull-phase{position:absolute;left:50%;top:max(94%,calc(90% + 24px));width:200px;height:20px;margin-left:-100px;text-align:center;pointer-events:none;z-index:4}
.bull-phase>span{position:absolute;inset:0;font:400 12px/20px Satoshi;letter-spacing:0;color:#b4ccbf;opacity:0;white-space:nowrap}
@media(max-width:760px){
 .bull-provider{--icon-size:30px}
 .bull-phase{top:94%}
 .bull-phase>span{font-size:10px}
}
@media(max-width:360px){.bull-provider{--icon-size:27px}}

/* Immediate, complete tools composition also works without JavaScript. */
.js-ready .hero-emblem{animation:none;opacity:1;transform:none}
.bull-rotor{transform:scale(.78)}
.bull-provider.codex{left:7%;top:50%}
.bull-provider.anthropic{left:27%;top:10%}
.bull-provider.grok{left:73%;top:10%}
.bull-provider.gemini{left:93%;top:50%}
.bull-provider.deepseek{left:73%;top:90%}
.bull-provider.meta{left:27%;top:90%}
.bull-phase>span:first-child{opacity:1}
.bull-stories{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;fill:none;stroke:#b1d7c5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bull-stories [data-hero-story],.bull-stories [data-hero-data]{opacity:0}
.bull-stories text{fill:#c2d9cc;stroke:none;text-anchor:middle;font:400 15px Satoshi,sans-serif}
.bull-stories .story-wire{stroke:#779b93;stroke-opacity:.42}
.bull-stories .api-node{fill:#0b1b21}
.bull-stories .api-node text{fill:#b4d5c5}
.bull-stories .api-packets,.bull-stories .data-packets{fill:#b6f3d2;stroke:none}
.bull-stories .data-row{stroke:#aedac4;stroke-width:2.5}
.bull-stories .model-nodes circle{fill:#b6e6cd;stroke:#d8f2e2;stroke-width:1}
.bull-stories .story-paper{fill:#c0e7d1;stroke:#ddf2e3}
.bull-stories .agent-draft,.bull-stories .product-packet{stroke:#31594e}
.bull-stories .agent-output rect{fill:#102a2d}
.bull-stories .product-window{fill:#0b1e25;stroke:#a5cbb7}
.bull-stories .product-chrome,.bull-stories .product-sidebar{stroke:#638d7e}
.bull-stories .product-sidebar rect,.bull-stories .product-button{fill:#29554e;stroke:none}
.bull-stories .product-card{stroke:#34564e}
.bull-stories .product-chart{stroke:#b1e8c9;stroke-width:2.2;stroke-dasharray:1}
/* Filled, purposeful details give each chapter its own material and accent. */
.bull-stories .data-sheet{fill:#a6b5dc;stroke:#c7d2ec}
.bull-stories .data-rule{stroke:#647799;stroke-width:1}
.bull-stories .data-register{fill:#4e6185;stroke:none}
.bull-stories .data-row{stroke:#304665;stroke-width:3}
.bull-stories .model-route{stroke:#a6b5dc;stroke-opacity:.5}
.bull-stories .model-focus{stroke:#a4e4c6;stroke-width:2.3;stroke-dasharray:.24 .76}
.bull-stories .model-nodes circle{stroke:#dcebdc;stroke-width:1;fill:#a4d9be}
.bull-stories .model-nodes circle:nth-child(2n){fill:#a5a9e2;stroke:#cacbf0}
.bull-stories .model-halo{stroke:#a7d8c3;stroke-opacity:.3;stroke-width:1}
.bull-stories .api-node{--endpoint:#a5b4db;--endpoint-dark:#3e5279;fill:none;stroke:var(--endpoint)}
.bull-stories .api-code{--endpoint:#e3b499;--endpoint-dark:#725042}
.bull-stories .api-web{--endpoint:#e5e8dc;--endpoint-dark:#566866}
.bull-stories .api-cloud{--endpoint:#9ed8c0;--endpoint-dark:#3d6c63}
.bull-stories .endpoint-surface{fill:var(--endpoint);stroke:var(--endpoint);stroke-width:1.5}
.bull-stories .endpoint-top{fill:#c3cceb;stroke:var(--endpoint-dark)}
.bull-stories .endpoint-detail{fill:none;stroke:var(--endpoint-dark);stroke-width:1.7}
.bull-stories .endpoint-ready{fill:#c9f1d8;stroke:#1c4141;stroke-width:2}
.bull-stories .api-packets circle:nth-child(1){fill:#b2bce8}
.bull-stories .api-packets circle:nth-child(2){fill:#e8b99e}
.bull-stories .api-packets circle:nth-child(3){fill:#e5e8dc}
.bull-stories .api-packets circle:nth-child(4){fill:#a4e4c6}
.bull-stories .hero-codex{filter:brightness(0) invert(1)}
.bull-stories .agent-input .story-paper{fill:#e4b59a;stroke:#efc9b2}
.bull-stories .agent-input .paper-fold{fill:none;stroke:#b78068}
.bull-stories .agent-input .task-lines{stroke:#76564b;stroke-width:2}
.bull-stories .agent-output rect{fill:#acd9c1;stroke:#d0ebdb}
.bull-stories .output-detail{stroke:#668e7e;stroke-width:1.5}
.bull-stories .agent-check{stroke:#245b4f;stroke-width:3;stroke-dasharray:1}
.bull-stories .agent-draft .story-paper{fill:#eadcc4;stroke:#f5e6cf}
.bull-stories .product-source .product-window{fill:#253445;stroke:#8e9ecc}
.bull-stories .product-window{fill:#e3e8df;stroke:#c5d8cc}
.bull-stories .product-chrome{stroke:#829996;stroke-width:1.2}
.bull-stories .product-source .product-chrome{stroke:#8595b7}
.bull-stories .syntax-brackets{stroke:#afbbe5;stroke-width:2.3}
.bull-stories .syntax-slash{stroke:#e4b69d;stroke-width:2.3}
.bull-stories .syntax-line{stroke:#8fbaa9;stroke-width:2}
.bull-stories .interface-module{stroke:none}
.bull-stories .module-lavender{fill:#96a5cf}
.bull-stories .module-peach{fill:#dcb296}
.bull-stories .module-mint{fill:#8dc4ac}
.bull-stories .product-layout-lines{stroke:#849f94;stroke-width:2}
.bull-stories .product-chart{stroke:#f4f4e9;stroke-width:1.8}
.bull-stories .product-button{fill:#376e60}
.bull-stories .button-detail{stroke:#cce6d7;stroke-width:1.2}
@media(max-width:760px){
 .bull-connectors:not([data-ready]){transform:scale(.78)}
 .bull-provider.codex{left:11.73%}.bull-provider.gemini{left:88.27%}
 .bull-provider.anthropic,.bull-provider.meta{left:29.53%}
 .bull-provider.grok,.bull-provider.deepseek{left:70.47%}
 .bull-provider.anthropic,.bull-provider.grok{top:14.4%}
 .bull-provider.meta,.bull-provider.deepseek{top:85.6%}
 .bull-stories{stroke-width:2}
 .bull-stories text{font-size:22px}
}
.motion-paused .bull-scene{transform:none!important}
@media(prefers-reduced-motion:reduce){.bull-scene{transform:none!important}.bull-rotor,.bull-provider{will-change:auto}}

.hero-stage .hero-mark .bull-provider.codex img{filter:brightness(0) invert(1)}

/* Let the complete composition fill and center within the desktop right column. */
@media(min-width:761px) and (min-height:541px){
 .hero-stage{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:4%}
 .hero-stage .hero-mark{width:min(100%,700px,78svh);align-self:center;justify-self:center}
 .bull-provider{--icon-size:clamp(38px,3.2vw,48px)}
 .bull-phase{top:max(94%,calc(90% + 30px))}
}