/* ========================================================================== XAIAgent — Motion & High-Tech Layer Loaded AFTER style.css. Purely additive: no existing selector is overridden except where a .mo-* / .tech-* class is explicitly applied. ========================================================================== */ :root{ --mo-cyan:#22d3ee; --mo-violet:#7c5cff; --mo-blue:var(--blue); --mo-deep:#06070d; --mo-deep-2:#0b0e1a; --mo-glass:rgba(255,255,255,.06); --mo-glass-line:rgba(255,255,255,.12); --mo-ease:cubic-bezier(.22,.68,0,1.01); } /* ---------- 1. Scroll progress bar ---------- */ .mo-progress{ position:fixed;top:0;left:0;height:2px;width:100%;z-index:200; background:transparent;pointer-events:none; } .mo-progress span{ display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--mo-blue),var(--mo-violet),var(--mo-cyan)); box-shadow:0 0 12px rgba(124,92,255,.6); transition:width .08s linear; } /* ---------- 2. Scroll reveal ---------- Hidden states are scoped to .mo-js, which an inline script adds and removes again if motion.js never initialises. Without JS nothing is hidden. */ .mo-js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--mo-ease), transform .7s var(--mo-ease); will-change:opacity,transform; } .mo-js [data-reveal="left"]{transform:translateX(-26px)} .mo-js [data-reveal="right"]{transform:translateX(26px)} .mo-js [data-reveal="zoom"]{transform:scale(.94)} .mo-js [data-reveal="blur"]{filter:blur(10px);transform:translateY(14px)} .mo-js [data-reveal].is-in{ opacity:1;transform:none;filter:none; } /* Staggered children */ .mo-js [data-stagger] > *{ opacity:0;transform:translateY(20px); transition:opacity .6s var(--mo-ease), transform .6s var(--mo-ease); } .mo-js [data-stagger].is-in > *{opacity:1;transform:none} /* ---------- 3. Animated hero aurora / mesh ---------- */ .mo-hero{position:relative;overflow:hidden;isolation:isolate} .mo-hero > .wrap{position:relative;z-index:3} .mo-aurora{ position:absolute;inset:-30% -10%;z-index:0;pointer-events:none; filter:blur(60px);opacity:.55; } .mo-aurora i{ position:absolute;display:block;border-radius:50%; mix-blend-mode:multiply; } .mo-aurora i:nth-child(1){ width:46vw;height:46vw;left:-4%;top:2%; background:radial-gradient(circle at 30% 30%, rgba(36,83,234,.55), transparent 62%); animation:mo-float-a 22s var(--mo-ease) infinite alternate; } .mo-aurora i:nth-child(2){ width:40vw;height:40vw;right:-2%;top:-8%; background:radial-gradient(circle at 60% 40%, rgba(124,92,255,.45), transparent 62%); animation:mo-float-b 27s var(--mo-ease) infinite alternate; } .mo-aurora i:nth-child(3){ width:38vw;height:38vw;left:32%;bottom:-18%; background:radial-gradient(circle at 50% 50%, rgba(34,211,238,.40), transparent 62%); animation:mo-float-c 19s var(--mo-ease) infinite alternate; } @keyframes mo-float-a{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(8vw,4vh,0) scale(1.18)} } @keyframes mo-float-b{ 0%{transform:translate3d(0,0,0) scale(1.05)} 100%{transform:translate3d(-7vw,6vh,0) scale(.92)} } @keyframes mo-float-c{ 0%{transform:translate3d(0,0,0) scale(.95)} 100%{transform:translate3d(5vw,-6vh,0) scale(1.2)} } /* Technical grid overlay */ .mo-grid{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image: linear-gradient(to right, rgba(20,22,28,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,22,28,.055) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); animation:mo-grid-drift 40s linear infinite; } @keyframes mo-grid-drift{ from{background-position:0 0, 0 0} to{background-position:56px 56px, 56px 56px} } /* Scan line sweep */ .mo-scan{ position:absolute;left:0;right:0;top:0;height:180px;z-index:2;pointer-events:none; background:linear-gradient(180deg, transparent, rgba(36,83,234,.06) 45%, transparent); animation:mo-scan 7s var(--mo-ease) infinite; } @keyframes mo-scan{ 0%{transform:translateY(-180px);opacity:0} 12%{opacity:1} 70%{opacity:1} 100%{transform:translateY(120vh);opacity:0} } /* ---------- 4. Dark "tech" hero variant (tech section) ---------- */ .tech-hero{ background:radial-gradient(ellipse 110% 80% at 50% -10%, #182a5e 0%, var(--mo-deep-2) 48%, var(--mo-deep) 100%); color:#fff;border-bottom:1px solid rgba(255,255,255,.08); position:relative;overflow:hidden;isolation:isolate; padding:74px 0 58px; } .tech-hero > .wrap{position:relative;z-index:3} .tech-hero h1{color:#fff} .tech-hero .sub{color:#a9b3c9} .tech-hero .crumb, .tech-hero .crumb a{color:#8590a8} .tech-hero .crumb a:hover{color:#fff} .tech-hero .mo-grid{ background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); } .tech-hero .mo-aurora{opacity:.75;filter:blur(70px)} .tech-hero .mo-aurora i{mix-blend-mode:screen} .tech-hero .mo-scan{background:linear-gradient(180deg, transparent, rgba(34,211,238,.09) 45%, transparent)} /* Glowing eyebrow pill for dark heroes */ .eyebrow.mo-glow{ background:rgba(124,92,255,.14); color:#c9d4ff; border:1px solid rgba(124,92,255,.35); box-shadow:0 0 0 0 rgba(124,92,255,.5); animation:mo-pulse 3.2s ease-out infinite; } @keyframes mo-pulse{ 0%{box-shadow:0 0 0 0 rgba(124,92,255,.42)} 70%{box-shadow:0 0 0 14px rgba(124,92,255,0)} 100%{box-shadow:0 0 0 0 rgba(124,92,255,0)} } /* Live status dot */ .mo-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:#22d3ee;margin-right:7px;vertical-align:middle; box-shadow:0 0 0 0 rgba(34,211,238,.7); animation:mo-blink 2s ease-out infinite; } @keyframes mo-blink{ 0%{box-shadow:0 0 0 0 rgba(34,211,238,.7)} 70%{box-shadow:0 0 0 9px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)} } /* ---------- 5. Gradient / shimmer text ---------- */ .mo-gradient-text{ background:linear-gradient(96deg,var(--mo-blue) 0%,var(--mo-violet) 42%,var(--mo-cyan) 78%,var(--mo-blue) 100%); background-size:260% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:mo-shimmer 9s linear infinite; } @keyframes mo-shimmer{ from{background-position:0% 50%} to{background-position:260% 50%} } /* Typewriter caret */ .mo-type{border-right:2px solid var(--mo-cyan);padding-right:3px;animation:mo-caret 1s step-end infinite} @keyframes mo-caret{50%{border-color:transparent}} /* ---------- 6. Tech cards (article cards / spec cards) ---------- */ .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tech-grid.two{grid-template-columns:repeat(2,1fr)} .tech-card{ position:relative;display:block;overflow:hidden; border:1px solid var(--line);border-radius:16px;background:#fff; padding:0;color:var(--ink); transition:transform .45s var(--mo-ease), box-shadow .45s var(--mo-ease), border-color .3s ease; will-change:transform; } .tech-card:hover{ text-decoration:none;transform:translateY(-6px); border-color:rgba(36,83,234,.4); box-shadow:0 18px 44px rgba(20,22,28,.13); } /* cursor spotlight */ .tech-card::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(36,83,234,.10), transparent 66%); transition:opacity .35s ease; } .tech-card:hover::before{opacity:1} .tech-card-visual{ position:relative;height:132px;overflow:hidden; background:radial-gradient(ellipse 120% 100% at 30% 0%, #1e2f66, #0b0e1a 70%); display:flex;align-items:center;justify-content:center; } .tech-card-visual .glyph{ font-size:44px;line-height:1;position:relative;z-index:2; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); transition:transform .5s var(--mo-ease); } .tech-card:hover .tech-card-visual .glyph{transform:scale(1.14) rotate(-4deg)} .tech-card-visual::after{ content:"";position:absolute;inset:0;z-index:1; background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%); } .tech-card-body{padding:20px 22px 22px;position:relative;z-index:2} .tech-card-body h3{margin:8px 0 7px;font-size:17.5px;letter-spacing:-.01em;color:var(--ink)} .tech-card-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.6} /* Status / kind pills */ .mo-pill{ display:inline-flex;align-items:center;gap:6px; font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; padding:5px 10px;border-radius:999px; } .mo-pill.rumor{background:#fff3de;color:#95660f;border:1px solid #f0dca6} .mo-pill.shipping{background:#e8f7ef;color:var(--good);border:1px solid #b9e6cd} .mo-pill.expected{background:#eef1ff;color:#4a52c9;border:1px solid #cdd4ff} .mo-pill.dark{background:rgba(255,255,255,.08);color:#c9d4ff;border:1px solid rgba(255,255,255,.16)} /* ---------- 7. Spec strip with animated counters ---------- */ .mo-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden; } .mo-stats .stat{background:#fff;padding:20px 18px} .mo-stats .stat b{ display:block;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin-bottom:4px; font-variant-numeric:tabular-nums; } .mo-stats .stat span{color:var(--muted);font-size:12.5px;font-weight:600} .tech-hero .mo-stats{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)} .tech-hero .mo-stats .stat{background:rgba(255,255,255,.045);backdrop-filter:blur(8px)} .tech-hero .mo-stats .stat b{color:#fff} .tech-hero .mo-stats .stat span{color:#9aa5bd} /* ---------- 8. Ticker / marquee ---------- */ .mo-ticker{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--bg-soft);overflow:hidden;padding:11px 0; } .mo-ticker-track{ display:flex;gap:0;width:max-content; animation:mo-marquee 42s linear infinite; } .mo-ticker:hover .mo-ticker-track{animation-play-state:paused} .mo-ticker-track a,.mo-ticker-track span{ display:inline-flex;align-items:center;gap:9px;padding:0 22px; font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap; letter-spacing:.01em; } .mo-ticker-track a:hover{color:var(--blue);text-decoration:none} .mo-ticker-track .sep{color:var(--line);padding:0} @keyframes mo-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ---------- 9. XAIWebsites promo (in-article + sticky) ---------- */ .xw-promo{ position:relative;overflow:hidden;isolation:isolate; border-radius:18px;padding:30px 32px;margin:34px 0; background:radial-gradient(ellipse 110% 130% at 12% 0%, #22346e 0%, #0d1122 55%, #07090f 100%); color:#fff;border:1px solid rgba(255,255,255,.10); } .xw-promo::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse 80% 100% at 80% 50%, #000, transparent 72%); -webkit-mask-image:radial-gradient(ellipse 80% 100% at 80% 50%, #000, transparent 72%); } .xw-promo > *{position:relative;z-index:2} .xw-promo .kicker{ font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:#8fa2ff;margin-bottom:10px;display:block; } .xw-promo h3{margin:0 0 9px;font-size:23px;letter-spacing:-.015em;color:#fff} .xw-promo p{margin:0 0 18px;color:#adb7cd;font-size:15px;max-width:560px} .xw-promo .xw-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .xw-promo .btn-primary{ background:linear-gradient(96deg,var(--mo-blue),var(--mo-violet)); background-size:200% 100%;border:none; box-shadow:0 8px 26px rgba(36,83,234,.42); transition:background-position .6s var(--mo-ease), transform .25s var(--mo-ease), box-shadow .3s ease; } .xw-promo .btn-primary:hover{ background-position:100% 50%;transform:translateY(-2px); box-shadow:0 12px 34px rgba(124,92,255,.5); } .xw-promo .xw-note{font-size:13px;color:#8590a8} .xw-promo .xw-stars{color:#ffc65c;font-weight:700;letter-spacing:1.5px;font-size:14px} /* Sticky bottom CTA bar */ .xw-bar{ position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%); z-index:150;max-width:min(720px,calc(100% - 32px));width:max-content; display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:11px 12px 11px 20px;border-radius:999px; background:rgba(10,13,20,.90); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 44px rgba(0,0,0,.34); transition:transform .6s var(--mo-ease), opacity .4s ease; opacity:0; } .xw-bar.is-in{transform:translate(-50%,0);opacity:1} .xw-bar p{margin:0;color:#dfe4f0;font-size:13.5px;font-weight:600;white-space:nowrap} .xw-bar p b{color:#fff} .xw-bar .xw-bar-cta{ background:linear-gradient(96deg,var(--mo-blue),var(--mo-violet)); color:#fff;font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:999px; white-space:nowrap;transition:transform .25s var(--mo-ease),box-shadow .3s ease; } .xw-bar .xw-bar-cta:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,92,255,.45)} .xw-bar .xw-bar-close{ background:transparent;border:none;color:#7f8aa3;font-size:19px;line-height:1; cursor:pointer;padding:4px 8px;border-radius:50%; } .xw-bar .xw-bar-close:hover{color:#fff;background:rgba(255,255,255,.08)} /* Nav CTA — gradient upgrade for the XAIWebsites link */ .nav-cta.xw{ background:linear-gradient(96deg,var(--mo-blue),var(--mo-violet)) !important; background-size:200% 100% !important; transition:background-position .6s var(--mo-ease),box-shadow .3s ease; box-shadow:0 4px 16px rgba(36,83,234,.30); } .nav-cta.xw:hover{background-position:100% 50% !important;box-shadow:0 6px 22px rgba(124,92,255,.45)} /* ---------- 10. Article body enhancements ---------- */ .tech-body{max-width:760px;font-size:16px;line-height:1.75} .tech-body h2{ font-size:23px;letter-spacing:-.015em;margin:38px 0 12px;padding-top:4px; scroll-margin-top:90px; } .tech-body h2::before{ content:"";display:block;width:34px;height:3px;border-radius:2px;margin-bottom:14px; background:linear-gradient(90deg,var(--mo-blue),var(--mo-cyan)); } .tech-body h3{font-size:17.5px;margin:26px 0 8px;scroll-margin-top:90px} .tech-body p{margin:0 0 15px} .tech-body ul{margin:0 0 18px;padding-left:20px} .tech-body li{margin-bottom:8px} /* Spec table */ .spec-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:22px 0;background:#fff} .spec-table th,.spec-table td{padding:13px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top} .spec-table th{background:var(--bg-soft);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)} .spec-table td:first-child{font-weight:700;width:38%} .spec-table tr:last-child td{border-bottom:none} .spec-table tr{transition:background .2s ease} .spec-table tbody tr:hover{background:#f8faff} /* Confidence meter */ .conf{display:flex;align-items:center;gap:10px;margin:6px 0 0} .conf-track{flex:1;max-width:180px;height:6px;border-radius:999px;background:var(--line);overflow:hidden} .conf-fill{ display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--mo-blue),var(--mo-cyan)); transition:width 1.2s var(--mo-ease); } .conf-label{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} /* Callout */ .mo-callout{ border-left:3px solid var(--mo-blue); background:linear-gradient(90deg,rgba(36,83,234,.055),transparent 70%); padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0;font-size:14.5px; } .mo-callout b{color:var(--ink)} /* Rumor-source note */ .mo-sourcing{ font-size:13px;color:var(--muted);background:var(--bg-soft); border:1px solid var(--line);border-left:3px solid #e0a93c; border-radius:0 10px 10px 0;padding:14px 18px;margin:24px 0; } /* Timeline */ .mo-timeline{list-style:none;padding:0;margin:22px 0;position:relative} .mo-timeline::before{ content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--mo-blue),var(--mo-violet),transparent); } .mo-timeline li{position:relative;padding:0 0 20px 30px;font-size:14.5px} .mo-timeline li::before{ content:"";position:absolute;left:2px;top:7px;width:12px;height:12px;border-radius:50%; background:#fff;border:2px solid var(--mo-blue); } .mo-timeline li b{display:block;font-size:13px;color:var(--mo-blue);letter-spacing:.02em;margin-bottom:2px} /* ---------- 11. Magnetic / lift buttons ---------- */ .btn{transition:transform .25s var(--mo-ease), box-shadow .3s ease, background .25s ease} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(36,83,234,.32)} .btn-secondary:hover{transform:translateY(-2px)} .tech-hero .btn-secondary{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.20)} .tech-hero .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)} /* ---------- 12. Footer / misc dark bits ---------- */ .tech-foot-note{font-size:13px;color:var(--muted);margin-top:8px} /* ---------- 13. Responsive ---------- */ @media(max-width:960px){ .tech-grid{grid-template-columns:repeat(2,1fr)} .mo-stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .tech-grid,.tech-grid.two{grid-template-columns:1fr} .xw-promo{padding:24px 20px} .xw-promo h3{font-size:19px} .xw-bar{width:calc(100% - 24px);border-radius:16px;padding:12px 14px;bottom:12px} .xw-bar p{white-space:normal;font-size:13px} .tech-hero{padding:52px 0 42px} .mo-aurora{filter:blur(44px)} } /* ---------- 14. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .mo-js [data-reveal],.mo-js [data-stagger] > *{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important} .mo-aurora i,.mo-grid,.mo-scan,.mo-ticker-track,.mo-gradient-text, .eyebrow.mo-glow,.mo-dot,.mo-type{animation:none !important} .mo-scan{display:none} .xw-bar{transition:none} .tech-card:hover,.btn-primary:hover,.btn-secondary:hover{transform:none} .conf-fill{transition:none} html{scroll-behavior:auto} } html{scroll-behavior:smooth} /* ---------- 15. Nav: secondary link next to the XAIWebsites CTA ---------- */ .nav-sub{ color:var(--muted) !important;font-weight:600;font-size:13.5px; padding:9px 4px;white-space:nowrap;transition:color .2s ease; } .nav-sub:hover{color:var(--ink) !important;text-decoration:none} @media(max-width:1080px){ .nav-sub{display:none} } /* Below this the CTA pushes the hamburger off-screen. Mobile still reaches XAIWebsites via the drawer link, the sticky bar and the in-page promos. */ @media(max-width:560px){ .nav-cta.xw{display:none} } /* Index hero: XAIWebsites trust line */ .xw-hero-badge{ display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap; margin-top:24px;padding:10px 16px 10px 12px;border-radius:999px; background:linear-gradient(96deg,rgba(36,83,234,.09),rgba(124,92,255,.09)); border:1px solid rgba(36,83,234,.20);font-size:13.5px;font-weight:600;color:var(--ink); } .xw-hero-badge .xw-mark{ width:26px;height:26px;border-radius:7px;flex-shrink:0; background:linear-gradient(135deg,var(--mo-blue),var(--mo-violet)); color:#fff;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;letter-spacing:-.02em; } .xw-hero-badge a{font-weight:800} .xw-hero-badge .xw-hero-stars{color:#c8962c;letter-spacing:1.5px}