/* sal.design placeholder home (Figma 3129:10419 desktop, 3129:10508 phone) */

@font-face {
  font-family: 'Intern';
  src: url('/fonts/Intern-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #fff;
  --ink: #000;
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* sizes run from the phone comp (400 wide) to the desktop comp (1200 and up) */
  --grow: clamp(0px, (100vw - 400px) / 800, 1px);
}
@media (min-width: 700px) { :root { --bg: #fdfdfc; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 27px 20px 106px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Intern', system-ui, sans-serif;
  font-weight: 400;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  overflow-x: hidden;
}
h1, p { margin: 0; font-weight: 400; }
main, .built { display: flex; flex-direction: column; align-items: center; }

/* cap height trim, as the comps measure from it */
.name, .headline, .copy, .email span, .built p, .pill { text-box: trim-both cap alphabetic; }

.name {
  font-size: calc(20px + 4 * var(--grow));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.headline {
  position: relative;
  width: min(1136px, 100vw - 24px);
  margin-top: calc(114px + 136 * var(--grow));
  font-size: calc(40px + 24 * var(--grow));
  line-height: 1.15;
  letter-spacing: -0.045em;
  text-wrap: pretty;
}

.copy {
  width: min(1024px, 100%);
  font-size: calc(20px + 8 * var(--grow));
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.headline + .copy { margin-top: calc(71px + 17 * var(--grow)); }
.story { position: relative; width: min(1024px, 100%); margin-top: calc(44px + 27 * var(--grow)); }

/* the paragraph that flows around the reel: one row per line, split in two beside the reel */
.story .copy.set { text-box: none; margin-block: -0.26em; }
.line { display: flex; justify-content: center; white-space: nowrap; }
.line .seg { flex: 1 1 0; min-width: 0; }
.line .seg.l { text-align: right; }
.line .seg.r { text-align: left; }
.line .gap { flex: none; }

.reel {
  position: absolute;
  left: 50%;
  top: 0;
  width: 136px;
  height: 70.7px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  border: 6px solid #fff;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.reel[aria-expanded='true'] { cursor: zoom-out; }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; pointer-events: none; }
.reel:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.story:not(.ready) .reel { visibility: hidden; }

.email {
  margin: calc(44px + 17 * var(--grow)) 0 0;
  padding: calc(18px + 2 * var(--grow)) 32px;
  border: 0;
  border-radius: 100px;
  background: #eaeaea;
  color: #000;
  font: inherit;
  font-size: calc(16px + 4 * var(--grow));
  line-height: 1.25;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.email span { display: block; }
@media (hover: hover) { .email:hover { background: #e2e2e2; } }
.email:active { transform: scale(0.97); }
.email:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.built { margin-top: 134px; gap: 27px; }
.built p { font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; }
.folder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 90px;
  border-radius: 6px;
  transition: transform 0.3s var(--ease);
}
.folder img { display: block; width: 84px; height: 68.511px; }
@media (hover: hover) { .folder:hover { transform: translateY(-3px) scale(1.04); } }
.folder:active { transform: scale(0.96); }
.folder:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* chat bubbles (Figma 3129:10533 and 3129:10538): a tilted pill and its tail. they spring out
   of the tail end the way the service pills did on the old hero, the blue one 2s after load
   and the gray one 2s later */
.bubble {
  position: absolute;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  scale: 0.3;
  animation: bubble-pop 0.6s var(--pop) forwards, bubble-fade 0.3s var(--ease) forwards;
}
.bubble .tail { position: absolute; display: block; }
.bubble .pill {
  position: absolute;
  display: block;
  padding: 8px 12px;
  border-radius: 16px;
  translate: -50% -50%;
}
@supports not (text-box: trim-both cap alphabetic) {
  .bubble .pill { padding: 4px 12px; }
}

.bubble-blue {
  width: 114.94px;
  height: 44.79px;
  right: clamp(0px, (100vw - 400px) / 8, 99px);
  top: clamp(-36px, 6.6px - (100vw - 400px) * 0.0533, 6.6px);
  transform-origin: 5px 44px;
  animation-delay: 2s;
}
.bubble-blue .tail { left: 4.57px; top: 26.94px; transform-origin: 8.82px 7.357px; rotate: 159.08deg; scale: 1 -1; }
.bubble-blue .pill { left: 57.06px; top: 18.78px; rotate: -6.52deg; background: #cdf1ff; color: #438da7; }

.bubble-gray {
  width: 100.33px;
  height: 36.62px;
  right: clamp(-2px, (100vw - 400px) / 20, 40px);
  top: calc(100% + 11px + 4 * var(--grow));
  transform-origin: 4px 3px;
  animation-delay: 4s;
}
.bubble-gray .tail { left: 3.03px; top: 2.43px; transform-origin: 8.82px 7.357px; rotate: -163.07deg; }
.bubble-gray .pill { left: 50px; top: 21.95px; rotate: 2.53deg; background: #eaeaea; color: #9a9a9a; }

@keyframes bubble-pop { to { scale: 1; } }
@keyframes bubble-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bubble { scale: 1; animation: bubble-fade 0.3s linear forwards; }
  .bubble-blue { animation-delay: 2s; }
  .bubble-gray { animation-delay: 4s; }
  .email, .folder { transition: none; }
}