/* =====================================================================
   coach.css — guided walkthrough overlay (js/coach.js).

   Sized for reduced vision: 19px copy and a large animated mole. The layer
   leaves the app interactive; only the mole accepts a tap to hide temporarily.
===================================================================== */
#coachLayer {
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
#coachLayer.on { opacity: 1; visibility: visible; }
#coachLayer::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:rgba(7,24,17,.58);
  opacity:0;
  transition:opacity .3s ease;
}
#coachLayer.on:not(.assistant-hidden)::before{opacity:1}
#coachLayer.leaving::before{opacity:0}

/* ---- precise target pointer ---- */
.coach-hand {
  position: fixed;
  z-index: 3;
  width:86px;
  height:116px;
  opacity:0;
  visibility:hidden;
  background:url("../art/floramenta/coach-hand.png") center/contain no-repeat;
  transition: left .28s cubic-bezier(.34, 1.3, .64, 1), top .28s cubic-bezier(.34, 1.3, .64, 1);
  filter: drop-shadow(0 3px 5px rgba(20, 45, 30, .45));
}
#coachLayer.assistant-hidden .coach-hand{
  opacity:1;
  visibility:visible;
  animation:coachHandCycle 5.7s ease-in-out infinite;
}
.coach-hand::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:-9px;
  width:70px;
  height:34px;
  translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(ellipse,#fff5a9cc 0 20%,#75d79b88 38%,transparent 72%);
  animation:coachGlowCycle 5.7s ease-in-out infinite;
}
/* Two clear bounces, then three seconds completely out of the way so any
   caption or control beneath the hand can be read. */
@keyframes coachHandCycle {
  0%,23.68%,47.36%{transform:translateY(-5px) scale(1);opacity:1}
  11.84%,35.52%{transform:translateY(7px) scale(.97);opacity:1}
  47.37%,100%{transform:translateY(-5px) scale(1);opacity:0}
}
@keyframes coachGlowCycle{
  0%,23.68%,47.36%{transform:scale(.82);opacity:.55}
  11.84%,35.52%{transform:scale(1.14);opacity:1}
  47.37%,100%{transform:scale(.82);opacity:0}
}

/* ---- Floramenta's mole assistant ---- */
.coach-assistant {
  position: fixed;
  z-index: 2;
  left:12px;
  bottom: -12px;
  width: 368px;
  height: 368px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform-origin: 8% 92%;
  filter: drop-shadow(0 10px 12px rgba(20, 45, 30, .34));
}
.coach-assistant-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#coachLayer.on .coach-assistant {
  animation: coachMoleEnter .72s cubic-bezier(.2,.82,.25,1.12) both;
}
#coachLayer.reenter .coach-assistant {
  animation: coachMoleReenter .72s cubic-bezier(.2,.82,.25,1.12) both;
}
#coachLayer.leaving .coach-assistant {
  animation: coachMoleLeave .42s cubic-bezier(.55,0,.85,.35) both;
}
#coachLayer.assistant-hidden .coach-assistant,
#coachLayer.assistant-hidden .coach-bubble{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@keyframes coachMoleEnter {
  0%   { transform:translate(-112%,38%) rotate(-22deg) scale(.32); opacity:0; }
  58%  { transform:translate(-18%,-9%) rotate(9deg) scale(1.11); opacity:1; }
  78%  { transform:translate(3%,2%) rotate(-3deg) scale(.96); }
  100% { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
}
@keyframes coachMoleReenter {
  0%   { transform:translate(-112%,38%) rotate(-22deg) scale(.32); opacity:0; }
  58%  { transform:translate(-18%,-9%) rotate(9deg) scale(1.11); opacity:1; }
  78%  { transform:translate(3%,2%) rotate(-3deg) scale(.96); }
  100% { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
}
@keyframes coachMoleLeave {
  0%   { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
  40%  { transform:translate(-8%,-7%) rotate(7deg) scale(1.05); opacity:1; }
  100% { transform:translate(-112%,38%) rotate(-22deg) scale(.32); opacity:0; }
}

/* ---- caption ---- */
.coach-bubble {
  position: fixed;
  z-index: 1;
  left: 142px;
  bottom: 350px;
  width: min(calc(100% - 158px), 282px);
  padding: 18px 20px;
  border: 3px solid #fff;
  border-radius: 24px;
  background:#fff;
  box-shadow:0 16px 42px rgba(0,0,0,.34);
  text-align: left;
  transform-origin:left bottom;
}
.coach-bubble::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-22px;
  width:32px;
  height:32px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,0 100%);
}
#coachLayer.on .coach-bubble{animation:coachBubbleEnter .35s .28s ease-out both}
#coachLayer.reenter .coach-bubble{animation:coachBubbleReenter .35s .28s ease-out both}
#coachLayer.leaving .coach-bubble{animation:coachBubbleLeave .2s ease-in both}
@keyframes coachBubbleEnter{
  from{transform:translate(-16px,10px) scale(.9);opacity:0}
  to{transform:translate(0,0) scale(1);opacity:1}
}
@keyframes coachBubbleReenter{
  from{transform:translate(-16px,10px) scale(.9);opacity:0}
  to{transform:translate(0,0) scale(1);opacity:1}
}
@keyframes coachBubbleLeave{to{transform:translate(-12px,8px) scale(.92);opacity:0}}
.coach-bubble.bottom { bottom: 350px; top: auto; }
.coach-bubble.top { top: 86px; bottom: auto; }
/* inside a dialog there is no free half: hug the very top and shrink so the
   dialog's own heading stays readable underneath */
.coach-bubble.compact {
  top:auto;
  bottom:350px;
  left: 142px;
  width: min(calc(100% - 158px), 282px);
  padding: 14px 16px;
  border-radius: 20px;
}
.coach-bubble.compact .coach-text { font-size: 16.5px; line-height: 1.3; }
.coach-text {
  margin: 0;
  color:#183b2b;
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size:19px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .coach-hand,
  #coachLayer.on .coach-assistant,
  #coachLayer.leaving .coach-assistant,
  #coachLayer.on .coach-bubble,
  #coachLayer.leaving .coach-bubble { animation: none; }
}
.coach-next{
  margin:12px 0 0;padding-top:10px;border-top:2px solid #d4e4d8;
  color:#315b42;font:900 15px/1.3 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center
}

/* High-clarity walkthrough: no character animation or soft spotlight. The
   geometric hand remains the precise pointer and the instruction is a hard
   edged text panel that never blocks the target's first tap. */
html[data-hc="1"] #coachLayer.hc-mode::before{background:rgba(0,0,0,.28)}
html[data-hc="1"] #coachLayer.hc-mode .coach-assistant{display:none}
html[data-hc="1"] #coachLayer.hc-mode .coach-hand{
  opacity:1;visibility:visible;width:86px;height:116px;filter:none;
  animation:coachHandCycle 5.7s ease-in-out infinite
}
html[data-hc="1"] #coachLayer.hc-mode .coach-hand::after{
  width:58px;height:28px;border:3px solid #000;border-radius:8px;
  background:#d8f0df;animation:coachGlowCycle 5.7s ease-in-out infinite
}
html[data-hc="1"] #coachLayer.hc-mode .coach-bubble{
  left:20px;right:20px;bottom:24px;width:auto;padding:16px 18px;
  border:3px solid #000;border-radius:10px;background:#fff;box-shadow:none
}
html[data-hc="1"] #coachLayer.hc-mode .coach-bubble::after{display:none}
html[data-hc="1"] #coachLayer.hc-mode .coach-text{
  color:#000;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:19px;font-weight:900;line-height:1.4
}
html[data-hc="1"] #coachLayer.hc-mode .coach-next{
  margin-top:12px;padding-top:10px;border-top:3px solid #000;color:#000;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:900
}
html[data-hc="1"] #coachLayer.hc-mode .coach-bubble.compact{
  left:16px;right:16px;bottom:12px;width:auto;padding:12px 14px
}