/**
 * Webgentic - Hero Demo Phone
 * Live version of the hero phone: the prompt is typed, Webgentic works,
 * the client page updates. Replaces the static phone image on the homepage.
 *
 * The whole mockup is sized from one master font-size on .hero-demo, so a
 * single value scales the frame and everything inside it in proportion.
 */

.hero-demo {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 10px;
  width: 27em;
  height: 51.5em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Shares the float keyframes with the static phone it replaces */
  animation: phone-float 6s ease-in-out infinite;
}

.wg-phone {
  width: 100%;
  height: 100%;
  border: 0.9em solid #1a1e25;
  border-radius: 4.6em;
  background: #0e1116;
  box-shadow:
    0 0 0 0.18em #2a2f38,
    0 2.4em 4.8em rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.wg-screen {
  position: absolute;
  inset: 0;
  border-radius: 3.8em;
  overflow: hidden;
  background: var(--bg-dark);
  transition: opacity 500ms var(--ease-in-out);
}

.hero-demo.is-restarting .wg-screen {
  opacity: 0;
}

.wg-notch {
  position: absolute;
  top: 0.9em;
  left: 50%;
  transform: translateX(-50%);
  width: 10em;
  height: 2.8em;
  background: #000;
  border-radius: 1.6em;
  z-index: 40;
}

.wg-status {
  transition: color 600ms var(--ease-in-out);
  position: absolute;
  top: 1.5em;
  left: 0;
  right: 0;
  z-index: 41;
  display: flex;
  justify-content: space-between;
  padding: 0 2.6em;
  font-size: 1.05em;
  font-weight: var(--weight-semibold);
  color: #fff;
}

.wg-status__icons {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.wg-signal {
  display: flex;
  align-items: flex-end;
  gap: 0.16em;
  height: 1em;
}

.wg-signal span {
  width: 0.24em;
  background: #fff;
  border-radius: 0.08em;
}

.wg-signal span:nth-child(1) { height: 0.4em; }
.wg-signal span:nth-child(2) { height: 0.62em; }
.wg-signal span:nth-child(3) { height: 0.84em; }

.wg-battery {
  width: 1.7em;
  height: 1em;
  border: 0.14em solid #fff;
  border-radius: 0.3em;
  position: relative;
}

.wg-battery::after {
  content: '';
  position: absolute;
  inset: 0.2em;
  background: #fff;
  border-radius: 0.1em;
}

 /* The status bar flips to dark once the light client page is on screen */
.hero-demo.is-light .wg-status {
  color: var(--color-text-body);
}

.hero-demo.is-light .wg-battery {
  border-color: var(--color-text-body);
}

.hero-demo.is-light .wg-battery::after,
.hero-demo.is-light .wg-signal span {
  background: var(--color-text-body);
}

.hero-demo.is-light .wg-homebar {
  background: var(--color-text-body);
}

.wg-homebar {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  width: 11em;
  height: 0.4em;
  border-radius: 0.3em;
  background: #fff;
  opacity: 0.9;
  z-index: 41;
}

/* ================================
   LAYER 1: the client site
   ================================ */

.wg-site {
  position: absolute;
  inset: 0;
  background: #f7f5f2;
  border-radius: 3.8em;
  color: var(--color-text-body);
  padding-top: 4.6em;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-in-out);
}

.wg-site.is-shown {
  transform: scale(1);
}

/* Only while the chat covers the page. The panel's blur drags the page's own
   cream outwards into the curve of the screen, where it showed as a pale rim;
   darkening the page's edge underneath stops it at the source. Lifted again
   the moment the page is back on show, so it never darkens the page itself */
.hero-demo:not(.is-light) .wg-site {
  box-shadow: inset 0 0 2em 0.5em var(--bg-dark);
}

.wg-site__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1em 1.8em;
  border-bottom: 0.1em solid rgba(27, 27, 27, 0.1);
}

.wg-site__mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.5em;
  letter-spacing: -0.02em;
}

.wg-site__menu {
  width: 1.8em;
  height: 0.16em;
  background: var(--color-text-body);
  box-shadow: 0 0.55em 0 var(--color-text-body), 0 -0.55em 0 var(--color-text-body);
}

.wg-site__hero {
  padding: 1.4em 1.8em 0.9em;
}

.wg-site__banner {
  height: 8.5em;
  border-radius: 1.1em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #b9cfd6 0%, #cfc4d8 55%, #e0d2bb 100%);
}

/* The sale lands on the banner too: a warm red takes over from the soft
   pastel, so the change is obvious at a glance rather than only in the words.
   Cross-faded on a layer because gradients do not interpolate */
.wg-site__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.09) 0 0.7em,
      rgba(255, 255, 255, 0) 0.7em 1.4em),
    linear-gradient(160deg, #8e2a18 0%, #c23a20 45%, #e0873a 100%);
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
}

.wg-site.is-edited .wg-site__banner::before {
  opacity: 1;
}

.wg-site__banner-tag {
  position: absolute;
  left: 1.1em;
  bottom: 1em;
  display: grid;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-body);
  font-size: 0.95em;
  font-weight: var(--weight-semibold);
  padding: 0.45em 0.75em;
  border-radius: 0.5em;
  white-space: nowrap;
}

/* Both labels share one grid cell, so the tag keeps the wider label's width
   and nothing reflows when the sale copy takes over */
.wg-tag-old,
.wg-tag-new {
  grid-area: 1 / 1;
  transition: opacity 400ms var(--ease-in-out);
}

.wg-tag-new {
  opacity: 0;
}

.wg-site.is-edited .wg-tag-old {
  opacity: 0;
}

.wg-site.is-edited .wg-tag-new {
  opacity: 1;
}

.wg-site__copy {
  margin-top: 0.6em;
  position: relative;
}

.wg-site__title {
  font-family: var(--font-heading);
  font-size: 1.8em;
  line-height: 1.15;
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  min-height: 1.25em;
  position: relative;
}

.wg-site__title .wg-old,
.wg-site__title .wg-new {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  white-space: nowrap;
  transition: opacity 500ms var(--ease-in-out);
}

.wg-site__title .wg-new {
  opacity: 0;
}

.wg-site__title.is-swapped .wg-old {
  opacity: 0;
}

.wg-site__title.is-swapped .wg-new {
  opacity: 1;
}

/* Marks out everything the prompt touched: the banner as well as the headline.
   It sits in the copy block and reaches back up over the banner, which is
   0.9em of margin plus 8.5em of banner above it */
.wg-ring {
  position: absolute;
  left: -0.6em;
  right: -0.6em;
  top: -9.7em;
  height: 12.6em;
  border-radius: 1.4em;
  border: 0.2em dashed var(--color-accent);
  opacity: 0;
  box-shadow: 0 0 1.4em rgba(160, 225, 247, 0.3);
}

.wg-site__title.is-swapped ~ .wg-ring {
  animation: wg-ring 1.6s var(--ease-in-out) forwards;
}

@keyframes wg-ring {
  0%   { opacity: 0; transform: scale(1.03); }
  20%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.wg-site__text {
  margin-top: 0.3em;
  font-size: 1.15em;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.wg-site__cta {
  display: inline-block;
  margin-top: 0.45em;
  background: var(--color-text-body);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: 1.15em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-full);
}

.wg-site__edited {
  position: absolute;
  right: 0;
  top: -2.1em;
  font-size: 0.95em;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  background: #0e1116;
  padding: 0.35em 0.7em;
  border-radius: 0.45em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

.wg-site.is-edited .wg-site__edited {
  opacity: 1;
  transform: none;
}

.wg-site__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  padding: 0.3em 1.8em 1.6em;
}

.wg-tile__img {
  height: 6.5em;
  border-radius: 0.9em;
  background: #e8e4de;
}

.wg-tile:nth-child(2) .wg-tile__img { background: #dfe4e6; }
.wg-tile:nth-child(3) .wg-tile__img { background: #ece5da; }
.wg-tile:nth-child(4) .wg-tile__img { background: #dcdfe2; }

.wg-tile__name {
  font-size: 1.05em;
  font-weight: var(--weight-semibold);
  margin-top: 0.7em;
}

.wg-tile__price {
  font-size: 1em;
  color: var(--color-text-muted);
  margin-top: 0.15em;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
}

/* The sale price holds its space from the start, so the tiles never reflow
   when the discount lands */
.wg-price-now {
  color: var(--color-text-body);
  font-weight: var(--weight-semibold);
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 350ms var(--ease-in-out), transform 350ms var(--ease-in-out);
}

.wg-price-was {
  transition: color 350ms var(--ease-in-out);
}

.wg-site.is-edited .wg-price-was {
  text-decoration: line-through;
}

.wg-site.is-edited .wg-price-now {
  opacity: 1;
  transform: none;
}

/* The four prices land one after another, so the discount reads as work
   being applied rather than a single flick of the whole grid */
.wg-site.is-edited .wg-tile:nth-child(2) .wg-price-now { transition-delay: 110ms; }
.wg-site.is-edited .wg-tile:nth-child(3) .wg-price-now { transition-delay: 220ms; }
.wg-site.is-edited .wg-tile:nth-child(4) .wg-price-now { transition-delay: 330ms; }

/* ================================
   LAYER 2: opening frame
   ================================ */

.wg-cover {
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  transition: opacity 1.1s var(--ease-in-out);
}

.wg-cover.is-off {
  opacity: 0;
  pointer-events: none;
}

.wg-cover__headline {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 3.2em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  text-shadow:
    0 0 0.5em rgba(160, 225, 247, 0.55),
    0 0 1.3em rgba(160, 225, 247, 0.3);
  transition: opacity 600ms var(--ease-in-out), transform 600ms var(--ease-in-out);
}

.wg-cover__headline.is-off {
  opacity: 0;
  transform: translateY(-58%);
}

/* The real wordmark, low on the title card */
.wg-cover__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.6em;
  text-align: center;
  transition: opacity 500ms var(--ease-in-out);
}

/* Images are block-level site-wide, so this centres on its margins rather
   than on text-align */
.wg-cover__wordmark img {
  width: 11em;
  height: auto;
  margin: 0 auto;
  opacity: 0.75;
}

.wg-cover__wordmark.is-off {
  opacity: 0;
}

/* ================================
   LAYER 3: the chat sheet
   ================================ */

/* How Webgentic sits on a live site: a lit line along the very bottom edge,
   there the whole time the client page is on screen, gone while the chat has
   taken the screen over */
.wg-halo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3em;
  background: var(--color-accent);
  box-shadow:
    0 0 1.4em 0.15em rgba(160, 225, 247, 0.65),
    0 -0.3em 2.2em rgba(160, 225, 247, 0.35);
  opacity: 0;
  transition: opacity 500ms var(--ease-in-out);
  z-index: 30;
}

.hero-demo.is-light .wg-halo {
  opacity: 1;
}

/* The gesture that calls the chat up: a thumb presses the line at the bottom
   of the screen and swipes. Centred on its margin so the transform is free
   for the animation */
.wg-gesture {
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  margin-left: -1.7em;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  /* The dark edge carries the contrast against the light client page, the
     cyan fill and glow tie it to the line it is pressing */
  border: 0.16em solid rgba(27, 27, 27, 0.5);
  background: rgba(160, 225, 247, 0.38);
  box-shadow: 0 0 0.9em rgba(160, 225, 247, 0.55);
  opacity: 0;
  z-index: 35;
}

.wg-gesture::after {
  content: '';
  position: absolute;
  inset: -0.6em;
  border-radius: 50%;
  border: 0.14em solid rgba(27, 27, 27, 0.4);
  opacity: 0;
}

.hero-demo.is-tapped .wg-gesture {
  animation: wg-swipe 1100ms var(--ease-in-out) forwards;
}

.hero-demo.is-tapped .wg-gesture::after {
  animation: wg-ripple 1100ms var(--ease-in-out) forwards;
}

/* Rises in from the bottom edge, presses, then carries the chat upwards */
@keyframes wg-swipe {
  0%   { opacity: 0; transform: translateY(1.4em) scale(0.7); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(0) scale(0.8); }
  44%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8em) scale(0.92); }
}

@keyframes wg-ripple {
  0%, 26% { opacity: 0; transform: scale(0.6); }
  38%     { opacity: 0.75; transform: scale(1); }
  66%     { opacity: 0; transform: scale(1.8); }
  100%    { opacity: 0; transform: scale(1.8); }
}

/* At rest Webgentic is only the hairline at the very bottom of the screen.
   Opening the chat grows that line into the whole screen: edge to edge and up
   past the notch, so the client page is fully covered while it works */
.wg-sheet {
  position: absolute;
  /* Overscanned by a pixel on every side: the panel and the client page
     otherwise share an antialiased edge, and the page bleeds through it as a
     hairline rim. The screen clips the overscan away */
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 0;
  overflow: hidden;
  /* Frosted rather than solid, so the client page reads as shapes and colour
     behind the chat without any of its words competing with the conversation */
  background: rgba(11, 14, 19, 0.84);
  -webkit-backdrop-filter: blur(1.2em) saturate(130%);
  backdrop-filter: blur(1.2em) saturate(130%);
  /* A faint lit hairline and a darkening towards the edge, so the panel reads
     as a surface sitting over the page rather than a flat wash */
  box-shadow:
    inset 0 0 0 0.1em rgba(160, 225, 247, 0.1),
    inset 0 0 2em 0.7em rgba(4, 6, 10, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    height 900ms var(--ease-in-out),
    transform 700ms var(--ease-in-out),
    opacity 500ms var(--ease-in-out);
}

.wg-sheet.is-open {
  height: calc(100% + 2px);
}


.wg-messages {
  flex: 1;
  overflow: hidden;
  padding: 5.4em 1.6em 0.6em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4.4em, #000 6.6em);
  mask-image: linear-gradient(to bottom, transparent 4.4em, #000 6.6em);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1em;
  opacity: 0;
  transition: opacity 500ms var(--ease-in-out) 400ms;
}

.wg-sheet.is-open .wg-messages {
  opacity: 1;
}

.wg-msg {
  max-width: 88%;
  font-size: 1.15em;
  line-height: 1.45;
  padding: 0.8em 1em;
  border-radius: 1.1em;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 450ms var(--ease-in-out), transform 450ms var(--ease-in-out);
}

.wg-msg.is-in {
  opacity: 1;
  transform: none;
}

.wg-msg--user {
  align-self: flex-end;
  background: #1c2530;
  color: #e6f0f4;
  border-bottom-right-radius: 0.35em;
}

.wg-msg--agent {
  align-self: flex-start;
  background: transparent;
  color: #e6f0f4;
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.wg-who {
  font-size: 0.8em;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  margin-bottom: 0.6em;
}

.wg-step {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  padding: 0.4em 0;
  color: #8b98a1;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 400ms var(--ease-in-out), transform 400ms var(--ease-in-out);
}

.wg-step.is-in {
  opacity: 1;
  transform: none;
}

.wg-step__dot {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  flex: none;
  margin-top: 0.15em;
  border: 0.15em solid #2d3a44;
  position: relative;
}

.wg-step.is-doing,
.wg-step.is-done {
  color: #e6f0f4;
}

.wg-step.is-doing .wg-step__dot {
  border-color: var(--color-accent);
  border-top-color: transparent;
  animation: wg-spin 900ms linear infinite;
}

.wg-step.is-done .wg-step__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.wg-step.is-done .wg-step__dot::after {
  content: '';
  position: absolute;
  left: 0.3em;
  top: 0.05em;
  width: 0.28em;
  height: 0.58em;
  border: solid var(--bg-dark);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.wg-step code {
  font-family: var(--font-mono);
  color: #a9c9d4;
  font-size: 0.92em;
}

@keyframes wg-spin {
  to { transform: rotate(360deg); }
}

.wg-step--final {
  font-weight: var(--weight-semibold);
  color: #e6f0f4;
  margin-top: 0.4em;
}

.wg-step--final .wg-step__dot {
  border-color: transparent;
  background: transparent;
}

/* Prompt bar */

.wg-barwrap {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1em 1.8em;
  height: 7.2em;
}

.wg-bar {
  flex: 1;
  min-width: 0;
  height: 4.4em;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0 0.8em 0 1.1em;
  background: #0d1117;
  border: 0.1em solid #3a3f48;
  position: relative;
}

/* Rolling back is a change to the site, not to the text in the field, so it
   sits outside the pill. Kept smaller than the plus so the prompt gets the
   width instead */
.wg-undo {
  width: 2.6em;
  height: 2.6em;
  flex: none;
  display: grid;
  place-items: center;
  opacity: 0.85;
  color: #97a4ae;
}

.wg-undo svg {
  width: 1.9em;
  height: 1.9em;
  display: block;
}

.wg-input {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 1.7em;
  overflow: hidden;
  font-size: 1.05em;
}

.wg-input__ph,
.wg-input__line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #e6f0f4;
}

.wg-input__ph {
  color: #9aa4ad;
}

.wg-input.is-typing .wg-input__ph {
  display: none;
}

.wg-caret {
  display: inline-block;
  width: 0.15em;
  height: 1.15em;
  background: var(--color-accent);
  margin-left: 0.1em;
  opacity: 0;
}

.wg-input.is-typing .wg-caret {
  opacity: 1;
  animation: wg-blink 1s steps(1) infinite;
}

@keyframes wg-blink {
  50% { opacity: 0; }
}

.wg-mic {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  position: relative;
}

.wg-mic::before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 0.25em;
  width: 0.5em;
  height: 0.9em;
  border-radius: 0.35em;
  background: var(--color-accent);
}

.wg-mic::after {
  content: '';
  position: absolute;
  left: 0.425em;
  top: 0.7em;
  width: 0.85em;
  height: 0.75em;
  border: 0.16em solid var(--color-accent);
  border-top: none;
  border-radius: 0 0 0.7em 0.7em;
}

.wg-mic.is-send {
  background: var(--color-accent);
  border-radius: 50%;
}

.wg-mic.is-send::before,
.wg-mic.is-send::after {
  display: none;
}

/* Only two borders are drawn, so the ink sits toward the corner rather than
   the centre of the box: once rotated it lands 0.09em right of the circle's
   middle, and the nudge puts it back */
.wg-mic.is-send .wg-mic__arrow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  border: solid var(--bg-dark);
  border-width: 0.17em 0.17em 0 0;
  transform: translateX(-0.09em) rotate(45deg);
}

.wg-mic.is-tap {
  animation: wg-tap 350ms var(--ease-in-out);
}

@keyframes wg-tap {
  50% { transform: scale(0.82); }
}

.wg-plus {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  color: var(--color-accent);
  font-size: 1.6em;
  font-weight: var(--weight-light);
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ================================
   LAYER 4: the confirmation pill
   ================================ */

.wg-pill {
  position: absolute;
  left: 50%;
  bottom: 2.8em;
  width: max-content;
  white-space: nowrap;
  transform: translate(-50%, 2.2em);
  background: #0e1116;
  color: #e6f0f4;
  font-size: 1.1em;
  font-weight: var(--weight-semibold);
  padding: 0.8em 1.2em 0.8em 0.9em;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.65em;
  box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.35), 0 0 0 0.1em #262c34;
  opacity: 0;
  transition: opacity 550ms var(--ease-in-out) 350ms, transform 550ms var(--ease-in-out) 350ms;
  z-index: 42;
}

.wg-pill.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wg-pill__dot {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  background: url('/favicon-96x96.png') center/contain no-repeat;
}

/* ================================
   SCREEN READER DESCRIPTION
   ================================ */

.wg-demo-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .hero-demo {
    font-size: 9.2px;
  }
}

@media (max-width: 768px) {
  .hero-demo {
    font-size: 8.4px;
  }

  .hero-visual {
    height: 460px;
  }

  /* Phones, and phones in low power mode, get the same sequence with the
     costly parts removed: no idle float, no blurred glow, lighter shadows.
     Every step is still a class change, so the story plays even when the
     device refuses to animate anything at all. */
  .hero-demo {
    animation: none;
  }

  .wg-phone {
    box-shadow: 0 0 0 0.18em #2a2f38, 0 1.2em 2.4em rgba(0, 0, 0, 0.3);
  }

  .wg-pill {
    box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.3), 0 0 0 0.1em #262c34;
  }

  .wg-cover__headline {
    text-shadow: 0 0 0.5em rgba(160, 225, 247, 0.5);
  }
}

@media (max-width: 640px) {
  .hero-demo {
    font-size: 7px;
  }

  .hero-visual {
    height: 400px;
  }

  /* The live phone is wider than the still image it replaced, so the platform
     logos move to the very edges to keep clear of the screen */
  .floating-logo {
    width: 56px;
    height: 56px;
  }

  .floating-logo--wordpress {
    left: 0;
    top: 6%;
  }

  .floating-logo--drupal {
    right: 0;
    top: 11%;
  }

  .floating-logo--magento {
    left: 0;
    bottom: 24%;
  }

  .floating-logo--shopify {
    right: 0;
    bottom: 20%;
  }
}

@media (max-width: 380px) {
  .hero-demo {
    font-size: 6.2px;
  }

  .hero-visual {
    height: 360px;
  }

  .floating-logo {
    width: 48px;
    height: 48px;
  }
}

/* ================================
   REDUCED MOTION
   The same sequence, with nothing that moves: each step arrives in place
   instead of sliding, growing or spinning.
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-demo {
    animation: none;
  }

  .wg-screen,
  .wg-site,
  .wg-cover,
  .wg-sheet,
  .wg-msg,
  .wg-step,
  .wg-pill,
  .wg-site__edited,
  .wg-site__title .wg-old,
  .wg-site__title .wg-new,
  .wg-tag-old,
  .wg-tag-new,
  .wg-price-was,
  .wg-price-now {
    transition: none;
  }

  .wg-site.is-edited .wg-tile .wg-price-now {
    transition-delay: 0ms;
  }

  .wg-step.is-doing .wg-step__dot,
  .wg-site__title.is-swapped ~ .wg-ring,
  .hero-demo.is-tapped .wg-gesture,
  .hero-demo.is-tapped .wg-gesture::after,
  .wg-input.is-typing .wg-caret {
    animation: none;
  }

  /* Those two carry meaning, so they are shown rather than animated:
     a still press on the line, and a still outline on the changed headline */
  .hero-demo.is-tapped .wg-gesture {
    opacity: 1;
  }

  .wg-site__title.is-swapped ~ .wg-ring {
    opacity: 1;
  }
}