/* Whale motion system · 2026-11-05. Progressive enhancement, no libraries. */
@media (prefers-reduced-motion: no-preference){
  :root{--whale-ease:cubic-bezier(.22,1,.36,1)}
  /* Expressive but restrained first paint. */
  html.whale-motion-on .hero__copy h1{
    animation:whale-arrive .8s var(--whale-ease) both;
  }
  html.whale-motion-on .hero__copy h1 span{
    display:inline-block;
    animation:whale-arrive .84s .12s var(--whale-ease) both;
  }
  html.whale-motion-on .hero__facts{
    animation:whale-arrive .68s .18s var(--whale-ease) both;
  }
  html.whale-motion-on .hero__lead{
    animation:whale-arrive .7s .27s var(--whale-ease) both;
  }
  html.whale-motion-on .hero__connect{
    /* Do not hold the animation's final transform: hover must remain interactive. */
    animation:whale-arrive .72s .34s var(--whale-ease) backwards;
  }
  html.whale-motion-on .hero__terms,
  html.whale-motion-on .hero__proof{
    animation:whale-arrive .72s .42s var(--whale-ease) both;
  }
  html.whale-motion-on .phone-demo{
    animation:whale-phone-enter .95s .3s var(--whale-ease) both;
  }
  html.whale-motion-on .phone-demo__shell{
    animation:whale-breathe 6s 1.4s ease-in-out infinite;
  }
  /* Only JavaScript-marked, offscreen content is initially hidden. */
  html.whale-motion-on .whale-reveal-pending{
    opacity:0;
    transform:translate3d(0,24px,0);
    transition:opacity .72s var(--whale-ease),transform .72s var(--whale-ease);
    transition-delay:var(--whale-delay,0ms);
  }
  html.whale-motion-on .whale-reveal-pending.whale-in-view{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  /* A subtle tactile interaction without reintroducing heavy shadows. */
  @media (hover:hover) and (pointer:fine){
    :is(.account-card,.renew-plan){
      transition:border-color .26s ease,background-color .26s ease;
    }
    /* Tariff cards are stationary; only their buttons animate. */
    :is(.plan-card,.trial--featured,.plans-common){
      transition:none;
    }
    :is(.plan-card,.trial--featured):hover{
      transform:none!important;
    }
    .account-card:hover{
      border-color:#a5adb8!important;
    }
    :is(.btn,.topbar__account,.download-links a,.step-downloads a,.connect-downloads a){
      transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .28s var(--whale-ease)!important;
    }
    .btn:not(:disabled):hover{transform:translate3d(0,-2px,0)!important}
    .btn:not(:disabled):active{transform:translate3d(0,0,0) scale(.985)!important}
    /* Beat the old flat-theme transform:none!important declarations. */
    html:not([data-theme="dark"]) .plans :is(.plan-card,.trial--featured) .btn:not(:disabled){
      transition:transform .3s var(--whale-ease),background-color .2s ease,border-color .2s ease!important;
      transform:translate3d(0,0,0)!important;
    }
    html:not([data-theme="dark"]) .plans :is(.plan-card,.trial--featured) .btn:not(:disabled):hover{
      transform:translate3d(0,-3px,0) scale(1.012)!important;
    }
    html:not([data-theme="dark"]) .plans :is(.plan-card,.trial--featured) .btn:not(:disabled):active{
      transform:translate3d(0,0,0) scale(.985)!important;
    }
    .btn > span[aria-hidden="true"],.btn > span:not([class]){
      display:inline-block;
      transition:transform .3s var(--whale-ease);
    }
    .btn:hover > span[aria-hidden="true"],.btn:hover > span:not([class]){
      transform:translate3d(4px,0,0);
    }
    nav a:not(.topbar__account):not(.account-back){
      transition:color .2s ease;
    }
  }
  .faq-list details[open] > p{
    animation:whale-faq-in .3s var(--whale-ease) both;
  }
  :is(.checkout,.renew-dialog,.telegram-dialog,.auth-flow-dialog,.logout-confirm-dialog)[open]{
    animation:whale-dialog-in .32s var(--whale-ease) both;
  }
  /* Reuse native cross-document transitions where implemented. */
  @view-transition{navigation:auto}
  @keyframes whale-arrive{
    from{opacity:0;transform:translate3d(0,19px,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }
  @keyframes whale-phone-enter{
    from{opacity:0;transform:translate3d(30px,16px,0) rotate(2deg) scale(.96)}
    to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
  }
  @keyframes whale-breathe{
    0%,100%{translate:0 0}
    50%{translate:0 -7px}
  }
  @keyframes whale-faq-in{
    from{opacity:0;transform:translate3d(0,-6px,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }
  @keyframes whale-dialog-in{
    from{opacity:0;transform:translate3d(0,12px,0) scale(.985)}
    to{opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
  /* The account is dynamically populated after authentication. */
  html.whale-motion-on .account-login:not(.is-hidden){
    animation:whale-arrive .62s var(--whale-ease) both;
  }
  html.whale-motion-on .cabinet:not(.is-hidden) .account-card{
    animation:whale-arrive .66s var(--whale-ease) both;
  }
  html.whale-motion-on .cabinet:not(.is-hidden) .account-right .account-card{
    animation-delay:.1s;
  }
}
@media (prefers-reduced-motion:reduce){
  .whale-reveal-pending{opacity:1!important;transform:none!important;transition:none!important}
}

/* Main hero CTA: override legacy !important transform:none on blue buttons.
   Scoped to the exact CTA so tariff cards and other animations stay unchanged. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  html.whale-motion-on body .hero .hero__copy button.btn.btn--blue.hero__connect{
    transition:transform .29s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease!important;
    animation-fill-mode:backwards;
    transform:translate3d(0,0,0)!important;
  }
  html.whale-motion-on body .hero .hero__copy button.btn.btn--blue.hero__connect:hover{
    transform:translate3d(0,-3px,0) scale(1.012)!important;
  }
  html.whale-motion-on body .hero .hero__copy button.btn.btn--blue.hero__connect:active{
    transform:translate3d(0,0,0) scale(.985)!important;
    transition-duration:.12s!important;
  }
}