/* V172 · sharp hover growth.
   The card surface grows on hover, while text/icons stay on an untransformed layer. */

.own-vpn-page.ov-motion [data-reveal].is-in{will-change:auto!important}

@media(hover:hover) and (pointer:fine){
  /* Never transform the content-bearing element itself. */
  .own-vpn-page .ov-node,
  .own-vpn-page .ov-channel,
  .own-vpn-page .own-vpn-step,
  .own-vpn-page .own-vpn-feature,
  .own-vpn-page .own-vpn-price-card,
  .own-vpn-page .own-vpn-payment-method{
    position:relative!important;
    isolation:isolate;
    overflow:visible!important;
    transform:none!important;
    scale:1!important;
    will-change:auto!important;
  }

  .own-vpn-page .ov-node:hover,
  .own-vpn-page .ov-channel:hover,
  .own-vpn-page .own-vpn-step:hover,
  .own-vpn-page .own-vpn-feature:hover,
  .own-vpn-page .own-vpn-price-card:hover,
  .own-vpn-page .own-vpn-payment-method:hover{
    transform:none!important;
    scale:1!important;
  }

  /* A separate visual shell is what actually grows. */
  .own-vpn-page .ov-node::before,
  .own-vpn-page .ov-channel::before,
  .own-vpn-page .own-vpn-step::before,
  .own-vpn-page .own-vpn-feature::before,
  .own-vpn-page .own-vpn-price-card::before,
  .own-vpn-page .own-vpn-payment-method::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    z-index:0!important;
    pointer-events:none!important;
    border:1px solid var(--border)!important;
    border-radius:inherit!important;
    background:linear-gradient(145deg,rgb(var(--theme-rgb)/.05),rgba(255,255,255,.012) 55%,rgb(var(--theme-rgb)/.025)),color-mix(in srgb,var(--surface-solid) 91%,transparent)!important;
    -webkit-backdrop-filter:blur(14px) saturate(145%)!important;
    backdrop-filter:blur(14px) saturate(145%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.08)!important;
    opacity:1!important;
    transform:scale(1)!important;
    transform-origin:50% 50%!important;
    transition:transform .2s cubic-bezier(.2,.76,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
  }

  .own-vpn-page .ov-node:hover::before,
  .own-vpn-page .ov-channel:hover::before,
  .own-vpn-page .own-vpn-step:hover::before,
  .own-vpn-page .own-vpn-feature:hover::before,
  .own-vpn-page .own-vpn-price-card:hover::before,
  .own-vpn-page .own-vpn-payment-method:hover::before{
    transform:scale(1.018)!important;
    border-color:rgb(var(--theme-rgb)/.34)!important;
    background:linear-gradient(145deg,rgb(var(--theme-rgb)/.075),rgba(255,255,255,.018) 55%,rgb(var(--theme-rgb)/.04)),color-mix(in srgb,var(--surface-solid) 89%,transparent)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 15px 34px rgba(0,0,0,.14),0 0 22px rgb(var(--theme-rgb)/.035)!important;
  }

  /* Keep content above the animated shell and at native raster size. */
  .own-vpn-page .ov-node>* ,
  .own-vpn-page .ov-channel>* ,
  .own-vpn-page .own-vpn-step>* ,
  .own-vpn-page .own-vpn-feature>* ,
  .own-vpn-page .own-vpn-price-card>* ,
  .own-vpn-page .own-vpn-payment-method>*{
    position:relative;
    z-index:1;
    transform:none!important;
    will-change:auto!important;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
  }

  /* The visual shell owns the surface, so the content wrapper itself stays clean. */
  .own-vpn-page .ov-node,
  .own-vpn-page .ov-channel,
  .own-vpn-page .own-vpn-step,
  .own-vpn-page .own-vpn-feature,
  .own-vpn-page .own-vpn-price-card,
  .own-vpn-page .own-vpn-payment-method,
  .own-vpn-page .ov-node:hover,
  .own-vpn-page .ov-channel:hover,
  .own-vpn-page .own-vpn-step:hover,
  .own-vpn-page .own-vpn-feature:hover,
  .own-vpn-page .own-vpn-price-card:hover,
  .own-vpn-page .own-vpn-payment-method:hover{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Keep the older glass runtime from re-transforming these cards. */
  .own-vpn-page :is(.ov-channel,.own-vpn-step,.own-vpn-feature)[data-liquid-glass]:hover,
  .own-vpn-page :is(.ov-channel,.own-vpn-step,.own-vpn-feature)[data-liquid-glass]:active{
    transform:none!important;
    scale:1!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .own-vpn-page .ov-node::before,
  .own-vpn-page .ov-channel::before,
  .own-vpn-page .own-vpn-step::before,
  .own-vpn-page .own-vpn-feature::before,
  .own-vpn-page .own-vpn-price-card::before,
  .own-vpn-page .own-vpn-payment-method::before{transition:none!important;transform:none!important}
}