/* /intro/ - the one-screen animation for cold emails (intro.js).
   While body.ix-playing: only the animation is on screen (no header, footer or links).
   When it ends (or without JS, or with reduced motion) the site header, the closing
   buttons and the footer appear. */

.ix { padding-block: 28px 10px; }
.ix-cap { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); line-height: 1.15;
  text-align: center; margin: 0 auto 26px; max-width: 34ch; min-height: 2.3em; text-wrap: balance; transition: opacity .35s ease; }
.ix-cap.out { opacity: 0; }

/* ---- the three parts, left to right ---- */
.ix-stage { --ix-h: 430px; display: flex; align-items: center; justify-content: center; gap: 0; }
.ix-node { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .5s ease, transform .5s ease; }
.ix-label { margin: 0; font-size: 15px; color: var(--soft); text-align: center; line-height: 1.3; }
.ix-label b { display: block; color: var(--ink); font-family: var(--display); font-size: 22px; }
.ix-label span { display: block; font-size: 14px; max-width: 16ch; }

/* iPad: the site's app replica (app-mock.css .phone), sized for this scene */
.ix-phone { --tour-h: var(--ix-h); height: var(--ix-h); padding: 14px; border-radius: 28px; }
.ix-phone .inner { border-radius: 14px; }
.ix-phone .transcript { padding: 12px 14px 6px; gap: 10px; font-size: 14px; }
.ix-phone .composer { padding: 8px 12px 12px; }
.ix-phone .box { font-size: 14px; min-height: 40px; padding: 9px 12px; }
.ix-phone .send { width: 40px; height: 40px; }
.ix-phone .opa-sources { font-size: 12.5px; }

/* AI */
.ix-ai { width: 150px; }
.ix-orb { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4b7bd8, var(--navy) 70%); box-shadow: 0 10px 30px -12px rgba(20, 48, 74, .7);
  transition: transform .3s ease, box-shadow .3s ease; }
.ix-orb svg { width: 44px; height: 44px; }
.ix-ai.think .ix-orb { animation: ixpulse 1s ease-in-out infinite; }
@keyframes ixpulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 159, 0, .55); } 50% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(245, 159, 0, 0); } }

/* Knowledge Source */
.ix-right { display: flex; flex-direction: column; align-items: center; }
.ix-ks { width: 330px; align-items: stretch; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 14px 10px; }
.ix-ks-hd { display: flex; gap: 10px; align-items: center; }
.ix-ks-hd svg { width: 28px; height: 28px; color: var(--amber-ink); flex: none; }
.ix-ks-hd b { display: block; font-family: var(--display); font-size: 19px; line-height: 1.1; }
.ix-ks-hd span { font-size: 13.5px; color: var(--soft); }
.ix-docs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ix-docs li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--rule);
  background: var(--ground); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, max-height .5s ease, opacity .5s ease, padding .5s ease; }
.ix-docs li i { width: 13px; height: 16px; flex: none; border: 1.6px solid var(--soft); border-radius: 2px; opacity: .7; }
.ix-docs li em { font-style: normal; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }
.ix-docs li em { white-space: nowrap; flex: none; }
.ix-docs li .pg { margin-left: auto; color: #fff; background: var(--amber-ink); opacity: 0; transition: opacity .3s ease; }
.ix-docs li .badge { color: var(--good); border: 1px solid var(--good); }
.ix-docs li.hit { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent); background: var(--card); }
.ix-docs li.hit .pg { opacity: 1; }
.ix-docs li.ix-new.waiting { max-height: 0; opacity: 0; padding-block: 0; border-width: 0; overflow: hidden; }
.ix-docs li.ix-new { max-height: 60px; }

/* the office's laptop */
.ix-laptop { width: 230px; }
.ix-laptop .scr { background: var(--card); border: 7px solid var(--bezel); border-bottom-width: 9px; border-radius: 10px 10px 0 0; padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.ix-laptop .scr, .ix-laptop .base { box-shadow: 0 0 0 1px var(--rule); }
.ix-laptop .base { height: 9px; margin: 0 -14px; background: var(--bezel); border-radius: 0 0 9px 9px; }
.pub-hd b { font-family: var(--display); font-size: 15px; margin-right: 6px; }
.pub-hd span { color: var(--soft); }
.pub-file { display: flex; align-items: center; gap: 6px; border: 1px dashed var(--rule); border-radius: 7px; padding: 6px 8px; }
.pub-file svg { width: 15px; height: 15px; flex: none; color: var(--soft); }
.pub-bar { height: 6px; border-radius: 3px; background: var(--ground); overflow: hidden; }
.pub-bar i { display: block; height: 100%; width: 0; background: var(--good); transition: width 1.1s ease; }
.pub-btn { align-self: flex-end; background: var(--navy); color: #fff; border-radius: 7px; padding: 4px 12px; font-weight: 600; transition: transform .15s ease; }
.pub-btn.press { transform: scale(.94); }
.pub-btn.done { background: var(--good); }

/* the lines between, and the dot that travels them */
.ix-flow { position: relative; flex: 0 0 64px; height: 2px; margin-bottom: 40px; background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 11px); }
.ix-flow .dot { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--amber) 60%, transparent); opacity: 0; }
.ix-flow.run .dot { animation: ixgoH .7s ease-in-out both; }
.ix-flow.run.back .dot { animation-direction: reverse; }
@keyframes ixgoH { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ix-flow-up { flex: 0 0 34px; width: 2px; height: 34px; margin: 6px 0; background: repeating-linear-gradient(180deg, var(--rule) 0 6px, transparent 6px 11px); }
.ix-flow-up .dot { top: 0; left: 50%; margin: -6px 0 0 -6px; }
.ix-flow-up.run .dot { animation: ixgoV .7s ease-in-out both; }
.ix-flow-up.run.back .dot { animation-direction: reverse; }
@keyframes ixgoV { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }

/* parts not on stage yet */
.ix .dim { opacity: .25; }
.ix .hide { opacity: 0; transform: translateY(8px); }

/* ---- the end ---- */
.ix-end { text-align: center; max-width: 760px; margin: 34px auto 10px; }
.ix-end h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; margin: 0; }
.ix-end h1 em { font-style: normal; color: var(--amber-ink); }
.ix-end .lede { margin: 14px auto 0; color: var(--soft); max-width: 62ch; }
.ix-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.ix-replay { margin: 16px 0 0; font-size: 14.5px; color: var(--soft); }
.linkbtn { font: inherit; color: var(--focus); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* keyboard-only skip (shows on focus, only while playing) */
.ix-skip { position: absolute; left: -999px; top: 8px; z-index: 50; font: inherit; background: var(--card); color: var(--ink); border: 1px solid var(--rule); padding: 8px 12px; border-radius: 8px; }
.ix-skip:focus { left: 12px; }
body:not(.ix-playing) .ix-skip { display: none; }

/* While it plays: nothing else on screen */
body.ix-playing .site-hdr, body.ix-playing .skip, body.ix-playing .site-ftr, body.ix-playing .ix-end { display: none; }
body.ix-playing .ix { padding-top: 6vh; cursor: pointer; }
body.ix-done .site-hdr, body.ix-done .site-ftr, body.ix-done .ix-end { animation: ixfade .6s ease both; }
/* finished: the closing headline takes over from the caption */
body:not(.ix-playing) .ix-cap { display: none; }
@keyframes ixfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- smaller screens: top to bottom ---- */
@media (max-width: 900px) {
  .ix-stage { --ix-h: 360px; flex-direction: column; }
  .ix-flow { flex: 0 0 28px; width: 2px; height: 28px; margin: 4px 0; background: repeating-linear-gradient(180deg, var(--rule) 0 6px, transparent 6px 11px); }
  .ix-flow .dot { top: 0; left: 50%; margin: -6px 0 0 -6px; }
  .ix-flow.run .dot { animation-name: ixgoD; }
  @keyframes ixgoD { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .ix-flow-up.run .dot { animation-name: ixgoV; }
  .ix-ai { width: auto; flex-direction: row; gap: 12px; }
  .ix-orb { width: 64px; height: 64px; }
  .ix-orb svg { width: 30px; height: 30px; }
  .ix-ai .ix-label { text-align: left; }
  .ix-ai .ix-label b { font-size: 19px; }
  .ix-ipad .ix-label { display: none; }
  .ix-cap { min-height: 2.4em; margin-bottom: 16px; }
  body.ix-playing .ix { padding-top: 0; }
  /* the stage is taller than a phone screen: the caption stays pinned on top while it scrolls */
  body.ix-playing .ix-cap { position: sticky; top: 0; z-index: 5; background: var(--ground); margin: 0 -16px 10px; padding: 12px 16px; font-size: 21px; min-height: 0; }
  .ix-ks { width: min(330px, 100%); }
}
@media (max-width: 420px) {
  .ix-stage { --ix-h: 330px; }
  .ix-phone { padding: 10px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix *, .ix-cap { transition: none !important; animation: none !important; }
}