/* ==========================================================================
   Arlo product animation — V2
   Every selector is scoped under .arlo-root. Nothing here is global.
   Do not add bare element selectors — Webflow's globals must not see us,
   and ours must not leak into Webflow.
   ========================================================================== */

.arlo-root {
  /* ---- palette (from the V2 Figma) ---- */
  --arlo-ink: #252525;
  --arlo-ink-75: rgba(37, 37, 37, 0.75);
  --arlo-ink-50: rgba(37, 37, 37, 0.5);
  --arlo-ink-soft: #5c5c5c;
  --arlo-muted: #929292;
  --arlo-white: #ffffff;
  --arlo-app: #ffffff;
  --arlo-rail-bg: #fafaf9;
  --arlo-backdrop: #e9e7e2;
  --arlo-panel: #f6f4f0;
  --arlo-line: #eeeae1;
  --arlo-line-soft: #f6f4f0;
  --arlo-card-line: #eeeeee;
  --arlo-red: #b8411d;
  --arlo-green: #70a31f;
  --arlo-blue: #005cd7;          /* send button */
  --arlo-blue-line: #abcfff;     /* send button border */
  --arlo-bubble: #e8edf1;        /* user chat bubble fill */
  --arlo-step: #2c5a78;          /* active-step blue / rail node */
  --arlo-step-lock: #d5d2ca;     /* locked-step text */
  --arlo-step-track: #eeeae1;    /* rail track */
  --arlo-status: #34b56a;        /* "just now" green dot */

  /* ---- type ---- */
  --arlo-font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- shell ---- */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--arlo-app);
  border-radius: 10px;
  font-family: var(--arlo-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  contain: layout paint style;
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
  .arlo-root { height: 0; padding-top: 56.25%; }
}

/* ---- scoped reset: applies only inside the root ---- */
.arlo-root *,
.arlo-root *::before,
.arlo-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  /* Declared here rather than inherited so the em resolves against each
     element's own font-size — inheriting would pin every size to the stage's
     computed px value. Also blocks any host letter-spacing from bleeding in. */
  letter-spacing: -0.005em;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  list-style: none;
  box-shadow: none;
  float: none;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

.arlo-root img { display: block; max-width: none; }
/* Fill the sized parent. A host page's bare `svg { width: 60px }` would
   otherwise win against our unsized icons. Per-icon rules below are equally
   specific but come later, so they still override this. */
.arlo-root svg { display: block; width: 100%; height: 100%; }
/* No background here — `.arlo-root button` would out-specify our own
   single-class button rules and blank out their fills. The `*` reset above
   already clears backgrounds. */
.arlo-root button { cursor: pointer; }
.arlo-root button:focus-visible {
  outline: 2px solid var(--arlo-ink);
  outline-offset: 2px;
}

/* ==========================================================================
   Stage — fixed 1280x720 canvas, scaled to fit the wrapper
   ========================================================================== */

.arlo-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform-origin: top left;
  font-size: 15px;
  line-height: 1.4;
  color: var(--arlo-ink);
  letter-spacing: -0.005em;
}

.arlo-app {
  position: absolute;
  inset: 0;
  background: var(--arlo-app);
  overflow: hidden;
}

/* Nothing in the stage takes pointer input except real controls.
   Several containers span the canvas regardless of what act we're in, at
   opacity 0, so without this they silently swallow clicks meant for the
   button underneath. */
.arlo-stage,
.arlo-stage * { pointer-events: none; }
.arlo-root .arlo-stage button { pointer-events: auto; }

/* ---- avatars ---- */
.arlo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--arlo-ink);
  color: var(--arlo-white);
  flex: none;
}
.arlo-avatar svg { width: 58%; height: 58%; }
.arlo-avatar--rail { width: 30px; height: 30px; border-radius: 8px; }
.arlo-avatar--sm { width: 26px; height: 26px; }
.arlo-avatar--lg { width: 51px; height: 51px; }
.arlo-avatar--mm {
  width: 44px;
  height: 44px;
  background: #bcd6b0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

/* ---- file-type badge ---- */
.arlo-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  flex: none;
}
.arlo-file--pptx { background: #d24625; }
.arlo-file--pdf { background: #e2433b; }

/* ==========================================================================
   App shell chrome (Slides 3–6)
   ========================================================================== */

.arlo-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 720px;
  background: var(--arlo-rail-bg);
  border-right: 1px solid var(--arlo-line-soft);
}
.arlo-sidebar .arlo-avatar { position: absolute; top: 18px; left: 12px; }

.arlo-crumb {
  position: absolute;
  top: 26px;
  left: 74px;
  font-size: 14px;
  font-weight: 400;
  color: var(--arlo-ink-soft);
  white-space: nowrap;
}

/* ==========================================================================
   Chat column (Slides 3–6) — one element, slid between centred + split
   ========================================================================== */

/* Left 50% — a flex column, 48px padding all round, messages pinned top,
   input pinned bottom. `left`/`width` are animated (centred → split half);
   `top` sits below the 54px top-bar band, `bottom` lands 48px off the slide. */
.arlo-left {
  position: absolute;
  top: 54px;
  left: 310px;
  width: 660px;
  height: 666px;
  padding: 48px;
  display: flex;
  flex-direction: column;
}
.arlo-chat { position: relative; flex: 1 1 auto; width: 100%; }
.arlo-scene { position: absolute; top: 0; left: 0; width: 100%; }

/* the restated brief — shown as the user's own chat bubble, right-aligned */
.arlo-ask {
  width: fit-content;
  max-width: 560px;
  margin-left: auto;
  padding: 20px 26px;
  background: var(--arlo-bubble);
  border-radius: 18px;
  font-size: 19px;
  line-height: 27px;
  color: var(--arlo-ink);
}

/* a line of Arlo copy, with an optional red bullet in the gutter */
.arlo-msg { position: relative; padding-left: 26px; margin-top: 26px; }
.arlo-msg p { font-size: 18px; line-height: 25px; }
.arlo-msg--wrap p { max-width: 430px; }
.arlo-scene--analysis > .arlo-msg:first-child,
.arlo-scene--rec > .arlo-msg:first-child { margin-top: 0; }

.arlo-bull {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--arlo-red);
}

/* choice buttons */
.arlo-choices { display: flex; gap: 10px; padding-left: 26px; margin-top: 22px; }
.arlo-btn {
  height: 42px;
  padding: 0 19px;
  border: 1px solid var(--arlo-ink);
  border-radius: 8px;
  background: var(--arlo-white);
  color: var(--arlo-ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.arlo-btn.is-selected { background: var(--arlo-ink); color: var(--arlo-white); }

/* green "optimised" confirmation chip */
.arlo-okchip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 24px 8px 8px;
  font-size: 18px;
}
.arlo-okchip svg { width: 22px; height: 22px; flex: none; color: var(--arlo-green); }

/* analysis winner pack */
.arlo-winner {
  width: 250px;
  height: 150px;
  margin-top: 22px;
  margin-left: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--arlo-panel);
}
.arlo-winner img { width: 250px; height: 150px; object-fit: cover; }

/* recommendation: generating spinner + exports */
.arlo-gen { display: flex; align-items: center; gap: 12px; color: var(--arlo-ink-soft); }
.arlo-gen span:last-child { font-size: 18px; }
.arlo-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--arlo-line);
  border-top-color: var(--arlo-step-lock);
  animation: arlo-spin 0.9s linear infinite;
  flex: none;
}
@keyframes arlo-spin { to { transform: rotate(360deg); } }

.arlo-exports { margin-top: 22px; padding-left: 26px; }
.arlo-exports-label { font-size: 13px; color: var(--arlo-muted); margin-bottom: 12px; }
.arlo-export {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 420px;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 1px solid var(--arlo-line);
  border-radius: 9px;
  background: var(--arlo-white);
}
.arlo-export-name { flex: 1; font-size: 14px; font-weight: 500; }
.arlo-export-dl { width: 20px; height: 20px; color: var(--arlo-muted); flex: none; }

/* ==========================================================================
   Input box (Slides 3–6) — one element, repositioned/resized between acts
   ========================================================================== */

.arlo-inp {
  position: relative;
  flex: none;
  width: 100%;
  height: 118px;
  background: var(--arlo-panel);
  border-radius: 14px;
}
.arlo-inp-ph {
  position: absolute;
  top: 26px;
  left: 24px;
  font-size: 17px;
  color: var(--arlo-muted);
}
.arlo-inp-thumbs {
  position: absolute;
  left: 46px;
  bottom: 18px;
  display: flex;
  gap: 6px;
}
.arlo-thumb {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--arlo-line);
}
.arlo-thumb img { width: 26px; height: 26px; object-fit: cover; }
.arlo-inp-plus {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 12px;
  height: 12px;
  color: var(--arlo-muted);
}
.arlo-inp-send {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--arlo-ink);
  color: var(--arlo-white);
}
.arlo-inp-send svg { width: 16px; height: 16px; }

/* The not-yet-typed tail of a line. Hidden, but still takes up space, so the
   line breaks are fixed before a single character is revealed. */
.arlo-rest { visibility: hidden; }

/* ==========================================================================
   Right progress stepper (Slides 4–6)
   ========================================================================== */

/* Right 50% (after the 54px sidebar); the stepper block is centred in it. */
.arlo-panel {
  position: absolute;
  top: 54px;
  left: 667px;
  width: 613px;
  height: 666px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arlo-stepper { position: relative; padding-left: 48px; }
.arlo-rail {
  position: absolute;
  top: 0;
  left: 15px;
  width: 2px;
  height: 100%;
  background: var(--arlo-step-track);
  border-radius: 2px;
}
.arlo-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, rgba(44, 90, 120, 0) 0%, var(--arlo-step) 100%);
  border-radius: 2px;
}
.arlo-rail-node {
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 2px;
  background: var(--arlo-step);
  opacity: 0;
}

.arlo-steplist {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.arlo-step { display: flex; align-items: center; gap: 14px; min-height: 32px; }
.arlo-step-ico { position: relative; width: 32px; height: 32px; flex: none; }
.arlo-step-ico > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.arlo-step-ico svg { width: 28px; height: 28px; }
.arlo-i-lock { color: var(--arlo-step-lock); }
.arlo-i-check { color: var(--arlo-ink); }

.arlo-step-label {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.35s ease, transform 0.35s ease;
}
/* Fixed-width so the cycling ellipsis never nudges the label. */
.arlo-step-dots {
  display: inline-block;
  width: 0.9em;
  text-align: left;
}

.arlo-step.is-locked .arlo-i-lock { opacity: 1; }
.arlo-step.is-locked .arlo-step-label { color: var(--arlo-step-lock); }

/* Active steps carry no icon — the rail node already marks the position, so
   the label slides left into the empty icon column, keeping its left edge
   inline with the check / lock icons of the rows above and below. */
.arlo-step.is-active .arlo-step-label {
  color: var(--arlo-step);
  font-size: 21px;
  transform: translateX(-46px);
}

.arlo-step.is-done .arlo-i-check { opacity: 1; }
.arlo-step.is-done .arlo-step-label { color: var(--arlo-ink); }

/* ==========================================================================
   Overlay backdrop + cards (Slides 1, 2, 7)
   ========================================================================== */

.arlo-backdrop {
  position: absolute;
  inset: 0;
  background: var(--arlo-backdrop);
  z-index: 10;
}

.arlo-card {
  position: absolute;
  z-index: 20;
  background: var(--arlo-white);
  border: 2px solid var(--arlo-card-line);
  border-radius: 15px;
  box-shadow: -4px 7px 22px -6px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* ---- email notification toast (Slide 7 → 7b hand-off) ---- */
.arlo-notif {
  position: absolute;
  top: 26px;
  right: 40px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 340px;
  padding: 14px 16px;
  background: var(--arlo-white);
  border: 1px solid var(--arlo-card-line);
  border-radius: 16px;
  box-shadow: -4px 10px 26px -8px rgba(0, 0, 0, 0.18);
  text-align: left;
}
.arlo-notif-ico { flex: none; width: 44px; height: 44px; }
.arlo-notif-ico img { width: 100%; height: 100%; display: block; border-radius: 10px; }
.arlo-notif-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arlo-notif-title { font-size: 16px; font-weight: 600; color: var(--arlo-ink); }
.arlo-notif-body {
  font-size: 15px;
  color: var(--arlo-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Only clickable while it's the live beat, so the hidden toast never
   swallows clicks meant for controls beneath it. */
.arlo-root .arlo-stage .arlo-notif { pointer-events: none; }
.arlo-root .arlo-stage .arlo-notif.is-on { pointer-events: auto; cursor: pointer; }

/* ---- Slide 1 — compose ---- */
.arlo-compose {
  top: 150px;
  left: 262px;
  width: 756px;
}
.arlo-compose-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
}
.arlo-compose-to { font-size: 18px; color: var(--arlo-ink-50); }
.arlo-topill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 15px 4px 4px;
  border: 1.5px solid var(--arlo-line);
  border-radius: 80px;
  font-size: 18px;
  font-weight: 600;
}
.arlo-compose-subject {
  padding: 12px 24px;
  border-top: 1px solid var(--arlo-line-soft);
  border-bottom: 1px solid var(--arlo-line-soft);
  font-size: 18px;
  font-weight: 600;
}
.arlo-compose-bodywrap { padding: 24px; }
.arlo-compose-body {
  min-height: 176px;
  font-size: 18px;
  line-height: 23px;
  color: var(--arlo-ink-75);
  white-space: pre-wrap;
}
.arlo-compose-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 20px;
}
.arlo-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 9px;
  border: 1px solid var(--arlo-blue-line);
  border-radius: 80px;
  background: var(--arlo-blue);
  color: var(--arlo-white);
  font-size: 18px;
  font-weight: 500;
}
.arlo-send-ico { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.arlo-send-ico svg { width: 18px; height: 18px; }
.arlo-compose-tools { display: flex; align-items: center; gap: 15px; color: var(--arlo-muted); }
.arlo-tool { width: 24px; height: 24px; }

/* ---- Slide 2 — sent + reply ---- */
.arlo-sentwrap { position: absolute; inset: 0; z-index: 20; }
.arlo-sentmsg {
  position: absolute;
  top: 214px;
  left: 405px;
  display: flex;
  gap: 18px;
  width: 470px;
  padding: 4px 4px 0 0;
}
.arlo-sentmsg .arlo-avatar { margin-top: 2px; }
.arlo-sentmsg-body { flex: 1; color: rgba(37, 37, 37, 0.55); }
.arlo-sentmsg-top { display: flex; justify-content: space-between; align-items: baseline; }
.arlo-sentmsg-subj { font-size: 17px; font-weight: 600; }
.arlo-sentmsg-ago { font-size: 15px; color: rgba(37, 37, 37, 0.4); }
.arlo-sentmsg-pre { margin-top: 8px; font-size: 16px; }

.arlo-reply {
  position: absolute;
  top: 300px;
  left: 320px;
  width: 640px;
  padding: 22px 26px 24px 58px;
  background: var(--arlo-white);
  border-radius: 15px;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.16);
}
.arlo-reply-dot {
  position: absolute;
  top: 39px;
  left: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--arlo-status);
}
.arlo-reply .arlo-avatar { position: absolute; top: 20px; left: 52px; }
.arlo-reply-meta { margin-left: 66px; min-height: 51px; }
.arlo-reply-name { font-size: 19px; font-weight: 700; }
.arlo-reply-subj { margin-top: 3px; font-size: 18px; color: var(--arlo-ink-soft); }
.arlo-reply-time {
  position: absolute;
  top: 24px;
  right: 26px;
  font-size: 18px;
  color: rgba(37, 37, 37, 0.4);
}
.arlo-reply-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--arlo-line-soft);
  font-size: 19px;
}
.arlo-here {
  display: inline;
  color: var(--arlo-blue);
  font: inherit;
  border-radius: 3px;
}

/* ---- Slide 7 — outbound email ---- */
/* Centred on the stage; the entrance y-offset is composed on top of the
   -50%/-50% centering by GSAP (xPercent/yPercent set in setInitialState). */
.arlo-email {
  top: 50%;
  left: 50%;
  width: 816px;
  padding: 36px 44px 40px;
}
.arlo-email-tab {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--arlo-blue);
  color: var(--arlo-blue);
  font-size: 16px;
  font-weight: 500;
}
/* Avatar top-left; the column beside it carries subject → body → attachment,
   so everything after the subject shares its left edge. */
.arlo-email-head { display: flex; align-items: flex-start; gap: 16px; margin-top: 22px; }
.arlo-email-av { width: 40px; height: 40px; }
.arlo-email-col { flex: 1; min-width: 0; }
.arlo-email-subj { padding-top: 6px; font-size: 21px; font-weight: 700; line-height: 26px; }
.arlo-email-body { margin-top: 20px; font-size: 16px; line-height: 22px; color: var(--arlo-ink); }
.arlo-email-body > p { margin-top: 14px; }
.arlo-email-body > p:first-child { margin-top: 0; }
.arlo-email-bullets { margin-top: 14px; }
.arlo-eb { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.arlo-eb-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--arlo-green); flex: none; }
.arlo-email-img {
  width: 150px;
  height: 96px;
  margin-top: 16px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--arlo-panel);
}
.arlo-email-img img { width: 150px; height: 96px; object-fit: cover; }
.arlo-attach {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  margin-top: 26px;
  padding: 0 18px 0 12px;
  border: 1px solid var(--arlo-line);
  border-radius: 10px;
  background: var(--arlo-white);
  font-size: 15px;
  font-weight: 500;
}

/* ==========================================================================
   Replay
   ========================================================================== */

.arlo-replay {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--arlo-ink);
  color: var(--arlo-white);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
}
/* Out-specifies the `button { pointer-events: auto }` rule above, so the
   hidden Replay button can't be clicked before the timeline reveals it. */
.arlo-root .arlo-stage .arlo-replay { pointer-events: none; }
.arlo-root .arlo-stage .arlo-replay.is-on { pointer-events: auto; }
.arlo-replay svg { width: 14px; height: 14px; }