/* 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: 16px 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 */
.headline, .copy, .email span, .built p, .pill { text-box: trim-both cap alphabetic; }

/* the text fades in on load, one block shortly after the other */
.headline, main > .copy, .story, .email, .built { animation: fade-in 2s ease backwards; }
main > .copy { animation-delay: 0.15s; }
.story { animation-delay: 0.3s; }
.email { animation-delay: 0.45s; }
.built { animation-delay: 0.6s; }
@keyframes fade-in { from { opacity: 0; } }

/* logo (Figma 3133:10658): 28px, 16px from the top, where the name used to be */
.logo { height: 28px; }
.logo img { display: block; width: 28px; height: 28px; margin: 0 auto; }

.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-trim: 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: solid var(--bg);
  border-width: 0 6px;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.reel[aria-expanded='true'] { cursor: zoom-out; }
/* js/home.js draws the video onto the canvas with the rounded corners cut into the picture itself,
   then adds .painted. browsers can drop a video's own rounding while it is being resized, so the
   video's radius is only the fallback for when the script has not run */
.reel video, .reel canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.reel video { object-fit: cover; border-radius: 6px; clip-path: inset(0 round 6px); }
.reel canvas { position: absolute; left: 0; top: 0; visibility: hidden; }
.reel.painted canvas { visibility: visible; }
.reel.painted video { opacity: 0; }
/* hovering the thumbnail grows the picture a touch, into its own white edge, so the text stays put */
.reel video, .reel canvas { transition: scale 0.3s var(--ease); }
@media (hover: hover) {
  .reel[aria-expanded='false']:hover video, .reel[aria-expanded='false']:hover canvas { scale: 1.03; }
}
.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 */
/* each bubble's tail end sits at a fixed offset, in headline ems, from its point in the text */
.anchor { position: relative; }
.bubble {
  position: absolute;
  display: block;
  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;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  translate: -50% -50%;
}
@supports not (text-box: trim-both cap alphabetic) {
  .bubble .pill { padding: 4px 12px; }
}

.bubble-blue {
  width: 114.94px;
  height: 44.79px;
  left: calc(50% - 0.0915em - 5px);
  top: calc(0.3623em - 44px);
  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;
  left: calc(-0.1287em - 4px);
  top: calc(1.2386em - 3px);
  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, .reel video, .reel canvas { transition: none; }
}