/* Piku Companion — isolated sticky-bar character system.
   Presentation only; payment/download access stays in pikupages-core. */

@media (max-width:767.98px){
  .piku-mobile-buy,
  .piku-download-sticky{
    --piku-companion-stage-top:-86px;
    --piku-companion-size:88px;
    --piku-companion-sit-size:98px;
    --piku-companion-cta-size:94px;
  }

  .piku-mobile-buy{
    grid-template-columns:minmax(112px,.75fr) minmax(0,1.25fr);
    min-height:80px;
    padding:11px 12px;
  }
  .piku-mobile-buy__copy{
    min-width:112px;
    padding-left:52px;
  }
  .piku-mobile-buy:before,
  .piku-download-sticky:before{
    border-color:#365e50;
    background:
      radial-gradient(circle at 18% -35%,#f6dba21a 0 24%,transparent 48%),
      linear-gradient(135deg,#10382efb,#1b4a3afb);
    box-shadow:0 16px 38px #102f2738,0 1px 0 #ffffff1c inset,0 -1px 0 #081d171c inset;
  }
  .piku-mobile-buy:after,
  .piku-download-sticky:after{
    left:14px;
    right:14px;
    background:linear-gradient(90deg,transparent,#f5e5b54d 12%,#fff6dca8 48%,#f5e5b53b 86%,transparent);
  }

  .piku-walk-guide{
    --piku-stage-baseline-inset:7px;
    --piku-stage-home-inset:14px;
    position:absolute;
    display:block;
    left:8px;
    right:8px;
    top:var(--piku-companion-stage-top);
    height:94px;
    z-index:6;
    overflow:visible;
    pointer-events:none;
    filter:none!important;
  }
  .piku-walk-guide:before{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    bottom:7px;
    height:1px;
    border-radius:99px;
    background:linear-gradient(90deg,transparent,#fff1c92e 12%,#fff8dd65 50%,#fff1c92e 88%,transparent);
    opacity:.88;
  }
  .piku-walk-guide__traveller{
    position:absolute;
    left:0;
    width:var(--piku-companion-size);
    height:94px;
    bottom:0;
    transform-origin:50% 100%;
    will-change:transform;
  }
  .piku-spine-canvas,
  .piku-svg-v4-fallback{
    position:absolute;
    left:0;
    bottom:0;
    pointer-events:none;
  }
  .piku-spine-canvas{
    z-index:3;
    display:block;
    max-width:none;
    background:transparent;
  }
  .piku-spine-canvas[hidden],
  .piku-svg-v4-fallback[hidden]{
    display:none!important;
  }
  .piku-svg-v4-fallback{
    inset:0;
    z-index:2;
  }
  .piku-walk-guide__pose{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    opacity:0;
    transform-origin:50% 100%;
    pointer-events:none;
  }
  .piku-walk-guide__pose .piku-rig{
    display:block;
    width:var(--piku-companion-size);
    height:auto;
    max-width:none;
    filter:drop-shadow(0 5px 5px #061b151f);
    overflow:visible;
  }
  .piku-walk-guide__pose--sit{
    top:22px;
    bottom:-22px;
  }
  .piku-walk-guide__pose--sit .piku-rig{
    width:var(--piku-companion-sit-size);
  }
  .piku-walk-guide__pose--cta-sit{
    top:18px;
    bottom:-18px;
  }
  .piku-walk-guide__pose--cta-sit .piku-rig{
    width:var(--piku-companion-cta-size);
  }
  .piku-walk-guide__pose--point{
    --piku-eye-x:2px;
    --piku-eye-y:1px;
  }
  .piku-walk-guide__pose--sit,
  .piku-walk-guide__pose--cta-sit{
    --piku-eye-x:0px;
    --piku-eye-y:1px;
  }
  .piku-walk-guide .piku-rig__sad-mouth{opacity:0}
  .piku-rig--sit .piku-rig__shadow,
  .piku-rig--cta-sit .piku-rig__shadow{
    opacity:0;
  }
  .piku-rig--sit .piku-rig__body,
  .piku-rig--cta-sit .piku-rig__body{
    transform:translateY(10px);
  }
  .piku-rig--sit .piku-rig__head,
  .piku-rig--cta-sit .piku-rig__head{
    transform:translateY(9px);
  }
  .piku-rig--sit .piku-rig__sit-legs,
  .piku-rig--cta-sit .piku-rig__sit-legs{
    transform:translateY(7px);
  }
  .piku-rig--sit .piku-rig__arm,
  .piku-rig--cta-sit .piku-rig__arm{
    transform-box:fill-box;
    transform-origin:50% 10%;
  }
  .piku-rig--sit .piku-rig__arm--left,
  .piku-rig--cta-sit .piku-rig__arm--left{
    transform:translate(2px,5px) rotate(-7deg);
  }
  .piku-rig--sit .piku-rig__arm--right{
    transform:translate(-2px,7px) rotate(8deg);
  }

  /* Explicit state visibility; the engine also sets opacity with GSAP. */
  [data-piku-companion-state="walk"] .piku-walk-guide__pose--walk{opacity:1}
  [data-piku-companion-state="home-sit"] .piku-walk-guide__pose--sit{opacity:1}
  [data-piku-companion-state="point"] .piku-walk-guide__pose--point{opacity:1}
  [data-piku-companion-state="cta-sit"] .piku-walk-guide__pose--cta-sit{opacity:1}

  /* Walk cycle: motion happens only while travelling. */
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__leg{
    transform-box:fill-box;
    transform-origin:50% 10%;
  }
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__leg--left{animation:piku-v3-leg-left .30s infinite alternate ease-in-out}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__leg--right{animation:piku-v3-leg-right .30s infinite alternate ease-in-out}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__arm{transform-box:fill-box;transform-origin:50% 10%}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__arm--left{animation:piku-v3-arm-left .30s infinite alternate ease-in-out}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__arm--right{animation:piku-v3-arm-right .30s infinite alternate ease-in-out}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__body{animation:piku-v3-body-step .30s infinite alternate ease-in-out}
  .is-piku-walking .piku-walk-guide__pose--walk .piku-rig__head{animation:piku-v3-head-step .30s infinite alternate ease-in-out}

  /* A living seated pose: breathing is very small; emotions are finite. */
  [data-piku-companion-state="home-sit"] .piku-walk-guide__pose--sit .piku-rig__body,
  [data-piku-companion-state="cta-sit"] .piku-walk-guide__pose--cta-sit .piku-rig__body{
    animation:piku-v3-breathe 4.6s infinite ease-in-out;
  }
  [data-piku-emotion="blink"] .piku-rig__eyes{transform-box:fill-box;transform-origin:center;animation:piku-v3-blink .52s 1 ease-in-out}
  [data-piku-emotion="leg-swing"] .piku-rig__sit-leg--right{transform-box:fill-box;transform-origin:50% 7%;animation:piku-v3-leg-swing .68s 2 ease-in-out}
  [data-piku-emotion="curious"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(9px) rotate(6deg)}
  [data-piku-emotion="curious"] .piku-walk-guide__pose--sit{--piku-eye-x:1.8px;--piku-eye-y:1.3px}
  [data-piku-emotion="happy"] .piku-rig__mouth,
  [data-piku-emotion="delighted"] .piku-rig__mouth{transform-box:fill-box;transform-origin:center;transform:translateY(-1px) scale(1.07,1.12)}
  [data-piku-emotion="happy"] .piku-rig__cheeks,
  [data-piku-emotion="delighted"] .piku-rig__cheeks{opacity:1;filter:saturate(1.18)}
  [data-piku-emotion="happy"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(10px) rotate(-3deg)}
  [data-piku-emotion="delighted"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(8px) rotate(-5deg)}
  [data-piku-emotion="delighted"] .piku-walk-guide__pose--sit .piku-rig__sit-leg--right{transform-box:fill-box;transform-origin:50% 7%;animation:piku-v3-leg-swing .56s 3 ease-in-out}
  [data-piku-emotion="thinking"] .piku-rig__brows{transform-box:fill-box;transform-origin:center;transform:translateY(-2px) rotate(-2deg)}
  [data-piku-emotion="thinking"] .piku-walk-guide__pose--sit{--piku-eye-x:-1.5px;--piku-eye-y:-1px}
  [data-piku-emotion="thinking"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(9px) rotate(-4deg)}
  [data-piku-emotion="pensive"] .piku-rig__brows{transform-box:fill-box;transform-origin:center;transform:translateY(3px) scaleY(.88)}
  [data-piku-emotion="pensive"] .piku-rig__mouth{transform-box:fill-box;transform-origin:center;transform:translateY(2px) scale(1,.78)}
  [data-piku-emotion="pensive"] .piku-walk-guide__pose--sit{--piku-eye-x:-.5px;--piku-eye-y:2.2px}
  [data-piku-emotion="soft-sad"] .piku-rig__brows{transform-box:fill-box;transform-origin:center;transform:translateY(4px) scale(.96,.82)}
  [data-piku-emotion="soft-sad"] .piku-rig__mouth{opacity:0}
  [data-piku-emotion="soft-sad"] .piku-rig__sad-mouth{opacity:1}
  [data-piku-emotion="soft-sad"] .piku-walk-guide__pose--sit{--piku-eye-x:-.3px;--piku-eye-y:2.3px}
  [data-piku-emotion="soft-sad"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(11px) rotate(-2deg)}
  [data-piku-emotion="notice"] .piku-walk-guide__pose--sit{--piku-eye-x:2.5px;--piku-eye-y:.2px}
  [data-piku-emotion="notice"] .piku-walk-guide__pose--sit .piku-rig__head{transform:translateY(8px) rotate(7deg)}
  [data-piku-emotion="waiting"] .piku-rig__brows{transform-box:fill-box;transform-origin:center;transform:translateY(2px) scaleY(.92)}
  [data-piku-emotion="waiting"] .piku-rig__mouth{transform-box:fill-box;transform-origin:center;transform:translateY(1px) scale(1,.86)}
  [data-piku-emotion="waiting"] .piku-walk-guide__pose--cta-sit{--piku-eye-x:2px;--piku-eye-y:1.8px}

  /* CTA sitting pose is intentionally perched on the button's top-left edge. */
  .piku-companion-cue{
    position:absolute;
    z-index:8;
    left:60px;
    top:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:24px;
    padding:4px 8px;
    border:1px solid #eadfbe;
    border-radius:999px;
    background:#fffdf5f2;
    color:#204738;
    box-shadow:0 8px 18px #0a2b221c;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
    opacity:0;
    transform:translateY(4px) scale(.92);
    white-space:nowrap;
    pointer-events:none;
  }
  .piku-companion-cue:after{
    content:"";
    position:absolute;
    left:9px;
    bottom:-4px;
    width:7px;
    height:7px;
    border-right:1px solid #eadfbe;
    border-bottom:1px solid #eadfbe;
    background:#fffdf5;
    transform:rotate(45deg);
  }
  .piku-walk-guide__signal{
    right:-1px;
    top:32px;
    width:8px;
    height:8px;
    border-color:#ef9c76;
    box-shadow:0 0 0 0 #ef9c7630;
  }
  .piku-companion-spark{
    position:absolute;
    z-index:7;
    width:7px;
    height:7px;
    border-radius:2px;
    background:#efcf70;
    opacity:0;
    transform:rotate(45deg) scale(.4);
  }
  .piku-companion-spark--one{right:4px;top:22px}
  .piku-companion-spark--two{right:19px;top:9px;background:#ef9c76}

  .piku-mobile-buy .piku-button,
  .piku-download-sticky__button{
    overflow:hidden;
  }
  .piku-mobile-buy .piku-button:after,
  .piku-download-sticky__button:after{
    content:"";
    position:absolute;
    inset:-35% auto -35% -48%;
    width:34%;
    background:linear-gradient(105deg,transparent,#ffffffa8,transparent);
    opacity:0;
    transform:skewX(-17deg);
    pointer-events:none;
  }
  .is-piku-cta-cue .piku-button:after,
  .is-piku-cta-cue .piku-download-sticky__button:after{
    animation:piku-v3-button-sheen .68s 1 ease-out;
  }

  .piku-download-sticky .piku-walk-guide{
    top:-80px;
    --piku-stage-home-inset:44px;
  }
  .piku-download-sticky .piku-walk-guide__pose--cta-sit{
    top:16px;
    bottom:-16px;
  }

  @keyframes piku-v3-leg-left{0%{transform:rotate(10deg) translateY(0)}100%{transform:rotate(-12deg) translateY(-2px)}}
  @keyframes piku-v3-leg-right{0%{transform:rotate(-12deg) translateY(-2px)}100%{transform:rotate(10deg) translateY(0)}}
  @keyframes piku-v3-arm-left{0%{transform:rotate(-8deg)}100%{transform:rotate(10deg)}}
  @keyframes piku-v3-arm-right{0%{transform:rotate(10deg)}100%{transform:rotate(-8deg)}}
  @keyframes piku-v3-body-step{0%{transform:translateY(0) rotate(-.7deg)}100%{transform:translateY(-3px) rotate(.7deg)}}
  @keyframes piku-v3-head-step{0%{transform:translateY(0) rotate(-1.5deg)}100%{transform:translateY(-1px) rotate(1.8deg)}}
  @keyframes piku-v3-breathe{0%,100%{transform:translateY(10px) scale(1)}50%{transform:translateY(9px) scale(1.008)}}
  @keyframes piku-v3-blink{0%,40%,49%,100%{transform:scaleY(1)}45%{transform:scaleY(.10)}}
  @keyframes piku-v3-leg-swing{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(7deg)}}
  @keyframes piku-v3-button-sheen{0%{left:-48%;opacity:0}20%{opacity:.55}100%{left:118%;opacity:0}}
}

@media (prefers-reduced-motion:reduce){
  .piku-walk-guide *,
  .piku-walk-guide__pose .piku-rig *,
  .piku-mobile-buy .piku-button:after,
  .piku-download-sticky__button:after{
    animation:none!important;
    transition:none!important;
  }
}