/* Guest CRM opener: the four channels a guest actually uses converge, shrink,
   and drop into the sentence that explains where they end up. */

.inbox-converge{
  position:relative;
  padding:clamp(82px,8vw,128px) var(--gutter);
  background:
    linear-gradient(180deg, rgba(25,23,28,.1) 0%, rgba(25,23,28,.35) 55%, rgba(25,23,28,.7) 100%),
    var(--ink) url('../public/img/inbox-converge-bg.webp') center 30%/cover no-repeat;
  color:var(--cloud);
  overflow:hidden;
  transition:background-color .45s var(--ease);
}

.inbox-converge__inner{
  width:min(100%,var(--max));
  margin-inline:auto;
}

.inbox-converge__header{
  position:absolute;
  top:50%;
  left:50%;
  width:min(100%,var(--max));
  padding-inline:var(--gutter);
  transform:translate(-50%,-50%);
  text-align:center;
}

.inbox-converge__header h2{
  max-width:16ch;
  margin:0 auto;
  font-size:clamp(3rem,6vw,5.6rem);
  line-height:.9;
  letter-spacing:-.04em;
}

.inbox-converge__header p{
  max-width:44ch;
  margin:20px auto 0;
  color:rgb(243 243 245 / .62);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.5;
}

.inbox-converge__icons{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2.6vw,40px);
  transform:translate(-50%,-50%);
  will-change:transform;
}

.inbox-icon,
.duplicate-icon{
  width:clamp(84px,9vw,140px);
  height:clamp(84px,9vw,140px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:26px;
  background:var(--white);
  box-shadow:0 26px 60px rgb(0 0 0 / .3);
  will-change:transform;
}

.inbox-icon svg,
.duplicate-icon svg{
  width:56%;
  height:56%;
}

.duplicate-icon{
  position:absolute;
  z-index:4;
  border-radius:10px;
  box-shadow:0 10px 24px rgb(76 29 149 / .22);
  pointer-events:none;
}

.duplicate-icon svg{width:64%;height:64%}

.inbox-converge__statement{
  position:relative;
  z-index:2;
  width:min(100%,1080px);
  margin-inline:auto;
  min-height:100vh;
  display:flex;
  align-items:center;
}

.inbox-converge__statement p{
  margin:0;
  font-size:clamp(2rem,3.8vw,3.6rem);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.035em;
}

.text-segment{display:inline-block}

.placeholder-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin:0 6px -8px;
  border-radius:10px;
  background:var(--white);
  box-shadow:0 10px 24px rgb(76 29 149 / .22);
  vertical-align:baseline;
}

.placeholder-icon svg{width:64%;height:64%}

/* Live state is added by js/inbox-converge.js. Without it the section is a
   plain statement with the two marks sitting inline where they belong. */
.inbox-converge:not(.inbox-converge--live) .inbox-converge__header,
.inbox-converge:not(.inbox-converge--live) .inbox-converge__icons{
  position:static;
  transform:none;
  margin:0 auto clamp(36px,5vw,64px);
  padding-inline:0;
}

.inbox-converge:not(.inbox-converge--live) .inbox-converge__statement{
  min-height:0;
}

/* Exactly one viewport tall, so the centred marks sit on the viewport centre
   and the whole effect can be computed without reading the DOM back. */
.inbox-converge--live{
  height:100vh;
  padding:0;
}

/* js/inbox-converge.js centres the icons on window.innerHeight / 2 and pins
   the section for exactly this box's height. A bare 100vh can outgrow the
   real visible viewport while iOS Safari's chrome is expanded (the same
   class of bug js/viewport.js exists to fix), which would leave the icons
   off-centre and the pin misjudging its own scroll distance on a phone. */
@supports (height: 100lvh){
  .inbox-converge--live{height:max(100lvh, var(--vvh,0px))}
}

.inbox-converge--live .inbox-converge__statement{
  min-height:100vh;
  padding-inline:var(--gutter);
}

/* While the effect runs, the cloned marks stand in for these. Once the pin is
   released the clones are dropped and the real inline marks take over, so
   nothing is left floating over the sections below. */
.inbox-converge--live .placeholder-icon{visibility:hidden}
.inbox-converge--live.inbox-converge--landed .placeholder-icon{visibility:visible}

.inbox-converge--light{background:var(--mist);color:var(--ink)}
.inbox-converge--light .inbox-converge__header p{color:var(--muted)}

@media (max-width:1000px){
  .inbox-converge{padding:118px 20px 92px}
  .inbox-icon{width:72px;height:72px;border-radius:18px}
  .inbox-converge__icons{gap:14px}
  .inbox-converge__statement p{font-size:clamp(1.6rem,7vw,2.4rem)}
  .placeholder-icon{width:34px;height:34px;margin-bottom:-6px}

  .inbox-converge--live .inbox-converge__statement{
    align-items:flex-start;
    padding-top:clamp(72px,12vh,120px);
  }
}