/*
  ARCLO — HERO SYSTEM DEMO
  The large animated composition replacing the old placeholder in the
  homepage hero's right column: website -> quote request -> lead
  captured -> automatic text -> appointment booked.

  This file only contains what's specific to that composition (sizing,
  layering/positioning of the browser + phone + notification cards,
  and hero-scale type overrides). Everything else — the browser/phone
  shell chrome, the .demo__state crossfade machinery, cursor/touch
  taps, chat bubbles, form fields, checkmarks — is the exact same
  shared vocabulary already built for the six homepage service demos
  in css/product-demo.css. See js/hero-system-demo.js for the
  controller, which reuses js/product-demos.js's helpers directly
  (same reason this stays a separate small file rather than growing
  product-demo.css/product-demos.js into an unrelated mess).
*/

.hero-system-demo {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 44px 28px 84px;
}

.hero-system-demo .browser-shell {
  width: 91%;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
}

/* Real websites read wider/shorter than the compact 4:3 service-demo
   browsers, so the hero gets its own aspect ratio rather than reusing
   .browser-shell--lg/--sm. */
.browser-shell--hero {
  aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------
   Hero-scale type — the browser here is roughly 1.3x the width of
   the standalone service-demo browsers, so its internal UI is sized
   up to match rather than looking lost in the bigger canvas.
--------------------------------------------------------------- */

.hero-system-demo .demo__site-brand {
  font-size: 14px;
  margin-top: 8px;
}

.hero-system-demo .demo__site-headline {
  font-size: 23px;
  margin-top: 6px;
}

.hero-system-demo .demo__site-sub {
  font-size: 13px;
}

.hero-system-demo .demo__site-stars {
  margin-top: 14px;
}

.hero-system-demo .demo__site-stars svg {
  width: 13px;
  height: 13px;
}

.hero-system-demo .demo__site-trust {
  font-size: 10px;
}

.hero-system-demo .demo__button {
  font-size: 13px;
  padding: 10px 22px;
}

.hero-system-demo .browser-shell__screen .demo__headline {
  font-size: 19px;
}

.hero-system-demo .browser-shell__screen .demo__note {
  font-size: 12px;
}

.hero-system-demo .browser-shell__screen .demo__check--lg {
  width: 42px;
  height: 42px;
}

.hero-system-demo .demo__field__label {
  font-size: 9px;
}

.hero-system-demo .demo__field__value {
  font-size: 13px;
}

.hero-system-demo .demo__form {
  max-width: 78%;
}

/* ---------------------------------------------------------------
   Phone — overlaps the browser's lower-right corner. Sized from
   height like every other phone-shell instance; kept smaller than
   .phone-shell--lg since it is a secondary object here, not the
   star of the composition.
--------------------------------------------------------------- */

.hero-demo__phone {
  position: absolute;
  right: 2%;
  bottom: 0;
  height: clamp(290px, 24vw, 340px);
  opacity: 0;
  transform: translate(14px, 18px) scale(0.96);
  transition: opacity 500ms ease, transform 500ms ease;
  z-index: 3;
}

.hero-demo__phone.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* The phone is still narrower than the standalone service-demo
   phones, so the longer SMS copy here needs denser type (same
   technique as .pair-demo .demo__bubble in product-demo.css) to
   avoid wrapping into an unreasonably tall column. */
.hero-demo__phone .demo__chat-header {
  font-size: 9px;
  padding: 20px 0 6px;
}

.hero-demo__phone .demo__chat-body {
  margin-top: 12px;
  gap: 6px;
}

.hero-demo__phone .demo__bubble {
  font-size: 9px;
  line-height: 1.35;
  padding: 6px 9px;
  max-width: 92%;
}

.hero-demo__phone .demo__bubble-tag {
  font-size: 7px;
}

/* ---------------------------------------------------------------
   Notification card — one persistent slot in the composition;
   two instances share the same position and cross-fade (lead ->
   booked) rather than nesting a second state-machine inside it.
--------------------------------------------------------------- */

.hero-demo__notification {
  position: absolute;
  top: 6%;
  right: -2%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 190px;
  padding: 12px 14px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 450ms ease, transform 450ms ease;
  z-index: 4;
  pointer-events: none;
}

.hero-demo__notification.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-demo__notification .demo__check--success {
  width: 18px;
  height: 18px;
  margin: 0 0 2px;
}

@media (max-width: 900px) {
  .hero-demo__notification {
    top: 4%;
  }
}

@media (max-width: 640px) {
  .hero-system-demo {
    max-width: 420px;
    padding: 34px 18px 64px;
  }

  .hero-system-demo .browser-shell__address {
    display: none;
  }

  .hero-demo__phone {
    height: clamp(260px, 60vw, 300px);
    right: 0;
  }

  .hero-demo__phone .demo__bubble {
    font-size: 8px;
    padding: 5px 8px;
  }

  .hero-demo__notification {
    width: 150px;
    padding: 9px 11px;
  }

  .hero-system-demo .demo__site-headline {
    font-size: 18px;
  }

  .hero-system-demo .demo__site-sub,
  .hero-system-demo .browser-shell__screen .demo__note {
    font-size: 11px;
  }

  .hero-system-demo .browser-shell__screen .demo__headline {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------
   Reduced motion: the browser/phone already swap to their
   .demo__static content via the generic rule in product-demo.css
   (@media prefers-reduced-motion: reduce). The two notification
   cards aren't part of that .demo__states/.demo__static pattern
   (they float independently over the composition), so they get
   their own static rule here: show the completed "booked" payoff,
   matching the phone/browser's own static end states.
--------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-demo__phone {
    opacity: 1;
    transform: none;
  }

  .hero-demo__notification {
    display: none;
  }

  .hero-demo__notification--booked {
    display: flex;
    opacity: 1;
    transform: none;
  }
}