/* ------------------------------------------------------------------
   Guru placements.

   Three placements, chosen off design/directstay-guru-placements-options.html:

     B4  punctuation       - one guru at the reassurance beat (.story-promise)
     C1  margin guide      - one guru in the left gutter beside the pricing
                             heading, peeking up from the fold

   Motion is the CRM's closed vocabulary, ported from
   ~/Code/web/directstay-app/components/guru/GuruMoment.module.css with its
   duration constants unchanged. Seven verbs shared across every placement is
   a system; a bespoke entrance per placement is twenty inventions that happen
   to use the same drawing. If a placement seems to need an eighth verb, the
   placement is wrong, not the vocabulary.

   A3, the guru riding the WhatsApp dock, was built and then removed: a mascot
   that follows the reader down the page is one more thing moving in a corner
   that already has a bubble and a button in it.
   ------------------------------------------------------------------ */

:root{
  /* Shared with the CRM's app/tokens.css. Do not retune one of these in
     isolation; the site and the product are meant to feel like one hand. */
  --guru-dur-rise:500ms;
  --guru-dur-lean:560ms;
  --guru-dur-peek:550ms;
  --guru-dur-drop:700ms;
  --guru-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Every guru image. transform-origin sits at his feet so a wobble pivots
   where he stands rather than through his middle. */
.guru-img{
  display:block;
  width:auto;
  object-fit:contain;
  transform-origin:50% 84%;
  pointer-events:none;
  user-select:none;
}

/* ---- B4 · punctuation -------------------------------------------
   The one beat on the homepage that answers a fear ("nothing gets switched
   off"), so it gets the one verb that enters downward.
   ------------------------------------------------------------------ */

.story-promise{position:relative}

/* .story-promise is space-between, which would park him at the far left with
   a canyon between him and the sentence he belongs to. Pushing the CTA out
   with an auto margin instead keeps the pair reading as one unit. */
.story-promise>p{margin-right:auto}

.guru-beat{
  flex:0 0 auto;
  margin:0 22px 0 0;
  align-self:flex-end;
}
.guru-beat .guru-img{height:132px}

.guru-beat[data-guru-play="1"] .guru-img{
  animation:guruDrop var(--guru-dur-drop) var(--guru-ease-out) both;
}

/* ---- L4 · edge lean, on the three level cards --------------------
   He straddles the seam between the copy column and the visual column: the
   one band of a .stack-card where nothing is written. One pose per tier, so
   the three cards read as one character's progression rather than three cards
   that happen to share a mascot - Growth points at what you get, Scale sits
   still because the admin runs itself, Elite celebrates the portfolio.

   He sits ON the 50% seam, not inside the visual column. 62% was tried first
   and it put him in the middle of the artwork: fine on Growth, where he ended
   up pointing at the browser mockup, but on Scale it stacked a white guru
   directly beneath the existing white figure and the two read as one blob.
   The seam is the only vertical line on the card with nothing either side of
   it at this height - the copy is vertically centred well above, and each
   illustration is centred in its own column to the right.
   ------------------------------------------------------------------ */

/* No position declaration on .stack-card here: it is position:sticky, which
   already establishes a containing block for an absolute child. Overriding it
   to relative would drop the whole sticky stacking the section is built on. */
.guru-lean{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:2;
  transform:translateX(-50%);
  pointer-events:none;
}
.guru-lean .guru-img{
  height:clamp(150px,22vh,232px);
  filter:drop-shadow(0 14px 20px rgb(25 23 28 / .2));
}

.guru-lean[data-guru-play="1"]{
  animation:guruLeanIn var(--guru-dur-lean) var(--guru-ease-out) both;
}

@keyframes guruLeanIn{
  from{opacity:0;transform:translateX(-50%) translateY(22px) rotate(-6deg)}
  to{opacity:1;transform:translateX(-50%) translateY(0) rotate(0)}
}

/* Under 900px the card turns into two stacked rows, so the seam he was drawn
   against turns horizontal. He moves to it rather than being dropped: same
   idea, same overlap, ninety degrees around.

   He becomes a GRID ITEM here rather than staying absolute against the card.
   Absolute with `top:0` put him 62% of his height above the card's own top
   edge, and .stack-card is overflow:hidden, so he was sliced in half by the
   card he belongs to. Sharing the visual row's cell keeps him inside the box
   and still lets him hang over the row boundary. */
@media (max-width:900px){
  .guru-lean{
    position:relative;
    grid-row:2;
    grid-column:1;
    left:auto;
    bottom:auto;
    justify-self:end;
    align-self:start;
    margin-right:16px;
    transform:translateY(-58%);
  }
  .guru-lean .guru-img{height:clamp(104px,17vh,148px)}

  @keyframes guruLeanIn{
    from{opacity:0;transform:translateY(-58%) translateY(18px) rotate(-6deg)}
    to{opacity:1;transform:translateY(-58%) rotate(0)}
  }
}

/* ---- C1 · margin guide ------------------------------------------
   He lives in the section's own left gutter and never crosses into the
   reading column. On anything narrower than the gutter he is simply absent,
   because a margin guide with no margin is just a guru in the way.
   ------------------------------------------------------------------ */

.pricing-section{position:relative;overflow:hidden}

.guru-margin{
  position:absolute;
  left:clamp(8px,2.4vw,44px);
  top:96px;
  width:132px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.guru-margin .guru-img{height:150px}

.guru-margin[data-guru-play="1"] .guru-img{
  animation:guruPeek var(--guru-dur-peek) var(--guru-ease-out) both;
}

/* Below 1180px the three price cards stop being a row and the section loses
   its gutter, so there is nowhere for him to stand that is not the content. */
@media (max-width:1180px){
  .guru-margin{display:none}
}

@media (max-width:760px){
  /* The promise stacks to a column here, so he sits above the line rather
     than beside it, and comes down a size to match the smaller measure. */
  .guru-beat{align-self:flex-start;margin:0 0 4px}
  .guru-beat .guru-img{height:104px}
}

/* ---- the vocabulary ---------------------------------------------
   Copied verbatim from the CRM. Same numbers, same curves.
   ------------------------------------------------------------------ */

@keyframes guruPeek{
  from{transform:translateY(64%)}
  to{transform:translateY(30%)}
}

@keyframes guruDrop{
  0%{opacity:0;transform:translateY(-38px)}
  62%{opacity:1;transform:translateY(6px)}
  82%{transform:translateY(-3px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Reduced motion shows the SETTLED state immediately, not a faster animation.
   Nothing here may depend on an animation's end state to become visible, or
   it vanishes entirely under this rule - which is why .guru-margin carries
   its own settled transform rather than inheriting one from guruPeek's end
   frame. */
@media (prefers-reduced-motion:reduce){
  .guru-img{animation:none !important}
  .guru-margin .guru-img{transform:translateY(30%)}
}