/* ============================================================
   pulse-brand.css — Vitagri Pulse shared brand identity
   Heart-shape (Vitagri heart-a) is the central visual hook.
   Drop-in classes that work alongside any per-page hero.
   ============================================================ */

/* -- Heart watermark ----------------------------------------
   Centred behind hero text. Parent must be position:relative
   and overflow:hidden. Add the markup right after the hero
   opening tag:

     <img class="brand-watermark"
          src="/heart_white.webp" alt="" aria-hidden="true">
*/
.brand-watermark{
  position:absolute;
  left:50%; top:50%;
  width:min(640px, 88%);
  height:96%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%, -50%);
  opacity:0.085;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
@media (max-width:520px){
  .brand-watermark{
    opacity:0.075;
  }
}

/* -- Heartbeat ECG line -------------------------------------
   Slow opacity pulse across the bottom of the hero.
   Markup pattern (inline SVG, 12 cycles across 2400 viewbox):

     <svg class="brand-ecg" viewBox="0 0 2400 60"
          preserveAspectRatio="none" aria-hidden="true">
       <path d="..." />
     </svg>
*/
.brand-ecg{
  position:absolute; left:0; right:0; bottom:24px;
  width:100%; height:60px;
  color:rgba(42,157,143,0.32);
  pointer-events:none;
  z-index:1;
}
.brand-ecg path{
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  animation:brandEcgPulse 8s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(52,194,177,0.18));
}
@keyframes brandEcgPulse{
  0%, 100% { opacity:0.32 }
  50%      { opacity:0.55 }
}
@media (prefers-reduced-motion:reduce){
  .brand-ecg path{ animation:none; opacity:0.4 }
}

/* -- Heart-bullet list --------------------------------------
   Lists where each item is prefixed with the Vitagri heart-a
   silhouette. Replaces the lime dot.

     <ul class="heart-bullet"> <li>...</li> </ul>
     <ul class="heart-bullet heart-bullet--berry">...</ul>
*/
.heart-bullet{ list-style:none; margin:0; padding:0 }
.heart-bullet li{
  position:relative; padding:6px 0 6px 30px;
  line-height:1.55; color:var(--ink, #1a1510);
}
.heart-bullet li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:18px; height:18px;
  background:url('/heart_teal.webp') no-repeat center / contain;
}
.heart-bullet--berry li::before{
  background-image:url('/heart_berry.webp');
}
.heart-bullet--white li::before{
  background-image:url('/heart_white.webp');
}

/* -- Heart pulse loader -------------------------------------
   Replace generic spinners with the heart-a icon, beating
   on a soft cardiac rhythm with a teal glow.

     <div class="heart-pulse"></div>
     <div class="heart-pulse heart-pulse--berry heart-pulse--lg"></div>
*/
.heart-pulse{
  display:inline-block;
  width:36px; height:36px;
  background:url('/heart_teal.webp') no-repeat center / contain;
  filter:drop-shadow(0 0 10px rgba(42,157,143,0.35));
  animation:heartBeat 1.4s ease-in-out infinite;
  vertical-align:middle;
}
.heart-pulse--berry{
  background-image:url('/heart_berry.webp');
  filter:drop-shadow(0 0 10px rgba(139,39,131,0.35));
}
.heart-pulse--white{
  background-image:url('/heart_white.webp');
  filter:drop-shadow(0 0 10px rgba(250,247,242,0.45));
}
.heart-pulse--lg{ width:56px; height:56px }
.heart-pulse--sm{ width:24px; height:24px }
@keyframes heartBeat{
  0%, 40%, 100% { transform:scale(1);    opacity:0.85 }
  20%           { transform:scale(1.13); opacity:1 }
  60%           { transform:scale(1.06); opacity:0.95 }
}
@media (prefers-reduced-motion:reduce){
  .heart-pulse{ animation:none }
}

/* -- Heart corner accent ------------------------------------
   Small heart silhouette in the top-right of a card, faint.
   Container becomes position:relative; child content stacks
   above the accent automatically.

     <section class="card heart-corner"> ... </section>
*/
.heart-corner{ position:relative; overflow:hidden; }
.heart-corner::after{
  content:'';
  position:absolute;
  top:-22px; right:-22px;
  width:120px; height:120px;
  background:url('/heart_teal.webp') no-repeat center / contain;
  opacity:0.06;
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
}
.heart-corner--berry::after{ background-image:url('/heart_berry.webp'); opacity:0.07 }
.heart-corner > *{ position:relative; z-index:1 }
@media (max-width:560px){
  .heart-corner::after{ width:84px; height:84px; top:-16px; right:-16px }
}

/* -- Heart divider ------------------------------------------
   Centred heart with horizontal hair-lines fading off either
   side. Use between sections instead of <hr>.

     <div class="heart-divider"
          role="separator" aria-hidden="true">
       <span class="heart-divider__icon"></span>
     </div>
*/
.heart-divider{
  display:flex; align-items:center; gap:14px;
  margin:32px auto;
  max-width:480px;
  color:rgba(42,157,143,0.4);
}
.heart-divider::before,
.heart-divider::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
}
.heart-divider__icon{
  width:22px; height:22px;
  background:url('/heart_teal.webp') no-repeat center / contain;
}

/* -- Heart text-accent --------------------------------------
   Inline heart marker before short eyebrow phrases (alternate
   to the amber diamond). Use sparingly.

     <p class="heart-eyebrow">Pulse Check · Sign up</p>
*/
.heart-eyebrow::before{
  content:'';
  display:inline-block;
  width:0.95em; height:0.95em;
  margin-right:6px;
  vertical-align:-0.12em;
  background:url('/heart_teal.webp') no-repeat center / contain;
}

/* -- Tooltip overflow guard -----------------------------------
   The shared [data-tip] system in each pulse page positions the
   bubble with `left:50%; transform:translateX(-50%)` — centred on
   the trigger. For triggers near the page's LEFT edge (avatar,
   first compose button, the leading `i` icon inside an h2 header)
   the bubble extends ~130px left of the trigger's centre and gets
   clipped at the viewport edge, so its first words read as cut off.

   Two layered fixes:
   1. `data-tip-anchor="start"` — explicit opt-in modifier. Anchors
      the bubble's LEFT edge to the trigger's left edge so it grows
      rightward and never overflows the viewport on the left. Use on
      any tooltipped element you know sits at the page's left edge.
   2. Auto-apply to the obvious common patterns: dashboard hero
      avatar, the first child of `.compose-row`, and the leading
      `.help-i` icon at the start of card headings. These are the
      offenders Rob flagged ("left-hand side of all Pulse pages"
      — explainer pop-ups partially cut off on the buttons they
      appear on, 1 May 2026).

   The override has higher specificity than the base `[data-tip]`
   rules, so no `!important` is needed. Hover/focus reveals reset
   the translation cleanly. */
/* Specificity note: most pulse pages load `pulse-brand.css` BEFORE
   their inline `<style>` block, so the page's `[data-tip]::after`
   rule (specificity 0,0,1,1) appears later in the cascade and wins
   any tie. We bump our overrides to specificity 0,0,2,1 by chaining
   `[data-tip][data-tip-anchor="start"]` so they beat the inline
   default WITHOUT needing `!important`. The auto-rules (compose-row,
   hero__avatar) already chain a class on top so they're naturally
   higher. */
[data-tip][data-tip-anchor="start"]::after,
.hero__avatar[data-tip]::after,
.compose-row > [data-tip]:first-child::after{
  left:0;
  transform:translateX(0) translateY(4px);
}
[data-tip][data-tip-anchor="start"]::before,
.hero__avatar[data-tip]::before,
.compose-row > [data-tip]:first-child::before{
  left:14px;
  transform:translateX(0) translateY(4px);
}
[data-tip][data-tip-anchor="start"]:hover::after,
[data-tip][data-tip-anchor="start"]:focus-visible::after,
.hero__avatar[data-tip]:hover::after,
.hero__avatar[data-tip]:focus-visible::after,
.compose-row > [data-tip]:first-child:hover::after,
.compose-row > [data-tip]:first-child:focus-visible::after,
[data-tip][data-tip-anchor="start"]:hover::before,
[data-tip][data-tip-anchor="start"]:focus-visible::before,
.hero__avatar[data-tip]:hover::before,
.hero__avatar[data-tip]:focus-visible::before,
.compose-row > [data-tip]:first-child:hover::before,
.compose-row > [data-tip]:first-child:focus-visible::before{
  transform:translateX(0) translateY(0);
}

/* End-anchor variant — symmetric fix for tooltipped elements that
   sit at the right edge of a row (e.g. a "Refresh ↻" pill that
   margin-left:auto's itself to the row's far right). The bubble
   anchors its RIGHT edge to the trigger's right edge so it grows
   leftward instead of overflowing on the right. Opt-in only. */
[data-tip][data-tip-anchor="end"]::after{
  left:auto; right:0;
  transform:translateX(0) translateY(4px);
}
[data-tip][data-tip-anchor="end"]::before{
  left:auto; right:14px;
  transform:translateX(0) translateY(4px);
}
[data-tip][data-tip-anchor="end"]:hover::after,
[data-tip][data-tip-anchor="end"]:focus-visible::after,
[data-tip][data-tip-anchor="end"]:hover::before,
[data-tip][data-tip-anchor="end"]:focus-visible::before{
  transform:translateX(0) translateY(0);
}