/* ==========================================================================
   AI in My Workflow, step 1: "Prototyping In Code" (Figma -> Cursor).
   Two stacked windows swap places while RMX Foundations lands in Cursor.
   Scoped: every class and keyframe carries an aa- prefix. All sizes are in
   --u (1/1444 of the stage width), so the scene scales with its slide.
   Plays whenever its slide becomes .is-active (js/influence-stepper.js), so
   it restarts with the step. The base styles are the FINAL frame, so reduced
   motion (no animations) and a failed load both show the finished scene.
   Product UI stays light in dark mode on purpose, like the bento.
   ========================================================================== */
.aa {
  --u: calc(100cqw / 1444);
  position: absolute; inset: 0; container-type: inline-size; overflow: hidden;
  background: #f3f5f9; color-scheme: light;
  font-family: Roboto, system-ui, sans-serif;
}
.aa, .aa * { box-sizing: border-box; }

.aa-win {
  position: absolute; left: calc(60 * var(--u)); top: calc(300 * var(--u));
  width: calc(1100 * var(--u)); height: calc(760 * var(--u));
  border-radius: calc(16 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(19, 49, 76, .14), 0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-12 * var(--u)) rgba(19, 49, 76, .28);
  display: flex; flex-direction: column;
}
.aa-bar {
  height: calc(64 * var(--u)); flex: none; display: flex; align-items: center;
  gap: calc(14 * var(--u)); padding: 0 calc(26 * var(--u));
  font-weight: 600; font-size: calc(28 * var(--u));
}
.aa-bar img { height: calc(36 * var(--u)); width: auto; display: block; }
.aa-cursor .aa-bar img { filter: invert(1); }

/* Final state: Cursor in front, Figma tucked behind up and to the right. */
.aa-figma { z-index: 1; transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.94); background: #fff; }
.aa-cursor { z-index: 2; background: #181818; }
.aa-figma .aa-bar { background: #fff; border-bottom: 1px solid #e5e5e5; color: #1e1e1e; }
.aa-cursor .aa-bar { background: #141414; border-bottom: 1px solid #2a2a2a; color: #e6e6e6; }

/* ----- Figma canvas ----- */
.aa-canvas {
  flex: 1; position: relative; background: #e9e9ec; display: grid; place-items: center;
  background-image: radial-gradient(#d3d3d9 calc(1.5 * var(--u)), transparent calc(2 * var(--u)));
  background-size: calc(28 * var(--u)) calc(28 * var(--u));
}
.aa-comp { position: relative; width: calc(880 * var(--u)); display: grid; box-shadow: 0 0 0 calc(3 * var(--u)) #0d99ff; }
.aa-comp img { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.aa-comp .aa-pin { opacity: 0; }
.aa-tag {
  position: absolute; left: 0; top: calc(-44 * var(--u)); background: #0d99ff; color: #fff;
  font-weight: 500; font-size: calc(20 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: calc(4 * var(--u)); white-space: nowrap;
}

/* ----- Cursor editor ----- */
.aa-tabs {
  height: calc(56 * var(--u)); flex: none; display: flex; align-items: stretch; gap: calc(6 * var(--u));
  padding: calc(8 * var(--u)) calc(20 * var(--u)) 0; background: #181818; border-bottom: 1px solid #2a2a2a;
  font-size: calc(22 * var(--u)); color: #9a9a9a;
}
.aa-tabs span { display: flex; align-items: center; padding: 0 calc(16 * var(--u)); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; white-space: nowrap; }
.aa-tabs .aa-on { background: #262626; color: #f2f2f2; font-weight: 600; }
.aa-tabs i { font-style: italic; }
.aa-crumb { height: calc(54 * var(--u)); flex: none; display: flex; align-items: center; padding: 0 calc(32 * var(--u)); gap: calc(26 * var(--u)); color: #8a8a8a; font-size: calc(23 * var(--u)); border-bottom: 1px solid #262626; }
.aa-crumb b { color: #e6e6e6; font-weight: 500; }
.aa-code {
  flex: 1; padding: calc(16 * var(--u)) 0; font: 400 calc(24 * var(--u)) / calc(46 * var(--u)) ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e4e4e4; overflow: hidden;
}
.aa-ln { display: flex; height: calc(46 * var(--u)); white-space: pre; }
.aa-ln b { flex: none; width: calc(96 * var(--u)); padding-right: calc(34 * var(--u)); text-align: right; font-weight: 400; color: #6e6e6e; }
.aa-ln .aa-cm { color: #8a8a8a; font-style: italic; }
.aa-ln .aa-br { color: #f5c542; }
.aa-ln .aa-v { color: #e8b36a; }
.aa-ln .aa-sw { display: inline-block; width: calc(19 * var(--u)); height: calc(19 * var(--u)); margin: 0 calc(8 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(2 * var(--u)); border: 1px solid rgba(255, 255, 255, .55); background: var(--c); align-self: center; }
.aa-ln .aa-sp { display: inline-block; height: calc(14 * var(--u)); margin: 0 calc(12 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(3 * var(--u)); background: #0d99ff; align-self: center; width: calc(var(--px) * 3.2 * var(--u)); transform-origin: left center; }
.aa-ln .aa-in { padding-left: calc(24 * var(--u)); }
.aa-ln:first-child { background: #202020; }

/* ----- "1:1 match" ----- */
.aa-match {
  position: absolute; right: calc(36 * var(--u)); bottom: calc(34 * var(--u)); display: flex; align-items: center;
  gap: calc(14 * var(--u)); height: calc(68 * var(--u)); padding: 0 calc(28 * var(--u)) 0 calc(12 * var(--u));
  background: #fff; color: #1e1e1e; border-radius: calc(40 * var(--u)); font-weight: 600; font-size: calc(30 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .35);
}
.aa-match svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: block; }
.aa-match circle { fill: #34a853; }
.aa-match path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ----- motion: only while the slide is active ----- */
@keyframes aa-in { from { opacity: 0; translate: 0 calc(24 * var(--u)); } }
@keyframes aa-swap-fig {
  0%, 40% { transform: none; filter: none; z-index: 2; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  47% { transform: translate(calc(-170 * var(--u)), calc(60 * var(--u))) scale(.97); filter: brightness(.97); z-index: 2; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  47.01% { z-index: 1; }
  54.5%, 100% { transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.94); z-index: 1; }
}
@keyframes aa-swap-cur {
  0%, 40% { transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.9); z-index: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  47% { transform: translate(calc(110 * var(--u)), calc(-60 * var(--u))) scale(.97); filter: brightness(.96); z-index: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  47.01% { z-index: 2; }
  54.5%, 100% { transform: none; filter: none; z-index: 2; }
}
@keyframes aa-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aa-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aa-line { from { opacity: 0; translate: calc(-14 * var(--u)) 0; } }
@keyframes aa-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes aa-grow { from { scale: 0 1; } }
@keyframes aa-draw { from { stroke-dashoffset: 1; } }

.cs-influence-slide.is-active .aa-figma { animation: aa-in 0.59s ease-out both, aa-swap-fig 6.5s linear both; }
.cs-influence-slide.is-active .aa-cursor { animation: aa-in 0.59s 0.12s ease-out both, aa-swap-cur 6.5s linear both; }
.cs-influence-slide.is-active .aa-comp .aa-pin { animation: aa-fade-out 0.35s 1.3s both; }
.cs-influence-slide.is-active .aa-comp .aa-shape { animation: aa-fade-in 0.35s 1.3s both; }
.cs-influence-slide.is-active .aa-ln { animation: aa-line 0.35s calc(3.6s + var(--i) * 0.12s) both; }
.cs-influence-slide.is-active .aa-sw { animation: aa-pop 0.35s calc(3.84s + var(--i) * 0.12s) both; }
.cs-influence-slide.is-active .aa-sp { animation: aa-grow 0.53s calc(3.84s + var(--i) * 0.12s) cubic-bezier(.2, .8, .2, 1) both; }
.cs-influence-slide.is-active .aa-match { animation: aa-pop 0.53s 5.44s both; }
.cs-influence-slide.is-active .aa-match path { animation: aa-draw 0.35s 5.73s ease-out both; }

/* Held at the first frame until js/influence-stepper.js adds .is-playing (panel near mid-viewport). */
.ai-section:not(.is-playing) .aa, .ai-section:not(.is-playing) .aa * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .cs-influence-slide.is-active .aa, .cs-influence-slide.is-active .aa * { animation: none !important; }
}

/* ==========================================================================
   Step 3: "Ideation And Shipping" (ChatGPT -> Claude Code), 7s of motion in a 7.5s step. Same stage and
   window shell as above; ChatGPT starts in front, Claude Code ends in front.
   ========================================================================== */
.aa-gpt { z-index: 1; transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.94); background: #fff; }
.aa-claude { z-index: 2; background: #1f1e1d; }
.aa-gpt .aa-bar { background: #fff; border-bottom: 1px solid #ececec; color: #1e1e1e; }
.aa-claude .aa-bar { background: #181716; border-bottom: 1px solid #2d2b29; color: #ece9e4; }

.aa-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(44 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.aa-hello { margin: 0; font-weight: 500; font-size: calc(50 * var(--u)); color: #0d0d0d; letter-spacing: -.01em; }
.aa-composer {
  position: relative; width: calc(860 * var(--u)); min-height: calc(200 * var(--u)); border: 1px solid #e3e3e3; border-radius: calc(40 * var(--u));
  padding: calc(34 * var(--u)) calc(110 * var(--u)) calc(34 * var(--u)) calc(44 * var(--u)); background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .08);
}
.aa-composer p { margin: 0; font-size: calc(30 * var(--u)); line-height: calc(46 * var(--u)); }
.aa-ph { position: absolute; color: #8e8e8e; opacity: 0; }
.aa-typed { color: #0d0d0d; overflow-wrap: anywhere; }
.aa-caret { display: inline-block; width: calc(3 * var(--u)); height: calc(34 * var(--u)); margin-left: calc(4 * var(--u)); background: #0d0d0d; vertical-align: calc(-6 * var(--u)); opacity: 0; }
.aa-send { position: absolute; right: calc(28 * var(--u)); bottom: calc(28 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; background: #0d0d0d; display: grid; place-items: center; }
.aa-send i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: #fff; -webkit-mask: url(../assets/icons/arrow_upward_alt.svg) center / contain no-repeat; mask: url(../assets/icons/arrow_upward_alt.svg) center / contain no-repeat; }

.aa-term { flex: 1; position: relative; padding: calc(28 * var(--u)) calc(36 * var(--u)) 0; font: 400 calc(26 * var(--u)) / calc(50 * var(--u)) ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #e8e5df; overflow: hidden; }
.aa-cl { white-space: pre; }
.aa-cl-h { margin-bottom: calc(18 * var(--u)); color: #b9b4aa; }
.aa-or { color: #d97757; }
.aa-say { display: inline-block; vertical-align: top; overflow: hidden; width: 64ch; }
.aa-cl-b { position: absolute; left: calc(36 * var(--u)); top: calc(188 * var(--u)); color: #b9b4aa; opacity: 0; }
.aa-spin { display: inline-block; }
.aa-prev {
  position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); top: calc(176 * var(--u)); bottom: 0;
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; overflow: hidden; background: #fff;
  box-shadow: 0 calc(-6 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .4);
}
.aa-prev img { display: block; width: 100%; height: auto; }

@keyframes aa3-swap-gpt {
  0%, 38.3% { transform: none; filter: none; z-index: 2; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45% { transform: translate(calc(-170 * var(--u)), calc(60 * var(--u))) scale(.97); filter: brightness(.97); z-index: 2; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45.01% { z-index: 1; }
  51.7%, 100% { transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.94); z-index: 1; }
}
@keyframes aa3-swap-claude {
  0%, 38.3% { transform: translate(calc(224 * var(--u)), calc(-180 * var(--u))) scale(.94); filter: brightness(.9); z-index: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45% { transform: translate(calc(110 * var(--u)), calc(-60 * var(--u))) scale(.97); filter: brightness(.96); z-index: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45.01% { z-index: 2; }
  51.7%, 100% { transform: none; filter: none; z-index: 2; }
}
@keyframes aa-word { from { opacity: 0; } }
@keyframes aa-ph { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aa-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes aa-say { from { width: 0; } }
@keyframes aa-build { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@keyframes aa-rot { to { rotate: 360deg; } }
@keyframes aa-rise { from { opacity: 0; translate: 0 calc(60 * var(--u)); } }
@keyframes aa-send-on { from { background: #d7d7d7; } }
@keyframes aa-press { 50% { scale: .86; } }

.cs-influence-slide.is-active .aa-gpt { animation: aa-in 0.58s ease-out both, aa3-swap-gpt 7s linear both; }
.cs-influence-slide.is-active .aa-claude { animation: aa-in 0.58s 0.12s ease-out both, aa3-swap-claude 7s linear both; }
.cs-influence-slide.is-active .aa-ph { animation: aa-ph 0.64s both; }
.cs-influence-slide.is-active .aa-typed span { animation: aa-word 0.01s calc(0.58s + var(--w) * 0.08s) both; }
.cs-influence-slide.is-active .aa-caret { animation: aa-blink 1.05s 2.04s steps(1); }
.cs-influence-slide.is-active .aa-send { animation: aa-send-on 0.23s 0.58s both, aa-press 0.29s 2.33s ease-out; }
.cs-influence-slide.is-active .aa-cl-h, .cs-influence-slide.is-active .aa-cl-p { animation: aa-line 0.35s 3.68s both; }
.cs-influence-slide.is-active .aa-say { animation: aa-say 1.17s 3.97s steps(63, end) both; }
.cs-influence-slide.is-active .aa-cl-b { animation: aa-build 1.05s 5.13s both; }
.cs-influence-slide.is-active .aa-spin { animation: aa-rot 1.05s 5.13s linear 1; }
.cs-influence-slide.is-active .aa-prev { animation: aa-rise 0.7s 5.78s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .cs-influence-slide.is-active .aa-3, .cs-influence-slide.is-active .aa-3 * { animation: none !important; }
}