/* V10 — premium mobile contact dock micro-interactions */
@media (max-width:760px){
  .mobile-contact-dock{
    position:fixed;
    isolation:isolate;
    overflow:visible;
    border:1px solid transparent;
    background:
      linear-gradient(rgba(250,252,249,.93),rgba(250,252,249,.93)) padding-box,
      linear-gradient(115deg,#b8da73 0%,#77c8ad 33%,#4bb7d3 67%,#89c77f 100%) border-box;
    background-size:100% 100%,220% 220%;
    box-shadow:
      0 12px 38px rgba(10,41,46,.18),
      0 1px 0 rgba(255,255,255,.9) inset;
    backdrop-filter:blur(22px) saturate(1.15);
    -webkit-backdrop-filter:blur(22px) saturate(1.15);
    animation:dockEnter .58s cubic-bezier(.2,.75,.2,1) both,dockBorderFlow 8s linear infinite;
  }

  .mobile-contact-dock::before{
    content:"";
    position:absolute;
    left:9%; right:9%; bottom:-10px;
    height:24px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(54,163,180,.18),rgba(54,163,180,0) 70%);
    filter:blur(8px);
    z-index:-1;
    pointer-events:none;
  }

  .mobile-contact-dock::after{
    content:"";
    position:absolute;
    top:0; left:11%; right:11%;
    height:1px;
    background:linear-gradient(90deg,transparent,#cde99c,#76d6d0,#7cc4e7,transparent);
    opacity:.95;
    pointer-events:none;
  }

  .mobile-contact-dock a{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid rgba(82,126,113,.08);
    transition:
      transform .18s cubic-bezier(.2,.75,.2,1),
      box-shadow .22s ease,
      background .22s ease,
      color .22s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-contact-dock a::before{
    content:"";
    position:absolute;
    top:-35%; bottom:-35%;
    left:-55%;
    width:34%;
    transform:skewX(-18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
    opacity:0;
    z-index:-1;
    animation:dockShimmer 5.8s ease-in-out infinite;
    pointer-events:none;
  }

  .mobile-contact-dock a:nth-child(2)::before{animation-delay:1.35s}
  .mobile-contact-dock a:nth-child(3)::before{animation-delay:2.7s}

  .mobile-contact-dock a:active{
    transform:scale(.965) translateY(1px);
  }

  .mobile-contact-dock a:first-child{
    background:rgba(255,255,255,.58);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  }

  .mobile-contact-dock a:first-child .ui-icon{
    transform-origin:55% 55%;
    animation:phoneRing 5.4s ease-in-out infinite;
  }

  .mobile-contact-dock .dock-whatsapp{
    background:linear-gradient(135deg,#edf6e1 0%,#e3f2dc 55%,#e6f4ed 100%);
    box-shadow:
      0 8px 20px rgba(62,123,75,.06),
      0 1px 0 rgba(255,255,255,.72) inset;
  }

  .mobile-contact-dock .dock-whatsapp::after{
    content:"";
    position:absolute;
    right:11px; top:10px;
    width:6px; height:6px;
    border-radius:50%;
    background:#67a84e;
    box-shadow:0 0 0 0 rgba(103,168,78,.32);
    animation:whatsappPulse 2.8s ease-out infinite;
  }

  .mobile-contact-dock .dock-whatsapp .ui-icon{
    animation:whatsappBreathe 3.1s ease-in-out infinite;
  }

  .mobile-contact-dock .dock-project{
    color:#fff;
    background:linear-gradient(120deg,#15363d 0%,#174b54 43%,#196578 100%);
    background-size:180% 180%;
    border-color:rgba(114,203,211,.16);
    box-shadow:
      0 9px 22px rgba(8,49,58,.16),
      0 1px 0 rgba(255,255,255,.12) inset;
    animation:projectGradient 7s ease-in-out infinite;
  }

  .mobile-contact-dock .dock-project::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(135,224,206,.12);
    pointer-events:none;
  }

  .mobile-contact-dock .dock-project .ui-icon{
    filter:drop-shadow(0 0 8px rgba(126,219,214,.20));
  }

  @keyframes dockEnter{
    from{opacity:0;transform:translateY(18px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  @keyframes dockBorderFlow{
    0%{background-position:0 0,0% 50%}
    50%{background-position:0 0,100% 50%}
    100%{background-position:0 0,0% 50%}
  }

  @keyframes dockShimmer{
    0%,68%{left:-55%;opacity:0}
    72%{opacity:.15}
    78%{opacity:.72}
    88%{left:125%;opacity:.16}
    100%{left:125%;opacity:0}
  }

  @keyframes phoneRing{
    0%,72%,100%{transform:rotate(0) scale(1)}
    75%{transform:rotate(-8deg) scale(1.04)}
    78%{transform:rotate(8deg) scale(1.04)}
    81%{transform:rotate(-6deg) scale(1.03)}
    84%{transform:rotate(5deg) scale(1.02)}
    88%{transform:rotate(0) scale(1)}
  }

  @keyframes whatsappBreathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.075)}
  }

  @keyframes whatsappPulse{
    0%{box-shadow:0 0 0 0 rgba(103,168,78,.34);opacity:1}
    68%{box-shadow:0 0 0 9px rgba(103,168,78,0);opacity:.85}
    100%{box-shadow:0 0 0 0 rgba(103,168,78,0);opacity:1}
  }

  @keyframes projectGradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-contact-dock,
  .mobile-contact-dock a::before,
  .mobile-contact-dock a:first-child .ui-icon,
  .mobile-contact-dock .dock-whatsapp::after,
  .mobile-contact-dock .dock-whatsapp .ui-icon,
  .mobile-contact-dock .dock-project{
    animation:none!important;
  }
  .mobile-contact-dock a{transition:none!important}
}