/* 02 / news cards — motion pass v10
   The cards use the same 60px masked-feeling rise and easing as the Hero
   slogan. Interior UI motion follows the Figma layer hierarchy and the calm,
   sequential panel reveal seen in Superset's agent picker. */

.news.reveal {
  opacity: 1;
  transform: none;
}

.news-card {
  opacity: 0;
  translate: 0 60px;
  will-change: opacity, translate;
}

.news.is-visible .news-card {
  animation: newsCardRise .78s cubic-bezier(.16,.84,.44,1) both;
}

.news.is-visible .news-card:nth-child(2) { animation-delay: .14s; }

@keyframes newsCardRise {
  from { opacity: 0; translate: 0 60px; }
  to   { opacity: 1; translate: 0 0; }
}

.news-product-demo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Rebuilt from Figma node 963:2175 so Selector, Menu and Nav can move as
   independent layers. Percentages are expressed as container-width units
   against the original 1315 × 1284 component. */
.agent-demo {
  container-type: inline-size;
  right: -.2%;
  top: 20%;
  width: 38.5%;
  aspect-ratio: 1315 / 1284;
  overflow: hidden;
  border: 1px solid rgba(225,225,225,.9);
  border-radius: 6px;
  background: #fefefe;
  box-shadow: 0 5px 14px rgba(0,0,0,.09);
  color: #050505;
  font-family: Inter, Arial, sans-serif;
}

.agent-controls {
  position: absolute;
  left: 5.10cqw;
  top: 2.81cqw;
  width: 17.19cqw !important;
  height: 4.11cqw !important;
}

.agent-selector {
  position: absolute;
  left: 3.50cqw;
  top: 11.56cqw;
  width: 65.48cqw;
  height: 10.88cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.20cqw 0 3.27cqw;
  overflow: hidden;
  border-radius: 3.19cqw;
  background: #f0f0f0;
  box-shadow: 0 .61cqw 1.67cqw rgba(0,0,0,.05);
}

.agent-selector strong {
  font-size: 4.56cqw;
  line-height: 1;
  letter-spacing: -.14cqw;
  white-space: nowrap;
}

.agent-selector strong b { color: #147af5; }
.agent-selector > img { width: 2.74cqw !important; height: 1.83cqw !important; }

.agent-menu {
  position: absolute;
  left: 3.57cqw;
  top: 23.65cqw;
  width: 85.78cqw;
  height: 36.81cqw;
  display: flex;
  flex-direction: column;
  gap: 4.87cqw;
  padding: 4.41cqw 3.80cqw 4.18cqw 5.63cqw;
  overflow: hidden;
  border: .08cqw solid #e6e6e6;
  border-radius: 3.80cqw;
  background: #fefefe;
  box-shadow: 0 1.37cqw 3.35cqw rgba(0,0,0,.09);
}

.agent-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-option span { display: flex; flex-direction: column; gap: 1.14cqw; }
.agent-option strong { color: #630df5; font-size: 4.26cqw; line-height: 1; }
.agent-option--selected strong { color: #147af5; }
.agent-option small { color: #8f8f8f; font-size: 3.50cqw; line-height: 1; }
.agent-option img { width: 3.65cqw !important; height: 3.65cqw !important; }

.agent-nav {
  position: absolute;
  left: 5.78cqw;
  display: flex;
  align-items: center;
  gap: 3.19cqw;
  font-size: 4.26cqw;
  line-height: 1;
  white-space: nowrap;
}

.agent-nav img { width: 3.95cqw !important; height: 3.95cqw !important; }
.agent-nav--scheduled { top: 64.29cqw; }
.agent-nav--sites { top: 74.85cqw; }
/* At the larger, right-aligned crop requested for this card, the selector and
   menu are the focus; lower navigation sits outside the visible composition. */
.agent-demo .agent-nav { display:none; }

.news-card:hover .agent-demo img { transform: none; }

@keyframes selectorSettle {
  from { opacity: 0; translate: 0 2.2cqw; scale: .97; }
  70%  { opacity: 1; translate: 0 -.25cqw; scale: 1.005; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes menuUnfold {
  from { opacity: 0; translate: 0 -1.2cqw; clip-path: inset(0 0 100% 0 round 3.8cqw); }
  to   { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0 round 3.8cqw); }
}

@keyframes uiItemRise {
  from { opacity: 0; translate: 0 2.2cqw; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes chevronNod {
  0%, 100% { rotate: 0deg; }
  45%      { rotate: -180deg; }
}

.news.is-visible .agent-controls { animation: uiItemRise .42s ease both .26s; }
.news.is-visible .agent-selector { animation: selectorSettle .55s cubic-bezier(.16,.84,.44,1) both .38s; }
.news.is-visible .agent-selector > img { animation: chevronNod .62s cubic-bezier(.2,.8,.2,1) both .56s; }
.news.is-visible .agent-menu { animation: menuUnfold .62s cubic-bezier(.16,.84,.44,1) both .68s; }
.news.is-visible .agent-option:first-child { animation: uiItemRise .42s ease both .88s; }
.news.is-visible .agent-option:last-child { animation: uiItemRise .42s ease both 1s; }
.news.is-visible .agent-nav--scheduled { animation: uiItemRise .48s cubic-bezier(.16,.84,.44,1) both 1.12s; }
.news.is-visible .agent-nav--sites { animation: uiItemRise .48s cubic-bezier(.16,.84,.44,1) both 1.25s; }

/* Second card: keep the exact exported website image, then give the browser
   plane a low-amplitude depth drift plus a restrained scan and status pulse. */
.api-demo {
  right: -11.6%;
  top: 20.3%;
  width: 47.05%;
  aspect-ratio: 255 / 186;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  background: #f6f6f6;
  box-shadow: -10px -14px 32px rgba(0,0,0,.04);
}

.api-demo > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform-origin: 50% 55%;
}

.api-scan {
  position: absolute;
  z-index: 2;
  left: 0;
  top: -18%;
  width: 100%;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.45), transparent);
  opacity: 0;
}

.api-pulse {
  position: absolute;
  z-index: 3;
  left: 7%;
  bottom: 7%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00a9ff;
  box-shadow: 0 0 0 0 rgba(0,169,255,.35);
}

@keyframes apiDepth {
  from { scale: 1; translate: 0 0; }
  to   { scale: 1.018; translate: -1% -1%; }
}

@keyframes apiScan {
  0%, 16% { opacity: 0; translate: 0 0; }
  28%     { opacity: .55; }
  68%     { opacity: .18; }
  82%,100%{ opacity: 0; translate: 0 580%; }
}

@keyframes apiPing {
  0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(0,169,255,.28); opacity: .65; }
  72% { box-shadow: 0 0 0 7px rgba(0,169,255,0); opacity: 1; }
}

.news.is-visible .api-demo > img { animation: apiDepth 5.5s ease-in-out 1.1s infinite alternate; }
.news.is-visible .api-scan { animation: apiScan 4.8s ease-in-out 1.25s infinite; }
.news.is-visible .api-pulse { animation: apiPing 3.2s ease-out 1.4s infinite; }

@media (max-width: 480px) {
  .agent-demo { right: -.5%; top: 20%; width: 42%; }
  .api-demo { right: -23%; top: 18%; width: 54%; }
}

/* 05 / AI Studio + Step Code — light interactive windows inspired by the
   two-panel product demo supplied by the user. Motion is hover-driven: the
   shell lifts subtly, then content settles in with short staggered delays. */
.xai-showcase {
  isolation: isolate;
  border: 1px solid #e2e2df;
  background: #f7f7f5 !important;
}

.xai-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(0,169,255,.07), transparent 24%),
    radial-gradient(circle at 82% 75%, rgba(99,13,245,.045), transparent 28%);
  opacity: .6;
  transition: opacity .6s ease, scale .8s cubic-bezier(.16,.84,.44,1);
}

.product-card:hover .xai-showcase::before { opacity: 1; scale: 1.08; }

.xai-window {
  position: absolute;
  z-index: 1;
  inset: 7% 6%;
  overflow: hidden;
  border: 1px solid #dededb;
  border-radius: 18px;
  background: rgba(255,255,254,.94);
  box-shadow: 0 18px 45px rgba(30,30,30,.07);
  color: #252525;
  transition: transform .7s cubic-bezier(.16,.84,.44,1), box-shadow .7s ease;
}

.product-card:hover .xai-window {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 28px 65px rgba(30,30,30,.12);
}

.xai-bubble {
  position: absolute;
  padding: 3.2% 4.2%;
  border: 1px solid #e1e1de;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 14px rgba(0,0,0,.025);
  font-family: var(--sans);
  font-size: clamp(9px,1.02vw,15px);
  line-height: 1.45;
  transition: opacity .52s ease, transform .68s cubic-bezier(.16,.84,.44,1), box-shadow .52s ease;
}

.xai-bubble--question { right: 5%; max-width: 57%; color: #2e2e2e; }
.xai-bubble--answer { left: 5%; width: 70%; color: #858585; }
.xai-bubble.q1 { top: 5%; }
.xai-bubble.a1 { top: 24%; }
.xai-bubble.q2 { top: 45%; }
.xai-bubble.a2 { top: 63%; }
.xai-bubble.q3 { top: 85%; filter: blur(3px); opacity: .35; }

.xai-chat-window .xai-bubble { animation: chatBubbleLoop 6s cubic-bezier(.16,.84,.44,1) infinite; }
.xai-chat-window .a1 { animation-delay: -.8s; }
.xai-chat-window .q2 { animation-delay: -1.6s; }
.xai-chat-window .a2 { animation-delay: -2.4s; }
.xai-chat-window .q3 { animation-delay: -3.2s; }
.product-card:hover .xai-chat-window .xai-bubble { animation-duration: 4.4s; box-shadow: 0 8px 22px rgba(0,0,0,.045); }

@keyframes chatBubbleLoop {
  0%,100% { opacity:.38; translate:0 11px; }
  16%     { opacity:1; translate:0 0; }
  68%     { opacity:1; translate:0 0; }
  84%     { opacity:.48; translate:0 -7px; }
}

.xai-window-footer {
  position: absolute;
  z-index: 4;
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: clamp(11px,1.32vw,18px);
  color: #565656;
}

.xai-code-window {
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  background: #fcfcfa;
}

.xai-codebar {
  height: 14%;
  display: grid;
  grid-template-columns:auto 1fr auto;
  align-items: center;
  gap: 5%;
  padding: 0 4%;
  border-bottom: 1px solid #e8e8e5;
  background: #f3f3f0;
  color: #777;
  font-size: clamp(8px,.95vw,13px);
}

.xai-dots { display: flex; gap: 4px; }
.xai-dots i { width: 7px; height: 7px; border-radius: 50%; }
.xai-dots i:nth-child(1){background:#ff615a}.xai-dots i:nth-child(2){background:#ffbd2e}.xai-dots i:nth-child(3){background:#28c840}
.xai-progress { position:relative;display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.xai-progress::before { content:""; width: 42px; height: 8px; background:#ddd; }
.xai-progress i { position:absolute;left:0;width: 8px; height: 8px; margin-left:0; background:#4a4a4a; animation:progressLoop 4.8s cubic-bezier(.16,.84,.44,1) infinite; }
.xai-progress b { font-weight:400; }
.product-card:hover .xai-progress i { animation-duration:3.4s; }

@keyframes progressLoop {
  0%,100% { width:8px;opacity:.45; }
  48%,72% { width:27px;opacity:1; }
}

.xai-file-title {
  display:flex;
  align-items:center;
  gap:2.6%;
  height:14%;
  padding:0 6%;
  font-size:clamp(8px,1vw,14px);
}
.xai-file-title i { width:7px;height:7px;rotate:45deg;background:#8666df; }
.xai-file-title code { color:#5d8d49; }

.xai-code-lines { font-size:clamp(7px,.9vw,13px); line-height:1.55; }
.xai-code-lines>div { display:grid;grid-template-columns:10% 1fr;padding:0 5%;animation:codeRowLoop 5.6s cubic-bezier(.16,.84,.44,1) infinite; }
.xai-code-lines span { color:#8e8e8e; }
.xai-code-lines code { overflow:hidden;white-space:nowrap; }
.xai-code-lines .line-add { background:#edf5e9; }
.xai-code-lines .line-remove { background:#f8e8ea; }
.xai-code-lines>div:nth-child(2){animation-delay:-.35s}.xai-code-lines>div:nth-child(3){animation-delay:-.7s}.xai-code-lines>div:nth-child(4){animation-delay:-1.05s}.xai-code-lines>div:nth-child(5){animation-delay:-1.4s}
.product-card:hover .xai-code-lines>div { animation-duration:4s; }

@keyframes codeRowLoop {
  0%,100% { opacity:.34;translate:8px 0; }
  18%,72% { opacity:1;translate:0 0; }
  88%     { opacity:.52;translate:-3px 0; }
}

.xai-task {
  display:flex;
  align-items:center;
  gap:3%;
  margin-top:3%;
  padding:3.4% 5%;
  border-block:1px solid #e4e4e1;
  background:#f2f2ef;
  font-size:clamp(7px,.9vw,13px);
  animation:taskBarLoop 5s cubic-bezier(.16,.84,.44,1) infinite;
}
.xai-task b { color:#5c83dc;font-size:1.5em; }
.product-card:hover .xai-task { animation-duration:3.6s; }

@keyframes taskBarLoop {
  0%,100% { opacity:.55;translate:0 8px; }
  24%,76% { opacity:1;translate:0 0; }
}

.xai-thinking { display:flex;align-items:center;gap:3%;padding:4% 6%;color:#8a8a88;font-size:clamp(7px,.85vw,12px); }
.xai-thinking i { width:6px;height:6px;border-radius:50%;background:#8666df;box-shadow:8px 0 0 rgba(134,102,223,.4);animation:thinkingPulse 1.4s ease-in-out infinite; }
@keyframes thinkingPulse { 50%{opacity:.35;transform:scale(.72)} }

@media (max-width: 800px) {
  .xai-window { inset: 6%; border-radius: 14px; }
  .xai-bubble { border-radius: 10px; }
  .xai-dots i { width: 5px; height: 5px; }
  .xai-progress b { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .xai-showcase::before,.xai-window,.xai-bubble,.xai-progress i,.xai-code-lines>div,.xai-task { transition:none!important;transform:none!important;opacity:1!important; }
  .xai-thinking i { animation:none; }
}

@media (prefers-reduced-motion: reduce) {
  .news-card { opacity: 1; translate: 0 0; }
  .news.is-visible .news-card,
  .news.is-visible .agent-controls,
  .news.is-visible .agent-selector,
  .news.is-visible .agent-selector > img,
  .news.is-visible .agent-menu,
  .news.is-visible .agent-option,
  .news.is-visible .agent-nav,
  .news.is-visible .api-demo > img,
  .news.is-visible .api-scan,
  .news.is-visible .api-pulse { animation: none; }
}