/* Hero section, including the animated "stream" into the brain. */

/* ---------- hero ---------- */
.hero{
  background:var(--espresso);color:var(--cream);
  position:relative;overflow:hidden;
  padding-block:clamp(64px,9vw,104px) clamp(72px,9vw,110px);
}
.hero::after{
  content:"";position:absolute;right:-14vw;top:-18vw;
  width:46vw;height:46vw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(232,84,110,.30),rgba(232,84,110,0) 68%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin-block:0 20px;max-width:16ch}
.hero .lede{color:rgba(245,237,230,.7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-note{
  margin-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,237,230,.4);
}

/* ---------- signature: the stream ---------- */
.stream{
  margin-top:clamp(52px,7vw,86px);
  display:grid;
  grid-template-columns:1fr clamp(56px,7vw,104px) auto clamp(56px,7vw,104px) 1fr;
  align-items:center;
}
.col{display:flex;flex-direction:column;gap:10px}
.col--in{align-items:flex-end}
.col--out{align-items:flex-start}
.chip{
  display:flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-dark);
  background:rgba(245,237,230,.045);
  font-size:.86rem;color:rgba(245,237,230,.82);white-space:nowrap;
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.col--out .chip i{background:var(--rose)}

.rail{position:relative;height:2px;background:
  repeating-linear-gradient(90deg,rgba(245,237,230,.20) 0 4px,transparent 4px 10px);}
.rail span{
  position:absolute;top:50%;left:0;width:6px;height:6px;
  margin-top:-3px;margin-left:-3px;
  border-radius:50%;background:var(--rose);
  box-shadow:0 0 12px 2px rgba(232,84,110,.55);
  animation:flowX 2.6s linear infinite;
}
.rail span:nth-child(2){animation-delay:.86s}
.rail span:nth-child(3){animation-delay:1.72s}
.rail--out span{background:var(--coral);box-shadow:0 0 12px 2px rgba(244,144,127,.5)}
@keyframes flowX{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes flowY{
  0%{top:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:100%;opacity:0}
}

/* the core: brain sits alone in flow so the rails meet its exact centre;
   both captions are absolute, so they add air without shifting alignment */
.core{position:relative;display:flex;justify-content:center}
.core::before{
  content:"";position:absolute;left:50%;top:50%;
  width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,84,110,.20),rgba(232,84,110,0) 68%);
  pointer-events:none;
}
.core__cap{
  position:absolute;left:50%;transform:translateX(-50%);
  width:max-content;max-width:170px;text-align:center;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
}
.core__cap--top{bottom:calc(100% + 20px);color:rgba(245,237,230,.6)}
.core__cap--bot{top:calc(100% + 20px);color:rgba(245,237,230,.34)}

.brain{
  position:relative;width:126px;height:126px;border-radius:36px;
  background:linear-gradient(150deg,var(--coral),var(--rose));
  display:grid;place-items:center;
  box-shadow:0 24px 60px -26px rgba(232,84,110,.85);
}
.brain svg{width:52px;height:52px;fill:#fff}
.brain::before,.brain::after{
  content:"";position:absolute;inset:0;border-radius:36px;
  border:1px solid rgba(232,84,110,.5);
  animation:pulse 3.4s ease-out infinite;
}
.brain::after{animation-delay:1.7s}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.55);opacity:0}
}
@media (max-width:900px){
  .stream{grid-template-columns:1fr;justify-items:center;gap:0}
  .col{align-items:center!important;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .rail{width:2px;height:52px;margin-block:16px;background:
    repeating-linear-gradient(180deg,rgba(245,237,230,.20) 0 4px,transparent 4px 10px);}
  .rail span{left:50%;top:0;margin:-3px 0 0 -3px;animation-name:flowY}
  .brain{width:104px;height:104px;border-radius:30px}
  .brain::before,.brain::after{border-radius:30px}
  .core{flex-direction:column;align-items:center;gap:14px}
  .core::before{width:190px;height:190px;margin:-95px 0 0 -95px}
  .core__cap{position:static;transform:none;max-width:none}
  .core__cap--top{order:-1}
}