/* ==========================================================================
   Love My Dog — Welcome dog companion
   Self-contained. Uses site tokens from styles.css (--paper, --ink, --coral…).
   Progressive enhancement:
     • No JS: dog + full message are visible, anchored to the bottom of the
       first screen (scrolls away with the page); dismiss controls are hidden.
     • JS (welcome-dog.js adds html.lmd-wd-ready): fixed companion, entrance,
       type-on text, gentle idle bob, dismiss remembered for the session.
     • Reduced motion / ?static: settled state, no movement.
   Every "hidden" frame comes from an animation fill, so if animations are
   disabled the content is simply shown.
   ========================================================================== */

.lmd-welcome{
  --wd-dog-h:clamp(170px,24.5vh,232px);   /* shorter screens get a smaller dog */
  position:absolute;               /* no-JS: bottom of the first viewport */
  left:clamp(6px,.8vw,20px);
  bottom:0;
  z-index:40;                      /* above content (float cards 3, subnav 30), below header/menu (50) and skip link (100) */
  display:flex;align-items:flex-end;
  pointer-events:none;
  font-family:var(--sans);
}
html.lmd-wd-ready .lmd-welcome{position:fixed}
.lmd-welcome[hidden],.lmd-welcome-again[hidden],html.lmd-wd-dismissed .lmd-welcome{display:none}
.lmd-welcome>*{pointer-events:auto}

/* Dog */
.lmd-welcome__dog{position:relative;flex:none;height:var(--wd-dog-h);margin:0 0 -2px}
.lmd-welcome__dog::after{ /* soft ground shadow so the dog sits on the page */
  content:"";position:absolute;left:14%;right:16%;bottom:2px;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(23,22,61,.22),rgba(23,22,61,0));z-index:-1}
.lmd-welcome__dog img{display:block;height:100%;width:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 6px 10px rgba(23,22,61,.14))}

/* Speech bubble */
.lmd-welcome__bubble{
  position:relative;align-self:flex-end;
  width:428px;max-width:calc(100vw - 230px);
  margin:0 0 calc(var(--wd-dog-h) * .17) -6px;
  padding:16px 22px 14px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 2px 6px rgba(23,22,61,.07),0 24px 46px -20px rgba(23,22,61,.38);
  transform-origin:0 70%;
}
.lmd-welcome__bubble::before{ /* tail pointing at the dog */
  content:"";position:absolute;left:-9px;top:30px;width:16px;height:16px;
  background:var(--paper);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);border-bottom-left-radius:4px}
.lmd-welcome__line{margin:0}
.lmd-welcome__greet{font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.2;letter-spacing:-.01em;padding-right:26px}
.lmd-welcome__hi{font-style:italic;font-weight:600;color:var(--coral)}
.lmd-welcome__msg{margin-top:5px;font-size:.96rem;line-height:1.45;color:var(--ink-2)}
.lmd-welcome__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.lmd-welcome__link{font-size:.9rem;font-weight:700;color:var(--coral-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:6px}
.lmd-welcome__link:hover{color:var(--ink)}
.lmd-welcome__ok{font:inherit;font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;
  padding:9px 18px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .18s,border-color .18s;white-space:nowrap}
.lmd-welcome__ok:hover{background:var(--coral);border-color:var(--coral)}
.lmd-welcome__x{position:absolute;top:8px;right:8px;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;font:inherit;font-size:1.45rem;line-height:1}
.lmd-welcome__x:hover{background:var(--sand);color:var(--ink)}
/* Controls only make sense once the script is running */
html:not(.lmd-wd-ready) .lmd-welcome__ok,html:not(.lmd-wd-ready) .lmd-welcome__x{display:none}
html:not(.lmd-wd-ready) .lmd-welcome__greet{padding-right:0}

/* "Say hi again" button after dismiss */
.lmd-welcome-again{position:fixed;left:16px;bottom:16px;z-index:40;width:58px;height:58px;padding:0;border-radius:50%;
  border:2px solid var(--paper);cursor:pointer;
  background:var(--sand) url(welcome-dog.png) no-repeat;background-size:136px auto;background-position:-40px -4px;
  box-shadow:0 2px 6px rgba(23,22,61,.12),0 12px 24px -12px rgba(23,22,61,.45);transition:transform .2s}
.lmd-welcome-again:hover{transform:translateY(-2px)}
html:not(.lmd-wd-ready) .lmd-welcome-again{display:none}


/* ---------- Motion (only with JS, only when motion is welcome) ---------- */
@keyframes lmdWdUp{0%{opacity:0;transform:translateY(46px)}60%{opacity:1;transform:translateY(-7px)}82%{transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes lmdWdPop{from{opacity:0;transform:scale(.86) translateY(6px)}to{opacity:1;transform:none}}
@keyframes lmdWdFade{from{opacity:0}to{opacity:1}}
@keyframes lmdWdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lmdWdShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.92);opacity:.8}}
@keyframes lmdWdOut{to{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes lmdWdFailsafe{to{visibility:visible}}

@media (prefers-reduced-motion:no-preference){
  /* Avoid a flash before the script runs; reveal anyway after 3s if it never does */
  html.lmd-wd-js:not(.lmd-wd-ready) .lmd-welcome{visibility:hidden;animation:lmdWdFailsafe 0s 3s forwards}

  .lmd-welcome.is-enter .lmd-welcome__dog{animation:lmdWdUp .75s cubic-bezier(.3,.7,.4,1) .35s both}
  .lmd-welcome.is-enter .lmd-welcome__bubble{animation:lmdWdPop .42s cubic-bezier(.2,.8,.3,1.15) 1.55s both}
  .lmd-welcome.is-enter .lmd-welcome__ch{animation:lmdWdFade .12s linear both}   /* per-char delay set inline */
  .lmd-welcome.is-enter .lmd-welcome__actions,
  .lmd-welcome.is-enter .lmd-welcome__x{animation:lmdWdFade .4s ease var(--wd-actions-delay,3.6s) both}

  .lmd-welcome.is-return .lmd-welcome__dog{animation:lmdWdUp .6s cubic-bezier(.3,.7,.4,1) both}
  .lmd-welcome.is-return .lmd-welcome__bubble{animation:lmdWdPop .35s cubic-bezier(.2,.8,.3,1.15) .35s both}

  .lmd-welcome.is-idle .lmd-welcome__dog img{animation:lmdWdBob 3.2s ease-in-out infinite}
  .lmd-welcome.is-idle .lmd-welcome__dog::after{animation:lmdWdShadow 3.2s ease-in-out infinite}

  .lmd-welcome.is-leaving .lmd-welcome__bubble{animation:lmdWdOut .22s ease-in forwards}
  .lmd-welcome.is-leaving .lmd-welcome__dog{animation:lmdWdOut .3s ease-in .08s forwards}
  .lmd-welcome-again.is-in{animation:lmdWdPop .3s ease-out both}
}
html.static .lmd-welcome *,html.static .lmd-welcome{animation:none!important}

/* ---------- Sizes ---------- */
@media (max-width:980px){
  .lmd-welcome{--wd-dog-h:180px}
  .lmd-welcome__bubble{width:340px}
}
@media (max-width:700px){
  .lmd-welcome{--wd-dog-h:142px;left:2px;right:8px}
  .lmd-welcome__bubble{flex:1 1 auto;min-width:0;width:auto;max-width:280px;margin:0 0 14px -8px;padding:11px 14px 10px;border-radius:18px}
  .lmd-welcome__bubble::before{top:30px;left:-8px;width:14px;height:14px}
  .lmd-welcome__greet{font-size:.95rem;padding-right:20px}
  .lmd-welcome__msg{font-size:.88rem;line-height:1.36;margin-top:3px}
  .lmd-welcome__actions{margin-top:8px;justify-content:flex-end}
  .lmd-welcome__link{display:none}   /* the hero CTA right above already links to the guide; keeps the bubble short */
  .lmd-welcome__ok{font-size:.82rem;padding:7px 14px}
  .lmd-welcome__x{top:3px;right:3px;width:32px;height:32px;font-size:1.3rem}
  .lmd-welcome-again{width:50px;height:50px;left:12px;bottom:12px;background-size:118px auto;background-position:-35px -4px}
}