/* =============================================================================
   COACH SECTION — one intelligence, two levels of action
   The layout performs the message: a conversation (signal, violet/blue)
   feeds the Bloom core, which streams value out to two role cards.
   Seller side is keyed violet (personal coaching), director side mint
   (team-level outcome). Loaded via page-registry deferredStyles.
   ============================================================================= */

.home-coach {
  padding-top: clamp(6.5rem, 11vw, 10rem);
}

.home-coach__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- The single input: a conversation happening --------------------------- */

.home-coach__feed {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  color: #c9c6dd;
  background: var(--home-surface);
  font-family: var(--home-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-coach__feed-wave {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 1rem;
}

.home-coach__feed-wave i {
  width: 2px;
  height: 30%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--home-violet), var(--home-blue));
  animation: home-coach-wave 1.3s ease-in-out infinite;
}

.home-coach__feed-wave i:nth-child(2) {
  height: 70%;
  animation-delay: 0.15s;
}

.home-coach__feed-wave i:nth-child(3) {
  height: 100%;
  animation-delay: 0.3s;
}

.home-coach__feed-wave i:nth-child(4) {
  height: 60%;
  animation-delay: 0.45s;
}

.home-coach__feed-wave i:nth-child(5) {
  height: 40%;
  animation-delay: 0.6s;
}

@keyframes home-coach-wave {
  0%,
  100% {
    transform: scaleY(0.55);
  }

  50% {
    transform: scaleY(1);
  }
}

/* Vertical beam carrying the conversation down into the core. */
.home-coach__drop {
  position: relative;
  width: 2px;
  height: clamp(2.6rem, 4.5vw, 3.8rem);
  overflow: hidden;
  margin: 0.4rem 0 0.6rem;
  background: linear-gradient(180deg, rgba(124, 60, 255, 0.12), rgba(124, 60, 255, 0.85));
}

.home-coach__drop i {
  position: absolute;
  left: -1px;
  width: 3px;
  height: 0.9rem;
  border-radius: 999px;
  background: #b394ff;
  box-shadow: 0 0 10px rgba(169, 140, 255, 0.9);
  animation: home-coach-drop 1.6s ease-in infinite;
}

@keyframes home-coach-drop {
  from {
    top: -1rem;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  to {
    top: 110%;
    opacity: 0.4;
  }
}

/* --- Core + two role cards ------------------------------------------------- */

/* The two cards share one row track per block (topline / title / body / list),
   so a longer title on one side can't push its body, rule and list out of step
   with the other. Each card subscribes to those rows via subgrid, which also
   makes the pair equal-height for free. */
.home-coach__roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.25rem minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-items: stretch;
  width: 100%;
}

.home-role-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  min-height: 29rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--home-line);
  border-radius: 2rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 37%), var(--home-surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.2);
}

.home-role-card--seller {
  border-top-right-radius: 0.75rem;
}

.home-role-card--director {
  border-top-left-radius: 0.75rem;
  background:
    radial-gradient(circle at 100% 0, rgba(25, 206, 136, 0.07), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 37%), var(--home-surface);
}

.home-role-card__topline {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.home-role-card__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(154, 86, 255, 0.3);
  border-radius: 0.9rem;
  color: #c5b4ff;
  background: rgba(101, 44, 255, 0.12);
}

.home-role-card--director .home-role-card__icon {
  border-color: rgba(25, 206, 136, 0.32);
  color: #7fe6bd;
  background: rgba(25, 206, 136, 0.09);
}

.home-role-card--director .home-role-card__eyebrow {
  color: #6fe0b2;
}

.home-role-card__icon svg {
  width: 1.35rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.home-role-card__eyebrow {
  margin: 0;
}

/* Role titles are the sentence each person can finally say — set them as
   spoken lines. Quote glyphs follow the page language. */
.home-coach {
  quotes: '\201C' '\201D';
}

.home-coach:lang(fr) {
  quotes: '\AB\A0' '\A0\BB';
}

.home-role-card h3 {
  max-width: 17ch;
  margin: 0;
  color: var(--home-text);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.08;
  quotes: inherit;
}

.home-role-card h3::before {
  content: open-quote;
  color: #8d5bff;
}

.home-role-card h3::after {
  content: close-quote;
  color: #8d5bff;
}

.home-role-card--director h3::before,
.home-role-card--director h3::after {
  color: #2fbe8b;
}

.home-role-card__body {
  margin: 1.15rem 0 0;
  color: var(--home-muted);
  font-size: 1rem;
  /* em, not a unitless number: descendants then inherit this exact line box as
     a length, so the larger payoff below can't stretch the lines it sits on. */
  line-height: 1.65em;
}

/* Each body is a setup followed by its payoff — the payoff carries the promise,
   so it steps up in size and weight while the setup stays quiet. */
.home-role-card__body strong {
  color: var(--home-text);
  font-size: 1.09em;
  font-weight: 700;
}

.home-role-card__list {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 0 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--home-line);
  list-style: none;
}

.home-role-card__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.7rem;
  color: #d4d2e4;
  font-size: 0.95rem;
  line-height: 1.5;
}

.home-role-card__list li > span:first-child {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  color: var(--home-mint);
  background: rgba(25, 206, 136, 0.1);
  font-size: 0.7rem;
}

/* --- Bridge: the core and its two outgoing beams --------------------------- */

/* The connector spans the gap between the cards, so it centres on the row
   rather than stretching with them. */
.home-coach__bridge {
  display: flex;
  grid-row: 1 / -1;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.home-coach__beam {
  position: relative;
  width: 1.8rem;
  height: 1px;
  overflow: visible;
}

.home-coach__beam--seller {
  background: linear-gradient(90deg, rgba(124, 60, 255, 0.7), rgba(124, 60, 255, 0.12));
}

.home-coach__beam--director {
  background: linear-gradient(90deg, rgba(25, 206, 136, 0.12), rgba(25, 206, 136, 0.7));
}

.home-coach__beam i {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
}

.home-coach__beam--seller i {
  background: #b394ff;
  box-shadow: 0 0 9px rgba(169, 140, 255, 0.9);
  animation: home-coach-beam-out-left 1.6s ease-out infinite;
}

.home-coach__beam--director i {
  background: #4bddaa;
  box-shadow: 0 0 9px rgba(75, 221, 170, 0.85);
  animation: home-coach-beam-out-right 1.6s ease-out infinite;
}

/* Value streams outward from the core, on the same clock as the input drop. */
@keyframes home-coach-beam-out-left {
  from {
    right: 0;
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  to {
    right: calc(100% - 5px);
    opacity: 0;
  }
}

@keyframes home-coach-beam-out-right {
  from {
    left: 0;
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  to {
    left: calc(100% - 5px);
    opacity: 0;
  }
}

.home-coach__core {
  position: relative;
  display: grid;
  width: 4.6rem;
  height: 4.6rem;
  place-items: center;
  border: 1px solid rgba(154, 86, 255, 0.5);
  border-radius: 1.5rem;
  background: rgba(14, 10, 38, 0.94);
  box-shadow: 0 0 52px rgba(101, 44, 255, 0.4);
}

.home-coach__core::before {
  position: absolute;
  inset: -0.55rem;
  z-index: -1;
  border: 1px solid rgba(154, 86, 255, 0.16);
  border-radius: 1.85rem;
  content: '';
}

/* Breathing ring: the core is alive, quietly processing. */
.home-coach__core::after {
  position: absolute;
  inset: -0.55rem;
  z-index: -1;
  border: 1px solid rgba(154, 86, 255, 0.4);
  border-radius: 1.85rem;
  content: '';
  animation: home-coach-pulse 3.2s ease-out infinite;
}

@keyframes home-coach-pulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }

  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

.home-coach__core img {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 24%;
  object-fit: contain;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .home-coach__roles {
    grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr);
  }

  .home-role-card {
    min-height: 31rem;
  }
}

@media (max-width: 760px) {
  .home-coach {
    padding-top: 5.6rem;
  }

  /* Stacked in one column: the cards no longer sit side by side, so there is
     nothing to align across — drop the shared rows or they would overlap. */
  .home-coach__roles {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .home-role-card,
  .home-coach__bridge {
    grid-row: auto;
  }

  .home-role-card {
    display: block;
    min-height: auto;
    border-radius: 1.5rem;
  }

  .home-role-card--seller {
    border-bottom-right-radius: 0.55rem;
  }

  .home-role-card--director {
    border-top-left-radius: 0.55rem;
  }

  .home-coach__bridge {
    height: 5.5rem;
    flex-direction: column;
  }

  .home-coach__beam {
    width: 1px;
    height: 1rem;
  }

  .home-coach__beam--seller {
    background: linear-gradient(180deg, rgba(124, 60, 255, 0.7), rgba(124, 60, 255, 0.12));
  }

  .home-coach__beam--director {
    background: linear-gradient(180deg, rgba(25, 206, 136, 0.12), rgba(25, 206, 136, 0.7));
  }

  .home-coach__beam i {
    display: none;
  }

  .home-coach__core {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.1rem;
  }

  .home-coach__core img {
    width: 2.4rem;
    height: 2.4rem;
  }
}

@media (max-width: 430px) {
  .home-role-card {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-coach__feed-wave i,
  .home-coach__drop i,
  .home-coach__beam i,
  .home-coach__core::after {
    animation: none;
  }

  .home-coach__drop i {
    top: 40%;
    opacity: 0.8;
  }
}