/* Intro / Studio. Values measured on fora.so section#about, see docs/research/components/intro.spec.md
   Framer breakpoints reproduced exactly: base >=1280, (min-width:810px) and (max-width:1023.98px), (max-width:809.98px). */

.gf-intro{
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  align-items:center;
  gap:0;
  flex:none;
  width:100%;
  /* Full bleed. This cap put the whole SECTION in a 1600px box, so on any screen wider than that
     its ground stopped 1600px across and the page went black down both sides. The content keeps
     its own 1080 column inside, so only the ground moves. */
  margin-inline:auto;
  height:min-content;
  padding:0 24px;
  position:relative;
  overflow:visible;
}
/* Framer paints the section frame as an inset ::after so it never affects layout:
   left/right 1px #ffffff1a, top/bottom 0 (verified rgb(26,26,26) at x 0 and x 1439). */
.gf-intro::after{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-width:0 1px;
  border-style:solid;
  border-color:var(--ink-10);
  box-sizing:border-box;
  pointer-events:none;
}

/* content column, 1080 at 1440 (x 180 to 1260) */
.gf-intro-content{
  display:flex;
  flex-flow:column nowrap;
  justify-content:flex-start;
  align-items:center;
  gap:80px;
  flex:1 0 0;
  width:1px;
  max-width:1080px;
  height:min-content;
  padding:180px 0;
  position:relative;
}

.gf-intro-row{
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  align-items:center;
  gap:0;
  flex:none;
  width:100%;
  height:min-content;
  padding:0;
  position:relative;
}

/* text column, 640 at 1440 */
.gf-intro-col{
  display:flex;
  flex-flow:column nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:36px;
  flex:1 0 0;
  width:1px;
  max-width:640px;
  height:min-content;
  padding:0;
  position:relative;
}

/* ---- eyebrow chip: 79.66 x 30 on Fora, not a link, no hover state ---- */
.gf-intro-chip-wrap{flex:none;width:auto;height:auto;position:relative}

.gf-intro-chip{
  display:inline-flex;
  flex-flow:row nowrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:min-content;
  height:30px;
  padding:4px 16px;
  border-radius:393px;
  background:var(--ink-10);
  overflow:hidden;
  position:relative;
}
/* 1px rgba(255,255,255,.1) frame, drawn as an inset ::after like Fora's [data-border] rule */
.gf-intro-chip::after{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:1px solid var(--ink-10);
  border-radius:inherit;
  box-sizing:border-box;
  pointer-events:none;
}

.gf-intro-chip-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:215px;
  background:var(--ink);
  will-change:opacity;
  /* measured: linear triangle wave 0 -> 1 -> 0, 1.0s per leg, 2.0s period, opacity only */
  animation:gf-intro-dot 2s linear infinite;
}
@keyframes gf-intro-dot{
  0%{opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}

.gf-intro-chip-label{
  font-family:var(--font);
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  font-weight:400;
  color:var(--ink-65);
  text-align:center;
  white-space:pre;
  user-select:none;
}

/* ---- scroll-lit paragraphs ---- */
.gf-intro-text{
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex:none;
  width:100%;
  height:min-content;
  padding:0;
  position:relative;
  overflow:clip;
}

.gf-intro-list{
  display:flex;
  flex-flow:column nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:36px;
  flex:1 0 0;
  width:1px;
  position:relative;
}

.gf-intro-p{
  font-family:var(--font);
  font-size:28px;
  line-height:37.8px;
  letter-spacing:-.84px;
  font-weight:400;
  color:var(--ink);
  text-align:start;
  text-wrap:balance;
  width:100%;
  /* Measured 0.25 -> 1 and back on the same curve (intro.json fits.cubicBezier). The resting
     value is raised to .45: at .25 the unlit paragraph is 2:1 against the page, which is text a
     reader can see and cannot read. Lit is still 1, so the lift still reads. */
  opacity:.45;
  transition:opacity 320ms cubic-bezier(.3,.1,.1,1);
  will-change:opacity;
}
.gf-intro-p.is-lit{opacity:1}
/* fora.so lifts one phrase in each intro paragraph to weight 500 in the heading ink (3 runs, measured in page.html) */
.gf-intro-em{font-weight:500;color:var(--ink)}

/* ---- 810 to 1279 ---- */
@media (min-width:810px) and (max-width:1023.98px){
  .gf-intro{flex-direction:column}
  .gf-intro-content{flex:none;width:100%;max-width:720px;gap:64px;padding:120px 0}
  .gf-intro-col{max-width:560px}
  .gf-intro-p{font-size:24px;line-height:32.4px;letter-spacing:-.72px}
}

/* ---- up to 809 (tablet 768 and phone 390 both land here on Fora) ---- */
@media (max-width:809.98px){
  .gf-intro-content{max-width:720px;gap:48px;padding:80px 0}
  .gf-intro-col{max-width:560px}
  .gf-intro-p{font-size:22px;line-height:29.7px;letter-spacing:-.66px}
}

@media (prefers-reduced-motion:reduce){
  .gf-intro-p{opacity:1;transition:none}
  .gf-intro-chip-dot{animation:none;opacity:.7}
}