/* Web design hero: an animated "self-building website" visual to the
   right of the hero copy. Linked from services/web-design.html only. */

/* The build visual: cream browser card + hairline callouts. */
.hero-visual { display: flex; justify-content: center; }
.build-wrap {
  position: relative;
  width: min(460px, 100%);
  padding: 44px 0 52px;
  /* One master clock for the whole build loop. */
  --cycle: 12s;
}
.build-card {
  background: #ECEAE1;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-frame);
  padding: 14px;
}
.build-card svg { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Hairline callouts, italic serif on the dark surface */
.callout {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 17px; color: var(--cream-72); white-space: nowrap;
  opacity: 0;
}
.callout .tick { width: 34px; height: 1px; background: var(--cream-42); }
.callout .dot { width: 5px; height: 5px; background: var(--pistachio); transform: rotate(45deg); flex: none; }
.callout-structure { top: 4px; right: 6%; animation: callout-in-1 var(--cycle) var(--ease) infinite; }
.callout-convert { bottom: 6px; left: 4%; animation: callout-in-2 var(--cycle) var(--ease) infinite; }

/* ------------------------------------------------------------------
   Build loop. Every animated element runs one keyframe set against
   the same 12s clock, so the sequence stays in sync forever.
   Timeline: wireframe draws -> real page fades in over it -> CTA
   pops -> cursor clicks it -> load chip stamps -> hold -> reset.
   ------------------------------------------------------------------ */
.build-wrap .stage { animation: stage-reset var(--cycle) linear infinite; }
@keyframes stage-reset {
  0%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

/* Wireframe rects draw themselves with a dash sweep, staggered. */
.build-wrap .wire {
  fill: none; stroke: #A9A594; stroke-width: 1.2; stroke-dasharray: 4 3;
  opacity: 0;
}
.build-wrap .w1 { animation: wire-in-1 var(--cycle) linear infinite; }
.build-wrap .w2 { animation: wire-in-2 var(--cycle) linear infinite; }
.build-wrap .w3 { animation: wire-in-3 var(--cycle) linear infinite; }
.build-wrap .w4 { animation: wire-in-4 var(--cycle) linear infinite; }
.build-wrap .w5 { animation: wire-in-5 var(--cycle) linear infinite; }
@keyframes wire-in-1 { 0%,2% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 36%,100% { opacity: 0; } }
@keyframes wire-in-2 { 0%,6% { opacity: 0; } 9% { opacity: 1; } 30% { opacity: 1; } 36%,100% { opacity: 0; } }
@keyframes wire-in-3 { 0%,10% { opacity: 0; } 13% { opacity: 1; } 30% { opacity: 1; } 36%,100% { opacity: 0; } }
@keyframes wire-in-4 { 0%,14% { opacity: 0; } 17% { opacity: 1; } 31% { opacity: 1; } 37%,100% { opacity: 0; } }
@keyframes wire-in-5 { 0%,18% { opacity: 0; } 21% { opacity: 1; } 32% { opacity: 1; } 38%,100% { opacity: 0; } }

/* Real page elements arrive in three waves. */
.build-wrap .sg { opacity: 0; transform: translateY(8px); transform-box: fill-box; }
.build-wrap .sg1 { animation: solid-in-1 var(--cycle) var(--ease) infinite; }
.build-wrap .sg2 { animation: solid-in-2 var(--cycle) var(--ease) infinite; }
.build-wrap .sg3 { animation: solid-in-3 var(--cycle) var(--ease) infinite; }
@keyframes solid-in-1 { 0%,28% { opacity: 0; transform: translateY(8px); } 34% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes solid-in-2 { 0%,34% { opacity: 0; transform: translateY(8px); } 41% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes solid-in-3 { 0%,41% { opacity: 0; transform: translateY(8px); } 47% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

/* CTA pops into place, then flashes when clicked. */
.build-wrap .cta-group {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: cta-pop var(--cycle) var(--ease) infinite;
}
@keyframes cta-pop {
  0%,47% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.07); }
  52% { transform: scale(1); }
  63% { transform: scale(1); }
  64% { transform: scale(0.94); }
  66% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Cursor flies in, clicks the CTA, slips away. */
.build-wrap .cursor {
  opacity: 0; transform: translate(300px, 290px); transform-box: view-box;
  animation: cursor-run var(--cycle) var(--ease) infinite;
}
@keyframes cursor-run {
  0%,52% { opacity: 0; transform: translate(300px, 290px); }
  55% { opacity: 1; }
  62% { opacity: 1; transform: translate(64px, 200px); }
  70% { opacity: 1; transform: translate(64px, 200px); }
  76%,100% { opacity: 0; transform: translate(64px, 200px); }
}
.build-wrap .ripple {
  fill: none; stroke: #6F9E47; stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: ripple-out var(--cycle) linear infinite;
}
@keyframes ripple-out {
  0%,63% { opacity: 0; transform: scale(0.2); }
  64% { opacity: 0.8; }
  69%,100% { opacity: 0; transform: scale(1.6); }
}

/* Load-time chip stamps in after the click. */
.build-wrap .load-chip {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: chip-stamp var(--cycle) var(--ease) infinite;
}
@keyframes chip-stamp {
  0%,68% { opacity: 0; transform: scale(1.5); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes callout-in-1 {
  0%,56% { opacity: 0; transform: translateY(6px); }
  60% { opacity: 1; transform: none; }
  94% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes callout-in-2 {
  0%,70% { opacity: 0; transform: translateY(6px); }
  74% { opacity: 1; transform: none; }
  94% { opacity: 1; }
  100% { opacity: 0; }
}

/* Reduced motion: freeze on the finished site, no loop. */
@media (prefers-reduced-motion: reduce) {
  .build-wrap .stage, .build-wrap .wire, .build-wrap .sg, .build-wrap .cta-group,
  .build-wrap .cursor, .build-wrap .ripple, .build-wrap .load-chip, .callout { animation: none; }
  .build-wrap .sg, .build-wrap .cta-group, .callout { opacity: 1; transform: none; }
  .build-wrap .load-chip { opacity: 1; transform: none; }
  .build-wrap .wire, .build-wrap .cursor, .build-wrap .ripple { opacity: 0; }
}

@media (max-width: 900px) {
  .build-wrap { padding: 0; }
  .callout { display: none; }
}