/* Alex homepage hero — drop-in styles. Host on Netlify; reference from Webflow with a <link>.
   Generated from Hero-FullSequence-Preview.html (the master). Do not hand-edit; edit the master and regenerate.
   Scoped to .hero so it cannot affect the rest of the Webflow page. Needs DM Sans loaded on the page
   (already the alex.com brand font). */

/* scoped box-model reset (replaces the preview's page-level reset) */
.hero, .hero *, .hero *::before, .hero *::after { box-sizing: border-box; }

/* ============================================================
   HERO BOX. This is the hero section. It fills its container and
   clips overflow so the video can scale and crop inside it.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #0d110a;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   scenes = video + bubbles; cross-faded; driven by the script.
   Each scene holds one clip and that clip's own chat bubbles.
   Scenes cross-fade; bubbles are tied to their own clip's time.
   ============================================================ */
.hero__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;       /* ~half-second crossfade */
  z-index: 1;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* scales + crops to fill */
  object-position: center;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13,17,10,0.45) 0%, rgba(13,17,10,0) 42%);
}

/* bubble stack: anchored from the bottom, sits right of centre */
.hero__bubbles {
  position: absolute;
  bottom: 50%;
  right: 90px;
  z-index: 3;
  pointer-events: none;
}
.hero__msg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 240px;                         /* default; per-scene widths below */
  opacity: 0;
  transform: translateY(130%);
  transition: transform .5s cubic-bezier(.45, 0, .55, 1), opacity .3s ease;
  /* The glass (fill + backdrop blur) lives on THIS moving element, not on a
     child. A CSS transform on a parent disables a child's backdrop blur, so
     the blur must sit on the same element that carries the transform. */
  border-radius: 12px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
/* alignment: Alex bubbles sit left, human bubbles sit right — a consistent
   33px step in every scene (human bubble is the whole bubble shifted right). */
.hero__msg.is-alex { right: 33px; }

/* per-scene bubble widths (from Figma) */
.scene-1 .hero__msg { width: 242px; }
.scene-2 .hero__msg { width: 310px; }
.scene-3 .hero__msg { width: 336px; }
.scene-4 .hero__msg { width: 294px; }
/* Alex (sender) bubble fills */
.scene-1 .hero__msg.is-alex { background: rgba(57, 25, 2, 0.32); }   /* #391902 32% */
.scene-2 .hero__msg.is-alex { background: rgba(17, 43, 41, 0.30); }  /* #112B29 30% */
.scene-3 .hero__msg.is-alex { background: rgba(60, 29, 0, 0.25); }   /* #3C1D00 25% */
.scene-4 .hero__msg.is-alex { background: rgba(40, 25, 20, 0.30); }  /* #281914 30% */
/* respondent bubble fills */
.scene-1 .hero__msg:not(.is-alex) { background: rgba(32, 4, 0, 0.50); }   /* #200400 50% */
.scene-2 .hero__msg:not(.is-alex) { background: rgba(0, 18, 10, 0.40); }  /* #00120A 40% */
.scene-4 .hero__msg:not(.is-alex) { background: rgba(45, 8, 18, 0.45); }  /* #2D0812 45% */

/* sender row — sits inside the bubble on every scene */
.hero__sender {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
}
.hero__avatar {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; border-radius: 50%; overflow: hidden;
}
.hero__avatar svg, .hero__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero__name { font-size: 14px; line-height: 18px; color: #fff; }

.hero__bubble {
  padding: 19px 22px 19px 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
}
.hero__bubble .w { color: rgba(255,255,255,0.45); transition: color .25s ease; }
.hero__bubble .w.lit { color: #fff; }

/* ---- Mobile (Webflow "small" breakpoint and below) ---- */
@media (max-width: 767px) {
  .hero__bubbles { bottom: 130px; right: auto; left: 24px; }   /* lowest bubble sits 130px above screen bottom, keeping that band clear for the bottom CTA */
  /* alignment on mobile mirrors desktop: Alex bubbles flush left, human bubbles
     step 33px to the right. Stepped (human) bubbles cap their width so they keep a
     clean right margin and never run off the edge. */
  .hero__msg { left: 33px; right: auto; max-width: calc(100vw - 81px); }      /* humans */
  .hero__msg.is-alex { left: 0; right: auto; max-width: calc(100vw - 48px); } /* Alex */
  /* scene 3 bubbles fall on a lighter area of the mobile clip than on desktop,
     so they get their own fill: #021C25 at 25% (desktop stays #3C1D00 25%).
     scene 3 is all-Alex, so this targets .is-alex to match the desktop specificity. */
  .scene-3 .hero__msg.is-alex { background: rgba(2, 28, 37, 0.25); }
  .hero__scrim { background: none; }
}